/* DO IT Solutions - Cassiopeia child (recreates the 2013 yoo_pace "clouds" DO IT look) */

@font-face { font-family: "DroidSansRegular"; src: url("../fonts/DroidSans-webfont.woff") format("woff"), url("../fonts/DroidSans-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenSansCond"; src: url("../fonts/OpenSans-CondLight-webfont.woff") format("woff"), url("../fonts/OpenSans-CondLight-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }

:root {
  --doit-text: #666;
  --doit-link: #46c3dd;
  --doit-link-hover: #3aa9c0;
  --doit-muted: #999;
  --doit-footer-bg: #efefef;
  --cassiopeia-color-primary: #46c3dd;
  --cassiopeia-color-link: #46c3dd;
  --cassiopeia-color-hover: #3aa9c0;
  --link-color: #46c3dd;
  --link-color-rgb: 70, 195, 221;
  --link-hover-color: #3aa9c0;
  --body-color: #666;
  --body-font-family: "DroidSansRegular", Arial, sans-serif;
}

html { font-size: 14px; }
body.doit {
  margin: 0;
  font-family: "DroidSansRegular", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--doit-text);
  background: #b7b7b7 url("../images/clouds_img.jpg") 50% 0 no-repeat fixed;
  background-size: 100%;
  min-height: 100vh;
}
body.doit a { color: var(--doit-link); text-decoration: none; }
body.doit a:hover, body.doit a:focus { color: var(--doit-link-hover); text-decoration: none; }
body.doit h1, body.doit h2, body.doit h3, body.doit h4, body.doit h5, body.doit h6,
body.doit .page-header h1, body.doit .page-header h2 {
  font-family: "OpenSansCond", "Arial Narrow", sans-serif;
  font-weight: normal;
  color: var(--doit-text);
  margin: 25px 0 15px;
}
body.doit h1, body.doit .item-page .page-header h1, body.doit .item-page .page-header h2, body.doit .com-contact .page-header h1, body.doit .com-contact .page-header h2 { font-size: 40px; line-height: 40px; margin-top: 0; }
body.doit h2 { font-size: 30px; line-height: 30px; }
body.doit h3 { font-size: 25px; line-height: 25px; }
body.doit h4, body.doit h5, body.doit h6 { font-size: 22px; line-height: 22px; }
body.doit p { margin: 0 0 15px; }
body.doit img { max-width: 100%; height: auto; }
body.doit hr { border: 0; border-top: 1px solid #ddd; margin: 15px 0; opacity: 1; }

/* ---------- Page frame ---------- */
.doit-wrapper { width: 980px; margin: 0 auto; position: relative; }
#doit-header { position: relative; margin: 10px 0 10px 89px; height: 81px; }
#doit-logo { position: absolute; left: 0; top: 0; display: block; width: 197px; height: 77px; }
#doit-logo img { display: block; width: 197px; height: 77px; }
#doit-logo .mod-custom, #doit-logo p { margin: 0; }

/* header icon bar (glass icons) */
#doit-headerbar { position: absolute; left: 281px; top: 0; width: 430px; height: 81px; }
.doit-iconbar { display: flex; align-items: flex-start; height: 50px; }
.doit-ic { position: relative; display: block; width: 57px; height: 50px; flex: 0 0 auto; }
.doit-ic img { position: absolute; left: 0; top: 0; width: 57px; height: 50px; transition: opacity .3s ease-in-out; }
.doit-ic img.t { opacity: 0; }
.doit-ic:hover img.t, .doit-ic:focus img.t { opacity: 1; }
.doit-ic.is-active { width: 70px; height: 61px; margin: 0 -3px; z-index: 2; }
.doit-ic.is-active img { width: 70px; height: 61px; }
.doit-phone { position: absolute; left: 74px; top: 60px; white-space: nowrap; }
.doit-phone a { font-size: 14px; }
.doit-paylink { position: absolute; left: 446px; top: 47px; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.doit-paylink img { width: 50px; height: auto; display: block; }

/* search */
#doit-search { position: absolute; right: 0; top: 0; width: 170px; }
#doit-search form, #doit-search .mod-finder { margin: 0; }
#doit-search label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#doit-search .mod-finder__search, #doit-search .input-group { display: block; }
#doit-search input[type="search"], #doit-search input[type="text"] {
  box-sizing: border-box; width: 170px; height: 35px; padding: 0 10px 0 35px; border: 0; border-radius: 3px;
  background: rgba(0,0,0,.03) url("../images/searchbox_magnifier.png") 0 50% no-repeat;
  box-shadow: 0 1px 1px rgba(0,0,0,.1) inset, 0 0 1px rgba(255,255,255,.4);
  color: #56696d; font: 14px Arial, Helvetica, sans-serif;
}
#doit-search input::placeholder { color: #86a3a9; }
#doit-search button, #doit-search .btn { display: none; }

/* ---------- Body: left icon sub-menu + glass box ---------- */
.doit-body { position: relative; padding-left: 89px; }
#doit-submenu { position: absolute; left: 0; top: 35px; width: 90px; z-index: 5; }
#doit-submenu ul { list-style: none; margin: 0; padding: 0; display: block; }
#doit-submenu li { display: block; margin: 0 0 5px; padding: 0; width: 90px; }
#doit-submenu li a { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 90px; min-height: 62px; padding: 0; text-align: center; font: 12px/16px Arial, Helvetica, sans-serif; color: #666; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
#doit-submenu li a img { width: 26px; height: 26px; margin: 0 0 4px; }
#doit-submenu li a:hover { color: #333; }
#doit-submenu li.current > a, #doit-submenu li.active > a {
  height: 90px; min-height: 90px; justify-content: flex-start;
  background: url("../images/doit_menu_button.png") 50% 0 no-repeat;
}
#doit-submenu li.current > a img, #doit-submenu li.active > a img { width: 51px; height: 52px; margin: 22px 0 0 -10px; }
#doit-submenu li.current > a .image-title, #doit-submenu li.active > a .image-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#doit-submenu .mod-menu__sub { display: none; }

#doit-main {
  width: 891px; box-sizing: border-box; margin: 0 0 20px; padding: 5px;
  background: rgba(255,255,255,.5); border: 1px solid rgba(0,0,0,.05); border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.6);
}
.doit-inner-box { border: 1px solid rgba(0,0,0,.08); border-radius: 3px; padding: 15px 15px 0; }
.doit-inner-box::after { content: ""; display: table; clear: both; }

