/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*Aquí establezco colores y fuentes que van a permanecer en todo el responsive*/
:root{
	--colorPrimero: #000000;
	--colorSegundo: #ffffff;
	--colorTercero: #eeb104;
	--colorCuarto: #00C2CB;
	--fuenteUno: 'anybody';
}

@font-face {
	font-family: 'anybody';
	src: url('../rsc/fonts/Anybody-VariableFont_wdth,wght.ttf') format('truetype');
}

/*CSS DEL COMUN DEL RESPONSIVE DEL HEADER.PHP*/
*{
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

body{
	margin: 0;
	padding: 0;
}

aside{
	display: none;
}

nav{
	width: 100%;
	background-color: var(--colorPrimero);
}

.listaMenu{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: space-evenly;
	    -ms-flex-pack: space-evenly;
	        justify-content: space-evenly;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

li{
	list-style: none;
}

.enlace{
	text-decoration: none;
}

.enlace:hover{
	color: var(--colorCuarto);
}

.enlacesNav{
	color: var(--colorSegundo);
	font-family: var(--fuenteUno);
}


/*CSS DEL FOOTER*/

.menuOculto{
	display: none;
}

.pie{
	width: 100%;
	background-color: var(--colorPrimero);
}

.pFooter{
	color: var(--colorSegundo);
	font-family: var(--fuenteUno);
	text-align: center;
}


/*RESPONSIVE*/

/*smartTV*/
@media screen and (min-width: 1921px) {
nav{
	height: 12vh;
}

.enlacesNav{	
	font-size: 32px;	
}

.imagenNav{
	width: 90px;
	height: 90px;
	margin-top: 15px;
}

/*CSS DEL FOOTER*/

.pie{
	height: 10vh;
}

.pFooter{
	font-size: 32px;
}
}







/*sobremesa*/
@media screen and (max-width: 1920px) {
nav{
	height: 12vh;
}

.enlacesNav{	
	font-size: 24px;	
}

.imagenNav{
	width: 60px;
	height: 60px;
	margin-top: 10px;
}


/*CSS DEL FOOTER*/

.pie{
	height: 5vh;
}

.pFooter{
	font-size: 18px;
}
}









/*portatiles*/
@media screen and (max-width: 992px) {
nav{
	height: 11vh;
}

.enlacesNav{	
	font-size: 24px;	
}

.imagenNav{
	width: 60px;
	height: 60px;
	margin-top: 5px;
}

/*CSS DEL FOOTER*/

.pie{
	height: 5vh;
}

.pFooter{
	font-size: 18px;
}
}







/*tablets*/
@media screen and (max-width: 768px) {
nav{
	height: 6vh;
}

.listaMenu{
	display: none;
}

.enlacesNav{
	font-size: 24px;
}


/*CSS DEL NAV OCULTO*/

.menuOculto{
	display: block;
	width: 100%;
}

.menuDesplegable{
	width: 250px;
	height: 280px;
	background-color: var(--colorPrimero);
	position: absolute;
	top: 5%;
	z-index: 1;
	display: none;
	padding-top: 20px;
}

.lineaMenu{
	color: var(--colorSegundo);
}

.iconoMenu{
	width: 40px;
	height: 40px;
	margin: 4px 0 0 10px;
}

.btnEquis{
	position: absolute;
	left: 110%;
}


/*CSS DEL FOOTER*/

.pie{
	height: 5vh;
}
}










/*telefonos*/
@media screen and (max-width: 476px) {
nav{
	height: 7vh;
}

.listaMenu{
	display: none;
}

.enlacesNav{
	font-size: 24px;
}


/*CSS DEL NAV OCULTO*/

.menuOculto{
	display: block;
	width: 100%;
}

.menuDesplegable{
	width: 250px;
	height: 280px;
	background-color: var(--colorPrimero);
	position: absolute;
	top: 6%;
	display: none;
	padding-top: 20px;
}

.lineaMenu{
	color: var(--colorSegundo);
}

.iconoMenu{
	width: 40px;
	height: 40px;
	margin: 4px 0 0 10px;
}


/*CSS DEL FOOTER*/

.pie{
	height: 5vh;
}

.pFooter{
	font-size: 14px;
}
}











/*relojes*/
@media screen and (max-width: 320px) {

nav{
	height: 15vh;
}

.listaMenu{
	display: none;
}

.enlacesNav{
	font-size: 18px;
}


/*CSS DEL NAV OCULTO*/

.menuOculto{
	display: block;
	width: 100%;
}

.menuDesplegable{
	width: 160px;
	height: 150px;
	background-color: var(--colorPrimero);
	position: absolute;
	top: 15%;
	display: none;
	padding-top: 10px;
}

.lineaMenu{
	display: none;
}

.iconoMenu{
	width: 40px;
	height: 40px;
	margin-top: 4px;
}


/*CSS DEL FOOTER*/

.pie{
	height: 10vh;
}

.pFooter{
	font-size: 14px;
}


}


/*ANIMACIONES*/