/* Studio Web Media - Web Design and Development */

/* |-| Resets |-| */

* {margin:0;padding:0;text-decoration:none;-webkit-font-smoothing: antialiased;}

table, tr { height: 100%;}

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline;}

body {background: #FFF;}

/* Separator Classes */
.separator-xs {margin-top: 20px}
.separator-s {margin-top: 50px}
.separator-b-s {margin-bottom: 50px}
.separator-m {margin-top: 75px}
.separator-l {margin-top: 100px}
.separator-xl {margin-top: 130px}

/* Padding Classes */
.padding-xs {padding-top: 40px}
.padding-s {padding-top: 50px}
.padding-m {padding-top: 75px}
.padding-l {padding-top: 100px !important;}
.paddingbottom-s {padding-bottom: 20px}
.paddingbottom-m {padding-bottom: 40px}
.paddingbottom-l {padding-bottom: 60px}
.paddingbottom-xl {padding-bottom: 100px !important;}
.mobilepad {padding-right: 10px!important;padding-left: 10px!important;}
.no-ml {margin-left: 0% !important;}
.no-mr {margin-right: 0% !important;}
.no-mb {margin-bottom: 0px !important;}
.no-tb {margin-top: 0px !important;}
.no-pt {padding-top: 0px !important;}
.pads {padding: 50px;}
.pads-foot {padding: 0px 50px;}
.smallpads {padding: 20px;}
.textcenter {text-align: center;}

/* Main Styles Starts */

h1, h2, h3, h4, h5, a, span, label, input {font-family: 'Muli', sans-serif;text-transform: uppercase;}

p, li, span {font-family: 'PT Sans', sans-serif;}

/* Header */

.top-header {width: 100%;  background: rgba(0,0,0,.88) url(../images/topheaer.png) no-repeat left center; background-position-x: 200px;  padding-top: 5px; padding-bottom: 5px; color: #FFF;  text-align: left;}

header {width: 100%; height: 85px; background: #FFF; padding-top: 30px;padding-bottom: 30px;}

.nav-holder {width: 100%; position: relative;line-height: 0;}

.nav-trigger-holder{display: none;}

.logo img {height: 130px;}

nav {width: 70%; height: 58px; background: #222; text-align: center; position: relative;}

.number {width: 30%; height: 58px; background: #696969}

nav, .number {display: inline-block;border-top: 1px #FFF solid;}

.logo {text-align: center; color: #222; padding-top: 0px; font-size: 150%; padding-bottom: 10px;}

.top-text {font-size: 90%;}

nav ul {position: absolute; top: 20px; left: 10%;padding: 10px 20px; text-align: center;}

nav ul li {display: inline-block; margin-left: 60px;}

nav ul li a {color: #FFF; font-weight: 600;}

nav ul li a:hover {color: #696969}

.number-text {color: #FFF; position: absolute; padding: 10px 0px; left: 75%; top: 47px; font-size: 110%; letter-spacing: 0.003em; font-weight: 400;}

.social li {display: inline-block; }

.social {position: absolute; right: 20px; top: 3px;}

.social li a img {height: 20px;}

.social li a img:hover {opacity: .8;}

.social, .top-text {display: inline-block;}

.cert-left, .cert-right,.logo {display: inline-block;}

.cert-left img, .cert-right img {height: 80px;}



/* Slider Stuff */

.slider-holder {width: 100%; position: relative; height: 502px;}

.slide-one {position: relative;width: 70%; height: 502px; background: url(../images/exit.png); background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;}

.slide-two {width: 100%; height: 251px; background: url(../images/cctv.png);background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;}

.slide-three {width: 100%; height: 251px; background: url(../images/contact.png);background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;}

.right-slides {height: 502px; width: 30%; position: absolute; right: 0;}

.slide-two, .slide-three {display: block; position: relative;}

.slide-title {width: 100%;text-align: center; position: absolute; color: #FDFDFD; font-size: 190%; top: 43%; left: 0;}

.slide-button {padding: 5px 15px; border: 1px solid #FDFDFD; position: absolute; color: #FDFDFD; top: 62%;left: 44%; border-radius: 3%;text-transform: lowercase;}

.slide-title-2 {width: 100%;text-align: center; position: absolute; color: #FDFDFD; font-size: 190%; top: 28%;}

.slide-button-2 {padding: 5px 15px; border: 1px solid #FDFDFD; position: absolute; color: #FDFDFD; top: 65%;left: 40%; border-radius: 3%; text-transform: lowercase;}

.slide-button-2:hover, .slide-button:hover {background: #fff; color: #222!important;}

.holder {margin-bottom: 10px;min-height: 490px;}

.rslides {position: relative;list-style: none;width: 100%; padding: 0;margin: 0;}

.rslides li {-webkit-backface-visibility: hidden;position: absolute;display: none;width: 100%;left: 0;top: 0;}

.rslides li:first-child {position: relative;display: block;float: left; }

.rslides img {display: block;height: auto;float: left;width: 100%;border: 0;}

/* Slide B */

.slider-holder-b {display: none;width: 100%; position: relative; height: 502px;}

.slide-one-b {position: relative;width: 70%; height: 502px; background: url(../images/exit-b.png); background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;}

.slide-one-d {position: relative;width: 70%; height: 502px; background: url(../images/domestic.png); background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;}


.slide-title-b {text-align: center; position: absolute; color: #FDFDFD; font-size: 190%; top: 43%; left: 27%;}

.slide-button-b {padding: 5px 15px; border: 1px solid #FDFDFD; position: absolute; color: #FDFDFD; top: 62%;left: 45%; border-radius: 3%;text-transform: lowercase;}

/* Slide C */

.slider-holder-c {display: none;width: 100%; position: relative; height: 502px;}

.slide-one-c {position: relative;width: 70%; height: 502px; background: url(../images/exit-c.png); background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;}

.slide-title-c {text-align: center; position: absolute; color: #FDFDFD; font-size: 190%; top: 43%; left: 40%;}

.slide-button-c {padding: 5px 15px; border: 1px solid #FDFDFD; position: absolute; color: #FDFDFD; top: 62%;left: 45%; border-radius: 3%;text-transform: lowercase;}

.rslides_nav {position: absolute;}

.prev {left: 58%; top: 650px; padding: 10px 20px; background: transparent; color: #FFF;z-index: 99999;position: absolute; border: 1px solid #FFF;}

.next {left: 63%; top: 650px; padding: 10px 20px; background: transparent; color: #FFF;z-index: 99999;position: absolute;border: 1px solid #FFF;}

.next:hover, .prev:hover {color: #696969;}

/* Call to action */

.call-to-action {width: 100%; background: #696969; padding-top: 40px; padding-bottom: 40px;}

blockquote {font-size: 200%; color: #FDFDFD; margin: 0;}

blockquote span {text-decoration: underline;padding-bottom: 2px;}

/* About Homepage */

.about {width: 100%; height: auto; padding-top: 40px; padding-bottom: 40px; background: url(../images/bgtri.png) no-repeat; background-position-y: -50px; background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;}

.main-title {font-size: 160%; text-decoration: underline; letter-spacing: 0.001em;}

.main-text { font-size: 105%;}

.checks li {list-style: none; padding-top:20px;}

.checks li:first-child {padding-top: 0px;}

.checks li i {color: #696969; padding-right: 10px;}

.certs {text-align: center; width: 100%; padding-bottom: 30px }

.certs li {display: inline-block; margin-left: 50px;}

.certs li:first-child {margin-left: 0px;}

/* Services Page */

.services-holder {width: 100%; height: 250px; background: url(../images/services-page.png) center;background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;}

.services-title {width: 100%;text-align: center; color: #FDFDFD; font-size: 190%; margin-top: 100px;}

.services-button {padding: 5px 15px; border: 1px solid #FDFDFD;  color: #FDFDFD; border-radius: 3%;text-transform: lowercase; margin-top: 25px;}

.services-title-box {font-weight: 500;font-size: 117%;margin-top: 20px;}

.small-divide-dark {margin: 5px 0px 10px;}

.main-feature-pages {background: #222; color: #FFF;min-height: 200px;padding: 1px 20px;text-align: left;margin-top: 20px; border-radius: 3%; border: 1px solid #eee;opacity: .9; transition: opacity .25s ease-in-out;-moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;}

.main-feature-pages:hover {opacity: 1;}

.green-bg {background: #696969; color: #FFF; min-height: 220px;}

.services {width: 100%; height: auto; padding-top: 40px; padding-bottom: 40px; background: #FFF;}

.services-section-two {width: 100%; height: auto;padding-bottom: 40px; background: #eee;}

.services-section-three {width: 100%; height: auto; padding-top: 0px; padding-bottom: 80px; background: #FFF;}

.areas {display: inline-block; margin-left: 10px; margin-top: 10px;}

.areas li {margin-top: 5px; font-style: italic;}

.map-image {width: 100%; opacity: .5; transition: opacity .25s ease-in-out;-moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;}

 .map-image:hover {opacity: 1;transition: opacity .25s ease-in-out;-moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;}

.height-auto {height: auto; padding-bottom: 20px;}

/* Contact Us */

.contact-holder {width: 100%; height: 250px; background: url(../images/contact-page.png) center;background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;}

.services-section-four {line-height: 0;}

.services-section-five {width: 100%; height: auto;padding-bottom: 40px; background: #eee;}

.overlay {background:transparent;position:relative;width:100%;height:450px; /* your iframe height */top:450px;  /* your iframe height */margin-top:-450px;  /* your iframe height */}

form input, textarea {width: 100%; height: 40px; padding: 10px; position: relative; background: rgba(255,255,255,.9); border: 2px solid rgba(0,0,0,.1) !important;}

textarea {height: 170px; max-width: 100%;}

label {margin-top: 40px; padding-bottom: 15px; color: #262626;}

::-webkit-input-placeholder {color: lightgrey;}

:-moz-placeholder { /* Firefox 18- */color: lightgrey;}

::-moz-placeholder {  /* Firefox 19+ */color: lightgrey;}

:-ms-input-placeholder {color: lightgrey;}

.button-contact {font-family: 'Muli', sans-serif;border: 1px solid #222 !important; height: auto!important;width: auto!important;background:; padding: 7px 15px !important;color: #222 !important;text-transform: lowercase!important;font-size: 85% !important; border-radius: 0px !important;}

#message {width: 90%; padding-top: 30px;padding-bottom: 20px;background: #222222;text-align: left; padding-left: 30px; margin-top: 50px;}

#message h4 {font-size: 165%;text-transform: uppercase;line-height: 1.5;letter-spacing: 0;color: #FFFFFF;}

#message p {width: 70%;padding-bottom: 20px; color: #FDFDFD}

.place-card, .place-card-medium {visibility: hidden!important;}

.contact-details li {margin-top: 10px;}

.contact-details li a, .contact-details li a span {color: #222; text-transform: none;font-family: 'PT Sans', sans-serif; font-size: 105%;}

.contact-details li a span {font-family: 'PT Sans', sans-serif;}

.address-push {font-size: 100%;margin-left: 28px;}

.social-contact-page li {display: inline-block; margin-left: 10px;}

.social-contact-page li a img {height: 38px;}

.social-contact-page {margin-top: 25px;}

/* Footer */


footer {width: 100%; height: auto; background: #222 url(../images/trii.png) no-repeat center;padding-top: 50px; padding-bottom: 30px;}

.bottom-footer {width: 100%; height: 50px; background: #FFF;}

.footer-title {color: #fff; font-size: 130%; text-decoration: underline; letter-spacing: 0.001em; padding-bottom: 20px;}

.footer-text {color: #fff; font-size: 100%; line-height: 1.7em; letter-spacing: 0.01em;} 

.footer-nav li {list-style: none; padding-top: 10px;color: #fff;}

.footer-nav li a, .footer-nav li a span {color: #fff !important; font-size: 90%; text-transform: capitalize;font-weight: 100; font-family: 'PT sans', sans-serif}

.footer-nav li a span {margin-left: 10px;font-size: 100%;}

.bottom-foot {padding-top: 10px; padding-bottom: 10px;}

.copy {font-size: 80%; padding: 15px 0px;}

.social-foot li {display: inline-block; }

.social-foot {position: absolute; right: 20px; top: 10px;}

.social-foot li a img {height: 28px;}

.social-foot, .copy {display: inline-block;}

.connect {vertical-align: top; margin-right: 10px; padding-top: 2px;}

.social-foot li a img:hover {opacity: .8;}



/* Tablet */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 

nav ul {left: 0; top: 15px;}

nav ul li a {font-weight: 400;}

nav ul li {margin-top: 4px;}

.number {position: relative;}

.number-text {width: 100%; text-align: center;left: 0px; font-size: 100%;}

.tab-pads {padding: 20px;}

.social-foot {top: 25px;}

.top-text {padding-left: 20px;}

.social {right: 50px;}

.slide-title-2 {font-size: 150%;}

.number-text {top: 10px}

.call-to-action {width: 100%;background: #696969; padding-top: 30px; padding-bottom: 30px;}

.padding-s {padding-top: 10px;}

.main-feature-pages {height: auto; padding-bottom: 10px;}

}

/* Tablet Portrait */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 

nav ul {left: 0; top: 15px;}

nav ul li a {font-weight: 400; font-size: 90%}

nav ul li {margin-left: 20px;}

.number {position: relative;}

.number-text {width: 100%; text-align: center;left: 0px; font-size: 80%; padding-top: 12px; top: 10px}

.tab-pads {padding: 20px;}

.top-header {text-align: center;}

.slider-holder,.slider-holder-b,.slider-holder-c, .slide-holder-d  {height: auto;line-height: 0;}

.slide-one,.slide-one-b,.slide-one-c, .slide-one-d {width: 100%;}

.slide-two, .slide-three {display: inline-block; width: 50%;}

.slide-two, .slide-three , .slide-one,.slide-one-b,.slide-one-c  {line-height: 1.7em;}

.right-slides {width: 100%; height: 250px; top: 775px;}

.holder {height: 730px;}

.main-title {font-size: 130%;}

.checks li {font-size: 90%;padding-top: 33px;}

.certs li img {height: 75px;}

.footer-title {color: #fff;font-size: 110%;}

.about {background-position-y: 0px;background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;}

.social {top: 110px;}

.main-feature-pages {height: auto; padding-bottom: 20px;}

.no-port {display: none;}

.map-image {margin-top: 100px;}

.sub-feature-text {font-size: 90%;}

.services-title-box {font-size: 100%;}

.prev {left: 44%;}

.next {left: 52%;}

.padding-s {padding-top: 1px;}

.main-title {padding-top: 10px;}

}


/* Mobile */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

nav {display: none;width: 100%;height: 100%; background: #4A4A4A;text-align: center;position: relative; padding-bottom: 10px;}

nav ul {position: relative; left: 0; top: 0;}

nav ul li {margin-left: 0px; display: block; border-bottom: 1px solid #eee; padding-bottom: 30px; padding-top: 30px;}

nav ul li a {color: #FFF; font-weight: 100;}

nav ul li:first-child {margin-top: 0px;}

nav ul li:nth-child(3) {border-bottom: none;padding-bottom: 10px;}

.number {width: 100%; position: relative;}

.number-text {position: relative; text-align: center;left: 0;top: 10px;}

.slide-one, .slide-one-b, .slide-one-c, .slide-one-d  {position: relative;width: 100%; height: 251px !important; background: url(../images/exit.png); background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;}

 .slide-one-b {background: url(../images/exit-b.png); }

 .slide-one-c {background: url(../images/exit-c.png); }

 .slide-one-d {position: relative;width: 100%; height: 251px; background: url(../images/domestic.png)!important; background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;}

.rslides {width: 100%; height: 251px;}

.rslides li {width: 100%; height: auto;}

.holder {margin-bottom: 10px;height: 740px;}

.right-slides {height: 502px; width: 100%;}

.slider-holder,.slider-holder-b,.slider-holder-c, .slide-holder-d  {height: auto;line-height: 0;}

.slide-button {line-height: 1.4;padding: 5px 15px; border: 1px solid #FDFDFD; position: absolute; color: #FDFDFD; top: 65%;left:35%; border-radius: 3%;text-transform: lowercase;}

.slide-title {top: 28%; font-size: 180%;}

.prev-button, .prev-button-b, .prev-button-c {cursor: pointer;display: none;position: absolute;color: #222;background: rgba(255,255,255,.8);padding: 5px 10px;top: 80%;left: 75%; line-height: 1.4;}

.next-button, .next-button-b, .next-button-c {cursor: pointer;display: none;position: absolute; color: #222; background: rgba(255,255,255,.8);padding: 5px 10px;right: 10px;top: 80%;line-height: 1.4;}

.slide-button-2 {line-height: 1.4;padding: 5px 15px;border: 1px solid #FDFDFD;position: absolute; color: #FDFDFD;top: 65%;left: 33%;border-radius: 3%;text-transform: lowercase;}

.main-title {padding-top: 40px;}

.slide-title-b,.slide-title-c {position: relative; left: 0; top: 70px;}

.about {padding-top: 0px;}

.certs img {width: 100%; padding: 20px; padding-left: 0px;}

.certs {text-align: left;}

.certs li {margin-left: 0px;}

blockquote {font-size: 215%;}

.logo {padding-bottom: 25px;}

.nav-trigger-holder {display: block;width: 100%; padding-top: 10px; padding-bottom: 12px; text-align: center; background: #222;margin-top: 30px;}

.nav-trigger, .nav-trigger:hover, .nav-trigger:after, .nav-trigger:visited {color: #FDFDFD;}

.top-text {font-size: 75%;}

.nav-trigger i {padding-right: 10px;}

.social {position: absolute;right: 33%;top: 55px;}

.social-foot {position: relative; padding: 10px 10px; text-align: center;}

.padding-s {padding-top: 1px;}

.main-title {padding-top: 10px;}

.services-title {margin-top: 25%;}

label {margin-top: 10px;}

nav, .number {border-top: none;}

.mobile-pads-header {padding-top: 40px;}

.areas li {font-size: 95%;}

.areas {width: 45%;}

.logo img {width: 100%; height: 120px; padding-top: 10px;}

.map-image {margin-top: 40px;}

.next, .prev {display: none;}

.mobile-slide {font-size: 145%;}

.cert-left, .cert-right {display: none;}

}