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

@font-face {font-family: 'OpenSans'; font-style: normal; font-weight: 400; font-display: block;
  src: local(''), url('fonts/open-sans-400.woff2') format('woff2'), url('fonts/open-sans-400.woff') format('woff');
}
@font-face {font-family: 'OpenSans'; font-style: normal; font-weight: 600; font-display: block;
  src: local(''), url('fonts/open-sans-600.woff2') format('woff2'), url('fonts/open-sans-600.woff') format('woff');
}

body {font-family: 'OpenSans', Arial, Verdana, Geneva; 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: #2E3FE1;} a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: dotted; text-underline-offset: .13em; cursor: pointer;}
* {-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;}
img {border: 0; image-rendering: -webkit-optimize-contrast;} #phone a {white-space: nowrap;}
.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;} .phlink:hover {cursor: text;}

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

/*HEADER*/

#header, #bodyback, #bodytext {max-width: 1020px; margin: auto;}

#header {position: relative; text-align: center; padding: 10px 0 13px 0; margin: auto; display: table; width: 100%;}
#logotext {line-height: 1; font-weight: 700;}
#logo a {text-decoration: none !important;}
.logo-acs {font-size: 62px;} .logo-awn {font-size: 48px;}
h1 {font-size: 18px; line-height: 1.5; font-weight: 400; font-style: italic; margin-top: auto;}
h1 span {display: block;}
h1, #logo {vertical-align: middle;}
#social {position: absolute; bottom: 5px; right: 0;} #social img {width: 26px; height: 26px;}
#phone {font-size: 24px; font-weight: 600; white-space: nowrap; text-align: right; padding-right: 0; right: 0; vertical-align: top;}
#phone a {text-decoration: none;}

