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

* {
    /* selector universal */
    box-sizing: border-box;
    /* para que el ancho de todas las etiquetas
        tomen como referencia el borde de las mismas
        y NO el contenido, como viene por defecto  */
    list-style: none;
    margin: 0;}

#pagina1 {height: 48em;
    background-image: url(../img/fondo_transparencia.png);
    background-color: rgb(55, 170, 255);
    background-attachment: fixed;
    background-size: cover;
    border-radius: 15px;}

figure>img,
#logo>img {display: block;}


img {max-width: 100%;
    max-height: 100%;}

#logo {background-color: rgb(255, 255, 255);
    border-radius: 10px;
    width: 220px;
    min-width: 200px;
    font-weight: bold;
    display: inline-block;
    padding: 0.5em;
    margin-left: 0%;
    }

header {display: -webkit-flex;
    border-radius: 15px;
    width: 100%;
    height: 70px;
    justify-content: space-between;
    align-items: center;
    padding: 2.5em 1em 3em 1em;
    text-align: center;
    text-decoration: none;}

header nav ul {/*  para que sea horizontal
            definimos la lista menú
            como caja flexible */
        display: -webkit-box;}

a {text-decoration: none;}

nav ul li {padding: 15px;}

nav ul li a {font-family: 'Roboto', sans-serif;
            font-size: 15px;
            background-color: rgb(199, 119, 119);
            border: solid 1px rgb(10, 10, 10);
            border-radius: 8px;
            color: black;
            padding: 0.5em;
            text-align:center;}

nav ul li a:hover {background-color: rgb(249, 250, 249);}

#texto1 {font-family: 'Roboto', sans-serif;
    position:relative;
    top:5em;
    bottom: 0;
    right: 40%;
    left: 10%;
    min-width: 10em;
}

h1 {font-size: 25px;
    color: white;
    object-position: center;}

#puntero {height: 70px;
        width: 100px;
        position: absolute;
        top:25px;
        bottom: 0;
        left: 9.5em;
}

#texto2 {position: absolute;
    top:23em;
    margin-left: 2em;
    margin-right: 50%;}


h2 {font-family: 'Roboto', sans-serif;
    font-size: 16px;}



#mock1 {height: 83%;
        width: 25%;
        position: absolute;
        top: 7em;
        bottom:10em;
        right: 5em;
        left: 60%}

#mock2 {height: 76%;
        width: 20%;
        position: absolute;
        top: 10em;
        bottom:10em;
        right: 5em;
        left: 75%;}



#mock3 {height: 80%;
        width: 20%;
        position: absolute;
        top: 10em;
        bottom:10em;
        left: 50%;}
#mock1, #mock2, #mock3, {max-width: 50%;}

#tiendas {display: -webkit-box;
            position: relative;
            left: 4%;
            top: 18em;}

#windows, #google, #apple {height: 6em; width: 15em; padding: 15px;max-width: 750px}



#apple {position: relative;
        left: 16%;    
        top: 17em;}

#pagina2 {
        margin-top: em;
        height: 20em;
        background-image: url(../img/fondo_transparencia.png);
        background-color: rgba(253, 253, 253, 0.96);
        background-attachment: fixed;
        background-size: cover;
        border-radius: 15px;}
    

#redes {display: -webkit-box;
            margin-left: 15%;
            position: absolute;
            top: 43em;
            background-color: rgba(255, 255, 255, 0.62);
            border-radius: 15px;}

#redes:hover {background-color: rgba(253, 251, 251, 0.99);
            
            border-radius: 15px;}

#facebook, #twitter, #instagram {height: 50px; width: 60px; margin: 10px;}

#legal {font-family: 'Roboto', sans-serif;
    display: flex;
        align-items: top;
        justify-content: center;
        position: absolute;
        left: auto;
        top: 53em}

.legal, nav ul li:hover {color: red;}

#legal p {text-align: center;
        color: #7e6603;
        font-weight: bold;
        }

footer{font-family: 'Roboto', sans-serif;
    color: white;
    text-align: justify;
    font-size: 12px;
    padding: 3em 2em 3em 2em;
    margin: 0em 0em 0em 0em;
    background-color: black;
    border-radius: 15px;}

footer a {color: white;
text-decoration: underline;}

    /* a partir de 800px */

