html, body {margin: 0; padding: 0;} html {-webkit-text-size-adjust: 100%; text-size-adjust: 100%;}

:root {--body-font: 19px/1.5 'Vazirmatn', Arial, Helvetica, sans-serif;}

/*body {font: var(--body-font);}*/

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

body {font-family: 'Vazirmatn', Arial, Verdana, Geneva; font-variant-ligatures: none; font-size: 100%; font-kerning: normal;}

#width {position: fixed; top: 0; z-index: 20; padding: 0 3px; font-size: 11px; line-height: 14px; font-family: Arial; background-color: #FF0;}
a, a:visited {color: #2E3FE1;}
a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-style: dotted; text-underline-offset: .1em; cursor: pointer;}
a:focus-visible {outline: 2px solid #66AFE9; outline-offset: 2px;}
* {-webkit-tap-highlight-color: transparent;} img {border: 0;}
.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;} .phlink:hover {cursor: text;}

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

/*HEADER*/

/*#headtopback {outline: 4px solid red !important} #headtopback table {outline: 1px solid orange}
#headerback {outline: 4px solid purple !important}
header {border: 1px solid colordark;} #logo {border: 1px solid red} #logo img {border: 1px solid magenta} #phone {border: 2px solid green}*/

#headtopback, #headerback {position: fixed; left: 0; right: 0;}
#headtopback {top: 0;} #headerback {z-index: 1;}
#headtopback, #headtopback table {height: 40px;}
#headtopback, #headtopback table, header {display: table; width: 100%; margin: auto; z-index: 2;}
#headtopback table, header {max-width: 1300px;}
#headertext {font-size: 16px; line-height: 1; vertical-align: middle; padding-top: 5px; text-align: left; white-space: nowrap;}

#phone {font-size: 18px; line-height: 1; margin-top: 6px; text-align: right; white-space: nowrap;}
#phone, #phone a {font-weight: 500;}
#phone:before {content: url("images/icons/phone1.png"); display: inline-block; vertical-align: -4px; margin: 3px 5px 0 0;}

#headerback, header {height: 80px;}
header {position: relative; text-align: center; box-sizing: border-box;}
#headerback {box-shadow: 0 3px 7px -5px #000;}
#logo {margin-top: 13px;} #logo img {display: block;}
#logo, #logo img {width: 170px;} #logo img {height: 53px;}

