html, body {margin: 0; padding: 0;} body {font-family: 'PT Serif', "Times New Roman", Times, serif; font-variant-ligatures: none;}

#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 {outline: none; color: #376ABB;} a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: dotted; text-underline-offset: .13em; cursor: pointer;}
a, .ham {-webkit-tap-highlight-color: transparent);}
img {border: 0;} #phone a {white-space: nowrap;}
.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;} .phlink:hover {cursor: text;}
.ham, .ham * {-webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;}

hr {height: 1px; border: 0px; color: #BBB; background-color: #BBB; margin: 15px 0;}

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

/*HEADER*/

#headertop {height: 15px;} #social {text-align: right; z-index: 20; position: absolute;}
@media (min-width: 531px) {#social {height: 20px; width: 70px; background:url('fb.gif'); background-size: 70px 20px; right: 10px; bottom: 10px;}}
@media (max-width: 530px) {#social {height: 20px; width: 20px; background:url('fb-sm.gif'); background-size: 20px 20px; right: 6px;  bottom: 8px;}}

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

/*TOP PIC*/

@keyframes zoom {0% {transform: scale(0.8,0.8);} 5% {transform: scale(1,1);}}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}

#toppicback {position: relative; z-index: 0; background-color: #333333;}
/*#toppicback:before {content: ""; position: absolute; width: 100%; height: 100%; background: inherit; z-index: -1; filter: saturate(20%);}
#toppictexture {position: absolute; width: 100%; height: 100%; background:url('images/texture.png'); background-repeat: repeat;}*/
#toppictext {position: absolute; width: 100%; height: 100%; /*background-color: rgba(0, 0, 0, 0.6);*/ text-align: center;}
#toppictext_moretext {padding: 0 10px 18px 10px; font-weight: 400; color: #FFF; margin: auto; animation: zoom 15s; -webkit-animation: zoom 15s;}
#toppictext_ph {font-weight: 400; color: #FEB900; font-family: 'Volkhov', "Times New Roman", Times, serif; position:relative; animation:animatebottom 0.5s; -webkit-animation:animatebottom 0.5s;}

#logo {position:relative;animation:animatetop 0.5s; -webkit-animation:animatetop 0.5s;}
@media (max-width: 300px) {#logo img {width: 90%;}}


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

/*MENU*/

#nav a:hover {background: none;} #nav a.selected:hover {text-decoration: none;}
#nav {width: 100%; text-align: center; font-family: 'Volkhov', Arial, Helvetica, sans-serif;}
#nav a {text-decoration: none;}

@media (max-width: 535px) and (min-width: 486px) {#nav a {text-transform: none;}}
@media (min-width: 486px) {
#nav {font-size: 16px; line-height: 32px; text-transform: uppercase;}
#nav a {display: inline-block; margin-left: -4px; padding: 7px 17px 9px 15px;}
}
@media (max-width: 485px) {
#nav {border-top: 1px solid #999;}
#nav a {font-size: 15px; width: 100%; padding: 10px 0 10px 0; display: block; text-transform: uppercase; border-bottom: 1px solid #999;}
}

#nav, #nav a {background-color: #FEB900; color: #000;}
#nav a.selected, #nav a.selected:hover {background-color:#222; color: #FFF;}
#nav a:hover {background-color:#F29400;}

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


/*BODY AREA*/

#bodyback, #bodyarea {position: relative;} #bodyarea, h2 {font-size: 20px; line-height: 30px; font-weight: 400;}
#bodyarea {max-width: 1200px;}

@media (min-width: 1400px) {#bodyarea {width: 90%;}}
@media (min-width: 1180px) {#bodyarea {margin: 0px auto auto auto; padding: 30px 0 40px 0;}}
@media (min-width: 1180px) and (max-width: 1399px) {#bodyarea {max-width: 1100px;}}
@media (max-width: 1179px) {#bodyarea {padding: 25px 25px 30px 25px;}}
@media (max-width: 920px) {#bodyarea {padding: 20px 20px 25px 20px;}}
@media (max-width: 400px) {#bodyarea, h2 {font-size: 19px; line-height: 27px;}}

.bodyhead {font-weight: 700; font-size: 26px; line-height: 31px !important; text-align: center; margin-top: 20px;}

@media (max-width: 920px) {.bodyhead {line-height: 24px;}}
@media (max-width: 399px) {.bodyhead {font-size: 24px; line-height: 29px !important;}}

.heading {font-weight: 700; font-size: 24px; line-height: 30px;}

.prods {font-weight: 400; width: 100%; text-align: center; color: #333; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; display: inline-block; margin: 10px 0; padding: 2px 0;}

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

/*Page Pics*/

.pagepic img {width: 98%; border: 2px solid #FFF;} .pictall img {max-width: 300px;}
.picleft {float: left; margin: 5px 20px 5px 0;} .picright {float: right; margin: 5px 0 5px 20px;}
.piccenter {text-align: center;}

@media (min-width: 761px) {.picwide img {width: 420px;} .picwide.piccenter {display: none;}}
@media (max-width: 760px) {
.picwide img {max-width: 420px;} .picwide.picleft, .picwide.picright {display: none;}
.picwide.piccenter {width: 100%; margin: 20px auto 10px auto;}
}

@media (min-width: 581px) {.pictall.piccenter {display: none;}}
@media (max-width: 582px) {
.pictall.picleft, .pictall.picright {display: none;} .pictall.piccenter {width: 100%; margin: 20px auto 10px auto;}
}

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

/*SERVICE BOXES on Home Page*/

@keyframes filter1 {
  0% {filter: brightness(100%); transform: scale(0.3,0.3);}
  15% {filter: brightness(100%); transform: scale(1.05,1.05);}
  25% {filter: brightness(105%); transform: scale(1,1);}
  35% {filter: brightness(115%);} 45% {filter: brightness(110%);} 100% {filter: brightness(100%);}
}

@keyframes filter2 {
  0% {filter: brightness(100%); transform: scale(0.3,0.3);}
  40% {filter: brightness(100%); transform: scale(1.05,1.05);}
  50% {filter: brightness(105%); transform: scale(1,1);}
  60% {filter: brightness(115%);} 70% {filter: brightness(110%);} 100% {filter: brightness(100%);}
}

@keyframes filter3 {
  0% {filter: brightness(100%); transform: scale(0.3,0.3);}
  55% {filter: brightness(100%); transform: scale(1.05,1.05);}
  65% {filter: brightness(105%); transform: scale(1,1);}
  75% {filter: brightness(115%);} 85% {filter: brightness(110%);} 100% {filter: brightness(100%);}
}

#svcbox {width: 750px; line-height: 20px; margin: 20px auto 25px auto;}
#svcbox a {text-decoration: none;} #svcbox td {vertical-align: top;}
#svcbox .box_head {font-size: 18px; line-height: 22px; margin-bottom: 5px; font-weight: 700;}
#svcbox img {width: 100%; padding: 8px;}

#svcbox img.filter_1 {animation: filter1 1.5s;}
#svcbox img.filter_2 {animation: filter2 1.5s;}
#svcbox img.filter_3 {animation: filter3 1.5s;}

@media (min-width: 851px) {#svcbox img {width: 170px;}}

@media (max-width: 850px) {#svcbox {width: 620px;} #svcbox img {max-width: 150px;} #svcbox .box_head span {display: block;}}
@media (max-width: 710px) {#svcbox {width: 100%;}}
@media (max-width: 610px) {#svcbox .box_head {font-size: 16px; line-height: 20px; margin-bottom: 0px;} #svcbox img {max-width: 130px;}}
@media (max-width: 560px) {#svcbox img {max-width: 110px;}}
@media (max-width: 470px) {#svcbox {margin: 20px auto 15px auto;} #svcbox .box_head span {display: none;} #svcbox img {max-width: 95px;}}
@media (max-width: 400px) {#svcbox img {max-width: 85px;} #svcbox .box_head {font-weight: 400;}}
@media (max-width: 385px) {#svcbox .box_head {font-size: 14px; line-height: 18px;}}
@media (max-width: 370px) {#svcbox img {max-width: 75px;}}
@media (max-width: 340px) {#svcbox {display: none;}}

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

/*BOTTOM AREA*/

#bottomarea {text-align: center; font-size: 13px; line-height: 21px; padding: 10px 0; font-family: Arial, Helvetica, sans-serif; clear: both;}
.copyright {padding-bottom: 5px;} #socialbtm img {text-align: center; margin: 0 auto 10px auto;}

#bottomarea a {text-decoration: none !important;} .tb:hover {text-decoration: underline !important; color: #FF0 !important;}

#btm_menu {text-align: center; font-size: 15px; padding: 10px 0; margin-bottom: 0; line-height: 28px; text-transform: uppercase; font-weight: 400; background-color:#000; color: #888; font-family: Arial, Helvetica, sans-serif;}
#btm_menu a {text-decoration: none; padding: 0 12px 0 8px;}
#btm_menu a:hover {text-decoration: underline !important;}
.tb {font-style: italic;}

@media (max-width: 450px) {#btm_menu a {display: block; padding: 3px 0;} #btm_menu span {display: none;}}
@media (max-width: 350px) {.phbtm, .web a, .lic span {display: block;} .phbtm {margin-top: 12px;}}

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


/*COLORS*/

#bodyback {background-color: #FFF;} #headertop {background-color: #FEB900; color: #FFF;} #phone a {color: #fcf1de;}

body {background-color: #FFF; color: #000;} .bodyhead {color: #F29400;} .heading {color: #F29400;}

#bottomarea, #bottomarea a, #btm_menu a {color: #FFF;}
#bottomarea {background-color: #3A3A3A;} .tb, .tb a {color: #FEB900 !important;}