@media screen and (max-width: 800px)
{
    #pagina1 {height: 41em;}
    h1 {font-size: 17px;}
    #texto1 {position: absolute;
    left: 3%;
    top: 10em;}
    
    #logo {max-width: 90px; padding: 5px; margin-left: 0%;}
    
    nav ul li {padding: 0px; margin-right: 1em;}
    
    nav ul li a {
        font-size: 12px; padding: 5px;}
    
    #puntero {position: absolute; top: 5px;}
    
    h2 {font-size: 15px;}
    #texto2 {position: absolute;
    top: 19em;
    max-width: 22em;}
    
    #tiendas {position: absolute;
    top: 29em;}
    
    #apple {position: absolute;
    top: 32em;}

    #windows, #google, #apple {height: 5em; width: 10em; padding: 10px;}
    
    #redes {position: absolute;
            top: 37em;
            left: 10%;
            margin-left: 8%;}
    
    #facebook, #twitter, #instagram {height: 30px; width: 30px;}

    #mock1 {width: 220px;}

    #mock2, #mock3 {position: absolute; top: 18em;}
    
    #pagina2 {height: 15em;}
    #legal {position: absolute;
    top: 60em; font-size: 12px; font-weight: bold;}
    
    #legal p {text-align: left;margin-left: 5%;}

    #legal, nav {margin-left: 20px;}
    #legal, section ul {padding: 5%; text-align: left;}
    #legal, section ul li {font-weight: bold; padding: 0px;}
    
}



    /* a partir de 600px */

@media screen and (max-width: 600px)

{
    #pagina1 {height: 38em;}
   
    #logo {min-width: 7em; height: 2em; margin-left:0em;}
   
    header {padding-top: 1.5em;}
    header nav ul li {}
    
    nav ul li a {margin-right: -10%; margin-left: 10%; font-size: 9px;}
    nav ul {margin-left: -20%; margin-right: -10%;}
    
    h1 {font-size: 15px;}
    
    #texto1 {position: absolute;
    left: 4%;
    top: 6em;}
    
    #puntero {height: 3.5em; width: 3em; position: absolute; top: 8px; left: 10em;}
    
    h2 {font-size: 13px; text-align: center;}
    #texto2 {position: absolute;
    top: 16em;
    left: -5%;
    max-width: 10em;}
    
    #tiendas {display: block; position: absolute;
    top: 25em;}
    
    #apple {position: absolute;
    top: 31em; left: 4%}
    
    #windows, #google, #apple {height: 3em; width: 7em; padding: 8px;}
    
    #redes {position: absolute;
            top: 35em;
            left: 4%;
            margin-left: 3%;}
    
    #facebook, #twitter, #instagram {height: 25px; width: 25px; margin-left: 3%; margin: 8px;}

    #mock1 {width: 220px; left: 45%;}
    #mock2 {width: 0px;}
    #mock3 {width: 180px; position: absolute; top: 10em; left: 30%;}
    
    #pagina2 {height: 12em;}
    
    #legal {position: absolute;top: 56em; font-size: 11px; font-weight: bold;}
    #legal, section ul li {font-weight: bold; padding: 5px;}
    
    footer {font-size: 11px; }
}
 
    
/* a partir de 360px */

@media screen and (max-width:360px)

{
    #pagina1 {height: 51em;}
   
    #logo {min-width: 5em; height: 2em;}
   
    header {flex-direction:column; padding-top: 1.5em;}
    
    header nav ul {}
    
    nav ul li a {border-radius: 4px; margin-right: -25%;font-size: 11px;}
    nav ul {  margin-top: 20px; margin-right: -8%; margin-left: -10%;}
    
    h1 {font-size: 12px;}
    
    #texto1 {position: absolute;
    left: 6%;
    top: 8em;}
    
    #puntero {height: 3.5em; width: 3em; position: absolute; top: 5px; left: 10em;}
    
    h2 {font-size: 10px; text-align: right;}
    
    #texto2 {top: 40em;
    left: 40%; right: 1%;
    margin-right: 15px;
    max-width: 20em; min-width: 8em;}
    
    #tiendas {display: -webkit-flex;
        left: 1%;
    top: 43em; width: 200px; height: 80px; padding: 1px;}
    
    #apple {position: absolute;
    top: 45.5em; left: 20%; height: 90px; width: 90px;}
    
    #redes {position: absolute;
            top: 49em;
            left: 13%;
            margin-left: 9%;}
    
    #facebook, #twitter, #instagram {height: 15px; width: 15px; margin: 5px;}

    #mock1 {width: 200px; top: 12em; left: 35%;}
    #mock2 {width: 0px;}
    #mock3 {width: 180px; position: absolute; top: 18em; left: 3%;}
    
    #pagina2 {height: 7em;padding: 0px;}
    
  #legal {position: absolute; top: 118em; font-size: 7px; font-weight: bold;padding: 0px;}
    #legal, section ul li {font-weight: bold; padding: 0px;}
    #legal, section ul {padding: 0px;}
    
    footer {font-size: 8px; padding: 15px; }
}