@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.375vw;
    --navsize: 2.604166666666667vw;
  --d-transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  --d-gradient: linear-gradient(90deg, rgba(181,143,54,1) 0%, rgba(230,211,121,1) 42%, rgba(191,150,66,1) 100%);

  --text-g:  linear-gradient(90deg, rgba(181,143,54,1) 0%, rgba(230,211,121,1) 42%, rgba(191,150,66,1) 100%);
  --fz-13: 0.6770833333333333vw;
  --fz-14: 0.7291666666666667vw;
  --fz-16: 0.8333333333333333vw;
  --fz-18: 0.9375vw;
  --fz-52: 2.708333333333333vw;
  --fz-40: 2.083333333333333vw;
  --fz-36: 1.875vw;
  --fz-32: 1.666666666666667vw;
  --fz-28: 1.458333333333333vw;
  --fz-24: 1.25vw;
  --iz-1: 3.125vw;
  --iz-2: 3.75vw;
  --iz-3: 2.333333333333333vw;
}
@media (max-width:1600px) {
    :root {
        --iconsize: 40px;
        --iconsizemd: 40px;


    }
}
@media (max-width:1299px) {
    :root {

      --fz-52: 32px;
      --fz-40: 24px;
      --fz-36: 20px;
      --fz-32: 18px;
      --fz-28: 16px;
      --fz-24: 16px;

        --fz-18:14px;
        --fz-16:13px;
        --fz-14: 12px;
        --fz-13: 11px;

      --iz-1: 36px;
     --iz-2: 46px;
     --iz-3: 36px;
     --navsize: 40px;
    }
}

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

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

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



body { font-family: 'Cormorant Garamond', sans-serif;  margin: 0px; padding: 0px;
    font-size: var(--fz-14); line-height: 1.4; overflow-x: hidden; font-weight: 400;
    color: #D9D7C1; background: #fff; }
/*----------------------
1.1. Typography
------------------------------*/
h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', sans-serif; color: #333; margin: 0 auto 1rem; font-weight: 700; line-height: 1.4; }
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: #333;  }
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;}
.font-1{
    font-family: 'Cormorant Garamond', serif;
}
.font-2{
    font-family: 'Plus Jakarta Sans', serif;
}


/* =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: 5px; background: #1E3E2E; border: medium none; color: #fff; font-size: 16px; height: auto; margin: auto; padding: 5px 30px; 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; }
.btn .fa { font-size: 22px; margin-left: 5px; vertical-align: middle; }
.btn.btn-lg { font-size: 24px; line-height: 30px; padding: 22px 50px; }
.btn.btn-sm { font-size: 14px; padding: 8px 25px; }
.btn:hover, .btn:focus { color: #ffffff; outline: none; background: #81886D; box-shadow: none; }
.btn-link { font-weight: 800; font-size: 17px; color: #3C4F26; }
.btn.btn-outline { background: none; color: #fff; border: #fff solid 1px; padding: 5px 25px 5px 25px; font-weight: 400; position: relative;}
.btn.btn-outline:hover { background: #3C4F26; color: #fff; }
.btn-transparent { background: transparent; border: solid 1px #3C4F26; color: #3C4F26; font-size: 14px; }
.btn-transparent:hover { background: #3C4F26; border: solid 1px #3C4F26; }
.btn.btn-default{background:var(--d-gradient); color: #1E3E2E; font-size: var(--fz-18);
    padding: 5px 25px 2px;
    text-transform: uppercase;
    font-weight: 700;
}
.btn-primary{background: #D9D7C1; color: #3C4F26;}
.btn-primary:hover{}
.btn-gradient{background: var(--d-gradient); padding: 2px; }


/*-------------------------
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 .tooltip-inner{background: #fff; color: #3C4F26;}

/*-------------------------------------
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: 15px; position: relative; }
.form-group.has-error .help-block{color: #3C4F26; font-size: 13px; text-align: center; display: block;}
.form-label { color: #111111; font-size: 14px; font-weight: 400; margin: 0 auto 8px; }

.form-control { background: #fff none repeat scroll 0 0; border: 0 none; border-radius: 6px; border: #ccc solid 1px; box-shadow: none; color: #888888; font-size: 14px; height: 50px; line-height: 30px; padding: 0 15px; }
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: 'Belleza', 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: #3C4F26; }
.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: #3C4F26; }
.panel-heading:hover .panel-title a { border-color: #3C4F26; }
.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: #3C4F26; text-transform: uppercase; font-weight: 700; margin: 0 auto var(--fz-32);}
.section-title.lg{font-size: var(--fz-28);}
.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: 45px 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: #3C4F26;}



/*--------------------
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: #3C4F26; 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 #3C4F26;}
.nav-tabs > li { margin-bottom: 0; margin-right: 50px;}
.tab-content {margin-top: 25px; padding: 25px 0px 25px;}

.nicescroll-rails{width: 2px !important; background: #386045; margin-left: 2rem;}
.nicescroll-rails .nicescroll-cursors{transform: translatex(1px);}
.nicescroll-rails.nicescroll-rails-hr{
    transform: translateX(0) translateY(30px);
}
.nicescroll-rails.progress-rail{display: none ; visibility: hidden;}

.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% * 282 / 282);}
.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);
    font-size: calc(0.4 * var(--iz-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: 10px; }
.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{color: #3B3C43; opacity: 1; position: absolute; right: 20px; top: 15px; padding: 0;
  background: transparent;
    margin: 0px;
    border: 0;
    width: 20px; height: 20px;
}
.modal-header .btn-close:before{
  content: ''; position: absolute; color: #fff; left: 0; top: 0; width: 100%; height: 100%;
  background: url('../images/icon-close.svg') no-repeat center center; background-size: contain;
}
.modal-header .btn-close:hover{border: 0;}
.modal-content{}
.modal-body{ padding: 20px 50px 40px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  font-size: 16px;
  color: #3B3C43;
}
.modal-content .form{}
.modal-content .form p{font-size: 16px; text-align: center; }
.modal-content .form-control{background: transparent; border: 0px; border-bottom: solid 1px #CCCCCC; border-radius: 0px; text-align: center;
  color: #000; text-transform: none;
}
.modal-content .form-control::placeholder {color: #CCCCCC;  opacity: 1;}
.modal-content .form-control:-ms-input-placeholder {color: #CCCCCC;}
.modal-content .form-control::-ms-input-placeholder {color: #CCCCCC;}
.modal-content select.form-control{    text-align-last: center;}
.modal-content select.form-control option{color: #000;}
.modal-content .btn{text-transform: uppercase; min-width: 200px; padding: 10px 20px;}
.modal-content .form  .form-check{display: inline-block;}
.modal-content .form .form-check-input{margin-top: 0.1em;}
.modal-content .form .hotline{color: #3C4F26; font-size: 18px;}
.modal-content .form .form-group-text small{font-size: 12px; }


.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(60, 79, 38, 0) 0%, rgba(60, 79, 38, 1) 100%);
    padding-bottom: 30px;
    padding-top: 90px;
}

@media (max-width:1599px) {

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


.fancybox-is-open.fancybox-container .fancybox-bg{ opacity: 1;}
.fancybox-container .fancybox-infobar{color: #fff; mix-blend-mode:normal;}
.fancybox-container .fancybox-bg{background: rgba(71, 96, 49, 0.95); }
.fancybox-container .fancybox-button{background: transparent; color: #fff;}
.fancybox-container .fancybox-navigation button{
    width: 51px;
    height: 51px;
    transition: var(--d-transition);

    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2.5px);
}
.fancybox-container .fancybox-navigation button:hover{background-color: rgba(0, 0, 0, 0.6);}
.fancybox-container .fancybox-navigation button:before{background: transparent}
.fancybox-container .fancybox-caption{
    font-size: var(--fz-14);
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', serif;
    text-align: center;
    text-transform: uppercase;
    border: 0;
}

/*================
2. Header
===========================*/
body,html{ height: 100%;}
body{    overflow: hidden;  position: fixed;   width: 100%; }

