*{
	margin: 0;
	padding: 0;
}

body {
	height: 600%;
	width: 100%;
	background: 'blue';
	color: white;
	margin: 0;
	
	
	
	
}

p {

	margin-bottom: 1em;  /**espaciado en el final del texto o parrafo**/
}



.header {
    

background: #823131;
    
font-size: 1.2em;
color: white;
font-family: Calibri;
padding: 0.7em 1em; /** el grosor de la caja superior fija**/

left: 0em;
top: 0;
right:0em;


 /** hacemos la posicion fija de la caja**/

}



.header a {

		color: white;
		text-decoration: none;
		

}

.menu-icon{
	display: none;
}


.div_container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;  /** no amontona las cajas o imagenes, sino que la posiciona una abajo de la otra**/

				

}



.main{

	padding-top: 80em;  /**separar la caja fija del area principal de la pagina**/
	padding-left: 3em;
	width: 98%;
	max-width: 98%;
	flex-wrap: wrap;
	

}



.clearfix{
    float: none;
    clear: both;
}




#menu {
    width: 90%;
    margin: 0px auto;
   

}
ul, ol {
    list-style:none;
    display: flex;    /** aca hace flexbox el **/
    flex-wrap: wrap;    /** menu de navegacion en forma general es decir que se ajuste con wrap**/
    
}


#menu li ul li {
    position:relative;
    
    
}




#menu ul{
    display: flex; /** hace que aparezcan los objetos ocultos**/
    background-color: #ccc;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-shadow: 0px 1px 0px white;
    text-decoration: none;
   
  
}






#menu li:hover > ul {
      display: grid;   /*grid se utiliza para hacer aparecer el submenu el forma de lista*/
      color: #111011;
      text-decoration: none;
}

#menu li > ul a{
    
    color: #111011;
    text-decoration: none;
}









#menu li ul {
    display:none;
    position:absolute;
    min-width: 100px;  /** EL ANCHO DE LOS SUBMENUS**/
   
}







#menu ul li{
    /**display: inline-block;**/
    display: block;
    float: left;   /** HACE QUE LOS ELEMENTOS DEL MENU SE VAYAN A LA IZQUIERDA O ALINEADOS**/
    
    border-right: 1px solid #eee;
}

#menu ul li a{
    color: rgb(22, 22, 83);
    padding: 13px;
    display: block;
    line-height: 34px;/** CENTRA  en medio DE FORMA HORIZONTAL DE ARRIBA ABAJO LOS TEXTOS U OBJETOS**/
    text-decoration: none;
    
}

#menu ul li img{
    padding: 6px 3px 2px 3px;
    
   
    line-height: 100px;/** CENTRA  en medio DE FORMA HORIZONTAL DE ARRIBA ABAJO LOS TEXTOS U OBJETOS**/
    
}


#menu .interno li{
   
    padding: 2px;
    display: block;
    border-bottom: 1px solid #eee;
    
}

#menu .interno li a{
    color: rgb(123, 123, 128) !important;
    padding: 12px 11PX;  /**CORRIGUE EL PADING DE LOS SUBMENUS**/
    line-height: 5px;  /** CENTRA DE FORMA HORIZONTAL DE ARRIBA ABAJO LOS TEXTOS U OBJETOS**/
}


#menu .interno li:hover a{
    color: rgb(253, 253, 255) !important;
   
}



#menu ul li:hover{
    background: #823131;
    cursor: pointer;
    
}

#menu ul li:hover a{
    color: #f7f7f7;
    text-shadow: 0px 0px 0px white;
    
}




.clearfix{
    float: none;
    clear: both;
}

















.imagenes .centra{
	
	
	width: 95%;
	max-width: 95%;
	display: flex;
	align-items: center;   /**para centrar up-down EN LAS CAJAS**/
	align-content: center;
	justify-content:space-between;
	padding: 1.4em 2em;
	   /** centra el contenido en el epacio de la pagina **/ 
	flex-wrap: wrap;
	

	

	

}





.main{

	padding-top: 1em;  /**separar la caja fija del area principal de la pagina**/
	padding-left: 2em;
	width: 192%;
	max-width: 100rem;
	flex-wrap: wrap;
	position: static;

}

.body1{

	margin: 2em 0em 0em 25em;
	
	

}

.demo {
            
          display: none;
           visibility: hidden;
           
        }


.slides {
			display: none;
           visibility: hidden;

}

#demo .slides {
			display: none;
           visibility: hidden;

}


.foot {

	display: none;
           visibility: hidden;

}



.pacontenedor {

			margin: 0;
		display: flex;
		margin: 1em 0rem 0rem 3em;
		
		justify-content: center;
		justify-content: space-around;
		align-items: center;
		 width: 19em;
            height: 18em;
            overflow: hidden;     /**esconde el desbordamiento del objeto**/
            border: 0em solid #fefefe;  /**aumenta o reduce el borde blanco de la caja**/
            box-shadow: 5px 5px 9px 3px rgba(0, 0, 0, .4);
            position: static;

}

#contenedor1 {
			
			width: 17.5em;  /**al intercalar con paddin se amplia de lado derecho el margen del scroll**/
			height: 18em;
			
			border: 0px solid;
			margin: 0 auto;
			overflow-y: scroll;
			overflow-x: scroll;
			white-space: nowrap;
			padding: 0.2px 12px;   /** mueve up down a la izquierda o derecha las imagenes dentro del scroll **/
			margin-bottom: 38px;

			margin: -18em 0rem 0rem 3em;
			position: static;
			        /**-18**/
			
}






