@font-face { font-family: 'ElegantIcons'; src: url('/s/fonts/ElegantIcons.ttf'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Open Sans'; src: url('/s/fonts/OpenSans-Regular.ttf'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Dosis'; src: url('/s/fonts/Dosis-Light.ttf'); font-weight: normal; font-style: normal; }

* { margin: 0; padding: 0; }

body { font: 14px "Open Sans", Arial, sans-serif; background: #171717; color: #666; }

a { color: #2EA3F2; text-decoration: none; transition: all .2s ease-in; }
ul { list-style-type: none; }
img { display: inline-block; vertical-align: top; max-width: 100%; }

h1, h2, h3{ font-weight: normal; }
h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }

.hide { display: none; }

.wrap { max-width: 1060px; margin: 0 auto; padding-left: 10px; padding-right: 10px; position: relative; }
.wrap:after { content: ""; display: table; clear: both; }

.icon_phone:before, .icon_mail:before, .icon_facebook:before, .icon_instagram:before, .icon_twitter:before, .icon_linkedin:before, .icon_menu:before, .cta:after, #srv:after { font-family: 'ElegantIcons'; }
.icon_phone:before { content: "\e090"; }
.icon_mail:before { content: "\e076"; }
.icon_facebook:before { content: "\e093"; }
.icon_instagram:before { content: "\e09a"; }
.icon_twitter:before { content: "\e094"; }
.icon_linkedin:before { content: "\e09d"; }
.icon_menu:before { content: "a"; }
.cta:after { content: "\35"; }
#srv:after { content: "\33"; }

.cta { font: 18px "Open Sans", Arial, sans-serif; text-shadow: none !important; background: #0A62AA; color: #FFF !important; border: 1px solid #0A62AA; position: relative; display: inline-block; border-radius: 6px; font-weight: bold; padding: 10px 35px 10px 15px; }
.cta:after { position: absolute; right: 5px; top: 50%; margin-top: -18px; font-size: 32px; }
.cta:hover { border-color: #FFF; }

#top { background: #0A62AA; color: #FFF; padding: 10px 0; font-size: 12px; text-align: center; }
#top a { font-weight: bold; color: #FFF; }
#top a:hover { color: #B5D0E5; }
#top a[target="_blank"] { display: none; }

#header { background: #FFF; border-bottom: 1px solid #E5E5E5; }
#logo { display: block; max-width: 130px; padding: 12px 0; float: left; }
.icon_menu { position: absolute; right: 10px; top: 50%; margin-top: -16px; }
.icon_menu:before { color: #2EA3F2; font-size: 32px; }

#mnav { display: none; background: #333; border-top: 3px solid #2EA3F2; }
#mnav .wrap { padding: 0; }
#mnav a { position: relative; display: block; color: #FFF; padding: 10px; border-top: 1px solid #444; border-bottom: 1px solid #222; }
#mnav li li a { padding-left: 30px; }
#srv:after { position: absolute; right: 5px; top: 50%; margin-top: -18px; font-size: 32px; }

#dnav { display: none; position: absolute; right: 0; top: 50%; margin-top: -5px; font-weight: bold; }
#dnav li { display: inline-block; margin-right: 22px; }
#dnav a { color: #000; }
#dnav a.on { color: #0057C1; }

#banner { background: #171717 url(/s/img/banners/stad.jpg) center bottom no-repeat; background-attachment: fixed; background-size: cover; color: #FFF; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.75); font: 18px "Dosis", "Open Sans", Arial, sans-serif; text-align: center; }
#banner .grey { background: rgba(64, 64, 64, 0.7); }
#banner .wrap { padding-top: 20px; padding-bottom: 20px; }
#banner p { margin-top: 10px; }
#banner p:last-child { margin-top: 20px; }
#banner .inner { padding: 20px 20px 30px; margin: 50px 0; background-color: rgba(0, 0, 0, 0.4); font-size: 15px; }
#banner .inner h1 { font-size: 40px; margin-bottom: 10px; }
#key #banner { background-image: url(/s/img/banners/van.jpg); }
#static #banner { background-image: url(/s/img/banners/static.jpg); }
#door #banner { background-image: url(/s/img/banners/door.png); }
#mobile #banner { background-image: url(/s/img/banners/van.jpg); }
#tour #banner { background-image: url(/s/img/banners/tour.png); }
#close #banner { background-image: url(/s/img/banners/protection.png); }
#book #banner { background-image: url(/s/img/banners/signing.jpg); }
#door #banner { background-position: center 40%; }
#close #banner { background-position: center 10%; filter: grayscale(100%); }

#main { background: #FFF; }
#main .wrap { padding-top: 25px; padding-bottom: 25px; }
#main h2, #main p, #main ul, #main address { margin-bottom: 15px; }
#main h2 { color: #333; text-align: center; }
#main ul { list-style-type: disc; margin-left: 20px; }

#cta { background: #7EBEC5; color: #FFF; text-align: center; text-transform: uppercase; font: bold 22px "Dosis", "Open Sans", Arial, sans-serif; }
#cta p { padding: 20px 0; }
#cta a { margin-top: 15px; }
#cta .cta { background-color: #98CBD1; border-color: #98CBD1; }
#cta .cta:hover { border-color: #FFF; }

#footer { background: #D1F8F4; text-align: center; padding: 20px 0; }
#footer h3 { color: #333; }
#footer address { display: block; padding: 10px 0; }

#bottom { text-align: center; padding: 10px 0; font-size: 12px; }
#bottom li { display: inline-block; padding: 0 2px 5px; font-size: 18px; }
#bottom a { color: #666; }
#bottom a:hover { color: #2779B0; }

/* About us */
.hi { overflow: hidden; background: #0a93b2; color: #FFF; border-radius: 8px; padding: 20px; margin-bottom: 15px; }
.hi h3 { margin-bottom: 10px; }
.hi img { display: inline-block; margin-right: 15px; float: left; }
.hi a { color: #FFF; text-decoration: underline; }

/* Home + Services */
#main #sl { list-style-type: none; margin: 0; overflow: hidden; }
#sl a { display: block; overflow: hidden; height: 300px; color: #FFF; }
#sl li { transition: all .2s ease-in; margin: 0 0 20px; background-color: #7EBEC5; background-repeat: no-repeat; background-size: cover; display: block; overflow: hidden; height: 300px; }
#sl li:hover { filter: grayscale(100%); }
#sl li p { margin-bottom: 0; }
#sl li div { margin: 100px 50px 0; padding: 20px 20px 30px; text-align: center; background-color: rgba(0, 0, 0, 0.4); font-size: 15px; }
#sl li:first-child { background-image: url(/s/img/services/event.jpg); }
#sl li:first-child + li { background-image: url(/s/img/services/keyholding.png); }
#sl li:first-child + li + li { background-image: url(/s/img/services/static.jpg); }
#sl li:first-child + li + li + li { background-image: url(/s/img/services/door.png); }
#sl li:first-child + li + li + li + li { background-image: url(/s/img/services/mobile.jpg); }
#sl li:first-child + li + li + li + li + li { background-image: url(/s/img/services/tour.png); }
#sl li:first-child + li + li + li + li + li + li { background-image: url(/s/img/services/close.png); }
#sl li:first-child + li + li + li + li + li + li + li { background-image: url(/s/img/services/vacant.jpg); }
#sl li:first-child + li + li + li + li + li + li + li + li { background-image: url(/s/img/services/consultancy.png); }
#sl li:first-child + li + li + li + li + li + li + li + li + li { background-image: url(/s/img/services/cctv.png); }
#sl li:first-child + li + li + li + li + li + li + li + li + li + li { background-image: url(/s/img/services/electronic.jpg); }
#sl li:first-child + li + li + li + li + li + li + li + li + li + li + li { background-image: url(/s/img/services/film.jpg); }

/* Testimonials */
.tm { margin-bottom: 30px; }
.tm > p { font-weight: bold; }

/* Privacy */
#privacy h3 { font-size: 14px; font-weight: bold; }

/* Contact */
form div { padding: 5px 0; }
input[type="text"],
textarea { width: 100%; box-sizing: border-box; background: #EEE; color: #999; font-size: 14px; padding: 16px; border: 0; }
input:focus, textarea:focus { outline-width: 0; }
#captcha { width: 5em; }
input[type="submit"] { font-weight: bold; font-size: 16px; padding: 10px 15px; border: 2px solid #2EA3F2; background: #FFF; color: #2EA3F2; border-radius: 3px; }
#whatsapp { display: block; position: relative; padding: 10px 0 10px 40px; }
#whatsapp svg { position: absolute; left: 0; top: 0; }
.error { color: #721C24; padding: 10px; font-weight: bold; background: #F8D7DA; border: 1px solid #F5C6CB; }
.error a { color: #721C24; text-decoration: underline; }
.success { color: #155724; padding: 10px; font-weight: bold; background: #D4EDDA; border: 1px solid #C3E6CB; }
#map { overflow: hidden; height: 320px; }
iframe { height: 320px; width: 100%; outline: 0; }

@media only screen and (min-width: 540px) {
    #top { text-align: left; }
    #top li { display: inline-block; margin-left: 10px; }
    #top li:first-child { margin-left: 0; }
    #top a[target="_blank"] { display: inline; }
    #logo { max-width: 170px; }
}
@media only screen and (min-width: 768px) {
    #top { font-size: 14px; }
    #logo { max-width: 230px; }
    .icon_menu { display: none; }
    #dnav { display: block; }
    #sl li { float: left; margin: 0 20px 20px; width: 310px; }
}