#element_help{height: 480px; max-height: 90vh;}
#element_help img{max-height: 100%;}
#element_help.popup-content{border-radius: 0; border: 0px; padding: 0px; background: transparent;}
#element_help.popup-content .fancybox-close-small{right: 0.75rem; top: 0.75rem; 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;
    border-radius: 50%;
}
#element_help.popup-content .fancybox-close-small:hover:after{background: #000; }

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


.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: #3C4F26;
    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: #3C4F26}
@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: #3C4F26;
    color: #fff;

}
.loading-overlay .bg{
    position: absolute; z-index: 2;

   pointer-events: none;
   height: 90%;
   aspect-ratio: 1;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}
.loading-overlay .bg:before{
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: url('../images/bg-icon-menu.png') no-repeat center center;
    background-size:cover;
    /*transform: scale(0.5) rotate(45deg);*/
    transform: scale(0.5);
    opacity: 0;
    transition: var(--d-transition);
    transition-duration: 2s;
    animation-name: RotateBG;
    animation-iteration-count: infinite;
    animation-duration: 60s;
}

.loading-overlay .overlay-logo{
    position: absolute;
    width: 12.29vw; min-width: 180px; height: auto;
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%,-50%) scale(0.7);
    transition: var(--d-transition);
    transition-duration: 1s;
    transition-delay: 1.5s;
}
.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;}


body:not(.ready){overflow: hidden !important;}
body.ready .loading-overlay{ transform: translateY(0);  transition:  var(--d-transition);  opacity: 1;}

body.ready .loading-overlay .overlay-logo{opacity: 1; transform: translate(-50%,-50%) scale(1);}
body.ready .loading-overlay .bg:before{
    opacity: 1;
    transform: scale(1);

}

body.done .loading-overlay{
  transition:  var(--d-transition);
  pointer-events: none;
  /*transform: translateY(-100%); */
  transform: scale(2);
  transition-duration: 1s;  opacity: 0;
}
body.done .loading-overlay:before,
body.done .loading-overlay:after{height: 0px;}


body.done .loading-overlay svg,
body.done .loading-overlay .svg,
body.done .loading-overlay .bg,
body.done .loading-overlay .content{/*opacity: 0;*/}

.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; bottom: var(--navsize); min-height: 42px; display: 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{width: 80px; height: 40px; background:  url('../images/bg-tour-nav.svg') no-repeat center center; background-size: contain; position: absolute; left: 50%;
    margin-left: -40px; top: -40px ;
    transition: var(--d-transition); z-index: 2; cursor: pointer;
}
.tour-nav .btn-toggler:before{
    content: '';
    position: absolute;
    width: 50%;
    height: 0;
    padding-top: 50%;
    left: 50%;
    top: 50%;
    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 .swiper-nav-wrapper{flex: 0 0 74vw; width: 74vw; background: rgba(0, 0, 0, 0.30); padding: 20px 10px;
        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;}
.tour-nav .swiper{}
.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{
    background: var(--d-gradient);
}
.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 .item{padding: 0px;}
.tour-nav h4{font-size: var(--fz-18); font-weight: 400; margin: 0px 0px 0px; color: #fff;
     text-align: center;
     text-transform: none;
    background: #1E3E2E;
    font-family: 'Cormorant Garamond', sans-serif;
    padding: 0.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.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% * 139 / 239);
  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: 'Playfair', sans-serif;
    margin: 0px 0.5rem;
}
.tour-nav .swiper-filter a span{display: block; background: #1E3E2E; color: #fff;
    padding: 4px 20px;
    border-radius: 5px;
}
.tour-nav .swiper-filter a.active span{
    color: #1E3E2E;
    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: #3C4F26; font-weight: 700; text-transform: uppercase; padding: 10px 40px; border-radius: 40px;}
.tour-nav .swiper-tab .inner a.active{
    color: #fff;
    background: #3C4F26;
}
.tour-nav .swiper-tab .inner a:hover{

}


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


@media (max-width:767px) {
    .tour-nav .btn-toggler{
        width: 60px;
        height: 30px;
        margin-left: -30px;
        top: -10px;
    }
    .tour-nav .swiper-nav-wrapper{
        flex: 0 0 100%;
        width: 100%;
        padding: 15px 10px;
    }
}


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

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


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

}
.utilities-nav > ul{
    margin: 0;
    display: inline-flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 4px;

}
.utilities-nav > ul > li{
    position: relative;
    margin: 0px 0px;
}
.utilities-nav > ul > li > a{

    color: #D9D7C1;
    font-weight: 700;
    font-size: var(--fz-16);
    border: solid 2px transparent;
    height: 2vw;
    padding: 0px 40px 0px 40px;
    line-height: 1.1em;
    min-height: 32px;
    display: flex;
    align-items: center;
    background: transparent;
}
.utilities-nav > ul > li > a:before {
    content: '';
    position: absolute;
    right: 0;
    top: 6px;
    width: 3px;
    height: calc(100% - 12px);
    background: url(../images/line-menu.svg) no-repeat center center;
    background-size: 100% 100%;
}
.utilities-nav > ul > li:last-child > a:before{display: none;}

