html, body {margin: 0; padding: 0;}

body {font-family: "Heebo", Arial, Helvetica, sans-serif;}

#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;}

a, a:visited, a:hover {text-decoration: none; outline: none;}
img {border: 0;}
a, .ham {-webkit-tap-highlight-color: transparent);}

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

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


/*HEADER*/

#logowrap {text-align: center; color: #0D1385;
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #bbbbbb 100%);
background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#bbbbbb 100%);
background: radial-gradient(ellipse at center,  #ffffff 0%,#bbbbbb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bbbbbb',GradientType=1 );
}
#social {position: absolute; z-index: 20;}
#logowrap img {max-width: 100%;}
#logotext {font-weight: 700;}
#logotext2 {font-weight: 500;}
#logotext span {display: inline;}
#phone {text-align: center; width: 100%; font-weight: 700; font-size: 32px; line-height: 36px;}
#phone div {font-size: 24px; line-height: 30px;}

@media (min-width: 801px) {
#logowrap {position: absolute; width: 382px; height: 286px; margin-left: 588px;}
#logo {width: 300px; margin: 15px auto auto auto;}
#logotext {margin-top: 3px; font-size: 32px; line-height: 34px;}
#logotext span {display: block !important;}
#logotext2 {margin-top: 5px; font-size: 20px;}
#phone {position: absolute; left: 0; margin-left: 0; margin-top: 13px;}
#social {position: relative; text-align: center; margin: 100px auto auto auto;}
}
@media (min-width: 801px) and (max-width: 986px) {#logowrap {width: 41%; height: 281px; right: 4px;}}
@media (min-width: 801px) and (max-width: 984px) {#logowrap {right: 0 !important;}}

@media (max-width: 800px) {
#logowrap {top: 0 !important; height: 255px;}
#logo {width: 300px; margin: auto; padding-top: 15px;}
#logotext {margin-top: 3px; font-size: 32px; line-height: 34px;}
#logotext2 {margin-top: 5px; font-size: 20px;}
#phone {margin-top: 16px;}
}
@media (max-width: 800px) and (min-width: 431px) {#social {top: 10px; right: 10px; width: 22px; position: absolute; text-align: center;}}

@media (max-width: 430px) {
#logowrap {height: 205px;}
#logo {width: 280px;}	
#logotext {font-size: 28px; line-height: 30px;}
#logotext2 {font-size: 18px;}
#social {top: 8px; right: 5px;}
}
@media (max-width: 430px) {
#logowrap {height: 235px;}
#logo {width: 250px; padding-top: 5px;}	
#logotext {font-size: 24px; line-height: 26px; margin-top: 0;}
#logotext span {display: block !important;}
#logotext2 {display: none;}
#social {position: relative; text-align: center; margin: 10px auto auto auto; right: 0;}
#phone {margin-top: 10px;}
}

@media (max-width: 300px) {#logo img {width: 98%;}}


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


/*MENU*/
#nav {font-size: 18px; line-height: 28px; vertical-align: middle; text-align: center; margin-top: 0px; width: 100%;}
#nav div {display: block;}
#nav a {transition: .3s;}
#nav a:hover {background: none; /*prevents grey background in IE*/}
#nav a.selected:hover {text-decoration: none;}

/*Desk*/
@media (min-width: 871px) {	
#nav.nav-ph, #nav.nav-phab {display: none;}
#nav, #nav li a {height: 55px;}
#nav ul {display: table; width: 100%; table-layout: fixed; padding-bottom: 1px;}
#nav li {display: table-cell; vertical-align: middle; margin-left: -3px;}
#nav li a {width: 1%; padding: 0;}
#nav span {display: block;}

#nav {text-align: center; position: relative;}
#nav ul {margin: 0; padding: 0;}
#nav li {list-style:none;}
#nav li a {display: table-cell; padding: 0; vertical-align: middle; font-size: 19px; line-height: 22px; font-weight: 400;}
}

/*Phab & Phone*/
@media (max-width: 870px) {
#nav ul {margin: 0; padding: 0; position: absolute; vertical-align: middle;}
#nav li {list-style:none;}
#nav li a {display: table-cell; vertical-align: middle;}
#nav a:hover {text-decoration: none;}
}

/*Phab*/
@media (max-width: 870px) and (min-width: 526px) {
.nav-dsk, .nav-ph {display: none;}
#nav {height: 112px;}
#nav li {line-height: 22px;}
#nav li a {padding: 0 10px;height: 55px; width: 1%;}
#nav .col1, #nav .col1 li a {height: 111px;}
#nav .col1 a {border-left: none !important;}

#nav ul {width: 28%;}
#nav .col1 a {border-left: none !important;}
#nav .col1 {width: 16% !important;}
#nav .col2 {left: 16%;}
#nav .col3 {left: 44%;}
#nav .col4 {left: 72%;}
}

@media (max-width: 800px) {#nav {position: absolute; top: 255px;}}

/*Phone*/
@media (max-width: 525px) {
#nav.nav-dsk, #nav.nav-phab {display: none;}

#nav {height: 188px;}
#nav ul {width: 50%; margin-top: 38px;}
#nav li a {height: 47px; padding: 0 10px 2px 10px; width: 1%;}

#nav .col1 {margin-top: 0; width: 100%;}
#nav .col1 a {height: 35px;}
#nav .col3 {left: 50%;}
#nav .col1 a, #nav .col2 a {border-left: none !important;}
}

@media (max-width: 430px) {#nav {top: 235px;}}

@media (max-width: 340px) {#nav li a {font-size: 17px; line-height: 21px;}}

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


/*TOP SLIDER*/

.slider_container img {width: 100%}

.slider_container {position: relative; width: 100%; z-index: 0;}
@media (max-width: 800px) {.slider_container.photos {display: none;}}

@media (min-width: 987px) {.slider_container {width: 588px !important; margin-left: 0;}}

@media (min-width: 801px) and (max-width: 986px) {
.slider_container {width: 59% !important; margin-left: 0;}
.rslides img {height: 281px !important;}
}
@media (max-width: 800px) and (min-width: 603px) {
.slider_container {top: 124px; padding-bottom: 124px; width: 75% !important; max-width: 600px; margin-left: 12.5% !important;}
.topslides_nav {top: 36% !important;}
}
@media (max-width: 602px) {
.slider_container {top: 113px; padding-bottom: 123px;}
.topslides_nav {top: 38% !important;}
}
@media (max-width: 525px) {
.slider_container {top: 189px; padding-bottom: 200px;}
.topslides_nav {top: 30% !important;}
}

.topslides .caption {display: block; position: absolute; z-index: 2; font-size: 15px; color: #FFF; background: #000; background: rgba(50,50,50, .7); left: 0; right: 0; bottom: 0; margin: 0; text-align: center; padding: 3px 20px; max-width: none;}

.topslides_nav {position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 52%; margin-top: -45px; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); z-index: 3; text-indent: -9999px; height: 61px; width: 25px; background: transparent url("../images/toppics/nav.png") no-repeat left top;}
.topslides_nav:hover {opacity: 1.0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);}
.topslides_nav.next {left: auto; background-position: right top; right: 0;}

@media (max-width: 399px) {
.topslides_nav {width: 19px; top: 28% !important;}
.topslides .caption {font-size: 13px; line-height: 17px;}
}

@media (max-width: 380px) {.topslides_nav {display: none;}}

.rslides {position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0;}
.rslides img {display: block; height: auto; width: 100%; border: 0;}

/*Remove top photo from Photos page*/
@media (max-width: 800px) {.slider_photospage {display: none;}}

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

/*SERVICE BOXES*/

#svcbox {margin: 20px auto 0 auto; text-align: center;}
#svcbox td {vertical-align: top; width: 25%; padding: 0 3px;}
#svcbox .box {padding: 0 5px;}
#svcbox .box_head {text-align: center; line-height: 1.2; font-weight: 500; margin-bottom: 8px;}
#svcbox img {width: 100%; display: block; margin-bottom: 10px; transition: .3s;}
#svcbox a:hover img {filter: saturate(120%) brightness(120%);}

@media (max-width: 602px) {
#svcbox {width: 100%; max-width: 400px;}
#svcbox td {display: block; width: 100%;}
#svcbox td:not(#svcbox td:first-child) {margin-top: 20px;}
}

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

/*BODY AREA*/

#bodyarea {padding-bottom: 20px !important;}
#bodyarea, h1 {font-size: 21px !important; line-height: 1.6; font-weight: 400 !important;}

@media (min-width: 987px) {#bodyback, #bottomarea {width: 970px;}}
@media (min-width: 985px) {#bodyback {box-shadow: 0px 0px 10px 1px #000; border: 4px solid #FFF;}}
@media (min-width: 992px) {#bodyback {margin: 20px auto auto auto;} #bodyarea {padding: 35px 30px 30px 30px !important;}}

#bodyhead {font-weight: 700; font-size: 28px; line-height: 1.3; font-weight: 700; text-align: center;}

@media (max-width: 991px) {#bodyarea {padding: 30px;}}
@media (max-width: 602px) {#bodyarea {padding: 20px;}}

/*If top photo is removed from Photos page, gallery needs to be moved down*/
@media (max-width: 800px) {#bodyarea.photos {margin-top: 120px;}}
@media (max-width: 525px) {#bodyarea.photos {margin-top: 200px;}}

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

/*Page Pics*/

.pic0 {margin: 0; text-align: center; width: 100%;}
.pic0 img {width: 100%; max-width: 500px;}
.pic1 {float: left; margin: 5px 15px 5px 0;}
.pic2 {float: right; margin: 5px 0 5px 22px;}
.pic1 img, .pic2 img {width: 100%; max-width: 250px; border: 1px solid #777;}

@media (max-width: 800px) and (min-width: 603px) {
.pic1 {margin: 8px 15px 10px 0 !important;}
.pic2 {margin: 8px 0px 10px 15px !important;}
}
@media (max-width: 602px) {.pic1, .pic2 {display: none;}}

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

/*BOTTOM AREA*/

#bottomarea {text-align: center; padding-bottom: 20px; font-size: 13px; line-height: 1.8;}
#bottomarea a {text-decoration: none !important;}
#phbtm {font-size: 18px;}
#cities {font-size: 11px; line-height: 1.5; margin: 0 10px; font-weight: 300; color: #C2C2C2;}
#web a:hover {text-decoration: underline !important;}
@media (max-width: 415px) {#web a {display: block;}}


#btm_menu {padding: 15px 5px; margin-bottom: 18px; font-size: 16px; line-height: 1.3;}
#btm_menu a {text-decoration: none;}
#btm_menu a:hover {text-decoration: underline !important;}
#btm_menu span {padding: 0 8px;}
.licbtm {font-size: 13px; line-height: 18px; margin-top: 10px; text-align: center; padding: 0 10px;}

#certs {padding: 15px 0 7px 0; text-align: center; font-size: 15px; line-height: 1.4;}
#certs .bbb {width: 80px;}

.pay {width: 100%; max-width: 250px; margin-bottom: 5px; border: 1px solid #666;}

@media (max-width: 815px) and (min-width: 751px) {#btm_menu {font-size: 15px;} #btm_menu span {padding: 0 5px;}}
@media (min-width: 751px) {#btm_menu div {display: inline;}}
@media (max-width: 750px) {
#btm_menu a {padding: 13px 10px; display: inline-block; text-transform: uppercase; white-space: nowrap;}
#btm_menu span {display: none;}
}
@media (max-width: 730px) and (min-width: 400px) {.licbtm span {display: block;}}

@media (max-width: 485px) {.ph2 {padding-bottom: 10px;}}
@media (max-width: 425px) {
#bottomarea {line-height: 1.5;}
#phbtm {padding: 15px 0 10px 0;}
.copyco span, #addr span, #web a {display: block;}
#web {margin-top: 10px;}
}
@media (max-width: 410px) {#certs span {display: block;}}
@media (max-width: 320px) {#certs { font-size: 14px;}}

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

/*COLORS*/

#bodyback, #bodyarea {background-color: #FFF;}

body {background-color: #0D1385; color: #000;}
a, a:visited, a:hover {color: #0045A3;}
#phone, #phone a {color: #0D1385;}
.logotext {color: #BE2226;}
#bodyhead, .emp {color: #0D1385;}


#nav a:hover {background-color: #1128a4 !important;}
#nav a.selected, #nav a.selected:hover {background-color: #132066 !important;}

@media (min-width: 801px) {
body {background: #0D1385 url('../back.jpg') repeat !important;}
#nav {border-bottom: 1px solid #FFF;}
}
@media (min-width: 801px) and (max-width: 870px) {#nav {border-top: 1px solid #FFF;}}
	
@media (min-width: 871px) {
#nav {background-color: #333;}
#nav a {border-left: 1px solid #777; color: #FFF;}
#nav .bordrt {border-right: none;}
#nav .bordleft {border-left: none;}
}

@media (max-width: 870px) {
#nav ul, #nav li {background-color: #333;}
#nav a {color: #FFF; border-left: 1px solid #777; border-bottom: 1px solid #777;}
}

#svcbox .box_head, #svcbox a:hover {color: #0D1385;}
#svcbox a {color: #000;}

#certs {color: #000 !important; background-color:#BBB;}
#certs a {color: #00F !important;}

#pics img {border: 1px solid #777;}

#bottomarea, #bottomarea a, #btm_menu a {color: #FFF;}
#bottomarea {background-color: #444;}
#btm_menu {color: #BBB; background-color:#666;}
#web a {color: #9EDAE5 !important;}