@media (max-width: 1055px) and (min-width: 661px) {#logo {padding-left: 10px;} #phone {padding-right: 10px} #social {right: 10px}}
@media (max-width: 635px) {#social {right: 8px; bottom: 3px;}}
@media (max-width: 735px) and (min-width: 661px) {.logo-acs {font-size: 57px;} .logo-awn {font-size: 43px;}}
@media (max-width: 700px) and (min-width: 661px) {.logo-acs {font-size: 52px;} .logo-awn {font-size: 37px;}}
@media (min-width: 661px) {
h1, #logo, #phone {display: table-cell;} #logo, #logotext {text-align: left;} #logo {width: 22%; padding-top: 0;}
#phone {width: 22%;} h1 {width: 56%;} }
@media (max-width: 660px) {
#header {width: 100%; padding: 5px 0;} h1 {padding: 9px 15px 0 15px;} #phone {padding: 0 0 5px 0;}
#logo {padding: 3px 10px 0 10px;} #logo div {display: inline-block;} .logo-acs, .logo-awn {font-size: 45px;} .logo-awn {margin-left: 12px;}
h1, #logo, #phone {display: block; text-align: center; width: auto; text-align: center; left: 0; right: 0; top: 0; position: relative;}
#logotext {text-align: center; font-size: 30px;}
}
@media (max-width: 360px) {.logo-acs, .logo-awn {font-size: 40px;}}
@media (max-width: 345px) {h1 span {display: inline;}}


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

/*MENU*/

#lines, #menu, #nav a {margin: 0; padding: 0;}
#nav li, #nav a {list-style-type: none; vertical-align: middle;}

#nav {position: relative; z-index: 3; text-align: center; padding-right: 4px;}
#menu {display: none;}
#nav a {width: 100%; font-size: 18px; line-height: 1.25; font-weight: 400; text-decoration: none; height: 50px; display: table-cell; text-align: center; cursor: pointer; -webkit-transition: 0.2s;}
#nav a.selected {cursor: text;}
@media (min-width: 651px) {
#lines-container {display: none;} #menu {display: inline;} #nav li {display: inline-block; margin-right: -4px;} #nav a {padding: 0 18px 2px 18px;}
}
@media (max-width: 1065px) and (min-width: 721px) {#nav a {font-size: 17px;}}
@media (max-width: 1065px) and (min-width: 651px) {#nav li span {display: block;} #nav a {height: 58px !important;}}
@media (max-width: 780px) and (min-width: 651px) {#nav a {padding: 0 14px 0 14px;}}
@media (max-width: 720px) and (min-width: 651px) {#nav a {font-size: 16px; padding: 0 12px 0 12px;}}
@media (max-width: 650px) {
#nav {text-align: center; padding-right: 0;}
#nav a {display: block; height: 38px; padding: 15px 0 0 0; font-size: 17px;}
#lines-container {display: inline-block; width: 38px; height: 32px; cursor: pointer; margin: 12px auto 0 auto;}
#lines {display: block;}
#lines li {height: 4px; background: #fff; content: ""; position: relative; transition: 0.2s ease-in-out;}
#lines li:nth-child(1) {top: 0;} #lines li:nth-child(2) {top: 6px;} #lines li:nth-child(3) {top: 12px;}
.hidden {opacity: 0;} .rot45deg {transform: rotate(45deg); top: 10px !important;} .rot-45deg {transform: rotate(-45deg);}
}
@media (max-width: 650px) and (min-width: 481px) {
#nav a, #nav #menu {width: 220px;}
#nav #menu {text-align: center; left: 0; right: 0; position: absolute; margin: 0 auto; box-shadow: 0px 2px 7px -1px #000000;}
}

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

/*BODY AREA*/

#bodyback, #bodyarea {position: relative;} #bodyback {margin: 0 auto auto auto; padding: 0;} #bodyarea {padding: 28px 25px 25px 25px;}
#bodyarea, h3 {font-size: 19px; line-height: 1.6; font-weight: 400 !important; margin: 0 !important;}
h2 {text-align: center; margin: 2px 0 0 0 !important; padding: 0; font-size: 1.1em; line-height: 1.2; font-weight: 600;}

@media (max-width: 602px) {#bodyarea {padding: 25px 15px 25px 15px;}}
@media (max-width: 480px) {#bodyarea {padding: 20px 15px 25px 15px;} #bodyarea, h3 {font-size: 19px;}}
#bodyhead {font-size: 1.45em; line-height: 1.2; font-weight: 600; text-align: center;}
.heading {font-size: 1.2em; line-height: 1.15; font-weight: 600;}

ul.thislist {margin-left: -15px;} ul.thislist li:not(ul li:last-child) {padding-bottom: 15px;}

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

/*Page Pics*/
.pagepic img {width: 100%; display: block; border-radius: 4px;}
.picwide {max-width: 480px;} .pictall {max-width: 420px;} .picleft {float: left; margin: 12px 30px 15px 0;}
.picright {float: right; margin: 12px 0 15px 30px;} .piccenter {text-align: center; margin: 30px auto; display: block;}

@media (max-width: 880px) {
.picleft.picwide, .picright.picwide {text-align: center; float: none; margin: 25px auto 15px auto;} .picwide {max-width: 500px;}
}
@media (max-width: 680px) {
.picleft.pictall, .picright.pictall {text-align: center; float: none; margin: 25px auto 15px auto;} .pictall {max-width: 350px;}
}

.twopics {clear: both; margin: 30px auto 20px auto; text-align: center;} .twopics img {width: 100%; display: block; border-radius: 4px;}
.twopics .tdmid {width: 30px;} .twopictall {max-width: 400px;} .twopicwide {max-width: 450px;}
.twopics td p {margin: 0; padding-top: 8px; text-align: center; font-size: 0.85em; line-height: 1.25em;}
@media (max-width: 600px) {
.twopics {margin: 20px auto 20px auto;} .twopics td {display: block; margin: 15px auto;}
.twopics .tdmid {width: auto; margin-top: 30px;} .tdmid {width: 0;}
}

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

/*BOTTOM AREA*/

#bottomarea {font-size: 13px; line-height: 1.7; padding: 8px 10px 20px 10px; text-align: center;}
.copy, .serving, .web {margin-top: 15px;}

.serving {font-size: 11px; line-height: 1.4; color: #BBB; font-family: Arial, Helvetica, sans-serif;}
.serving a, .nolink {color: inherit !important; text-decoration: none !important; cursor: text; white-space: nowrap;}

@media (max-width: 370px) {.web a {display: block;}}

.tb {font-style: italic; text-decoration: none;} .tb:hover {text-decoration: underline;}

#totop {position: fixed; height: 18px; width: 18px; right: 14px; bottom: 12px; z-index: 100; padding: 8px 9px 8px 10px; border: 2px solid rgba(155, 155, 155, .4); background-color: rgba(80, 80, 80, 0.45); border-radius: 4px;}
#totop div {font-family: Arial, Helvetica, sans-serif; display: inline-block; -webkit-transform: rotate(90deg); transform: rotate(90deg); font-size: 32px; line-height: 18px; color: #FFF;}
#totop:hover {-webkit-transform: scale(1.05);}
@media (min-width: 481px) {#totop {-webkit-transition: .15s;}}

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

/*Misc*/

.nolink {color: #333 !important; text-decoration: none !important; cursor: text;}

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

/*COLORS*/

body {background-color: #FFF; color: #222;}
#headback, #header {background-color: #FFF;}

a, a:visited, a:hover {color: #00F;} #phone, #phone a {color: #2444B9;}

#logotext {color: #EE0000;} h1, h2 {color: #222;} #bodyhead, .heading, #quote {color: #EE0000;}

#bodyarea {background: #FFF;}

#nav, #menu, .box h6, .box a {background-color: #2444B9;} #nav, #nav a, #nav a:hover {color: #FFFFFF;}
#nav a.selected, #nav a.selected:hover {background-color: #151C83;}
#nav a:hover {background-color: #0066FF;}
@media (max-width: 650px) {#menu li {border-top: 1px solid #3b63d6;}}

#bottomarea, #bottomarea a {color: #FFF;} #bottomarea {background-color: #181D58;}
.ph2, .ph2 a {color: #FFF !important;} .tb {color: #FFCC00 !important;}