@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400,700');
*{box-sizing:border-box; margin: 0; padding: 0;}

header { background-color: #fff; height: 770px; background-image: url(http://catedraocampo.com.ar/vn11/tp/img/chicos2.png); background-repeat: no-repeat; background-size: cover; }

/* estilos tipograficos */

h1{ font-family: 'Yanone Kaffeesatz', sans-serif; 
	font-size: 4.5em; 
	color: #02356f; 
	text-align: left; 
	padding:25px 15px 10px 50px; 
	font-weight: 700;  
	margin-left: 40px; 
	}

h2{ font-family: 'Yanone Kaffeesatz', sans-serif; 
	font-size: 3em; 
	color: #02356f; 
	text-align: left; 
	font-weight: 400;  
	padding:5px 5px 10px 40px; 
	margin-left: 50px; 
    font-weight: 300;
	}

h3{font-family: 'Yanone Kaffeesatz', sans-serif; 
	font-size: 3em; 
	padding: 15px 45px 15px 45px; 
	color: #fff; 
	background-color:rgb(2, 47, 74);  
	text-shadow: 2px 3px #c1001e;}

h4{ font-family: 'Yanone Kaffeesatz', sans-serif; 
	font-size: 1.8em; 
	color: #02356f; 
	text-align: left; 
	font-weight: 300; 
	margin-left: 0px; 
	padding: 20px 0px 20px 90px;  line-height: 1.8em;
 
	}

h5{font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 3em; padding: 10px 45px 10px 45px; color: #fff; font-weight: 300; background-color: rgb(2, 47, 74);
	}



/* barra de navegacion */

nav {background-color: rgba(2, 47, 74, 0.58); height: 70px; display: flex; justify-content: space-between; width: 100%; align-items: center; padding-right: 25px; position: fixed;}

nav ul {list-style-type: none; }

nav ul li {float: left; text-align: center;padding: 15px; }

nav p {font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 1.3em; color: #fff;}
nav ul li a{text-decoration: none; }
nav ul li a p:hover{color: rgb(2, 47, 74); }

/* superior .descarga. */

.contenedor{  display: flex; width: 100%; padding: 100px 15px 15px 15px;}
.c1, .c2 {width: 50%;}

.c2{text-align: center;}
.c2 img {width: 370px;}
.c3 {display: flex; ; justify-content: left; padding: 25px 0px 10px 95px;}
.descargafooter {display: flex; ; justify-content: center; padding-bottom: 30px;}
/* secciones . como funciona .  para que sirve */


.comofunciona {background-color: rgba(229, 229, 229, 0.81); text-align: center;}
.contenedor1 {display: flex; width:  100%;height: 600px}
.txt1 {font-family: 'Yanone Kaffeesatz', sans-serif; 
	font-size: 1.8em; 
	color: rgb(2, 47, 74);
	width: 50%; 
	padding:55px 5px 20px 60px; 
	text-align: left; 
	line-height: 2em; 
	margin-top: 15px;
font-weight: 300;}


/* imagenes explicando */

 .demoIMG { 
    position:relative; 
    height:340px; 
    margin:0 auto; 
    width:60%; 
    margin-top: 50px;
  }
  .demoIMG img { 
    left: 0; 
    position:absolute;
    top: 0; 
  }

  .demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}
  .demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=100);}
.demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}
  .demoIMG img.visible:hover {opacity:0;filter:alpha(opacity=0);}  


.sirve {background-color: rgba(229, 229, 229, 0.81); text-align: center; height: 650px;}
.contenedor2 img{width: 600px; height: auto;}
.contenedor2{ display: flex;}
.c4{ width: 45%;}
.sirvetxt {width: 55%; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 1.8em; line-height: 1.8em; text-align:left;
font-weight: 300; padding: 60px 45px 50px 25px;}