.letras1 div a{
			display:flex; ;
		width: 30em;
		right: 10em;
	   margin: 3em -5em 0em 0em;
	 	
	   font-size: 1.2em;
	   line-height: 1.5;
	   font-family: monospace;
			  font-weight: 120;
	    text-align: center;
	    overflow: hidden;
	    font-family: "Decorative", Garamond, 'Comic Sans';
	    
	    
}

.letras1 a:link {color: black; text-decoration: none;}

.letras1 a:active {color: red; text-decoration: none;}

.letras1 a:visited {color: black; text-decoration: none;}

.letras1 div a:hover {color: blue; text-decoration: underline;
						transform: translateY(-0.2em) scale(1)}



.letras2 div a{
			display:flex; ;
		width: 30em;
		right: 10em;
	   margin: 0.5em 0em 0em 0em;
	 	
	   font-size: 1.2em;
	   line-height: 1.5;
	   font-family: monospace;
			  font-weight: 120;
	    text-align: center;
	    overflow: hidden;
	    font-family: "Decorative", Garamond, 'Comic Sans';
	    
	    
}

.letras2 a:link {color: black; text-decoration: none;}

.letras2 a:active {color: red; text-decoration: none;}

.letras2 a:visited {color: black; text-decoration: none;}

.letras2 div a:hover {color: blue; text-decoration: underline;
						transform: translateY(-0.2em) scale(1)}



.letras3 div a{
			display:flex; ;
		width: 30em;
		right: 10em;
	   margin: 0.5em 0em 0em 0em;
	 	
	   font-size: 1.2em;
	   line-height: 1.5;
	   font-family: monospace;
			  font-weight: 120;
	    text-align: center;
	    overflow: hidden;
	    font-family: "Decorative", Garamond, 'Comic Sans';
	    
	    
}

.letras3 a:link {color: black; text-decoration: none;}

.letras3 a:active {color: red; text-decoration: none;}

.letras3 a:visited {color: black; text-decoration: none;}

.letras3 div a:hover {color: blue; text-decoration: underline;
						transform: translateY(-0.2em) scale(1)}



.letras4 div a{
			display:flex; ;
		width: 30em;
		right: 10em;
	   margin: 0.5em 0em 0em 0em;
	 	
	   font-size: 1.2em;
	   line-height: 1.5;
	   font-family: monospace;
			  font-weight: 120;
	    text-align: center;
	    overflow: hidden;
	    font-family: "Decorative", Garamond, 'Comic Sans';
	    
	    
}

.letras4 a:link {color: black; text-decoration: none;}

.letras4 a:active {color: red; text-decoration: none;}

.letras4 a:visited {color: black; text-decoration: none;}

.letras4 div a:hover {color: blue; text-decoration: underline;
						transform: translateY(-0.2em) scale(1)}





.letras5 div a{
			display:flex; ;
		width: 30em;
		right: 10em;
	   margin: 0.5em 0em 0em 0em;
	 	
	   font-size: 1.2em;
	   line-height: 1.5;
	   font-family: monospace;
			  font-weight: 120;
	    text-align: center;
	    overflow: hidden;
	    font-family: "Decorative", Garamond, 'Comic Sans';
	    
	    
}

.letras5 a:link {color: black; text-decoration: none;}

.letras5 a:active {color: red; text-decoration: none;}

.letras5 a:visited {color: black; text-decoration: none;}

.letras5 div a:hover {color: blue; text-decoration: underline;
						transform: translateY(-0.2em) scale(1)}




.letras6 div a{
			display:flex; ;
		width: 30em;
		right: 10em;
	   margin: 0.5em 0em 0em 0em;
	 	
	   font-size: 1.2em;
	   line-height: 1.5;
	   font-family: monospace;
			  font-weight: 120;
	    text-align: center;
	    overflow: hidden;
	    font-family: "Decorative", Garamond, 'Comic Sans';
	    
	    
}

.letras6 a:link {color: black; text-decoration: none;}

.letras6 a:active {color: red; text-decoration: none;}

.letras6 a:visited {color: black; text-decoration: none;}

.letras6 div a:hover {color: blue; text-decoration: underline;
						transform: translateY(-0.2em) scale(1)}














.tablas {
            position: absolute;
            top: 14.8em;
            left: -2em;
            right: 0rem;
            bottom: 10em;
            /**margin: auto;**/
            word-wrap: break-word;

            
           		

}





@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {    /**modifica el landscape**/

	
   
.demo {
            
            margin: 4em 0em 0em 0em;
           display: block;
            visibility: visible;
           margin: 6em 0em 0em 19em;
           
        }

       

.slides {

			z-index: 0;
			display: block;
           visibility: visible;

}


.body1{

	margin: 2em 0em 0em 13em;
	
	

}

#demo .slides {
		z-index: 0;
			display: block;
           visibility: visible;

}





.foot{
    
    display: flex;
            visibility: visible;
           
          padding: 7em 2em;
          overflow: hidden;
            border: 10px solid #fefefe;
             box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
            justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;  /** no amontona las cajas o imagenes, sino que la posiciona una abajo de la otra**/

    
    
}




 } 
  



@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {    /**modifica el landscape**/

	
   

.body1{

	margin: 2em 0em 0em 13em;
	
	

}




 }