/* breadcrumbs box */
.doit-breadcrumbs { margin: 15px; padding: 15px; border: 1px solid rgba(0,0,0,.1); border-radius: 3px; }
.doit-breadcrumbs nav, .doit-breadcrumbs .mod-breadcrumbs__wrapper { margin: 0; }
.doit-breadcrumbs ol.breadcrumb, .doit-breadcrumbs .mod-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; background: none; list-style: none; font-size: 12px; line-height: 20px; }
.doit-breadcrumbs .breadcrumb-item { padding: 0; font-size: 12px; color: #444; }
.doit-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { content: ""; float: none; display: inline-block; width: 5px; height: 10px; margin: 0 12px 0 10px; padding: 0; background: url("../images/breadcrumbs.png") 0 0 no-repeat; vertical-align: 0; }
.doit-breadcrumbs .breadcrumb-item a { color: var(--doit-link); }
.doit-breadcrumbs .mod-breadcrumbs__here, .doit-breadcrumbs .mod-breadcrumbs__divider { display: none; }
.doit-breadcrumbs .breadcrumb-item.active span { color: #444; }

/* content area */
#doit-content { margin: 15px; }
#doit-content .page-header { margin: 0; }
#doit-content .item-page, #doit-content .com-content-article { position: relative; }
#doit-content .icons, #doit-content .com-content-article__icons { float: right; }
#doit-content table { max-width: 100%; }
.doit-maintop { margin: 15px; }
.doit-maintop .card { background: transparent; border: 1px solid rgba(0,0,0,.1); border-radius: 3px; box-shadow: none; margin: 0 0 15px; }
.doit-maintop .card-header { background: transparent; border: 0; padding: 15px 15px 0; font-family: "OpenSansCond", sans-serif; font-size: 25px; line-height: 25px; color: #666; }
.doit-maintop .card-body { padding: 15px; }

/* footer (inside the box on inner pages, full-width bar on home) */
#doit-footer {
  position: relative; margin: 15px -15px 0; padding: 15px 15px 12px; text-align: center;
  background: var(--doit-footer-bg); border-radius: 0 0 3px 3px; box-shadow: inset 0 1px 0 #fafafa;
  color: var(--doit-muted); font-size: 12px; line-height: 20px; text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
#doit-footer ul { list-style: none; margin: 0; padding: 0; display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; }
#doit-footer li a, #doit-footer li a:hover { text-decoration: none !important; }
#doit-footer li { display: inline-block; margin: 0; padding: 0; }
#doit-footer li + li::before { content: "|"; color: #ccc; margin: 0 7px; }
#doit-footer li a { font-size: 12px; color: var(--doit-link); }
#doit-footer li a img { display: none; }
#doit-footer li.active > a, #doit-footer li.current > a { color: #666; font-weight: bold; }
#doit-footer li:first-child.current > a, #doit-footer li:first-child.active > a { text-transform: none; }
#doit-footer .mod-custom p, #doit-footer p { margin: 0; }
#doit-totop { position: absolute; right: 20px; top: 20px; width: 20px; height: 20px; background: url("../images/totop_scroller.png") 50% 0 no-repeat; }
#doit-totop:hover { background-position: 50% -20px; }
.doit-footer-home { margin: 0 !important; border-radius: 0 !important; }

/* ---------- Home splash ---------- */
body.doit-home .doit-splash { position: relative; height: 100vh; min-height: 560px; overflow: hidden; }
body.doit-home .doit-splash main, body.doit-home .doit-splash .com-content-article, body.doit-home .doit-splash .item-page,
body.doit-home .com-content-article__body, body.doit-home .moduletable, body.doit-home .doit-splash .mod-custom { height: 100%; margin: 0; padding: 0; }
body.doit-home .page-header { display: none; }
div.welcomesplashdesktop { display: block; }
div.welcomesplashmobile { display: none; }
.welcomesplashdesktop, .welcomesplashmobile { position: relative; width: 100%; height: 100%; }
.welcomesplashdesktop #cf, .welcomesplashmobile #cf { position: absolute; margin: auto; background: transparent; }
#cf img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transition: opacity .3s ease-in-out; }
#cf img.top { opacity: 0; }
#cf img.top:hover { opacity: 1; }

/* tiles replacing the old ARI carousel */
.doit-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.doit-tile { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 8px; border-radius: 6px; color: #666 !important; transition: background .2s, box-shadow .2s; }
.doit-tile img { width: 64px; height: 64px; margin-bottom: 8px; transition: transform .2s; }
.doit-tile strong { display: block; font-size: 14px; color: #555; }
.doit-tile span { display: block; font-size: 12px; line-height: 16px; color: #888; margin-top: 4px; }
.doit-tile:hover { background: rgba(255,255,255,.6); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.doit-tile:hover img { transform: scale(1.08); }

/* forms (contact / quote / paypal) */
body.doit fieldset { border: 1px solid #ddd; border-radius: 3px; padding: 0 10px 10px; margin: 15px 0 30px; }
body.doit legend { float: none; width: auto; padding: 0 10px; margin: 0 0 10px -10px; font-size: 14px; background: #fff; }
body.doit .btn-primary, body.doit button.btn-primary, body.doit .doit-btn {
  background: #46c3dd; border: 1px solid #37aec7; color: #fff; border-radius: 3px; padding: 6px 12px; font-size: 13px;
}
body.doit .btn-primary:hover, body.doit .doit-btn:hover { background: #3aa9c0; color: #fff; }
.doit-paypal p { margin: 0 0 12px; }
.doit-paypal label { display: block; margin: 0 0 6px; }
.doit-paypal input[type="text"] { width: 220px; max-width: 100%; height: 30px; padding: 2px 6px; border: 1px solid #ccc; border-radius: 3px; background: #fff; }
.doit-paypal input[type="image"] { border: 0; }

/* Instant quote calculator */
.doit-quote table { width: 100%; border-collapse: collapse; margin: 0 0 20px; border-radius: 5px; box-shadow: 2px 3px 10px rgba(0,0,0,.4); overflow: hidden; background: rgba(255,255,255,.6); }
.doit-quote th { background: #a9e1ff; color: #eee; text-shadow: 1px 1px 3px rgba(0,0,0,.4); font-family: "OpenSansCond", sans-serif; font-size: 20px; font-weight: normal; text-align: left; padding: 8px 10px; }
.doit-quote td { padding: 6px 8px; border-top: 1px solid rgba(0,0,0,.06); vertical-align: top; }
.doit-quote tr:hover td { background: #e4eef8; }
.doit-quote td.p { white-space: nowrap; text-align: right; width: 90px; }
.doit-quote td.c { width: 30px; text-align: center; }
.doit-quote td.q { width: 70px; }
.doit-quote td.q input { width: 55px; }
.doit-quote details summary { cursor: pointer; color: #555; }
.doit-quote details p { margin: 6px 0 0; font-size: 12px; color: #777; }
.doit-quote .short { display: block; font-size: 12px; color: #888; }
.doit-quote-total { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-radius: 5px; background: #90bfd9; color: #eee; font-size: 18px; }
.doit-quote-total strong { font-size: 22px; color: #fff; }

/* system messages like the old floating alert */
#system-message-container .alert { max-width: 500px; margin: 15px auto; border: 3px solid #888; border-radius: 10px; box-shadow: 10px 10px 10px rgba(0,0,0,.4); background: #fff; color: #555; }

/* mobile select nav (built by user.js) */
.doit-selectnav { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 959px) {
  div.welcomesplashdesktop { display: none !important; }
  div.welcomesplashmobile { display: block !important; }
  .doit-wrapper { width: auto; padding: 0 15px; }
  #doit-header { margin: 10px 0; height: auto; min-height: 60px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
  #doit-logo { position: static; width: 160px; height: auto; }
  #doit-logo img { width: 160px; height: auto; }
  #doit-headerbar { display: none; }
  #doit-search { position: static; width: 162px; }
  #doit-search input[type="search"], #doit-search input[type="text"] { width: 162px; }
  .doit-body { padding-left: 0; }
  #doit-submenu { display: none; }
  .doit-selectnav { display: block; width: 100%; margin: 0 0 10px; padding: 6px 8px; font-size: 14px; border: 1px solid #aaa; border-radius: 3px; background: #fff; color: #333; }
  #doit-main { width: auto; padding: 2px; }
  .doit-breadcrumbs { margin: 15px 0; }
  #doit-content { margin: 15px 0; }
  .doit-maintop { margin: 15px 0; }
  .doit-paylink, .doit-phone { display: none; }
  body.doit h1, body.doit .item-page .page-header h2 { font-size: 34px; line-height: 36px; }
  body.doit-home { background-size: cover; }
  .doit-quote td.q input { width: 45px; }
}
@media (max-width: 479px) {
  #doit-logo, #doit-logo img { width: 150px; }
  #doit-search, #doit-search input[type="search"], #doit-search input[type="text"] { width: 150px; }
}
#doit-submenu .mod-menu__toggle-sub, #doit-submenu button { display: none !important; }
html { background: #b7b7b7; }
.doit-splash .mod-custom:has(.welcomesplashmobile) { display: none; }
@media (max-width: 959px) {
  .doit-splash .mod-custom:has(.welcomesplashdesktop) { display: none; }
  .doit-splash .mod-custom:has(.welcomesplashmobile) { display: block; }
}