@import url('https://fonts.googleapis.com/css?family=Contrail+One|Fugaz+One|Poppins:200, 400,500,600,800|Quicksand:200,800|Quicksand:100,200,300, 400,500,600,700,800') 
    
    
*{margin: 0rem; padding: 0rem}

*{box-sizing: border-box;
    
}
.contenedor {
max-width: 80%; 
margin: auto;
grid-template-columns: auto auto auto   ;
display: grid;
grid-column-gap: 30px;

}

nav h2 img {
margin: 5% 48% 0% 48%;
height: 5.8rem;
}


.grid-container{
display: grid;
grid-template-columns: auto auto ;
margin: 5% auto 4% 10%;
    

}






body{   
background-image: url("../img/background.png");
background-repeat: no-repeat;
background-size:cover;

}

h2{
font-family: 'quicksand', cursive;    
font-size: 2rem;
color: #ffec61;
margin:0rem 0rem 0rem 0rem;
font-weight: 800;
}

h3{
font-family: 'quicksand', cursive;    
font-size: 2rem;
color: #ffec61;
font-weight: 300;
margin: 0.5rem 0rem 7rem 0rem;   
    
}

.iphone img{ 
float:right;
width: 25rem;
}

.info{
background-image: url("../img/landingfondo.png");
background-size:contain;
}

.beneficios{ display: grid; 
margin: 3% 10% 5% 10%; }

}

.beneficios article { width: 100%;display: auto auto;}

.asociate{
display: grid;margin: 3% 10% 5% 10%;}
.asociate .video{margin: 5% 0;}

.beneficios h2{
margin: 0rem;
color:#421f68;
display: grid;
grid-column-start: 1;
grid-column-end: 4;   
}

.asociate h2{
margin: 0rem;
color:#421f68;
display: grid;
grid-column-start: 1;
grid-column-end: 4;   
}
.promos{margin:4rem 0rem;
}

.menu{margin:4rem 0rem;  

}

.pago{ margin:4rem 0rem; 

}

.promos img {
height: 5rem;    

}
.menu img{
height: 5rem; 
}

.descargar a img{
height: 3.6rem ;
display:block;
}


.pago img {
 height: 4.9rem;   
    
}



h5{
color:#4d00a1;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.2rem;
margin: 2rem 2rem 2rem 0rem;

}

    
p{
color: #5a5959;
font-family: 'quicksand', cursive;
margin: 0rem 6rem 2rem 0rem;
}

.asociate p{
margin:2rem 0rem;
width: 50rem;}


h4{
color: #a62d9c;
font-family:'quicksand', cursive;  
font-weight: 400;    
font-size: 1.2rem;

}

.video{}
footer{
font-family: cursive;
font-size: 0.7rem;
margin: 4rem 5rem 0rem 5rem;
display: grid;

}



footer p{
display: flex;
text-align: center;
}






/* mayor o igual a Desktop 1280px */

@media(min-width: 80rem){
transition:all1s
    .contenedor {max-width: 80%; grid-template-columns: auto auto auto ;display: grid;grid-column-gap: 30px; }
    
    body{ margin:0rem;}
    .grid-container { display: grid; flex-wrap: wrap; width: 65rem;}
    .grid-container article {width: 65rem;}
    nav h2 img {  margin: 5% 48% 0% 48%;}
    .grid-container h3{margin: 0rem 0rem 2rem 0rem;}
    .descargar img{ height: 7rem; margin: 2rem 0rem 0rem}
    .iphone img{ display: grid; width: 30rem; float:right; margin: 0rem 0rem 0rem 13rem }
    h2{ font-size: 3rem;  }
   
    footer{margin: 0rem 10rem 5rem 10rem;}
   
    
}


/* mayor o igual a phone 599px */

@media (max-width: 599px){
    transition:all 1s
    .contenedor {max-width: 100%; grid-template-columns: "";grid-auto-columns: 10rem 10rem; }
    
     .grid-container { display: block; flex: flex; text-align: center ;margin:1rem;}
    .grid-container h2 {margin: 0rem 1rem; font-size: 1.8rem}
    .info{background-size: cover; display: block }
    nav h2 img{ margin:2rem 1rem 1rem 11rem; height:4rem }
    .iphone img{ width: 20rem; float: inherit; }
    body{ background-size:auto; }
    
  
    h3{text-align: center;font-size: 1.7rem; margin: 0.5rem 1rem 3rem 1rem; ;}
    
    section{ display: block; flex: flex;}
    .descargar{margin: 2rem 5rem 5rem 5rem;}
    .descargar img { margin: 0.7rem 1rem; padding: 0.2rem;float: inherit; }
   
    .info{ width: 100%; background-size:contain; text-align: center;  }
    .beneficios{margin: 1rem 0rem 1rem 0rem;display: block} 
    h5{text-align: center; margin: 0rem; padding: 0rem;}
    p{ margin: 2rem 3rem 2rem 3rem;}
    .beneficios img{height:6rem;   }
    .asociate { display: block;margin:0rem 1rem; text-align: center}
    .asociate p{ width: 23rem;display: block; text-align: center;padding: 0rem 2rem }
    footer{margin: 5rem 0rem 0rem 0rem;}
    footer p { display: block ;  margin: 2rem 1rem; font-size: 10px;}
    .video{display: flex;
    
}
    
}