.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: transparent;
    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: #1E3E2E}

@media(max-width:991px){
    .utilities-nav {
        min-height: 70vh;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        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;}
}
@media(max-width:767px){
    .utilities-nav > ul > li > a{
        padding: 0px 15px;
    }
}

.section-utilities{
    height: calc(100vh - var(--navsize));
}
.section-utilities .tab-content{  margin: 0; padding: 0;}
.section-utilities .section-content-number{
    width: 20rem;
    padding: 1.2rem 1.5rem;
    position: absolute;
    left: 0;
    top: 54%;
    transform: translateX(0) translateY(-50%);
    z-index: 4;

    background: rgba(60, 79, 38, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 0 1rem 1rem 0;
    transition: var(--d-transition);
}
.section-utilities .section-content-number .section-title{color: #fff; border-bottom: solid 1px #fff;}
.section-utilities .section-content-number .btn-toggle{
    position: absolute;
    left: 100%;
    top: 1rem;
    background: rgba(217, 215, 193, 0.7);
    backdrop-filter: blur(2.5px);
    /* Note: backdrop-filter has minimal browser support */
    border-radius: 0px 4px 4px 0px;
    width: var(--iz-1);
    height: var(--iz-1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(0.5 * var(--iz-1));
    cursor: pointer;
}
.section-utilities .section-content-number .btn-toggle:hover{
    background-color: #3C4F26;
}
.section-utilities .section-content-number .btn-toggle i{
    transition: var(--d-transition);
}
.section-utilities .section-content-number.hide{
    transform: translateX(-100%) translateY(-50%);
}
.section-utilities .section-content-number.hide .btn-toggle i{
    transform: rotate(180deg);
}

.section-utilities .section-content-number .section-content-inner {
    height: 100%;
    padding-right: 1rem;
}
.section-utilities .section-content-number .section-content {
     max-height: 55vh;
    pointer-events: auto;
}
.section-utilities .section-content-number .accordion-header a{
    cursor: none;
}
.section-utilities .section-content-number .accordion-header a.trigger-popup{
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}
.section-utilities .section-content-number .accordion-header a.trigger-popup:after{
    content: '';
    display: inline-flex;
    width: 20px;
    height: 20px;
    background: url('../images/icon-eye.svg') no-repeat center center;
    background-size: contain;
    transition: var(--d-transition);
    transform-origin: right;
}
.section-utilities .section-content-number .accordion-header a.trigger-popup:hover{
    color: #FBFAED;
}
.section-utilities .section-content-number .accordion-header a.trigger-popup:hover:after{
    transform: scale(1.2);
}

.section-utilities .utilities-image-wrapper{
    height: calc(100vh - var(--navsize));
}
.section-utilities .utilities-image-wrapper img{
    width: 100%; height: 100%; object-fit: cover;
}

.utility-sidebar .accordion-item{
    background: transparent;
    border: 0;
    border-radius: 0;
    border-bottom: solid 1px #fff;
}
.utility-sidebar .accordion-item .accordion-body{
    border-top: solid 1px #fff;
}
.utility-sidebar .accordion-item .accordion-header .accordion-btn{
    font-size: var(--fz-18);
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.6rem 0;
    background: transparent;
    color: #fff;
    box-shadow: none;
    border-radius: 0;
    display: flex;
}
.utility-sidebar .accordion-item .accordion-header .accordion-btn small{
    display: block;
    text-transform: none;
    font-weight: 400;
    font-style: italic;
    color: rgba(255, 255, 255, 0.65);
}

.utility-sidebar  .accordion-item:last-child {
    border-bottom: 0;
}
.utility-sidebar .accordion-item .accordion-item .accordion-header .accordion-btn{
    font-size: var(--fz-16);
    text-transform: none;
}
.utility-sidebar .accordion-item .accordion-item .accordion-item{
    border-bottom: 0;
}
.utility-sidebar .accordion-item .accordion-item .accordion-item  .accordion-header .accordion-btn{
    font-weight: 400;
    padding: 0.2rem 0;
}

.utility-sidebar.child-count-0 .accordion-item .accordion-header .accordion-btn{
    font-weight: 400;
    font-size: var(--fz-16);
    text-transform: none;
}
.utility-sidebar.child-count-1 .accordion-item .accordion-item .accordion-header .accordion-btn{
    font-weight: 400;
}


.utility-sidebar h2{font-family: 'Plus Jakarta Sans', serif;}
.utility-sidebar .accordion-body{padding: 0}

.section-utilities .accordion-button::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.section-utilities .accordion-button:not(.collapsed)::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}



.footer-control {

  display: flex;
  flex-direction: column;
      justify-content: center;
}

.footer-control a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
    color: #3C4F26;
    transition-duration: 0s;
}
.footer-control a:hover,
.footer-control a.active {
    color: #EEAAAA;
}
.footer-control a.btn-toggle{margin-bottom: 0}
.footer-control a.btn-toggle:hover,
.footer-control a.btn-toggle.active{
    color: #fff;
}

.footer-control a .icon{display: flex;
    width: var(--iconsize);
    height: var(--iconsize);
    flex: 0 0 var(--iconsize);
    font-size: calc(var(--iconsize) / 2);
    background: #fff ;
    position: relative;
    z-index: 2;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    border: solid 2px #3C4F26;
    order: 2;
    transition: var(--d-transition);
}
.footer-control a.btn-toggle:hover .icon,
.footer-control a.btn-toggle.active .icon {
    background-color: #EEAAAA;
}


.footer-control .inner{  transition: var(--d-transition); transition-duration: 0.2s;
    display: flex; flex-direction: column;
    position: absolute; right: 0;
    bottom: calc(var(--iconsize) + 10px);
    transform: scaleY(0);
    transform-origin: bottom center;
}
.footer-control.active .inner{transform: scaleY(1);}


.footer-control a .title{white-space: nowrap;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);
    color: #fff;
    margin-right: 6px;
    font-family: 'Playfair', sans-serif;
    opacity: 0;
    pointer-events: none;
    transform: translateX(10px);
    transition: var(--d-transition);
}
.footer-control a:hover .title{
     transform: translateX(0px);
     opacity: 1;
}