footer{background-color: #000;}
footer p{color:#fff; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 1.3em; padding: 25px; font-weight: 200; text-align:center;}

.primerparrafofooter {font-family: 'Yanone Kaffeesatz', sans-serif; 
					 font-size: 1.4em;
					 font-weight: 400;
					 padding-top: 25px;
					 padding-bottom: 5px;}

/* RESPONSIVE */


@media screen and (max-width:850px){
        

    nav{flex-direction: column; height: 120px;  justify-content: center;}
    nav p {padding:0px; font-size: 1.3em;}
    nav img{margin-top: 0px;}

    .c1 {width: 100%;}
     
    h1 {font-size: 5em; margin: 0px; text-align: center;} 
    h2 {font-size: 4em; color: rgb(2, 47, 74); padding: 0px; text-align: center; width: 100%; margin: 0px;}
    h3, h5{font-size: 3em;}
    
   .c2 img{ width: 130px; margin-top: 0px; margin-left: 320px;padding: 0px;}

    
     h4 {font-size: 2em; width: 100%; margin: 0px; font-weight: 300; text-align: center;padding: 0px; color: rgb(2, 47, 74); }

    .contenedor{ flex-direction: column; width: 100%; padding: 100px 0px 15px 0px;}
    .contenedor1, .contenedor2{ flex-direction: column; }
    .comofunciona {height:1150px; margin-top: 0px;background-color: rgba(229, 229, 229, 0.81); }
    .txt1 { font-size: 2em;line-height: 2em; width: 100%; margin-top: 0px;padding-left: 80px; }
   
    .c3 {flex-direction: row;text-align: center; width: 100%; padding: 0px; margin: 0px; justify-content: center; padding: 25px;}

    .c4 img {width: 400px; margin-left: 200px}
    .sirve {margin-top: 0px; height: 900px;}
    .sirvetxt{ font-size: 1.8em; padding: 25px; margin: 0px; text-align: left;  width: 100%;}
    
    
    
    footer {margin-top: 0px;}


@media screen and (max-width:400px){
    nav{ height: 110px; display: flex; }
    nav p {padding-bottom: 5px; font-size: 1.1em; text-align: center;}
      nav ul {display: flex; margin-left: 10px; }
    nav ul li img {width: 140px; height: 25px}
   
    .c1 { width: 100%; flex-direction: column;}
    h1 {font-size: 5em; text-align: center; margin: 30px 0px 20px 0px; padding: 0px; font-weight: 400;}
 
   .c2 img{ width: 0px; margin-top: 0px; margin-left: 0px;padding: 0px;}
    .c2{padding-left: 0px; }

    h2 {font-size: 3em; color: rgb(2, 47, 74); padding: 0px; text-align: center; margin: 0px; }
     h4 {font-size: 2em; text-shadow: none; margin-left:15px; text-align: left; color: #000; margin-right: 15px; line-height: 1.5em; font-weight: 200; }
     h3{ font-size: 3em; padding: 15px 45px 15px 45px; color: #fff; background-color:rgb(2, 47, 74);  text-shadow: 2px 3px rgb(0, 180, 159); margin-top: 170px;}
    h5{ font-size: 2.3em; padding: 15px 45px 15px 45px; color: #fff; background-color:rgb(2, 47, 74);}
    
    .demoIMG { margin: 0px; padding: 0px;align-content: center; width: 100%;}
    .demoIMG img {  width: 100%; }

    .contenedor{ flex-direction: column; width: 100%; padding: 100px 0px 15px 0px; }
    
    .comofunciona {height: 650px;}
   .c3 {flex-direction: column; align-items: center; align-content: center;}
    
    .txt1 { font-size: 1.5em;line-height: 1.8em; width: 100%; margin-top: 0px;padding-left: 30px; }
    .contenedor1, .contenedor2{ flex-direction: column; width: 100%; background: #fff;}
    section {margin-top: 0px; background-color: white;}
    .sirve{ margin-top: 220px; background-color: rgba(229, 229, 229, 0.81);}
    .sirvetxt {font-size: 1.5em; text-align: left; margin: 10px 0px 10px 0px;}
    
    .c4 img{width: 280px; margin: 0px 0px 0px 50px; }
    .contenedor2 {background-color: white;}
    
    footer {margin-top: 0px;}
    footer p{font-size: 1em}
    
}