.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: #E7E6DB url(img/bg.jpg) fixed center center;
background-size: cover;
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: #fff;
-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: #595150;
}
.container { margin: 0 auto }
.logo {
color: #fff;
display: inline-block;
font-family: Arial;
margin: 10px 0;
width: 508px;
}
.logo img {
width: 100%;
height: auto
}
.social {
margin: 1%;
position: absolute;
right: 0;
top: 0
}
.social a {
border-radius: 100%;
background-color: #eceee0;
display: inline-block;
font-size: 10px;
line-height: 50px;
padding: 3px 5px;
text-align: center;
width: 50px;
}
.btn-facebook { color: #204385; }
.btn-twitter { color: #2aa9e0; }
.btn-gplus { color: #d3492c; }
.btn-facebook:hover {
background-color: #204385;
color: #fff;
}
.btn-twitter:hover {
background-color: #2aa9e0;
color: #fff;
}
.btn-gplus:hover {
background-color: #d3492c;
color: #fff;
}
.content-top {
background: #543a71;
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: 100%;
height: auto
}
.content-middle {
background: rgba(100,100,100,.9);
border-radius: 0 0 20px 20px;
padding: 20px
}
.row {
background: #48ad51;
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: white;
display: block;
color: #595150;
min-height: 140px;
margin: 1%;
padding: 1%;
width: 96%;
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: #bababa }
footer a:hover { color: #fff }
.legal {
padding: 20px;
color: beige;
background: #48ad51;
border-radius: 200px;
text-align: center;
margin-top: 30px;
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(0, 0, 0, 0.1);
}
.description { color: white }
.description h1 { color: #fff }
.phone {
display: block;
float: right;
color: #543a71;
font-size: 40px;
line-height: 40px;
margin: 80px 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: -70px;
width: 100%
}
.logo {
display: block;
margin: 75px auto 10px;
width: 378px;
}
.phone {
display: table;
float: none;
margin: 20px auto 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 }
#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 }
.logo {
height: auto;
width: 100%;
}
}
@media(max-width:320px) {
figure img {
height: auto;
width: 100%
}
.ads { width: 220px }
}
/* Advanced Checkbox Hack */
body { -webkit-animation: bugfix infinite 1s; }
 @-webkit-keyframes bugfix {  from {
 padding: 0;
}
to { padding: 0; }
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
display: none;
cursor: pointer;
user-select: none;
}
/* background for li / select */
/* custom-dropdown */
nav[role="custom-dropdown"] {
position: relative;
width: 100%;
box-sizing: border-box;
}
nav[role="custom-dropdown"] a, nav[role="custom-dropdown"] label {
color: #ccc;
text-decoration: none;
font: 1.4em sans-serif;
transition: color .3s ease-in-out;
}
nav[role="custom-dropdown"] ul {
padding: 0;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
list-style: none;
}
nav[role="custom-dropdown"] ul > li {
float: left;
box-sizing: border-box;
padding: .55em .55em;
width: 25%;
background-image: url(img/bg_dark_grey.png);
text-align: center;
transition-duration: .3s;
transition-timing-function: ease-in-out;
transition-property: box-shadow, color;
border-radius: 200px;
cursor: pointer;
}
nav[role="custom-dropdown"] ul > li:hover {
background-color: rgba(0, 0, 0, 0.85);
color: #fff;
box-shadow: 0 0.05em 0.25em 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2em rgba(0, 0, 0, 0.3);
}
nav[role="custom-dropdown"] ul > li:hover > a { color: #fff; }

/* small screens */
@media screen and (max-width: 44em) {
html,  body { margin: 0; }
nav[role="custom-dropdown"] ul {
display: none;
height: 100%;
}
nav[role="custom-dropdown"] label {
position: relative;
display: block;
width: 40px;
min-height: 2.25em;
padding: .45em;
font-size: 1.1em;
border: none;
background: white;
margin: -20px auto 0 auto;
border-radius: 0 0 200px 200px;
}
nav[role="custom-dropdown"] label:after {
position: static;
content: "\2261";
font-size: 1.8em;
display: block;
width: 100%;
text-align: center;
}
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ label:after { color: #222; }
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul { display: block; }
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul > li {
width: 100%;
opacity: .8;
text-align: center;
}
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul > li:after {
position: absolute;
right: .25em;
content: "\203A";
font: bold 1.4em sans-serif;
}
}