.footer-control a.sound i::before {

}
.footer-control a.sound.active i::before {
  content: "\f11f";
}
.footer-control a.autotour i::before {

}
.footer-control a.autotour.active i::before {
  content: "\f04c";
}
.navbar-wrapper.min .footer-control .btn-toggle{}

.page-overview{
    width: 100%;
    height: calc(100vh - var(--navsize));
}

.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);}
.page-library .item.item-document .item-thumb{
    padding-top: calc(100% * 529 / 366);
}


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

.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;
    display: 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{    max-width: 1024px;}
#projectInfoModal .modal-dialog .modal-body{background: #fff; padding: 0; display: flex;    align-items: center; position: relative;}
#projectInfoModal .modal-dialog .modal-body .col-thumb{flex: 0 0 42%; width: 42%; 
    background: url('../images/loading-overlay-bg.png') no-repeat center center; background-size:cover;
    display: flex; flex-direction: column; padding: 50px 30px;
}
#projectInfoModal .modal-dialog .modal-body .col-thumb .logo{width: 115px; height: auto; margin-bottom: 30px;}
#projectInfoModal .modal-dialog .modal-body .col-content{padding: 40px 50px;flex-grow: 1;}
#projectInfoModal .modal-dialog .modal-body .col-content .section-title{font-size: 36px; color: #3C4F26;}
#projectInfoModal .modal-dialog .modal-body .col-content .description{font-weight: 700;
    margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #3C4F26;;
}
#projectInfoModal .modal-header{position: absolute; right: 0px; top: 0px;z-index: 2;}


#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: #3C4F26; 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;}
}



/*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: #3C4F26;
  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: #3C4F26;
}

#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: #1E3E2E;
  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: #1E3E2E;
}

#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: #3C4F26}

.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: #D9D7C1;
    /*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 #3C4F26; }

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

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

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


/*Mobile Responsive*/



.btn-toggle-menu.navbar-toggler{
     position: fixed; left: 0px; top: 20px;
      width: 35px;
    height: 35px;
     background: #3C4F26;
    border-radius: 0px 5px 5px 0px;
     cursor: pointer;
     transition: 0.3s ease all;
     box-shadow: none;
     z-index: 1063;
}
.btn-toggle-menu .navbar-toggler-icon {
    background: transparent;
    width: calc(100% - 20px) ;
    height: calc(100% - 20px) ;
    position: absolute;
    top: 10px;
    left: 10px;


    /* margin-bottom: 5px; */




}
.btn-toggle-menu .navbar-toggler-icon > span {

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

.btn-toggle-menu .navbar-toggler-icon > span:nth-of-type(1) {

    top: 0;
    left: 0%;
}
.btn-toggle-menu .navbar-toggler-icon > span:nth-of-type(2) {

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

body.menu-open .links{display: none;}
body.menu-open .header-right .header-right .dropdown-language > a{}
body.menu-open .btn-toggle-menu .navbar-toggler{color: #fff; background: transparent;}
body.menu-open .btn-toggle-menu .navbar-toggler:hover{
    color: #B39662;
}
body.menu-open .btn-toggle-menu .navbar-toggler-icon {
    margin: 0;

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


@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: 40px;}
    
    
}
@media (max-width: 991px){
    #projectInfoModal .modal-dialog .modal-body .col-content .section-title{    font-size: 27px;}
    #projectInfoModal .modal-dialog .modal-body .col-content{    padding: 20px 40px;}
    #projectInfoModal .modal-dialog .modal-body .col-content .description{    margin-bottom: 15px;padding-bottom: 15px;}
    #projectInfoModal .modal-dialog .modal-body{}

    #utilitiesModal .modal-dialog .modal-body{background: transparent; padding-bottom: 0;}
    #utilitiesModal .modal-dialog .modal-body .col-content{position: relative; margin-top: -30px;    max-height: none;
        padding: 45px 15px 30px;
    }
    #utilitiesModal .modal-dialog .modal-body .col-content{}
    #utilitiesModal .modal-dialog .modal-body .col-content .section-title{font-size: 27px;}
    #utilitiesModal .modal-dialog .modal-body .col-content .description{margin-bottom: 10px;}
    .navbar-wrapper.min .navbar .navbar-right{right: 15px; }

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


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



    #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; ;
    }
     
}


