/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 20/06/2018, 23:37:21
    Author     : Win10
*/

/*          header     */
header{
background-image:url(../imagen/fondo.jpg);  /*imagen de fondo*/
    
}

/*cajas*/
.caja1 { 
	height: 30px;
	width: 100%;
	float: left;
	background-color: transparent;
        
        display:flex;
        color:white;
}
.caja2{
	height: 40px;
	width: 100%;
	float: top;
	background-color: #154360;
        
        display:flex;
        color:white;
}
/*botnes en encabesado datos */
.todo{
    margin-left: 30%;
     margin-right:  30%;
}
#lina {
	list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction: row;
}
#la { flex-grow: 1; }
#pa {
	display:block;
	padding:0.1em;
	background-color: transparent ;
	text-align:center;
	margin-right:0.1em;
	text-decoration:none;
	color:white;
}
#pa:hover {color:#5AA3D3; }
/*tablas*/
.tabla1{
    text-align: center;
    margin-left: 35%;
}
.tabla2{
    margin-left: 5%;
}
.tabla3{
    margin-left: 2%;
}
/*imagen*/
#img1{
  background-image:url(../imagen/tel.png) ; 
  width: 20px;
  height: 20px;
 float:start ;
 opacity: 2;
}
#img2{
  background-image:url(../imagen/gmail.png) ; 
  width: 20px;
  height: 20px;
 float:start ;
}
#img3{
  background-image:url(../imagen/logo.png) ; 
  width: 25px;
  height: 25px;
  
 float:start ;
}
#img4{
  background-image:url(../imagen/SDSDS.gif) ; 
  height: 150px; 
   width: 100%; 
}
/*boton*/
#pos{
    list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction: column;
}
#las { flex-grow: 1; }
#na {
	list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction: column;
        
}
#boto{
    margin-top: 5px;
    display:block;
    padding: 5px 20px;
    background-color:red ;
    text-align:center;
    margin-bottom:0.2em;
    text-decoration:none;
    color:white;
}
#boto:hover {color:#5AA3D3; }
/*textos*/
#texto{
    color: #E89801;
}

/*          body    */
.ant {
	height: 880px;
	width: 10%;
	float: left;
	background-color:#154360 ;
        
}
.ante {
	height: 880px;
	width: 10%;
	float: top;
	background-color:white ;
        display:flex;
}
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction: column;
        
}
li { flex-grow: 1; }
a {
	display:block;
	padding:1em;
	background-color:transparent ;
	text-align:center;
	margin-bottom:0.2em;
	text-decoration:none;
	color:white;
}
a:hover {color:#5AA3D3; }


.foto1{
    margin-left: 10%;
   height: 250px;
	width: 18%;
	float: left;
	background-color: transparent; 
        display: flex; 
}
.foto2{
    margin-left: 75%;
   height: 293px;
	width: 18%;
	float: top;
	background-color: transparent; 
        display: flex; 
}
.foto3{
    margin-left: 75%;
   height: 300px;
	width: 18%;
	float: top;
	background-color: transparent; 
        display: flex; 
}
#jo {
	list-style-type:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction: column;
        
}
#nan{
 display:block;
	padding:1em;
	background-color:transparent ;
	text-align:center;
	margin-bottom:0.2em;
	text-decoration:transparent;
	color:#000000;   
    
}
#nan:hover {color:#5AA3D3; }
#nano{ 
  text-align: center;
}
.anterior {
	height: 300px;
	width: 10%;
	float: left;
	background-color:#154360;
        display:flex;
}
#img6{
   background-image:url(../imagen/nano.jpg); 
   margin-left: 10%;
   width: 200px;
  height: 200px;
  
}

#img7{
   background-image:url(../imagen/uno.jpg); 
   margin-left: 10%;
   width: 200px;
  height: 200px;
  
}
#img8{
   background-image:url(../imagen/grande.jpg); 
   margin-left: 10%;
   width: 200px;
  height: 200px;
}
#img9{
   background-image:url(../imagen/capa.jpg); 
   margin-left: 10%;
   width: 200px;
  height: 200px;
}
#img10{
   background-image:url(../imagen/re.jpg); 
   margin-left: 10%;
   width: 200px;
  height: 200px;
}
#img11{
   background-image:url(../imagen/ido.jpg); 
   margin-left: 10%;
   width: 200px;
  height: 200px;
}
#img12{
   background-image:url(../imagen/sen.jpg); 
   margin-left: 10%;
   width: 200px;
  height: 200px;
}
#img13{
   background-image:url(../imagen/hola.jpg); 
   margin-left: 10%;
   width: 200px;
  height: 200px;
}
#img14{
   background-image:url(../imagen/papa.jpg); 
   margin-left: 10%;
   width: 200px;
  height: 200px;
}

/* footer */
#Texto2{
    color: white;
}
footer{
 background-image:url(../imagen/fondo.jpg);       
}
/*Pagina Como.html*/
#Texto1{
    margin-left: 10%;
    margin-right: 10%;
    text-align: justify;
}

#img15{
   background-image:url(../imagen/nano1.jpg); 
   margin-left: 10%;
   margin-top: 10%;
   width: 400px;
  height: 400px;
  
}
#img16{
   background-image:url(../imagen/uno1.jpg); 
   margin-left: 10%;
   margin-top: 10%;
   width: 400px;
  height: 400px;
  
}
#img17{
   background-image:url(../imagen/mega1.jpg); 
   margin-left: 10%;
   margin-top: 10%;
   width: 400px;
  height: 400px;
  
}
#img18{
   background-image:url(../imagen/re1.jpg); 
   margin-left: 10%;
   margin-top: 10%;
   width: 400px;
  height: 400px;
  
}
#img19{
   background-image:url(../imagen/ca1.jpg); 
   margin-left: 10%;
   margin-top: 10%;
   width: 400px;
  height: 400px;
  
}
#img20{
   background-image:url(../imagen/dio1.jpg); 
   margin-left: 10%;
   margin-top: 10%;
   width: 400px;
  height: 400px;
  
}
#img21{
   background-image:url(../imagen/sen1.jpg); 
     margin-left: 30%;
   margin-top: 30%;
   width: 230px;
  height: 200px;
  
}
#img22{
   background-image:url(../imagen/hc1.jpg); 
   margin-left: 30%;
   margin-top: 30%;
   width: 230px;
  height: 200px;
  
}
#img23{
   background-image:url(../imagen/papa.jpg); 
   margin-left: 40%;
   margin-top: 40%;
   width: 200px;
  height: 200px;
  
}


#bo{
     margin-left: 10%;
 display:block;
	padding:1em;
	background-color:blue ;
	text-align:center;
	margin-bottom:0.2em;
	text-decoration:none;
	color:white;
}

#bo:hover {color:#5AA3D3; }
.espa{
    margin-left: 10%;
}
.espa1{
    margin-left: 10%;
    text-align: center;
}
#yo{
    
    margin-left: 5%;
    margin-right: 10%;
    text-align: justify;
}