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

body {font-family: "Poppins", 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 {outline: none;}
a {text-decoration: none; cursor: pointer;}

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

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

a, *:hover {-webkit-tap-highlight-color: transparent;}

#totop, #social img, .bordbtn a, .nav a, #btminfoback .connect img, #btminfoback .connect a, #reviewus img, .submit {transition: 0.4s;}


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

/*HEADER*/

/*Fixed top area - START*/
#headtop, #header {position: fixed;}
#headtop {top: 0; height: 50px; width: 100%; margin: auto; z-index: 2;} 
#header {top: 50px; width: 100%; margin: auto; z-index: 1; box-shadow: 0 3px 5px -5px #000; z-index: 2;}
#logo {z-index: 3;}
/*Fixed top area - END*/

@media (min-width: 1691px) {
#logo, #social {padding-left: 15%;}
#phone, .nav ul {padding-right: 15%;}
}
@media (min-width: 1486px) and (max-width: 1690px) {
#logo, #social {padding-left: 10%;}
#phone, .nav ul {padding-right: 10%;}
}
@media (min-width: 1416px) and (max-width: 1485px) {
#logo, #social {padding-left: 8%;}
#phone, .nav ul {padding-right: 8%;}
}
@media (min-width: 801px) and (max-width: 1415px) {
#logo, #social {padding-left: 3%;}
#phone, .nav ul {padding-right: 3%;}
}
@media (max-width: 800px) and (min-width: 326px) {
#logo, #social {padding-left: 18px;}
#phone, .nav ul {padding-right: 1%;}
}
@media (min-width: 326px) {#phone {right: 15px;}}
@media (max-width: 325px) {
#logo, #social {padding-left: 12px;}
#phone {right: 12px;}
}

#phone {position: absolute; display: table-cell; top: 50%; padding-bottom: 1px; transform: translate(0, -50%); font-size: 20px;}
#phone, #phone a {font-weight: 500;}
#phone a {margin-left: 5px;}
#phone span {font-size: .9em;}
#social {position: absolute; top: 50%; transform: translate(0, -50%); left: 2px;}
#social img {height: 26px; width: 26px; margin: 0 2px 2px 0; vertical-align: middle;}
#social img:hover {transform: scale(1.15);}

#logo div, #logo div a {line-height: 1; color: #FFF; white-space: nowrap;}
#logo div a, #logo div a:hover, #logo div a:active, #logo div a:visited {color: #FFF !important; text-decoration: none !important;}

@media (min-width: 826px) {
#logo, #logo img {width: 220px;}
#logo div, #logo div a {font-size: 25px;}
#logo {margin-top: 13px;}
}
@media (max-width: 825px) {
#logo, #logo img {width: 200px;}
#logo div, #logo div a {font-size: 22.5px;}
#logo {margin-top: 15px;}
}
@media (max-width: 655px) {
#logo, #logo img {width: 180px;}
#logo div, #logo div a {font-size: 20.5px;}
}
@media (min-width: 616px) {
#header {height: 102px;}
.topspacer {margin-top: 151px;}
}
@media (max-width: 615px) {
#header {height: 80px;}
#logo {margin-top: 8px;}
.topspacer {margin-top: 130px;}
}
@media (max-width: 480px) {#headtop, #header {position: absolute;}} /*turns off fixed area*/
@media (max-width: 440px) {#phone span {display: none;}}
@media (max-width: 300px) {
#social img {margin: 0 0 2px 0; width: 22px;}
#phone {font-size: 19px;}
}

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

/*MENU*/

.nav, .nav a {-webkit-tap-highlight-color:transparent;}
.nav a:hover {background: none;}

.nav .selected, .nav .selected:hover {cursor: text;}
.nav {display:none; z-index: 900;}
.nav ul {display: block; list-style-type: none; margin:0;}
.nav a {display: block; position: relative; text-decoration:none !important; cursor: pointer; font-size: 16px; line-height: 1.35; font-weight: 500; padding: 0 11px; text-transform: uppercase;}

@media (min-width: 1186px) {
.nav {top: 30px;}
.nav span.ns {display: block;}	
}
@media (max-width: 1185px) and (min-width: 616px) {
.nav {top: 8px;}
.nav ul {width: 530px; text-align: right;}
.nav span.ns {display: inline;}
.nav span.dontshow {display: none;}
}
@media (max-width: 875px) and (min-width: 616px) {
.nav ul {width: 465px;}
.nav a {padding:0 9px; text-transform: none;}
}
@media (max-width: 765px) and (min-width: 616px) {
.nav {top: 6px;}
.nav span.ns {display: block;}
.nav ul {width: 415px;}
.nav li {margin-bottom: -2px;}
.nav span.dontshow, .nav span.dontshow2 {display: none;}
.nav span.ns2 {display: block;}
.nav a {font-size: 15px; padding: 1px 11px; font-weight: 400; background-color: #F00;}
}
@media (max-width: 675px) and (min-width: 616px) {
.nav ul {width: 395px;}
.nav a {font-size: 14px; padding: 1px 9px;}
}
@media (min-width: 616px) {
.nav-button {display: none;}
.nav {display: block; position:absolute; right: 5px; width: 100%; padding: 0; margin: auto; text-align: center;}
.nav ul {display: block; right: 0; position: absolute;}
.nav li {display:inline-block; position: relative; text-align: left; white-space:nowrap;}
.nav a {display: table-cell; height: 40px; text-align: center; vertical-align: middle; border-radius:5px;}
}
@media (max-width: 615px) {
.nav {width: 470px; position: absolute; top: 80px; right: 0; box-shadow: 0 5px 12px -5px #000; transition: 0s !important;}
.nav li {width: 235px; float: left;}
.nav ul {padding: 0;}
.nav a {padding: 10px 20px 10px 15px; text-transform: uppercase; margin: 1.5px; border-radius: 5px;}
.nav-button {position: absolute; top: 0px; right: 10px; text-align: center; margin: 20px 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: 510px) {
.nav {width: 237px;}
.nav li {width: 235px;}
/*.nav li {float: none;}*/
.nav span.ns {display: inline;}
}

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

/*TOP IMAGES*/

.bgimgback {background-color: #072C4A;}
.bgimg {height: 100%; position: relative; background-repeat: no-repeat; background-size: cover;}

.bgimgback.pgs {height: 30vw; max-height: 280px; overflow: hidden;}
.bgimgback.pgs .caption {position: absolute; text-align: left; left: 5%; top: 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; padding-right: 20px !important;}

@media (max-width: 830px) {
.bgimgback.pgs {min-height: 240px;}
.bgimgback.pgs .caption {font-size: 85px;}
}
@media (max-width: 495px) {
.bgimgback.pgs {min-height: 220px;}
.bgimgback.pgs .caption {font-size:calc(30px + 10vw);}
}
@media (max-width: 400px) {.bgimgback.pgs {min-height: 200px;}}


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

/*BODY AREA*/

.bodyarea {position: relative; margin: auto; padding: 35px 0 30px 0; width: 90%;} /*max-width: 1500px;*/

.bodyarea, h2 {font-size: 18px !important; line-height: 1.6 !important; font-weight: 400 !important;}
.bodyhead, .bodyhead2 {font-weight: 700; text-align: center;}
.bodyhead {font-size: 32px; line-height: 1.25;}
.bodyhead2 {font-size: 29px; line-height: 1.5;}
.bodyhead3 {font-size: 22px; font-weight: 600; text-align: center; text-transform: uppercase;}

h1, h2, h3, h4, h5, h6, h7 {margin: 0 !important; padding: 0 !important;}

@media (max-width: 480px) {
.bodyhead {font-size: 29px;}
.bodyhead2 {font-size: 25px;}
.bodyhead3 {font-size: 19px;}
}
@media (max-width: 360px) {
.bodyhead {font-size: 26px;}
.bodyhead2 {font-size: 23px;}
.bodyhead3 {font-size: 18px;}
}

.heading {font-weight: 600; font-size: 1.4em; line-height: 1.3;}

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

/*Misc*/

#ready {clear: both; background-color: #C0DF15; text-align: center; padding: 40px 20px; font-size: 2em; line-height: 1.4; font-weight: 600; color: #004277;}
#ready div {margin-top: 15px;}

.bordbtn {display: block;}
.bordbtn a {white-space: nowrap; display: inline-block; border-radius: 6px; font-weight: 500; padding: 5px 13px 6px 13px; font-size: 15px; text-decoration: none !important;}


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

/*BOTTOM INFO*/

#btminfoback {width: 100%; padding: 30px 0; text-align: center; margin: auto;}
#btminfo {width: 100%; max-width: 1000px; display: table; text-align: center; margin: auto;}
#btminfo a {text-decoration: none;}

.contactusback, .hrsback, .payback, .connectback {vertical-align: top; text-align: center; font-size: 16px; line-height: 1.6; margin: auto; text-align: center;}
.contactus, .hrs, .pay, .connect {text-align: left; display: inline-block;}
.contactus div {padding: 3px 0;}
.btmaddr span {float: right; font-size: 1em; line-height: 1.4; padding-top: 5px;}
.btmaddr img {margin-top: 5px}
.hrsback img {vertical-align: top; margin-top: 2px;}
.contactusback img {vertical-align: middle;}

.contactusback img, .hrsback img {width: 20px; margin-right: 8px; margin-bottom: 3px;}

.pay img {max-width: 45px; margin: 0 1px 5px 1px; border-radius: 4px;}

.connect a {margin: 0 2px; display: inline-block;}
.connect img {width: 27px; height: 27px;}
.connect img:hover {transform: scale(1.15);}
.connect a:hover {filter: brightness(120%);}

.btmhead {font-size: 26px; line-height: 1; font-weight: 700;}

@media (min-width: 731px) {.pay img {width: 5vw;}}
@media (max-width: 730px) and (min-width: 481px) {
#btminfoback {width: auto; padding: 25px;}
.contactusback, .hrsback, .payback, .connectback {width: 48%; float: left;}
.payback, .connectback {float: right; padding-top: 40px;}
}
@media (max-width: 480px) {
#btminfoback {padding: 0 0 20px 0;}
#btminfoback, #btminfo {width: auto;}
.contactusback, .hrsback, .payback, .connectback {display: block; margin: 40px auto 20px auto;}
.btmhead {font-size: 23px;}
.pay img {max-width: 40px;}
}

@keyframes shake {
  20% {transform: rotateZ(-2deg);}
  80% {transform: rotateZ(2deg);}
}
#reviewus {margin-top: 20px;}
#reviewus img:hover {animation: shake .18s 6;}

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

/*Bottom Menu */

#btmnav {margin: auto; text-align: center; padding: 25px 15px; display: table;}
#btmnav ul {margin: 0; padding: 0;}
#btmnav li {display: table-cell;}
#btmnav a {color: #fd5e5e !important; text-decoration: none; display: inline-block; padding: 3px 10px; vertical-align: middle; line-height: 1.4; text-transform: uppercase;}
#btmnav a:hover {text-decoration: underline !important;}
@media (max-width: 1060px) and (min-width: 831px) {#btmnav span {display: block;}}
@media (max-width: 870px) {#btmnav a {text-transform: none;}}
@media (max-width: 830px) {
#btmnav {width: 555px;}
#btmnav li {float: left; width: 180px; text-align: left;}
}
@media (max-width: 670px) {
#btmnav {width: 350px;}
#btmnav li {width: 175px;}
#btmnav a {padding: 6px;}
}
@media (max-width: 460px) {
#btmnav {width: auto;}
#btmnav li {float: none; width: auto; display: inline; margin: 0 !important;}
#btmnav a {margin: 2px 0; white-space: normal !important; background-color: #444; border-radius: 4px;}
}

/*BOTTOM AREA*/

#bottomarea {text-align: center; padding: 0 15px 20px 15px; font-size: 14px; line-height: 1.6;}
#drugfree {margin: 12px auto 5px auto;}
#phbtm {font-size: 18px;}
#serving {font-size: .85em; line-height: 1.5; margin: 0 20px;}
#web a:hover {text-decoration: underline !important;}

@media (max-width: 415px) {#web a {display: block;}}
@media (max-width: 350px) {.copyco span {display: block;}}

#totop {position: fixed; right: 16px; bottom: 13px; background-color: rgba(0, 0, 0, 0.35); padding: 8px; font-family: Arial, Helvetica, sans-serif; border: 2px solid #888; z-index: 1; border-radius: 50%;}
#totop img {width: 20px;}
#totop:hover {transform: scale(1.1);}
@media (max-width: 480px) {
#totop {padding: 7px;}
#totop img {width: 22px;}
}

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


/*COLORS*/

body {color: #222;}
a, a:visited, a:hover {color: #0058D0;}
body, .bodyarea {background-color: #FFF;}

#headtopback, #headtop {background-color: #072C4A;}
#header {background-color: #B70000;}

#phone, #phone a {color: #FE4844;}
#phone span {color: #FFF;}

.bodyhead, .bodyhead2 {color: #004277;}
.heading {color: #C70000;}

.bordbtn a {color: #FFF; background-color: #004277; border: 1px solid #C0DF15;}
.bordbtn a:hover {background-color: #0168bb;}


.nav a {color: #FFF;}
.nav a.selected, .nav a.selected:hover {color:#FFF; background-color: #072C4A;}
.nav a:hover {color: #B70000; background-color: #C0DF15;}
@media (max-width: 615px) {
.nav, .nav ul {background-color: #C70000;}
.nav a {background-color: #F00;}
.nobtmbrd {border-bottom: 0 !important;}
.nav a:hover {color: #B70000; background-color: #C0DF15;}
}

#btminfo, #btminfoback a, #bottomarea, #bottomarea a, #btm_menu a {color: #FFF;}
#btminfoback {background-color: #072C4A;}
#bottomarea {background-color: #000;}
.tb, .tb a {color: #dbfe1d !important;}