@charset "utf-8";

@font-face {
    font-family: "ExemplarPro";
    src: url("../fonts/ExemplarPro-Regular.otf");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: "ExemplarPro";
    src: url("../fonts/ExemplarPro-Italic.otf");
    font-style: italic;
}

@font-face {
    font-family: "ExemplarPro";
    font-weight: 700;
    src: url("../fonts/ExemplarPro-Bold.otf");
}
@font-face {
    font-family: "ExemplarPro";
    font-weight: 700;
    src: url("../fonts/ExemplarPro-BoldItalic.otf");
    font-style: italic;
}



:root {
  --iconsize: 40px;
  --iconsizemd: 48px;
  --iconsizexxl: 70px;
    --d-padding: 4.6875vw;
    --d-padding-lg:4.010416666666667vw;
    --d-padding-sm:2.1875vw;
    --navsize: 3.90625vw;
  --d-transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  --d-gradient: linear-gradient(180deg, #D19847 0%, #F4BD7F 100%);

  --text-g:  linear-gradient(180deg, #D19847 0%, #F4BD7F 100%);
  --fz-12: 0.625vw;
  --fz-13: 0.6770833333333333vw;
  --fz-14: 0.7291666666666667vw;
  --fz-16: 0.8333333333333333vw;
  --fz-18: 0.9375vw;
  --fz-20: 1.041666666666667vw;
  --fz-24: 1.25vw;
  --fz-52: 2.708333333333333vw;
  --fz-45: 2.34375vw;
  --fz-42: 2.1875vw;
  --fz-40: 2.083333333333333vw;
  --fz-36: 1.875vw;
  --fz-32: 1.666666666666667vw;
  --fz-28: 1.458333333333333vw;
  --iz-1: 2.34375vw;
  --iz-2: 3.75vw;
  --fullH: 100vh;
}
@media (max-width:1600px) {
    :root {
        --iconsize: 32px;
        --iconsizemd: 32px;


    }
}
@media (max-width:1299px) {
    :root {
      --fz-52: 32px;
      --fz-45: 27px;
      --fz-42: 25px;
      --fz-40: 24px;
      --fz-36: 22px;
      --fz-32: 20px;
      --fz-28: 16px;
      --fz-24: 16px;
      --fz-20: 15px;


        --fz-18:14px;
        --fz-16:13px;
        --fz-14:12px;
        --fz-13:10px;
        --fz-12:9px;

      --iz-1: 36px;
     --iz-2: 46px;
     --navsize: 56px;
    }
}

@media (max-width:991px) {
    :root {
      --d-padding: 1rem;
      --d-padding-lg:1rem;
      --d-padding-sm:1rem;
    }
}
@media (max-width:767px) {
    :root {

      --fz-14: 12px;
      --fz-16: 13px;
      --fz-18: 14px;
      --fz-52: 24px;
      --fz-40: 24px;
      --fz-36: 20px;
      --fz-32: 20px;
    }
}

html::-webkit-scrollbar {
    width: 8px;
    background-color: #F5EDE2;
} 
html::-webkit-scrollbar-thumb {
    background-color: #F4BD7F;
    border-radius: 4px;
}
/*FOR IE*/
html { 
    scrollbar-base-color: #F4BD7F;
    scrollbar-face-color: #F4BD7F;
    scrollbar-3dlight-color: #F4BD7F;
    scrollbar-highlight-color: #F4BD7F;
    scrollbar-track-color: #F5EDE2;
    scrollbar-arrow-color: #F4BD7F;
    scrollbar-shadow-color: #F4BD7F;
    scrollbar-dark-shadow-color: #F4BD7F;
}
/*FOR FF*/
html{
     scrollbar-color: #F4BD7F #F5EDE2;
    scrollbar-width: 8px;
}



body { font-family: "Bricolage Grotesque", sans-serif;  margin: 0px; padding: 0px; font-size: var(--fz-16); line-height: 1.4; overflow-x: hidden; font-weight: 400; color: #888888; background: #fff; }
/*----------------------
1.1. Typography
------------------------------*/
h1, h2, h3, h4, h5, h6 { font-family: 'ExemplarPro', sans-serif; color: #D19847; margin: 0 0 0.75rem; font-weight: 700; line-height: 1.2; }
h1 { font-size: var(--fz-18); }
h2 { font-size: var(--fz-18);  }
h3 { font-size: var(--fz-18); }
h4 { font-size: var(--fz-18);}
h5 { font-size: var(--fz-16); margin-bottom: 0.75rem; }
h6 { font-size: var(--fz-16); margin-bottom: 0.75rem; }
p { /*font-size: 15px;
margin-bottom: 20px;*/ }
b, strong{font-weight: 700;}
a {  transition: var(--d-transition); text-decoration: none; color: #D19847;  }
a:hover, a:focus { text-decoration: none; outline: none;  }
ul, ol { margin: 0 auto 20px; }
ul li, ol li { margin: 0 auto 10px; }
blockquote { background: #f5f5f5; }
.white-text,
.white-text h1,
.white-text h2,
.white-text h3,
.white-text h4,
.white-text h5,
.white-text h6,
.white-text p,
.white-text.section-header p { color: #fff; }
.uppercase { text-trans: uppercase; }
.underline { text-decoration: underline; }
.divider { border-bottom: 1px solid #dcd9d9; clear: both; margin: 40px auto; }
img { max-width: 100%; width: auto; height: auto; }
.gutter-10 { margin-left: -10px; margin-right: -10px; }
.gutter-10 > [class*='col-'] { padding-right: 10px; padding-left: 10px; }
.gutter-5 { margin-left: -5px; margin-right: -5px; }
.gutter-5 > [class*='col-'] { padding-right: 5px; padding-left: 5px; }
.gutter-2 { margin-left: -2px; margin-right: -2px; }
.gutter-2 > [class*='col-'] { padding-right: 2px; padding-left: 2px; }
.gutter-0 { margin-left: 0px; margin-right: 0px; }
.gutter-0 > [class*='col-'] { padding-right: 0px; padding-left: 0px; }
.relative{position: relative;}
.absolute{position: absolute;}
.overflow-hide{overflow: hidden;}
.pointer-events-none{pointer-events: none;}
.font-1{
    font-family: "Bricolage Grotesque", sans-serif;
}
.font-2{
    font-family: 'ExemplarPro', serif;
}
.mb-d{margin-bottom: var(--fz-45);}
.mt-d{margin-top: var(--fz-45);}


/* =WordPress Core
-------------------------------------------------------------- */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter,
div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto 5px auto; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }
/*End core*/
.editor-content img { max-width: 100%; height: auto; }
.editor-content img.media-object { max-width: none; }
.text-g{
    background: var(--d-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/*-----------------
1.2. Button
-------------------------*/
.btn { border-radius: 0; background: #D19847; border: medium none; color: #fff; font-size: var(--fz-16); height: auto; margin: auto; padding: 0.5rem 2rem; transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; -webkit-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s;
    font-family: 'ExemplarPro', serif;
    font-weight: 700;
}
.btn .fa { font-size: 1.2em; margin-left: 0.4rem; vertical-align: middle; }
.btn.btn-lg { font-size: var(--fz-20); padding: 0.5rem 2.5rem;  }
.btn.btn-sm { font-size: var(--fz-14); padding: 0.5rem 1.8rem;  }
.btn:hover, .btn:focus { color: #ffffff; outline: none; background: #D19847; box-shadow: none; }
.btn-link {color: #D19847; }
.btn.btn-outline { background: none; color: #D19847; border: #D19847 solid 1px;  font-weight: 400; position: relative;}
.btn.btn-outline:hover { background: #D19847; color: #fff; }
.btn-transparent {
    background: transparent; border: 0;
    color: #343741;
    font-size: var(--fz-20);
     border-width: 1px 0px;
    border-style: solid;
    border-color: transparent;
}
.btn-transparent:hover,
.btn-transparent:focus {
    color: #D19847;
    border-color: #F5EDE2;
    background: transparent;
}
.btn.btn-default{
    background: #D19847;
    color: #fff; font-size: var(--fz-18);
    font-weight: 700;
    border-radius: 1.5rem;
}
.btn.btn-default:hover{
    background: #343741;
}
.btn-primary{background: rgba(209, 152, 71, 0.5); color: #343741;}
.btn-primary:hover{}
.btn-gradient{background: var(--d-gradient); }



/*-------------------------
1.3. dark-overlay
---------------------------------*/
.div_zindex { position: relative; z-index: 1; }
.zindex-9{z-index: 9;}
.zindex-10{z-index: 1063;}
.div_zindex > * { position: relative; z-index: 1; }
.dark-overlay { background: rgba(0, 0, 0, 0.85) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.color-overlay { background: rgba(205, 56, 96, 0.9) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before{border-top-color: #fff;}
.bs-tooltip-start .tooltip-arrow::before{border-left-color: #fff;}
.tooltip.show{opacity: 1}
.tooltip .tooltip-inner{background: #F5EDE2; color: #343741;}

/*-------------------------------------
1.4. Space margins and padding
------------------------------------------------*/

.d-inline-block { display: inline-block; }
.section-cover,.cover{background-size: cover; background-position: center center; background-repeat: no-repeat;}
/*-----------------
1.5. Form
---------------------------*/
.form-group { margin-bottom: 0.8rem; position: relative; }
.form-group-text{font-size: var(--fz-16); color: #888888}
.form-group.has-error .help-block{color: #D19847; font-size: var(--fz-13); text-align: center; display: block;}
.form-label { color: #111111; font-size: var(--fz-14);; font-weight: 400; margin: 0 auto 8px; }

.form-control {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0.3125rem;
    border: #ccc solid 1px;
    box-shadow: none;
    color: #888888;
    font-size: var(--fz-14);
    height: 2.5rem;
    padding: 0 1rem;
}
select.form-control{border-radius: 0px; background: #0f5d69; color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 10px;
  padding-right: 2rem;
   font-family: 'ExemplarPro', sans-serif;
    font-size: 20px;
}
select.form-control:focus{ background: #0f5d69; color: #fff;}
textarea.form-control { padding: 15px 20px; }
.form-control:hover { box-shadow: none; outline: none; }
.form-control:focus { box-shadow: none; border-color: #0f5d69; outline: none; }
.select { position: relative; }
.select select { appearance: none; -moz-appearance: none; -o-appearance: none; -webkit-appearance: none; -ms-appearance: none; }
.select::after { color: #878787; content: ""; cursor: pointer; font-family: fontawesome; font-size: 15px; padding: 12px 0; pointer-events: none; position: absolute; right: 15px; top: 0; }
.form-control option { padding: 10px; }
.control-label { color: #555; font-size: 15px; font-weight: 700; }
.radio label, .checkbox label { cursor: pointer; font-size: 14px; font-weight: 400; padding-left: 26px; position: relative; }
.radio input[type=radio],
.checkbox input[type=checkbox] { display: none; }
.radio label:before { background-color: transparent; border-style: solid; border-width: 1px; border-radius: 50%; content: ""; display: inline-block; height: 15px; left: 0; top: 4px; position: absolute; width: 15px; }
.checkbox label::before { background-color: rgba(0, 0, 0, 0); border: 1px solid #111111; content: ""; display: inline-block; height: 16px; left: 0; position: absolute; top: 4px; width: 16px; }
.radio input[type=radio]:checked + label:before { content: "\2022"; font-size: 15px; text-align: center; line-height: 11px; }
.checkbox input[type=checkbox]:checked + label:before { content: "\2713"; font-size: 12px; text-align: center; line-height: 14px; }
.black_input .form-control { background: #222; border-radius: 3px; color: #fff; border: #222 solid 1px; font-size: 17px; }
.checkbox, .radio { padding-top: 5px; }
/*-----------------
1.6. Table
---------------------------*/
table { margin: 0 0 30px; width: 100%; }
table th, table td { border: 1px solid #cccccc; padding: 15px; padding: 18px; }
table th img, table td img { max-width: 100%; }
table thead { background: #eee; }
table thead th, table thead td { text-transform: uppercase; font-weight: 900; color: #111; }
/*-----------------
1.7. Accordion
---------------------------*/
.panel-group .panel { background: #fff; border: 0 none; border-radius: 0; box-shadow: none; margin-bottom: 25px; }
.panel-title { color: #fff; font-size: 24px; margin-bottom: 0; margin-top: 0; }
.panel-title a { display: block; padding: 10px 25px; position: relative; background: #cca759; font-size: 18px;}
.panel-title a.collapsed {  }
.panel-title a .question { width: 85px; height: 100%; content: ""; color: #fff; font-size: 39px; line-height: 1; text-align: center; position: absolute; top: 0px; left: 0px; background: #D19847; }
.panel-title a.collapsed .question { background: #252930; transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; }
.panel-title a .question span { position: absolute; top: 45%; left: 0px; right: 0px; transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.panel-default > .panel-heading { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 0px; border-radius: 0; box-shadow: none; color: #333333; padding: 0; }
.panel-heading:hover .panel-title a .question { background: #D19847; }
.panel-heading:hover .panel-title a { border-color: #D19847; }
.panel-body { border: 0px solid rgba(255, 255, 255, 0.2); margin-top: -1px; padding: 15px 0px; }
.panel-body p { font-size: 17px; line-height: 30px; font-weight: 400; }
/*-----------------------------------------------------------
1.8. Section-background-color & sectino-heading
-------------------------------------------------------------------*/
section { position: relative; }
.section-title{font-size: var(--fz-40); color: #343741; text-transform: uppercase; font-weight: 400; margin: 0 auto 0.5em;
    font-family: 'ExemplarPro', sans-serif;
}
.section-title.xl{font-size: var(--fz-42); font-weight: 400; }
.section-title.lg{font-size: var(--fz-32);}
.section-title.md{font-size: var(--fz-20);}
.section-title.sm{font-size: var(--fz-18);}
.secondary-bg { background: #f3e5d0; color: #8d632b; }
.primary-bg { background: #8d632b; color: #fff; }
.gray_bg { background: #f5f5f5; }
.gray_bg_2 { background: #e6e6e6; }
.section-padding { padding: var(--fz-45) 0; }
.section-header { margin: 0 auto; max-width: 950px; padding-bottom: 30px; }
.section-header h2 { margin: 0 auto; font-size: 32px; font-weight: 400; }
.section-header p { color: #777; font-size: 17px; margin: 22px auto 0; }
h1.page-title { font-size: 20px; }
.primary-bg .section-title{color: #fff;}
.gray_bg .section-title{color: #D19847;}



/*--------------------
1.9. Tabs 
------------------------------*/
.nav.nav-tabs { border: medium none; }
.nav-tabs > li a { padding: 0px 0px 12px; border-radius: 0; color: #caa557; font-size: var(--fz-18); font-weight: 400; margin-right: 5px; text-align: center;
  border:0px; border-bottom: solid 2px #faf6ee;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.nav-tabs > li a:hover,
.nav-tabs > li a:focus { color: #D19847; border:0px;  background: transparent;}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{font-weight: 700; border-bottom: solid 4px #D19847;}
.nav-tabs > li { margin-bottom: 0; margin-right: 50px;}
.tab-content {margin-top: 25px; padding: 25px 0px 25px;}




.nicescroll-rails{transform:translateX(-1rem); pointer-events:auto; border-radius: 6px;}
.nicescroll-rails .nicescroll-cursors{ width: 4px !important; float: none !important;
    cursor: grab;
}

.zoom-in{display: block;}
.zoom-in img{-webkit-transform: scale(1); transform: scale(1);-webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.zoom-in:hover img{-webkit-transform: scale(1.1); transform: scale(1.1);}

.item-rounded .item-thumb.animation{border-radius: 0.6666em;;}
.item-thumb.animation{ overflow: hidden;position: relative;display: block;}
.item-thumb.animation:after {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
.item-thumb.animation img {
    transition: transform 3s cubic-bezier(0, 0.6, 0.45, 1);
}
.item-thumb.animation:hover img,
.item:hover .item-thumb.animation img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.item:hover .item-thumb.animation:after {
    /*-webkit-box-shadow: inset 0px 0px 0px 5px rgba(235,224,207, 0.5) ;
    box-shadow: inset 0px 0px 0px 5px rgba(235,224,207, 0.5) ;*/
}
.item-thumb.fit-ratio{position: relative; width: 100%; height: 0; padding-top: calc(100% * 200 / 360);}
.item-thumb.fit-ratio img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}

.item-thumb .icon{
    position: absolute; width: var(--iz-2); height: var(--iz-2);
    left: 50%; top: 50%; transform: translate(-50%,-50%);
    border-radius: 50%; border: solid 1px #fff;
}
.item-thumb .icon:before{
    position: absolute;
    left: 4px;
    right: 4px;
    top: 4px;
    bottom: 4px;
    border-radius: 50%;
    font-family: "Font Awesome 5 Pro";
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255,255,255,0.2);

}
.item-video .item-thumb .icon:before{content: '\f04b';}
.item-document .item-thumb .icon:before{content: '\f06e';}
.item-document{position: relative;}
.item-document .item-content{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 54%;
    padding: var(--fz-52) var(--fz-32) var(--fz-18);
    background: linear-gradient(0deg, rgba(30,62,46,1) 0%, rgba(30,62,46,0) 100%);

    display: flex;
    align-items: flex-end;
    pointer-events: none;
}
.item-document .item-content .title{font-weight: 700; color: #fff; margin: 0}
.item-document .item-content .icon-download{
    pointer-events: auto;
    display: inline-flex;
    margin-left: auto; width: var(--fz-36); height: var(--fz-36);
    background: url('../images/icon-download.svg') no-repeat center center;
    background-size: contain;
}

/*--------------------------------------------
1.10. parallex-background
---------------------------------------------------*/
.parallex-bg { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }
/*------------------------
1.11. Modal
--------------------------------*/

.modal-content{background: #fff; border-radius: 0px; border:0 }
.modal-backdrop{background-color: #3B3C43;}
.modal-backdrop.show{opacity: 0.7;}
.modal-header{background: transparent; color: #3B3C43;
    padding: 45px 20px 12px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    position: relative;
    border: 0;
}
.modal-header h5{color: rgba(59, 60, 67, 0.7); font-size: 25px; font-weight: 700; text-transform: none;}
.modal-header .btn-close,
.btn-close{
    color: #3B3C43; opacity: 1; position: absolute; right: 0; top: 0; padding: 0;
    background: var(--d-gradient);
    margin: 0px;
    border: 0;
    width: var(--iz-1); height: var(--iz-1);
    transform: translate(50%,-50%);
    border-radius: 50%;
    z-index: 2;
}
.btn-close:before{
    border: 0;
  content: ''; position: absolute; color: #fff; left: 50%; top: 50%; width: 45%; height: 45%;
  transform: translate(-50%,-50%);
  background: url('../images/icon-close-white.svg') no-repeat center center; background-size: contain;
}
.btn-close:hover{
    background: #343741;
    opacity: 1;
}

.modal-content{}
.modal-body{ padding: 20px 50px 40px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  color: #3B3C43;
}
.modal-content .form{}
.modal-content .form p{font-size: 16px; text-align: center; }
.modal-content .form-control{
    background: transparent; border: 0px;
    color: #888888; text-transform: none;
    border-radius: 0.3125rem;
    background: #fff;

}
.modal-content .form-control::placeholder {color: #888888;  opacity: 1;}
.modal-content .form-control:-ms-input-placeholder {color: #888888;}
.modal-content .form-control::-ms-input-placeholder {color: #888888;}
.modal-content textarea.form-control{
    min-height: 5.75rem;
}
.modal-content select.form-control{    text-align-last: center;}
.modal-content select.form-control option{color: #000;}
.modal-content .btn{
    min-width: 200px; padding: 0.5rem 2rem 0.4rem;
}
.modal-content .form  .form-check{display: inline-block;}
.modal-content .form .form-check-input{margin-top: 0.1em;}
.modal-content .form .hotline{color: #D19847; font-size: 18px;}
.modal-content .form .form-group-text small{font-size: 12px; }

#oveviewModal .modal-content{

    background: rgba(209, 152, 71, 0.8);
    border-radius: var(--fz-20);

}
#oveviewModal .modal-content .modal-body{
    color: #fff;
    text-align: center;
    padding: var(--fz-45);
}
#oveviewModal .modal-content .section-title{
    color: #fff;
    margin-bottom: 1.5rem;
}
#oveviewModal .modal-content .modal-body p:last-child{margin-bottom: 0}

@media(min-width: 1200px){
    #oveviewModal .modal-dialog{
        max-width: 35vw;
    }
}


.bootbox .brochure{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.bootbox .brochure img{width: 35%; margin-bottom: 30px;}

.fancy-modal .fancybox-bg{background-color: transparent;}
.fancy-modal.fancybox-is-open .fancybox-bg{opacity: 0.85;}
.gallery-album.fancybox-container .fancybox-caption-wrap .fancybox-caption{
    text-align: center;
    font-weight: 700;
    font-size: var(--fz-18);
    text-transform: uppercase;
    border-top: 0;

}
.gallery-album.fancybox-container .fancybox-caption-wrap{
    background: linear-gradient(180deg, rgba(30, 62, 46, 0) 0%, rgba(30, 62, 46, 1) 100%);
    padding-bottom: 30px;
    padding-top: 90px;
}

@media (max-width:1599px) {

}
@media (max-width:767px) {
    .modal-body{padding: 1rem 0.75rem 1rem;}
    .modal-content .btn{min-width: 170px;}
    .modal-content .form .form-group-text small{font-size: 10px;}
    .bootbox .brochure{padding: 0px 15px;}
}


/*================
2. Header
===========================*/
body,html{ height: 100%;}
body{   width: 100%; }
body.intro-page{overflow: auto; position: static;}

#element_help{height: 412px; max-height: 90vh;}
#element_help img,
#element_help picture{max-height: 100%;}
#element_help.popup-content{border-radius: 0; border: 0px; padding: 0px; background: transparent;}
#element_help.popup-content .fancybox-close-small{right: 2px; top: 2px; width: 30px; height: 30px;background: transparent;}
#element_help.popup-content .fancybox-close-small:after{top: 0px; right: 0px;background: rgba(255,255,255,0.7); font-weight: 700; color: #fff; border-radius: 0px; }
#element_help.popup-content .fancybox-close-small:hover:after{background: #000; }

@media (max-width:767px) {
    #element_help{height: auto;}
    #element_help{
        width: 275px;
        max-width: 65vw;
    }
}


.modal-fit{
  position: fixed;
    top: 0;
    left: 0;
    z-index: 1030;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}


.btn-sticky--website,
.sticky--right .btn{
    position: fixed;
    top: var(--fz-52);
    right: 0;
    border-radius: 0.5rem 0px 0px 0.5rem;
    background: var(--d-gradient);
    padding: 2px;
    height: var(--iconsizemd);
    width: var(--iconsizemd);
    z-index: 10;
}
.sticky--right{
    position: fixed;
    top: calc(var(--fz-52) );
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
}
.sticky--right .btn{
    position: relative;
    top: auto;
    right: auto;
    margin-top: 0.5rem;
}
.btn-sticky--website i,
.sticky--right .btn i{
    position: absolute;
    left: 2px;
    top: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 0.5rem 0px 0px 0.5rem;
    background: #D19847;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fz-28);
}
.btn-sticky--website:hover i,
.sticky--right .btn:hover i{background: transparent; color: #D19847}
@media (max-width:1024px) {

}



/*Loading Overlay*/
.loading-overlay{
    position: fixed;   width: 100%;   height: calc(var(--vh, 1vh) * 100 );   left: 0;   top: 0;   overflow: hidden;   z-index: 99999999;
    background: #D19847;
    color: #fff;

}
.loading-overlay .bg{position: absolute; left: 0px;top: 0px; width: 100%; height: 100%; z-index: 2;
   background: url('../images/loading-overlay-bg.jpg') no-repeat center center; background-size:cover;
}


.loading-overlay svg,
.loading-overlay .svg{width: 218px; max-width: 25vw; height: auto;}
.loading-overlay video{
    position: absolute;
    top: 0;right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;object-fit: cover;
    z-index: 2;
}

.loading-overlay .inner{text-align: center; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 2;
    width: 100%; height: 100%;
    background: #D19847;
    box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.10);
    padding: 3.125vw 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}



.loading-overlay .title{font-weight: 700; font-size: var(--fz-52); color: #fff; margin: 0px 0px 1rem;}
.loading-overlay .overlay-logo{width: 8.697916666666667vw; min-width: 110px;}
.loading-overlay .overlay-bottom{}
.loading-overlay .overlay-content{
    font-size: var(--fz-32);
}
.loading-overlay .title-2{
    font-size: var(--fz-36);
    margin-bottom: 4.6875vw;
    margin-top: 1rem;
    text-transform: uppercase;
}
.loading-overlay .btn{border-radius: 30px;}
.loading-overlay .btn i{margin-left: 0.5rem;}





.loading-overlay .stroke-line {
    fill-opacity: 0;
    fill: #B1812C;
    stroke: #ffffff;
    stroke-miterlimit: 30;
    stroke-width: 20;
}

.loading-overlay.show .stroke-line,
.loading-overlay.show .stroke-line-2 {fill-opacity: 1;}


.tour-nav{
    position: absolute;
     min-height: 42px; flex; width: 100%; justify-content: center;
    transform: translateY(100%);
    transition: var(--d-transition);
    visibility: hidden;
}
body.done .tour-nav{visibility: visible;}
.tour-nav .btn-toggler{
    position: absolute; left: 50%;
    transition: var(--d-transition); z-index: 2; cursor: pointer;
}
.tour-nav .btn-toggler:before{
    content: '';
    position: absolute;
    width: 30.48780487804878%;
    aspect-ratio: 25/14;
    left: 50%;
    top: 60%;
    transform: translateX(-50%) translateY(-50%) rotate(180deg);
    transition: var(--d-transition);
    background:  url('../images/arrow-down.svg') no-repeat center center; background-size: contain;
}

.tour-nav .product-list{
    position: absolute;
    top: -50px;
    transform: translateY(-100%);

    display: none;
}
.tour-nav .product-list ul{
    z-index: 2;
    justify-content: center;
    padding: 0.15rem;
    border: 1px solid #fff;
    border-radius: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 1px;
}
.tour-nav .product-list ul li{margin: 0;}
.tour-nav .product-list ul li a{
    border-radius: 1.4rem;
    padding: 0.4rem 0.8rem;
    color: #fff;
    border: 0;
    font-size: var(--fz-14);
    font-weight: 700;
    display: inline-block;
}
.tour-nav .product-list ul li.active a{
    background: #D19847;
    color: #fff;
}

.tour-nav .swiper-nav-wrapper{
    flex: 0 0 74vw; width: 74vw;
    visibility: hidden;
    opacity: 0;
    transition: var(--d-transition);
    position: relative;
    border-radius: 1rem 1rem 0 0;
}
.tour-nav .swiper-slide-wrapper{
    padding-left: 30px; padding-right: 30px; position: relative;
}
.tour-nav a{color: #fff; text-transform: uppercase;}
@media(min-width: 768px){
    .tour-nav .swiper .swiper-wrapper{
           /* justify-content: center;*/
    }

}

.tour-nav .swiper,
.tour-nav .swiper-thamquan{height: 100%; }
.tour-nav .swiper{}
.tour-nav .swiper-nav-wrapper{}
.tour-nav .swiper-nav-wrapper .swiper .swiper-slide{

}
.tour-nav .swiper-nav-wrapper .swiper-button-prev,
.tour-nav .swiper-nav-wrapper .swiper-button-next{color: #fff;  transition: var(--d-transition); }
.tour-nav .swiper-nav-wrapper .swiper-button-prev:after,
.tour-nav .swiper-nav-wrapper .swiper-button-next:after{font-size: 32px; }
.tour-nav .swiper-nav-wrapper .swiper-button-prev:hover,
.tour-nav .swiper-nav-wrapper .swiper-button-next:hover{opacity: 0.5;}
.tour-nav .swiper-nav-wrapper .swiper-button-prev{left: 0px;}
.tour-nav .swiper-nav-wrapper .swiper-button-next{right: 0px;}
.tour-nav .swiper-nav-wrapper .swiper-button-prev:hover{transform: translateX(-5px);}
.tour-nav .swiper-nav-wrapper .swiper-button-next:hover{transform: translateX(5px);}

.tour-nav .swiper-nav-wrapper .swiper-button-prev svg,
.tour-nav .swiper-nav-wrapper .swiper-button-next svg{display: none;}

.tour-nav .swiper .item{padding: 0px;}
.tour-nav h4{font-size: var(--fz-14); font-weight: 700; margin: 0px 0px 0px; color: #fff;
     text-align: center;
     text-transform: none;
    font-family: 'ExemplarPro', sans-serif;
    padding: 0.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

}
.tour-nav .thumbnail{ overflow: hidden;
  width: 100%;  position: relative;
  margin: auto;

}
.tour-nav .thumbnail .img{
  left: 0px; top: 0px; width: 100%;height: 0px; padding-top: calc(100% * 193 / 318);
  transition: all 1.6s ease;
}

.tour-nav .swiper:not(.with-filter) .swiper-slide-active{/*padding: 3px;*/}
.tour-nav .swiper-slide-active h4{}

.tour-nav.show{ transform: translateY(0); z-index: 9}
.tour-nav.show .swiper-nav-wrapper{ visibility: visible; opacity: 1;}
.tour-nav.show .btn-toggler:before{transform: translateX(-50%) translateY(-50%) rotate(0deg); }

.tour-nav .text-note-wrapper{display: none;}

.tour-nav .swiper-filter{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.tour-nav .swiper-filter a{
    padding: 2px;
    font-family: 'ExemplarPro', sans-serif;
    margin: 0px 0.5rem;
}
.tour-nav .swiper-filter a span{display: block; background: #D19847; color: #fff;
    padding: 4px 20px;
    border-radius: 5px;
}
.tour-nav .swiper-filter a.active span{
    color: #D19847;
    background: transparent;
}
.tour-nav .swiper-tab{
     display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.tour-nav .swiper-tab .inner{
    background: rgba(255,255,255,0.75);
    border-radius: 40px;
    padding: 5px;
    display: flex;
}
.tour-nav .swiper-tab .inner a{color: #D19847; font-weight: 700; text-transform: uppercase; padding: 10px 40px; border-radius: 40px;}
.tour-nav .swiper-tab .inner a.active{
    color: #fff;
    background: #D19847;
}
.tour-nav .swiper-tab .inner a:hover{

}


.vr-nav{display: none !important;}
.tour-nav .btn-toggler{
    width: 30px;
    height: 30px;
    background: linear-gradient(180deg, rgba(209, 152, 71, 0.72) 0%, rgba(244, 189, 127, 0.72) 100%);
    border-radius: 50%;
    margin: 0;
    top: 47%;
    left: auto;
    right: 0;
    transform: translateY(-50%);
    pointer-events: auto;

}
.tour-nav .product-list{display: none;}
.vr-page .nav-wrapper{
    height: 100%; width: auto;
    left: auto;
    right: 0;
    pointer-events: none;
    z-index: 23;
}
.tour-nav{
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) translateX(0%);
    right: 0.5rem;
    left: auto;
    width: auto;
    padding-right: 40px;
}
.tour-nav.show{
    transform: translateY(-50%) translateX(0%);
}
.tour-nav .swiper-nav-wrapper{
    flex:auto;
    width: 8vw;
    min-width: 140px;
}
.tour-nav.show .swiper-nav-wrapper{
    visibility: visible;
    opacity: 1;
     pointer-events: auto;
}
.tour-nav .btn-toggler:before{
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
    background-image: url('../images/arrow-down-black.svg')
}
.tour-nav.show .btn-toggler:before{
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}

.tour-nav .swiper-nav-wrapper .swiper-slide-wrapper{
    height: 18vw;
    min-height: 300px;
}
.tour-nav .swiper-nav-wrapper .swiper .swiper-slide{
    display: flex;
    flex-direction: column;
}
.tour-nav .swiper-nav-wrapper .swiper .swiper-slide{
    padding: 1rem 0;
}
.tour-nav .swiper-nav-wrapper .swiper .swiper-slide .thumbnail {
    flex-grow: 1;
    padding: 0 1.5rem 0;
}
.tour-nav .thumbnail .img{
    padding-top: 0;
    height: 100%;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 0px 0.25rem rgba(0, 0, 0, 0.25);
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
}
.tour-nav .thumbnail .img:before{
    content: '';
    position: absolute;
    inset: 0px;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.65);
}
.tour-nav .swiper-nav-wrapper .swiper .swiper-slide.swiper-slide-active{
    padding: 0;
}
.tour-nav .swiper-nav-wrapper .swiper .swiper-slide.swiper-slide-active .thumbnail{
    padding: 0;
}
.tour-nav .swiper-slide-active .thumbnail .img{
    border-color: #CA8C3E;
    border-width: 2px;
}
.tour-nav .swiper-slide-active .thumbnail .img:before{
    opacity: 0;
}
.tour-nav .swiper-nav-wrapper .swiper-button-prev,
.tour-nav .swiper-nav-wrapper .swiper-button-next{
    width: var(--iconsize);
    height: var(--iconsize);
    margin: 0;
    background-position: center;
}
.tour-nav .swiper-nav-wrapper .swiper-button-prev:after,
.tour-nav .swiper-nav-wrapper .swiper-button-next:after{
    display: none;
}
.tour-nav .swiper-nav-wrapper .swiper-button-prev{
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(-90%);
    background-image: url('../images/arrow-up-1.svg');
}
.tour-nav .swiper-nav-wrapper .swiper-button-next{
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(-50%) translateY(90%);
    background-image: url('../images/arrow-down-1.svg');
}
.tour-nav .swiper-nav-wrapper .swiper-button-prev:hover{
    transform: translateX(-50%) translateY(-90%);
}
.tour-nav .swiper-nav-wrapper .swiper-button-next:hover{
     transform: translateX(-50%) translateY(90%);
}

.home-page:not(.light) .tour-nav .swiper-nav-wrapper .swiper-button-prev{
    background-image: url('../images/arrow-up-1-black.svg');
}
.home-page:not(.light) .tour-nav .swiper-nav-wrapper .swiper-button-next{
    background-image: url('../images/arrow-down-1-black.svg');
}


.tour-nav .swiper-slide-wrapper{
    padding: 0;
}
.tour-nav h4{background: transparent;
    position: static;
    white-space: nowrap;
    padding: 0.5rem 0 0;
}



@media (max-width:1599px) {
    .tour-nav h4{font-size: var(--fz-14);}
}


@media (max-width:767px) {

}


@media (max-width: 1024px) {
  .desktop-only {
    display: none !important; } }

@media (min-width: 1025px) {
  .mobile-only {
    display: none !important; }
}

.intro-page{
    background-color: #F5EDE2;

}
.intro-page footer{margin-top: auto;}
.section-intro{

}
.section-intro .section-logo{
    width: 7.916666666666667vw;
    min-width: 110px;
    margin: 0 auto var(--fz-45);
}
.section-description p:last-child{margin-bottom: 0}
.project-items .item{
    background: #fff;
    background: #FFFFFF;
    box-shadow: 0px calc(var(--fz-20) / 5) var(--fz-20) rgba(0, 0, 0, 0.15);
    border-radius: 0.625rem;
    padding: var(--fz-20) calc(1.25 * var(--fz-20));
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.project-items .item .title{
    color: #343741;
    font-size: var(--fz-32);
    font-weight: 400;
    margin-bottom: 0;
}
.project-items .item .title a{
    color: #343741;
}
.project-items .item .subtitle{
    color: #F4BD7F; font-weight: 500;
    text-decoration-line: underline;
}
.project-items .item .subtitle.status-2{
    color: #088924;
}
.project-items .item .subtitle.status-3{
    color: #E51919;
}
.project-items .item .description{

}
.project-items .item .item-control{

}
.project-items .item .btn{min-width: 56%; font-size: var(--fz-20);}

footer{
    background: #D19847;
    color: #fff;
    padding: 1rem 0;
}
footer .section-content-wrapper{
    gap: 1.8rem;
}
footer .section-content{font-size: var(--fz-12);}
footer .btn.btn-outline{color: #fff; border-color: #fff; border-radius: 0.25rem;
    padding: 0.35rem 1.5rem 0.25rem;
}
footer .btn.btn-outline:hover{
    background: #343741;
    border-color: #343741;
}



.parallax-slider {
  height: 100vh;
  max-height: 100vh;
  background: #F5EDE2 ;
}
.parallax-slider .swiper-slide {
  position: relative;
  overflow: hidden;
}

.parallax-slider .img-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-position: center;
  background-size: cover;
}
.parallax-slider .img-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.parallax-slider .img-container .layer{
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.parallax-slider .img-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-image: linear-gradient(rgba(8, 8, 8, 0.5), rgba(218, 96, 15, 0.7));
  display: none;
}

.parallax-slider .swiper-slide .content {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;

  font-size: var(--fz-20);
  color: #fff;
  width: 42vw;
  min-width: 560px;
  padding-left: var(--d-padding);
  padding-bottom: var(--d-padding);
   padding-right: calc(var(--fz-52) * 5);
  padding-top: calc(var(--fz-52) * 5);
  background: url('../images/cloud.png') no-repeat left bottom;
  background-size: contain;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.65);

}
.parallax-slider .swiper-slide .content .title{
    color: #FFC000;
    font-size: var(--fz-40);
    font-weight: 700;
    text-transform: uppercase;
}


/*nav controls*/
.parallax-slider .swiper-nav-ctrl{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    color: #fff;
    align-items: center;
    z-index: 1;
}
.parallax-slider .swiper-pagination{
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    right: auto;
    top: auto;
    margin: 0;
}
.parallax-slider .swiper-pagination .swiper-pagination-bullet{
    width: 0.5rem;
    height: 0.5rem;
    background: #D9D9D9;
    border-radius: 50%;
    opacity: 1;
}

.parallax-slider .swiper-pagination .swiper-pagination-bullet-active{
    width: var(--fz-40);
    border-radius: 1rem;
    background: #D19847;
}



#header {
    position: fixed; top: 0; width: 100%; transition-duration: 0.3s;  z-index: 22;
    font-size: var(--fz-20);
    font-weight: 500;
    text-transform: uppercase;
    transform: translateY(-100%);
    opacity: 0;
    transition: var(--d-transition);
}

#header.show{
     transform: translateY(0);
     opacity: 1;
}

.navbar-header { position: relative; z-index: 1; }
#header .navbar {padding-left: 0px; padding-right: 0px;align-items: center; padding: 0; }
#header .navbar-brand {
    margin: 0px calc( var(--fz-36)); transition-duration: 0.3s;
    width: 6.927vw; min-width: 80px;
    height: auto; padding: 0px;
    pointer-events:auto;

}
#header .navbar-brand svg,
#header .navbar-brand img{width: 100%; height: auto; }
#header .navbar-brand object{pointer-events: none;}
@media (min-width: 1201px){

}

#navigation { padding: 0px; position: relative; text-align: right;}


.header-bottom{
    padding: var(--fz-20) 0;
}



.header-bottom .header-left,
.header-bottom .header-right{

}
#header .menu{list-style: none; padding: 0; margin: 0; display: flex; }
#header .menu li{
    margin: 0px 0.5rem;
}
#header .menu li a,
#header .menu li button{
    color: #343741;
    position: relative;
    font-size: var(--fz-16);
    font-weight: 700;
    padding: 0.5rem 1.2rem;
    background: transparent;
    border: 0;
    text-transform: uppercase;
    display: inline-block;
}

#header .menu li.active a,
#header .menu li:hover a,
#header .menu li.active button,
#header .menu li:hover button{
    color: #D19847;
}


#header .header-left .menu {
    justify-content: flex-end;
}
#header .header-right{
    display: flex;
    align-items: center;

}

#header:not(.is-alternate) { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; }

body.layout-dark.light #header .menu li a:not(.active):not(:hover),
body.layout-dark.light #header .menu li button:not(.active):not(:hover){
    color: #fff;
}
body.layout-dark.light #header .navbar-brand img,
body.menu-open:not(.vr-page) #header .navbar-brand img{
    /*filter: brightness(0) invert(1);*/
}
body:not(.menu-open).layout-dark #header:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background: linear-gradient(180deg,  rgba(1, 73, 61, 0.75) 45.25%, rgba(1, 73, 61, 0) 92.36%);

    width: 100%;
    height: 150%;
}
body:not(.menu-open).layout-dark:not(.light) #header:before{
    background: linear-gradient(180deg, #FFF8EE 56.93%, rgba(255, 248, 238, 0) 94.43%);
}
body.tour-sanpham #header .header-bottom  .header-left,
body.tour-sanpham #header .header-bottom  .header-right{display: none;}
body.tour-sanpham:not(.menu-open).layout-dark.light #header:before,
body.tour-sanpham #pano_container:after{
    opacity: 0;
}
body.tour-sanpham #header .header-bottom .navbar-brand{margin-left: auto; margin-right: 0}
body.tour-sanpham{

}


/*FULLPAGE*/
@media(min-width: 100px){
    /*.fp-custom{ transform: translate3d(0px, 0px, 0px) !important;}
    .fp-custom .fp-section {
        width: 100% !important;
        position: absolute !important;
        left: 0;
        top: 0;
        z-index: 1 ;
        animation: 1000ms ease;
        background-color: #F5EDE2;
    }

    .fp-section.fp-completely.active{
        z-index: 9;
    }

    .fp-section.prev.down{
        animation-name: toup;
    }
    .fp-section.active.up{
        animation-name: fromup;
    }
    .fp-section.active.down{
        animation-name: fromdown;
        z-index: 6;
    }
    .fp-section.next.up{
        animation-name: todown;
        z-index: 6;
    }*/

    /*.fp-section.section-overall.prev.down{
        animation-name: overalltoup;
    }
    .fp-section.section-overall.active.up{
        animation-name: overallfromup;
    }
    .fp-section.section-overall.active.up .scene-1{

    }

    .fp-section.section-oveview.active.down{
        animation-name: oveviewfromdown;
    }*/


    .fp-custom {
      width: 100% !important;
      transform: none !important;
    }
    .fp-custom .fp-section {
      width: 100% !important;
      position: absolute;
      left: 0;
      top: 0;
      visibility: hidden;
      opacity: 0;
      z-index: 0;
      transition: all 0.7s ease;
      transform: translatez(0);
    }
    .fp-custom .fp-section.active {
      visibility: visible;
      opacity: 1;
      z-index: 1;
    }

}


@keyframes overalltoup {
  from {
   z-index: 6;
    transform:scale(1);
  }
  100% {
   z-index: 6;
   transform:scale(1);
  }
}

@keyframes overallfromup {
  from {
    z-index: 10;
    transform:scale(1.5);
  }
  100% {
    z-index: 10;
   transform:scale(1);
  }
}


@keyframes oveviewfromdown {
  from {
    transform:scale(0);
    transform-origin: 40% 70% ;
  }
  100% {
    transform:scale(1);
  }
}

/*
@keyframes fromdown {
  from {
    transform:scale(1.5);
  }
  100% {
    transform:scale(1);
  }
}

@keyframes toup {
  from {
    z-index: 6;
    transform:scale(1);
  }
  100% {
    z-index: 6;
    transform:scale(1.5);
  }
}

@keyframes fromup {
  from {
    z-index: 10;
    transform:scale(1.5);
  }
  100% {
    z-index: 10;
   transform:scale(1);
  }
}
@keyframes todown {
  from {
    transform:scale(1);
  }
  100% {
    transform:scale(1.5);
  }
}
*/


@keyframes fromdown {
  from {
    transform:translateY(100%);
  }
  100% {
    transform:translateY(0%);
  }
}

@keyframes toup {
  from {
    z-index: 6;
    transform:translateY(0%);
  }
  100% {
    z-index: 6;
    transform:translateY(-68%);
  }
}

@keyframes fromup {
  from {
    z-index: 10;
    transform:translateY(-100%);
  }
  100% {
    z-index: 10;
    transform:translateY(0%);
  }
}
@keyframes todown {
  from {
    transform:translateY(0%);
  }
  100% {
    transform:translateY(68%);
  }
}


.fp-custom:after,
#pano_container:after{
    pointer-events: none;
    content: '';
    position: absolute;
    z-index: 22;
    right: 0;
    top: 0;
    height: 100%;
    width: 24vw;
    min-width: 320px;
    background: linear-gradient(270deg, rgba(52, 55, 65, 0.7) 0%, rgba(52, 55, 65, 0) 92.36%);
    display: none;
}
#pano_container:after{
    z-index: 21;
}
.fullpage-wrapper .bg-nav{position: relative;}
.fullpage-wrapper .bg-nav:before{content: ''; position: absolute; right: 0px; top: 0px; height: 100%;
    width: 17vw;
    background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(0,0,0,0.5) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(0,0,0,0.5) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
    pointer-events: none;
    z-index: 6;
    display: none;
}

.fullpage-nav{
    line-height: normal; padding: 0px; margin: 0px;
    position: fixed; right: calc( var(--fz-36) ) ; z-index: 22; opacity: 0; transition: var(--d-transition);
    top: 50%; transform: translate(15rem,-50%);
}
.fullpage-nav.show{transform:  translate(0px,-50%); opacity:1 }


.fullpage-nav li{
    padding: 0px;
    margin: 1rem 0px;
    list-style: none;
}
.fullpage-nav li a {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    display: flex;
    font-size: var(--fz-20);
    align-items: center;
    justify-content: flex-end;
    max-width: 40px;

}
.fullpage-nav li a .title{ opacity: 1;
    transition: var(--d-transition);
    transform: translateX(0);
    color: rgba(255,255,255,1); white-space: nowrap;
    pointer-events: auto;
}

.fullpage-nav li:hover a,
.fullpage-nav li.active a  { opacity: 1;}
.fullpage-nav li:hover a .title{ opacity: 1;}

.fullpage-nav li span:not(.title) {
    display: flex; align-items: center;justify-content: center;
    margin-left: .65rem;
    text-align: center;
    flex: 0 0 0.75rem; width: 0.75rem; height: 0.75rem; border: solid 1px rgba(255,255,255,1); border-radius: 50%;
    order: 2;
    position: relative;
    text-indent: -9999px;
    transition: var(--d-transition);
}


.fullpage-nav li.active .title{opacity: 1; transform: translateX(0)}

.fullpage-nav li:hover span:not(.title),
.fullpage-nav li.active span:not(.title),
body:not(.light) .fullpage-nav li:hover span:not(.title),
body:not(.light) .fullpage-nav li.active span:not(.title){
    background: #D19847;
    border-color: #D19847;
}
body:not(.light) .fullpage-nav li a .title{
    color: #343741;
}
body:not(.light) .fullpage-nav li span:not(.title){
    border-color: #343741;
}

body.home-page:not(.light) .tour-nav h4{
    color: #343741;
}
body.home-page .header-icon{
    display: flex;
    gap: 1rem;
    margin-left: auto;
}
body.menu-open .header-icon{
    display: none;
}

body.home-page .header-icon a{
    cursor: pointer;
}
body.home-page .header-icon a:hover path{
    fill: #343741;
}



/*Masterplan*/
.section-masterplan .masterplan-map-wrapper,
.fullpage-map-wrapper{position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.section-masterplan .masterplan-map,
.fullpage-map-wrapper .fullpage-map{
    position: absolute;
    width:var(--w, 1920px); height: var(--h, 980px);  background-position:center top; background-size: contain; background-repeat: no-repeat;
}

.section-overall {
}
.section-oveview .section-image img{
    object-fit: cover;
    height: 100%;
}
.section-oveview .project-image-wrapper .section-items{
    position: absolute;
    inset: 0;
}
.section-oveview .project-image-wrapper .section-items .item{
    position: absolute;
    left: calc(var(--l) / 1920 * 100% );
    top: calc(var(--t) / 1080 * 100% );
    width: 60px;
    height: 60px;
    background: url('../images/logo-icon.svg') no-repeat center center;
    background-size: contain;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    transform: translate(-50%, -100%);
}


.section-masterplan .masterplan-map .inner,
.section-masterplan .masterplan-map .items,
.section-masterplan .masterplan-map .svg-map,
.fullpage-map-wrapper .fullpage-map .inner,
.fullpage-map-wrapper .fullpage-map .items,
.fullpage-map-wrapper .fullpage-map .svg-map{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.section-masterplan .svg-map .item-hover path{
    fill-opacity: 0;
    stroke-miterlimit: 10;
    stroke-width: 4;
    stroke-dasharray: 5000;
    stroke-dashoffset: 5000;
    /*cursor: pointer;*/
    stroke:rgba(235,148,108,0.7);
    opacity: 1;
    fill: #7b97af;
}
.section-masterplan .svg-map .item-hover path{

}
.section-masterplan:not(.section-floor) .svg-map .item-hover path{
    /*fill-opacity: 0.6;*/
}

.section-masterplan .svg-map .item-hover.show path{
    animation-name: DrawStroke2;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: linear;
    fill-opacity: 0.3;
    stroke-width: 4;
    fill: #ea8d6b;
}

.section-masterplan .section-content-wrapper{
    position: absolute;
    right: var(--d-padding-xl);
    bottom: 4.5rem;
    width: 30vw;
    min-width: 18.75rem;
    z-index: 4;
}


.fp-viewing-vi-tri .fp-custom:after{display: none;}
.fp-custom .section-location.fp-section{background-color: #FFF8EE}

.section-location .section-image > object:not(.logo-map),
.section-location .section-image > .map-layer:not(.logo-map),
.section-location .section-image > svg{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    pointer-events: none;
}

@media (min-width:1200px) {
    /*#location .section-image-wrapper{
        opacity: 0;
    }
    #location.active .section-image-wrapper{
        animation: scaleOut;
        animation-duration: 2s;
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
    }*/
    .logo-map{
        opacity: 0;
        transform: scale(0);
        transition: var(--d-transition);
        transition-delay: 1.5s;
    }
    #location.active .logo-map{
       opacity: 1;
       transform: scale(1);
    }
}


.image-map-svg{overflow: hidden;}
.image-map-svg svg{position: absolute; left: 0px; top: 0px; width: 100%; height: auto;z-index: 2; }
.image-map-svg svg .item-maker.haslink{cursor: pointer;}
.image-map-svg svg .item-maker .ani{
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.image-map-svg svg .item-maker circle{fill: var(--baseColor, #D19847); stroke:rgba(255,255,255,0.5);stroke-width: 2;}
.image-map-svg svg .item-maker text{fill: #fff;font-size: 13px; font-weight: 400;}
.image-map-svg svg .item-maker:hover circle,
.image-map-svg svg .item-maker.active circle{fill: #F81B98;}
.image-map-svg svg .item-maker:hover circle,
.image-map-svg svg .item-maker.active circle{stroke:#fff;
    stroke-miterlimit: 5;
    stroke-width: 2;
    stroke-dasharray: 5;
    stroke-dashoffset: 0;
    animation: StrokeLine 4s infinite linear;
}
.image-map-svg svg .item-maker.highlight-1 circle{fill: #D19847 ;}
.image-map-svg svg .item-maker.highlight-1:hover circle,
.image-map-svg svg .item-maker.highlight-1.active circle{fill: #D19847;}

.image-map-svg .item{
    position: absolute;
    z-index: 2;
    opacity: 0;
    transition: var(--d-transition);
    transform: translateY(1rem);
    pointer-events: none;
}
.image-map-svg .item.show{
    opacity: 1;
    transform: translateY(0rem);
}
.image-map-svg .item .text-inner{
    transform: translateX(-50%);
}
.image-map-svg .item .title{
    font-size: 23px;
    font-weight: 400;
    color: #fff;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
    text-align: center;
}
.image-map-svg .item .pin{
    width: 180px;
    aspect-ratio: 1/1;
    transform: translateY(-100%);
}

.scene-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
}

.scene-wrapper .scene{
    position: absolute;
    inset: 0;
}
.scene-wrapper .scene{
    pointer-events: none;
    transition: all 0.5s ease;
}
.scene-wrapper .scene.active{
    opacity: 1;
    pointer-events: auto;
}
/*
.scene-wrapper .scene-2{transform: scale(1.5);
    transition: all 1.5s ease-in-out;
}
.scene-wrapper .scene-2.active{transform: scale(1);}
.scene-wrapper .scene-2 img{object-fit: cover;}
*/

.section-overall .fullpage-map .inner{
    z-index: 3;
    pointer-events: none;
}
.section-overall .image-map-svg .item-hover path,
.section-product-map .image-map-svg .item-hover rect{
    fill-opacity: 0;
    stroke-miterlimit: 10;
    stroke-width: 4;
    stroke-dasharray: 5000;
    stroke-dashoffset: 5000;
    cursor: pointer;
    stroke: rgba(209, 152, 71,1);
    opacity: 1;
    fill: rgba(209, 152, 71,0.6);
}

.section-overall .image-map-svg .item-hover.show path,
.section-product-map .image-map-svg .item-hover.show rect{
    animation-name: DrawStroke2;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: linear;
    fill-opacity: 0.6;
    stroke-width: 4;
    fill: rgba(209, 152, 71, 1);
}

.section-product-map .image-map-svg .item .text-inner{
    background: #FDEDD7;
    padding: 0.6rem 1rem;
    transform: translateX(-50%) translateY(calc(-100% - 1rem));
    font-size: 18px;
}
.section-product-map .image-map-svg .item .title{
    color: #CA8C3E;
    text-transform: uppercase;
    padding-bottom: 0.4rem;
    border-bottom: solid 1px #CA8C3E;
    font-size: 1em;
    text-align: left;
    text-shadow:none;
}
.section-product-map .image-map-svg .item .item-body ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.section-product-map .image-map-svg .item .item-body ul li{
    color: #000000;
}
.section-product-map .image-map-svg .item .item-body ul li:last-child{margin: 0}

.section-utilities .section-content-number{
    height: var(--fullH);
    width: 20rem;
    padding-top: 4rem;
    padding-left: 1.5rem;
    display: flex;
    align-items: center;
}
.section-utilities .section-content-number:before{
    content: '';
    position: absolute;
    inset: 0;
    right: auto;
    width: 120%;
    background: linear-gradient(90deg, #343741 0%, rgba(52, 55, 65, 0) 100%);

}
.section-utilities .section-content-number .section-content-inner{
    height: 60%;
    padding-left: 1rem;
}
.section-utilities .section-content-number .section-content{
    height: 100%;
    pointer-events: auto;
}

.items.utilities-items .item{margin: 0 0 1rem 0;
    display: flex; font-size: var(--fz-20);  align-items: center;
    font-weight: 400;
    color: #fff;
    pointer-events: auto;
    line-height: 1.5;

}
.items.utilities-items .item span{flex: 0 0 1.8em; height: 1.8em;
    font-size: var(--fz-14); font-weight: 400; color: #fff;
    background:  var(--baseColor, #D19847); border: 0;
    overflow: hidden; border-radius: 50%; margin-right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Bricolage Grotesque", sans-serif;
}
.items.utilities-items .item.active,
.items.utilities-items .item:hover{color: #fff;}
.items.utilities-items .item.active span,
.items.utilities-items .item:hover span{background-color: #343741; color:#fff }



.utilities-image-wrapper .map-tooltip {
      pointer-events: none;
      position: absolute;
      text-align: left;
      z-index: 5;
      height: auto;
      margin: 0 auto;
      color: #343741;
      transform: translate(-50%,-100%);
      display: none;
      background: #fff;
    border-radius: 0.5rem;
    align-items: center;
    padding: 0.5rem;

    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);


}
.utilities-image-wrapper .map-tooltip h5{
    color: #343741;
    font-size: var(--fz-16);
    font-weight: 500;
    margin: 0;
    padding: 0rem 0.5rem;
    text-transform: uppercase;
}
.utilities-image-wrapper .map-tooltip.bottom{
    transform: translate(-50%,0);
}
.utilities-image-wrapper .map-tooltip.active {
  display: flex;
}
.utilities-image-wrapper .subdivision-maker img{
    width: 300px; max-width: unset;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.3rem;
    margin-bottom: 0.5rem;
}


/*utilities-nav*/
.utilities-nav{
    position: absolute;
    bottom: calc(var(--navsize) + 5px);
    left: 0px;
    width: 100%;
    z-index: 2;

}
.utilities-nav > ul{
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}
.utilities-nav > ul > li{
    position: relative;
    margin: 0px 4px;
}
.utilities-nav > ul > li > a{
    background: rgba(223, 244, 226, 0.8);
    border-radius: 4px;
    color: #D19847;
    font-weight: 700;
    font-size: var(--fz-14);
    padding: 6px 40px 6px 15px;
    border: solid 2px transparent;
    height: 2vw;
    padding: 0px 40px 0px 15px;
    line-height: 1.1em;
    min-height: 32px;
    display: flex;
    align-items: center;
}

.utilities-nav > ul > li > a:has(+ .submenu):after {
    content: "\f077";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.utilities-nav ul li ul{
    position: absolute;
    left: 0px;
    width: 100%;
    bottom: 100%;
    background: #fff;
    padding: 10px 8px 0px;
    visibility: hidden;
    transform: translate(0, -10px);
    transition: var(--d-transition);
    pointer-events: none;
    opacity: 0;
    border-radius: 4px;
    list-style: none;
}
.utilities-nav > ul > li:hover > a
{
    background: rgba(56, 115, 88, 0.8);
    border-color: rgba(191, 150, 66, 1);
    color: #fff;
}
.utilities-nav ul > li.showsub > ul,
.utilities-nav ul > li:hover > ul {
    transform: translate(0, 0px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.utilities-nav ul li ul li a{color: #000}
.utilities-nav ul li ul li a:hover{color: #D19847}

@media(max-width:991px){
    .utilities-nav {
        min-height: 70vh;
        display: flex;
        align-items: flex-end;
        overflow: auto;
        pointer-events: none;
    }
    .utilities-nav:has(> ul:hover){pointer-events: auto;}
    .utilities-nav > ul{width: auto; pointer-events: auto;}
    .utilities-nav  ul  li a{pointer-events: auto;}
    .utilities-nav > ul > li > a{white-space: nowrap;}
}





.footer-control {
  position: fixed;
  right: var(--d-padding-lg);
  bottom: 1.8rem;
  padding: 0rem 0.2rem;
    z-index: 22;
    display: flex;
}
.footer-control a {
    height: 30px;
    width: 30px;
   position: relative;
   aspect-ratio: 1;
  margin-left: 1.5rem;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-control a span{
    display: block;
    width: 100%;
    height: 100%;
}
.footer-control a svg{
    height: 100%;
    width: auto;
}
.footer-control a:last-child{margin-bottom: 0px;}
.footer-control a:hover svg path {
    stroke: #D19847;
}
.footer-control a i{

}
.footer-control a i {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #fff;
  text-align: center;
  font-size: calc(0.8 * var(--iconsize)) ;
  line-height: 1.2em;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}
.footer-control a:hover i:before {
  color: #D19847;
}
.footer-control a.sound i:before {
  content: "\f125";
}
.footer-control a.sound.active i::before {
  content: "\f11f";
}
.footer-control a.autotour i::before {
  content: "\f12d";
}
.footer-control a.autotour.active i::before {
  content: "\f12c";
}
body.fullscreen .footer-control .fullscreen .max{
    opacity: 0;
}
body:not(.fullscreen) .footer-control .fullscreen .min{
    opacity: 0;
}
body.hide-utility-link .footer-control .utility-link .normal{
    opacity: 0;
}
body:not(.hide-utility-link) .footer-control .utility-link .active{
    opacity: 0;
}

.footer-control a.music:not(.play) .g-play{opacity: 0}
.footer-control a.music.play .g-pause{opacity: 0}



.page-library{
    padding-top: 4.6875vw;
}
.page-library .item{margin-bottom: 1.5rem; display: block;}
.page-library .item .item-thumb{padding-top: calc(100% * 290 / 486);}

@media(max-width: 1199px){
    .page-library{
        padding: 45px 0;
    }
}



.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
  padding: 0.4rem;
  display: block;
}
.grid-filter{margin-top: -2em;}
@media(min-width:1200px){
    .grid-filter .form-control{width: 300px; max-width: 100%;}
}


.grid-item img {
  display: block;
  max-width: 100%;
}
#library_album .grid-item .item-title{margin: 0; position: absolute; bottom: 0.4rem; left: 0.4rem;
    background: linear-gradient(180deg, rgba(30,62,46,0) 0%, rgba(30,62,46,1) 100%);
    padding: 1rem;
    min-height: 50%;
    width: calc(100% - 0.8rem);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #fff;
    text-align: center;
    pointer-events: none;
    text-transform: none;
}
@media(max-width: 1199px){
    .grid-sizer,
    .grid-item {
      width: 50%;
    }
}
@media(max-width: 767px){
    .grid-item{
        padding: 0.2rem;
    }
    #library_album .grid-item .item-title{
        bottom: 0.2rem; left: 0.2rem;
        width: calc(100% - 0.4rem);
        font-size: 11px;
        padding: 0.5rem 0.5rem;
    }
}



#projectInfoModal .modal-dialog{
    width: 80vw;
    max-width: 80vw;
}
#projectInfoModal .modal-dialog .modal-body{
    background: #fff;
    padding: 0; align-items: center; position: relative;
}
#projectInfoModal .modal-header{position: absolute; right: 0px; top: 0px;z-index: 2;}

#registerModal .modal-dialog{
    max-width: 100%;
    width: 56.25vw;
    min-width: 960px;
}
#registerModal .modal-dialog .modal-body{padding: 0; background: #F5EDE2;}
#registerModal .modal-dialog .modal-content{border: 0;}
#registerModal .modal-thumb{
    width: 100%;
    height: 100%;
    position: relative;
}
#registerModal .modal-thumb img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    inset: 0;
}
#registerModal .modal-form{
    padding:calc(1.5 * var(--fz-45)) var(--fz-45);
    height: 100%;
    position: relative;
    overflow: hidden;
}
#registerModal .modal-form:before{
    position: absolute;
    content: '';
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: url('../images/bg-icon-1.svg') no-repeat center center;
    background-size: contain;
    animation-name: RotateBG2;
    animation-iteration-count: infinite;
    animation-duration: 30s;

}
#registerModal .modal-form .section-title{text-align: center; color: #CA8C3E;
    text-transform: none;
    position: relative;
}
#registerModal .modal-form .btn{width: 100%}


#utilitiesModal .modal-dialog{width: 1650px; max-width: 86vw ;    margin: auto; }
#utilitiesModal .modal-header{position: absolute; right: 15px; top: 15px;z-index: 2;}
#utilitiesModal .modal-dialog .modal-body{ padding: 0;   align-items: center; position: relative;
    
}
#utilitiesModal .modal-dialog .modal-body .col-content{position: relative; 
    width: 100%; height: auto; color: #fff; padding: 70px 5% 30px;
    margin-top: -60px;
}

#utilitiesModal .modal-dialog .modal-body .col-content:before{content: ''; width: 100%; height: 70%;
    position: absolute; left: 0px; bottom: 0px; background: #1D6D94;
}
#utilitiesModal .modal-dialog .modal-body .col-content:after{
    content: ''; width: 100%; height: 100%;
    position: absolute; left: 0px; bottom: 0px; 
    background: url('../images/bg-menu-2.svg') no-repeat center top;
    background-size: 100% auto;
}
#utilitiesModal.internal .modal-dialog .modal-body .col-content:before{background: #2F8E7E;}
#utilitiesModal.internal .modal-dialog .modal-body .col-content:after{
    background-image: url('../images/bg-menu-3.svg') ;
}
#utilitiesModal .modal-dialog .modal-body .col-content .section-title{font-size: 36px; color: #D19847; margin: 0px 0px 5px;}
#utilitiesModal .modal-dialog .modal-body .col-content .description{font-weight: 700;}
#utilitiesModal .modal-dialog .modal-body .col-content .content p:last-child{margin: 0;}

#utilitiesModal.internal .modal-dialog .modal-body .col-content .section-title{color: #001A72;}

@media screen and (max-width: 1600px){
    #utilitiesModal .modal-dialog .modal-body .col-content .section-title{font-size: 32px;}
}

#productDetailModal .modal-dialog{
    max-width: 100%;
    width: 56.25vw;
    min-width: 960px;
}
#productDetailModal .modal-body{padding: 0}



.section-with-nav .nav{
    z-index: 2;
    justify-content: center;
    padding: 0.15rem;
    border: 1px solid rgba(209, 152, 71, 0.5);
    border-radius: 1.5rem;
}
.section-with-nav .nav .nav-item{margin: 0}
.section-with-nav .nav .nav-link{
    border-radius: 1.4rem;
    padding: 0.4rem 0.8rem;
    color: #888888;
    border: 0;
    font-size: var(--fz-14);
    font-weight: 700;
}
.section-with-nav .nav .nav-link.active,
.section-with-nav .nav .show>.nav-link{
    background: rgba(209, 152, 71, 0.5);
    color: #343741;
}
.section-with-nav .tab-content{margin: 0 0 var(--fz-45) 0; padding: 0;}



/*sticky_widget*/
#sticky_widget {position: fixed; right: -100%; top: 50% ; transform: translateY(-50%); z-index: 9;transition: var(--d-transition);}
#sticky_widget.show{right: 0;}
#sticky_widget .title{width: 40px; min-height: 190px; background: #D19847;
  position: absolute; right: 0px; top: 50%; transform: translateY(-50%);
  transition: var(--d-transition);
  cursor: pointer;
  border-radius: 0.75rem 0px 0px 0.75rem;
  text-transform: uppercase;
}
#sticky_widget .title:before{content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px;
   background: url('../images/logo-icon.svg') no-repeat center center;
   background-size: contain;

}
#sticky_widget .title span{
  position: absolute;    top: 0;  left: 100%;
  background: none;    transform-origin: 0 0; transform: rotate(90deg);
  color: #fff;
  white-space: nowrap; top: 50px;
  height: 40px;    line-height: 40px;
}
#sticky_widget .title:hover{
    background-color: #D19847;
}

#sticky_widget .items{
  right: 40px; top: 50%; position: absolute;
  transform: translateY(-50%);

  display: flex;
    overflow-x: auto;
   direction: rtl;
   cursor: grab;

    -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;

  width: 0px;
  /*width: calc(100vw - 52px);*/
  transition: var(--d-transition);


}
#sticky_widget .items.show{width: calc(100vw - 52px); }
#sticky_widget .items::-webkit-scrollbar {
    display: none;
}

#sticky_widget .items .inner{height: 100%;
  display: flex;
}
#sticky_widget .items .item{width: calc(100vw / 6 + 35px);  height:100%;
  flex-shrink: 0;
  background: #D19847;
  display: flex; flex-direction: column; overflow: hidden;
  margin-right: 5px;
}

#sticky_widget .items .item .thumb{width: 100%; flex-grow: 1;  position: relative;
    height: 0px; padding-top: calc(100% * 230 / 350);
}
#sticky_widget .items .item .thumb .img{position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;
  transition: var(--d-transition);
}
#sticky_widget .items .item .info{padding: 8px 15px 8px;
  transition: var(--d-transition);
  background: #D19847;
}

#sticky_widget .items .item h2{text-align:left; font-size: var(--fz-18); font-weight: 400; margin: 0px;     text-transform: uppercase;
    color: #fff;
}
#sticky_widget .items .item.active .info,
#sticky_widget .items .item:hover .info{background: #D19847}

.widget-overlay{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: none;
    opacity: 0;
    transition:var(--d-transition);
}
.widget-overlay.show{  display: block;  opacity: 0.7;}


body.done .text-note-wrapper{z-index: 8;}




#page_container{position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden;
    transform: translateY(-100%);visibility: hidden;
    transition: var(--d-transition);    
}
#page_container .loading{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
}

#page_container.show{transform: translateY(0); visibility: visible; z-index: 8; 
    background: #EBEFED;
    /*overflow-y: auto;*/
    overflow: auto;
}


@media (min-width:1200px) {
    .container-fluid{padding-left: var(--d-padding); padding-right: var(--d-padding);}
}



* {
  scrollbar-width: thin;
  scrollbar-color: #d6d6d6 #D19847; }

*::-webkit-scrollbar {
  border-radius: 3px;
  height: 6px;
  width: 6px; }

*::-webkit-scrollbar-track {
  background: #d6d6d6; }

*::-webkit-scrollbar-thumb {
  background-color: #D19847;
  border: none; 
}


/*Mobile Responsive*/

@media(min-width:1920px){
    html {
        font-size: var(--fz-16);
    }

}

@media (max-width: 1199px){

    .navbar.fixed-top{z-index: 1;}
    body.show-nav .navbar.fixed-top{z-index: 10;}
    .navbar{
        padding: 0px;
    }
    .navbar .nav-wrapper {display: none;
    }


    #page_container{bottom: 0;}
    #page_container.show{z-index: 8; overflow-y: auto;}


    .footer-control{bottom: 1rem;}


    .section-location{
        /*padding-top: calc(2 * var(--fz-45));*/
    }
    .section-content-xs{
        padding-bottom: 0;
    }
    .section-content-xs .section-title{
        text-align: center;

    }
    .section-xs-scale{
        min-height: calc(100vw * 1080 / 1920);
    }
    .fullpage-nav,
    .fp-custom:after{
        display: none !important;
    }

    .section-utilities .utilities-image-wrapper{
        position: static;
        min-height: calc(100vw * 1080 / 1920);
    }
    .section-utilities .section-content-number{
        position: static;
        height: auto;
        padding: 1.5rem 1rem;
        width: 100%;
    }
    .section-utilities .section-content-number:before{
        display: none;
    }
    .section-utilities .section-content-number .section-content-inner{height: auto; flex: 1; padding:0}
    .items.utilities-items .item{color: #343741}
    .items.utilities-items .item.active,
    .items.utilities-items .item:hover{color: #343741;}
    .section-utilities .section-content-number .items{
        column-count: 2;
        column-gap: 0.5rem;
    }

    #productDetailModal .modal-dialog{
        min-width: auto;
        width: 90%;
    }

    #pano_container:after{display: none;}
    



    body.home-page .panzoom-parent{
        width: 100vw;
        height: 100dvh;
    }
    body.home-page .panzoom{
        aspect-ratio: 1920 / 1080;
        height: 100%;
    }
    body.home-page .panzoom.fullpage-map{
        left: 0!important;
        top: 0 !important;
    }
    body.home-page .panzoom > img{

    }
    body.home-page .section-masterplan .masterplan-map,
    body.home-page  .fullpage-map-wrapper .fullpage-map{
        width: auto;
    }
    
}
@media (max-width: 991px){

    #header .header-left,
    #header .header-bottom  .menu{display: none;}
    body #header .header-right{justify-content: flex-end;}
    .header-bottom{
        padding: 0.5rem 0;
    }
    #header .navbar-brand{margin: 0}

    .bootbox .modal-dialog,
    #projectInfoModal .modal-dialog,
    #registerModal .modal-dialog
    {
        margin: calc(var(--iz-1) / 1.6);
        min-height: calc(100% -  2 * var(--iz-1) / 1.6);
    }
    #projectInfoModal .modal-dialog{
        width: auto;
        max-width: 100%;
    }
    #registerModal .modal-dialog{
        min-width: 100px;
        width: auto;
    }
    .btn-close{
        /*transform: translate(0%, 0%);
        border-radius: 2px;*/
    }

    #registerModal .modal-thumb{
        padding-top: calc(100% * 9 / 16);
    }

    .parallax-slider .img-container .layer{
        display: none;
    }
    .parallax-slider .swiper-slide{display: flex; flex-direction: column;}

    .parallax-slider .img-container{
        flex-grow: 1;
        bottom: auto;
        position: relative;
        left: auto;
        top: auto;
        margin-top: 0;
        width: 100%;
    }
    .parallax-slider .img-container picture{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .parallax-slider .swiper-slide .content{
        position: relative;
        width: 100%;
        min-width: auto;
        left: auto;
        bottom: auto;
        background: transparent;
        padding-top: 2rem;
        padding-bottom: 4rem;
        padding-right: var(--d-padding);
        color: #888888;
        text-shadow:none;

    }
    .parallax-slider .swiper-slide .content:before{
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        top: -14vw;
        background: linear-gradient(359.97deg, #F5EDE2 86.79%, rgba(245, 237, 226, 0) 98.01%);
    }
    .parallax-slider .swiper-slide .content:after{
        content: '';
        position: absolute;
        top: -14vw;
        left: 0;
        width: 100vw;
        height: calc(100vw * 432 / 1320);
        background: url('../images/cloud-mobile.png') no-repeat center center;
        background-size: contain;
        pointer-events: none;
        transform: translateY(-45%);
    }
    .parallax-slider .swiper-slide .content .title,
    .parallax-slider .swiper-slide .content .description{position: relative; z-index: 2}
    .parallax-slider .swiper-slide .content .title
    {
        text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.65);
    }
    .parallax-slider .swiper-slide .content .description{
        margin-bottom: 0;
    }

    #location .section-image-wrapper{
        padding-bottom: 12vw;
        overflow: hidden;
    }
    #location .section-image-wrapper .section-image {
        /*transform: scale(1.5);*/
    }

    .scene-wrapper.section-xs-scale{
        /*min-height: calc((100vw * 1080 / 1920) * 1.5);
        overflow: hidden;*/
      }
    .scene-wrapper .scene{
        /*transform: scale(1.5) translateX(7%) translateY(16.5%) !important;*/
    }

    #productDetailModal .modal-dialog{
        width: calc(100% - 1.1 * var(--iz-1));
        margin: auto;
    }




}
@media (max-width: 767px){

    .btn-toggle-menu.navbar-toggler{
        top: 12.5px;
    }
    .nav-wrapper{ padding-top: 60px;  }
    #page_container{}


    #registerModal .modal-form{
        padding: calc(1 * var(--fz-45)) var(--fz-45);
    }
    #registerModal .modal-form .section-title{
        font-size: var(--fz-40);
    }
    #projectInfoModal .modal-dialog{

    }

    #projectInfoModal .modal-dialog .modal-body{    flex-direction: column;}
    #projectInfoModal .modal-dialog .modal-body .col-thumb{width: 100%; flex: 1;}
    #projectInfoModal .modal-dialog .modal-body .col-content{    padding: 10px 20px;}

    #utilitiesModal .modal-dialog{max-width: 96vw;}
    #utilitiesModal .modal-dialog .modal-body .col-content:before{height:  calc(100% - 100vw * 211 / 1649 / 2);
    }
    #utilitiesModal .modal-dialog .modal-body .col-content{padding: 30px 15px 15px;}
    #utilitiesModal .modal-dialog .modal-body .col-content .section-title{font-size:1.5rem; ;
    }

    .parallax-slider .swiper-nav-ctrl{
        bottom: 0.75rem;
    }
    .parallax-slider .swiper-slide .content{
        padding-top: 0.5rem;
        padding-bottom: 3rem;
    }
    .parallax-slider .swiper-slide .content:before{
        top: -12vw;
    }
    .parallax-slider .swiper-slide .content:after{
        transform: translateY(-22%);
    }

    .image-map-svg svg .item-maker.active .ani{transform: scale(2) translate(-7px, -7px) !important;}

    .tour-nav .product-list ul li a{
        padding: 0.4rem 0.4rem 0.2rem;
        font-size: 10px;
    }

    body.home-page .tour-nav{
        bottom: 50px;
    }

    .section-oveview .project-image-wrapper .section-items .item{
        width: 40px;
        height: 40px;
    }


}


#page_container .nav-tabs-default{justify-content: center; background: transparent; height: auto;}
#page_container .nav-tabs-default li{margin: 0 6px; flex: none;}
#page_container .nav-tabs-default li a{border: 1px solid #D0D0D0; border-radius: 8px;
    color: #D19847; text-transform: uppercase; cursor: pointer;
    border: 1px solid #D0D0D0;
    padding: 0;
    overflow: hidden;
    padding: 3px;
}
#page_container .nav-tabs-default li a span{
    display: block;
     padding: 8px 30px;
     border-radius: 6px;
     font-weight: 700;
}
#page_container .nav-tabs-default li a.active{background: #D19847; color: #fff;
    border-color: transparent;
    background: var(--d-gradient);
}
#page_container .nav-tabs-default li a.active span{
    background: #D19847;
}


@media screen and (max-width: 1600px){


}


.navbar-wrapper .navbar-left{
    position: absolute; left: var(--fz-32); bottom: var(--fz-32);
}
.navbar-wrapper .navbar-right{position: absolute; right: var(--fz-32); bottom: var(--fz-32);}

.nav .menu-contact{
    padding: 1rem 0px;
    display: flex;
}
.nav .menu-contact .btn{margin: 0px;}
.nav .menu-contact .social{display: flex; padding: 8px 0px; justify-content: center; align-items: center;
    margin-left: 15px;
}
.nav .menu-contact .social a{color: #fff; margin: 0px 6px;}

.nav .menu-bottom .title{font-size: var(--fz-18); font-weight: 400; color: #fff;
    text-transform: uppercase;
}



@media(hover: hover) and (pointer: fine) {

}

@media (max-width:1599px) {
    .nav__icon{    font-size: 20px;     height: 30px;}

}
@media(max-width:1399px){
    .nav__link i svg{max-height: 24px;}
}
@media (max-width:1199px) {
    .nav__link:not(.active) .nav__text{display: none;}
}



@media (max-width:991px) {
    .nav__link{min-width: 40px;}

    .nav__link i{margin-right: 0}
    .nav__link.active{
        padding-right: 0;
        padding: 0px 5px;
        flex-direction: column;
    }
    .nav__link.active i{margin-right:0;}
    .nav__link i svg{
        max-height: 20px;
    }
    .nav .nav__link:has(+ .submenu):after{display: none;}
    .nav .submenu{min-width: 200px; width: auto;}



    .submenu .btn-toggle-submenu{left: 10px;    bottom: 5px;}
}



@keyframes fadeInLeftMedium {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInLeftMedium{
    opacity: 0;
    -webkit-transform: translateX(-60px);
    transform: translateX(-60px);
}
.fadeInLeftMedium.go {
    -webkit-animation-name: fadeInLeftMedium;
    animation-name: fadeInLeftMedium;
}

@keyframes StrokeLine {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -200;
    }
}

@keyframes scaleOut {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes RotateBG2 {
    0% {
        transform: rotate(-11.17deg) scale(1);

    }
    33% {
        transform: rotate(90deg) scale(1);

    }
    60% {
        transform: rotate(135deg) scale(1.1);

    }
    80% {
        transform: rotate(35deg) scale(0.9);
        opacity: 1;
    }
    to {
        transform: rotate(-11.17deg) scale(1);
        opacity: 1;
    }
}


@keyframes nav-overview-item {
  0% {
    transform: translateX(-60px);
    opacity: 0; }
  100% {
    transform: translateX(0px);
    opacity: 1; } }

@keyframes nav-overview-item2 {
  0% {
     transform: translateX(0px);
    opacity: 1; }
  100% {
     transform: translateX(-60px);
    opacity: 0; } }

@keyframes nav-overview {
  0% {
    left: -50%; }
  100% {
    left: 0%; } }

@keyframes nav-overview2 {
  0% {
    left: 0%; }
  100% {
    left: -50%; } }

@keyframes nav-container-background {
  0% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }

@keyframes nav-list-item {
  0% {
    margin-left: -25px;
    opacity: 0; }
  100% {
    margin-left: 0px;
    opacity: 1; }
}


.page-map{
    margin-top: 0;
    height:  calc(var(--vh, 1vh) * 100 - var(--navsize) );
}
.page-map .item-map-wrapper{overflow: hidden; background: #f9f6eb}
.page-traffic .item-map-wrapper{}
.page-map .item-map video{
    width: 100%; height:100%; object-fit:contain;
}

.page-map .item-image{height: 100%;}
.page-map .item-image object.absolute,
.page-map .item-image .map-layer{position: absolute; left: 0px; top: 0px; pointer-events: none;}
.page-map .item-image img,
.page-map .item-image object.absolute,
.page-map .item-image .map-layer{height: 100%; width: auto;     max-width: none;}
.page-map .item-content.absolute{right: 160px; top: 0px; color: #fff; max-width: 40vw;
    padding: 8vh 0px 5vh;
    display: flex; flex-direction: column;
    height: 100%;
}

.page-map .svg-wrapper video{width: 100%; height:100%; object-fit:cover;

}
@media screen and (min-width: 1200px){

}


@media screen and (min-width: 992px){
    .map svg {

    }
}


/*Mat Bang*/


.section-product-map .product-detail{
    width: 100%;
    background: #fff;
    left: 0;
    top: 0;
    z-index: 2;
    display: flex;
    transition: var(--d-transition);
}

.section-product-map .product-detail .product-info{
    flex:  0 0 233px;
    position: relative;
    background: #F5EDE2 ;
    padding: calc(2 * var(--fz-45)) var(--fz-20) var(--fz-45);
    color: #888888;
     display: flex;
    flex-direction: column;
    font-size: var(--fz-16);
}
@media screen and (min-width: 1920px){
    .section-product-map .product-detail .product-info{
        flex:  0 0 13.5vw;
    }
}
.section-product-map .product-detail .sidebar-content{
    margin-bottom: calc(2 * var(--fz-45));
}
.section-product-map .product-detail .product-info .title{
    font-size: var(--fz-20);
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.2rem;
    border-bottom: solid 1px #D19847;
}
.section-product-map .product-detail .product-info ul{
    padding-left: 1rem;
    color: #D19847;
    font-size: var(--fz-18);
}
.section-product-map .product-detail .product-info ul li{margin-bottom: 0.5rem;}

.section-product-map .product-detail .product-info .btn{
    margin: 1rem 0;
    font-size: var(--fz-16);
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.5rem 1.5rem;
    color: #343741;
    background: rgba(209, 152, 71, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 1.5rem;
}

.section-product-map .product-detail .product-info .btn img{
    height: var(--fz-20);
    width: auto;
}
.section-product-map .product-detail .product-info .btn:hover{
    background: rgba(209, 152, 71, 1);
    color: #fff;
}
.section-product-map .product-detail .product-info .btn:hover img{
    filter: brightness(0) invert(1);
}


.section-product-map .product-detail .product-info  .sidebar-note{
    margin-top: auto;
    font-size: var(--fz-14);
}
.section-product-map .product-detail .product-info h2{text-transform: uppercase; color: #fff;}
.section-product-map .product-detail .product-info h4{text-transform: uppercase; color: #fff; font-size: var(--fz-16);}
.section-product-map .product-detail .product-info table{margin-bottom: 1rem;}
.section-product-map .product-detail .product-info table td{border: 0; padding: 6px 10px 6px 0px;
    text-transform: uppercase;
}
.section-product-map .product-detail .product-image{
    flex-grow: 1;
    position: relative;
    padding: calc(2 * var(--fz-45)) var(--fz-45) var(--fz-45);
    display: flex;
    flex-direction: column;
}
.section-product-map .product-detail .product-image img{

}
.section-product-map .product-detail .product-image svg{
    position: absolute;
    width: 100%;
    height: 100%;
}
.section-product-map .product-detail .product-image svg .trigger-fancybox-manual{cursor: pointer;}
.section-product-map .product-detail .product-image svg .trigger-fancybox-manual:hover rect,
.section-product-map .product-detail .product-image svg .trigger-fancybox-manual:hover path{
    fill-opacity: 0.4;
    fill: #D19847 ;
}

.product-detail .btn-close{color: #3B3C43; opacity: 1; position: absolute; right: 0px; top: 10px; padding: 0;
  background: transparent;
    margin: 0px;
    border: 0;
    width: 40px; height: 40px;
    background: #D19847;
    border-radius: 5px 0px 0px 5px;
    z-index: 2;
    cursor: pointer;
}
.product-detail .btn-close:before{
  content: ''; position: absolute; color: #fff; left: 5px; top: 5px; width: 30px; height: 30px;
  background: url('../images/icon-close-white.svg') no-repeat center center; background-size: contain;
}


@media (max-width:1199px) {
    .section-product-map .product-detail .product-info{flex: 0 0 300px;}
    .section-product-map .product-map-wrapper{height: auto !important; min-height: calc(100vw * 1080 / 1920);position: relative;    }
    .section-product-info .section-bg{width: 100%; min-height: calc(100vw * 1080 / 1920); position: relative;}
}
@media (max-width:991px) {
    .section-product-map .product-detail{flex-direction: column;}
    .product-detail .btn-close{
        top: 0;
    }
    .section-product-map .product-detail .product-image{
            padding: 40px 15px 15px;
    }
    .section-product-map .product-detail .product-image img{
        position: static;
        width: 100%;
        height: auto;
    }
    .section-product-map .product-detail .product-info{flex-grow: 1; width: 100%; order:2;
        padding: 1.5rem 1rem;
    }
    .section-product-map .product-detail .sidebar-content{
        width: 300px;
        max-width: 100%;
        margin-bottom: calc(1 * var(--fz-45));
    }
}

@media (max-width:767px) {

}

@keyframes DrawStroke2 {
    0% {
        stroke-dashoffset: 5000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.subdivision-nav{
    position: fixed;
    top: var(--fz-52);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
}
.subdivision-nav > ul {
    margin: 0;
    list-style: none;
    padding: 0;
}
.subdivision-nav ul li{margin-bottom: 0; position: relative;}
.subdivision-nav > ul > li > a{
    background: rgba(56, 115, 88, 0.9);
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    font-size: var(--fz-16);
    padding: 10px 40px 10px 15px;
    border: solid 2px rgba(191, 150, 66, 1);
    text-transform: uppercase;
    position: relative;
    white-space: nowrap;
    display: block;
}
.subdivision-nav > ul > li > a:has(+ ul):after {
    content: "\f078";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 300;
}

.subdivision-nav ul li ul {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 100%;
    background: #fff;
    padding: 10px 8px 10px;
    visibility: hidden;
    transform: translate(0, 10px);
    transition: var(--d-transition);
    pointer-events: none;
    opacity: 0;
    border-radius:0px 0px 4px 4px;
    list-style: none;
}

.subdivision-nav ul li ul li a {
    color: #D19847;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    display: block;
    padding: 10px;
    border-radius: 4px;
}
.subdivision-nav ul li ul li:hover a{
    background: #D19847;
    color: #fff;
}
.subdivision-nav ul > li:hover > ul {
    transform: translate(0, 0px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}



.nav-wrapper{
      position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    /* height: 60px; */
    z-index: 10;
}

.tour-floorplan{
    position: fixed;
    bottom: 2rem;
    left: 3rem;
    width: 303px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    color: #000;
    z-index: 9;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.75);
    border-radius: 0.5rem;
    transform: translateX(calc(100% + 3rem));
}

.tour-floorplan .content{flex-grow: 1; height: 75%;}

.tour-floorplan.show{
    opacity: 1;
    visibility: visible;
}


.tour-floorplan .btn-tour-floorplan{
    position: absolute;
    height: var(--iconsizemd);
    width: var(--iconsizemd);
    background: #D19847;
    right: calc(var(--iconsizemd) * -1);
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: 0px 0.5rem 0.5rem 0px;
    transition-duration: 0s;
    cursor: pointer;
}
.tour-floorplan .btn-tour-floorplan:hover{
    background: var(--d-gradient);
}
.tour-floorplan .btn-tour-floorplan:before{
    content: '\f054';
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    font-size: 24px;
    color: #fff;
    font-weight: 300;
}
.tour-floorplan.active{
    transform: translateX(0);
}
.tour-floorplan.active .btn-tour-floorplan{
    right: 0;
    border-radius: 0px 0.5rem 0 0px;
}
.tour-floorplan.active .btn-tour-floorplan:before{
     content: '\f053';
}


.tour-floorplan .floorplan-wrapper{height: 100%;  justify-content: center;    align-items: flex-start;
    flex-direction: column;
}
.tour-floorplan .floorplan-wrapper.show{

}
.tour-floorplan .dropdown{
    position: relative;
    z-index: 2;
    display: none;
}
.tour-floorplan .floorplan-wrapper .heading{
    position: relative;
    width: 100%;
    /*padding-right: var(--iconsizemd);
    background: #E3E3E3;
    border-radius: 0px 0.5rem 0 0px;*/
}
.tour-floorplan .floorplan-wrapper .floorplan-title{
    font-size: var(--fz-18);
    color: #D19847;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 15px;
    height: var(--iconsizemd);
    display: flex;
    align-items: center;
    justify-content: center;

}

.tour-floorplan .page-title{
    padding: 10px;
    font-size: var(--fz-16);
    color: #D19847;
    font-weight: 700;
    text-transform: uppercase;

}

.tour-floorplan .floorplan-wrapper .floorplan-image{
    padding: 10px;
}
.tour-floorplan .floorplan-wrapper .inner img{width: auto; max-height: 100% ;}
.tour-floorplan .floorplan-wrapper{position: relative; display: none;}
.tour-floorplan .floorplan-wrapper .inner{     display: inline-flex; max-height: 100%;}
.tour-floorplan .floorplan-wrapper.active{display: flex;   }
.tour-floorplan .floorplan-wrapper .makers{position: absolute; top: 0; left: 0px; width: 100%; height: 100%;}
.tour-floorplan .floorplan-wrapper .makers .item{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,1);
    border: solid 1px #D19847;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -6px;
    margin-left: -6px;
    cursor: pointer;
    z-index: 2;
    transition-duration: 0s;
    opacity: 0.7;
}
.tour-floorplan .floorplan-wrapper .makers .item:not(:active){
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    animation-name: makersItem;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;

}
.tour-floorplan .floorplan-wrapper .makers .item.active{opacity: 1; z-index: 1;   background: transparent;}
.tour-floorplan .floorplan-wrapper .makers .item.active:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90px;
    height: 90px;
    background: url("../images/icon-rada.svg") no-repeat center center; background-size: contain;
    border: 0;
    border-radius: 0;
}
.tour-floorplan.expanded .floorplan-wrapper .makers .item{ width: 30px;height: 30px; margin-top: -15px;margin-left: -15px;}
.tour-floorplan.expanded .floorplan-wrapper .makers .item.active:after{width: 100px;height: 100px;}

@media (max-width:1699px) {
    .tour-floorplan .floorplan-wrapper .inner{max-width: 960px;}
}
@media(max-width: 991px){
    .tour-floorplan{
        bottom: 7.5rem;
    }
}

@keyframes makersItem {
    0% {
        background: #D19847;
    }
    50%{
       background: #fff;
       opacity: 1;
    }
    100% {
        background: #D19847;
    }
}

.btn-trigger-back{position: fixed; left: var(--fz-36); top: var(--fz-52);
    background: rgba(52, 55, 65, 0.4);
    border-radius: 1.5rem;
    color: #fff;
    z-index: 22;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 400;
    padding: 0.5rem 1rem;
}


.header-bottom .navbar-toggler{
    border: 0px;  color: #fff;
    font-size: var(--fz-18); font-weight: 400;
    height: 2.625rem;
    min-width: 3.9rem;
    position: relative;
}
.home-page .header-bottom .navbar-toggler{
    padding-right: 3.2rem;
}
.header-bottom .navbar-toggler:focus{outline: none;box-shadow: none;}


#header .navbar-toggler-icon {
    background: transparent;
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 0.75rem;
    cursor: pointer;
    /* margin-bottom: 5px; */
    transition: 0.3s ease all;

}
#header .navbar-toggler-icon > span {

    display: block;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: #fff;
    position: absolute;
    transition: 0.3s ease all;
}

#header .navbar-toggler-icon > span:nth-of-type(1) {
    width: 100%;
    top: 0;
    left: 0%;
}
#header .navbar-toggler-icon > span:nth-of-type(2) {
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
#header .navbar-toggler-icon > span:nth-of-type(3) {
    width: 100%;
    top: 100%;
    left: 0;
    transform: translateY(-100%);
}
#header .navbar-toggler:hover .navbar-toggler-icon > span {
    width: 100%;
    transition: 0.3s ease all;
}




body.menu-open #header .navbar-toggler .navbar-toggler-icon {
    margin: 0;
    width: 1.5rem;
    height: 1.5rem;
    transform: rotate(180deg) translateY(50%);
    transition: 0.3s ease all;
    opacity: 1;
}
body.menu-open #header .navbar-toggler .navbar-toggler-icon > span {
    width: 100%;
    height: 1.5px;
    background-color: #343741;
    transition: 0.3s ease all;
}
body.menu-open #header .navbar-toggler .navbar-toggler-icon > span:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
body.menu-open #header .navbar-toggler .navbar-toggler-icon > span:nth-child(2) {
    opacity: 0;
}
body.menu-open #header .navbar-toggler .navbar-toggler-icon > span:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}


/*Overlay Menu*/

.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 22;
    background: var(--d-gradient);

    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.overlay-menu:before {
    position: absolute;
    content: '';
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: url(../images/bg-icon-1.svg) no-repeat center center;
    background-size: cover;
    /*animation-name: RotateBG2;
    animation-iteration-count: infinite;
    animation-duration: 30s;*/
    opacity: 0.3;
}
@media(min-width: 992px){
    .overlay-menu{
        /*display: none;*/
    }
}

.overlay-menu .main-menu-container {
    text-align: left;
    display: flex;
    padding: 0 var(--d-padding-sm);
    margin: 0; margin-left: auto;
    list-style-type: none;
    flex-direction: column;
    width: 100%;

}
.overlay-menu .main-menu-container::-webkit-scrollbar {
    display: none;
}

.overlay-menu .menu a {
    color: #fff;
    transition: all ease 0.4s;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
}

.overlay-menu .menu li:hover > a,
.overlay-menu .menu .current-menu-item > a{
    color: #343741;
}

.overlay-menu {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transition: all cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
    padding-bottom: 0px;
}



body.menu-open .overlay-menu {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
}

.overlay-menu .menu{list-style: none; padding: 0px;  margin-bottom: 0px;
    display: flex;
}

.overlay-menu .menu > li {
    opacity: 0;
    transform: translate(0, 50px);
    -webkit-transform: translate3d(0, 50px, 0);
    transition-delay: 0.6s;
    padding:0 var(--fz-26);
    margin: 0px;
    text-align: right;
}
.overlay-menu .menu > li a strong{font-size: 1.3em; font-weight: 600;}
body.menu-open .overlay-menu .menu li {
    transition: -webkit-transform cubic-bezier(0.165, 0.84, 0.44, 1) 1s, opacity cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 1s, opacity cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
    opacity: 1;
    transform: translate(0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    position: relative; /*padding-right: 45px;*/
    display: flex;
    align-items: center;
}


body.menu-open #header .navbar-brand{opacity: 0;}



body.menu-open{overflow: hidden !important;}
body.menu-open .overlay-menu .menu > li:nth-of-type(1) {
    transition-delay: 0.2s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(2) {
    transition-delay: 0.3s;
}
body.menu-open .overlay-menu .menu >  li:nth-of-type(3) {
    transition-delay: 0.4s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(4) {
    transition-delay: 0.5s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(5) {
    transition-delay: 0.6s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(6) {
    transition-delay: 0.7s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(7) {
    transition-delay: 0.8s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(8) {
    transition-delay: 0.9s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(9) {
    transition-delay: 1s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(10) {
    transition-delay: 1.1s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(11) {
    transition-delay: 1.2s;
}

body.menu-open .overlay-menu .menu.menu-other > li {
     transition-delay: 0.2s;
}


.overlay-menu .menu-vr-mobile{display: none;}



    .vr-page{position: fixed; overflow: hidden;}
    .overlay-menu .menu-vr-mobile{display: flex;}
    .header-bottom{
        padding: var(--fz-20) var(--d-padding-sm);
    }

    .js__toggle-menu{
        display: block !important;
        pointer-events: auto;
        padding: 0.5rem 1.2rem;
        background: var(--d-gradient);

        border-radius: 2rem;
        line-height: 1rem;
        margin-left: 1.5rem;
        line-height: 1rem;
    }
    .js__toggle-menu >span{
        display: inline-block;
        padding-top: 0.2em;
        color: #343741;
    }

    #header .navbar-toggler-icon > span{
        background: #343741;
        height: 1.5px;
        border-radius: 0.5rem;
    }


    body #header .navbar-brand{
        margin: 0;
    }
    body:not(.menu-open).layout-dark #header:before{display: none;}
    body.menu-open #header .navbar-brand{  opacity: 1;}
    body.menu-open #header{pointer-events: none;}
    body.menu-open #header .logo-color{display: none;}
    body:not(.menu-open) #header .logo-color-black{display: none;}
    body #header:before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        transform: translateY(-100%);
        opacity: 0;
        transition: var(--d-transition);
        display: none;
    }
    body.menu-open  #header:before{
        opacity: 1;
        transform: translateY(0);
    }

    .overlay-menu{
        bottom: auto;
        padding: var(--fz-20) 0;
        min-height: calc(6.927vw * 96 / 133 + 2*var(--fz-20) );
    }
    .overlay-menu{
        background: #F5EDE2;
        border-bottom: solid 3px #D19847;
    }
    .overlay-menu .menu{
        /*margin-left: calc(9 * var(--fz-18));*/
        margin-right: calc(9.5 * var(--fz-18));
    }
    .overlay-menu .menu li{
        margin: 1rem 1.5rem;
    }
    .overlay-menu .menu li a{
        font-size: var(--fz-24);
        color: #343741;
        padding-top: 0.25em;
    }
    .overlay-menu .menu li:hover a{
        color: #CA8C3E;
    }

    @media(max-width: 991px){


    }


@media (min-width:768px) {
    .overlay-menu{
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
    }
    body.menu-open .overlay-menu{
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
    }
}
@media (max-width:767px) {
    .vr-page  .nav-wrapper{
        width: 100%;
        height: 60px;
    }
    .footer-control{

        bottom: 8px;
        right: 8px;
    }
    .footer-control a {
        margin-left: 0.5rem;
        width: 24px;
        height: 24px;
    }


    .tour-nav{
        padding-right: 0;
        bottom: 75px;
        top: auto;
        right: 50%;
        transform: translateX(50%);
    }
    .tour-nav .btn-toggler{
        top: auto;
        bottom: -40px;
        right: 50%;
        transform: translateX(50%);
    }
    .tour-nav .btn-toggler:before{
        transform: translateX(-50%) translateY(-50%) rotate(180deg);
    }
    .tour-nav.show .btn-toggler:before{
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }

    .tour-nav.show{
        transform: translateY(0) translateX(50%);
    }
    .tour-nav .swiper-nav-wrapper{
        width: 500px;
        max-width: 80vw;
    }
    .tour-nav .swiper-wrapper{
        align-items: center;
    }
    .tour-nav .swiper-nav-wrapper .swiper-slide-wrapper{

        height: auto;
        min-height: unset;
    }
    .tour-nav .swiper-nav-wrapper .swiper .swiper-slide{
        padding: 0 1rem;
    }
    .tour-nav .swiper-nav-wrapper .swiper .swiper-slide.swiper-slide-active{
        padding: 0;
    }
    .tour-nav .swiper-nav-wrapper .swiper .swiper-slide .thumbnail,
    .tour-nav .swiper-nav-wrapper .swiper .swiper-slide.swiper-slide-active .thumbnail{
        padding-top: calc(100% * 9 / 16);
    }
    .tour-nav .swiper-nav-wrapper .swiper .swiper-slide .thumbnail .img,
    .tour-nav .swiper-nav-wrapper .swiper .swiper-slide.swiper-slide-active .thumbnail .img{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .tour-nav .swiper-nav-wrapper .swiper-button-prev{
        left: 0;
        top: 50%;
        transform: translateX(-90%) translateY(-50%) rotate(-90deg);
    }
    .tour-nav .swiper-nav-wrapper .swiper-button-prev:hover{
        transform: translateX(-90%) translateY(-50%) rotate(-90deg);
    }
    .tour-nav .swiper-nav-wrapper .swiper-button-next{
        right: 0;
        left: auto;
        top: 50%;
        transform: translateX(90%) translateY(-50%) rotate(-90deg);
    }
    .tour-nav .swiper-nav-wrapper .swiper-button-next:hover{
        transform: translateX(90%) translateY(-50%) rotate(-90deg);
    }

    .home-page .header-bottom .navbar-toggler{
        padding-right: 0;
    }
    .header-bottom .navbar-toggler{
        height: 2.2rem;
    }
    .js__toggle-menu >span{
        display: none;
    }
    .js__toggle-menu{

    }
}

@media (max-width:992px) {
    .overlay-menu .menu{margin-left: 0; margin-right: 0}

}
@media (max-width:1399px) {


}

@media (max-width:1199px) {
    .overlay-menu .menu > li a{font-size: var(--fz-20);}
    .overlay-menu .sub-menu li a{font-size: var(--fz-16);}


}
@media (max-width:991px) {

    .overlay-menu{height: 100vh}

    .overlay-menu .main-menu-container{display: block; width: 100%;     text-align: center;

    }
    .overlay-menu .menu{flex-direction: column;}
    body.menu-open #header .navbar-brand{opacity: 1;}

    body .overlay-menu .menu li{

    }
    .overlay-menu .menu li{
        text-align: center;
        justify-content: center;
        margin: 1rem 0;
    }
    .overlay-menu .menu > li a,
    .vr-page .overlay-menu .menu li a{font-size: var(--fz-52); }

    body.menu-open .overlay-menu .menu li{
        flex-direction: column;
    }

    body.menu-open .footer-control,
    body.menu-open .nav-wrapper{opacity: 0}

}
@media (max-width:767px) {

    .overlay-menu .menu > li{  padding: 7px 0px;  }
    .overlay-menu .menu li{
         margin: 0.5rem 0;
    }
}



.mask {
    position: fixed;left: 0; top: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    z-index: 99999;
    transition: var(--d-transition);
    transition-duration: 1s;
    transition-delay: 0.5s;
    background: #D19847 ;
}


.mask::before {
    content: '';
    height: 100%;
    position: relative;
    display: block;
    width: 100%;
    pointer-events: none;
    background:  url(../images/bg-icon-1.svg) no-repeat center center;
     background-size: cover;
     opacity: 0.2;
}

.mask.up{opacity: 0; }
.wave-svg {
    margin: -10px 0 0;
    transform-origin: 50% 0;
}


.mask .mask-bg{position: absolute; left: 0; top: 0; width: 100%;   height: 100%;
    transition: var(--d-transition);
    z-index: 4;

}
.mask .mask-bg svg{
    position: absolute;width: 320px; max-width: 45vw; height: auto; left: 50%; top: 50%; transform: translate(-50%,-50%);
    transition: var(--d-transition);
    transition-duration: 1.5s;
    z-index: 2;

}
.mask.up .mask-bg svg{opacity: 0; filter: blur(15px);}

body:not(.ready){}
body:not(.ready) .navbar-wrapper,
body:not(.ready) .header-right,
body:not(.ready) .btn-toggle-menu.navbar-toggler,
body:not(.ready) .header-logo
{
    opacity: 0;
}

body.ready .mask {
    pointer-events: none;
    z-index: -99999;
}
#logo_vivus path{fill-opacity: 0; stroke: #fff; stroke-width: 0.3px; }
#logo_vivus.done path{/*fill-opacity: 1; stroke-width: 0;*/}



.scroll-downs{
    position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
    transition: var(--d-transition);
    transition-delay: 1s;
    color: #fff;
    z-index: 22;
}
.scroll-downs .mousey{
    width: 1.2rem;
    margin: auto;
}
.scroll-downs .scroll-text{
    white-space: nowrap;
    font-weight: 400;
    margin-top: 0rem;
}
.scroll-downs  {}

body.vr-page.done .text-note-wrapper {
    z-index: 8;
}
.vr-page .text-note{
    position: fixed;
    bottom: 1.2rem;
    left: var(--d-padding-sm);
    font-weight: 300;
    color: #fff;
    font-family: ExemplarPro;
    white-space: nowrap;
}
body.vr-page.after-10s .scroll-downs{
    display: none !important;
}

body .footer-control{
    opacity: 0;
    pointer-events: none;
}
body.tour-nav-show .footer-control{
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 767px) {
    .vr-page .text-note{
        bottom: 8px;
        transition: var(--d-transition);
    }
    body.vr-page:not(.tour-nav-show) .text-note{
        left: 50%;
        transform: translateX(-50%);
    }
}



.section-top{
    margin-top: calc(6.927vw * 96 / 133 + 2 * var(--fz-20) );
}
@media (max-width: 991px) {
    .section-top{
        margin-top: calc(80px * 96 / 133 + 2 * var(--fz-20) );
    }
}
.section-news-detail .editor-content{font-size: var(--fz-18);}