:root {
    --brown: #594a1d;
    --yellow: #c1b349;
    --headerheight: 100px;
    --footerheight: 270px;
    --footerheightminus: -270px;
    --imageopacity: 0.7;
    --transition: all .3s;
}

html, body {margin: 0; padding: 0; height: 100%; font-family: 'Lato';}

#wrap {min-height: 100%; display: flex; flex-direction: column;}

#main {overflow:auto; /*padding-top: var(--headerheight);*/ flex: 1; overflow: hidden;}
.main-padding-top {padding-top: var(--headerheight);}

#header, #header2 {height: var(--headerheight); background-color: var(--brown); position: fixed; left: 0; right: 0; top: 0; box-shadow: 10px 30px 50px -40px #000; z-index: 2;}
.header-inline {padding-left: 3%; padding-right: 3%; height: 100%;}

a {text-decoration: none;}
img {max-width: 100%;}
.clear {clear: both;}
.inline-container {padding-left: 10%; padding-right: 10%;}
section {position: relative;}
.main-container {padding-top: 100px;}
.arrow-container {display: inline-block; position: relative; margin-left: 10px; width: 50px; height: 11px; overflow-x: hidden;}
.arrow-container img {position: absolute; top: 0; right: 0;}
.linkwitharrow:hover .arrow-container img {animation-name: arrow; animation-duration: 1s;}
@keyframes arrow {
    from {right: 100%;}
    to {right: 0;}
}

