/*HOME PAGE*/

@font-face {font-family: 'Instrument SemiCond'; font-style: normal; font-weight: 700; font-display: block;
  src: url('fonts/instrument-sans-700-semicond.woff2') format('woff2'), url('fonts/instrument-sans-700-semicond.woff') format('woff');
}

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

@media (min-width: 500px) {
@keyframes bgimgboxzoom {0% {transform: translateY(-50%) scale(0.5); opacity: 0;} 100% {transform: translateY(-50%) scale(1); opacity: 1;}}
.bgimgbox {animation: bgimgboxzoom 1s;} .homecap {animation: slidecap 1s;}

@keyframes sblockzoom {
0% {transform: scale(0); opacity: 0;}
1% {transform: scale(.5); opacity: 0;}
5% {transform: scale(1.05); opacity: 1;}
10% {transform: scale(1); opacity: 1; transform-origin: 20% 0%;}
}
.sb:nth-child(1) {animation: sblockzoom 12s;}
.sb:nth-child(2) {animation: sblockzoom 14s; animation-delay: .08s;}
.sb:nth-child(3) {animation: sblockzoom 16s; animation-delay: .1s;}
.sb:nth-child(4) {animation: sblockzoom 18s; animation-delay: .15s;}
.sb:nth-child(5) {animation: sblockzoom 20s; animation-delay: .2s;}
}

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

/*Top image*/

/*#homepic {outline: 1px solid red} #hpcont {outline: 1px solid yellow} .homecap {outline: 1px solid cyan}*/

#homepic {position: relative; height: calc(120px + 34vw); max-height: 500px; overflow: hidden; display: flex; align-items: center; background-color: #012F7F;}
#homepic img {width: 500px; height: 300px; width: 100vw; height: auto; opacity: .4; filter: brightness(65%);}

#hpcont {position: absolute; margin: auto; left: 0; right: 0; text-align: center; z-index: 1;}