#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{
    color: #1E3E2E; text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
     padding: 6px 20px;
     border-radius: 2rem;
     font-weight: 700;
     border: 1px solid #81886D;
     color: #81886D;
}
#page_container .nav-tabs-default li:hover a,
#page_container .nav-tabs-default li a.active{
    background: #3C4F26;
    border-color: #3C4F26;
    color: #D9D7C1;
}



@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;
}



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

.nav {
    width: 100%;
    height: var(--navsize);
    background-color: #3C4F26;
    display: flex;
    z-index: 2;
    position: relative;
}
.nav li{position: relative;   flex: 1; margin: 0px;}

.nav__link {
    display: flex;

    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;

    font-size: var(--fz-24);
    color: #81886D;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
    position: relative;
    background: #3C4F26;
}
.nav__link i{margin-right: 9px;}
.nav__link:before{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: url('../images/line-menu.svg') no-repeat center center;
    background-size: 100% 100%;
}
.nav li:last-child .nav__link:before{
    display: none;
}
.nav .nav__link:has(+ .submenu):after {
    content: "\f077";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}


.nav__link i svg{max-height: 1.614583333333333vw;}


.nav__link:hover,
.nav__link.active {
    color: #D9D7C1;
}
.nav__link:hover:before,
.nav__link.active:before{

}

.nav__link:hover svg path,
.nav__link.active svg path{fill: url(#nav_menu_hover)}
.nav__link:hover span,
.nav__link.active span,
.nav__link:hover:has(+ .submenu):after,
.nav__link.active:has(+ .submenu):after{
    /*background: var(--d-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;*/
}


.nav .submenu{
    position: absolute; left: 0px; width: 100%; bottom: 100%; background: #fff; padding: 10px 10px;
    visibility: hidden;
    transform: translate(0, -10px);
    transition: var(--d-transition);
    pointer-events: none;
    opacity: 0;
    border-radius: 0px;
    margin-bottom: 5px;
    list-style: none;
}
.nav .submenu:after{content: ''; position: absolute; width: 100%; height: 6px; left: 0; bottom: -6px}
.nav > li > ul.show {
    transform: translate(0, 0px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.nav .submenu a{padding: 0.5rem 0; display: block;font-weight: 700; font-size: var(--fz-24); color: #3C4F26;
    text-transform: uppercase;
}
.nav .submenu a:last-child{border: 0px;}
.nav .submenu a:hover{ }


.nav__icon {
    font-size: 27px; height: 36px; display: flex; align-items: center;
}
.nav__icon.filmore-icon-khac{font-size: 24px;}



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

}

@media (max-width:1599px) {
    .nav__icon{    font-size: 20px;     height: 30px;}
    .footer-control{bottom: 54px;}
}
@media(max-width:1399px){
    .nav__link i svg{max-height: 24px;}
}
@media (max-width:1199px) {

}



@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;}
}
@media (max-width:767px) {
    .nav__link{
        padding: 0 0.75rem;
        font-size: 12px;
    }
    .menu-vitri .nav__link:before{display: none;}
}
@media (max-width:400px) {
    .nav__link{
        padding: 0 0.5rem;
        font-size: 11px;
    }
}



@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 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; }
}


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

.mask::before{content: '';}
.mask::before {
    height: 100vh;
    position: relative;
    display: block;
    width: 100%;
}

.mask.up{opacity: 0; }
.wave-svg {
    margin: -10px 0 0;
    transform-origin: 50% 0;
}
.mask::before {
    background: #1E3E2E;
}

