/*HOME PAGE*/

@media (min-width: 851px) {
@keyframes logoscale {0% {transform: scale(0);} 100% {transform: scale(1);}}
#logo img {animation: logoscale .8s; backface-visibility: hidden;}
} /*close min-width: 851px*/


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

/*Big Pic*/

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #586557;}
#homepic img {width: 500px; height: 300px; width: 100%; height: 50vw; max-height: 550px; object-fit: cover; object-position: 50% 90%; display: block;}

#homecapback {position: absolute; left: 0; right: 0; text-align: center; margin: auto; z-index: 1;}
@media (min-width: 1971px) {#homecapback {max-width: 1900px;}}
@media (max-width: 1970px) {#homecapback {max-width: 1500px;}}

.homecap {position: absolute; top: 0; bottom: auto; display: table-cell; align-self: center; padding: 25px 35px; color: #FFF;}

.homecap h1 {font-weight: 500; margin: 0 auto; font-size: 1em; line-height: 1.15; #FFF; /*text-shadow: 1px 1px 2px #000;*/ word-spacing: 3px;}
.homecap h1 span {display: block;}
.homecap h2 {display: inline-block; margin: 20px auto 15px auto; padding: 4px 12px; font-size: .65em; line-height: 1.3; font-weight: 500 !important; background-color: #FFF; color: var(--salmondark); border-radius: 8px;}
.homecap div:nth-of-type(1) {font-size: .45em; line-height: 1.4;}
.homecap div:nth-of-type(2) {margin-top: 5px; line-height: 1.1; text-transform: uppercase; letter-spacing: 1px; word-spacing: 8px;}

/*#homepic .btns {outline: 1px solid yellow} #homepic .btns span {outline: 1px solid magenta} #homepic .btns a {outline: 1px solid cyan}*/

#homepic .btns {display: block; margin: 25px 0 0 0} /*#homepic .btns span:not(span span) {display: inline-block;}*/

#homepic .btns a {text-align: center; display: table-cell; vertical-align: middle; padding: 0 15px; border-radius: 8px; line-height: 1.4; font-weight: 400; text-decoration: none; vertical-align: middle; transition: .15s; white-space: nowrap; word-spacing: 2px; border: 1px solid #FFF;}

#homepic .btns span a {background-color: var(--salmondark); color: #FFF !important;}
#homepic .btns span a:hover {background-color: var(--salmonlite); color: #111 !important;}

@media (min-width: 1051px) {
.homecap {font-size: 50px;} .homecap div:nth-of-type(2) {font-size: .5em;}
#homepic .btns a {width: 170px; height: 52px; font-size: .4em; margin-top: 30px;}
#homepic .btns span:not(span span):first-child {margin-right: 12px;} #homepic .btns span:not(span span):last-child {margin-left: 12px;}
}
@media (max-width: 1050px) {
.homecap {font-size: 4.5vw;} .homecap div:nth-of-type(2) {font-size: .7em;}
#homepic .btns a {width: 95px; height: 62px; font-size: 18px; margin-top: 25px;}
#homepic .btns span:not(span span):first-child {margin-right: 8px;} #homepic .btns span:not(span span):last-child {margin-left: 8px;}
#homepic .btns span span {display: block;}
}
@media (max-width: 910px) {.homecap {padding: 15px 25px 25px 25px;}}
@media (min-width: 831px) {
#homecapback {width: 85%; height: 100%; top: 50%; transform: translateY(-50%);}
.homecap {top: 50%; transform: translateY(-50%);background-color: rgba(0,0,0,.5); border: 18px solid rgba(112,125,111,.7); background-clip: padding-box; border-radius: 40px;}
}
@media (max-width: 830px) {
#homecapback {top: 0; bottom: 0; align-self: center;}
.homecap {display: grid; top: 50%; transform: translateY(-50%); width: 100%; box-sizing: border-box; font-size: 6.5vw;}
.homecap h2 {margin: 20px auto; font-size: .7em;}
.homecap div:nth-of-type(1) {font-size: .52em;}
.homecap div:nth-of-type(2) {font-size: .7em;}
#homepic img {filter: brightness(55%);}
}
@media (max-width: 830px) and (min-width: 531px) {#homepic img {height: 62vw; min-height: 400px;}}
@media (max-width: 670px) {#homepic .btns a {margin-top: 20px;}}

@media (max-width: 670px) and (min-width: 531px) {
.homecap {font-size: 45px;} .homecap div:nth-of-type(2) {font-size: 30px;} #homepic .btns a {margin-top: 20px;}
}
@media (max-width: 530px) {
.homecap {font-size: 8.7vw; padding: 15px 0;}
#homepic img {height: calc(90px + 70vw); max-height: 400px;}
}
@media (max-width: 420px) {.homecap h2 {font-size: .75em;} .homecap div:nth-of-type(1) {display: none;} #homepic img {height: calc(90px + 60vw);}}
@media (max-width: 340px) {
#homepic img {max-height: 270px;}
#homepic .btns {display: none;}
.homecap h2 {font-size: .9em; /*background-color: var(--salmondark); color: #FFF; border: 1px solid #FFF;*/}
.homecap h2 span {display: block;} .homecap div:nth-of-type(2) {font-size: 22px;}
}


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

/*Under Pic*/

/*#underpic article {border: 1px solid red} #underpic div {border: 1px solid green}
#underpic span {border: 1px solid magenta} #underpic p {border: 1px solid #FFF;}*/

#underpic {background-color: var(--sagedark); color: #FFF;}
#underpic article {width: 100%; text-align: center; padding: 35px 0; margin: auto; max-width: 1250px; font-size: 18px;}

#underpic div:last-child {padding-right: 10px;} /*because last div heading is longer*/
#underpic span:not(span span) {display: block; font-family: 'TTInter', Arial, Helvetica, sans-serif; font-size: 1.4em; font-weight: 600; margin-top: 15px; color: var(--salmonlite);}
#underpic span span {display: block;}
#underpic img {width: 51px; height: 51px;}
#underpic p {font-size: .95em; line-height: 1.35; padding: 0 35px; margin-bottom: 0;}

@media (max-width: 1160px) {
#underpic article {padding: 25px 0;} #underpic span {display: block; line-height: 1.2} #underpic p {padding: 0 25px;}
}
@media (max-width: 850px) {#underpic span:not(span span) {font-size: 1.35em;} #underpic p {font-size: .85em; padding: 0 20px;}}
@media (min-width: 731px) {#underpic article {display: table;} #underpic div {display: table-cell; width: 33%;}}
@media (max-width: 730px) {
#underpic article {display: table; margin: auto; text-align: center; width: 95%;}
#underpic div {display: table-cell; width: calc(10vw + 100px);}
#underpic span:not(span span) {font-size: 1.2em;}
#underpic p {display: none;}
}
@media (min-width: 601px) {#underpic span {text-transform: uppercase;}}
@media (max-width: 650px) {#underpic article {width: 100%;} #underpic span:not(span span) {font-weight: 500;}}
@media (max-width: 510px) {
#underpic article {padding: 20px 0; font-size: 16px;}
#underpic span:not(span span) {margin-top: 8px;}}

@media (max-width: 420px) {#underpic article {padding: 15px 0; font-size: 15px;}}
@media (max-width: 400px) {
#underpic div {display: table-cell; width: 30%;}
#underpic span:not(span span) {display: grid; width: 95px; justify-items: center; justify-self: center;}
}
@media (max-width: 240px) {#underpic {display: none;}}

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


/*Why Us*/

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

#whyus {margin: auto; background-color: var(--sagelite);}
#whyus .bodyarea {-webkit-display: grid; display: grid;}
#whyus .heading {margin-top: 0;}
#whyus .heading2 {color: var(--salmon);}
#whyus img {display: block; width: 600px; height: 350px; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; object-position: 70% 50%;}
#whyus p {margin-bottom: 0;}

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

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

/*Benefits*/

#benefits {margin: 60px auto 20px auto; text-align: center; font-size: 20px; font-weight: 400; color: #FFF;}
#benefits .bodyarea {padding: 30px 0 60px 0;}
#benefits * {box-sizing: border-box;}
#benefits .heading {margin: 0 auto 20px auto; width: 85%;}

.benefits {background: var(--sagedark); color: #FFF; font-size: .85em; line-height: 1.5; border-radius: 20px; text-align: left;}
.benefits span {display: block; width: 100%; margin: 0 0 20px 0; padding-bottom: 15px; font-size: 1.5em; line-height: 1.25; font-weight: 500; border-bottom: 1px solid #999; color: var(--salmonlite);}

@media (min-width: 1136px) {.benefits {flex: 1 1 30%; margin: 8px; padding: 20px 25px 25px 25px;}} /*flex: 1 1 30% makes boxes extend 100%, 0 0 30% does not*/
@media (max-width: 1135px) {.benefits {flex: 1 1 45%; margin: 5px; padding: 15px 20px 20px 20px;}}
@media (min-width: 741px) {#benefits .bodyarea {display: flex; flex-wrap: wrap; justify-content: center;}}
@media (max-width: 740px) {.benefits {margin: 10px auto;}}

/*don't use calc, like flex: 0 0 calc(33.33% - calc(15px * 2) */

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

/*Reviews*/

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

.reviews-head {max-width: 800px; margin: 0 auto 20px auto; padding: 0 20px; text-align: center; color: var(--sage);}
.reviews-head .eyebrow {margin-bottom: 8px; font-size: 14px; letter-spacing: 4px; font-weight: 600;}

.reviews-head .whatsay {margin: 0 0 12px 0; font-size: 40px; line-height: 1.2; font-weight: 500;}
@media (max-width: 900px) {.reviews-head .whatsay {font-size: 35px;}}
@media (max-width: 600px) {.reviews-head .whatsay {font-size: 30px;}}

.reviews-head p {margin: 0; font-size: 18px; line-height: 1.5; color: #444;}

.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;}

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

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

.review-arrow {position: absolute; top: 50%; width: 52px; height: 52px; border: 0; padding: 0; border-radius: 50%; transform: translateY(-50%); background: #fff; color: var(--salmondark); 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;}
.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(--salmon); cursor: pointer; appearance: none; -webkit-appearance: none;}
.review-dots button.active {background: var(--salmonlite);}

@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: 480px) {
.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: var(--sage) #f2f2f2; padding-right: 10px;}
}

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

/*Photos at bottom*/

#photoalbum {display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;}
#photoalbum div {overflow: hidden; max-height: 300px; /*aspect-ratio: 4 / 3;*/}
#photoalbum img {display: block; width: 100%; height: 100%; object-fit: cover;}

@media (max-width: 1900px) and (min-width: 1641px) {
#photoalbum {grid-template-columns: repeat(6, 1fr);}
/*#photoalbum div:last-child {display: none;}*/
}
@media (max-width: 1640px) and (min-width: 1201px) {
#photoalbum {grid-template-columns: repeat(6, 1fr);}
/*#photoalbum div:nth-last-of-type(-n+2) {display: none;}*/
}
@media (max-width: 1200px) and (min-width: 601px) {#photoalbum {grid-template-columns: repeat(3, 1fr);}}
@media (max-width: 600px) {#photoalbum {grid-template-columns: repeat(2, 1fr);}}

/*@media (max-width: 140px) and (min-width: 131px) {
#photoalbum {grid-template-columns: repeat(3, 1fr);}
#photoalbum div:nth-last-of-type(-n+2) {display: none;}
}
@media (max-width: 130px) {
#photoalbum {grid-template-columns: repeat(2, 1fr);}
}*/