/*HOME PAGE*/

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

/*Buttons*/

.btn {margin: 25px 0 0 0;}
.btn a, .btn div {display: table; text-decoration: none !important; background-color: var(--main-tan); -webkit-transition: 0.25s; white-space: nowrap; border-radius: 18px; padding: 14px 17px; font-weight: 500; line-height: 1.4; color: #FFF !important;}
.btn a:hover, .btn div:hover {background-color: var(--blue);}

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

/*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: #101312;}
#homepic img {width: 500px; height: 300px; width: 100%; height: 80vw; max-height: 800px; 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%; -webkit-transform: translateY(-60%); -ms-transform: translateY(-60%); transform: translateY(-60%); z-index: 1; margin: 0 auto; color: #BAA693; max-width: 1400px;}
.homecap div {font-size: 42px; font-weight: 500;}
.homecap div:nth-child(3) {font-size: 1.7em; text-transform: uppercase;}
.homecap h1 {font-family: 'Playfair Display', "Times New Roman", Times, serif; font-weight: 400; font-size: 85px; line-height: 1.15; text-align: center; color: #FFF; padding-top: 4px; padding-bottom: 8px;}
.homecap h1 span {display: block;}
.homecap .btn a {font-size: 22px;}

@media (max-width: 1100px) {#homepic img {height: 800px;} .homecap h1 {font-size: 75px;}}
@media (max-width: 1015px) and (min-width: 661px) {#homepic img {height: 850px; max-height: 850px;} .homecap {max-width: 600px;}}
@media (max-width: 660px) {
.homecap {top: 75%; -webkit-transform: translateY(-75%); -ms-transform: translateY(-75%); transform: translateY(-75%);}
#homepic img {height: calc(80vw + 350px);} .homecap h1 {font-size: 65px;} .homecap div {font-size: 5.5vw;}
.homecap .btn a {padding: 11px 16px; font-size: 20px;}
}
@media (max-width: 505px) {.homecap h1 {font-size: 12vw;} .homecap div:first-child {font-size: 6.7vw;} .homecap div:nth-child(3) {font-size: 5vw;}}
@media (max-width: 440px) {
.homecap {top: 85%; -webkit-transform: translateY(-85%); -ms-transform: translateY(-85%); transform: translateY(-85%);}
#homepic img {height: calc(80vw + 360px);} .homecap div:nth-child(3) {font-size: 5.5vw;}
}
@media (max-width: 380px) {.homecap .btn a {padding: 9px 15px 10px 15px; font-size: 19px;}}
@media (min-width: 501px) {#homepic img {filter: brightness(70%);}}

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

/*Under Pic*/

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

#underpic {background-color: var(--main-tan); color: #FFF;}
#underpic article {display: table; width: 100%; text-align: center; padding: 35px 0; margin: auto; max-width: 1250px; font-size: 20px;}
#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: 'Playfair Display', "Times New Roman", Times, serif; font-size: 1.5em; margin-top: 15px; color: #FFF;} /*#D1DBCC*/
#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.5;}
#toparea p:not(.nextp) {display: block; margin: 0;} #toparea .nextp {margin-top: 20px;}
#toparea .btn {margin-top: 15px;}

/*.tapic, .text-column {flex: 1 1 300px;}  .tapic {flex: 2;} .tatxt {flex: 3;}*/

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

.tatxt {font-size: 1em;}
.tahead1 {font-family: 'Parisienne', cursive; font-size: 3.5em; line-height: 1.1; color: var(--blue);}
.tahead2 {font-family: 'Playfair Display', "Times New Roman", Times, serif; color: var(--main-tan); margin: 20px 0; font-size: 2.5em; line-height: 1.15;}
#toparea .btn {font-size: 21px;}

@media (max-width: 1230px) and (min-width: 1056px) {#toparea .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;} #toparea .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;}
}
@media (max-width: 1030px) {
#toparea {margin: 70px auto;} /*font-size: calc(1vw + 10px);}*/ .tatxt {padding-top: 50px;}
.tapic {max-height: 450px;} #toparea img {height: 60vw; object-position: 50% 20%;}
}
@media (max-width: 725px) and (min-width: 501px) {#toparea .tahead1 {font-size: 9.5vw;}}
@media (max-width: 500px) {
#toparea {margin: 60px auto;} .tatxt {padding-top: 40px;} #toparea .tahead1 {font-size: 3.2em;} #toparea .tahead2 {font-size: 9.8vw;}
}
@media (max-width: 340px) {#toparea .tahead1 {font-size: 17vw;}}

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

/*About Me*/

#aboutme {background-color: #FFF} #aboutme .bodyarea {padding: 50px 0;}
.aboutme1 {font-family: 'Parisienne', cursive; font-size: 3em; line-height: 1.1; color: var(--blue);}
.aboutme2 {font-family: 'Playfair Display', "Times New Roman", Times, serif; color: var(--main-tan); margin: 20px 0; font-size: 1.8em; line-height: 1.15;}
@media (max-width: 340px) {.aboutme1 {font-size: 2.8em;}}

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

/*Service boxes*/

#boxback {background-color: var(--beige);} #boxes {margin: 0;}
#boxes a {color: inherit; text-decoration: none; display: block; /*height: 100%; width: 100%;*/}
#boxes .box {background-color: #FFF; position: relative; border-radius: 15px;}
.box .blkhead {text-align: center; -webkit-transition: 0.15s;}
#boxes img {width: 383px; height: 223px; width: 100%; height: calc(10vw + 150px); max-height: 300px; display: block; object-fit: cover; -webkit-transition: 0.2s; border-radius: 15px 15px 0 0;}
#boxes img {width: 383px; height: 223px; width: 100%; height: calc(10vw + 150px); max-height: 300px; display: block; object-fit: cover; -webkit-transition: 0.2s; border-radius: 15px 15px 0 0;}
#boxes h2 {font-family: 'Playfair Display', "Times New Roman", Times, serif; font-size: 32px; line-height: 1.2; font-weight: 400 !important; color: var(--blue);}

.box .blkbody {text-align: center; font-size: 17px; line-height: 1.55;}
.box .btn div {margin: auto; -webkit-transition: 0.15s; padding: 10px 15px; font-size: 18px;}

.box a:hover .btn div {background-color: var(--blue);}
.box a:hover img {filter: brightness(120%);}

@media (max-width: 1930px) and (min-width: 916px) {#boxes h2 span {display: block;}}
@media (min-width: 1551px) {#boxes .box {width: 21%;}} @media (max-width: 1550px) {#boxes .box {width: 28%;}}
@media (min-width: 991px) {#boxes .box {display: table-cell; margin: 0 12px;}}
@media (max-width: 990px) {#boxes .box {width: 30%;} #boxes .box {display: table-cell; margin: 0 8px;}}
@media (min-width: 916px) {
#boxes {display: flex; align-self: center; flex-wrap: nowrap; justify-content: center;}
#boxes .box {display: table-cell;}
.box .blkbody {margin-bottom: 60px; padding: 20px 20px 35px 20px;}
.box .blkhead {margin: 40px auto 10px auto;}
.box .btn {position: absolute; margin: auto; bottom: 22px; left: 0; right: 0;}
}
@media (max-width: 915px) {
#boxes {display: table; text-align: center;}
#boxes .box {width: auto; display: inline-block; margin: 0; padding-bottom: 20px;}
#boxes .box:nth-child(2) {margin: 40px auto;}
.box .blkbody {padding: 20px 20px 25px 20px;}
#boxes img {height: calc(12vw + 160px); object-position: 50% 20%;} .box .blkhead {margin: 25px auto 0px auto; padding: 0 25px;}
.box .btn {margin: 0 auto;}
}
@media (min-width: 716px) {#boxes {padding: 80px 0;} #boxes .box {max-width: 600px;}}
@media (max-width: 715px) {#boxes {padding: 12vw 0;} #boxes .box {max-width: calc(80% + 15px);}}

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

/*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: 45%; -webkit-transform: translateY(-45%); -ms-transform: translateY(-45%); transform: translateY(-45%); z-index: 1; font-family: 'Playfair Display', "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(70%);}}

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