.homecap {position: absolute; left: 0; text-align: left; max-width: 850px; z-index: 1; font-size: 66px; color: #FFF;}
@keyframes slidecap {0% {left: -30%; opacity: 0;} 100% {left: 0; opacity: 1;}}
.homecap1 {font-family: 'Instrument SemiCond', Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1em; letter-spacing: .5px; text-shadow: 1px 1px 2px #000; margin: 0 auto;}
.homecap2 {font-size: .4em; line-height: 1.4; padding-top: 20px; font-weight: 400 !important; margin: 0 20px 0 0;}

@media (max-width: 1400px) {.homecap {width: calc(71vw - 170px);} .homecap1 {font-size: calc(5.8vw - 16px);}}
@media (max-width: 1270px) {.homecap2 span {display: block;}}
@media (min-width: 951px) {
.homecap1 {line-height: 1.2;} .homecap {top: 52%; transform: translateY(-52%)}
#hpcont {width: 88%; max-width: 1300px;}
}
@media (max-width: 950px) {
.homecap {top: 52%; transform: translateY(-52%)}
.homecap1 {font-size: 4.2vw; line-height: 1.1;} .homecap {width: calc(75vw - 160px);}
#hpcont {width: 92%;}
}
@media (max-width: 830px) {.homecap2 {font-size: 2.9vw;}}
@media (min-width: 706px) {.btn {margin: 35px auto 0 auto;}}
@media (max-width: 705px) {
.homecap {width: calc(75vw - 175px);} .homecap1 {font-size: 6vw;}
.homecap2 {visibility: hidden; font-size: 0; line-height: 0; padding: 0;}
.btn {margin: 25px auto 0 auto;}
}
@media (min-width: 611px) {.btn a {padding: 12px 18px 10px 18px; font-size: 19px;}}
@media (max-width: 610px) {
#homepic, #homepic img {height: calc(250px + 15vw);}
.homecap {width: calc(75vw - 170px);} .btn {margin-top: 25px;} .btn a {padding: 10px 16px 9px 16px; font-size: 18px;}
}
@media (max-width: 550px) {
.homecap {width: calc(85vw - 150px);} .homecap1 {font-size: calc(11vw - 18px);}
.btn {margin-top: 20px;} .btn a {padding: 9px 14px 8px 14px; font-size: 17px;}
}
@media (max-width: 530px) {.btn a {color: #000 !important}}
@media (max-width: 500px) and (min-width: 481px) {#homepic, #homepic img {height: 320px;}}
@media (max-width: 480px) {
#homepic, #homepic img {height: calc(60px + 70vw);}
.homecap {top: 51%; transform: translateY(-51%); width: auto; text-align: center;}
.homecap1 {font-size: 10vw;} .btn {display: table; margin: 20px auto 0 auto;}
.btn a {padding: 10px 16px 9px 16px; font-size: 18px;}
}

.btn {transition: 0.4s; border-radius: 6px; z-index: 20 !important;}
.btn a {display: table-cell; line-height: 1.4; text-decoration: none !important; background-color: #FDE001; transition: 0.4s; white-space: nowrap; border-radius: 6px; font-weight: 500;z-index: 20 !important;}

/*Slide Up Effect*/
@media (min-width: 531px) {
.slideUpBtn {background-color: transparent; position: relative; overflow: hidden;}
.slideUpBtn span {display: inline-block; transition: inherit; color: #000;}
.slideUpBtn:hover span {opacity: 0; transform: translateY(-100%)}
.slideUpBtn::before {position: absolute; content: ""; background-color: #FFF; height: 100%; left: 0; top: 0; transform: translateY(100%); transition: inherit; width: 100%; transition: transform 0.2s;}
.slideUpBtn::after {content: 'FREE Estimate'; align-items: center; display: flex; height: 105%; justify-content: center; left: 0; position: absolute; top: 0; transition: inherit; transform: translateY(100%); width: 100%;}
.slideUpBtn:hover::before {transform: translateY(0) scale(3); transition-delay: .025s;}
.slideUpBtn:hover::after {opacity: 1; color: #2951AE; transform: translateY(0);}
}

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

/*How Can We Help Box*/

.bgimgbox {position: absolute; text-align: center; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #FFF; padding: 15px 15px 12px 15px; border-radius: 8px; z-index: 2; width: 280px;}
.bgimgbox > span, .bgimgbox2 > span {display: block; grid-column: 1 / -1; width: 100%; margin: 0; white-space: nowrap; text-align: center; margin: auto; font-size: 18px; font-weight: 500; margin-bottom: 10px;}

.bgimgbox div, .bgimgbox2 div {text-align: center; width: 100%;}
.bgimgbox > div:first-of-type, .bgimgbox2 > div:first-of-type {grid-column: 1 / -1;}

.bgimgbox a, .bgimgbox2 a {display: grid; height: 60px; align-content: center; justify-content: center; padding: 0 8px 1px 8px; color: #FFF; border-radius: 5px; vertical-align: middle; transition: 0.2s; font-size: 18.5px; line-height: 1.2; white-space: nowrap; text-decoration: none; background-color: var(--blue1); }

.bgimgbox a:hover, .bgimgbox2 a:hover {background-color: var(--menuselect); background-color: var(--bluelite);}

@media (max-width: 950px) {
.bgimgbox {width: 220px; padding: 10px;} .bgimgbox > span {margin-bottom: 6px;}
.bgimgbox a {font-size: 17.5px;} .bgimgbox span span {display: block;}
}
@media (min-width: 551px) {
.bgimgbox {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5px;}
.bgimgbox div span {display: block;}
}
@media (max-width: 550px) {
.bgimgbox {width: 165px; padding: 6px 8px;}
.bgimgbox > span {margin-bottom: 8px;}
.bgimgbox a {display: block; height: 40px; margin: 3px 0;}
}
@media (max-width: 480px) {.bgimgbox {display: none;}}


/*How Can We Help Box #2*/

.bgimgbox2 {text-align: center; background-color: #DDD; padding: 25px 20px 30px 20px; z-index: 2;}
.bgimgbox2 > span {font-size: 21.5px; line-height: 1.35;}
@media (min-width: 481px) {.bgimgbox2 {display: none;}}
@media (max-width: 480px) {
.bgimgbox2 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5px;}
.bgimgbox2 a {font-size: 21px;}
}
@media (max-width: 480px) and (min-width: 431px) {.bgimgbox2 a {display: block; height: 55px; white-space: nowrap;}}
@media (max-width: 430px) {.bgimgbox2 a {height: 65px;}}
@media (max-width: 370px) {.bgimgbox2 span span {display: block;}}

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

/*Top Area*/

.toparea {margin: auto; text-align: center;}
.toparea h2 {margin: 0 !important; font-family: 'Instrument SemiCond', Arial, Helvetica, sans-serif; font-size: 3.3em; font-weight: 700; line-height: 1.15; word-spacing: 1.5px; color: var(--blue1);}

.toparea div {margin: auto;}
.toparea h3 {margin: 20px 0; font-family: 'Instrument SemiCond', Arial, Helvetica, sans-serif; font-weight: 600; font-size: 1.8em; line-height: 1.25; color: #000;}
.toparea div span {font-size: 1.25em; line-height: 1.55;}

@media (min-width: 621px) {.toparea {width: 85%; max-width: 700px; padding: 60px 20px 35px 20px;} .toparea div {width: 70%;}}
@media (max-width: 620px) {.toparea {padding: 50px 8vw 25px 8vw;} .toparea h2 {font-size: calc(7vw + 10px);}}
@media (min-width: 411px) {.toparea span {display: block;}}

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

/*Side by Side*/

/*#sslist {border: 1px solid bluegrey} #sslist ul {border: 1px solid cyan} #sslist li {border: 1px solid red}
#sideside .ssbodyarea {border: 1px solid green}*/

#sideside {margin: auto; padding: 50px 0; background-color: var(--charcoal);}
#sideside .ssbody1 {font: var(--body-font); color: #FFF;}
#sideside .ssbody2 {margin: 15px auto 30px auto; font-size: 20px; line-height: 1.4;}
#sideside .ssbody1 span {display: block; font-size: 1.6em; font-weight: 500;}
#sideside p {margin-bottom: 0;}
#sideside .sshead1 {margin-bottom: 20px; font-family: 'Instrument SemiCond', Arial, Helvetica, sans-serif; font-size: 2.5em; line-height: 1.15; font-weight: 600; color: var(--bluebright);}
#sideside .sshead2 {font-family: 'Instrument SemiCond', Arial, Helvetica, sans-serif; font-size: 1.9em; line-height: 1.2; font-weight: 600;}
#sideside .sstbl {padding: 25px 25px 10px 25px; text-align: center; background-color: #FFF; box-shadow: 0 2px 22px rgba(0, 0, 0, 0.22); border-radius: 10px;}

@media (min-width: 1301px) {#sideside section:first-child {margin-right: 40px;} #sideside section:last-child {margin-left: 40px;}}
@media (max-width: 1300px) and (min-width: 971px) {#sideside section:first-child {margin-right: 3vw;} #sideside section:last-child {margin-left: 3vw;}}
@media (min-width: 971px) {
#sideside .ssbodyarea {-webkit-display: grid; display: grid; grid-template-columns: 50% 50%; grid-auto-rows: 1fr; margin: auto; width: 85%; max-width: 1250px;}
}
@media (max-width: 970px) {#sideside .ssbodyarea {margin: 0 8%;} #sideside section:last-child {margin: 40px auto 0 auto;}}
@media (max-width: 970px) and (min-width: 611px) {#sideside .ssbody2 span {display: block;}}

/*items list*/

/*#sslist ul {outline: 1px solid red} #sslist > ul > li {outline: 1px solid blue}*/

#sslist {margin: 20px auto; text-align: left;}
#sslist ul {vertical-align: top; margin: 10px 0 0 0; padding: 0;}
#sslist > ul > li {position: relative; padding: 0 0 0 22px; font-size: 20px; font-weight: 500; line-height: 1.25; list-style: none; color: #000;}
#sslist > ul > li::before {content: ""; position: absolute; left: 2px; top: 0; width: 9px; height: 16px; border-right: 4px solid var(--blue1); border-bottom: 4px solid var(--blue1); transform: rotate(32deg); box-sizing: border-box;} /*checkbox*/
#sslist li ul li {margin: 8px 0 0 10px; list-style: disc; font-size: .93em; font-weight: 400; line-height: 1.35; color: #666;}

@media (min-width: 1231px) {
#sslist > ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 20px; margin: 0; padding: 0;}
#sslist > ul:first-child {padding-right: 10px;} #sslist ul:last-child {padding-left: 10px;}
}
@media (max-width: 1230px) {
#sslist > ul {display: block;}
#sslist > ul > li {display: block; margin-bottom: 20px;}
#sslist > ul > li > ul {margin: 8px 0 0; padding: 0;}
#sslist > ul > li > ul > li {display: inline; list-style: none;}
#sslist > ul > li > ul > li:not(:last-child)::after {content: ", ";}
#sslist li ul li {margin: 0;}
}
@media (max-width: 400px) {#sideside .ssbodyarea {margin: 0 25px;}}

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

/*Why Us*/

/*.wubodyarea {outline: 1px solid red} #whyus section:first-child {outline: 1px solid cyan}
#whyus section:last-child {outline: 1px solid magenta} #whyus div {outline: 1px solid blue}*/

#whyus {margin: auto; background-color: #EEE;}
#whyus .wubodyarea {-webkit-display: grid; display: grid; margin: auto; width: 85%; max-width: 1250px;}
#whyus div {font: var(--body-font);}
#whyus .heading {font-family: 'Instrument SemiCond', Arial, Helvetica, sans-serif; font-size: 1.9em; line-height: 1.2; font-weight: 600; color: var(--blue1);}
#whyus img {display: block; width: 600px; height: 350px; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 2px 22px rgba(0, 0, 0, 0.22); border-radius: 10px; /*object-position: 50% 50%;*/}
#whyus p {margin-bottom: 0;}

@media (min-width: 1301px) {
#whyus .wubodyarea {grid-template-columns: 60% 40%; grid-auto-rows: 1fr; padding: 65px 0;}
#whyus section:first-child {margin-right: 20px; padding: 0;} #whyus section:last-child {margin-left: 20px; height: 95%; align-self: center;}
}
@media (max-width: 1300px) {
#whyus .wubodyarea {padding: 50px 0;}
#whyus section:last-child {margin: 40px 0 20px 0;}
#whyus img {height: calc(80px + 45vw); max-height: 450px;}
}

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

/*Reviews*/

.reviews-section {padding: 60px 30px !important; background-color: var(--greenlite);}

.reviews-head {max-width: 800px; margin: 0 auto 20px auto; padding: 0 20px; text-align: center;}
.reviews-head .eyebrow {margin-bottom: 12px; font-size: 17px; letter-spacing: 4px; color: #666; font-weight: 500;}

.reviews-head .whatsay {margin: 0 0 16px 0; font-family: 'Instrument SemiCond', Arial, Helvetica, sans-serif; font-weight: 600; font-size: 40px; line-height: 1.2; color: var(--bluedark);}
@media (max-width: 900px) {.reviews-head .whatsay {font-size: 35px;}}
@media (max-width: 600px) {.reviews-head .whatsay {font-size: 31px;}}

.reviews-head p {margin: 0; font-size: 20px; line-height: 1.4; color: #555;}

.reviews-carousel {max-width: 1400px; margin: 0 auto; position: relative; z-index: 0;}

.reviews-window {position: relative; overflow: hidden; padding: 25px 70px 35px 70px; cursor: grab; touch-action: pan-y; z-index: 1;}
.reviews-window,.reviews-window * {user-select: none; -webkit-user-select: none;}
.reviews-window.is-dragging {cursor: grabbing;}
.reviews-window.is-dragging .reviews-track {transition: none;}

.reviews-track {display: flex; transition: transform .6s ease-in-out;}
.reviews-track.quick-slide {transition: transform .25s ease-out;}

.review-card {flex: 0 0 calc((100% - 40px) / 3); box-sizing: border-box; padding: 32px; background: #fff; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.10); margin-right: 20px;}
.review-card:last-child {margin-right: 0;}
.review-card span {display: block; margin: 0 0 8px 0; font-size: 22px; font-weight: 500; line-height: 1.2; color: #111;}

.stars {font-family: Arial, Helvetica, sans-serif; margin-bottom: 22px; font-size: 24px; letter-spacing: 3px; color: var(--bluebright); line-height: 1;}

.review-card p {margin: 0; font-size: 18px; line-height: 1.5;}

.review-arrow {position: absolute; top: 50%; width: 52px; height: 52px; border: 0; padding: 0; border-radius: 50%; transform: translateY(-50%); background: #fff; color: #111; box-shadow: 0 8px 22px rgba(0,0,0,.14); display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; font-size: 34px; line-height: 1; cursor: pointer; appearance: none; -webkit-appearance: none; z-index: 2; border: 2px solid #CCC;} /*outline doesn't work in old Safari*/
.review-arrow.is-hidden {visibility: hidden; opacity: 0; pointer-events: none;}
.review-arrow-left {left: 10px;}
.review-arrow-right {right: 10px;}
.review-arrow:hover {background: #f2f2f2;}

.review-dots {display: flex; justify-content: center; margin-top: 5px;}
.review-dots button {display: block; margin: 0 6px; width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; background: var(--bluedark); cursor: pointer; appearance: none; -webkit-appearance: none;}
.review-dots button.active {background: var(--bluebright);}

@media (max-width: 1270px) {.reviews-window {padding: 25px 60px 35px 60px;} .review-card {flex: 0 0 calc((100% - 20px) / 2);}}
@media (max-width: 830px) {.review-card {padding: 22px;}}
@media (max-width: 800px) {
.reviews-section {padding: 45px 15px;}
.reviews-window {padding: 25px 48px 35px 48px;}
.review-card {flex: 0 0 100%; margin-right: 20px; padding: 26px 22px;}
.review-arrow {width: 42px; height: 42px; font-size: 28px;}
.review-arrow-left {left: 8px;}
.review-arrow-right {right: 8px;}
}

@media (max-width: 400px) {
.review-card {height: 360px; overflow: hidden;}
.review-card p {max-height: 210px; overflow-y: scroll; overflow-x: hidden; background-attachment: local, scroll, scroll; scrollbar-width: auto; scrollbar-color: #999 #f2f2f2;padding-right: 10px;}
}

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