@charset "UTF-8";

/*header#menu a:link,header#menu a:visited,aside a:link,aside a:visited{color:white}
*/
header#responsive>nav>div.submenu{height:auto}
header#responsive>nav>a:link,header#responsive>nav>a:visited,header#responsive>nav>a > div{color:black;font-weight: bold}

header#responsive div>nav>div{overflow:hidden;height:100px}
header#responsive nav>span{padding:15px}
header#responsive nav>nav>a div{padding:10px 0 10px 50px;border:1px solid red}

header#responsive div nav{box-shadow:inset 0px 0px 10px rgba(0,0,0,.3)}
header#responsive nav div nav>a{padding:10px 30px;font-size:95%}
header#responsive nav>a:link,header#responsive nav>a:visited{background-color:lightgrey;border-bottom:3px white solid}
header#responsive nav>a:hover,header#responsive nav>a:active{background-color:#5991b3;color:white}
header#responsive .submenu div{padding:10px 10px 20px;}

header#responsive #logo-responsive{position:relative;top:10px;left:10px}

header#responsive {
    box-shadow: 0 5px 10px rgba(0,0,0,0);}
    
/*###### MOBILES ######*/
/*@media (max-width: 799px){ /* se regula el minimo ancho para que no jodan con el responsive*/
	/*body{background-color:red}
	header#responsive{display:block}
	footer article{font-size:90%}
	aside,main{font-size:110%}
	div.ficha{columns:1!important;}
	
	aside.invisible{display:none}
	.placeholder-slider{padding-top:50%!important;margin-top:20px!important}
}


/*###### TABLETS ######*/
/*
@media (min-width: 800px) {
	body{background-color:orange}
	header#menu{display:block;}
	header#menu nav ul.menu{font-size:90%}
	main{display:flex}
	main>aside{width:300px;position:sticky;}/* porque no se invierten de orden???!!! 
	main>aside + section{width:calc(100% - 300px);padding-right:80px}
	footer article{font-size:90%}
}

###### DESKTOPS ######
@media (min-width: 1200px) and (orientation: landscape) {
	header#menu nav ul.menu{font-size:100%}
	header#menu{display:block}
	footer article{font-size:100%}
}

@media (max-width: 799px){ 
	
	main>section{width:100%!important}
}

@media (min-width: 1200px) and (orientation: landscape) { /* se regula el minimo ancho para que no jodan con el responsive*/
	/*body{background-color:red}
	header#responsive{display:block}
	footer article{font-size:90%}
	aside,main{font-size:110%}
	div.ficha{columns:1!important;}
	
	aside.invisible{display:none}
	.placeholder-slider{padding-top:50%!important;margin-top:20px!important}
}
*/

/*###### MOBILES ######*/
@media (max-width: 799px){ /* se regula el minimo ancho para que no jodan con el responsive*/
	header#responsive{display:block}
	.placeholder-slider{padding-top:50%!important;margin-top:20px!important}
		main>section{width:100%!important}
}

@media (min-width: 800px) {
	header#responsive{display:none}
}

@media (min-width: 1200px) and (orientation: landscape) {
	.columna{column-count: 2;column-gap:50px}

}

/*###### ULTRAWIDE ######*/
@media (min-width: 1800px) {header#responsive{display:none}}

/*###### IMPRESION ######*/
@media print {
	*{float:none !important;background-color:white}header,footer{display:none}a[href^="http://"]:after{content:" [ " attr(href) " ]";word-wrap:break-word;color:black!important;font-weight:bold;font-size: small}.print{display:block}.noprint{display:none}
}

@page 						{margin:2cm;size: letter;}
/* transition: 0.2s; */