@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

/*GENERALES*/

*   {margin: 0; 
    padding:0;
    box-sizing: border-box;}

/*ESTILOS*/

body {margin:0;
    font-family: 'Roboto Condensed', sans-serif;
    background-color: #ECE2F1;}

body nav {font: roboto; text-align:center;}

/*HEADER*/

header{
    width: 100%;
    height: auto;
    }


/*CONTENEDOR*/

.contenedor {padding: 1rem;
    margin-bottom: 0,5rem; 
    width: 100%;}

.menu {
    display: inline-block; 
    color: aqua; 
    text-decoration: none; 
    background: #352d69; 
    display: flex; 
    justify-content: space-around; 
    width: 100%;}

.linkactivo { 
    background: white;
    color: #52e2c1;}

.linkactivo:hover {
    background:#352d69;
    color:white;}


/*MENU NAV*/

.menu {display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: flex-start;
	align-content: flex-start;
    text-align: center;
    color: aqua; 
    text-decoration: none; 
    background: #65B3BF; 
    display: flex; flex: inline-block
    justify-content: space-around; 
    width: 100%;}

.menu ul li {
    list-style-type: none; 
    display: inline-block;}

.menu ul li a{ 
    margin: 2rem; 
    border-radius: 20%;
    background: #65B3BF;
    padding: 1rem;
    text-decoration: none; 
    display: inline-block;
    color: white;}

.botonnombres{
    background: #207886;
}

.menu ul li a:hover{ background: #396c74;}




/* IMAGEN ARRIBA DEL BLOQUE BLANCO*/
.fotocelular { 
    background: url(../img/celularmano.jpg); 
    background-size: cover; 
    width: 100%; 
    height: 20rem;}

/* BLOQUE BLANCO QUE JUNTA LA DESCRIPCION Y EL LOGO CON LAS PANTALLAS*/
.bloqueblanco {
    padding: 1rem; 
    background:white; 
    width: 100%; 
    display: flex; 
    flex: inline-block;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    list-style-type: none; 
    text-decoration: none;
    }

/*LOGUITO DE LA APP, DESCRIPCION Y LOGOS PARA BAJAR*/

.columna1 {
    padding: 2rem; 
    background:white; 
    width: 35%; 
    list-style-type: none; 
    text-decoration: none;}


.columna1 article ul li {
    margin: 1rem;
    font-size: 2rem;
    color: #352d69; list-style-type: none; text-decoration: none; }

.ul li apple {
    margin-top: 3rem;
    list-style-type: none; 
    text-decoration: none;
}
.playstore {
    justify-content:flex-start;  
    list-style-type: none; 
    text-decoration: none;}

.imgdescarga{
    width: 268px;
    height: 79px;
}

/*PANTALLAS PARA EL COSTADO*/
.columna2 { 
    display: flex; 
    flex: inline-flex;
    align-content: center;
    justify-content: center;
    background:white; 
    height: 20%; 
    width: 65%; }

.columna2 article img {box-shadow: 5rem;}

.imgprincipal{
    width: 80%;
}

/*PANTALLAS DE EJEMPLO, SON 5*/
.principalesfunciones { 
    padding: 2rem;
    background: #51e2c1; 
    display: flex; flex: inline-flex; 
    justify-content: space-around;
	align-items: flex-start;
	align-content: flex-start;
    text-align: center;  
    height: 10%; 
    list-style-type: none; 
    text-decoration: none;
    width: 100%; 
    font-size: 3rem;
    color: #352d69;}

.principalesfunciones li img { 
    margin: 1rem; 
    padding: 1rem;
    height: 10rem;}

/*BENEFICIOS, CON 3 ICONOS*/
.beneficios {
    padding: 2rem; 
    background:white; 
    height: 20%;
    width: 100%; }

.beneficios ul {
    list-style-type: none; 
    text-decoration: none; 
    padding: 3rem;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: flex-start;
	align-content: flex-start;
    text-align: center;
    color: #352d69;}

.descarga {
    color:#ffffff;
    align-items: center;
   
    }
/*ASIDE*/
aside {
    background: #352d69; 
    height: 5%; width: 100%; 
    padding: 2rem;
    align-items: center;
    }




aside ul li { 
    padding: 0.5rem;  
    list-style-type: none; 
    text-decoration: none;
    justify-content: space-around;
    text-align: center;}

aside ul li img { width: 8%; }
aside ul li a { color: white;
    font-size: 2rem; list-style-type: none; 
    text-decoration: none;}}
aside ul li p { 
    color: white;
    font-size: 2rem; }

/*FOOTER*/

footer{
    background: #65B3BF;
    padding: 1rem;
    margin: 0; text-align: center;}

footer p {color: #ffffff; 
    font-style: oblique; font-size: 1rem;}

.beneficios ul li{
    width:30%;
}

-------------------------------------------------------------------------/*RESPONSIVE*/

--------------------------------------------/* TABLET */
@media (max-width: 800px) and (min-width: 500px) {
    
    
body{
        align-content: center;
    }
    
 header{
        height: auto;
        width: 100%;
        background: #000;
        position: fixed;
        top: 0;
    }
    

    .contenedor {
            display:flex; 
            flex:inline-block; 
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
    }  
        
    main {
        display:flex; 
        flex:inline-block; 
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }
        
    
    section {
        margin: 0px;
        width: 720px;
        display:flex; 
        flex:inline-block; 
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }
    
    article{
        margin: 0px;
    }
    
    .fotocelular{
        margin: 0px;
        width: 720px;
        height: 150px;
        transition: all 1s;
    }
    
    div{
        width: 90%;
        display:flex; 
        flex:inline-block; 
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }

    
    article{
        width: 100%;
        align-content: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    ul{
        width: 100%;
        flex-wrap: wrap;
    }
    
    ul li{
        width: 100%;
        align-content: center;
        justify-content: center;    
    }
    
    .imglogo{
        width: 100%;
        align-content: center;
    }
        
    .bloqueblanco {
        width: 100%;
        display:flex; 
        flex:inline-block; 
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }
    
    .apple{
            width: 25%;}
        
    .columna1{
        width: 30%;
        align-content: center;
        justify-content: center;
        flex-wrap: wrap;
    }         
    
    .columna2{
        width: 70%;}
        
    aside {
        display:flex; 
        flex:inline-block; 
        flex-direction: row;
        flex-wrap: wrap;}
    
    .principlesfunciones{
        height: 400px;
    }
         
    footer {
        display:flex; 
        flex:inline-block; 
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 10 px;
    }
        
} 
@media (max-width: 600px)

/* header landing */
@media (max-width: 800px) 
@media (max-width: 600px)
    
/* cuerpo principal*/
@media (max-width: 800px) 
@media (max-width: 600px)