.mask .mask-bg{position: absolute; left: 0; top: 0; width: 100%;    height: 100vh;

    background-size: cover;
    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;

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

body:not(.ready){background: #1E3E2E}
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;}



.page-map{
    margin-top: 0;
    height:  calc(var(--vh, 1vh) * 100 - var(--navsize) );
}
.page-map .map-embed{height:  calc(var(--vh, 1vh) * 100 - var(--navsize) );
    border: var(--fz-18) solid #81886D;
}
.page-map .map-embed iframe{
    height: 100%;
    min-height: 450px;
}
.nav-hover .page-map .map-embed iframe{pointer-events: none;}
.page-map .section-content{
    padding: var(--d-padding) 0;
    width: 28vw;
    min-width: 280px;
    max-width: 100%;
    margin: 0px auto;

}
.page-map .section-title{
    margin-bottom: var(--fz-52);
    text-align: center;

}
.page-map .section-title img{
    height: 8.4375vw;
    min-height: 80px;
}
.page-map .section-items .item{
    border-left: solid 3px #3C4F26;
    padding-left: var(--fz-24);
    color: #3C4F26;
    font-size: var(--fz-16);
    margin-bottom: var(--fz-32);
}
.page-map .section-items .item .title{
    font-size: var(--fz-36);
    font-weight: 700;
}

.page-map .item-map-wrapper{overflow: hidden;}
.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{position: absolute; left: 0px; top: 0px; pointer-events: none;}
.page-map .item-image img,
.page-map .item-image object.absolute{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*/

/*Product Map*/
.section-product-map{
    /*height: calc(var(--vh, 1vh) * 100);*/
    height: calc(var(--vh, 1vh) * 100 - var(--navsize) );
    overflow: hidden;
}
.section-product-map .product-map-wrapper{position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
@media(max-width: 1199px){
    /*.section-product-map .product-map-wrapper .panzoom-parent{
        width: 100vw;
        height: calc(100dvh - var(--navsize));
    }
    .section-product-map .product-map-wrapper .panzoom{
        aspect-ratio: 1920 / 980;
        height: calc(100dvh - var(--navsize));
    }*/
}


.section-product-map .product-map{
    position: absolute;
    width:100%; height: 100%;
}
.section-product-map .product-map .inner{
     background-repeat: no-repeat;
     background-size: 100% auto;
     width:100%; height: 100%;
}
.section-product-map .product-map .inner,
.section-product-map .product-map .items,
.section-product-map .product-map .svg-map{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.section-product-map .product-map .svg-map svg{
    width: 100%;
    height: auto;
}
.section-product-map .item{position: absolute; z-index: 2; pointer-events: none;}
.section-product-map .item a{position: relative;
    text-align: left;
    background: rgba(60, 79, 38, 1);
    font-size: var(--fz-18);
    font-weight: 700;
    padding: 5px 10px;
    color: #D9D7C1;
    transform: translateX(-50%) translateY(-100%);

}
.section-product-map .item.placement-bottom a{
    transform: translateX(-50%) translateY(60%);
}
.section-product-map .item a ul{margin: 0; list-style: none; padding: 0}
.section-product-map .item a ul li{margin: 2px 0px; position: relative; padding-left: 1.5em;}
.section-product-map .item a ul li:before{
    content: '';
    position: absolute;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: #D9D7C1;
    left: calc((1.5em - 0.4em) / 2 );
    top: 0.6em;
}
.section-product-map .item:not(.show) a{ opacity: 0; pointer-events: none;}
.section-product-map .item .inner{

}

.section-product-map .svg-map .item-hover path{
     fill-opacity: 0;
    stroke: #FBFAED;
    stroke-miterlimit: 10;
    stroke-width: 2;
    stroke-dasharray: 5000;
    stroke-dashoffset: 5000;
    cursor: pointer;
    fill: rgba(60, 79, 38, 0.7);
}
.section-product-map .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;
    /*filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 1));*/
    fill-opacity: 1;
}

body.show-product-detail .header-logo,
body.show-product-detail #header .header-right,
body.show-product-detail .sticky--right {display: none;}

.product-detail .btn-close{
    position: absolute;
    right: var(--fz-28);
    top: var(--fz-28);
    color: #fff;
    padding: 0.5rem;
    padding: 0.75rem;
    background-color: #fff;
    border-radius: 0;
    z-index: 2;
}
.section-product-map .product-detail{
    position: absolute;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100 - var(--navsize) );
    background: #D9D7C1;
    left: 0;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    transform: translateX(100%);
    pointer-events: none;
    visibility: hidden;
    transition: var(--d-transition);

}
.section-product-map .product-detail.show{
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.section-product-map .product-detail .product-info{
    flex:  0 0 400px;
    position: relative;
    background: #3C4F26 ;
    background-size: 75% auto;
    padding: var(--fz-52) var(--fz-36);
    border-radius: 0 var(--fz-28) var(--fz-28) 0;
    color: #fff;
     display: flex;
    flex-direction: column;
    font-size: var(--fz-18);
}
.section-product-map .product-detail .product-info .btn{
    margin: 1rem 0;
    font-size: var(--fz-24);
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.5rem 1.5rem;
    border-radius: 2.5rem;
}
.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-24);
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    padding: 0.6rem 0;
}
.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-info table tr td:last-child{font-weight: 700}


.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: #143980 ;
}
.product-detail .nav-tabs-style-1{
    z-index: 2;
    justify-content: center;
    width: auto;
    height: auto;
    gap: 0.6rem;
    background: transparent;
}

.product-detail .nav .nav-item {
    margin: 0;

}

.product-detail .nav .nav-link {
    border-radius: 1.4rem;
    padding: 0.4rem 1.4rem;
    color: #3C4F26;
    font-size: var(--fz-16);
    font-weight: 500;
    white-space: nowrap;
    border: solid 1px #3C4F26;
    text-transform: uppercase;

}
.product-detail .nav .nav-link.active{
    background: #3C4F26;
    color: #fff;
}
.product-detail .product-image {
    padding:0 calc(1.5 * var(--d-padding))  var(--navsize);
    flex-grow: 1;
}
.product-detail .product-image .item-image{text-align: center;}
.product-detail .product-image .item-thumb{
    height: calc(100vh - var(--navsize) - 10rem );
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-detail .product-image .item-thumb img{max-height: 100%;}


.product-detail .btn-back{
    /*color: #3B3C43; opacity: 1; position: absolute; right: 0px; top: 10px; padding: 0;
    background: transparent;
    margin: 0px;
    border: 0;
    width: 40px; height: 40px;
    background: #0085FF;
    border-radius: 5px 0px 0px 5px;
    z-index: 2;*/
    cursor: pointer;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    color: #fff;
    font-size: var(--fz-18);
}



@media (max-width:1199px) {
    .section-product-map .product-map{
        transform-origin: center;
    }
    .section-product-map{
        min-height: calc(100vh - var(--navsize));
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .section-product-map .product-detail .product-info{flex: 0 0 300px;}
    /*.section-product-map .product-map-wrapper{height: auto !important; min-height: calc(100vw * var(--h,980)  /  var(--w,1920));position: relative;    }*/
    .section-product-info .section-bg{width: 100%; min-height: calc(100vw * 999 / 1920); position: relative;}
}
@media (max-width:991px) {
    .section-product-map .product-detail{flex-direction: column; overflow: auto;}
    .product-detail .btn-close{

    }

    .section-product-map .product-detail .product-image{
        padding: 2rem 0.75rem;
        display: flex;
        flex-direction: column;
        width: 100%;

    }
    .product-detail .product-image .item-thumb{
        height: auto;
    }
    .product-detail .tab-content{order: 2; margin: 0; padding-top: 0}
    .product-detail .nav-tabs-style-1{
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow: auto;
        width: 100%;
        padding-bottom: 0.5rem;
        margin-bottom: 0.75rem;
    }
    .section-product-map .product-detail .product-image img{

    }
    .section-product-map .product-detail .product-info{
        width: 100%;
        padding-top: 4rem;
        border-radius: 0 0 var(--fz-28) var(--fz-28);
    }
    .section-product-map .product-detail .sidebar-content{
        width: 100%;
        max-width: 100%;
    }
    #page_container .nav-tabs-default li{}
    .page-map{
       padding-top: 4rem;
       padding-bottom: var(--navsize);
        height: auto;
    }
    .page-map .section-content{
        width: calc(100% - 1.2rem);
    }
    .page-map .map-embed{
        height: 400px;
        border-width: 10px;
    }
    .page-map .map-embed iframe{
        height: 380px;
        min-height: 380px;
    }
    .page-map .section-items .item{
        padding-left: 0.5rem;

    }
}


@media (max-width:767px) {
    .section-product-map .product-detail .product-info h4{
        margin-bottom: 0.6rem;
    }
    .product-detail .nav .nav-link{
        padding: 0.4rem 1rem;
    }
}

@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: #3C4F26;
    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: #3C4F26;
    color: #fff;
}
.subdivision-nav ul > li:hover > ul {
    transform: translate(0, 0px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}





.tour-floorplan{
    position: fixed;
    top: 20%;
    left: 0;
    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: 0px 0.5rem 0.5rem 0px;

    transform: translateX(-100%);
}

.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: #3C4F26;
    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;
}
.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: #3C4F26;
    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: #3C4F26;
    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 #3C4F26;
    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;}
}

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



