/* ---------- general ---------- */
xxbody               { background: url(Images/background.jpg); background-size: auto; }
/* ---------- header items ---------- */
.header-bg         { background-color: #222; margin-bottom: 20px; }
header, header a, header a:visited { color: #ddd; font-size: 18px; }
header a:hover     { color: #aae; }
header .logo       { margin: 30px; }
header .co-name    { font-size: 26px; text-align: center; margin: 15px; }
header .by-line    { font-size: 20px; text-align: center; margin: 15px; }
header .phone a    { float: right; margin: 30px; font-size: 16px; }
header .phone img  { margin-top: -5px; }

/* ---------- nav-bars, top and bottom ---------- */
nav li             { display: inline-block; }
nav a:hover        { transition: all 0.4s ease; }    /* transition on both menus */
nav.main ul        { margin: 20px; } /*  background: rgba(255, 255, 255, 0.8);  */
nav.main li        { height: 40px; }
nav.main a, nav.main span, nav.bottom a:visited
                   { color: #ccc; padding: 11px 20px; display: inline-block; } /* font-size: 15px; */
nav.main a:hover   { color: #d27a1b; text-decoration: underline; }
nav.main .active-page a { color: #d29049; }
nav.bottom         { padding: 10px 0 5px; background-color: #555; }
nav.bottom a       { border-bottom: 1px solid #444; }          /* need matching with background for transition */
nav.bottom a, nav.bottom span, nav.bottom a:visited
                   { font-size: 14px; color: #ddd; padding: 7px 10px 1px; }
nav.bottom a:hover { color: #cfa; border-bottom: 1px solid #bf8; }
nav.bottom ul      { margin: 5px 0; }
nav.bottom ul li   { margin: 0 10px; padding: 0 4px 2px 4px; border-bottom: 1px solid #88a; }

/* ---------- mobile and PC top-nav, radio-select elements off-canvas, scroll-top button ----------*/
.top-nav label     { display: none; }
.pad-before-fixed-nav-div { height: 0; }
.mob-icons         { display: none; }
.hide-off-canvas   { left: -999px; top: -999px; width: 1px; height: 1px; position: absolute; visibility: hidden; }
.btn-scroll-to-top { width: 40px; height: 40px; position: absolute; right: 10px; bottom: 20px; display: none;
                     background: rgba(0, 95, 155, 0.8); padding: 3px; border: 1px solid #014; border-radius: 5px;
                     z-index: 5; } /* position changed to fixed after scrollY > 60 */
.btn-scroll-to-top img { cursor: pointer; }

/* ---------- page layout items ---------- */
h1, h3, aside          { font-family: "Bree Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; }
h1                 { font-size: 40px; }
h3                 { font-size: 24px; }
aside              { font-size: 30px; margin: 40px 5px; padding: 20px 0; border: 1px solid #444; border-width: 2px 0; }
img.pg-content     { float: right; margin-left: 30px; }
.principals        { margin: 40px 5px; text-align: center; font-style: italic; font-size: 18px; font-weight: bold; }
.content.normal    { min-height: 320px; margin-bottom: 50px; }
.content.normal p  { margin: 5px 30px 20px 0; }
.home-list li      { margin-bottom: 5px; }

.reqd              { color: #a00; font-size: 13px; }
.cpyrt             { padding: 10px 20px 30px; background-color: #555; color: #ddd; }

/* ---------- Tablet Landscape size ---------- */
@media only screen and (min-width: 788px) and (max-width: 979px) {
}
@media only screen and (max-width: 979px) {
  img.pg-content     { float: none; text-align: center; }
}
/* ---------- Tablet Portrait and Mobile Landscape size ---------- */
@media only screen and (min-width: 610px) and (max-width: 787px) {
  header.container .five.columns { width: 170px; }
  header.container .eleven.columns { width: 400px; }
  header .logo     { margin: 30px 10px; }
  aside            { width: 420px; margin: 30px auto; text-align: center; }
}
/* ---------- Mobile Portrait - general ---------- */
@media only screen and (max-width: 609px) {
  .content.normal  { min-height: 500px; }
  header.main      { padding-top: 40px; }
  header .logo     { margin: 20px; text-align: center; }
  header .co-name  { font-size: 26px; margin: 5px; }
  .phone           { display: none; }
  .mobile-nav-bg   { background-color: #fff; border: 1px solid #aaa; position: fixed; height: 40px; width: 100%;
                     z-index: 5; }
  .top-nav         { width: 340px; padding: 0 20px; position: fixed; top: 0; z-index: 6; }
  .top-nav > *     { margin-top: 10px; }
  .top-nav label   { width: auto; display: inline-block; margin-left: 10px; cursor: pointer;  }
  .top-nav > label      { width: 98px; }     /* keep the menu/close button consistent */
  .top-nav img          { margin: -7px 4px 0; }
  .top-nav .btn-close   { display: none; }
  .top-nav .mob-icons   { display: inline-block; float: right; margin-right: 20px; }
  .top-nav .mob-icons a { margin-left: 20px; }
  .top-nav, .top-nav .mob-icons a,   .top-nav .mob-icons a:visited { color: #444; }
  nav.main         { width: 250px; margin-top: 0; }
  nav.main ul      { margin: 0; border: 0px solid #ccc; background-color: #eee; transition: all 0.2s ease; }
  nav.main ul ul   { margin: 0; }
  nav.main li      { display: block; height: 0; padding-top: 0; overflow-y: hidden; transition: all 0.4s ease;
                     text-align: left; margin: 0; }
  nav.main li:hover     { background-color: #fff; }
  nav.main .active-page { background-color: #eee; }
  nav.main a       { color: #444; font-size: 22px; padding: 4px 10px; display: block; border: none;
                     border-bottom: 1px solid #ccc; min-height: 36px; }
  nav.main a:hover { color: #000; background-color: #fff; border: none; border-bottom: 1px solid #888; }
  nav.main li li a  { padding: 4px 25px; font-size: 18px; min-height: 33px; }

  #navExpand:checked ~ .btn-close  { display: inline-block; }
  #navExpand:checked ~ .btn-menu   { display: none; }
  #navExpand:checked ~ nav.main > ul { border: 2px solid #ccc; }
  #navExpand:checked ~ nav.main li { height: auto; }

  nav.bottom       { padding: 2px 20px; text-align: center; }
  nav.bottom ul li { margin: 3px 15px; }
}
/* ---------- Mobile Portrait - large ---------- */
@media only screen and (min-width: 360px) and (max-width: 609px) {
}
/* ---------- Mobile Portrait - small ---------- */
@media only screen and (max-width: 359px) {
  .top-nav label  { margin-left: 5px; }
  .top-nav.lockTS { width: 300px; margin-left: 0; padding-left: 0; }
  .top-nav .mob-icons a { margin-left: 30px; }
}