@import url ('https://fonts.googleapis.com/css?family=Roboto:300,400,500'); 



@media screen and (min-width:640px)
*{box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

body {
    margin: 0;
    padding: 0;
}



p {
    font-family: 'Roboto', sans-serif;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 13px;
    padding: 10px; 
 
}

/* encabezado */

header {
    
    padding: 0.75em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#pelpa {
    display: block;
    width: 4em;
}

.barritas:hover{
    background-color: #72D38D;
}


.barritas  {
    width: 10%;
    color: white;
    text-decoration: none;
    background-color: white;
    padding: 0.5em;
    border-radius: 20%;
    display: flex;
    justify-content: center;  

}


/* menu desplegable */

header nav {
    background-color: rgba(31, 88, 49, 0.8);
    font-family: 'Roboto', sans-serif;
    color: white;
    position: fixed;
    right: -50vw;
    top: 0;
    height: 100vh;
    min-width: 50vw;
    transition: all .6s ease;
    z-index: 999;
    transition: all .6s ease;
}
header nav ul {
    list-style: none;
    padding: 14%;

}

header nav:target {
    right: 0;

}

.usuario {
    margin: auto;
    text-align: center;
    font-size: 75%;
    padding: 3em 1em 1em 1em;
    border-bottom: solid 1px rgba(255,255,255,.25);
}
.usuario img {
    
    width: 30vmin;
    height: 30vmin;
    max-width: 15em;
    max-height: 15em;
    
}

header nav a {
    color: rgba(255,255,255,.75);
    display: block;
    padding: .5em 1em;
    text-align: center;
    text-decoration: none;
    list-style: none;
}

header nav a:hover {
    color: white;
}

#x {
    
    position: absolute;
    right: 0;
    top: 0;
    padding: 10%;
}

/* footer 1 */ 

#footernormal{
    font-family: 'Roboto ', sans-serif;
    margin-top: 1em;
    background-color:#72D38D;
    color: white;
    font-weight: 300;
    font-size: 9px; 
    margin-bottom: 0em;
    margin-left: 0px;
    margin-right: 6px; 
    padding: 1em;
    width: 100%;
       
}


/* pantalla 1 */ 

#body1{
    margin: 0;
    padding: 0;
    background-color: #eef2ce;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    min-height: 100vh;
}

.logosplash { 
    width: 80%;
    max-width: 20em;
    margin: auto;
    margin-top: 8em;
}

.logosplash img{
    width: 100%;
    height: auto;
}

#footer1{
    margin: auto;
    margin-bottom: 50em;
    text-align: center;
    width: 10em;
}
#footer1 a {
    margin-top: 2em;
    text-decoration: none; 
    font-family: 'roboto', sans-serif;
    color: white;
    font-size: 20px;
    display: block;
    background-color:#72D38D;
    border-radius: 15px;
    transition: all .3s;
    
} 
#footer1 a:hover{
    background-color: white;
    color:#72D38D;
    transition: all .3s;
    
}


/* pantalla 2 */ 


nav ul li a:hover{
    background-color: white;
    padding: 10px;
    border-radius: 2em;
    
    color:#72D38D;
    transition: all .3s;
}

#body2{
    margin: 0;
    padding: 0;
    background-color: #eef2ce;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    min-height: 100vh;
}

.caja4 {
    background-color: white;
    padding:10px;
    border-radius: 15px;
    padding-top: 15px;
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px; 
}