#header { background: transparent; position: fixed; top: 0; width: 100%; transition-duration: 0.3s;  z-index: 22;
    visibility: hidden;
    padding-top:  var(--fz-28);
    pointer-events: none;

}
#header.show{opacity: 1; visibility: visible;}
#header.sticky {}
.navbar-header { position: relative; z-index: 1; }
#header .navbar {padding-left: 0px; padding-right: 0px; align-items: flex-start; padding: 0; }
#header .navbar-brand { margin: 0px 0; transition-duration: 0.3s;

    height: auto; padding: 0px;
    pointer-events:auto;


    width: 4.427083333333333vw;
    min-width: 60px;

}
#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{}

.header-bottom .navbar{/*padding-top: 30px;*/}
#header{

}
#header .header-right .btn-icon{
    margin-right: 0.75rem;
}
#header .header-right .btn-icon .icon{
    width: 1.5625vw;
    min-width: 27px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
#header .header-right .btn-icon .icon img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#header .header-right .btn-icon .icon .svg-hover{display: none;}
#header .header-right a.btn-icon.music-mute .icon .svg{display: none;}
#header .header-right a.btn-icon.music-mute .icon .svg-hover{display: block;}

#header .header-right {display: flex; align-items: center;
    color: #fff;
    pointer-events: auto;
}
#header .header-right > a{ position: relative;
    text-transform: uppercase; font-weight: 500;
    font-size: var(--fz-14);
}

#header .header-right a.svg-ani{color: #fff;display: flex; align-items: center;
    padding: 0;
    margin-left: 2rem;
}
#header .header-right a.svg-ani span{white-space: nowrap;}
body.menu-open #header .header-right a.svg-ani{}
#header .header-right .svg{height: 22px; width: auto; }

#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; }


.header-bottom .navbar-toggler{
    border: 0px;  color: #fff; text-transform: uppercase; font-size: var(--fz-18); font-weight: 500;
     padding: 0;  position: relative;
     height: var(--iz-3);
     background: #FBFAED;
     padding: 2px;
     display: flex;
     align-items: center;
     border-radius: 0;
}
.header-bottom .navbar-toggler > span{
    color: #000000;
    display: inline-block;
    padding: 0px 1rem;
}

.header-bottom .navbar-toggler:focus{outline: none;box-shadow: none;}


#header .navbar-toggler-icon-wrapper {
    background: #353F34;
    height: 100%;
    width: auto;
    aspect-ratio: 76 / 60;
    cursor: pointer;
    /* margin-bottom: 5px; */
    transition: 0.3s ease all;
    order: 2;
    position: relative;
}
#header .navbar-toggler-icon-wrapper .navbar-toggler-icon{
    height: 50%;
    aspect-ratio: 1;
    background: transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: 0.3s ease all;
}
#header .navbar-toggler-icon >  span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 4px;
    background-color: #D9D7C1;
    position: absolute;
    transition: 0.3s ease all;

}

#header .navbar-toggler-icon > span:nth-of-type(1) {

    top: 30%;
}
#header .navbar-toggler-icon > span:nth-of-type(2) {

    top: 60%;
    left: 0;
}
#header .navbar-toggler:hover .navbar-toggler-icon > span {

}


body.menu-open #header .navbar-toggler .navbar-toggler-icon {
    margin: 0;
    transform: rotate(180deg) translateX(50%) translateY(50%);
    transition: 0.3s ease all;
    opacity: 1;
}
body.menu-open #header .navbar-toggler .navbar-toggler-icon > span {
    width: 100%;
    height: 2px;
    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) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}
@media(min-width:1200px){

}

/*Overlay Menu*/

.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 21;
    background: #011F5F;

    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.overlay-menu:before{
    position: absolute;
    inset: 0;
    background: radial-gradient(56.53% 56.53% at 50% 50%, rgba(1, 31, 95, 0.00) 0%, #001645 100%);
}
.overlay-menu .bg{
    position: absolute; pointer-events: none;
    inset: 0;
    background: #3C4F26;
}
.overlay-menu .bg:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    background: url('../images/bg-menu.jpg') no-repeat center center;
    background-size: cover;
}
.overlay-menu .bg:after{
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(50%);
    background: url('../images/bg-icon-menu.png') no-repeat center center;
    background-size: contain;
    height: 90%;
    aspect-ratio: 1;
    opacity: 0.2;
}

