body,
html {
width: 100%;
margin: 0;
font-family: 'Alegreya Sans', sans-serif;
-webkit-font-smoothing: antialiased;
color: #444;
font-size: 16px;
font-weight: 300;
width: 100%;
height: 100%;
}
/* NAVSPLASH (backgrounds) ------------------------------------------------------------------ */
.navsplash {
background: url(protection.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #111;
}
.navsplashcontainer {
background: rgba(0,70,128,0.7)
}
/* NAVIGATE ----------------------------------------------------------------------------------- */
.mobinavigate {
position: fixed;
display: none;
right: 0;
top: 0;
z-index: 200;
background-color: none;
overflow: auto;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
#mobitogglemenu {
margin:0;
padding:0;
}
.mobinavigate button {
position: relative;
float: right;
padding: 30px 20px 35px 10px;
right: 0;
top: 0;
z-index: 150;
background-color: rgba(0,101,184,0.0);
border: none;
}
.mobibuttonexpand {
width: 100%;
}
#mobitogglemenu.active {
background-color: rgba(0,101,184,0.9) !important;
}
.mobinavigateexpand {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
.mobinav {
display: none;
top: 0;
z-index: 100;
width: 100%;
height: 100%;
overflow: auto;
margin-top: 0;
padding: 0;
background-color: rgba(0,101,184,0.9);
}
.navigate {
position: fixed;
display: block;
left: 0;
top: 0;
z-index: 100;
width: 100%;
background-color: rgba(0,141,255,0.5);
}
.navigateexpand {
height: 100%;
overflow: auto;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
.navigatestickybgalpha {
position: fixed;
left: 0;
top: 0;
z-index: 100;
background-color: rgba(0,0,0,0.8);
}
.navigatestickybg {
position: fixed;
left: 0;
top: 0;
z-index: 100;
background-color: #121212;
}
.navigatecontainer {
position: relative;
display: block;
height: auto;
min-height: 100px;
width: 80%;
margin-right: auto;
margin-left: auto;
overflow: visible;
}
.navigatecol {
position: relative;
display: inline-block;
margin-top: 10px;
}
.navigatecol:first-child {
float: left;
width: 30%;
padding-top: 0;
}
.navigatecol:last-child {
float: right;
width: 68%;
height: 62px;
}
.navigatemenu {
display: none
}
.navigatelinkblock {
float: right;
position: relative;
display: inline-block;
height: 48px;
padding-top: 32px;
padding-left: 20px;
padding-right: 20px;
}
.borderbutton {
height: 52px;
margin-top: 15px;
padding-top: 13px;
background: rgba(0,0,0,0.2);
border: 3px solid #fb0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mobinav .borderbutton {
margin-bottom: 40px;
}
.navigatelinkblock:nth-child(2) {
padding-right: 50px
}
.navigatelinkblock a {
display: block;
}
.navigate a:link,
.mobinavigate a:link {
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fff;
font-size: 15px;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
}
.navigate a:visited,
.mobinavigate a:visited {
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fff;
font-size: 15px;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
}
.navigate a:active,
.mobinavigate a:active {
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fff;
font-size: 15px;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
}
.navigate a:hover,
.mobinavigate a:hover {
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fb0;
font-size: 15px;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
}
.servicesdownicon {
float: right;
padding-top: 3px;
color: #fb0;
font-size: 10px;
}
.logotitle {
float: left;
display: inline-block;
padding-top: 0;
text-align: right;
}
.logosmall {
float: left;
display: inline-block;
height: 60px;
padding: 10px 15px 10px 10px;
}
.title {
float: right;
display: inline-block;
padding: 6px 25px 9px 10px;
text-align: right;
}
.logotitle h1 {
margin: 0;
font-family: Rajdhani, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fb0;
font-size: 35px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.logotitle p {
margin: 0;
margin-top: -12px;
font-family: Rajdhani, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fff;
font-size: 25px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}
/* SPLASH ----------------------------------------------------------------------------------- */
.splash {
display: block;
width: 100%;
min-height: 880px;
/* height: 880px; JS*/
}
.splashcontainer {
position: relative;
display: block;
width: 80%;
margin-right: auto;
margin-left: auto;
}
.splashcol {
position: relative;
display: inline-block;
width: 100%;
padding-top: 250px;
}
.splashhead {
position: relative;
width: 75%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.splashintro h1 {
font-family: Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fff;
font-size: 4.5em;
line-height: 56px;
font-weight: 300;
text-align: center;
}
.splashsubhead {
position: relative;
width: 60%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.splashintro h2 {
font-family: 'Alegreya Sans', sans-serif;
-webkit-font-smoothing: antialiased;
color: #fff;
font-size: 42px;
line-height: 56px;
font-weight: 300;
text-align: center;
}
#splashicon {
width: 10%;
position: relative;
margin-top: 150px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.splashicon {
color: rgba(255,255,255,0.3);
font-size: 42px;
}
.splashintro large {
font-family: Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fb0;
font-size: 72px;
line-height: 56px;
font-weight: 300;
text-align: center;
}
/* SERVICES ----------------------------------------------------------------------------------- */
.services {
position: relative;
width: 100%;
height: auto;
min-height: 1000px;
overflow: auto;
}
.servicescontainer {
position: relative;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.servicescol {
position: relative;
float:left;
display: inline-block;
width: 33%;
margin-top: 80px;
margin-bottom: 60px;
padding-bottom: 10px;
background-color: #FFF;
}
.servicestitle {
position: relative;
width: 100%;
}
.services h1 {
margin-left: auto;
margin-right: auto;
font-family: Rajdhani, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
color: #444;
font-size: 38px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
}
.servicesiconimg {
width: 40px;
height: 40px;
margin-bottom: -4px;
padding-right: 20px;
opacity: 0.8;
}
.services p {
padding-left: 30px;
padding-right: 30px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 300;
color: #333;
font-size: 14px;
line-height: 22px;
letter-spacing: 1px;
text-align: left;
text-indent: 20px;
}
.servicesimage {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.servicesimg {
width: 100%
}
.offer {
position: relative;
display: block;
width: 100%;
height: auto;
margin-top: 0;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #eee;
}
.offercol {
position: relative;
float: left;
display: inline-block;
width: 50%;
margin-top: 30px;
margin-bottom: 30px;
padding-bottom: 50px;
}
.offercol h1 {
position: relative;
width: 90%;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #444;
font-size: 30px;
font-weight: 300;
text-align: left;
overflow: auto;
}
.offercol h2 {
float: right;
font-family: Roboto, sans-serif;
color: #6c3;
font-size: 38px;
font-weight: 100;
text-align: right;
}
.offerprice {
float: right
}
.eamonth {
font-size: 18px;
vertical-align: super;
}
.offerbegin {
position: relative;
float: left;
width: 80%;
}
.offerbegin h1 {
margin: 0;
margin-top: 20px;
padding: 0;
text-align: left;
}
.price {
float: right;
font-size: 20px;
color: #6c3;
padding-right: 20px;
margin-top: 30px;
}
.begin {
float: left;
font-size: 30px;
color: #666;
padding-right: 20px;
margin-top: 25px;
}
.offerexcerpt p {
margin-top: 110px;
padding: 0;
padding-left: 80px;
margin-bottom: 30px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #333;
font-size: 14px;
line-height: 20px;
letter-spacing: 1px;
text-align: right;
}
.offerdetails ul {
padding: 0;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #333;
font-size: 14px;
line-height: 35px;
letter-spacing: 1px;
text-transform: uppercase;
list-style: none;
}
.offerdetails li {
text-align: left;
border-bottom: 1px solid #ccc;
}
.offerdetails li:first-child {
text-align: right;
font-size: 16px;
font-weight: 400;
}
.ordernowlinkblock {
float: right;
position: relative;
display: block;
height: auto;
margin-top: 20px;
padding: 15px 20px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fb0;
font-size: 16px;
font-weight: 400;
text-align: left;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
background: #fff;
border: 2px solid #fb0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.ordernowlinkblock:hover {
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #6c3;
font-size: 16px;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
border: 2px solid #6c3;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.offerimg {
float: left;
width: 90%;
}
.backdrop {
position: fixed;
display: none;
top: 0;
left: 0;
z-index: 200;
width: 100%;
height: 100%;
background: #fff;
}
.box {
position: fixed;
display: none;
top: 20%;
left: 25%;
z-index: 201;
width: 50%;
height: auto;
max-height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
padding: 10px;
padding-bottom: 10px;
background: url(openhandshome.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 1px solid #ccc;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-moz-box-shadow: 0 0 200px #ccc;
-webkit-box-shadow: 0 0 200px #ccc;
box-shadow: 0 0 200px #ccc;
-ms-overflow-style: none;
}
.ordercontainer {
position: relative;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.box::-webkit-scrollbar {
display: none;
}
.ordertop {
position: relative;
width: 100%;
height: auto;
margin-top: 10px;
padding-left: 10px;
overflow: auto;
}
.ordertop h1 {
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #222;
font-size: 30px;
font-weight: 100;
}
.ordertop h2 {
margin-top: -15px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #333;
font-size: 20px;
font-weight: 100;
}
.ordercalltime {
clear: both;
margin-left: 1%;
}
.calltimeprompt {
display: inline-block
}
.calltime {
display: inline-block;
margin-right: 18px;
}
.orderinfo {
float: right
}
.orderinfo h2 {
margin-right: 20px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #333;
font-size: 20px;
font-weight: 300;
}
.orderbottom {
position: relative;
width: 100%;
height: auto;
overflow: auto;
}
.orderlarge {
height: 40px;
width: 43%;
margin: 5px 5px 10px 10px;
border: 2px solid #999;
padding-left: 15px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #666;
font-size: 16px;
font-weight: 400;
background: #fff;
}
.orderlarge:focus {
border: 2px solid #fb0
}
.ordersubmitbutton {
clear: both;
float: left;
height: 55px;
width: 155px;
margin-top: 20px;
margin-bottom:50px;
margin-right: 10%;
font-family: Roboto, sans-serif;
text-transform: uppercase;
color: #fb0;
font-size: 16px;
font-weight: 400;
text-align: center;
background: rgba(255,255,255,0.6);
border-style: solid;
border-color: #fb0;
border-width: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.ordersubmitbutton:focus {
border-style: solid;
border-color: #222;
border-width: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.closeicon {
color: rgba(38,38,38,1);
font-size: 28px;
}
.close {
float: right;
cursor: pointer;
}
/* ZONES ----------------------------------------------------------------------------------- */
.zones {
position: relative;
width: 100%;
height: auto;
padding-top: 120px;
background: url(philadelphiasky.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: visible;
}
.zonescontainer {
position: relative;
display: block;
width: 80%;
height: auto;
margin-left: auto;
margin-right: auto;
overflow: auto;
}
.zonescol {
position: relative;
float: left;
display: inline-block;
width: 48%;
height: auto;
margin-bottom: 120px;
overflow: visible;
/*JS Animate*/
/*: ;;
display: none;
margin-top: -50px;
opacity: 0;*/
}
.zonescol:first-child {
margin-right: 4%;
}
.zonesback {
position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
background: rgba(255,255,255,0.9);
overflow: auto;
}
.res {
background: url(residentialround.jpg);
background-size: cover;
}
.com {
background: url(commercialround.jpg);
background-size: cover;
}
.zonesbackfor {
position: relative;
width: 100%;
height: auto;
margin-top: -50px;
padding-bottom: 40px;
background: rgba(255,255,255,0.9);
border-bottom: 3px solid rgba(0,85,155,0.8);
overflow-y: none;
}
.zones h1 {
padding-top: 50px;
padding-bottom: 30px;
font-family: Rajdhani, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fff;
font-size: 38px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
text-shadow: none;
background: rgba(0,85,155,0.8);
}
.zones p {
padding-left: 50px;
padding-right: 50px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 300;
color: #000;
font-size: 14px;
line-height: 22px;
letter-spacing: 1px;
text-align: left;
text-indent: 20px;
}
.zonesicon {
width: 40px;
margin-left: auto;
margin-right: auto;
}
.zonesiconimg {
width: 45px;
height: 45px;
margin-bottom: -5px;
margin-left: auto;
margin-right: 20px;
}
/* QUOTE ----------------------------------------------------------------------------------- */
.quote {
display: block;
width: 100%;
background-color: rgba(255,255,255,0.7);
}
.quotecontainer {
position: relative;
display: block;
width: 75%;
margin-right: auto;
margin-left: auto;
}
.quotecol {
position: relative;
display: inline-block;
width: 100%;
padding-top: 0;
}
.quotecol h1 {
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
color: #222;
font-size: 42px;
line-height: 56px;
font-weight: 100;
text-align: center;
text-shadow: none;
text-transform: none;
background: none;
}
/* QUOTEFORM ----------------------------------------------------------------------------------- */
.receivequote {
position: relative;
width: 100%;
height: auto;
overflow: auto;
}
.receivequotecontainer {
position: relative;
width: 80%;
margin-left: auto;
margin-right: auto;
padding-top: 60px;
padding-bottom: 60px;
}
.receivequote h1 {
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #222;
font-size: 38px;
font-weight: 100;
text-align: left;
}
.recquoteicon {
float: left;
font-size: 30px;
color: #666;
margin-top: 10px;
padding-right: 20px;
}
.recquoteiconp {
float: left;
padding-left: 50px;
font-size: 30px;
color: #fb0;
}
.receivequote h2 {
float: left;
margin-top: -4px;
padding-left: 20px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: rgba(0,0,0,0.9);
font-size: 30px;
font-weight: 500;
text-align: left;
}
.receivequote a:link,
.receivequote a:hover,
.receivequote a:active,
.receivequote a:visited {
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: rgba(0,0,0,0.9);
text-decoration: underline;
}
.receivequotetitle {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.receivequote p {
margin-left: 50px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #222;
font-size: 20px;
font-weight: 100;
}
.formborderbox {
position: relative;
width: 100%;
border: 1px solid #eee;
overflow: auto;
}
.formbefore {
float: left;
position: relative;
display: inline-block;
width: 30%;
margin-top: 20px;
margin-left: 5%;
text-align: left;
}
.form {
float: left;
position: relative;
display: inline-block;
width: 60%;
margin-top: 20px;
margin-right: 5%;
}
.formleft {
float: left;
position: relative;
width: 50%;
padding-top: 50px;
}
.formright {
float: left;
position: relative;
width: 50%;
padding-top: 50px;
margin-bottom: 50px;
}
::-webkit-input-placeholder {
color: #777;
font-weight: 300;
}
:-moz-placeholder {
color: #777;
/* Firefox 18- */
font-weight: 300;
}
::-moz-placeholder {
color: #777;
/* Firefox 19+ */
font-weight: 300;
}
:-ms-input-placeholder {
color: #999;
font-weight: 300;
}
.large {
position: relative;
height: 40px;
width: 78%;
border: 2px solid #ccc;
padding-left: 15px;
margin-bottom: 20px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #333;
font-size: 18px;
font-weight: 500;
background: #fff;
}
.formright .large {
float: right;
margin-right: 10%;
}
.formleft .large {
float: right;
margin-left: 10%;
}
.large:focus {
border: 2px solid #fb0
}
.name {
display: inline-block
}
.submitbutton {
clear: both;
float: right;
height: 55px;
width: 155px;
margin-top: 0;
margin-right: 10%;
font-family: Roboto, sans-serif;
text-transform: uppercase;
color: #fb0;
font-size: 16px;
font-weight: 400;
text-align: center;
background: rgba(0,85,155,0);
border-style: solid;
border-color: #fb0;
border-width: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.submitbutton:focus {
border-style: solid;
border-color: #444;
border-width: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.largeholder {
position: absolute;
z-index: 1;
margin: 7px 8px;
color: #A3A3A3;
font-family: Helvetica;
font-size: 11pt;
cursor: auto;
}
/* MORESERVICES ----------------------------------------------------------------------------------- */
.moreservices {
position: relative;
display: block;
width: 100%;
height: auto;
margin: 60px 0 0;
padding: 0;
background-color: #f3f3f3;
border-top: 1px solid #ddd;
overflow: hidden;
}
.moreservicestitle {
background-color: #eee;
margin: 0;
padding: 0;
}
.moreservicestitle h1 {
margin: 0;
padding-top: 30px;
padding-bottom: 30px;
font-family: 'Alegreya Sans', sans-serif;
color: #000;
font-size: 52px;
line-height: 56px;
font-weight: 100;
text-align: center;
border-bottom: 1px solid #ddd;
}
.slidercontainer {
position: relative;
width: 80%;
margin-left: auto;
margin-right: auto;
}
#slider {
position: relative;
display: inline-block;
margin-left: auto;
margin-right: auto;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
overflow: hidden;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 420px;
list-style: none;
}
#slider ul li {
float: left;
position: relative;
display: block;
height: 420px;
margin: 0;
padding: 0;
text-align: center;
line-height: 300px;
background-color: #f3f3f3;
}
.control_prev,
.control_next {
position: relative;
display: inline-block;
width: auto;
height: 420px;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
background-color: #f3f3f3;
border: none;
cursor: pointer;
}
.control_prev {
float: left;
padding-right: 3%;
}
.control_next {
float: right;
padding-left: 3%;
}
.control_prev:hover,
.control_next:hover {
opacity: 1;
-webkit-transition: all .2s ease;
}
.control_prev {
border-radius: 0 2px 2px 0;
padding-left: 40px;
}
.control_next {
right: 0;
border-radius: 2px 0 0 2px;
-webkit-border-radius: 2px 0 0 2px;
-moz-border-radius: 2px 0 0 2px;
padding-right: 40px;
}
.slider_option {
position: relative;
width: 160px;
margin: 10px auto;
font-size: 18px;
}
:focus {
outline: 0
}
.navarrow {
width: 40px
}
.contentwrap {
position: relative;
width: 70%;
height: 400px;
margin-left: auto;
margin-right: auto;
}
.contentcol {
position: relative;
display: inline-block;
width: 100%;
margin-top: 120px;
margin-left: auto;
margin-right: auto;
padding-left: 8%;
padding-right: 8%;
}
.contentcol p:first-child {
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #444;
font-size: 32px;
font-weight: 300;
text-align: center;
}
.contentcol p {
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #222;
font-size: 14px;
line-height: 22px;
letter-spacing: 1px;
text-align: left;
}
.contentimg {
position: relative;
width: 90%;
}
.sliderposition {
position: relative;
width: 100%;
height: auto;
min-height: 55px;
margin: 0;
border-top: 1px solid #ddd;
}
.positions {
position: relative;
width: 150px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.positionbutton {
display: inline-block;
width: 15px;
height: 15px;
margin: 10px;
border-radius: 100%;
background-color: #bbb;
}
.positionactive {
background-color: #777
}
.altslider {
position: relative;
display: none;
height: auto;
width: 100%;
background-color: #f3f3f3;
overflow: auto;
}
.altslider ul {
position: relative;
list-style: none;
}
.altslider ul li {
position: relative;
display: block;
text-align: center;
}
/* QUESTION ----------------------------------------------------------------------------------- */
.question {
position: relative;
display: block;
width: 100%;
height: auto;
padding:20px 0px 20px 0px;
background-color: #fb0;
}
.questioncol {
display: block;
height: auto;
margin-right: auto;
margin-left: auto;
}
.questioncol h1 {
padding-top: 10px;
font-family: Rajdhani, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
color: #222;
font-size: 42px;
font-weight: 300;
text-align: center;
text-transform: uppercase;
}
.questioncol larger {
font-weight: 500
}
/* FOOTER ----------------------------------------------------------------------------------- */
.footer {
width: 100%;
height: auto;
overflow: auto;
background-color: #171717;
}
.footercontainer {
position: relative;
width: 80%;
height: auto;
overflow: auto;
margin-left: auto;
margin-right: auto;
padding-top: 3px;
}
.footercol {
float: left;
position: relative;
display: inline-block;
height: 430px;
}
.footercol:first-child {
width: 25%;
padding-right: 3%;
border-right: #333 1px solid;
}
.footercol:nth-child(2) {
width: 25%;
padding-left: 3%;
padding-right: 3%;
border-right: #333 1px solid;
}
.footercol:last-child {
width: 37%;
padding-left: 3%;
}
.footercol h4 {
margin-left: 15px;
padding-top: 50px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fff;
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
}
.footercol h3 {
margin-left: 15px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fff;
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
}
.footercol a:link,
.footercol a:hover,
.footercol a:active,
.footercol a:visited {
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #fff;
font-weight: 500;
text-transform: uppercase;
text-decoration: underline;
}
.footercol p {
margin-bottom: 5px;
margin-left: 15px;
padding-left: 30px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 400;
color: #999;
font-size: 14px;
line-height: 18px;
}
.footericon {
margin-right: 15px;
color: #fb0;
}
.businessform {
position: relative;
width: 100%;
height: auto;
overflow: auto;
}
.contactform {
position: relative;
width: 100%;
height: auto;
overflow: auto;
}
.contactinfo {
float: right;
position: relative;
width: 100%;
height: auto;
}
.genlarge {
background: #222;
display: inline-block;
height: 40px;
width: 45%;
margin: 5px 1%;
padding-left: 2%;
overflow: hidden;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #666;
font-size: 16px;
font-weight: 400;
border: 2px solid #333;
}
.genlarge:nth-child(even) {
float: right;
margin: 10px 0;
}
.genlarge:nth-child(odd) {
float: left;
margin: 10px 1%;
}
.genlargecomment {
float: left;
clear: both;
position: relative;
height: 40px;
width: 95.5%;
margin: 10px 0 15px 1%;
padding-left: 2%;
padding-top: 10px;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
color: #666;
font-size: 16px;
font-weight: 400;
border: 2px solid #333;
background: #222;
-ms-overflow-style: none;
}
textarea {
resize: none
}
.genlarge:focus,
.genlargecomment:focus {
border: 2px solid #fb0
}
.gensubmitbutton {
clear: both;
float: right;
height: 55px;
width: 155px;
margin-top: 0;
font-family: Roboto, sans-serif;
text-transform: uppercase;
color: #fb0;
font-size: 16px;
font-weight: 400;
text-align: center;
background: rgba(0,85,155,0);
border-style: solid;
border-color: #fb0;
border-width: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.gensubmitbutton:focus {
border-style: solid;
border-color: #444;
border-width: 2px;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* SUBFOOTER ----------------------------------------------------------------------------------- */
.subfooter {
clear: both;
width: 100%;
background-color: #171717;
}
.subfootercontainer {
position: relative;
width: 100%;
border-top: #333 1px solid;
}
.subfootercol {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 120px;
}
.subfootercol h6 {
padding-top: 36px;
font-family: 'Alegreya Sans', sans-serif;
color: #444;
font-size: 16px;
font-weight: 300;
text-align: center;
}
@media screen and (max-width: 1420px){
.navigatecontainer {
width: 90%;
}
}
@media screen and (max-width: 1280px){
.navigatecontainer {
width: 98%;
}
.splashcontainer {
width: 90%;
}
.servicescontainer {
width: 90%;
}
.zonescontainer {
width: 90%;
}
.receivequotecontainer {
width: 90%;
}
.slidercontainer {
width: 90%;
}
.footercontainer {
width: 90%;
}
.navigatecol:first-child {
width: 32%;
}
.navigatecol:last-child {
width: 66%;
}
.navigatelinkblock {
padding-left: 10px;
padding-right: 10px;
}
.navigatelinkblock:nth-child(2) {
padding-right: 20px
}
.splashcol {
padding-top: 200px;
}
.receivequote h2 {
margin-top:0;
font-size: 22px;
}
.box {
top: 10%;
left: 15%;
width: 70%;
}
}
@media screen and (max-width: 1024px){
.desktoplinkblock {
display: none;
}
.navigatelinkblock { float: none;
display: block;
margin-left: 5%;
margin-right: 5%;
}
.navigatecol:first-child {
width: 60%;
}
.navigatecol:last-child {
display: none;
}
.mobinavigate {
position: fixed;
display: block;
}
.mobinav { border-top: 1px solid rgba(0,68,124,1);
}
.togglemenuicon {
color: #fb0;
font-size: 30px;
}
.navigatecol:last-child {
width: 0%;
}
.splashcol {
padding-top: 150px;
}
.splashsubhead {
width: 80%;
}
.servicescol {
float: none;
display: block;
width: 100%;
margin-right: 0;
clear: both;
}
.servicesp {
width: 85%;
margin-left: auto;
margin-right: auto;
}
.price {
display:none;
}
.box {
width: 98%;
height:100%;
top: 0;
left: 0;
}
.orderlarge {
width: 90%;
}
.zonescontainer {
width: 98%;
}
.formbefore {
display: block;
width: 85%;
}
.form {
display: block;
width: 88%;
margin-right: 0;
margin-left: 5%;
}
.contentcol {
margin-top: 60px;
}
.questioncol h1 {
font-size: 36px;
}
.footercontainer {
padding-top: 3px;
height: auto;
overflow: auto;
}
.footercol {
height: auto;
overflow: auto;
}
.footercol:first-child {
height: 380px;
float: left;
width: 45%;
padding-bottom: 20px;
}
.footercol:nth-child(2) {
height: 380px;
float: right;
width: 45%;
padding-bottom: 20px;
border-right: none;
}
.footercol:last-child {
float: left;
display: block;
width: 95%;
padding-bottom: 40px;
border-top: #333 1px solid;
}
.genlargecomment {
float: left;
clear: both;
position: relative;
height: 40px;
width: 96%;
}
}
@media screen and (max-width: 768px){
.navsplash {
background: url(protection900.jpg);
background-size: 160%;
}
#splashicon {
margin-top: 50px;
}
.offercol {
display:block;
width: 100%;
}
.offerimg {
margin-left: 10%;
}
.price {
display:block;
}
.zonescol {
display: block;
width: 90%;
margin-left: 5%;
}
.zonescol:first-child {
margin-right: 0;
}
.contentcol {
margin-top: 30px;
}
.questioncol h1 {
font-size: 28px;
}
}
@media screen and (max-width: 640px){
.navsplash {
background: url(protection550.jpg);
background-size: 175%;
}
.navigatecol:first-child {
width: 70%;
}
.splashhead {
width: 95%;
}
.splashsubhead {
width: 90%;
}
.offercol:first-child {
margin-bottom: 0;
}
.offercol:last-child {
margin-top: 0;
}
.box {
width: 96%;
height:100%;
top: 0;
left: 0;
padding-bottom: 20px;
background: none;
}
.orderlarge {
width: 80%;
margin-bottom: 20px;
}
.formbefore {
margin-left: 0%;
}
.formleft {
float: left;
position: relative;
display:block;
width: 100%;
padding-top: 50px;
}
.formright {
float: left;
position: relative;
display:block;
width: 100%;
padding-top: 0px;
margin-bottom: 50px;
}
.formright .large {
float: left;
margin-left: 10%;
}
.formleft .large {
float: left;
margin-left: 10%;
}
.submitbutton {
margin-right: 7%;
}
.questioncol h1 {
line-height: 45px;
}
.moreservicestitle h1 {
font-size: 44px;
padding-left: 20px;
padding-right: 20px;
}
#slider {
float: none;
display: none;
}
.control_prev { display: none }
.control_next { display: none }
.sliderposition { display: none }
.altslider {
display: block;
padding-bottom: 60px;
}
.altslider ul { padding: 0px }
.contentwrap {
width: 80%;
height: auto;
margin-top: 15px;
margin-bottom: 15px;
padding-bottom: 30px;
border-bottom: 1px solid #ccc;
overflow: auto;
}
.contentcol {
display: block;
width: 100%;
margin-top: 30px;
padding-left: 0px;
}
.contentcol p:first-child {
text-align: center;
line-height: 30px;
}
.footercol:first-child {
height: 380px;
display: block;
width: 90%;
padding-bottom: 20px;
border-right: none;
}
.footercol:nth-child(2) {
height: 360px;
float: left;
display: block;
width: 90%;
padding-bottom: 20px;
padding-left:0;
border-right: none;
border-top: #333 1px solid;
}
.genlarge {
display: block;
width: 95.5%;
margin: 0;
}
.genlarge:nth-child(even) {
float: left;
margin: 10px 1%;
}
.genlarge:nth-child(odd) {
float: left;
margin: 10px 1%;
}
.genlargecomment {
width: 95.5%;
}
}
@media screen and (max-width: 480px){
.navigatecol { margin-top: 15px; }
.navigatecol:first-child {
width: 80%;
}
.logosmall {
height: 45px;
}
.title {
padding: 6px 0px 9px 5px;
}
.logotitle h1 {
font-size: 30px;
}
.logotitle p {
font-size: 22px;
}
.splashcol {
padding-top: 100px;
}
.splashintro h1 {
font-size: 3.5em;
}
.splashintro large {
font-size: 1em;
}
.splashintro h2 {
font-size: 2.2em;
}
.servicescontainer {
width: 98%;
}
.price { display:none;}
.offercol {
width: 100%;
}
.offerprice { margin: 10px; }
.offerexcerpt p { margin: 10px; }
.offerdetails ul {
margin: 10px;
}
.ordernowlinkblock { margin-right: 10px; }
.zonescol {
display: block;
width: 98%;
margin-left: 1%;
margin-bottom: 30px;
}
.zones p {
padding-left: 10px;
padding-right: 10px;
}
.zones { padding-top: 30px;
}
.submitbutton {
margin-right: 4%;
}
.genlarge {
width: 93%;
}
.genlargecomment {
width: 93.5%;
}
.gensubmitbutton {
margin-right: 1.5%;
}
}