html, body {
width: 100%;
margin: 0;
padding: 0;
min-width: 320px;
}
body {
color: #000000;
text-align: center;
font-size: 18px;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
background-size: cover;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
i {
vertical-align: middle;
}
.clearfix {
width: 100%;
clear: both;
}
.wrapper {
width: 100%;
}
.map {
width: 100%;
height: 500px;
clear: both;
z-index: 1;
background: #FFF url(//plague.io/images/map.png) no-repeat 50% 50%;
}
.buttons {
width: 100%;
height: 70px;
clear: both;
overflow: hidden;
text-align: center;
}
.buttons__top {
margin-top: -70px;
}
.buttons__bottom {
margin-bottom: 30px;
}
.buttons-appstore {
display: inline-block;
width: 134px;
height: 40px;
background: url(//plague.io/images/appstore.png) no-repeat 50% 50%;
background-size: 134px 40px;
margin: 5px;
}
.buttons-android {
display: inline-block;
width: 134px;
height: 40px;
background: url(//plague.io/images/android.png) no-repeat 50% 50%;
background-size: 134px 40px;
margin: 5px;
}
.text-block {
padding: 40px;
clear: both;
font-size: 18px;
}
.text-block__big {
width: 100%;
padding: 40px 0 20px;
clear: both;
font-size: 25px;
}
.text-block__big big {
font-size: 45px;
font-weight: 100;
}
.img-block {
width: 100%;
height: 500px;
}
.img-block__1 {
background: url(//plague.io/images/1.png) no-repeat 50% 50%;
margin-bottom: 10px;
}
.img-block__2 {
background: url(//plague.io/images/2.png) no-repeat 50% 50%;
}
.img-block__3 {
background: url(//plague.io/images/3.png) no-repeat 50% 50%;
}
.img-block__4 {
background: url(//plague.io/images/4.png) no-repeat 50% 50%;
}
.img-block__5 {
background: url(//plague.io/images/5.png) no-repeat 50% 50%;
}
.img-block__6 {
background: url(//plague.io/images/6.gif) no-repeat 50% 50%;
}
.footer {
width: 100%;
background-color: #EEEEEE;
height: 30px;
padding-top: 10px;
text-align: center;
font-size: 14px;
}
.footer a {
text-decoration: none;
color: #0082ea;
}
.footer a:hover {
color: #0066b7;
}
@media only screen and (max-width: 600px) {
.map {
width: 100%;
height: 500px;
clear: both;
z-index: 1;
background: #FFF url(//plague.io/images/mobile-map.png) no-repeat 50% 0;
background-size: cover;
}
.text-block {
text-align: left;
padding: 20px;
}
.text-block__big {
text-align: center;
padding: 20px 0;
}
.img-block {
width: 100%;
height: 361px;
}
.img-block__1 {
background: url(//plague.io/images/mobile-1.png) no-repeat 50% 50%;
background-size: cover;
}
.img-block__2 {
background: url(//plague.io/images/mobile-2.png) no-repeat 50% 50%;
background-size: cover;
}
.img-block__3 {
background: url(https://plague.io/images/mobile-3.png) no-repeat 50% 50%;
background-size: cover;
}
.img-block__4 {
background: url(//plague.io/images/mobile-4.png) no-repeat 50% 50%;
background-size: cover;
}
.img-block__5 {
background: url(//plague.io/images/mobile-5.png) no-repeat 50% 50%;
background-size: cover;
}
.img-block__6 {
background: url(//plague.io/images/6.gif) no-repeat 64% 50%;
background-size: cover;
}
}