/*HOME PAGE*/

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

/*Buttons*/

.btn {margin: 25px 0 0 0;}
.btn a, .btn div {display: table; text-decoration: none !important; background-color: var(--color1); transition: 0.25s; white-space: nowrap; padding: 13px 17px 12px 17px; font-weight: 400; line-height: 1.4; color: #FFF !important;}
.btn a:hover, .btn div:hover {background-color: var(--color2);}

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

/*Big Pic*/

/*.homecap {border: 1px solid red} .homecap h1 {border: 1px solid green} .homecap div {border: 1px solid magenta}
.homecap aside {border: 1px solid yellow}*/

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

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #444;} /*sdf*/
#homepic img {width: 500px; height: 300px; width: 100%; height: 80vw; object-fit: cover; object-position: 50% 50%; display: block;}

.homecap aside {display: table; margin: 40px auto 0 auto; text-align: center;} .homecap aside a {display: inline-block;}
.homecap aside .phlink {color: #FFF !important; cursor: pointer;}

.homecap {position: absolute; left: 5%; right: 5%; text-align: center; top: 60%; transform: translateY(-60%); z-index: 1; margin: 0 auto; color: var(--color3); max-width: 1100px;}
.homecap div {font-size: 42px; line-height: 1.3; font-weight: 500;}
.homecap div:nth-child(3) {font-size: 1.7em; text-transform: uppercase; letter-spacing: .8px; word-spacing: 2px;}
.homecap h1 {font-family: 'NotoSerif', "Times New Roman", Times, serif; font-weight: 400; font-size: 85px; line-height: 1.15; letter-spacing: 0; text-align: center; color: #FFF; padding-top: 4px; padding-bottom: 8px;}
.homecap .btn a {font-size: 22px; border: 1px solid var(--color3);}

@media (max-width: 1150px) and (min-width: 661px) {
.homecap h1 {font-size: 7.3vw;} .homecap div:first-child {font-size: 4vw;} .homecap div:nth-child(3) {font-size: 3.5vw;}
}
@media (min-width: 661px) {#homepic img {max-height: 800px;}}
@media (max-width: 660px) {
#homepic img {height: calc(75vw + 350px);}
.homecap {top: 78%; transform: translateY(-78%);}
.homecap h1 {font-size: 12vw;} .homecap div:first-child {font-size: 5.5vw;} .homecap div:nth-child(3) {font-size: 4.8vw;}
.homecap .btn {margin-top: 25px;} .homecap .btn a {padding: 10px 16px 9px 16px; font-size: 20px;}
.homecap div:first-child span {display: block;}
}
/*@media (max-width: 440px) {
#homepic {padding-top: 266px;}
.homecap {top: 84%; transform: translateY(-84%);}
.homecap h1 {font-size: 12.5vw;} .homecap div:first-child {font-size: 6.3vw;} .homecap div:nth-child(3) {font-size: 5.3vw;}
#homepic img {height: calc(80vw + 190px);} .homecap div:nth-child(3) {font-size: 5.5vw;}
}*/
@media (max-width: 380px) {.homecap .btn a {padding: 10px 15px 8px 15px; font-size: 19px;}}

#homepic img {filter: brightness(50%);}
/*@media (min-width: 501px) {#homepic img {filter: brightness(50%);}}*/

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

/*Under Pic*/

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

#underpic {background-color: var(--color1); color: #FFF;}
#underpic article {display: table; width: 100%; text-align: center; padding: 35px 0; margin: auto; max-width: 1250px; font-size: 18px;}
#underpic div {display: table-cell; width: 33%;} #underpic span {line-height; 1.5;}
#underpic span:not(span span) {display: block; text-transform: uppercase; font-family: 'NotoSerif', "Times New Roman", Times, serif; font-size: 1.5em; margin-top: 15px; color: #FFF;}
#underpic p {font-size: .95em; line-height: 1.35; padding: 0 35px; margin-bottom: 0;}

@media (max-width: 1200px) and (min-width: 731px) {#underpic span span {display: block;}}
@media (max-width: 1160px) {
#underpic article {padding: 25px 0;} #underpic span 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 (max-width: 730px) {
#underpic article {padding: 35px 0 50px 0;}
#underpic span span {display: inline;} #underpic div {display: block; width: auto; padding: 0 20px;}
#underpic span:not(span span) {margin-top: 0;} #underpic div:not(div:first-child) img {margin-top: 30px;}
}
@media (max-width: 415px) {#underpic span span {display: block;}}

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

/*Top Area*/

#toparea {width: 85%; height: 100%; font-size: 18px; line-height: 1.65;}
#toparea .btn {margin-top: 25px;}

.tapic {overflow: hidden; /*border-radius: 5px; for border-radius*/}
#toparea img {width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%;}

.tatxt {font-size: 1em;}
.tahead1, .tahead2 {font-family: 'NotoSerif', "Times New Roman", Times, serif;}
.tahead1 {font-size: 2.7em; line-height: 1.1; letter-spacing: 0; color: var(--color1);}
.tahead2 {letter-spacing: 0; color: var(--color2); margin: 20px 0; font-size: 2.2em; line-height: 1.25;}
#toparea .btn {font-size: 21px;}

@media (max-width: 1230px) and (min-width: 1056px) {.tahead1 {font-size: 5vw;}}
@media (min-width: 1056px) {#toparea {margin: 100px auto; max-width: 1100px;} .tapic {width: 350px;} .tatxt {padding: 30px 0 30px 70px;}}
@media (max-width: 1055px) and (min-width: 1031px) {
#toparea {margin: 80px auto;} .tapic {width: 35%} .tatxt {padding-left: 50px;} .tahead1 {font-size: 5.5vw;}
}
@media (min-width: 1031px) {
#toparea {display: flex; flex-wrap: wrap;}
.tapic {display: flex; flex: 0 0 auto; /*align-items: stretch;*/}
.tatxt {/*display: flex; flex: 1; flex-direction: column; justify-content: center;*/ flex: 1; align-content: center;}
}
@media (max-width: 1030px) {
#toparea {margin: 70px auto;} .tatxt {padding-top: 50px;}
.tapic {max-height: 450px;} #toparea img {height: 60vw; object-position: 50% 30%;}
.tahead1 {font-size: 2.5em;} .tahead2 {font-size: 2em;}
}

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

/*About Us

#aboutus {background-color: #FFF} #aboutus .bodyarea {padding: 50px 0;}
.aboutus1 {text-align: center; margin-bottom: 30px; font-family: 'NotoSerif', "Times New Roman", Times, serif; font-size: 2.2em; line-height: 1.1; color: var(--color2); letter-spacing: 0;}
@media (max-width: 340px) {.aboutus1 {font-size: 2.8em;}}
*/

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

/*Service boxes*/

/*.blocks {border: 1px solid red} .blocks div {border: 1px solid blue}
.blocks a {border: 1px solid magenta} .blocks span {border: 1px solid green}*/

#blksback {background-color: #E8E8E8;}

.blocks {
padding: 65px 5%; display: grid; grid-template-columns: repeat(3, 1fr);
text-align: center; margin: auto; max-width: 1300px;
}
.blocks div {display: flex; flex-direction: column; align-items: center; background-color: #FFF; padding: 30px 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);}
.blocks img {width: 100px; height: 100px; margin-bottom: 30px;}
.blocks h3 {margin: 0 0 18px; font-size: 21px; line-height: 1.3; color: #050505; font-weight: 500;}
.blocks p {margin: 0 auto 35px auto; font-size: 16px; line-height: 1.75; color: #333;}

.blocks a {
margin-top: auto /*to keep btn at bottom of card*/;
display: inline-flex; align-items: center; justify-content: center;
max-width: 160px; height: 50px; padding: 2px 12% 0 12%;
font-size: 16px; font-weight: 400;
background-color: var(--color1); color: #FFF; text-decoration: none;
transition: .1s; white-space: nowrap;
}

.blocks a span {font-size: 22px; line-height: 1; margin-left: 13px;}
.blocks a:hover {background-color: var(--color2);}

@media (max-width: 1000px) and (min-width: 871px) {.blocks div {margin: 0 6%;}}
@media (max-width: 900px) and (min-width: 871px) {.blocks a {padding: 2px 6% 0 7%;}}
@media (min-width: 871px) {.blocks div {display: flex; margin: 0 8%;}}
@media (max-width: 870px) {
.blocks {grid-template-columns: 1fr; padding: 45px 5%; max-width: 650px;}
.blocks div {margin: 23px 8%;} .blocks p {margin-bottom: 28px;}
}
@media (max-width: 400px) {.blocks {padding: 30px 4%;}}


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

/*Home Pics Bottom

#homebtmpicsback {padding: 40px 0 5px 0; background-color: var(--color1);}
#homebtmpicsback span {display: block; font-family: 'NotoSerif', "Times New Roman", Times, serif; padding: 0 25px 30px 25px; font-weight: 500; font-size: 2em; line-height: 1.2; text-align: center; color: #FFF;}

.homebtmpics {text-align: center; display: grid; grid-gap: 20px; margin: 10px auto 0 auto; padding: 0 20px 50px 20px; width: 85%; max-width: 1500px;}
.homebtmpics img {width: 500px; height: 300px; width: 100%; height: 100%; display: inline-block; object-fit: cover; object-position: 50% 100%; transition: .2s;}

@media (min-width: 2101px) {.homebtmpics div {height: 280px;}}
@media (max-width: 2100px) and (min-width: 1401px) {.homebtmpics div {height: 15vw;}}
@media (min-width: 1401px) {.homebtmpics {grid-template-columns: repeat(4, 1fr);}}
@media (max-width: 1400px) and (min-width: 1001px) {
.homebtmpics {grid-template-columns: repeat(3, 1fr);} .homebtmpics div {height: 20vw;}
.homebtmpics div:last-child {display: none;}
}
@media (max-width: 1000px) and (min-width: 701px) {.homebtmpics {grid-template-columns: repeat(2, 1fr);} .homebtmpics div {height: 30vw;}}
@media (max-width: 700px) {
.homebtmpics {grid-template-columns: repeat(auto-fit, minmax(100%,1fr)); grid-gap: 20px; padding: 15px 0 0 0;}
.homebtmpics div {height: 55vw;} .homebtmpics img {max-width: 500px;}
}

.homebtmpics img:hover {filter: brightness(115%) saturate(115%);}
*/

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

/*Bottom Pic*/

#btmpic {position: relative; overflow: hidden; z-index: 0; background-color: #101312;}
#btmpic img {width: 500px; height: 300px; width: 100%; max-height: 400px; object-fit: cover; object-position: 50% 50%; display: block;}

#btmpic div {position: absolute; display: table-cell; left: 50px; right: 50px; margin: auto; text-align: center; top: 48%; transform: translateY(-48%); z-index: 1; font-family: 'NotoSerif', "Times New Roman", Times, serif; font-weight: 400; line-height: 1.3; color: #FFF; text-shadow: 1px 1px 2px #000; max-width: 850px; margin: auto;}

@media (min-width: 986px) {#btmpic img {height: 400px;} #btmpic div {font-size: 42px;}}
@media (max-width: 985px) {#btmpic img {height: 35vw;} #btmpic div {font-size: 4vw;}}
@media (max-width: 615px) {#btmpic div {left: 30px; right: 30px;}}
@media (max-width: 570px) {#btmpic img {height: 52vw;} #btmpic div {font-size: 5vw;}}
@media (max-width: 450px) {#btmpic img {height: 70vw;} #btmpic div {font-size: 6vw;}}
@media (max-width: 350px) {#btmpic img {height: 90vw;} #btmpic div {font-size: 6.5vw;}}
@media (min-width: 501px) {#btmpic img {filter: brightness(50%);}}

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