body {
    margin: 0;
      
}

#divbody { margin: 0;
    
}

#div1 {
    background-color: #3DB66F;
    height: 2.5rem;
    width: 80%;
    margin: auto;

        }

#div2 {
    background-color: white;
    height: 5rem;
    width: 80%;
    margin: auto;
        }

#div3 {
    width: 100%;
    height: 450px;
    margin: 0 auto;
    position: relative;
    background-image: url("../img/img.png");
    background-size: cover;
    }

#div4 {
    height: 20%;
    width:80%;
    margin: auto;
    position: relative;
}

a {
    height: 20%;
    width:60%;
    margin: auto;
    position: relative;
    font-family: 'Teko';
    text-align: justify;
    text-decoration: none;
    font-size: 50;
    font-weight: 100;
}

#div5 {
    background-color: #3DB66F;
    height: 60%;
    width: 80%;
    margin: auto;
    position: relative;
    
}

#div6 {
    background-color: white;
    height: 2rem;
    width: 80%;
    margin: auto;
}


#principal {
    width: 80%;
    margin: 0 auto;
    height: 450px;
    margin: 0 auto;
    position: relative;
}
#box1 {
    width: 45%;
    height: auto;
    margin: 0;
    
    float: left;
}


#box2 {
    width: 45%;
    height: auto;
    margin: 0;
    
    float:right;
    text-align: center;
}

.titular {
    
    width: 80%;
    margin: 5rem auto;
    float: center;
    
}
.logo {
    margin: .1rem auto 0 1rem;
    width: 10rem;
    float: left;
}

.item1 {
    display: block;
    width: 80%;
    margin: 0 auto 1rem auto;
}

.appstore {
    float: right;
    margin: 1rem 1rem 0 auto;
    width: 14%;
    min-width: 5rem;
}

.appstoreandroid {
    float: right;
    margin: 1rem 1rem 0 auto;
    width: 13%;
}

.appstore1 {
    float: right;
    margin: 1rem 1rem 0 auto;
    width: 14%;
    height: 140%;
}

.imagenbyn {
    width: 100%;
    margin: 0;
    
    
}

.mockupgif {
    width: 40%;
    margin: 0rem auto 0 4rem;
    float: center;
    padding: 1rem;
    min-width: 100px;
}

.imagenmockups {
    width: 60%;
    display: block;
    margin: 0 auto;
    
    
}

p.descrip {
    display: block;
    width: 60%;
    font-family: 'Teko';
    color: #525252;
    font-weight: 100;
    text-decoration-color: #d81414;
    margin: 1rem auto;
    text-align: justify;
}


#botonera {
    display: block;
	margin: 12rem auto;
    top: 5%;
    bottom: 5%;
    
}

.table {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
}
ul {
    margin: 0;
    
}
ul#horizontal-list {
	list-style: none;
    margin: 0 auto;
}

ul#horizontal-list li {
	display: inline;
    margin: 0 .6rem;
    width: 16%; /* COMO CORNO HAGO PARA QUE LAS IMAGENES DE LAS LISTAS CAMBIEN DE TAMAÑO? */
    float: left;
}

p{
    font-family: 'Teko';
    color: #525252;
}

h3 {    
    font-size: 1.5rem;
    line-height: 1.7rem;
    position: relative;
    display: block;
    margin: auto;
    font-family: 'Teko';
    text-align: center;
    text-decoration: none;
    font-weight: 100;
    color: #363636;
}


h1 {
    background-color: #3DB66F;
    height: 2.5rem;
    width: 80%;
    margin: auto;
    text-decoration-color: aliceblue;
    font-family: 'Teko';
    font-size: 10;
     text-align: center;
    
        }

.footer, p {
    
    text-align: center;
}

p.legal {
    margin: 2rem 0;
    font-size: .5rem;
    font-family: 'arial';
    text-align: center;
    text-decoration: none;
    font-weight: 100;
    color: lightgrey;
}


/* RESPONSIVEEEEEEEEEE */


@media all and (max-width: 1400px) {
    
    .titular {
    
    width: 80%;
    margin: 5rem 5rem 5rem 0;
    float: right;
    } 
    
     .mockupgif {
        width: 40%;
        margin: 0rem auto 0 2.5rem;
        float: center;
        padding: 1rem;
    }
    
    #div3 {
        width: 100%;
        height: 350px;
        margin: 0 auto;
        position: relative;
        background-image: url("../img/img.png");
        background-size: cover;
    }
    
   
    
    
    
}

@media all and (max-width: 800px) {
    
    
    #div3 {
        width: 100%;
        height: 250px;
        margin: 0 auto;
        position: relative;
        background-image: url("../img/img.png");
        background-size: cover;
    }
    
    .mockupgif {
        width: 60%;
        margin: 0rem auto 0 2.5rem;
        float: center;
        padding: 1rem;
    }
    #botonera {
        display: block;
        margin: 10rem auto;
        top: 5%;
        bottom: 5%;
    }
    
    
    
}

@media all and (max-width: 700px) {
   
    
    #div3 {
        width: 100%;
        height: 250px;
        margin: 0 auto;
        position: relative;
        background-image: url("../img/img.png");
        background-size: cover;
    }
    .titular {
    
    width: 80%;
    margin: 5rem 3rem 5rem 0;
    float: right;
    } 
    
    .mockupgif {
        width: 60%;
        margin: 0rem auto 0 2.5rem;
        float: center;
        padding: 1rem;
    }
    
    ul#horizontal-list li {
	display: block;
    margin: 0 .6rem;
    width: 40%; /* COMO CORNO HAGO PARA QUE LAS IMAGENES DE LAS LISTAS CAMBIEN DE TAMAÑO? */
    float: left;
        text-align: center;
    }

    #botonera {
    display: block;
	margin: 7rem auto;
    top: 5%;
    bottom: 5%;
    
}
    
}

@media all and (max-width: 400px) {
   
    
    #div3 {
        width: 100%;
        height: 250px;
        margin: 0 auto;
        position: relative;
        background-image: url("../img/img.png");
        background-size: cover;
    }
    .titular {
    
    width: 80%;
    margin: 5rem 1rem 5rem 0;
    float: right;
    } 
    .mockupgif {
        width: 60%;
        margin: 0rem auto 0 2.5rem;
        float: center;
        padding: 1rem;
        
    }
    
    ul#horizontal-list li {
	display: block;
    margin: 1rem .6rem;
    width: 100%; /* COMO CORNO HAGO PARA QUE LAS IMAGENES DE LAS LISTAS CAMBIEN DE TAMAÑO? */
    float: center;
        text-align: center;
    }

    #botonera {
    display: block;
	margin: 7rem auto;
    top: 5%;
    bottom: 5%;
    
}
    
    h3 {    
    font-size: 1.2rem;
    line-height: 1.7rem;
    position: relative;
    display: block;
    margin: auto;
    font-family: 'Teko';
    text-align: center;
    text-decoration: none;
    font-weight: 100;
    color: #363636;
}
        
    .logo {
    margin: .1rem auto;
    width: 10rem;
}

    
}