.caja5 {
    background-color: white;
    padding:10px;
    border-radius: 15px;
    padding-top: 15px;
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px; 
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.caja10 {
    background-color: white;
    padding:10px;
    border-radius: 15px;
    padding-top: 15px;
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px; 
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.caja11 {
    background-color: white;
    padding:10px;
    border-radius: 15px;
    padding-top: 15px;
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px; 
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.caja12 {
    background-color: white;
    padding:10px;
    border-radius: 15px;
    padding-top: 15px;
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px; 
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.fotoplastico {  
    height: auto;
    padding: 10px;
    width: 280px;
    margin: auto;   
}

.fotoplastico img{
    width: 100%;
    height:auto;
}

.masinfo {  
    height: auto;
    color:#72D38D; 
    padding: 25px;
    width: 300px;
    margin: auto;   
}

.masinfo2 {  
    height: auto;
    color:#72D38D; 
    padding: 25px;
    width: 300px;
    margin: auto;   
}


.fotozapatilla {  
    height: auto;
    padding: 10px;
    width: 280px;
    margin: auto;   
}

.fotozapatilla img{
    width: 100%;
    height:auto;
}

.fotojane {  
    height: auto;
    padding: 10px;
    width: 280px;
    margin: auto;   
}

.fotojane img{
    width: 100%;
    height:auto;
}

.fotoagro {  
    height: auto;
    padding: 10px;
    width: 280px;
    margin: auto;   
}

.fotoagro img{
    width: 100%;
    height:auto;
}

h7 {   
font-family: 'Roboto', sans-serif;
color: #72D38D;
font-size: 18px;
    
}
.h7div {
padding-left: 1em }

h8 {   
font-family: 'Roboto', sans-serif;
color: #72D38D;
font-size: 18px;
    
}

.h8div {
padding-left: 1em }

h13 {   
font-family: 'Roboto', sans-serif;
color: #72D38D;
font-size: 13px;
font-weight: 300;
padding-left: 10px;
margin: 10px; 
text-align: center;
    
}

h14 {   
font-family: 'Roboto', sans-serif;
color: #72D38D;
font-size: 13px;
font-weight: 300;
padding-left: 10px;
margin: 10px; 
text-align: center;
    
}


/* pantalla 3 */ 
#body3{
    margin: 0;
    padding: 0;
    background-color: #72D38D;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    min-height: 100vh;
}

.caja6 {
    background-color: white;
    padding:10px;
    border-radius: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 10px;
    margin-right: 10px; 
}

h9 {   
font-family: 'Roboto', sans-serif;
color: #72D38D;
font-size: 18px;

    }

.h9div {
    padding-left: 1em }

h10 {   
font-family: 'Roboto', sans-serif;
color: #72D38D;
font-size: 15px;
font-weight: 300;
padding-left: 10px;
margin: 10px; 
text-align: center;
    
}

/* pantalla 4 */ 

#body4{
    margin: 0;
    padding: 0;
    background-color: #72D38D;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    min-height: 100vh;
}

.caja7 {
    background-color: white;
    padding:10px;
    border-radius: 15px;
    padding-top: 15px;
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px; 
    padding-bottom: 15px;
    margin-bottom: 15px;
}



h11 {   
font-family: 'Roboto', sans-serif;
color: #72D38D;
font-size: 20px;
    
}
.h11div {
    padding-left: 1em }

h12 {   
font-family: 'Roboto', sans-serif;
color: #72D38D;
font-size: 15px;
font-weight: 300;
padding-left: 10px;
margin: 10px; 
text-align: center;
    
}

/*pantalla 5*/


#body5{
    
    margin: 0;
    padding: 0;
    background-color: #72D38D;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

h20 {   
font-family: 'Roboto', sans-serif;
color: white;
text-align: center;
display: block;
    
}

.content {
    padding-top: 4em;
}



h21 {   
font-family: 'Roboto', sans-serif;
color: white;
font-size: 15px;
text-align: center;
display: block;
}



@charset "utf-8";


			ul{
				margin: 0;
				padding: 0;
			}

			form{
				padding: 3em;
                background-color: white;
                margin: 2em;
                border-radius: 3em;
                border-style:none;
                
			}
			
			label{
				display: block;
				margin-top: 2em;
			}


/*pantalla 6*/

.videojane {
position:relative;
margin:0 auto;
height:0;
padding-bottom: 56.25%;
}

.videojane iframe {
position:absolute;
height:100%;
width:100%;
top: 0px;
left:0px;
}

#body6{
    margin: 0;
    padding: 0;
    background-color: #72D38D;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    min-height: 100vh;
}

.caja8 {
    background-color: white;
    padding:10px;
    border-radius: 15px;
    padding-top: 15px;
    margin-top: 15px;
    margin-left: 10px;
    margin-right: 10px; 
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.h15div {
padding-left: 1em;
padding-top: 1em;}

/*pantalla 7*/

.videoagro {
position:relative;
margin:0 auto;
height:0;
padding-bottom: 56.25%;
}

.videoagro iframe {
position:absolute;
height:100%;
width:100%;
top: 0px;
left:0px;
}

/*pantalla 8*/

.videoescuela {
position:relative;
margin:0 auto;
height:0;
padding-bottom: 56.25%;
}

.videoescuela iframe {
position:absolute;
height:100%;
width:100%;
top: 0px;
left:0px;
}

.fotoescuela {  
    height: auto;
    padding: 10px;
    width: 280px;
    margin: auto;   
}

.fotoescuela img{
    width: 100%;
    height:auto;
}