.container, .logo { position: relative }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, small { display: block }
.social a, a, a:hover { text-decoration: none }
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline
}
.btn-download, .btn-download:before, .icon, .logo { vertical-align: middle }
h1, h2, h3, h4 {
line-height: 1em;
margin: 1em 0 .5em
}
ol, ul { list-style: none }
blockquote, q { quotes: none }
blockquote:after, blockquote:before, q:after, q:before {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
small {
font-size: 85%;
margin-top: 20px
}
body {
background: #231202;
color: #fff;
font-family: 'Open Sans';
font-size: 1em;
line-height: 1em;
font-weight: 300;
line-height: 1.2em
}
.description, .social a, strong { font-weight: 400 }
a {
color: #e34947;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out
}
a:hover { color: #fff }
h2 { font-size: 2.8em }
h3 { font-size: 2em }
h4 {
font-size: 1.8em;
color: #fff
}
.container { margin: 0 auto }
.logo {
background: url(img/sprite.png) center 0;
height: 84px;
width: 250px;
font-family: Arial;
display: inline-block;
margin: 10px 0 10px 1%;
color: #fff;
text-indent: -9999px
}
.social {
margin: 1%;
position: absolute;
right: 0;
top: 0
}
.social a {
padding: 3px 5px;
font-size: 10px;
border-radius: 3px;
border-style: solid;
border-width: 1px
}
.btn-facebook {
background-color: #204385;
color: #fff;
border-color: #204385
}
.btn-twitter {
background-color: #2aa9e0;
color: #fff;
border-color: #2aa9e0
}
.btn-gplus {
background-color: #d3492c;
color: #fff;
border-color: #d3492c
}
.btn-facebook:hover {
background-color: #fff;
color: #204385;
border-color: #204385
}
.btn-twitter:hover {
background-color: #fff;
color: #2aa9e0;
border-color: #2aa9e0
}
.btn-gplus:hover {
background-color: #fff;
color: #d3492c;
border-color: #d3492c
}
.content-top {
background: #f1e767;
background: -moz-linear-gradient(top, #f1e767 0%, #feb645 100%);
background: -webkit-linear-gradient(top, #f1e767 0%, #feb645 100%);
background: linear-gradient(to bottom, #f1e767 0%, #feb645 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=0 );
border-bottom: 1px solid #59b867;
border-radius: 20px 20px 0 0;
clear: both;
display: table;
padding: 20px
}
.box, .row {
color: #fff;
position: relative;
box-shadow: 0 1px 0 rgba(0,0,0,.1)
}
.description, figure {
display: inline-block;
width: 48%
}
.description {
float: left;
padding: 0 1%
}
figure {
float: right;
margin-right: -20px;
margin-top: 10px;
padding: 0;
overflow: hidden
}
.content-middle, .row {
display: table;
clear: both
}
.box, .col7, .icon, .row { float: left }
figure img {
width: 150%;
height: auto
}
.content-middle {
background: #feb645;
border-radius: 0 0 20px 20px;
padding: 20px
}
.row {
background: #ee6f1a;
color: white;
font-size: 1.5em;
margin: -1px 0 0;
padding: 2%;
text-align: center;
width: 96%;
}
.row h3 { margin-top: 0 }
.row>p { padding-right: 30px }
.features li {
display: inline-block;
padding-right: 20px
}
.box {
background: #ee6f1a;
display: block;
min-height: 140px;
margin: 1%;
padding: 1%;
width: 46%;
border-radius: 6px
}
.btn-download:before {
content: "";
background: url(img/sprite.png) center -92px;
height: 42px;
left: 20px;
position: absolute;
top: 18px;
width: 43px
}
.btn-download {
background: #56a61e;
border: 1px solid #69ca3b;
display: inline-block;
margin: 20px 0;
min-height: 60px;
color: #fff;
min-width: 280px;
padding: 10px 20px 12px 80px;
position: relative;
border-radius: 12px;
text-shadow: 1px 1px 0 rgba(0,0,0,.1);
box-shadow: 0 0 35px rgba(0,0,0,.3), 0 1px 0 #56a61e inset
}
.btn-download strong {
display: block;
font-size: 22px;
line-height: 28px;
font-weight: 400
}
.btn-download em {
display: block;
font-size: 13px;
font-style: normal;
line-height: 22px
}
.box h4, .icon { display: inline-block }
.btn-download:hover {
background: #79d448;
border: 1px solid #7fdb4e;
color: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.5), 0 1px 0 #7fdb4e inset
}
.box h4 {
margin: 8px 0 0;
padding-right: 20px
}
.box>p, .box>ul {
clear: both;
margin-top: 20px
}
.icon {
background-image: url(img/sprite.png);
height: 55px;
margin-bottom: 8px;
margin-right: 15px;
width: 69px
}
.icon-1 { background-position: center -151px }
.icon-2 { background-position: center -218px }
.icon-3 { background-position: center -278px }
.icon-4 { background-position: center -334px }
footer, footer a { color: #935314 }
footer a:hover { color: #fff }
.legal {
padding: 20px;
text-align: center;
margin-bottom: 50px
}
.pub {
width: 300px;
height: 280px;
margin: 0 auto;
display: block
}
.col3, .col7 { display: inline-block }
.col7 { width: 60% }
.col3 { float: right }
h1 {
font-size: 2.8em;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.description>p {
font-size: 1.5em;
line-height: 1.5em;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
.description { color: #231202; }
.description h1 { color: #fff }
.phone {
display: block;
float: right;
font-size: 26px;
line-height: 28px;
margin: 50px 10px 0 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.fbox {
display: table;
padding: 0 0 50px;
text-align: center;
width: 100%;
}
iframe { width: 100%; }
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2')
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2')
}
@media(min-width:1200px) {
.container { width: 1170px }
}
@media(max-width:1199px) {
body { font-size: 90% }
.container { width: 980px }
.col3 { width: 40% }
}
@media(max-width:991px) {
body { font-size: 85% }
.container { width: 760px }
figure img {
height: auto;
width: 145%
}
.box {
height: auto;
width: 95%
}
.col3 { width: 40% }
}
@media(max-width:768px) {
.social, figure { text-align: center }
body { font-size: 80% }
.container { width: 100% }
.description {
padding: 0 5%;
width: 90%
}
.description>p { padding-bottom: 20px }
figure {
margin: 0 5%;
width: 90%
}
.btn-download, .btn-download:hover { margin: 20px auto }
figure img {
height: auto;
width: 100%
}
.btn-download { display: table }
.box {
min-height: inherit;
margin: 2%;
padding: 3%;
width: 90%
}
.content-top { border-radius: 2px 2px 0 0 }
.content-middle { border-radius: 0 0 2px 2px }
.col3, .col7 {
display: block;
float: none;
width: 100%
}
.social {
margin-top: -30px;
width: 100%
}
.logo {
display: block;
height: 84px;
margin: 50px auto 10px
}
.phone {
display: table;
float: none;
margin: 30px auto;
}
}
.mpubli { display: none }
@media(max-width:480px) {
.btn-download, .mpubli {
position: fixed;
left: 0
}
.btn-download, .social, h2 { text-align: center }
body { font-size: 85% }
header { padding: 15px 0 }
.social {
margin-top: -25px;
width: 100%
}
#admovil, .ads, .icon, .mpubli { margin: 0 auto }
.btn-download, .icon {
float: none;
display: block
}
.ads {
overflow: hidden;
width: 300px
}
.features li {
padding: 0;
width: 100%
}
.btn-download {
min-width: 95%;
border-radius: 0;
bottom: 0;
height: 60px;
padding: 10px 0;
width: 100%;
z-index: 999
}
.btn-download:before { display: none }
.mpubli {
box-shadow: 0 -1px 1px rgba(0,0,0,.5);
padding: 12px 0;
display: block;
z-index: 888;
bottom: 82px;
height: auto;
background: #fff;
width: 100%
}
#admovil { display: table }
footer {
display: block;
padding-bottom: 150px
}
h2 { margin: 0 0 .5em }
.btn-download, .btn-download:hover { margin: 0 }
}
@media(max-width:380px) {
.ads, .pub { width: 260px }
.content-middle { padding: 0 }
.legal {
line-height: 22px;
text-align: center
}
.legal a { padding: 2px 5px }
.col7 { padding: 20px 0 }
}
@media(max-width:320px) {
figure img {
height: auto;
width: 100%
}
.ads { width: 220px }
}