@charset "utf-8";
/* CSS DE LA CONFIGURACION BASICA DE PAGINA */
body {
	/*font: 24px Helvetica;
	background: #5C5C5C;
	padding-top: 0em;*/
	margin: 0;
	border:0;
	width: 100%;
	height:auto;
}
.contenepagina{/*---// CONTENEDOR DE TODA LA PAGINA MENOS EL MENU Y EL PIE //---*/
	width: 96%;
	margin-top: 0%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0%;
	padding-top: 10%;
	padding-right: 0;
	padding-bottom: 0%;
	padding-left: 0;
	z-index: 0;
	/*background: #5C5C5C;*/
}

  #main {
	/*min-height: 100%;*/
	padding: 0px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row;
	flex-flow: row;
	margin-top: 0%;
	margin-right: 0px;
	margin-bottom: 0; /*--- ERA 7% ---*/
	margin-left: 0px;
   }
 
  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   /*background: #dddd88;*/
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }
  
  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
  /* background: #ccccff;*/
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
  /* background: #ccccff;*/
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }
 
  XheaderX {/*-----------------// AJUSTA LA SEPARACION DEBAJO DEL MENU //--------------*/
	display: block;
	padding: 3px;
	min-height: 100%;
	border: 0px solid #cccc33;/*--- ERA: #cccc33 #eebb55 ---*/
	border-radius: 7pt;/*--- ERA: #ffeebb ---*/
	margin-top: 2%;/*-------------------// AJUSTAR AQUI //---------------------------*/
	margin-right: 4px;
	margin-bottom: 0.5em;
	margin-left: 4px;
	/*background-color: #660000;	
	background-color: #999926; FFDF00	
	background-color: #D7BC00;
	background-color: #1E1E1E;*/
	background-color: #cccc33;
	}

  XXXXfooter {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }

#main> article, nav, aside {background-color: #1E1E1E;}/*#363636*/

/*-------------------------------------------------------------------------------*/
/*---------------// 1 CONTENEDOR DE CONTENIDOS DE LA PAGINA //-------------------*/
/*-------------------------------------------------------------------------------*/
XXXXXXXXXX.cajondelaweb{/*---background-color: #F99; // FONDO DE COLOR ROSA //---*/
height: 100%;min-height: 100%;width: 96%;max-width: 96%;padding-right: 2%;padding-bottom: 1%;
padding-left: 2%;margin-top: 10%;}
/*-------------------------------------------------------------------------------*/
/*----------------------------// 1 FIN DEL ESTILO //-----------------------------*/
/*-------------------------------------------------------------------------------*/

@media screen and (min-width: 1367px) and (max-width: 1440px) and (orientation: landscape){
.contenepagina{padding-top: 2.0%; padding-bottom: 5%;/*background: #F00;*/}
* {font-size: 100%;}
}

@media screen and (min-width: 1281px) and (max-width: 1366px) and (orientation: landscape){
.contenepagina{padding-top: 2.0%; padding-bottom: 5%;/*background: #F00;*/}
* {font-size: 100%;}
}

@media screen and (min-width: 1025px) and (max-width: 1280px) and (orientation: landscape){
.contenepagina{padding-top: 1.0%; padding-bottom: 7%;margin-top: 0.0%; /*background: #F00;*/}
* {font-size: 100%;}
}

@media screen and (min-width: 1000px) and (max-width: 1024px) and (orientation: landscape){
.contenepagina{padding-top: 2.0%; padding-bottom: 6%;/*background: #F00;*/}
* {font-size: 100%;}
}

@media screen and (min-width: 1000px) and (max-width: 1024px) and (orientation: portrait){
.contenepagina{padding-top: 2.0%; padding-bottom: 6%;/*background: #F00;*/}
* {font-size: 100%;}
}
 
@media only screen and (min-device-width: 824px) and (max-device-width: 873px) and (orientation: landscape){ /*POCO X3*/
.contenepagina{padding-top: 1%; padding-bottom: 8%;}
}



 
@media screen and (min-width: 800px) and (max-width: 823px) and (orientation: landscape){
.contenepagina{padding-top: 2.0%; padding-bottom: 8%;/*background: #F00;*/}
* {font-size: 100%;}
}
  
@media screen and (min-width: 737px) and (max-width: 768px) and (orientation: portrait){
.contenepagina{padding-top: 2.0%; padding-bottom: 9%;/*background: #F00;*/}
* {font-size: 100%;}
}
  
@media screen and (min-width: 641px) and (max-width: 736px) and (orientation: landscape){
.contenepagina{padding-top: 2.0%; padding-bottom: 9%;/*background: #F00;*/}
* {font-size: 100%;}
}

@media screen and (min-width: 569px) and (max-width: 640px) and (orientation: portrait){
.contenepagina{padding-top: 2.0%; padding-bottom: 10%;/*background: #F00;*/}
#main, #page {-webkit-flex-flow: column;flex-flow: column;}
#main > article, #main > nav, #main > aside {-webkit-order: 0;order: 0;}  
}

@media screen and (min-width: 569px) and (max-width: 640px) and (orientation: landscape){
.contenepagina{padding-top: 2.0%; padding-bottom: 10%;/*background: #F00;*/}
#main, #page {-webkit-flex-flow: column;flex-flow: column;}
#main > article, #main > nav, #main > aside {-webkit-order: 0;order: 0;}  
}

@media only screen and (min-device-width: 390px) and (max-device-width: 393px) and (orientation: portrait){ /*POCO X3*/
.contenepagina{margin-top: 80%; padding-top: 120%; padding-bottom: 8%;}
.shy-header{margin-bottom: 2%;}
}

@media screen and (min-width: 321px) and (max-width: 568px) and (orientation: landscape){
.contenepagina{padding-top: 1.8%; padding-bottom: 12%;/*background: #F00;*/}
#main, #page {-webkit-flex-flow: column;flex-flow: column;}
#main > article, #main > nav, #main > aside {-webkit-order: 0;order: 0;}  
}

@media screen and (min-width: 361px) and (max-width: 414px) and (orientation: portrait){
.contenepagina{padding-top: 0.0%; padding-bottom: 21%; margin-top: 0.0%; /*background: #FFF;*/}
#main, #page {-webkit-flex-flow: column;flex-flow: column;}
#main > article, #main > nav, #main > aside {-webkit-order: 0;order: 0;}  
}

@media screen and (max-width: 360px) and (orientation: portrait) {
.contenepagina{/*margin-top: 1.5%; margin-bottom: 21%; background: #FFF;*/ padding-top: 3.5%; padding-bottom: 21%;}
#main, #page {-webkit-flex-flow: column;flex-flow: column;}
#main > article, #main > nav, #main > aside {-webkit-order: 0;order: 0;}  
}