/* ---------- general ---------- */
body               { background: #2b0d0a; margin-bottom: 30px; }
.container         { background: #e7dfa0; }
header.main        { margin-top: 10px; background-color: #2b0d0a;
                     background-image: url(Images/lake-country-engineering-header-800.jpg);
                     background-repeat: no-repeat; } 
header.main, header.main a, header.main:visited { color: #fff; }

/* ---------- header items ---------- */
header.main .phone { display: block; float: right; width: 260px; height: 104px; padding: 10px; text-align: right; }
header.main .phone img    { margin-top: -5px; }
header.main .place-holder { height: 104px; width: 100px; float: left; }

footer.container .columns nav, footer .cpyrt { margin: 0 -10px; background-color: #000; color: #ddd; }


/* ---------- 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: 0; background: linear-gradient(to bottom, #625c2d 0%, #756e37 50%, #998f49 100%); }
nav.main li        { height: 40px; background: linear-gradient(to bottom, #625c2d 0%, #756e37 50%, #998f49 100%); }
nav.main li:nth-child(1) { margin-left: 30px; }
nav.main a, nav.main span, nav.bottom a:visited
                   { font-size: 15px; color: #ccc; padding: 11px 20px; display: inline-block; }
nav.main a:hover   { color: #fff; text-decoration: underline; }
nav.main .active-page { background-color: #222; }
nav.bottom         { padding: 10px 0; 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           { z-index: 9; }
.top-nav.lockTS    { position: fixed; top: 0; width: 950px; margin-left: -10px; padding-left: 10px; }
.top-nav label     { display: none; }
.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 ---------- */
.content.normal    { min-height: 320px; }
.reqd              { color: #a00; font-size: 13px; }
.cpyrt             { padding: 10px 20px; }

.service-area { color: #f6edaa; background-color: #3f130f; margin: 0 -10px; padding: 30px 100px; }
.home img { float: left; margin: 20px; }
.home .services    { margin: 0 30px 50px; list-style-type: circle; }
.home .services li { margin-bottom: 5px; }

ul.about-cred      { margin-bottom: 40px; }
ul.about-cred ul   { margin-bottom: 15px; }
ul.about-cred li   { margin: 0; }
ul.about-cred > li { display: inline-block; }
ul.about-cred > li:nth-child(1)  { width: 200px; }
ul.about-cred > li:nth-child(2)  { width: 450px; }
ul.about-cred > li:nth-child(1) span { display: block; }
ul.about-cred > li:nth-child(1) img { width: 100%; height: auto; }
ul.about-cred > li:nth-child(1) .img-name { font-weight: bold; }
ul.about-cred > li:nth-child(1) .img-title { font-size: 12px; }
ul.about-cred li:nth-child(2) li:nth-child(1) { font-weight: bold; }
ul.about-cred li:nth-child(2) li:not(:nth-child(1)) { margin-left: 10px; }

ul.service ul   { margin: 0; }
xxul.service li   { margin: 0; }
ul.service > li  { columns: 3; column-gap: 50px; }
ul.service > li ul { border-top: 1px solid #484; margin-bottom: 20px; display: inline-block; width: 100%; }
ul.service li li:nth-child(1) { font-weight: bold; }

ul.noi li  { margin-bottom: 8px; }
ul.noi li img  { margin-right: 5px; }

/* ---------- Tablet Landscape size ---------- */
@media only screen and (min-width: 788px) and (max-width: 979px) {
  .top-nav.lockTS  { width: 758px; }
  .loc div         { margin: 5px 0 0 10px; }
  .loc div.logo    { margin-top: 10px; }
}
/* ---------- PC and laptop - full screen ---------- */
@media only screen and (min-width: 1220px) {
  .pg-std { padding: 5px 80px; }
}
/* ---------- PC Monitor - windowed ---------- */
@media only screen and (min-width: 980px) and (max-width: 1219px) {
  .pg-std { padding: 5px 50px; }
}
/* ---------- Tablet Landscape size and smaller ---------- */
@media only screen and (max-width: 979px) {
  ul.noi li  { margin-bottom: 8px; }
}
/* ---------- Tablet Landscape size ---------- */
@media only screen and (min-width: 788px) and (max-width: 979px) {
  header.main .phone { background: linear-gradient(to right, rgba(43, 13, 10, 0) 0%, #2b0d0a 30%, #2b0d0a 100%); }
  .pg-std { padding: 5px 20px; }
  ul.about-cred > li:nth-child(1)  { width: 180px; }
  ul.about-cred > li:nth-child(2)  { width: 400px; }
  ul.service > li  { column-gap: 15px; }
}
/* ---------- PC and laptop ---------- */
@media only screen and (min-width: 788px) {
  p, ul  { margin: 10px 20px; }
  nav.main     { margin: 0 -10px; }
  ul.about-cred > li:nth-child(1)  { padding-top: 40px; }
}
/* ---------- Tablet Portrait, Mobile Landscape, and smaller ---------- */
@media only screen and (max-width: 787px) {
  .content.normal  { margin-left: 10px; margin-right: 10px; }
  .service-area { color: #f6edaa; background-color: #3f130f; margin: 0 -10px; padding: 30px 20px; }
  ul.about-cred > li:nth-child(1) { width: 40%; text-align: center; margin: 0 28%; }
  ul.about-cred > li:nth-child(2) { width: 100%; }
  ul.service > li  { columns: 2; }
}
/* ---------- Tablet Portrait and Mobile Landscape size ---------- */
@media only screen and (min-width: 610px) and (max-width: 787px) {
  .top-nav.lockTS  { width: 600px; }
  .loc div         { margin: 8px 0 8px 50px; vertical-align: middle; }
  .loc div.logo    { margin-left: 10px; }  /* logo image */
  header.main .phone { background: linear-gradient(to right, rgba(43, 13, 10, 0) 0%, #2b0d0a 50%, #2b0d0a 100%); }
  ul.service > li     { margin: 0 30px; }
  ul.service > li ul  { width: 80%; }
}
/* ---------- Mobile Portrait - general ---------- */
@media only screen and (max-width: 609px) {
  .content.normal  { min-height: 500px; }
  header.main .phone { display: none; }
  header.main, header.main a, header.main:visited { color: #444; }
  .top-nav         { height: 40px; background-color: #fff; border: 1px solid #aaa; position: relative; }
  .top-nav.lockTS  { width: 340px; margin-left: 0; padding-left: 0; }
  .top-nav > *     { margin-top: 10px; }
  .top-nav label   { width: auto; display: inline-block; margin-left: 10px; cursor: pointer;  }
  .top-nav > label      { width: 100px; }     /* 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; }
  .top-nav .mob-icons a { margin-left: 30px; }
  nav.main         { width: 250px; margin-top: 0; }
  nav.main ul      { 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; background: #b7ab57; }
  nav.main li:hover     { background-color: #fff; }
  nav.main li:nth-child(1) { margin-left: 0; }
  nav.main .active-page { background-color: #e9da6f; }
  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; }

  ul.about-cred > li:nth-child(1) { width: 70%; text-align: center; margin: 0 13%; }
  ul.about-cred ul { margin-left: 0; }
  ul.service > li  { columns: 1; width: 80%; margin-left: 8%; }
  div.pics         { text-align: center; }  /* services page */
}
/* ---------- 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; }
}