.overlay-menu .main-menu-container {
    width: 50%;
    margin-left: auto;
    text-align: left;
    display: flex;
    padding: calc(1.5 * var(--d-padding)) 0 calc(0.25 * var(--d-padding));
    margin: 0; margin-left: auto;
    list-style-type: none;
    flex-direction: column;
    position: relative;
    height: 100%;

}
.overlay-menu .main-menu-container .menu-wrapper{
    display: flex;
    align-items: center;
    flex-grow: 1;
}
.overlay-menu .main-menu-container .menu-footer{
    margin-top: auto;
    padding: 0px var(--d-padding);
}
.overlay-menu .main-menu-container .menu-footer .menu-logo{
    text-align: right;
}
.overlay-menu .main-menu-container .menu-footer .menu-logo img{
    width: 6.979166666666667vw;
    min-width: 100px;
}
.overlay-menu .main-menu-container .menu-bottom{
    border-top: solid 1px #fff;
    padding: 0.75rem 0;
    margin-top: 1.25rem;
    display: flex;
    justify-content: space-between;
}
.overlay-menu .main-menu-container .menu-bottom .hotline{
    font-size: var(--fz-24);
}
.overlay-menu .main-menu-container .menu-bottom .hotline a{
    color: #fff;
}
.overlay-menu .main-menu-container .social a{
    color: #D9D7C1;
    font-size: 1.4rem;
    margin-left: 1.2rem;
}

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

.overlay-menu .menu a {
    color: #81886D;
    transition: all ease 0.4s;
    display: inline-block;
    font-size: var(--fz-40);
    font-weight: 500;
    text-transform: uppercase;
    position: relative;
    display: flex;



}
.overlay-menu .menu a:before{
    content: '';
    background: url(../images/arrow-right-2.svg) no-repeat center left;
    background-size: contain;
    width: 0px;
    transition: var(--d-transition);
    margin-right: 0;
}
.overlay-menu .menu li:hover > a:before{
    width: calc(1.3 * var(--fz-40));
    margin-right: 1rem;
}

.overlay-menu .menu li:hover > a,
.overlay-menu .menu .current-menu-item > a{
    color: #D9D7C1;
}
.overlay-menu .menu li:hover a:after{
    /*width: calc(100% );*/
}
/*.overlay-menu .menu .current_page_parent a{color: #011F5F; }*/

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

.overlay-menu .copyright{position: absolute; bottom: 30px; left: 0px; width: 100%;color: #fff;
    opacity: 0; transition: var(--d-transition); text-align: center;
}
body.menu-open .overlay-menu {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
}
body.menu-open .overlay-menu .copyright {
    opacity: 1;
    transition-delay: 1s;
}

.overlay-menu .menu{
    list-style: none; padding: 0px;
    margin: 0;
    padding: 0 var(--d-padding);
}

.overlay-menu .menu > li {
    opacity: 0;
    transform: translate(0, 50px);
    -webkit-transform: translate3d(0, 50px, 0);
    transition-delay: 0.6s;
    padding:0 ;
    margin: 0px 0px var(--fz-24);
    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;
}


.overlay-menu li .submenu{

    flex-direction: column;
    pointer-events: none;
    opacity: 0;
    transition: all 0.4s ease;
    padding: 0rem 1.5rem;
    padding-left: calc(1.3 * var(--fz-40) + 1rem);
    list-style: none;
    max-height: 0px;
    pointer-events: none;
    transition: var(--d-transition);
}
.overlay-menu .menu>li.showsub >ul {
    transform: translate(0, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 400px;
    padding-top: 0.5rem;
    pointer-events: auto;
}
.overlay-menu li .submenu li a{
    font-size: var(--fz-32);
}
.overlay-menu li .submenu li a:before{
    display: none;
}


.overlay-menu .menu li.menu-item-has-children > a:after{
    content: '\f107';
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    margin-left: 0.6em;
    color: #fff;
    font-size: 1em ;
}


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;
}
@media (max-width:1699px) {


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


}

@media (max-width:1199px) {

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

    .overlay-menu .menu{
        padding: 0px 1.5rem;
    }
    .overlay-menu .main-menu-container{
        width: 65%;
    }
    .overlay-menu .bg:before{
        width: 35%;
    }
    body.menu-open #header .navbar-brand{opacity: 1;}

}
@media (max-width:767px) {
    .header-bottom .navbar-toggler > span{
        padding: 0px 1.2rem;
    }
    .overlay-menu .main-menu-container{
        width: 100%;
    }
    .overlay-menu .bg:before{
        width: 0%;
        opacity: 0.3;
    }
    .overlay-menu .copyright{font-size: 0.8em; bottom: 1rem;}
    .overlay-menu .menu > li{  padding: 7px 0px;  }
    .overlay-menu .menu li{
         margin: 0.5rem 0;
    }
    .overlay-menu .menu a{
        font-size: var(--fz-36);
    }

    .overlay-menu .menu li:hover > a:before{
        width: calc(1 * var(--fz-36));
        margin-right: 0.5rem;
    }
}


@keyframes RotateBG {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform:  rotate(359deg);
    transform: rotate(359deg);
  }
}


/*Module xoay*/
.image-sprite{
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
}
.image-sprite .cloudimage-360-inner-box,
.image-sprite .cloudimage-360-inner-box canvas{

}
.image-sprite-wrapper{
    width: 100%;
    height: calc(100vh - var(--navsize));
    position: relative;
    overflow: hidden;
}
.image-sprite-inner{
    position: absolute;
    width: 1920px;
    height: 1080px;
}

.cloudimage-360 .cloudimage-360-left, .cloudimage-360 .cloudimage-360-right {
    padding: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 4px;
}
.cloudimage-360 .cloudimage-360-left:focus, .cloudimage-360 .cloudimage-360-right:focus {
    outline: none;
}
.cloudimage-360 .cloudimage-360-left {
    display: none;
    position: absolute;
    z-index: 100;
    top: calc(50% - 15px);
    left: 20px;
}
.cloudimage-360 .cloudimage-360-right {
    display: none;
    position: absolute;
    z-index: 100;
    top: calc(50% - 15px);
    right: 20px;
}
.cloudimage-360 .cloudimage-360-left:before, .cloudimage-360 .cloudimage-360-right:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: 50% 50% / cover no-repeat;
}
.cloudimage-360 .cloudimage-360-left:before {
    background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
}
.cloudimage-360 .cloudimage-360-right:before {
    background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
}
.cloudimage-360 .cloudimage-360-left.not-active, .cloudimage-360 .cloudimage-360-right.not-active {
    opacity: 0.4;
    cursor: default;
}