.navbar-container {display: flex; width: 100%; align-items: center; justify-content: space-around; height: 100%;}
.navbar-item {position: relative;}
.navbar-item a {color: #FFF; font-size: 17px;}
.navbar-item h1 {margin-bottom: 0;}
.navbar-item-underline {position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #FFF; transition: var(--transition);}
.navbar-item:hover .navbar-item-underline {width: 100%;}
#navbar-item-appointment a {text-decoration: underline;}
.btn-burger-icon {position: absolute; top: 50%; right: 5%; transform: translateY(-50%); width: 30px; height: 23px; background: url('../img/burger-icon.png') no-repeat 0 0; cursor: pointer; display: none;}

#section-slide, .slick-list, .slick-track {height: 100vh;}
.slick-slider.slide-container {margin-bottom: 0; height: 100vh;}
.slide-item {background-repeat: no-repeat; background-size: cover;}
.slide-item img {visibility: hidden; width: 100%;}
.slide-container .slick-dots {bottom: 30px; z-index: 0;}
.slide-container .slick-dots li {width: 10px; height: 10px; background: #FFF; border: 1px solid #FFF; border-radius: 50%;}
.slide-container li.slick-active {background: none !important;}
.slide-container .slick-dots li button {display: none;}

#section-about {padding-top: 80px; padding-bottom: 60px; background: url('../img/about-bg.webp') no-repeat left bottom;}
.about-line-decor {width: 40%; height: 11px; background-color: var(--yellow); position: absolute; top: 0; left: 0;}
.about-left {float: left; width: 45%; padding-right: 2%;}
.about-right {float: left; width: 55%; padding-left: 3%;}
.about-title {font-size: 66px; line-height: 1.0em;}
.about-desc {font-size: 14px; margin-bottom: 50px;}
.about-image {margin-bottom: 50px; display: flex; align-items: end;}
/* .about-image-left {float: left; width: 40%;} */
.about-image-right {padding-left: 2%;}
.about-image img {vertical-align: baseline;}
.about-image-desc {font-size: 13px; color: #969696; line-height: 1.0em;}
.about-learn-more {font-size: 20px; font-weight: bold; cursor: pointer; display: inline-block;}
.about-learn-more a {color: #000;}
.about-more {display: none;}
.about-more.active {display: block;}

#section-about2 {background-color: var(--yellow); background-image: url('../img/about-bg2.jpg'); background-repeat: no-repeat; background-position: top right; background-size: 50% 100%; padding-top: 60px; padding-bottom: 60px; box-shadow: 10px 30px 50px -40px #000;}
.about-title2 {font-size: 43px; line-height: 1em; width: 47%;}

#section-ourservice {padding-top: 80px; padding-bottom: 70px;}
.ourservice-title {font-size: 43px; margin-bottom: 50px;}
.service-item {float: left; width: 50%; transition: var(--transition); cursor: pointer;}
.service-item-bg {transition: var(--transition);}
.service-item-inner {border-top: 4px solid #d9d9d9; transition: var(--transition);}
.service-item-title {font-weight: bold; font-size: 24px; color: #5d5028; padding-top: 40px; padding-bottom: 40px; padding-left: 5%;}
.service-item:hover .service-item-inner, .service-item.active .service-item-inner {background-color: #5d5028;}
.service-item:hover .service-item-title, .service-item.active .service-item-title {color: #FFF;}
.service-item.right .service-item-inner {padding-left: 5%; margin-right: 20%;}
.service-item.left .service-item-inner {margin-left: 20%;}
.service-item-detail-container {display: none; margin-top: 40px; padding-bottom: 40px;}
.service-item.left .service-item-detail-container {margin-left: 20%;}
.service-item.right .service-item-detail-container {margin-right: 20%;}
.service-item-image {margin-bottom: 20px;}
.service-item-learn-more {font-size: 15px; text-decoration: underline; display: inline-block; margin-bottom: 15px;}
.service-item-learn-more a {color: #6f6f6f;}
/* .service-row {cursor: pointer; transition: var(--transition); margin-bottom: 4px;}
.service-row-inner {position: relative; padding-top: 40px; padding-bottom: 40px; margin-left: 10%; margin-right: 10%;}
.service-row-border-top {position: absolute; height: 4px; background-color: #d9d9d9; left: 0; top: -4px; right: 0;}
.service-item {font-weight: bold; font-size: 24px; color: #5d5028; float: left; width: 50%; transition: var(--transition);}
.service-row:hover, .service-row.active {background-color: #5d5028;}
.service-row:hover .service-item, .service-row.active .service-item {color: #FFF;}
.service-item:nth-child(odd) {padding-left: 2%;}
.service-item:nth-child(even) {padding-right: 2%;}
.service-row-detail{padding-bottom: 40px; display: none;}
.service-detail-col {float: left; width: 50%;}
.service-detail-col:nth-child(odd) {padding-right: 2%;}
.service-detail-col:nth-child(even) {padding-left: 2%;}
.service-item-short-desc {font-size: 12px; color: #6f6f6f; margin-bottom: 20px;}
.service-item-learn-more {font-size: 11px; text-decoration: underline; display: inline-block; margin-bottom: 15px;}
.service-item-learn-more a {color: #6f6f6f;}
.service-container-mobile {display: none;}
.service-container-mobile .service-item {width: 100%;}
.service-container-mobile .service-row-inner {margin-left: 5%; margin-right: 5%;}
.service-container-mobile .service-detail-col {width: 100%; float: none; padding-right: 0;} */

#section-ourservice2 {display: flex; height: calc(100vh - 100px)}
.ourservice2-left {width: 40%; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.ourservice2-left img {width: 100%; visibility: hidden;}
.ourservice2-right {width: 60%; display: flex; flex-direction: column;}
.ourservice2-top {background-color: #f1f1f1; position: relative;  height: 60%;}
.ourservice2-bottom {background: url('../img/ourservice2-bg.jpg') no-repeat 0 0; background-size: cover; background-color: var(--yellow); flex: 1; position:relative;}
.ourservice2-caption {font-size: 41px; font-weight: 500; line-height: 1.2em; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%)}
.our-portfolio-link {font-size: 23px; font-weight: 500; position: absolute; top: 50%; transform: translateY(-100%);}
.our-portfolio-link a {color: #000;}

#section-appointment {background: url('../img/appointment-bg.webp') no-repeat top right; padding-top: 70px; padding-bottom: 50px; background-size: cover;}
.appointment-title {font-size: 60px; margin-bottom: 40px;}
.appointment-line {height: 72px; width: 100%; background: url('../img/appointment-line2.png') no-repeat 0 0; background-size: contain; margin-bottom: 100px;}
.appointment-desc {font-size: 20px; margin-bottom: 45px; width: 50%;}
.appointment-form-caption {font-size: 20px; font-weight: 900; display: inline-block; cursor: pointer;}

#section-form-appointment {padding-top: 0; padding-bottom: 0; display: none;}
#section-form-appointment .inline-container {padding-top: 35px; padding-bottom: 35px;}
/* .appointment-form-left {float: left; width: 50%; border-right: 2px solid #e6e6e6;}
.appointment-form-right {float: left; width: 50%;} */
.appointment-row {display: flex;}
.appointment-col {width: 25%; padding-right: 3%; padding-left: 3%;}
.appointment-col.border-right {border-right: 2px solid #e6e6e6;}
.control-label {font-weight: 500; font-size: 14px; color: #aaa; font-family: 'Lato';}
.form-group {margin-bottom: 20px;}
.btn-book {background-color: var(--brown); color: #FFF; font-family: 'Lato'; font-weight: 500; font-size: 19px; border: 1px solid var(--brown); border-radius: 30px; width: 100%; padding-top: 10px; padding-bottom: 10px; transition: var(--transition);}
.btn-book:hover {background-color: #FFF; color: var(--brown);}
.btn-book-mobile {display: none;}
#section-form-appointment input[type='text'], #section-form-appointment input[type='number'] {border: 0; box-shadow: none; font-size: 19px; font-family: 'Lato'; font-weight: 500; padding-left: 0; padding-right: 0;}
.chosen-service-container {position: relative; cursor: pointer; margin-bottom: 27px;}
.chosen-service {font-size: 19px; font-family: 'Lato'; font-weight: 500;}
.field-appointmentform-servicetype {margin-bottom: 7px; position: relative;}
.service-dropdown-caret {position: absolute; width: 22px; height: 14px; right: 0; top: 7px; background: url('../img/caret-down.png') no-repeat 0 0;}
.service-dropdown-container {position: absolute; width: 100%; bottom: 0; left: 0; border: 1px solid var(--brown); background: #FFF; z-index: 1; display: none;}
.service-dropdown-item {padding: 5px 10px; border-bottom: 1px solid var(--brown); cursor: pointer; transition: var(--transition);}
.service-dropdown-item:hover {background: var(--brown); color: #FFF;}
#application_form .form-group {margin-bottom: 0;}

/* SERVICE PAGE */
/*
.service-detail {display: flex;}
.service-left {width: 30%; background-position: center center; background-size: cover;}
.service-left img {width: 100%; visibility: hidden;}
.service-right {width: 70%; margin-bottom: 80px;}
.service-right.full {width: 100%;}
.service-title {font-size: 45px; padding-top: 50px; padding-bottom: 30px; line-height: 1em;}
.service-main-title-label {overflow: hidden; padding-right: 10px;}
.service-line {height: 40px; width: 100%; background: url('../img/service-line.png') no-repeat 0 0; background-size: 100% 100%; margin-bottom: 10px;}
.service-desc {font-size: 14px; margin-bottom: 40px;}
.service-page-title {font-size: 16px;}
.indepth-item {margin-bottom: 10px;}
.indepth-item-title {padding-left: 5%; font-size: 24px; color: #000;}
.subservice-container {margin-bottom: 80px;}
.subservice-item {display: flex;}
.subservice-item-title {font-size: 28px; margin-bottom: 25px; font-weight: bold;}
.subservice-item-desc {font-size: 14px; margin-bottom: 40px;}
.subservice-item-no-banner {margin-bottom: 40px; width: 50%;}
.service-choice-container {float: right; width: 180px; position: relative;}
.service-chosen-box {font-size: 16px; border: 1px solid var(--yellow); background: #EFEFEF; line-height: 1.2em; cursor: pointer; padding: 10px 40px 10px 20px; position: relative;}
.service-chosen-box .service-dropdown-caret {top: 50% !important; transform: translateY(-50%) !important; right: 5px !important;}
.service-choice-item-container {display: none; position: absolute; z-index: 1; width: 100%;}
.service-choice-item-container a {color: #000; transition: var(--transition);}
.service-choice-item-container a:hover {color: var(--yellow)}
.service-choice-item {font-size: 14px; line-height: 1.2em; border: 1px solid var(--yellow); background: #EFEFEF; padding: 10px 20px;}
*/

.service-detail {display: flex;}
.service-left {width: 30%; background-position: center center; background-size: cover;}
.service-left img {width: 100%; visibility: hidden;}
.service-right {width: 70%; margin-bottom: 80px;}
.service-right.full {width: 100%;}
.service-title {font-size: 45px; padding-top: 50px; padding-bottom: 30px; line-height: 1em;}
.service-main-title {position: relative;}
.service-main-title-label {padding-right: 60px;}
.service-line {height: 40px; width: 100%; background: url('../img/service-line.png') no-repeat 0 0; background-size: 100% 100%; margin-bottom: 10px;}
.service-desc {font-size: 14px; margin-bottom: 40px;}
.service-page-title {font-size: 16px;}
.indepth-item {margin-bottom: 10px;}
.indepth-item-title {padding-left: 5%; font-size: 24px; color: #000;}
.subservice-container {margin-bottom: 80px;}
.subservice-item {display: flex;}
.subservice-item-title {font-size: 28px; margin-bottom: 25px; font-weight: bold;}
.subservice-item-desc {font-size: 14px; margin-bottom: 40px;}
.subservice-item-no-banner {margin-bottom: 40px; width: 50%;}
.btn-other-service {cursor: pointer; width: 50px; height: 40px; background: url('../img/caret-down.png') no-repeat center center; background-color: #EFEFEF; border: 1px solid var(--yellow); position: absolute; top: 0; right: 0;}
.service-choice-item-container {display: none; position: absolute; z-index: 1; width: 50%; right: 0; top: 40px;}
.service-choice-item-container a {color: #000; transition: var(--transition);}
.service-choice-item-container a:hover {color: var(--yellow)}
.service-choice-item {font-size: 14px; line-height: 1.2em; border: 1px solid var(--yellow); background: #EFEFEF; padding: 10px 20px; text-align: center;}

/* PORTFOLIO PAGE */
#portfolio-list {padding-top: 70px;}
.portfolio-title-container {display: flex; align-items: center; border-bottom: 3px solid #e8e7e6; padding-bottom: 30px; margin-bottom: 40px;}
.portfolio-title {font-size: 43px; white-space: nowrap;}
.portfolio-introduction {font-size: 15px; padding-left: 5%; padding-right: 10%;}
.project-item {width: 25%; float: left; padding-left: 2%; padding-right: 2%; margin-bottom: 30px;}
.project-clear2, .project-clear3 {display: none;}
.project-image {margin-bottom: 20px; /*cursor: pointer;*/ position: relative; height: 150px; background-size: cover; background-position: center center; background-repeat: no-repeat;}
/* .project-image:before {content: ""; display: block; padding-top: 100%;} */
/* .project-image-inner {position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden;} */
.project-image img {visibility: hidden; max-width: 100%; height: auto;}
.project-name {font-weight: 900; font-size: 13px; margin-bottom: 10px; text-transform: uppercase;}
.project-short-desc {font-size: 11px;}
.project-black-area {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 99; display: none;}
.project-images-slide {width: 70%; margin: auto; margin-top: 2%; height: 65%; margin-bottom: 2%;}
.project-images-slide .slick-slide {text-align: center; position: relative;}
.project-images-slide .slick-slide img {display: inline-block; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.project-images-slide .slick-list {height: 100%;}
.project-images-slide .slick-track {height: 100%;}
.project-images-carousel {height: 29%;}
.project-images-carousel .slick-slide {text-align: center; padding: 2%; position: relative;}
.project-images-carousel .slick-list {height: 100%;}
.project-images-carousel .slick-track {height: 100%;}
.project-images-carousel .slick-slide img {display: inline-block; max-height: 90%; max-width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.project-close-button {cursor: pointer; width: 30px; height: 30px; background: url('../img/button-close.png') no-repeat 0 0; background-size: contain; position: absolute; top: 10px; right: 10px;}
.loading-portfolio {display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.project-category-item {margin-bottom: 40px;}
.project-category-name {font-weight: bold; font-size: 24px; color: #5d5028; margin-bottom: 30px;}

/* CONFIRMATION PAGE */
#confirmation-section {padding-bottom: 100px;}
.confirmation-title {color: #000; font-size: 52px; font-weight: bold; padding-top: 55px; margin-bottom: 20px;}
.confirmation-line {height: 40px; width: 100%; background: url('../img/service-line.png') no-repeat 0 0; background-size: 100% 100%; margin-bottom: 10px;}
.confirmation-container {margin-bottom: 100px;}
.confirmation-company {font-size: 29px; margin-bottom: 20px;}
.confirmation-label {font-size: 16px; color: #888; float: left; width: 30%;}
.confirmation-value {font-size: 16px; color: #000; float: left; width: 70%;}
.confirmation-row {margin-bottom: 15px;}
.confirmation-back {font-size: 18px; color: #5d5028; border-bottom: 3px solid #e8e7e6; padding-bottom: 5px; margin-bottom: 30px;}
.confirmation-back a {color: #5d5028; font-weight: bold; text-decoration: underline;}
.confirmation-button-container {margin-bottom: 80px;}
.btn-back {text-align: center; display: inline-block; background-color: #FFF; color: var(--brown); font-family: 'Lato'; font-weight: 500; font-size: 19px; border: 1px solid var(--brown); border-radius: 30px; width: 150px; padding-top: 10px; padding-bottom: 10px; transition: var(--transition);}
.btn-back:hover {background-color: var(--brown); color: #FFF;}
.btn-confirm {text-align: center; display: inline-block; background-color: var(--brown); color: #FFF; font-family: 'Lato'; font-weight: 500; font-size: 19px; border: 1px solid var(--brown); border-radius: 30px; padding: 10px 30px 10px 30px; transition: var(--transition);}
.btn-confirm:hover {background-color: #FFF; color: var(--brown);}

/* THANKYOU PAGE */
#section-thank-you {text-align: center;}
.thank-you {font-size: 101px; margin-bottom: 40px; padding-top: 80px;}
.thank-you-desc {font-size: 23px; margin-bottom: 60px; color: var(--brown)}
.thank-you-trouble {font-size: 23px; margin-bottom: 40px; color: var(--brown)}
.thank-you-button-container {margin-bottom: 80px;}
.thank-you-button-container a {display: inline-block; background-color: var(--brown); color: #FFF; font-family: 'Lato'; font-weight: 500; font-size: 19px; border: 1px solid var(--brown); border-radius: 30px; width: 300px; padding-top: 10px; padding-bottom: 10px; transition: var(--transition);}
.thank-you-button-container a:hover {background-color: #FFF; color: var(--brown);}

/* CAREER PAGE */
#section-career {background-color: #f3f3f3; display: flex;}
.career-intro-left {width: 33%; padding-left: 10%; position: relative; padding-right: 2%; padding-top: 20px;}
.career-caption {font-size: 43px; font-weight: 500; line-height: 1.2em;}
.career-intro-middle {width: 33%; background: url('../img/career.jpg') no-repeat 0 0; background-size: cover;}
.career-intro-middle img {visibility: hidden; width: 100%;}
.career-intro-right {width: 33%; padding-right: 10%; padding-left: 2%; padding-top: 20px;}
.career-subtitle {font-size: 20px; font-weight: 500;}
.career-title {font-size: 25px; font-weight: 500; margin-bottom: 20px;}
.career-desc {font-size: 15px;}
.submit-application-label {font-size: 15px; position: absolute; bottom: 40px; left: 30%;}
#section-application {padding-top: 30px;}
.application-col {float: left; width: 33%; padding-right: 3%;}
.application-col .control-label {color: #000; font-weight: 500; font-size: 14px;}
.application-col input[type='text'], .application-col input[type='number'] {font-family: 'Lato'; font-size: 15px;}
.btn-submit {margin-top: 20px; background-color: var(--yellow); font-size: 18px; width: 100%; text-align: center; letter-spacing: 3px; padding: 5px 5% 5px 5%; border: 1px solid var(--yellow); transition: var(--transition);}
.btn-submit:hover {background-color: #FFF; color: var(--yellow)}
#section-career-mobile {display: none; background-color: #f3f3f3;}
.career-mobile-image {background: url('../img/career.jpg'); background-size: cover; margin-bottom: 30px;}
.career-mobile-image img {visibility: hidden;}

#footer {position: relative; clear:both; background-color: var(--brown); padding-top: 40px; color: #FFF;}
.footer-logo-container {float: left; padding-right: 2%; padding-top: 7px;}
.footer-right {overflow: hidden; padding-left: 2%;}
.footer-col {width: 50%; float: left; padding-right: 2%;}
.footer-col-title {font-size: 16px; font-weight: 500; margin-bottom: 15px;}
.footer-col-content {font-weight: 200; line-height: 1.5em; font-size: 15px;}
.footer-col-content img {width: 17px;}
.footer-col-content a {color: #FFF;}
.copyright {margin-top: 25px; font-size: 12px; margin-bottom: 30px;}

#nav-mobile-container {z-index: 99999; position: fixed; top: 0; bottom: 0; left: -100%; width: 100%; background: var(--brown); color: #FFF; padding-bottom: 20px;}
.logo-nav-mobile {padding: 20px 5% 20px 5%; height: var(--headerheight); margin-bottom: 15px; border-bottom: 1px solid #FFF; position: relative;}
.logo-nav-mobile img {width: 80%; max-width: 145px; position: absolute; top: 50%; transform: translateY(-50%)}
.nav-mobile-close {position: absolute; right: 5%; top: 50%; width: 30px; height: 30px; margin-top: -15px; -webkit-transition: var(--transition); -moz-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);}
.nav-mobile-close:hover {opacity: 0.7;}
.nav-mobile-close:before, .nav-mobile-close:after {position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #FFF;}
.nav-mobile-close:before {transform: rotate(45deg);}
.nav-mobile-close:after {transform: rotate(-45deg);}
.nav-mobile-item {text-transform: uppercase; padding: 15px 5% 15px 5%; position: relative;}
.nav-mobile-item a {color: #FFF;}
.nav-mobile-item a:hover {font-weight: bold}
.nav-mobile-item a.active {font-weight: bold;}
#mobile-navbar-item-appointment a {text-decoration: underline;}

.section-about-us-item {padding-top: 120px; padding-bottom: 120px;}
.section-about-us-item .inline-container {display: flex; align-items: center; padding-left: 3%; padding-right: 3%;}
.section-about-us-item p {margin-bottom: 50px;}
.about-col-left {text-align: center; flex: 0 0 350px; position: relative; z-index: 1;}
.about-col-right {padding-left: 3%; position: relative; z-index: 1;}
#about-us-1 {background: url('../img/about-page-bg1.png') no-repeat center right; background-size: cover;}
.about-us-title-container {text-align: left; display: inline-block; margin: auto;}
.company-name {font-size: 16px;}
.about-us-title {font-size: 45px; margin-bottom: 40px;}
.about-col-title {font-size: 31px;}
.about-col-desc {font-size: 18px; color: #6f6f6f;}
#about-us-2 {background: url('../img/about-page-bg1.jpg') no-repeat center left; background-size: auto 100%;}
/* #about-us-3 {background: url('../img/about-page-bg2.png') no-repeat center right; background-size: cover;} */
#about-us-3 {background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(219,216,190,1) 50%); position: relative;}
#about-us-4 {background: url('../img/about-page-bg3.png') no-repeat center left; background-size: cover;}
.about-img-bg {position: absolute; top: 0; bottom: 0; left: 0; z-index: 0;}
.about-img-bg img {height: 100%;}

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
}