@media (max-width: 1370px) and (min-width: 501px) {
#logo {margin-left: 30px;} #headertext {padding-left: 30px;} #phone {padding-right: 30px;}
}
@media (min-width: 641px) {#headerback {top: 40px;} #homepic, main {margin-top: 120px;}}
@media (max-width: 640px) {
#headertext {line-height: 1.4;} #headertext span {display: block;}
#headtopback, #headtopback table {height: 60px;} #headerback {top: 60px;} #homepic, #toppic {margin-top: 140px;}
}
@media (max-width: 500px) {#logo {margin-left: 20px;}}
@media (max-width: 500px) and (min-width: 416px) {#headertext {padding-left: 20px;} #phone {padding-right: 20px;}}
@media (max-width: 415px) {
#headtopback, #headtopback table {height: 40px;} #headerback {top: 44px; border: 0px solid red} #homepic, #toppic {margin-top: 124px;}
#headertext {visibility: hidden; padding: 0; margin: 0; height: 0; line-height: 0; font-size: 0;}
#phone {display: block; text-align: center; padding: 3px 15px 5px 0; margin-top: 4px;}
}

@media (max-width: 350px) {#phone {text-align: left; margin-left: 15px;}}


/*Pay Button*/

#pay {position: absolute; top: 63px; right: 110px; text-align: center; margin: 0 auto 0 auto;}
#pay a {display: inline-block; padding: 12px 15px 7px 15px; font-size: 1em; line-height: 1; color: #FFF; text-decoration: none; transition: 0.15s; border-radius: 6px; box-sizing: border-box; background: var(--colordark);}
@media (max-width: 640px) {#pay {top: 83px;}}
@media (max-width: 500px) {#pay {right: 95px;}}
@media (min-width: 416px) {#pay a:hover {background: var(--colorlite);}}
@media (max-width: 415px) {
#pay {top: 8px; right: 15px; z-index: 20000}
#pay a {padding: 8px 10px 3px 10px; background: #FFF; color: var(--colormain);}
padding: 10px 15px 6px 15px;}

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

/*MENU*/

/*.navheader {outline: 1px solid orange} nav {outline: 1px solid red} nav div {outline: 1px solid cyan}
nav a {outline: 1px solid magenta} .ham {outline: 1px solid yellow}*/

.navheader, .navheader * {box-sizing: border-box;}
.navheader {top: 0; height: 100%; align-content: center;}

#navcheck {display: none;}
nav a.selected {cursor: text; pointer-events: none; -webkit-user-select: none; -webkit-touch-callout: none;}
nav a {display: table-cell; text-decoration: none; cursor: pointer; font-weight: 400;}

@media (max-width: 1370px) and (min-width: 1161px) {.navheader {padding-right: 20px;}}
@media (min-width: 1281px) {nav a {padding: 5px 10px 0 10px;}}
@media (max-width: 1280px) and (min-width: 1161px) {
nav div {margin: 0 1px;} nav a {font-size: 16px !important; padding: 5px 6px 0 6px;}
}

@media (min-width: 1161px) {
.ham {display: none;} .navheader {position: absolute; right: 0;}
nav {display: inline-block; text-align: right; padding-top: 1px;}
nav div {display: inline-table; vertical-align: middle; text-align: center; height: 50px;}
nav a {text-align: center; height: inherit; vertical-align: middle; font-size: 17px; line-height: 1.2; transition: .15s; border-radius: 8px;}
nav a.selected {text-decoration: underline;}
nav span {display: block;}
#pay {display: none;}
}

@media (max-width: 1160px) {
.navheader {margin-top: 15px; left: 0; right: 0; box-shadow: 0 3px 7px -5px #000;}

nav {position: relative; display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-size: 0; line-height: 0; top: 0; margin: auto; padding: 5px 25px;}

nav div {display: block; /*width: 100%;*/ height: 0; overflow: hidden; transition: height .25s ease; font-size: 0; line-height: 0; padding: 0;}
nav div:last-child {display: none;}

nav a {display: table-cell; width: 1%; vertical-align: middle; height: 60px; opacity: 0; font-size: 0; line-height: 1.3; padding-top: 4px; transition: .3s font-size ease, .2s opacity ease, .1s background; /*border: 1px solid var(--colordark2);*/ border-radius: 8px;}

nav div:nth-child(6) span {display: block;}

.ham, .ham * {-webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;}
.ham {position: absolute; display: table; height: 50px; width: 59px; top: 0; right: 22px; margin-top: 15px; padding: 10px; box-sizing: border-box;}
.ham:hover {cursor: pointer;}
.ham span {top: 24px; left: 10px; -webkit-transition: -webkit-transform 0.35s ease-out;}
.ham span, .ham span:before, .ham span:after {position: absolute; display: block; content: ""; height: 3px; width: 38px; opacity: 1; background: #333; border-radius: 1px;}
.ham span:before {top: -10px;} .ham span:after {top: 10px;}

.navheader {height: 0;}
.navheader:has(#navcheck:checked) {height: auto; background-color: var(--colordark);}

#navcheck:checked ~ nav div {height: 60px; margin: 5px;}
#navcheck:checked ~ nav a {font-size: 18px; opacity: 1;}

#navcheck:checked ~ .ham span {width: 0; transform: rotateX(180deg); transition-timing-function: ease;}
#navcheck:checked ~ .ham span:before {-webkit-transform: rotateZ(37deg); top: 0;}
#navcheck:checked ~ .ham span:after {-webkit-transform: rotateZ(-37deg); top: 0;}
}

@media (max-width: 1160px) and (min-width: 841px) {nav {width: 800px;}}
@media (max-width: 1160px) and (min-width: 681px) {nav span {display: block;} nav div:nth-child(5) span {display: inline;}}
@media (max-width: 900px) and (min-width: 616px) {nav div:nth-child(7) span {display: block;}}
@media (max-width: 680px) and (min-width: 616px) {
nav {grid-template-columns: repeat(4, 1fr);}
nav div:first-child, nav div:nth-child(10) {grid-column: 1 / -1;}
nav div:first-child a, #navcheck:checked ~ nav div:first-child, nav div:nth-child(10) a, #navcheck:checked ~ nav div:nth-child(10) {height: 50px;}
}
@media (max-width: 680px) and (min-width: 426px) {nav div:nth-child(8) span, nav div:nth-child(9) span {display: block;}}
@media (max-width: 615px) and (min-width: 426px) {
nav {grid-template-columns: repeat(3, 1fr);}
nav div:first-child {grid-column: 1 / -1;} nav div:first-child a, #navcheck:checked ~ nav div:first-child {height: 50px;}
}
@media (max-width: 590px) {nav div:nth-child(7) span, nav div:nth-child(9) span {display: block;}}
@media (max-width: 500px) {.ham {right: 11px;} nav {padding: 5px 15px;}}
@media (max-width: 425px) {nav {grid-template-columns: repeat(2, 1fr);} nav div:nth-child(8) span {display: block;}}
@media (max-width: 425px) and (min-width: 360px) {nav div:nth-child(7) span {display: inline;}}

/*colors*/

@media (min-width: 1161px) {
nav a {color: var(--colordark2) !important;}
nav a:hover:not(.selected) {background-color: var(--yellowlite) !important;}
}
@media (max-width: 1160px) {
nav a {background-color: var(--colordark2); color: #FFF !important;}
nav .selected {background-color: var(--colordeep) !important;}
nav a:hover:not(.selected) {background-color: var(--colorlite);}
}

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

/*Big Top Pic*/

/*.topcap {outline: 1px solid #F00} #topcapback {outline: 1px solid #FF0}*/

#toppic {position: relative; overflow: hidden; z-index: 0; text-align: center; background-color: #222 /*sdf*/;}
#toppic img {width: 500px; height: 300px; width: 100%; height: 420px; object-fit: cover; object-position: 50% 50%; display: block;}
#topcapback {position: absolute; width: 100%; max-width: 1300px; margin: auto; left: 0; right: 0; text-align: center; top: 42%; transform: translateY(-42%); z-index: 2;}
.topcap {position: relative; text-align: center; z-index: 1; color: #FFF; font-size: 16px; max-width: 700px; margin: auto; padding: 0 40px;}

.topcap::before {content: ""; position: absolute; inset: -20px; z-index: -1; background: rgba(0, 0, 0, 0.5); -webkit-filter: blur(20px); filter: blur(20px); -webkit-transform: scale(0.9); transform: scale(0.9); border-radius: 20%;}

/*@media (max-width: 1370px) {.topcap {margin-left: 30px; margin-right: 20px;}}
@media (max-width: 500px) {.topcap {margin-left: 20px; margin-right: 15px;}}*/

.topcap2 {font-size: 3em; line-height: 1.05; padding-top: 20px; font-weight: 600;}
.topcap2 span:not(#btns span) {white-space: nowrap;}
.topcap2 span:last-child:not(#btns span) {display: block; font-size: .9em; color: var(--yellow);}
.topcap3 {font-size: 1.2em; line-height: 1.55; padding-top: 20px; font-weight: 400; color: #DDD;}

@media (max-width: 1050px) {.topcap::before {-webkit-transform: scale(0.85); transform: scale(0.85);}}
@media (max-width: 850px) {#toppic img {height: 440px;}}
@media (max-width: 160px) {#toppic img {height: 550px;}.topcap2 {font-size: 3em;}}
@media (max-width: 550px) {#toppic img {height: 500px;}}
@media (max-width: 500px) {
.topcap {max-width: auto; padding: 0 20px;} .topcap2 {font-size: calc(4vw + 26px);} .topcap3 {line-height: 1.35;}
#toppic img {height: calc(655px - 30vw);}
}

#btns {display: grid; grid-template-columns: 210px 210px; column-gap: 20px; margin: 30px auto 0 auto; justify-content: center;}
#btns, #btns * {line-height: 1.2;}
#btns div {height: 40px; border-radius: 6px; padding-top: 3px; text-align: center; box-sizing: border-box; align-content: center; transition: .1s;}
#btns div:first-child {background-color: var(--colormain); border: 1px solid #BBB;}
#btns div:last-child {white-space: nowrap; background-color: var(--colormain); border: 1px solid #BBB;}

#btns a:not(.phlink) {display: block; width: 100%; box-sizing: border-box; text-align: center; transition: 0.15s; white-space: nowrap; color: #FFF !important; text-decoration: none;}
#btns a.phlink {display: inline;}
#btns div:first-child:hover {background-color: var(--colorlite);}
#btns div:last-child:has(.phlink:hover) {background-color: var(--colorlite);}
#btns span {display: inline;}

@media (max-width: 550px) {#btns {grid-template-columns: 210px; row-gap: 20px;}}


#toppic.tpresid {background-color: #222 /*sdf*/;}
#toppic.tpresid img {object-position: 50% 65%;}

#toppic.tpcomm {background-color: #222 /*sdf*/;}
#toppic.tpcomm img {object-position: 50% 35%;}
@media (max-width: 600px) {#toppic.tpcomm img {object-position: 80% 15%;}}

#toppic.tpfire {background-color: #222 /*sdf*/;}
#toppic.tpfire img {object-position: 0% 0%;}
@media (max-width: 550px) and (min-width: 531px) {#toppic.tpfire img {object-position: 10% 0%;}}
@media (max-width: 530px) {#toppic.tpfire img {object-position: 10% 0%;}}
@media (max-width: 380px) {#toppic.tpfire img {object-position: 20% 0%;}}

#toppic.tpsurv {background-color: #222 /*sdf*/;}
#toppic.tpsurv img {object-position: 0% 20%; filter: brightness(75%);}
#toppic.tpsurv .topcap::before {background: rgba(0, 0, 0, 0.6);}

#toppic.tpaccess {background-color: #222 /*sdf*/;}
#toppic.tpaccess img {filter: brightness(75%);}
#toppic.tpaccess .topcap::before {background: rgba(0, 0, 0, 0.3);}

#toppic.tpcab {background-color: #222 /*sdf*/;}
#toppic.tpcab img {filter: brightness(45%);}
#toppic.tpcab .topcap::before {background: rgba(0, 0, 0, 0.3);}

#toppic.tbabout {background-color: #222 /*sdf*/;}
#toppic.tbabout img {object-position: 30% 40%;}
#toppic.tbabout img {filter: brightness(55%);}
#toppic.tbabout .topcap::before {background: rgba(0, 0, 0, 0.3);}
@media (max-width: 500px) {#toppic.tbabout img {object-position: 0% 100%;}}


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

/*BODY AREA*/

.bodyarea {font: var(--body-font); padding: 45px 0 35px 0; margin: auto; max-width: 1300px;}

@media (max-width: 1370px) {.bodyarea {margin-left: 30px; margin-right: 30px;}}
@media (max-width: 500px) {.bodyarea {margin-left: 20px; margin-right: 20px;}}

.bodyhead, .bodyhead2 {font-size: 1.9em; line-height: 1.15; font-weight: 600;}
.bodyhead {text-align: center; padding-bottom: 20px;} .bodyhead2 {text-align: left;}
h1, h2, h3, h4 {margin: 0;} h2 {margin-top: 20px;}

/*@media (max-width: 700px) {.bodyhead {padding-bottom: 0; font-size: 1.6em;}}
@media (max-width: 360px) {.bodyarea {width: 88%;} .bodyhead {font-size: 1.5em;}}*/

.heading, .heading2, .heading3 {font-weight: 600; line-height: 1.45;} .heading {font-size: 1.35em;}
.heading2 {font-weight: 500; font-size: 1.2em;} .heading3 {font-weight: 500; font-size: 1.25em; font-style: italic;}

ul {margin-left: -15px;} ul li:not(ul li:last-child) {padding-bottom: 15px;} ul span {font-weight: 500;}*

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

/*Sections*/

.thissection {text-align: center; padding: 30px 0 15px 0;}
.thissection:nth-of-type(odd) {background-color: var(--colorback);} /*lite ylw: #f1ebd9*/
.thissection:nth-of-type(even) {background-color: #FFF;}
.banarrow {max-width: 800px; margin: auto;}
@media (max-width: 600px) {.thissection {text-align: center; padding: 20px 0 10px 0;}}

.small {margin: 0 auto 20px auto; text-align: center; font-size: 16px; letter-spacing: 1px; font-weight: 500;}

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

/*Service Blocks (not home page*/

@media (min-width: 570px) {.topblks .bodyhead span {display: block;}}

#blocks49 {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: auto; padding: 40px 0 50px 0; max-width: 1300px;}
#blocks49 * {box-sizing: border-box;}
#blocks49 div:not(.icon):not(.learnmore) {padding: 25px 24px 22px 24px; font-size: .9em; line-height: 1.5; text-align: left; background-color: #FFF; border: 1px solid #D5DADD; border-radius: 12px;}

#blocks49 h3 {margin: 10px 0 15px 0; padding: 0; font-size: 1.15em; line-height: 1.25; font-weight: 600; color: var(--colormain);}
#blocks49 span {display: block; padding: 0; color: #4D555A;}
#blocks49 .icon {display: inline-block; padding: 10px; border-radius: 6px; background-color: var(--yellowlite)}
#blocks49 img {width: 26px; height: 26px; display: block;}

@media (max-width: 1005px) and (min-width: 801px) {#blocks49 {grid-template-columns: repeat(3, 1fr); gap: 18px;}}
@media (max-width: 800px) and (min-width: 551px) {#blocks49 {grid-template-columns: repeat(2, 1fr); gap: 15px;}}
@media (max-width: 550px) {#blocks49 {grid-template-columns: 1fr; row-gap: 20px;}}

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

/*Side by Side*/

/*.sideby .bodyarea {outline: 1px solid red} .sideby div {outline: 1px solid blue}*/
.sideby * {text-align: left;}
.sideby .bodyarea {display: grid; padding: 0;}
/*.sideby div {font-size: 17px; line-height: 1.5;}*/
.sideby img {display: block; width: 600px; height: 350px; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; /*object-position: 50% 50%;*/}
.sideby p {margin-bottom: 0;}

@media (min-width: 1301px) {.sideby section:first-child {margin-right: 40px;} .sideby section:last-child {margin-left: 40px;}}
@media (max-width: 1300px) and (min-width: 1101px) {.sideby section:first-child {margin-right: 5%;} .sideby section:last-child {margin-left: 5%;}}
@media (min-width: 1101px) {.sideby .bodyarea {grid-template-columns: 60% 40%; grid-auto-rows: 1fr; padding: 50px 0 70px 0;}}
@media (max-width: 1100px) {
.sideby section:first-child {padding: 40px 0 0 0;} .sideby section:last-child {margin: 40px 0 60px 0;}
.sideby img {/*height: calc(80px + 45vw); max-height: 450px;*/ max-width: 700px; margin: auto;}
}

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

/*Membership Logos*/

#membs {margin: 30px auto 0 auto; text-align: center;}
#membs div {display: inline-block; padding: 0 25px; text-align: center; vertical-align: middle;}
#membs img {display: block; width: 230px; height: 120px; width: 100%; max-width: 230px; margin: auto; height: auto;}

@media (max-width: 1020px) and (min-width: 881px) {#membs div {padding: 0 15px;}}
@media (max-width: 880px) and (min-width: 471px) {
#membs {max-width: 550px;} #membs div:nth-child(3), #membs div:nth-child(4) {margin-top: 20px;}
}
@media (max-width: 530px) {#membs div {padding: 0 10px;}}
@media (max-width: 470px) {#membs {max-width: 300px;} #membs div:not(div:first-child) {margin-top: 35px;}}

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

/*Reviews*/

#blocksrvws {display: grid;  margin: auto; padding: 20px 0 50px 0; max-width: 1100px;}
#blocksrvws * {box-sizing: border-box;}
#blocksrvws .rvw {font-size: .9em; line-height: 1.5; text-align: center; background-color: #FFF; border: 1px solid #D5DADD; border-radius: 12px;}
#blocksrvws .reviewer {margin: 10px 0 15px 0; padding: 0; font-size: 1.15em; line-height: 1.25; font-weight: 600; color: var(--colormain);}
#blocksrvws span {display: block; line-height: 1.4; color: #4D555A;}

#blocksrvws.homervws .rvw {background-color: var(--colorback);}

.stars {margin-bottom: 22px; font-size: 24px; letter-spacing: 3px; color: var(--yellow); line-height: 1;}

@media (min-width: 981px) {#blocksrvws .rvw {padding: 30px 35px 30px 35px;}}
@media (max-width: 980px) {#blocksrvws .rvw {padding: 30px 20px 30px 20px;}}
@media (min-width: 716px) {#blocksrvws {grid-template-columns: repeat(3, 1fr); gap: 24px;}}
@media (max-width: 715px) {#blocksrvws {grid-template-columns: 1fr; row-gap: 20px; max-width: 300px;}}

.rvwbtn {text-align: center; margin: 20px auto 0 auto;}
.rvwbtn a {display: inline-block; padding: 12px 15px 8px 15px; font-size: .95em; line-height: 1.2; color: #FFF; text-decoration: none; transition: 0.15s; border-radius: 6px; box-sizing: border-box; background-color: var(--colormain); box-shadow: 0 2px 3px rgba(0,0,0,.20); white-space: nowrap;}
.rvwbtn a:hover {background-color: var(--colorlite);}

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

/*Page Pics*/

.pagepic img {border-radius: 3px; width: 500px; height: 300px; width: 100%; height: auto; display: block;}
/*.pagepic h3, .pagepic p {font-size: .9em; line-height: 1.45; margin: 10px auto 0 auto !important; text-align: center; font-weight: 400 !important;}*/
.picwide {max-width: 500px;} .pictall {max-width: 350px;}
.picleft {float: left; margin: 10px 50px 30px 0;} .picright {float: right; margin: 10px 0 30px 50px;}
@media (max-width: 1050px) and (min-width: 871px) {.picwide {max-width: 430px;}}
@media (max-width: 870px) {.picleft, .picright {text-align: center; float: none; margin: 25px auto 35px auto;} .pictall {max-width: 400px;}}

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

/*Contact Us*/

@media (min-width: 531px) {.contactus .bodyhead span {display: block;}}

#cubtns {display: grid; grid-template-columns: 210px 210px; column-gap: 20px; margin: 30px auto 15px auto; font-size: 16px;}
#cubtns, #cubtns * {line-height: 1.2;}
#cubtns div {height: 40px; border-radius: 6px; padding-top: 5px; text-align: center; box-sizing: border-box; align-content: center; transition: .1s;}
#cubtns div:first-child {background-color: var(--colormain); border: 2px solid transparent; box-shadow: 0 2px 3px rgba(0,0,0,.20);}
#cubtns div:last-child {white-space: nowrap; border: 2px solid var(--colormain) /*#D5DADD*/; box-shadow: 0 2px 3px rgba(0,0,0,.10);}

#cubtns a:not(.phlink) {display: block; width: 100%; box-sizing: border-box; text-align: center; transition: 0.15s; white-space: nowrap; color: #FFF !important; text-decoration: none;}
#cubtns a.phlink {display: inline;}
#cubtns div:first-child:hover {background-color: var(--colorlite);}
#cubtns div:last-child:has(.phlink:hover) {border: 2px solid var(--colorvlite);}
#cubtns span {display: inline;}

@media (min-width: 551px) {#cubtns {width: 440px;}}
@media (max-width: 550px) {#cubtns {grid-template-columns: 210px; row-gap: 20px; justify-content: center;}}

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

/*BOTTOM AREA*/

/*#footerinside {outline: 1px solid yellow} .footerintro img {outline: 1px solid colordark} #footerback {outline: 1px solid cyan}
.footerintro {outline: 3px solid red} .footerintro p {outline: 1px solid red}
.footercol {outline: 1px solid magenta} .contact {outline: 1px solid green} .contact img {outline: 1px solid yellow}
.servicelinks {outline: 1px solid colordark}*/

:root {--fbord: 1px solid rgba(255, 255, 255, 0.2);}

#footer {background: var(--colordark1); color: #DDD; font-size: 17px; line-height: 1.5;}
#footer a {text-decoration: none; color: #DDD; text-decoration: none;}
#footer a:hover {color: #FFF; text-decoration: underline;}
#footer * {box-sizing: border-box;}

#footerback {max-width: 1100px; margin: auto; padding: 0 34px;}

#footerinside {display: grid; grid-template-columns: 280px 240px max-content; justify-content: space-between; padding: 60px 0 47px 0;}

.footerhead {margin: 5px 0 18px 0; font-weight: 600; font-size: 24px; letter-spacing: .2px; color: var(--colorpale);}

.footerintro > img {display: block; width: 170px; height: 53px; margin: 0 0 21px 0;}
.contactinfo img {width: 22px; height: 22px; margin-right: 9px; vertical-align: -6px;}
.contactinfo p {margin: 0 0 13px 0;}
.contactinfo p a {display: inline; margin: 0;}
.contactinfo .address {position: relative; padding-left: 30px; white-space: nowrap;}
.contactinfo .address img {position: absolute; left: 0; top: 0;}

.lics div {position: relative; padding: 0 0 13px 13px; font-size: .9em !important; line-height: 1.5;}
.lics div:before {content: "\2022"; position: absolute; left: 0; top: 0; color: var(--colorlite);}

.servicelinks a {display: block; position: relative; margin: 0 0 10px 0; padding-left: 13px; line-height: 1.3;}
.servicelinks a:before {content: "\2022"; position: absolute; left: 0; top: 0; color: var(--colorlite);}

#footerbottom {border-top: 1px solid var(--colordark2); margin: auto; text-align: center; padding: 15px 0; font-size: 15px; line-height: 1.3; color: #FFF;}

@media (max-width: 1000px) and (min-width: 851px) {#footerinside {grid-template-columns: 200px 220px max-content;}}

@media (max-width: 850px) {
#footerinside {grid-template-columns: 1fr; grid-row-gap: 45px;} .footerhead {text-align: center;}
.footerintro {margin: 0 auto; text-align: center; max-width: 300px;}
.footerintro > img {margin: 0 auto 21px auto;}
.contactinfo, .lics {text-align: left;} .lics, .services {margin: 0 auto;}
.contactinfo {width: max-content; max-width: 100%; margin: 0 auto;} .lics {max-width: 290px;}
}
@media (max-width: 380px) {#footerback {padding: 0 22px;} #footerinside {grid-row-gap: 35px; padding-top: 45px;}}

.web {padding: 20px 20px 15px 20px; font-size: 13px; text-align: center; margin: auto; color: #AAA; background-color: #222;}
.web a {text-decoration: none; color: inherit; white-space: nowrap;} .web a:hover span {color: #F65246;}
.web img {vertical-align: top; margin: 1px 0 0 0; width: 23px; height: 15px;}

#totop {position: fixed; bottom: 25px; right: 25px; display: inline-block; z-index: 9999; opacity: .7; transition: 0.15s;}
#totop img {width: 32px; height: 32px; display: block; -webkit-filter: drop-shadow(0 0 4px rgba(0,0,0,0.55)); filter: drop-shadow(0 0 4px rgba(0,0,0,0.55)); cursor: pointer;} /*keep -webkit for old Safari*/
#totop:hover {opacity: 1;}

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

/*COLORS*/

:root {--colordeep: #11282C; --colordark: #214A50; --colordark1: #0D373C; --colordark2: #16626B; --colormain: #186D7C; --colorlite: #2F808C; --colorvlite: #369faf; --colorpale: #75B9C3; --colorback: #EBEFEE; --yellow: #D9B982; --yellowlite: #F1D69D;}
/*more ylw: F5CB5C, less ylw: #F3C66F.   colordark orig: #1A3C41     colorpale: #D4EEF2
--yellow: #F3C66F; --yellowlite: #f9dc8d;    tan instead of yellow: --yellow: #D9B982; --yellowlite: #F1D69D;
apricot: --yellow: #DCB794; --yellowlite: #EAD1B8;
*/

body {color: #444;}
#headtopback {background-color: var(--colordark);}
body, #headerback, header {background-color: #FFF;}
#headertext, #phone, #phone a {color: #FFF;}
.bodyhead {color: var(--colormain);}