html, body {margin: 0; padding: 0;}
body {font-family: 'Roboto', Arial, Helvetica, sans-serif; font-variant-ligatures: none !important;}

#width {position: fixed; top: 0; z-index: 20; padding: 0 3px; font-size: 11px; line-height: 14px; font-family: Arial, Helvetica, sans-serif; background-color: #FF0; z-index: 200;}

a, a:visited, a:hover {outline: none;} #bottomarea a, #nav a, .emailus a, .viewbtn a {text-decoration: none !important;}

hr {height: 1px; border: 0px; color: #BBB; background-color: #BBB; margin: 15px 0;}
img {border: 0;} * {-webkit-tap-highlight-color: transparent;}

.phlink {color: inherit !important; white-space: nowrap; text-decoration: none !important;} .phlink:hover {cursor: text;}


/*-----------------------------------------------*/

/*HEADER*/

#headtop {top: 0; height: 16px; width: 100%; z-index: 3;} 

#headerback, #header {margin: 0 auto; background-color: #FFF;}
#headerback {position: relative; width: 100%; z-index: 2;} #header {display: table; width: 100%; z-index: 1;}

#logo {padding-left: 5px; display: table-cell; vertical-align: middle;} #logo img {width: 350px; height: 63px;}

#phone {display: table-cell; vertical-align: middle; font-size: 22px; line-height: 1.4; font-weight: 500; text-align: right; padding-right: 20px;}
#phone a {text-decoration: none; text-decoration: underline;}

@media (min-width: 1351px) {#headerback, #header {height: 80px;}}
@media (max-width: 1350px) and (min-width: 1051px) {#headerback, #header {height: 95px;}}
@media (max-width: 1090px) and (min-width: 961px) {#headerback, #header {height: 115px;}}
@media (max-width: 960px) {#headerback, #header {height: 85px;} #logo img {padding-top: 3px;}}
@media (max-width: 680px) {#phone {font-size: 19px; line-height: 1.6; padding-right: 10px;}}
@media (min-width: 641px) {#phone .nextph {display: block;} #phone .phand {display: none;}}
@media (max-width: 640px) {
#headerback, #header {height: 170px;} #logo, #phone, #nav {display: block;}
#logo {margin: 5px auto 0 auto; padding: 0 30px 0 0;}
#phone {font-size: 22px; text-align: center; padding: 3px 0 0 0;} #phone .phand {display: inline; padding: 0 5px;}
}
@media (min-width: 501px) {
#headerback, #header {top: 16px; margin-bottom: 16px;} #headtop, #header {position: fixed;}
#header {display: table; width: 100%; z-index: 1; box-shadow: 0px 2px 7px -2px #000000;}
}
@media (max-width: 500px) {#headerback, #header {height: 169px;} #header {border-bottom: 1px solid #CCC;}}
@media (min-width: 401px) {#logo {width: 350px;}}
@media (max-width: 400px) {
#headerback, #header {height: 155px;}
#logo {padding-right: 0; margin: 5px auto 0 -30px; text-align: center;}
#logo img {margin: 0 auto; padding-top: 5px; display: block; text-align: center; width: 290px; height: 52px;}
#phone {position: absolute; font-size: 21px; line-height: 1.4; text-align: left; padding: 0 0 0 15px; bottom: 10px}
#phone .nextph {display: block;} #phone .phand {display: none;}
}
@media (max-width: 360px) {#headerback, #header {height: 145px;}}
@media (max-width: 340px) {#logo img {width: 250px; height: 45px;}}
@media (max-width: 300px) {#headerback, #header {height: 135px;}}

/*-----------------------------------------------*/

/*MENU*/

.nav {display: none; z-index:900; white-space: nowrap;} /*if last link is too long & wraps on some iPads*/
.nav ul {display:block; list-style-type:none; padding: 0; margin: 0;}
.nav a {display: block; position:relative; text-decoration:none !important; cursor: pointer; font-size: 15px; line-height: 1.45; padding: 8px 14px; text-transform: uppercase;border-radius: 3px;}
.nav a:hover {background: none;} .nav a.selected, .nav a.selected:hover {cursor: text;}
.nav a.selected {cursor: text; -webkit-user-select: none; -webkit-touch-callout: none;}

@media (min-width: 961px) {
.nav-button {display: none;}
.nav {display: table; vertical-align: middle; padding:0; margin: auto; height: 100%; text-align: center;}
.nav ul {display: table-cell; vertical-align: middle; padding-left: 20px;}
.nav li {display: inline-block; vertical-align: middle; white-space:nowrap;}
.nav a {text-align: center; font-weight: 500;}
}
@media (max-width: 1500px) and (min-width: 1351px) {.nav a {padding: 8px 11px;} .nav span {display: block;}}
@media (max-width: 1350px) and (min-width: 961px) {
.nav {white-space: normal;} .nav {width: 510px;} .nav a {display: table-cell; vertical-align: middle;}
}
@media (max-width: 1090px) and (min-width: 961px) {.nav {width: 385px;} .nav a {padding: 6px 11px;}}
@media (max-width: 960px) {
.nav {width: 385px; position: absolute; top: 85px; right: 0; box-shadow: 0 5px 12px -5px #000; transition: 0s; border-radius: 0 0 0 6px;}
.nav li {width: 190px; float: left; text-align: center;} .nav ul {padding: 0; margin-top: 0;} .nav li:last-child {width: 100%;}
.nav a {display: block; font-size: 18px; font-weight: 400; padding: 15px 10px 15px 15px; text-transform: uppercase; margin: .5px;}
.nav-button {position: absolute; top: 0px; left: 185px; right: 0; text-align: center; margin: 23px auto 0 auto; width: 37px; z-index: 902; padding: 8px; cursor: pointer;}
.nav-button span {display: block; background: url("../navlines.png") no-repeat center; background-size: 35px 24px; height: 24px; width: 35px; margin: auto;}
}
@media (max-width: 680px) and (min-width: 641px) {.nav-button {left: 220px;}}
@media (max-width: 640px) {
.nav {top: 170px; left: 0; right: 0; margin: auto; border-radius: 0 0 0 6px;}
.nav-button {left: 0; right: 0; margin: 123px auto 0 auto;} .nav a {text-align: center; padding: 15px 0 15px 0;}
}
@media (min-width: 481px) {.nav a {transition: 0.3s;}}
@media (max-width: 400px) {
.nav {width: 100%; left: auto; top: 155px;} .nav-button {left: auto; right: 20px; margin: 97px auto 0 auto;}
.nav li {float: none; width: auto;} .nav a {margin: 1px;}
}
@media (max-width: 360px) {.nav-button {margin-top: 85px;} .nav {top: 145px;}}
@media (max-width: 300px) {.nav-button {margin-top: 75px;} .nav {top: 135px;}}

/*-----------------------------------------------*/

/*TOP IMAGES*/

.topimgback {background-color: #007AC3;} .topimg {margin: auto; height: 100%; position: relative; max-width: 1500px;}
@media (min-width: 1700px) {.topimg {width: 95%;}}
@media (max-width: 1699px) {.topimg {width: 92%;}}

.topimgback {height: 20vw; max-height: 180px; overflow: hidden;}
.topimgback .topcaption {position: absolute; text-align: left; left: 0; top: 45%; -webkit-transform: translateY(-45%); -ms-transform: translateY(-45%); transform: translateY(-45%); font-size: 95px; line-height: 1.1; font-weight: 500; text-shadow: 1px 1px 2px #000; font-family: 'Oswald', Arial, Helvetica, sans-serif; color: #FFF; text-transform: uppercase;}

@media (max-width: 1090px) {.topimgback {max-height: 150px;} .topimgback .topcaption {font-size: 8.5vw;}}
@media (max-width: 640px) {.topimgback .topcaption {text-align: center; left: 0; right: 0;}}

/*-----------------------------------------------*/

/*BODY AREA*/

#bodyarea, h2 {font-size: 21px; line-height: 1.5; font-weight: 400 !important; margin: 0 auto; max-width: 1500px;}
#bodyarea {padding: 30px 0 30px 0;} h1, h2, h3, h4, h5 {margin: 0 !important;}

@media (min-width: 1700px) {#bodyarea {margin: 0px auto auto auto; width: 95%;}}
@media (max-width: 1699px) {#bodyarea {width: 92%;}}

.bodyhead {font-weight: 700; font-size: 1.35em; text-align: center; text-transform: uppercase;}
h5 {font-weight: 500; font-size: 1.1em; text-align: center;}
.heading {font-weight: 500; font-size: 1.3em;}

.bodyhead, .bodyhead h1, .heading {line-height: 1.3;}

@media (max-width: 480px) {#bodyarea, h2 {font-size: 20px;}} @media (max-width: 320px) {#bodyarea, h2 {font-size: 19px;}}


/*-----------------------------------------------*/

/*Solutions List*/

.solutions {padding: 25px 20px; margin: 40px auto 45px auto; width: 100%; max-width: 750px; background-color: #007AC3; color: #FFF;border-radius: 7px;}
.solutions td {width: 50%; vertical-align: top;}
.solhead {text-align: center; font-size: 1.1em; line-height: 1.3em; font-weight: 700; padding-bottom: 25px;}
.solutions ul {margin: 0 auto;}
.solutions li {margin: 0 0 18px -12px; text-align: left; line-height: 1.35;}
.solutions li:last-child {margin-bottom: 0;}
.solutions a {color: #FFF !important; }
@media (min-width: 541px) {.solutions td:nth-child(1) ul {padding-right: 20px;}}
@media (max-width: 540px) {
.solutions td {display: block; width: auto !important;}
.solutions td:nth-child(2) {padding-top: 15px;}
}

/*-----------------------------------------------*/

/*Bubble Lists*/

#bubblelist {text-align: center;}
#bubblelist div {display: inline-block; margin: 0 auto 5px auto; padding: 8px 12px; font-size: .95em; line-height: 1.35; border-radius: 5px; background-color: #DDD; color: #444;}

/*-----------------------------------------------*/

/*Page Pics*/

.pagepic img {width: 100%; border-radius: 3px; display: block;}
.picwide {max-width: 500px;} .pictall {max-width: 350px;}
.picleft {float: left; margin: 10px 25px 20px 0;}
.picright {float: right; margin: 10px 0 20px 25px;}
.piccenter {text-align: center; margin: auto; display: block;}
@media (max-width: 930px) {.picwide:not(.piccenter) {max-width: 420px;}}
@media (max-width: 750px) {
.picleft, .picright {text-align: center; float: none; margin: 25px auto 15px auto;}
.picwide {max-width: 500px;} .pictall {max-width: 400px;}
}

.twopics {display: table; margin: 30px auto 20px auto; text-align: center;}
.twopics div {display: table-cell; vertical-align: middle; text-align: center; margin: auto;}
.twopics p {margin: -5px 0 0 0; padding: 0; font-size: 0.85em; text-transform: uppercase;}
.twopics img {width: 100%; display: block; margin: auto; text-align: center;} .twopictall {max-width: 350px;} .twopicwide {max-width: 450px;}
@media (min-width: 701px) {.twopics div:first-child {padding-right: 15px;} .twopics div:last-child {padding-left: 15px;}}
@media (max-width: 700px) {.twopics div {display: block;} .twopics div:last-child {padding-top: 30px;}}

/*-----------------*/

/*Ready*/

#ready {clear: both; text-align: center; padding: 40px 20px; font-size: 2em; line-height: 1.4; font-weight: 600;}

.btn {position: relative; display: block; text-align: center; background-color: #007AC3; border: 4px solid #007AC3; transition: .4s; border-radius: 4px;}
.btn:hover {cursor: pointer; border: 4px solid #007AC3;}
.btn a {display: table-cell; padding: 12px 18px; font-size: 18px; line-height: 1; font-weight: 500; text-decoration: none !important; color: #FFF !important; transition: 0.4s;}

.hvr-rectangle-out {
  display: inline-block; vertical-align: middle;
  -webkit-transform: perspective(1px); transform: perspective(1px);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #007AC3;
  -webkit-transition-property: color; transition-property: color;
  -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
}
.hvr-rectangle-out:before {
  content: ""; position: absolute; z-index: -1;
  top: 0; left: 0; right: 0; bottom: 0; background: #01a8ee;
  -webkit-transform: scale(0); transform: scale(0);
  -webkit-transition-property: transform; transition-property: transform;
  -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;
}
.hvr-rectangle-out:hover:before, .hvr-rectangle-out:focus:before, .hvr-rectangle-out:active:before {-webkit-transform: scale(1); transform: scale(1);}


/*-----------------------------------------------*/

/*BOTTOM AREA*/

#bottomarea {text-align: center; font-size: 14px; line-height: 1.6; padding: 15px 0 17px 0;}
.copyright, .serving {padding: 0 15px;}

@media (max-width: 470px) and (min-width: 325px) {.serving span {display: block;}}
@media (max-width: 400px) {.lic {margin-top: 15px;} .copyco span, .lic span, .web a {display: block;}}

#totop {position: fixed; right: 16px; bottom: 13px; border-radius: 20%; background-color: rgba(0, 0, 0, 0.3); padding: 8px; font-family: Arial, Helvetica, sans-serif; border: 2px solid #888; z-index: 1;}
#totop img {width: 20px; height: 12px;} #totop:hover {-webkit-transform: scale(1.1);}
@media (min-width: 481px) {#totop {transition: .3s;}}
@media (max-width: 480px) {#totop {padding: 10px;} #totop img {width: 23px; height: 13px;}}

/*====================================================*/

/*COLORS*/

body {color: #666;} a, a:visited, a:hover {color: #0048FF;}
#header, #bodyarea {background-color: #FFF;}

#headtop {background-color: #007AC3;} #phone, #phone a {color: #222 !important;}
#ready {background-color: #AAA;} /*lime green: #68FF46*/
.bodyhead {color: #000;} .heading {color: #007AC3;} #ready {color: #FFF;}

.nav a {color: #444;}
@media (min-width: 961px) {
.nav a.selected, .nav a.selected:hover {color: #000 !important; background-color: #D8D8D8;}
.nav a:hover {color: #007AC3;}
}
@media (max-width: 960px) {
.nav a.selected, .nav a.selected:hover {background-color: #065585;}
.nav, .nav ul, .nav a {background-color: #666;}
.nav a {color: #FFF;} .nav a:hover {background-color: #007AC3;}
}

#bottomarea, #bottomarea a, #btm_menu a {color: #FFF;}
#bottomarea {background-color: #444;}
.web a {color: #82cbf2 !important;} .web a:hover {font-style: italic;}