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

body{ font-family: sans-serif; margin-top: 0;}

nav{ width: 100%; background: #2fb6ea;}
nav ul{ padding: 0; margin: 0}
nav ul li{list-style-type: none;}
nav ul li a{background: #2fb6ea; text-decoration: none; color: #fff; display: block; padding: 10px; text-align: center;}
nav .botones{ position: relative; background: #2fb6ea; height: 50px;}
nav .cruz{ position: absolute; top: 10px; right: 10px;}
nav .hamb{position: absolute; top: 10px; right: 10px;}
.vinculo{ text-align: center; color: #fff; display: block;}

img.hamb {
    width: 2%;
}

img.flecha {
    width: 1%;
    position: absolute;
    top: 10px;
    left: 10px;
}

img.cruz {
    width: 2%;
}


#main{
    background-image: url("../img/fondo.png");
    padding-bottom: 12em;
}

img.iphone1 {
    width: 23%;
    margin-left: 28em;
    margin-top: 5em;
}

h1 {
    margin-left: 29.2em;
    margin-top: -10em;
    color: #2fb6ea;
    font-style: bold;
}

h2 {
    margin-left: 39em;
    margin-top: -0.3em;
    color: #2fb6ea;
    font-style: italic;
}

p {
    margin-left: 58.5em;
}

img.logo {
    width: 10%;
    margin-left: 4em;
    margin-bottom: 22em;
}

img.store{
    display: block;
    margin-left: 58.2em;
    margin-top: 1em;
}

#motiv {
    padding-top: 5em;
    padding-bottom: 10em;
    background-image: url("../img/irongrip.png");
}


img.motivimg {
    position: absolute;
    margin-left: 30em;
    margin-top: 1em;
}

h3 {
    font-size: 40px;
    font-style: bold;
    color: #2fb6ea;
    position: absolute;
    margin-left: 21em;
    margin-top: 1em;
}

articule {
       display: block;
    -webkit-margin-before: 7em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    margin-left: 56em;
    margin-right: 27em;
    font-size: 15px;
    color: #ffffff;
}

ul.lista {
    display: block;
    -webkit-margin-before: 2em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    margin-left: 46.4em;
    margin-right: 27em;
    font-size: 18px;
    font-style: italic;
    list-style: none;
    color:#ffffff;
}

h4 {
    font-size: 40px;
    font-style: bold;
    position: absolute;
    margin-left: 4em;
    margin-top: 0.5em;
    color: #2fb6ea;
}

img.nav {
    margin-left: 3em;
    margin-top: 5em;
    width: 90%;
}

img.panta {
    margin-left: 4em;
    margin-top: 5em;
    width: 80%;
}

footer{
    background: #2fb6ea;
    color: #fff;
    padding-top: 2em;
    padding-bottom: 2em;
}

p.foot{
    text-align: center;
    font-size: 12px;
    margin-left: -10em;
    margin-bottom: 0em;
}

p.vn29{
    text-align: center;
    font-size: 15px;
    margin-left: -10em;
}

#navega{
    background-image: url("../img/fondo.png");
    background-repeat: repeat;
}

.img-wrapper{ max-width: 300px; margin: 0 auto;}
.img-wrapper img{ width: 100%;}


@media screen and (max-width:1280px){
    
    img.hamb {width: 2%;}
    img.flecha {width: 1%;position: absolute;top: 10px;left: 10px;}
    img.cruz {width: 2%;}
    #main{background-image: url("../img/fondo.png");padding-bottom: 12em;}
    img.iphone1 {width: 23%;margin-left: 16em;margin-top: 5em;}
    h1 {margin-left: 18em;margin-top: -9em;color: #2fb6ea;font-style: bold;}
    h2 {margin-left: 24em;margin-top: -0.3em;color: #2fb6ea;font-style: italic;}
    p {margin-left: 36em;}
    img.logo {width: 10%;margin-left: 2em;margin-bottom: 18em;margin-top: 4em;}
    img.store{display: block;margin-left: 36em;margin-top: 1em;}
    #motiv {padding-top: 5em;padding-bottom: 10em;background-image: url("../img/irongrip.png");}
    img.motivimg {position: absolute;margin-left: 15em;margin-top: 1em;}
    h3 {font-size: 40px;font-style: bold;color: #2fb6ea;position: absolute;margin-left: 15em;margin-top: 1em;}
    articule {display: block;-webkit-margin-before: 7em;-webkit-margin-after: 1em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;margin-left: 40em;margin-right: 10em;font-size: 15px;color: #ffffff;}
    ul.lista {display: block;-webkit-margin-before: 2em;-webkit-margin-after: 1em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;margin-left: 33em;margin-right: 5em;font-size: 18px;font-style: italic;list-style: none;color:#ffffff;}
    h4 {font-size: 40px;font-style: bold;position: absolute;margin-left: 5em;margin-top: 0.5em;color: #2fb6ea;}
    img.nav {margin-left: 20em;margin-top: 5em;width: 50%;}
    footer{background: #2fb6ea;color: #fff;padding-top: 2em;padding-bottom: 2em;}
    p.foot{text-align: center;font-size: 12px;margin-left: 10em;margin-right: 10em;margin-bottom: 0em;}
    p.vn29{text-align: center;font-size: 15px;margin-left: -10em;}
    #navega{background-image: url("../img/fondo.png");background-repeat: repeat;}
}


@media screen and (max-width:700px){
    
  nav .botones{ background: #2fb6ea;}
    articule {margin:0; margin-top: 3em;}
    h1, h2, h3, h4, p, p.foot, p.vn29 {margin: 0;text-align: center;}
    motiv {margin: 0;padding: 0;}
    ul.lista{margin: 0;}
    img.hamb, img.cruz{width: 6%;}
    img.flecha{width: 3%;}
    img.logo{width: 30%; position: absolute;margin-left: -20em; margin-top: 2em;}
    img.iphone1{width: 85%; margin-left: 1em; margin-top: 15em; position: block;}
    img.motivimg{width: 60%; margin:0;position:relative;margin-top: 4em; margin-left: 4em;}
    img.nav {margin: 0;width: 100%;margin-top: 2em;}
    img.store{margin:0;margin-left: 15em; margin-top: 2em;}

    
}


@media screen and (max-width:400px){
    
    nav .botones{ background: #2fb6ea;}
    articule {margin:0; margin-top: 3em;}
    h1, h2, h3, h4, p, p.foot, p.vn29{margin: 0;}
    motiv {margin: 0;padding: 0;}
    ul.lista{margin: 0;}
    img.hamb, img.cruz{width: 9%;}
    img.flecha{width: 5%;}
    img.logo{width: 50%; position: absolute;margin-left: -16em; margin-top: 2em;}
    img.iphone1{width: 85%; margin-left: 1em; margin-top: 15em; position: block;}
    img.motivimg{width: 60%; margin:0;position:relative;margin-top: 4em; margin-left: 4em;}
    img.nav {margin: 0;width: 100%;margin-top: 2em;}
    img.store{margin:0;margin-left: 7em; margin-top: 2em;}
}