/*FUENTE GOOGLE FONTS*/

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


/*BODY*/

.page{
     width: 100%;
     margin:0rem;
     padding: 0rem;
     box-sizing: 0rem;
     }



body {
    margin: 0rem;
    box-sizing: 0rem;
    padding: 0rem;
    width: 100%;
    }

header {background:#de6800;
        display:flex;
        display: - webkit- flex;
        flex-flow:column;
        -webkit- flex-flow: column;
        width:100%;
        height: 100%;
        margin:0rem;
        padding:0rem;
        box-sizing:border-box;}

.fotodelgif {width:100%;
             height:inherit;
             margin-bottom: 0rem;
             margin-top: -1rem;
             padding: 0rem;
             z-index:1;
             }

main{min-height: 50rem;
     margin: 0;
     padding: 0;
     width: 100%;
}

/*SECTION*/




/*SECCION BENEFICIOS*/

 section{
        width:100%;
        display:-webkit-flex;  
        display:        flex;
        -webkit- flex-flow:column;
        flex-flow:column ;
        }


.contenido {width:100%;
        display:-webkit-flex;  
        display:        flex;
        -webkit- flex-flow:row;
        flex-flow:row;}



.fondonaranja{
              width: 100%;
              height: 3rem;
              background:#f58245;
              margin-top:1rem;}

.fondonaranja h4{margin-top:0.5rem}

.beneficios{
        background: #de6800;
        margin-top:0;
        margin:0rem;
        padding:0rem;       
}


.titulos {
        font-family: 'roboto', 'arial', sans-serif;
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 0.5rem;
        color: #fff;}



.beneficios .contenido img{
         width:50%;
         height: 50%; 
         padding:5rem 0rem 5rem 0rem;       
}



.beneficios .contenido article{
                font-family: 'roboto', 'arial', sans-serif;
                font-weight:500;
                color: whitesmoke;  
                padding: 5rem 1rem 5rem 1rem;
}


.beneficios .contenido h3 {
    font-size: 1.5rem;
    margin: 2.5rem 0rem 1rem 0rem;
    font-weight: 500;
    }

.beneficios .contenido h5 {
    font-size: 1.2rem;
    margin: 0;
    font-weight: 500;
    }

.beneficios .contenido p{ 
    font-size: 1rem;
    margin: 1;
    font-weight: 400;}





/*SECCION USARLA*/

.fondoceleste {width: 100%;
              height: 3rem;
              background:#57b4ad;
              margin-top:1.5rem;
              }

.fondoceleste h4{margin-top:0.5rem;}

.usarla{background:#e6e3e3}

.usarla article{
    
    display:-webkit-flex;  
    display:        flex;
    -webkit- flex-flow:column;
    flex-flow:column;
    max-width: 25%;      
}


.usarla article p 
{ font-family: 'roboto', 'arial', sans-serif;
font -size:1rem;
font-weight: 400;
color:darkgrey;
max-width: 70%}



/*SECCION DESCARGA*/

.descarga{display:flex;
          display: -webkit- flex;
         flex-flow:column;
         -webkit- flex-flow:column;}

.fondorosa{width: 100%;
           height: 3rem;
           background:#f16e79;
           margin-top:1.5rem;}

.fondorosa .titulos{margin-top:0.5rem;}

.descarga{background: #ca4459;}

.logosdescarga{display:flex;
              display:-webkit- flex;
              -webkit- flex-flow:row;
              flex-flow:row;
              
           }

.logosdescarga .logos{margin:0rem 2rem 2rem 2rem;}



.descarga p{font-family: 'roboto', 'arial', sans-serif;
            font-weight: 500;
            color:#1d9a93;
            font-weight: 500;
            font-size: 1.5rem;
            padding-top:1rem;}

.descarga h5{font-family: 'roboto', 'arial', sans-serif;
            font-weight: 400;
            color:#fff;
            font-size: 1rem;}

.descarga a{text-decoration: none;}



/*BARRA DE NAVEGACIÓN*/



nav{background:#4B4A4F;
     width: 100%;
    z-index: 2;
    }

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

ul li{position:relative;
     left:33%;}

nav ul li {
            float:left;
            margin:  0rem 0rem 0rem 0rem;
            }



nav ul  li a {
            font-family: 'roboto', 'arial', sans-serif;
             font-weight: 500;
             text-decoration: none;
             color:#ffffff;
             display:inline-block;
             margin: 0.5rem 2rem 1rem 0.5rem;
             padding:0rem;
             font-size:1rem;
             }

.clear{clear:both;}


 @media (max-width:48rem) {
      header{flex-flow:row;-webkit-flex-flow:row;}
     .fotodelgif{width:80%;}
      nav{width:20%;}
      ul li{left:-1rem;top:3rem;}
     .beneficios .contenido img{width: 80%; padding-top:6rem}
     .beneficios .contenido article{padding-top:2rem}
}
 
     
     
     
     @media (max-width:30rem){
         nav ul li a{font-size:0.7rem;}
         ul li{left:-2rem; top:0.7rem;}
         .contenido{flex-flow:column;-webkit-flex-flow:column;}
        .beneficios .contenido img{ padding:2rem 0rem 0rem 0rem}
         .beneficios .contenido article{padding:0rem 1.5rem 1rem 2rem}
         .logosdescarga {flex-flow:column;-webkit-flex-flow:column;}
 }
     



/*li{border-right: 1px solid;
    color:darkorange;
    font-weight: 700;
    }*/



/*FOOTER*/


.footer{
        font-family: 'roboto','arial', sans-serif;
        font-size: 0.7rem;
        background-color: antiquewhite;
        box-sizing: border-box;
        padding: 1rem;
        margin; -2rem 0rem 3rem 0rem;
        margin-top: 0rem;
        margin-right: 0rem;
        }