html{
	font-size: 10px;
}
.page-inicio{
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.container-inicio{
	width: 100%;
	height: 310px;
	background: white;
	border-radius: 2.8em;
	position: relative;
}
.container-inicio h2{
	font-size: 2.5em;
	color: black;
	font-weight: bold;
}
.container-inicio p{
	font-size: 1.8em;
	margin-top: 1.0em;
}
.container-inicio .cargar-mas-text{
	left: 0;
	font-size: 14px;
}
/* Menu inicio */
.container-select-modulo{
	position: relative;
	padding: 3em;
	border-radius: 2.8em;
}

.menu-wrapper{
	display: flex;
	margin-top: 3em;
}
.menu-inicio{
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	border-radius: 50%;
	/*margin-right: 1.5em;*/
	width: 110px;
	cursor: pointer;
}
.menu-inicio:hover > ion-icon{
	background: var(--darkBlue);
	color: white;
	transition: .5s;
	animation-duration: .3s;
  	animation-name: subirIcono;
}

@keyframes subirIcono {
	from{
		top:  -15px;
	}
	to{
		top: 0;
	}
}
@keyframes bajarNombreModulo {
	from{
		top:  5px;
	}
	to{
		top: 0;
	}
}

.menu-inicio:hover > span{
	visibility: visible;
	animation-name: bajarNombreModulo;
	animation-duration: .1s;
}
.menu-inicio ion-icon{
	font-size: 2.8em;
	text-align: center;
	padding: .5em;
	background: red;
	background: #f2f2f2;
	border-radius: 50%;
	position: relative;
}
.menu-inicio span{
	display: block;
	visibility: hidden;
	text-align: center;
	font-size: 1em;
	position: relative;
}

/* Container select empresa */
.container-select-empresa{
	width: 100%;
	height: 310px;
	position: relative;
	padding: 3em;
	border-radius: 2.8em;
	background: white;
	visibility: hidden;
}
.close-select-empresa{
	display: block;
	font-size: 1.4em;
	text-align: center;
	cursor: pointer;
	position: absolute;
	top: -1em;
	left: 0;
	right: 0;
}
.empresas-wrapper{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 2em;
	overflow: hidden;
	overflow-y: auto;
	height: 150px;
	padding-top: 1em;
}
.empresas-wrapper::-webkit-scrollbar {
    display: none;
}
.container-select-empresa.subirContainerEmpresa{
	background: white;
	top: -310px;
	visibility: visible;
	animation:subircontainer .1s;
}
@keyframes subircontainer{
	from{
		top: 0;
	}
	to{
		top: -310px;
	}
}

.menu-empresa{
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	border-radius: 50%;
	/*margin-right: 1.5em;*/
	width: 110px;
	height: 90px;
	cursor: pointer;
	margin-bottom: .5em;
}
.menu-empresa:hover > ion-icon{
	background: var(--darkBlue);
	color: white;
	transition: .5s;
	animation-duration: .3s;
  	animation-name: subirIcono;
}
.menu-empresa:hover > span{
	visibility: visible;
	animation-name: bajarNombreModulo;
	animation-duration: .1s;
}
.menu-empresa ion-icon{
	font-size: 2.8em;
	text-align: center;
	padding: .5em;
	background: red;
	background: #f2f2f2;
	border-radius: 50%;
	position: relative;
}
.menu-empresa span{
	display: block;
	text-align: center;
	font-size: 1.2em;
	position: relative;
}

/* Menu left */
.menu-left-logo{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
ion-icon{
	font-size: 2em;
	pointer-events: none;
}

/* Modales */
.modal-btn-close{
	font-size: 13px;
}
.btnCancel{
	margin-left: 0;
}
.modal a{
	color: var(--darkBlue);
	cursor: pointer;
}
.modal a:hover{
	text-decoration: underline;
}


@media screen and (min-width:  768px){

	.container-inicio{
		width: 600px;
		box-shadow: 0px 16px 24px rgb(0 0 0 / 6%), 0px 2px 6px rgb(0 0 0 / 4%), 0px 0px 1px rgb(0 0 0 / 4%);
	}
	.menu-inicio span{
		font-size: 1.3em;
	}
	.close-select-empresa{
		top: 0;
	}
  
}
@media screen and (min-width:  1280px){

}