/*HOME PAGE*/

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

@media (max-width: 780px) and (min-width: 481px) {.bodyhead span {display: block;}}

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

/*Buttons*/

.btn {margin: 25px 0 0 0;}
.btn a {display: table; text-decoration: none !important; background-color: #326095; -webkit-transition: 0.25s; white-space: nowrap; border-radius: 18px; padding: 11px 17px 9px 17px; font-size: 16px; line-height: 1.4; color: #FFF;}
.btn a:hover {color: #FFF; background-color: #2A72C4;}

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

/*Big Pic*/

/*.homecap {border: 1px solid red} .homecap article {border: 1px solid cyan}
.homecap article:first-child {border: 1px solid yellow}
.homecap h1 {border: 1px solid green} .homecap div {border: 1px solid magenta}*/

#homepic, #homepic * {box-sizing: border-box;}

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #FFF;}
#homepic img:not(#homepic article img) {width: 500px; height: 300px; width: 100%; height: 80vw; max-height: 550px; object-fit: cover; object-position: 50% 50%; display: block; opacity: .3;}

.homecap article {display: table-cell; vertical-align: middle; text-align: left;}
.homecap aside {display: table;} .homecap aside a {display: inline-block;}
.homecap aside .phlink {color: #FFF !important; cursor: pointer;}

.homecap {position: absolute; /*display: table*/; left: 5%; right: 5%; text-align: left; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; margin: 0 auto; color: #326095; max-width: 1400px;}
.homecap div {font-size: 26px; font-weight: 500;}
.homecap div:nth-child(3) {font-size: 1.3em; text-transform: uppercase;}
.homecap h1 {font-weight: 600; font-size: 57px; line-height: 1.15; text-align: left; color: #826F52; padding-top: 4px; padding-bottom: 8px;}

.homecap article:last-child {border-radius: 50%; width: 400px; height: 400px; overflow: hidden; /*box-shadow: -10px 5px 0px #326095;*/ /*-webkit-filter: drop-shadow(-5px 5px 0 #326095) drop-shadow(2px 1px 0 #326095) drop-shadow(-1px -2px 0 #326095);*/}
.homecap article img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; /*border: 3px solid #326095;*/ border-radius: 50%; border-left: 10px solid #326095; border-right: 2px solid #326095; border-top: 2px solid #326095; border-bottom: 10px solid #326095;}

@media (min-width: 1341px) {
.homecap article:first-child {width: 65%;} .homecap article:last-child {width: 35%;} .homecap article:first-child {padding-right: 5%;}
}
@media (max-width: 1340px) {.homecap article:first-child {padding-right: 3%;}}
@media (max-width: 990px) {
#homepic img:not(#homepic article img) {max-height: 500px;}
.homecap h1 {font-size: 6vw;} .homecap article:last-child {width: 350px; height: 350px;}
}
@media (max-width: 880px) {
#homepic img:not(#homepic article img) {max-height: 450px;}
.homecap h1 {font-size: 6.7vw;} .homecap article:last-child {width: 300px; height: 300px;}
.homecap article:first-child {width: 60%;} .homecap article:last-child {width: 40%}
}
@media (min-width: 741px) {.homecap div:last-child {margin-top: 10px;}}
@media (max-width: 740px) {
#homepic article:last-child, #homepic article img {display: none;}
.homecap article:first-child, .homecap h1 {padding: 10px 0; text-align: center;}
#homepic img:not(#homepic article img) {max-height: 350px;} #homepic aside {margin: 30px auto 0 auto;}
}
@media (min-width: 651px) {.homecap h1 span {display: block;}}
@media (max-width: 650px) {#homepic img:not(#homepic article img) {height: 90vw; max-height: 450px;} .homecap h1 {font-size: calc(5.5vw + 20px);}}
@media (max-width: 510px) {.homecap div {font-size: 5.5vw;} #homepic aside {margin-top: 20px;}}
@media (min-width: 371px) {.homecap aside a:first-child {margin-right: 8px;}}
@media (max-width: 370px) {
#homepic img:not(#homepic article img) {height: 110vw;} .homecap h1 {font-size: 10.5vw;}
.homecap aside a {display: block;} .homecap aside a:first-child {margin-bottom: 5px;}
}

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

/*Top Area*/

/*#toparea section {border: 1px solid blue} #toparea .bodyarea {border: 1px solid red}*/

#toparea {margin: auto;} #toparea section {height: 100%}
#toparea .bodyarea {-webkit-display: flex; display: flex; padding: 50px 0; max-width: 1000px; justify-content: center; align-items: center;}
#toparea .bodyhead {text-align: left; margin-bottom: 10px;}

#toparea img {width: 600px; height: 300px; width: 100%; margin: auto; text-align: center; object-fit: cover; display: block; border-radius: 25px;} /*width or no width shows different results*/
#toparea section:first-child article {margin: auto; text-align: center; overflow: hidden; height: 300px;}

@media (min-width: 781px) {
#toparea section:first-child {width: 50%; margin-right: 20px;} #toparea section:last-child {width: 50%; margin-left: 20px;}
}
@media (max-width: 780px) {
#toparea section {width: 100%;} #toparea .bodyarea {-webkit-flex-direction: column; flex-direction: column;}
#toparea section:first-child {-webkit-order: 1; order: 1; margin-top: 20px;}
#toparea .bodyhead {text-align: center;}
#toparea .btn {margin: 25px auto 0 auto; display: table; text-align: center;}
}

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

/*Why Us*/

/*curve*/
#whyus {position: relative;} #whyus::before {top: 0px;} #whyus::after {bottom: 0px;}
#whyus::before, #whyus::after {content: ''; position: absolute; left: 0; width: 100%; z-index: -1; background-color: #9C8B7E;}

@media (min-width: 1006px) {
#whyus::before, #whyus::after {height: 150px;}
#whyus {/*border-top-left-radius: 50% 5%;*/ border-top-right-radius: 50% 20%; border-bottom-left-radius: 50% 20%; /*border-bottom-right-radius: 50% 5%;*/}
#whyus::before {border-top-right-radius: 50% 40%;} /*doesn't do anything: border-top-right-radius: 50% 40%;*/
#whyus::after {border-bottom-left-radius: 50% 40%;}  /*doesn't do anything: border-bottom-right-radius: 50% 0%;*/
}
@media (max-width: 1005px) {
#whyus::before, #whyus::after {height: 120px;}
#whyus {/*border-top-left-radius: 50% 3%;*/ border-top-right-radius: 50% 15%; border-bottom-left-radius: 50% 15%; /*border-bottom-right-radius: 50% 3%;*/}
#whyus::before {border-top-right-radius: 50% 60%;} /*doesn't do anything: border-top-right-radius: 50% 60%;*/
#whyus::after {border-bottom-left-radius: 50% 60%;}  /*doesn't do anything: border-bottom-right-radius: 50% 0%;*/
}
@media (max-width: 880px) {
#whyus::before, #whyus::after {height: 110px;}
#whyus {/*border-top-left-radius: 50% 3%;*/ border-top-right-radius: 50% 10%; border-bottom-left-radius: 50% 10%; /*border-bottom-right-radius: 50% 3%;*/}
#whyus::before {border-top-right-radius: 50% 60%;} /*doesn't do anything: border-top-right-radius: 50% 60%;*/
#whyus::after {border-bottom-left-radius: 50% 60%;}  /*doesn't do anything: border-bottom-right-radius: 50% 0%;*/
}
@media (max-width: 460px) {
#whyus::before, #whyus::after {height: 110px;}
#whyus {/*border-top-left-radius: 50% 3%;*/ border-top-right-radius: 50% 8%; border-bottom-left-radius: 50% 8%; /*border-bottom-right-radius: 50% 3%;*/}
#whyus::before {border-top-right-radius: 50% 50%;} /*doesn't do anything: border-top-right-radius: 50% 60%;*/
#whyus::after {border-bottom-left-radius: 50% 50%;}  /*doesn't do anything: border-bottom-right-radius: 50% 0%;*/
}
/*end curve*/

/*#whyus section {border: 1px solid blue} #whyus .bodyarea {border: 1px solid red}*/

#whyus {margin: auto; background-color: #DDD5CF; background: linear-gradient(45deg, #cdc3b7 7%,#ddd5cf 17%,#ffffff 34%,#cdc3b7 58%);}
#whyus section {height: 100%}
#whyus .bodyarea {-webkit-display: flex; display: flex; padding: 50px 0; max-width: 1000px; justify-content: center; align-items: center;}
#whyus div:not(.valueimg) {line-height: 1.5; /*height: 100%;*/}
#whyus .bodyhead {display: block; text-align: left;}
#whyus section:last-child img {width: 600px; height: 300px; width: 100%; margin: auto; text-align: center; object-fit: cover; display: block; border-radius: 25px;} /*width or no width shows different results*/
#whyus section:last-child article {margin: auto; text-align: center; overflow: hidden; height: 300px;}

@media (min-width: 1006px) {
#whyus section:first-child {width: 50%; margin-right: 20px;} #whyus section:last-child {width: 50%; margin-left: 20px;}
}
@media (max-width: 1005px) {
#whyus section {width: 100%;} #whyus .bodyarea {-webkit-flex-direction: column; flex-direction: column;}
#whyus section:last-child {-webkit-order: 1; order: 1; margin: 30px auto 20px auto;}
}

/*4 paragraphs*/

.whyuspara {margin-top: 20px;} .whyuspara span {display: block; font-size: 1.1em; font-weight: 600;} .whyuspara p {font-size: .9em;}

@media (min-width: 531px) {
#whyus .p1 {grid-area: a; margin-bottom: 25px;} #whyus .p2 {grid-area: b; margin-bottom: 25px;}
#whyus .p3 {grid-area: c;} #whyus .p4 {grid-area: d;}
.whyuspara {display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: "a b" "c d" ;  gap: 0 20px; grid-gap: 0 20px;}
.whyuspara span {padding-bottom: 3px;}
}
@media (max-width: 530px) {
.whyuspara span {margin-top: 20px;}
#whyus {background: linear-gradient(75deg, #cdc3b7 17%,#ddd5cf 21%,#ffffff 38%,#cdc3b7 68%);}
}

.whyuspara img {display: block; vertical-align: middle; margin: auto; width: 60px; height: 46px;}
/*.valueimg {vertical-align: middle; display: table-cell; width: 1%;}*/
.valueimg {float: left; vertical-align: top; text-align: left; margin: 5px 8px 0 0;}
.whyuspara span {white-space: nowrap;} .whyuspara p {display: table-cell;}

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

/*Blocks*/

/*#blocks {border: 1px solid red}*/

.blocksback {margin: 50px auto 30px auto !important;}
#blocks {display: table; margin: 20px auto 0 auto; line-height: 0; width: 100%; max-width: 800px; text-align: center;}
#blocks a {display: inline-block; width: 25%; text-decoration: none; color: #FFF !important;}
#blocks div {margin: 0 5px; padding: 15px; text-align: center; background-color: #9C8B7E; transition: .25s; border-radius: 0 50px; border-left: 3px solid #326095; border-bottom: 3px solid #326095;}
#blocks img {width: 80px; margin-bottom: 8px; transition: .2s; backface-visibility: hidden}
#blocks h3 {font-size: 1em; line-height: 1.3; font-weight: 500; color: #FFF; text-transform: uppercase;}
#blocks span {display: block; margin-top: 10px; font-size: .85em; line-height: 1.4;}

#blocks div:hover {background-color: #326095;} #blocks div:hover img {transform: scale(1.07);}

@media (max-width: 900px) and (min-width: 726px) {#blocks div {margin: 0 3px;} #blocks h3 {font-size: .95em;}}
@media (max-width: 725px) {#blocks a {width: 50%;} #blocks div {margin: 3px; padding: 15px 20px;}}
@media (max-width: 450px) {#blocks h3 {font-size: .95em;}}
@media (max-width: 430px) {#blocks a {display: block; width: auto;} #blocks div {margin: 5px 0;}}

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

/*Top Area - Bottom*/

.topbtm {position: relative; z-index: 1;}
.topbtm::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(images/toppic1flip.jpg); background-size: cover; background-position: center center; background-color: #326095; filter: grayscale(20%) brightness(40%) contrast(180%); opacity: .3; z-index: -1;}

.topbtm {padding-top: 40px; padding-bottom: 15px; background-color: #326095; color: #FFF;}
.topbtm .bodyhead {display: block; text-align: center !important; padding-bottom: 20px;}
.topbtm .bodyarea {padding-top: 10px !important;}
.topbtm article {margin-bottom: 10px !important;}
.topbtm .bodyhead, .topbtm a {color: #DEC087 !important;}

@media (max-width: 780px) {
.topbtm section:last-child {-webkit-order: 1; order: 1; margin-top: 20px;}
.topbtm, .topbtm .bodyhead {padding-bottom: 0;}
}