/*==================================================
    General
==================================================*/

html,body{
  padding: 0;
  margin: 0; 
} 
html{height: 100% }
body{ 
  font-family: 'sukhumvit_setlight', sans-serif; 
  color:#fff;
  font-size: 16px; 
  font-weight: 600;
  font-style: normal;
  margin: 0px;
  padding:0;
  line-height:1.6; 
  background:#ffffff;  
  /*-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */

  position: relative;
  overflow-x: hidden;
}
 
b, strong{
  font-weight: bold; 
  font-family: inherit;
}
h1,h2,h3,h4,h5,h6{   
  margin:0;  
  color: #fff; 
  line-height: 1.6; 
  font-weight: 600; 
  font-family: 'sukhumvit_setlight';
}  

.nowrap{ white-space: nowrap; }
 
a{
  color:inherit;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
a:hover{ text-decoration: none; color: inherit; }

.input-block{
  display: block; 
  position: relative;
  padding-bottom: 15px
}
.input-text{
  display: block; 
  padding-bottom: 7px
}
   
.form-control{
  -webkit-appearance: none;
  font-size:inherit;
  border-radius: 0; 
  color: inherit; 
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  font-weight: 400;
  font-family: inherit;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}

.form-control:focus{
  box-shadow: none;
  border-color:rgba(255,255,255,0.9);
}
 

.radio-group, 
.checkbox-group{ 
  padding-left:0; 
  position:relative;
  list-style-type:none;
  margin:0px;
  padding:0px;
  text-align:center;
  display:inline-block;
  vertical-align:top
}
.radio-group{ display:inline-block; position:relative}


.radio-group input[type="radio"],
.checkbox-group input[type="checkbox"] {
  /*display: none;*/
  visibility: hidden;
  opacity: 0;
  height: 0;
  position: absolute;
  width: 0
}
.checkbox-group label:before,
.radio-group label:before {
  content: "";
  display: inline-block;

  margin-right: 5px;
  position: absolute;
  left:0;
  top:5px;
  background-color: transparent;
  border: 1px solid #9e9e9e; 
  width:16px;
  height:16px; 

   -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.radio-group label:before { 
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}
.radio-group label,
.checkbox-group label {
  position:relative;
  padding-left:30px;
  padding-right:15px;
  text-align:left;
  margin:1px 0;
  display:block;
  font-weight:300;
  font-size:inherit;
  line-height:25px;
  cursor:pointer;

  -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.checkbox-group label{color: inherit;}
.checkbox-group label span{ font-size: 12px; font-style: italic; color: #8f8f8f } 
.radio-group label{color: inherit; padding-left: 28px} 

 
.radio-group input[type="radio"]:checked + label:after {
    content: "";
    color: #ea6f21;
  background-color:#9e9e9e;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  position:absolute;
  left: 3px;
  top: 8px;
  width:10px;
  height:10px;
}
 

.checkbox-group input[type="checkbox"]:checked + label:after{
  content: "";
  width:15px;
  height:15px;
  position:absolute;
  top: 8px;
  left: 2px;
  display:block; 
  background-image: url(../img/icons/icon-checked.svg);
  background-position:0 0;
  background-size: 11px;
  background-repeat: no-repeat;
  
}
  
.checkbox-disable.checkbox-group label:before{
  background-color:#c0c0c0;
  border:2px solid #b1b1b1;
  cursor:default !important
}
.checkbox-disable.checkbox-group input[type="checkbox"]:checked + label:after {
  content:'';
}


.form-control::-webkit-input-placeholder {
  color: #000000;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: #000000;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #000000;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  color: #000000;
  opacity:1;
}

.form-control::placeholder {
  color: #000000;
  opacity:1;
}

.form-control:disabled, .form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}
 

.select {
  position:relative;
  padding-left:0 !important;
  cursor:pointer;
  display:block;
  margin-bottom:0; 
  height: 40px; 
  cursor: pointer;
}

.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
  padding:0;
  color: #a5a7a9;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.has-value .select-styled{ color: #221f1f}
.select-styled:after {
  content:'';
  position: absolute;
  right: 0;
  top: 50%;

  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-top: 5px solid #000;

}
 

.hgroupx{display: block;text-align:center;}
.hgroupx h2{
  font-size: 2.2vw;
  color: #fff;
  margin-bottom: 15px;
  padding-right: 10vw;
}
.hgroupx h3{
  font-size: 1.9vw;
  color: #fff;
  padding-left: 10vw;
}
.hgroupx h3 span{
  font-size: 2.5vw;
  margin-top: -0.7vw;
  font-weight: 600;
  color: #f1c630;
  display: inline-block;
  vertical-align: top;
  padding-left: 10px;
}
 
.select-options {
  display: none;
  position: absolute;
  top: 52px;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fff;
  border:1px solid #f1f1f1;
  max-height: 200px;
  overflow-x: auto;
}
.select-options li {
  margin: 0;
  padding: 5px 0;
  text-indent: 20px; 
  font-size: 16px;
  font-weight: 300;
  color: #373337;
  font-family: inherit;
  -moz-transition: all 0.15s ease-in;
  -o-transition: all 0.15s ease-in;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}
.select-options li:hover {
  background: #f1f1f1;
}
.select-options li[rel="hide"] {
  display: none;
}
 

.form-effect .input-block{ 
  display: block;
  background-color: transparent;
  border-bottom:1px solid rgba(204,204,204,0.4);
  padding:20px 0 0 0;
  margin: 0 0 5px 0;
  width: 100%;
  vertical-align: top;  
  height: 60px;
  font-size: 0;
  border-radius: 0;
  position: relative;
  
  -webkit-transition: all 0.20s ease-in-out;
  -moz-transition: all 0.20s ease-in-out;
  -ms-transition: all 0.20s ease-in-out;
  -o-transition: all 0.20s ease-in-out;
}

.form-effect .form-control{
  padding: 0;
  border:0;
  background-color: transparent;
  height: 42px;
  line-height: 42px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.form-effect .input-text{ 
  position: absolute;
  top: 28px;
  left: 0;
  padding: 0;
  transition: 0.2s ease all;
  z-index: 9;  
  font-size: 16px;
  font-weight: normal; 

  -moz-user-select: none;
  pointer-events: none;
  white-space: nowrap;
  pointer-events: none;
}

.form-effect .error-label{
  color: red;
  font-size: 11px;
  font-weight: normal;

  position: absolute;
  bottom: 10px;
  right: 0;
  z-index: 9;

  pointer-events: none;
  opacity: 0;
}

.form-effect .input-block.has-value .input-text{
  top:7px; 
  font-size: 13px;
  color: #e66157;
  font-weight: bold;

}

.form-effect .input-block.field-error{
  border-bottom:1px solid #ed939e;
}

.form-effect .input-block.field-error .error-label{ opacity: 1}
 

span.error{
  font-family: 'sukhumvit_setlight', sans-serif; 
  font-size: 12px;
  color: red;
  display: block;  
  
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;

  display: block !important;
} 
 
.btn{
  padding: 0 20px;
  position: relative;
  background-color:#e66157;
  border-radius: 50px;
  height:52px;
  line-height: 52px;
  font-family: 'sukhumvit_setlight', sans-serif; 
  font-weight: 600;
  font-size:18px;
  overflow: hidden;
  border:1px solid #e66157;
  color: #fff;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

.pc .btn:hover{
  background-color:rgb(230,97,87);
  border:1px solid rgb(230,97,87);
  color: #fff
}
  
.btn-white{
  border:0px solid #fff;
  background-color: #fff;
  color: #000;
}
.pc .btn-white:hover {
  color: #fff;
  background-color: #000; 
} 

.btn-outline-white{
  border:1px solid #fff;
  background-color:transparent;
  color: #fff;
}
.pc .btn-outline-white:hover {
  color: #000;
  background-color: #fff; 
} 
 
.btn-lg{
  height: 60px;
  line-height: 56px;
  min-width: 230px;
  font-size: 30px;
}
 
 
.btn-link, 
.btn-link:hover, 
.btn-link:focus, 
.btn-link:active{
  background-color: transparent;
}
 

.btn:focus,.btn:active,
button:focus,button:active,
a:focus,a:active {
   outline: none !important;
   box-shadow: none!important;
}


/*==================================================
    Icon Setup
==================================================*/  

.icons{
  display:inline-block;
  position:relative;
  vertical-align:top;
  /*background-image:url(../img/icons.png);*/
  background-size: contain;
  background-repeat:no-repeat;
  background-position: 0 0;
}
 
/**/

.arrow-left,
.arrow-right,
.arrow-up,
.arrow-down{
  position: absolute;
  left: 0;
  top: 0;
  width:5px;
  height:5px;
  vertical-align:top;

  border-top: 1px solid #676767;
  border-left: 1px solid #676767;

   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.arrow-left{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);  
}

.arrow-right{
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);  
}

.arrow-up{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);  
}
.arrow-down{
   margin-left:1px; 
   -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);  
}

.icon-close{
  width: 20px;
  height: 20px;

  background-image: url(../assets/frontend/img/icons/icon-close.svg);
}

.page{
  position: relative; 
  display: block;   
  overflow: hidden; 
  min-height: 550px;  
}  

.container-fluid{
  max-width:100% ;  
  padding-left: 90px;
  padding-right:90px;
  position: relative; 
}

.container{
  max-width:100%;
  padding-left: 140px;
  padding-right:140px; 
  position: relative;
  z-index: 9
}
  
.compensate-for-scrollbar{ margin-right: 0 !important } 
.compensate-for-scrollbar .header{ right: 0 } 
body.fancybox-active{ overflow: visible !important;padding-right: 0 !important  }
body.modal-open  {}

 
/*==================================================
    Icon Setup
==================================================*/  

.header{
  display: block;
  position: fixed;
  padding:0;
  top: 0;
  left: 0;
  right: 0; 
  z-index: 1020;  
}

.header-inner{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0; 
  padding:35px 0 0;  
  -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.modal-open .header-inner{
  display: block;
  padding-right: 17px
} 

.dropdown-menu{
  position: absolute;
  will-change: transform;
  top: auto!important;
  left: auto!important;
  transform: translate3d(0px, 0, 0px) !important;
}

.nav-panel .navbar-brand{display: none;}


/*==================================================
    Header - Menu Desktop
==================================================*/ 
.navbar-main {
  display: block;
  padding: 0;
  border-bottom: 1px solid transparent; 
  position: relative;
  overflow: hidden;
}
.nav-main{
  display: block; 
  margin: 0 -60px 0 0;
  font-size: 0;
  text-align: center;
}
.nav-main li{
  display: inline-block;
  vertical-align: top;
}
.nav-main li a{
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  padding: 0 15px;
  display: block;
  cursor: pointer;  
  position: relative;
}

.pc .nav-main li a:hover{ opacity: 0.75 }
.nav-main li a.active{color: rgb(230,97,87)}

.nav-main li.nav-lang,
.nav-main li.nav-followus{display: none;} 
 
.navbar-brand {
  float: left;
  padding: 0;
  margin:0; 
  position: relative;  
}

.navbar-brand img{
  -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.navbar-brand img.logo1{
  width: 91px;
  height: 66px;
}
.navbar-brand img.logo2{
  width: 94px;
  height: 103px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1)
}

.button-group{
  float: right;
  position: relative;
  white-space: nowrap;
}

.lang{
  display: inline-block;
  vertical-align: top;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/*
.lang a{
  display: block;
  width: 30px
}
.lang a img{
  width: 100%
} 
*/

.scrolling .header-inner{background-color: #191919; top: -35px; opacity: 0.99;}

.scrolling .navbar-brand img.logo1{ opacity: 0 }
.scrolling .navbar-brand img.logo2{ opacity: 1 }

/*==================================================
    Header - Menu effect
==================================================*/ 
.btn-icon{
  padding: 0;
  background-color: transparent !important;
  width: 30px; 
  height:30px !important;
  border:0 !important;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0 !important;
  z-index: 999; 
  display: none;
  margin-left:15px
}
.btn-icon:before{display: none;}
.btn-icon .group{
  position: relative;
  top: 5px;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 20px;
}
.btn-icon span{ 
  height: 2px;
  background: #fff;
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transform-origin: 25px, 1px;
  -ms-transform-origin: 25px, 1px;
  transform-origin: 25px, 1px
}

.btn-icon span:nth-child(1) {
    top: 0;
    -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
}

.btn-icon span:nth-child(2) {
    top: 8px;
    -webkit-transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98)
}

.btn-icon span:nth-child(3) {
    top: 16px;
    -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
}


.menu-opened .btn-icon span:nth-child(1){
    -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: rotate(45deg) translate3d(6px, 9px, 0);
    transform: rotate(45deg) translate3d(6px, 9px, 0)
}

.menu-opened .btn-icon span:nth-child(2){
    -webkit-transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: scaleX(0) translateZ(0);
    transform: scaleX(0) translateZ(0)
}

.menu-opened .btn-icon span:nth-child(3) {
    -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: rotate(-45deg) translate3d(2px, -6px, 0);
    transform: rotate(-45deg) translate3d(2px, -6px, 0)
}

.menu-opened.device,
.menu-opened.device body{  
  overflow: hidden;
  position: relative;
}


/*==================================================
    Responsive media queries
==================================================*/

@media (min-width: 1440px) {
  /*.nav-main li a{ padding-left:2vw; padding-right:2vw}*/
} 

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

@media (max-width: 1440px) {
  .container-fluid{
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media (max-width: 1380px) {
  .container{
    padding-left: 80px;
    padding-right: 80px
  }
}

@media (max-width: 1200px) { 
  .container {
    padding-left: 50px;
    padding-right: 50px;
  }
  .nav-main li a{
    font-size: 15px;
    padding: 0 10px;
  }

}

@media (max-width: 1024px) { 
  .header-inner{ padding-top: 25px; }
  .scrolling .header-inner{ top: 0 }
  .button-group{ z-index: 1022; margin-top: -30px }
  .button-group .lang{ display: none;}
  .btn-icon{ display:inline-block; margin-left: 25px }
  .navbar-brand{ }
  .navbar-brand img.logo2{ top: -25px; }

  .nav-panel{
    position: fixed;
    top: 0;
    left: 0;
    right:-100%; 
    bottom: 0;
    width: 100%;
    background-color:#a8a9ad;
    z-index: 1021;

    display: flex;
     -ms-flex-align: center !important;
    align-items: center !important;

     opacity: 0;
     visibility: hidden;
    -webkit-transition: all 1.5s cubic-bezier(.19,1,.22,1) .5s;
    -moz-transition: all 1.5s cubic-bezier(.19,1,.22,1) .5s;
    -o-transition: all 1.5s cubic-bezier(.19,1,.22,1) .5s;
    transition: all 1.5s cubic-bezier(.19,1,.22,1) .5s;
  }
  .nav-main{
    margin: 0 auto;
    max-width: 280px;
    width: 100%;   
  }
  .nav-main li{
    display: block;
    text-align: center;
    position: relative;
    opacity: 1;
  }
   
  .nav-main li a{
    font-size: 21px; 
    padding:10px 0 10px;
  }
  .nav-main li.nav-lang{display: block;}
  .nav-main li.nav-lang .lang{ 
    display: block;  
    text-align: center;
    padding:20px 0 32px;
    border-bottom: 1px solid rgba(255,255,255,0.42);
  } 
  .nav-main li.nav-lang .lang a{ display: inline-block; }
  
  .nav-main li.nav-followus {
    display: block;
    text-align: center;
    padding-top: 15px;
  }
  .nav-main li.nav-followus a{
    display: block;
    font-size: 16px;
    line-height:1.4;
    font-weight: 600
  }
  .nav-main li.nav-followus .icon{
    width: 47px;
    height: 47px;
    display: block;
    margin:15px auto 
  }
  .nav-main li.nav-followus .icon img{ width: 100% }

  .nav-panel .navbar-brand{display: block;}
  .menu-opened .nav-panel{
    opacity: 1;
    visibility: visible;
    transition-delay: 0.3s;
    right:  0;
  }
  .menu-opened .nav-main li{
    opacity: 1; 
   -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
    transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out, -webkit-transform 0.5s ease-out; 
  }


  .menu-opened .nav-main li:nth-child(1) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }

  .menu-opened .nav-main li:nth-child(2) {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s;
  }

  .menu-opened .nav-main li:nth-child(3) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }

  .menu-opened .nav-main li:nth-child(4) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s;
  }
  .menu-opened .nav-main li:nth-child(5) {
    -webkit-transition-delay: 0.6s;
    transition-delay:0.6s;
  }
  .menu-opened .nav-main li:nth-child(5) {
    -webkit-transition-delay:0.65s;
    transition-delay:0.65s;
  }
  .menu-opened .nav-main li:nth-child(6) {
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s;
  } 

  .menu-opened .nav-main li.facebook:nth-child(7) {
    -webkit-transition-delay: 0.65s;
    transition-delay: 0.65s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  } 
 

  .nav-panel .navbar-brand{
    position: absolute;
    top: 25px;
    left: 30px;
    z-index: 9;
  } 

  .nav-panel .btn-icon{
    position: absolute;
    top: 40px;
    right: 30px;
  }
  .showon1024{
    display: block !important;
  }
  .hideon1024{
    display: none !important;
  }
  .showon1024flex{
    display: inline-flex !important;
  }
  .hideon1024flex{
    display: none !important;
  }
  .caption-video2
  {
    display: flex;
    width: 100%;
    height:100% !important;
  }
  .theotherc{
    height: 5px;
    width: 5px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    margin-bottom:3px;
  }
  .img-ribbon-tr
  {
    display: none;
  }
  .img-ribbon-br
  {
    display: block !important;
  }
  .img-ribbon-bl
  {
    display: block !important;
  }
}

@media (max-width: 991.98px) {
  .container-fluid,
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }

}

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

@media screen and (max-width: 767px) , screen and (max-height: 580px) {
  .nav-main{ margin-top: 11vh; }
  .nav-main li.nav-followus{ padding-top: 2px; }
  .nav-main li.nav-followus a{ font-size: 12px; }
  .nav-main li.nav-followus{ padding-top: 10px }
  .nav-main li.nav-followus .icon{ margin:10px auto  }
  .nav-main li.nav-lang .lang{ padding: 10px 0 20px}
}
@media (max-height:500px) {   
  .nav-main li.nav-followus p{display: none;}

  .nav-main li.nav-lang .lang{ border-bottom: 0 }
  .nav-main li.nav-followus{display: none;}
}

@media (max-height:400px) {
  .nav-main{ margin-top: 0; }
  .nav-main li.nav-lang .lang{ padding-bottom: 0 }
  .nav-main li a{font-size: 14px; padding:3px 0 }
}

 
@media only screen and (max-width:767px) {
  .container,
  .container-fluid{ padding: 20px 20px }  
  .nav-main li a{font-size: 16px; padding: 4px 0}

  .header{padding: 0 0;}
  .header-inner{ padding: 25px 0 0; height: 80px; }
  .scrolling .header-inner{top: 0}

  .button-group{ margin-top: -15px }

  .navbar-brand img.logo1,
  .nav-panel .navbar-brand img {
    width: 63px;
    height: 45px;
  }

  .navbar-brand img.logo2{ 
    width: 73px;
    height: auto;
  }

  .lang{ display: none; }
 
 
  /*.nav-main li a{ font-size:18px;padding:7px 0 7px;}
  .nav-main li.nav-followus a{ font-size:15px;}
  .nav-main li.nav-followus .icon{width: 42px;height: 42px;}*/

  .header .row > div.col-9 {
    -ms-flex: 0 0 74%;
    flex: 0 0 74%;
    max-width: 74%;
    padding-left: 0;
  }

  /*.nav-main{ margin-top: 11vh; }
  .nav-main li a{font-size: 16px; padding: 4px 0}
  .nav-main li.nav-followus{ padding-top: 2px; }
  .nav-main li.nav-followus a{ font-size: 12px; }
  .nav-main li.nav-followus{ padding-top: 10px }
  .nav-main li.nav-followus .icon{ margin:10px auto  }
  .nav-main li.nav-lang .lang{ padding: 10px 0 20px}*/
  .showon767{
    display: block !important;
    margin: 10px;
  }
  .hideon767{
    display: none !important;
  }
  .showon767flex{
    display: inline-flex !important;
    margin: 10px;
  }
  .hideon767flex{
    display: none !important;
  }
}

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

@media (max-width:369px) {
  .header .row > div.col-9 {
    -ms-flex: 0 0 72%;
    flex: 0 0 72%;
    max-width: 72%;
    padding-left: 0;
  }
}


/*==================================================
    Section - setup
==================================================*/ 

.section{
  display: block;
  position: relative;  
  padding: 65px 0
}

.background{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;

  pointer-events: none; 
}

.title-lg{
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
}

.title-md{
  font-size:21px;
  font-weight: 600;
  margin-bottom: 20px;
}

.section-target{
  display: block;
  position: relative;
}
.section-target .id-target{
  position: absolute;
  top:-56px;
  bottom: 0px;
  left: 0;
  right: 0;

  pointer-events: none; 
}

.nav-tabs{
  padding: 0;
  display: block;
  text-align: center;
  border:0;
  position: relative;
  z-index: 99
}
.nav-tabs .nav-item{
  display: inline-block;
  margin: 4px 5px;
}
.nav-tabs .nav-item a{
  display: block;
  position: relative;
  border:0;
  border-radius: 0;
  padding: 0 30px;
  margin: 0;
  color: #fff !important;
  font-size: 18px;
  font-weight: 600;
  height: 36px;
  line-height: 39px;
  background-color: transparent !important;
}
.nav-tabs .nav-item a:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: skew(-20deg, 0);
  background-color:rgb(165,168,171);
  box-shadow: 0px 3px 6px rgba(0,0,0,.16);
  -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.nav-tabs .nav-item a span{
  position: relative;
  z-index: 9
}

.nav-tabs .nav-item a:focus:before, 
.nav-tabs .nav-item a.active:before,
.pc .nav-tabs .nav-item a:hover:before{
  background-color:rgb(230,97,87);
}

.nav-tabs .nav-item a:focus, 
.nav-tabs .nav-item a.active,
.pc .nav-tabs .nav-item a:hover{ color: rgb(255,255,255) !important; }

/*==================================================
    Section - Banner
==================================================*/ 

.section-banner{ 
  background-color:#191919;
  padding: 0 !important;
}
.section-banner:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250px;

  pointer-events: none;
  z-index: 9;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
  background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

}

.swiper-banner .swiper-slide{
  height: calc(100vh + 103px);
  background-color:#191919;
  overflow: hidden;

}
.swiper-banner .swiper-slide .background{
  opacity: 0.4;
}

.swiper-caption{
  display: flex;
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 9;
  text-align: center;
  -ms-flex-align: center !important;
  align-items: center !important;
}
.swiper-caption .inner{
  display: inline-block;
  margin: -5vh auto 0;
  color: #fff;
}

.swiper-caption h3{
  color: #f1c630;
  font-size: 32px;
  font-weight: 600;
}
.swiper-caption h2{
  color: #ffffff;
  font-size: 43px;
  font-weight: 600;
}
.swiper-caption .btn{
  border-radius: 0;
  height: 50px;
  line-height: 50px;
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  padding: 0 50px;
  border:0 !important;
  background-color: rgba(230,97,87,0.8) !important;
  cursor:text !important;
  margin-top: 20px;
}
 
.section-banner .swiper-button-white{
  width: 80px;
  height: 80px;
  margin-top: -80px;
}
.section-banner .swiper-button-prev{ left: 60px }
.section-banner .swiper-button-next{ right: 60px }

.section-banner .swiper-pagination{
  bottom: 135px
}
.section-banner .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
  margin:0 9px; 
}
.section-banner .swiper-pagination-bullet{
  width: 40px;
  height: 3px;
  background: rgba(255,255,255,0.7);
  border:0;
  border-radius: 0
}
.section-banner .swiper-pagination-bullet-active{background:#e66157 !important;}


/***/
.swiper-caption .element1,
.swiper-caption .element2,
.swiper-caption .element3,
.swiper-caption .element4 {
    -webkit-animation-duration: .9s;
    animation-duration: .9s;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

.swiper-slide-active .swiper-caption .element1{
    -webkit-animation-delay: .8s;
    animation-delay: .8s; 
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.swiper-slide-active .swiper-caption .element2{
    -webkit-animation-delay: 1.0s;
    animation-delay:  1.0s; 
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.swiper-slide-active .swiper-caption .element3{
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s; 
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
} 

.swiper-slide-active .swiper-caption .element4{
    -webkit-animation-delay: 1.8s;
    animation-delay:  1.8s; 
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}


.video-wrapper{
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  z-index: 1; 
  background-color: #000;
  background-image: none;
}
 
.video-wrapper video{
  width: 100vw;
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
}
.video-wrapper .img-device{ width: 100% }
.video-wrapper .img-device{ display: none;}

.video-photo-device{
  display: none;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.scrolldown{
  position: absolute;
  bottom: 180px;
  left: 0;
  right: 0;
  z-index: 9;
  text-align: center;
} 
.scrolldown .inner{
  display: inline-block;
  position: relative;
  color: #fff;
  opacity: 0.7;
  cursor: pointer;

  -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.scrolldown p{
  margin:0 
}

.pc .scrolldown .inner:hover{ opacity: 1 }

.project-info-bar{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  height: 103px;

  background-color: rgba(78,103,114,0.7);
}
.project-info-bar:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 6px;
  width: 100px;
  background-position: center right;
  background-size:120px;
  background-repeat: no-repeat;
  background-image: url(../img/10307129757909.png);
  z-index: 99;
}

.project-info-bar .container-fluid{
  height: 100%
}

.pj-info{
  display: block;
  text-align: center;
}

.pj-info .icon{
  display: inline-block;
  width: 43px;
  height: 43px;
  line-height: 40px;
  background-color: #e66157;
  border-radius: 50%;
  vertical-align: middle;
}
.pj-info .icon img{
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
}
 
.pj-info h4{
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  vertical-align: middle;
  margin-left:15px;
  text-align: left;
   line-height: 1.4 
}

.pj-info h4 .nowrap{ display: block; }

#video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 9
}

.ytplayer-container {
  position: absolute;
  top: 0;
  z-index: -1;
}


.device .device-hide{ display: none; }
.device .device-show{ display: block; }

.pc .device-hide{ display: block; }
.pc .device-show{ display: none; }

@media (min-width: 1441px) and (min-height: 650px) {
  .swiper-caption h2{ font-size: 51px; }
  .swiper-caption h3{ font-size: 40px }
  .swiper-caption .btn{ font-size: 25px; height: 60px; line-height: 60px }
}

@media (min-width: 1441px) {
  .pj-info .icon{ width: 55px; height: 55px; }
  .pj-info .icon img{ width: 30px; height: 30px; position: relative;top: 6px}
  .pj-info h4{ font-size:18px;}
}

/*==================================================
    Section - Concept
==================================================*/ 
 
.section-concept{
  background-color: rgba(79,103,115,1);
  padding: 0 !important
}
.section-concept:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-color: rgba(79,103,115,0.70);
}
.tab-concept-content{
  padding: 0; /*T - 155*/
  position: relative;
}

 
.tab-concept-content.before-load > .tab-pane{ display: block; }
.tab-concept-content.before-load > .tab-pane + .tab-pane{ 
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  opacity: 0; 
  pointer-events: none; 
}
 

.section-concept .nav-tabs{
  position: absolute;
  top: 65px;
  left: 0;
  right: 0;
  z-index: 109
}
.pjconcept-wrap{
  padding: 190px 0 35px;
  position: relative;
}
.pjdetail-wrap,.pjconcept-wrap{ padding-bottom: 150px }
.pjconcept-wrap .photo-group{
  display: block;
  padding:0 55px;
  position: relative;
  z-index: 2;
  overflow: visible;
  background:none !important;
}
.pjconcept-wrap .photo-group img{ 
  width: 100%;
    position: relative;
  z-index: 2 
}

.article-pjconcept{
  display: block;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  max-width: 90%
}
.article-pjconcept h2{
  font-size: 34px;
  font-weight: 600;
  color: #fff
}

.article-pjconcept .line-texture{
  display: block;
  padding: 15px 0 30px
}
.article-pjconcept .line-texture img{
  /*width: 146px;
  height: 13px;*/
}

.article-pjconcept .play-video{
  display: block;
  padding-top: 30px;
  font-weight: 600
}
.article-pjconcept .play-video img{
  display: inline-block;
  vertical-align: middle;
  width: 42px;
  height: 42px;
  margin-right: 10px
}

.pc .article-pjconcept .play-video:hover a{ color: #e66157 }

.pjdetail-wrap{
  padding-top: 155px;
}
.pjdetail-wrap .background:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(79,103,115,0.88);
}
.pjdetail-wrap .hgroup {
  text-align: center;
  display: block;
  margin-bottom: 30px;
}
.pjdetail-wrap .hgroup .title-md{
  font-size: 24px;
  margin-bottom:8px;
}


.pjdetail-table{
  display: block;
  background-color:rgba(255,255,255,0.9 );
  box-shadow:10px 10px 30px 0px rgba(0,0,0,0.1);
  border:0px solid #000;
  padding: 35px;
  margin:0 20px;
  height: 100%;
  color:#272727;
}

.boxshadowsimg
{
  box-shadow:10px 10px 30px 0px rgba(0,0,0,0.1);
}

.pjdetail-table .table{
  color: #272727;
  width: 100%;
  table-layout: auto;
}
.pjdetail-table .table tr th,
.pjdetail-table .table tr td{
  border-top: 0; 
  padding: 15px 0;
}

.pjdetail-table .table tr th{
  color: #FFA400;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  padding-right: 30px;
}
.pjdetail-table .table.table-room tr th{
  border-bottom:1px solid #000;
  border-top: 1px solid #000 ;
  padding-right: 0
}
.pjdetail-table .table.table-room tr td{
  padding-top:5px;
  padding-bottom: 5px; 
}

.pjfacilities-wrap{
  display: block;
  padding: 190px 0 40px;
  margin: 0 auto;
}

.floor-info{
  display: block;
  padding:15px 0;
  margin:0 0;
  list-style-type: none;
  font-size: 0
}
.floor-info li{
  display: inline-block;
  vertical-align: top;
}
.floor-info li:nth-child(1){
  width: 35%; 
  padding-left: 0px;
}
.floor-info li:nth-child(2){
  width: 65%;
  padding-left: 40px;
  border-left: 1px solid #fff
}
.floor-info li:nth-child(1)
{
  text-align: right;
  padding-right:40px;
}

.floor-info h4,
.floor-info h5{
  color: #e66157;
  font-weight: 600;
}
.floor-info h4{
  font-size: 24px;
}
.floor-info h5{
  font-size: 16px;
}
.floor-info p{
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0
}

.floor-info.other{
  position: absolute;
  right: 10vw;
  bottom: -2vw;
} 
.floor-info.other li{ white-space: nowrap; }
.floor-info.other li:nth-child(1){ padding-left: 0 }

.pjfacilities-photo{
  display: block;
  position: relative;
  height: 100%;
  margin-top: -35px;
  margin-left:-6vw; 
}

.facilities-photo-list li {
  display: block;
  padding: 0;
  margin: 0;
  list-style-type: none;

  position: absolute;
}
.facilities-photo-list li img{ width: 100% }

.facilities-photo-list li.p1{
  top: -20px;
  right: 0;
}

.facilities-photo-list li.p1 img{ width: 255px}

/*.facilities-photo-list li.p2{
  top: 180px;
  right: 240px;
}

.facilities-photo-list li.p2 img{ width: 132px}

.facilities-photo-list li.p3 img{ width: 200px}
.facilities-photo-list li.p3{
  top: 126px;
  left: 77px;
}

.facilities-photo-list li.p4{
  bottom:0;
  left: 0;
}
.facilities-photo-list li.p4 img{ width: 160px}*/

.pjfacilities-wrap{ padding-bottom: 5vw }
.pjfacilities-photo .hgroup h2{ font-size: 2.2vw; }
.pjfacilities-photo .hgroup h3{ font-size: 1.9vw; }
.pjfacilities-photo .hgroup h3 span{ font-size: 2.5vw; margin-top: -0.7vw }

.facilities-photo-list li.p2{top: 13vw;right: 19vw; }
.facilities-photo-list li.p3{top: 9.5vw;left: 6vw;}
.facilities-photo-list li.p4{ bottom: -4vw; left: 0}

.facilities-photo-list li.p1 img{ width: 20vw }
.facilities-photo-list li.p2 img{ width: 9vw }
.facilities-photo-list li.p3 img{ width: 13vw }
.facilities-photo-list li.p4 img{ width: 10.5vw }

.fancybox-toolbar{ z-index: 99999 }

.fancybox-caption-wrap{
  bottom: auto;
  top: 0;
  padding:0; 
}
.fancybox-caption {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  font-size: 14px;
  color: #fff;
  line-height: 20px; 
  text-align: center;
  font-family: 'sukhumvit_setlight', sans-serif;
  height: 62px;
}

.fancybox-button{
  border-left:1px solid rgba(255,255,255,0.3);
  height: 62px;
  width: 62px; 
  background: transparent!important;
}
.fancybox-button img{ margin-top:-5px }

.fancybox-navigation .fancybox-button{
  border:0;
  width: 40px;
  height: 40px;
}
.fancybox-navigation .fancybox-button img{ width: 100% }
.fancybox-navigation .fancybox-button--arrow_left{ left: 40px; }
.fancybox-navigation .fancybox-button--arrow_right{ right: 40px; }

.facilities-photo-list li img,
.pjdetail-table table{
  -webkit-animation-duration: .6s;
  animation-duration: .6s;
  -webkit-animation-delay: .6s;
  animation-delay: .6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

.tab-pane.active .facilities-photo-list li.p1 img,
.tab-pane.active .facilities-photo-list li.p4 img{
  -webkit-animation-delay: .1s;
    animation-delay: .1s; 
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
.tab-pane.active .facilities-photo-list li.p2 img{
  -webkit-animation-delay: .15s;
    animation-delay: .15s; 
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
.tab-pane.active .facilities-photo-list li.p3 img{
   -webkit-animation-delay: .18s;
    animation-delay: .18s; 
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.tab-pane.active .pjdetail-table table{
  -webkit-animation-delay: .1s;
    animation-delay: .1s; 
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}


/*==================================================
    Section - Gallery
==================================================*/ 

.section-gallery { overflow: hidden;background-color:rgb(168,169,173); }
.section-gallery .background img{ height: 100% }
.section-gallery .background.g1{
  left:-30vw;  
  right: auto;
  opacity: 0.47
}
.section-gallery .background.g2{
  left: 40%; 
  opacity: 0.47
}
.swiper-gallery{ padding-bottom: 60px; }
.swiper-gallery .swiper-pagination-bullet{
  width: 10px;
  height: 10px;
  /*background-color: #553650;*/
  background-color: #fff;
  border:0;
}
.swiper-gallery .swiper-pagination-bullet-active{
  background-color: #e66157 !important;
}

.swiper-gallery .swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 0
} 


@media (min-width:768px) {
  .swiper-center{ margin-left: -100px }
  .swiper-center .swiper-wrapper{
    display: block;
    text-align: right;

  }
  .swiper-center .swiper-wrapper .swiper-slide{
    display: inline-block;
    vertical-align: top;
  }

  .swiper-center .swiper-pagination{ display:none; }
}


.photo-group{
  position: relative;
  display: block;
  overflow: hidden;
  background-color: #222;
}
.photo-group .photo{
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.photo-group .photo img{ width: 100% }

.heading{
  display: block;
  text-align: center;
  padding-bottom: 35px;
}
.heading h2{
  font-size: 34px;
  font-weight: 500;
}
.heading h2.black{ color: #191919 }

.heading.bar{
  position: relative;
  padding: 0 60px 0 0px;
  text-align: right;
  height: 68px; 
  display: inline-block;
}
.heading.bar:before {
  content: '';
  position: absolute;
  left: -155px;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgb(230,97,87);
  box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
  transform: skew(-20deg, 0);
}
.heading.bar h2{
  position: relative;
  z-index: 9;
  line-height: 70px;
}

.tab-gallery-content{
  padding: 55px 20vw 0 55px;
  position: relative;
} 
.gallery-item .photo{
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.pc .gallery-item:hover .photo{
  opacity: 0.65;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.gallery-item{
  display: block;
  position: relative;
  margin-bottom: 20px
}
.gallery-item .caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  padding: 15px;

  font-size: 15px;
  font-weight: 400;
  text-align: center;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

}

.tab-gallery-content .pancake{
  position: absolute;
  top: -2vw; 
  right: -9vw; 
  width: 30vw;
  z-index: 9
}
.tab-gallery-content .pancake img{ width: 100% }

/*==================================================
    Section - Experience 360
==================================================*/ 

.section-experience{
  background-color: rgba(79,103,115,1);
  overflow: hidden;
}

.tab-experience-content{
  display: block;
  padding:40px 0 0 0;
}

.tab-experience-content .container-fluid{
  position: relative;
  z-index: 9
}


/*==================================================
    Section - Floorplan
==================================================*/ 
.section-floorplan{
  padding: 55px 0;
  background-color: rgb(243,243,245);
}
.section-floorplan .container{ position: relative; }
.swiper-floorplan .swiper-slide{ text-align: center; }
.swiper-floorplan .swiper-slide img{ 
  /*max-width: 450px;*/
  height:calc(100vh - 200px);
  max-width: 100%;
}

.swiper-floorplan .swiper-slide > a{
  position: relative;
  display: inline-block;

  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.pc .fancybox:before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;

  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background-color: #e66157;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('../img/icons/icon-search.svg');

  opacity: 0;

  -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.pc a.fancybox:hover:before{ opacity: 1 }

.dropdown.option .dropdown-toggle{
  height: 47px;
  line-height: 47px;
  border:1px solid #CCCCCC;
  padding: 0 45px 0 25px;
  display: block;
  border-radius: 50px;
  font-size: 18px;
  min-width: 270px;
}
.dropdown.option .dropdown-toggle:before{
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 14px;
  height: 14px;
  margin-top: -5px;

  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url(../img/icons/icon-dropdown-arrow.svg);
}
.dropdown.option .dropdown-toggle:after{ display: none; }

.dropdown.option .dropdown-menu{
  border:1px solid #ccc;
  border-radius: 10px;
  padding:10px 0;
  width: 100%;
  background-color: #fff;
}
.dropdown.option .dropdown-menu ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: block;
}
.dropdown.option .dropdown-menu ul li{
  margin: 0;
  padding:0;
  display: block;
  cursor: pointer;
}


.dropdown.option .dropdown-menu ul li a,
.dropdown.option .dropdown-menu ul li span{
  display: block;
  padding:5px 20px; 

  -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.pc .dropdown.option .dropdown-menu ul li a:hover,
.dropdown.option .dropdown-menu ul li a.active{ background-color: #f1f1f1 }
 
.dropdown.option{
  float: right;
}
.dropdown.option .dropdown-toggle{
  color: #000
}

/*==================================================
    Section - Contact us
==================================================*/ 
.section-contact{
  background-color: #191919;
  padding-bottom: 0
}

.section-contact .background{ opacity: 0.34 }

.section-contact:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  height: 60%;
  z-index: 9;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

.section-contact .container{
   position: relative;
  z-index: 10
}

.tab-contact-content{
  display: block;
  padding: 0 0 0;
  height: 550px;
}
.tab-contact-content .tab-pane{
  height: 100%;
  -ms-flex-align: center !important;
align-items: center !important;
}
.tab-contact-content  > .active {
    display: flex;
}
.tab-contact-content .row{ width: 100% }

.contact-item{
  display: block;
  text-align: center;
}
.contact-item h3{
  font-size: 21px;
  font-weight: 600;
  line-height: 1.7;
  padding-top: 20px
}
.contact-item p{
  font-size: 18px;
  padding-top: 4px;
  font-weight: 400
}

.pc a.contact-item:hover{ opacity: 0.75 }

.form-contact{
  display: block;
  margin: -50px auto 0;
  max-width: 800px;
  width: 100%;
  padding: 0 20px;
  position: relative;
}

.form-contact .buttons{
  display: block;
  text-align: center;
  padding: 50px 0 0
}
.form-contact .buttons .btn{
  width: 100%;
  max-width: 175px;
}

.form-loader,
.form-success{
  position: absolute;
  top: 0;
  left: 50%;
  margin: 20px 0 0 -290px;

  width: 580px;
  height: 190px;
  z-index: 9;
  background-color: #F0F0F0;
  text-align: center;

  display: flex;
  -ms-flex-align: center;
  align-items: center ;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.form-loader .inner,
.form-success .inner{
  display: block;
  margin:10px auto 0
}

.form-loader p,
.form-success p{
  font-size: 14px;
  color: #191919;
  margin-top: 25px;
  margin-bottom: 0;
}
.form-success h4{
  font-size: 16px;
  color: #191919;  
}
.form-success p {
  margin: 0 0 5px;
}
.form-success .line-texture{
  display: block;
  text-align: center;
  margin: 12px 0 15px;
}
.form-success .line-texture img{
  display: inline-block;
  width: 140px;
}

.form-loader .progress{
  width: 190px;
  margin:0 auto; 
  border-radius: 0;
  height: 3px;
  background-color: #fff
}
.form-loader .progress-bar{
  background-color: #f1c630;
  width: 0%;
  transition-delay: 0.7s;
}

.form-contact.has-loader .form-loader,
.form-contact.if-success .form-success{
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.form-contact.has-loader .input-block,
.form-contact.has-loader .buttons,
.form-contact.if-success .input-block,
.form-contact.if-success .buttons{
  opacity: 0;
  pointer-events: none;
}
.form-contact.has-loader .form-loader .progress-bar{ width: 100% }

.section-map{
  padding: 10px !important;
}
.section-map .row{ margin: 0 -5px }
.section-map .row > div{ padding: 0 5px }

.section-map .hgroup{
  position: absolute;
  left: -30px;
  top: 30px;
  height: 40px;
  width: 235px;
  z-index: 9;
  padding-right: 30px
}
.section-map .hgroup:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #e66157;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.16);

  transform: skew(-15deg, 0);
}
.section-map .hgroup.blue:before{ background-color: #4e6772;}

.section-map .hgroup h2{
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  z-index: 9;
  line-height: 40px;
  text-align: right;
}

.map-item{
  display: block;
  position: relative;
  overflow: hidden;
  height: 100%
}
.map-item .map-photo{
  width: 100%
}

.map-item .icon-wrap{
  background-color: #e66157;
  border-radius: 50%;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
  text-align: center;
  display: block;
  width: 43px;
  height: 43px;

  position: absolute;
  bottom: 20px;
  right: 20px;

   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.map-item .icon-wrap img{
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: 13px;
} 

/*.pc .map-item:hover .icon-wrap{
  background-color: #e66157;
}*/

/*.gm-fullscreen-control{ right: 10px !important; opacity: 0 !important }
.mapfull .gm-fullscreen-control{ opacity: 1 !important }*/

.googlemap{
  display: block;
  width: 100%;
  height: 100%;

  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0
}

.map-item .icon-wrap.icon-google{
  background-color: #fff !important;
  right: 80px
} 

.map-item .photo-hidden{ display: block; opacity: 0; pointer-events: none;}

/*==================================================
    Section - Room type
==================================================*/ 

.section-roomtype {  
  padding-bottom: 100px;
  background-color: rgb(237,239,247);
}
.section-roomtype .background img{ height: 100% }
.section-roomtype .background.g1{
  left:-15vw;  
  right: auto;
  opacity: 0.19
}
.section-roomtype .background.g2{
  left: 45%; 
  opacity: 0.19
}

.section-roomtype .heading.bar::before{
  /*background-color: #0B4684*/
}

.swiper-roomtype{ margin:50px 50px 0 } 

.roomtype-item{
  display: block;
  position: relative;
  text-align: center;
  padding: 0 30px;
}
.roomtype-item a {
  display: block;
  position: relative;
}
.roomtype-item a:before{ z-index: 99 }
.roomtype-item a img{
  width: 100%
}

.roomtype-item .photo{
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  position: relative;
}
.roomtype-item h3{
  font-size: 18px;
  color: #000000
}

/*==================================================
    Section - Project progress
==================================================*/ 
.section-progress{
  padding-bottom: 90px;
  background-color:rgb(243,243,245);
}

.progress-chart{
  display: block;
  padding: 50px 0;
  margin:0 auto;
  max-width: 900px;
}
.pj-progress {
  display: block;
  position: relative;
  font-size: 16px;
  color: #707070;
  padding: 0 5px
}
.pj-progress:before{
  content: '';
  clear: both;
  display: block;
}
.pj-progress .progress { 
 
  height: 5px;
  overflow: hidden;
  font-size:14px;
  background-color:#F0F0F0;
  border-radius:0;
}

.pj-progress .progress .progress-bar{ 
  background-color: #e66157;
  width: 0;
  transition-delay: 0.7s;
}
.pj-progress .text{
  float: left;
  padding-top: 15px;
}
.pj-progress .percent{
  float: right;
  padding-top: 15px;
}

.project-photo{
  /*display: block;*/
  margin: 0 0; 
  position: relative;
  color: #000;  
}
.tab-progress-gallery{
  width:85%;
  padding-right: 15px;
}
.tab-progress-gallery .tab-pane img{ width: 100% }
.tab-progress-gallery .photo{
  background-size: contain;
  background-position: center center;
  background-color: #f1f1f1;
  background-repeat: no-repeat;
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
}
 
.nav-progress-gallery-wrapper {
  position: absolute;
  /*top: 35px; 
  bottom: 35px;*/
  top: 0;
  bottom: 0;
  right: 0;  
  width: 15%; 

  padding: 35px 0;
  overflow: hidden;
}
.nav-progress-gallery-tabs{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
 
.nav-progress-gallery-tabs li img{width: 100%}

.nav-progress-gallery-tabs li div{ display: block; }
.nav-progress-gallery-tabs li img{ display: none; }

.nav-progress-gallery-tabs li a{ 
  background-color: #222;
  display: block;
  height: 100%
}
.nav-progress-gallery-tabs li a:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  pointer-events: none;
  border:4px solid #e66157; 
  opacity: 0;
}
.nav-progress-gallery-tabs li.active a:before{ opacity: 1 }
.nav-progress-gallery-tabs li a div{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: block;
  height: 100%;
  opacity: 0.7;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.pc .nav-progress-gallery-tabs li a:hover div,
.nav-progress-gallery-tabs li.active a div{ opacity: 1 }

.progress-circle{
  display: block;
  position: relative;
  width: 110px;
  height: 110px; 
  margin: 0 auto
}

.progress-circle span.percent{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 110px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #707070
}
 

.swiper-vertical { 
  color: #000; 
  font-size: 30px; 
  height: 100%;
  overflow: visible;
}
.swiper-button.vertical{
  position: absolute;
  left: 0;
  right: 0;
  background-color:#e66157;
  height: 31px;
  border-radius: 0;
  width: auto;
 
  margin: 0 !important
}
.swiper-button.vertical:hover{background-color:#a5a8ab; opacity: 1 }
.swiper-button.vertical span{
  width: 12px;
  height: 12px;
  left: 50%; 
  top: 0;
  margin: 0 0 0 -3px;
  border-top:1px solid #fff;
  border-left: 1px solid #fff;
}

.swiper-button-next.vertical{
  bottom: -35px;
  top: auto !important;
}
.swiper-button-prev.vertical span{ top: 12px }

.swiper-button-prev.vertical{
  top: -35px;
}
.swiper-button-next.vertical span{ top: 5px }

.swiper-button.vertical.swiper-button-disabled{
  opacity: 1 !important;
  background-color: #cfd6e7;
  pointer-events: auto;
}
.swiper-button.vertical.swiper-button-disabled span{
  opacity: 0.2;
}
 
/*==================================================
    Section -Footer
==================================================*/ 

.footer{
  display: block;
  background-color:#e66157;
  padding:40px 0 30px;
  color: #fff;
  position: relative;  
  z-index: 1;
}

.footer .container{
  position: relative;
}

.footer-info{
  position: relative;
  display: block;
  padding: 12px 0 0 85px
}
.footer-info .logo{
  width: 53px;
  height: 85px;
  display: inline-block;
  vertical-align: top;
  position: absolute;
  left: 0
}
.footer-info .logo img{ width: 100% }

.footer-info p{ 
  margin:5px 0 ;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
}
.footer-info p a{
  font-size: 14px;
  color: rgba(255,255,255,0.3);
}
.pc .footer-info p a:hover{ color: rgba(255,255,255,1); }

.footer-logo{
  position: absolute;
  top: -40px;
  right: 15px;
}

/*==================================================
    Responsive media queries [Screen > 1441]
==================================================*/ 
@media (min-width: 1500px) {
  .nav-main li a{ 
    font-size: 18px; 
    padding: 0 1.5vw;
  }
  
  .pjdetail-wrap .hgroup{ margin-bottom: 50px }
  .pjdetail-table{ padding: 50px; }

  .project-photo{ margin: 0 100px }
}

@media (min-width: 1441px) {
  .nav-main li a{ 
    padding: 0 15px;
  }

  .floor-info h4{ font-size: 30px;}
  .floor-info h5{ font-size: 20px;}
  .floor-info p{ font-size: 20px; padding: 2px 0 }
  
  /*.pjfacilities-wrap{ padding-bottom: 5vw }
  .pjfacilities-photo .hgroup h2{ font-size: 2.2vw; }
  .pjfacilities-photo .hgroup h3{ font-size: 1.9vw; }
  .pjfacilities-photo .hgroup h3 span{ font-size: 2.5vw; margin-top: -0.7vw }
  
  .facilities-photo-list li.p2{top: 13vw;right: 19vw; }
  .facilities-photo-list li.p3{top: 9.5vw;left: 6vw;}
  .facilities-photo-list li.p4{ bottom: -4vw; left: 0}

  .facilities-photo-list li.p1 img{ width: 20vw }
  .facilities-photo-list li.p2 img{ width: 9vw }
  .facilities-photo-list li.p3 img{ width: 13vw }
  .facilities-photo-list li.p4 img{ width: 10.5vw }*/
 
}


/*==================================================
    Responsive media queries
==================================================*/

@media (min-width: 1119px) and (max-width: 1440px) {}    

@media (max-width: 1680px) {
   .roomtype-item{ padding: 0 0px; }
}

@media (max-width: 1440px) {
  .pjdetail-table{ margin:0 }
  .floor-info h4{font-size: 20px}
  .floor-info li:nth-child(1){ padding-left: 0px }

 
}

@media (max-width: 1380px) {
  .section-map .hgroup{ top: 10px; width: 185px }
  .video-wrapper video{ width: auto; height: 100vh }
  .tab-gallery-content .pancake{
    top: 4vw; 
  }

}

@media (max-width: 1200px) {
  .heading h2{ font-size: 30px }
  .heading.bar{height: 65px;}
  .heading.bar h2{line-height: 67px;}
  .pjconcept-wrap .photo-group{
    padding-left: 25px;
    padding-right: 25px;
  }

  .article-pjconcept h2{ font-size: 28px; }
  .article-pjconcept .play-video{ padding-top: 15px; }
  .article-pjconcept .play-video img{ width: 30px; height: 30px; }

  .pjdetail-wrap, .pjconcept-wrap{ padding-bottom: 100px; }

  .facilities-photo-list li.p2 img{ width: 12vw }
  .facilities-photo-list li.p3 img{ width: 15vw }
  .facilities-photo-list li.p4 img{ width: 13vw }
 
  .form-contact{ max-width: 650px; }
  .contact-item .icon{
    display: block;
    margin:0 auto;
    width: 120px;
    height: 120px 
  }
  .contact-item .icon img{ width: 100% }
  .contact-item h3{ font-size:19px }
  .contact-item p{ font-size:17px; }

  .tab-gallery-content .pancake{
    top: 9vw; 
  }
}

@media (max-width: 1024px) {
  .section-target .id-target{ top: -78px; } 
  .facilities-photo-list li.p3{ top: 11vw }
  .section-roomtype .background.g1{ left: -20vw }

  .swiper-floorplan .swiper-slide img{height: calc(100vh - 280px);}

  .video-wrapper{display: none;}
  .video-wrapper .img-device,
  .background.img-device{ display: block;}
  .floor-info li:nth-child(2){ padding-left:40px  }
  .floor-info li:nth-child(1)
  {
    text-align: right;
    padding-right:40px;
  }

}

@media (max-width: 991.98px) {

  .swiper-banner .swiper-slide{height: calc(100vh + 129px);}
  .section-banner .swiper-button-white {
    width: 60px;
    height: 60px;
  }
  .section-banner .swiper-button-prev{left: 40px;}
  .section-banner .swiper-button-next{right: 40px;}

  .project-info-bar::before{ background-size: 280px }

  .swiper-caption h2{ font-size: 38px; }
  .swiper-caption h3{ font-size: 27px }
  .swiper-caption .btn{font-size: 19px}

  .section-banner .swiper-pagination {bottom: 160px;}
  .scrolldown{ bottom: 220px }

  .project-info-bar {
    height: auto;
    padding: 18px 0
  }
  .project-info-bar .row{
    -ms-flex-align: normal !important;
    align-items: normal !important;
  }
  .pj-info h4{ 
    font-size: 14px; 
    text-align: center;
  }
  .pj-info .icon{
    width: 38px;
    height: 38px;
    display: block;
    margin:0 auto 15px
  }
  .pj-info .icon img {
    width: 22px;
    height: 22px;
  }

  .article-pjconcept h2{ font-size: 25px;}

  .pjconcept-wrap .photo-group{
    max-width: 400px;
    margin:0 auto; 
  }

  .article-pjconcept .hgroup{
    padding-top: 35px
  }
  .pjdetail-table .table{ margin-bottom: 0 }
  .pjdetail-table{border:0;}
  .pjdetail-table.left{ padding-bottom: 0 }
  .pjdetail-table.right{ padding-top: 0 }

  .pjfacilities-photo{
    margin-left: 0
  }
  .facilities-photo-list {
    padding:0;
    font-size: 0 
  }
  .facilities-photo-list li{
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: inline-block;
    vertical-align: top;
    width: 50%;
  }
  .facilities-photo-list li img{ width: 100% !important }

  .floor-info h4,
  .floor-info h5{ font-size: 18px }
  .floor-info li:nth-child(2){ padding-left:20px  }
  .floor-info li:nth-child(1)
  {
    text-align: right;
    padding-right:20px;
  }

  .floor-info p{ font-size: 14px; }

  .floor-info.first{ margin-top: 65px; }

  .pjfacilities-photo{ position: static; padding-top: 120px}
  .pjfacilities-photo .hgroup{ padding-bottom: 20px }
  .pjfacilities-photo .hgroup h2{ font-size: 24px; margin-bottom: 5px }
  .pjfacilities-photo .hgroup h3{ font-size: 29px; padding-left: 0 }
  .pjfacilities-photo .hgroup h3 span{ font-size: 34px }

  .pjfacilities-photo .hgroup{
    padding-bottom: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: -40px;
    text-align: center;
  }

  .pjfacilities-wrap .row > div{ position: static; }

  .heading{ padding-bottom: 25px }
  .tab-gallery-content{ padding-top: 40px; padding-left: 0 }
  .section{ padding: 45px 0 }

  .swiper-floorplan .swiper-slide img{ /*max-width: 300px;*/ height: calc(100vh - 300px); }

  .contact-item { padding-top: 20px } 
  .contact-item h3{ font-size: 17px; padding-top: 10px }
  .contact-item p{ font-size: 15px }

  .swiper-roomtype{ margin:50px 50px 50px } 

  .footer-info{ padding:0px 0 0 70px  }
  .footer-info .logo{
    width: 45px;
    height: 75px;
  }
  .footer-info p{ font-size: 12px ; margin:0 }
  .footer-logo{ 
    width:70px; 
    right: 30px
  }
  .footer-logo img{ width: 100%}

  .tab-gallery-content .pancake{
    top: 12vw; 
  }
}

@media (max-width: 850px) {
  .heading.bar{height: 45px; padding-left: 25px}
  .heading.bar h2{line-height: 45px; font-size: 20px}
  .dropdown.option .dropdown-toggle{
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    min-width: 200px;
  }
  .dropdown.option .dropdown-menu ul li{
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
  }
  .section-map .hgroup { 
    width: 135px;
    height: 30px; 
    padding-right: 15px;
  }
  .section-map .hgroup h2{ font-size: 14px; line-height: 30px; }
  .tab-gallery-content .pancake{
    top: 13vw; 
  }
}
@media only screen and (max-width:768px) {
  .section-experience
  {
    height:100vh !important;
  }
  .exifset
  {
    height:70vh !important;
  }
  .tab-gallery-content .pancake{
    top: 14vw; 
  }

  .thefirstf
  {
    margin-top: 0px !important;
    width:100%;
    display:inline-block;
  }
  .theotherf
  {
    margin-top: 0px !important;
    width:100%;
    display:inline-block;
  }
  .floor-info li:nth-child(1)
  {
    text-align: left;
    width: 100% !important;
  }

  .floor-info li:nth-child(2){
    text-align: left; 
    width: 100% !important;
  }

    
  .floor-info li:nth-child(2) p{
    text-align: left; 
    width: 100% !important;
    vertical-align: top;
  }

  .htpjt
  {
    margin-bottom:15px !important;
  }
  .pjconcept-wrap{
    padding: 155px 0 40px;
  }

  .hgroup h2.title
  {
    font-size:30px;
  }
  .article-pjconcept .hgroup {
     padding-top: 0px;
  }

  .setchangeimgrv
  {
    width: 90% !important;
  }
  .caption-video2
  {

  }
  .caption-video2 h2{
    font-size: 30px !important;
  }
  .caption-video2 h3{
    font-size: 23px !important;
  }
  .caption-video2 .btn{
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    padding: 0 45px;
  }
  .centercept
  {
    width: auto !important;
    height:100vh !important;
    margin-left:50vw;
    transform:translate(-50%);
  }
  .img-ribbon-tr
  {
    display: none;
  }
  .img-ribbon-br
  {
    display: block !important;
  }
  .img-ribbon-bl
  {
    display: block !important;
  }
}
 
@media only screen and (max-width:767px) {


  body{ font-size: 15px }
  .section-target .id-target{ top: -78px; }
  .swiper-banner .swiper-slide{height: calc(100vh + 229px);}

  .swiper-caption .inner{ margin-top: 4vh }
  .swiper-caption h2{ font-size: 31px; }
  .swiper-caption h3{ font-size: 23px }
  .swiper-caption .btn{
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    padding: 0 45px;
  }
  .caption-video
  {
    margin-top:30vh !important;
  }
  .caption-video h2{
    font-size: 30px !important;
  }
  .caption-video h3{
    font-size: 23px !important;
  }
  .caption-video .btn{
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    padding: 0 45px;
  }
  .caption-video2
  {

  }
  .caption-video2 h2{
    font-size: 30px !important;
  }
  .caption-video2 h3{
    font-size: 23px !important;
  }
  .caption-video2 .btn{
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    padding: 0 45px;
  }
  .centercept
  {
    width: auto !important;
    height:100vh !important;
    margin-left:50vw;
    transform:translate(-50%);
  }
  .section-banner .swiper-button-white {
    width: 30px;
    height: 30px;
    margin-top: -100px;
  }
  .section-banner .swiper-button-prev{ left: 20px; }
  .section-banner .swiper-button-next{ right: 20px; }
  .section-banner .swiper-pagination{ display: none; }

  .video-wrapper video{height: calc(100vh + 229px);}

  .project-info-bar::before{ display: none; }

  .pj-info{
    text-align: left;
    width: 280px;
    margin:7px auto 
  }
  .pj-info .icon{
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: 0;
  }
  .pj-info .icon img{
    position: relative;
    top: 8px;
    vertical-align: top;
  }
  .pj-info h4{
    text-align: left;
  }

  .scrolldown{ display: none; }

  .nav-tabs .nav-item a{
    padding: 0 15px;
    font-size: 15px;
  }
  .section-concept .nav-tabs{ top: 35px }

  .pjconcept-wrap{ padding-top: 110px; }
  .pjconcept-wrap .photo-group{max-width: 100%; }
  
  .article-pjconcept h2{ font-size: 22px; }
  .article-pjconcept .hgroup{ padding-top:25px}
  .article-pjconcept .line-texture{padding: 15px 0 20px;}
  .article-pjconcept .line-texture img{ width: 125px }
  .article-pjconcept .play-video{ padding-top: 15px; }
  .article-pjconcept{ max-width: 100% }
  .article-pjconcept .play-video img{ width: 32px; height: 32px; }

  .pjdetail-wrap,
  .pjfacilities-wrap{ padding-top:110px !important }
  .pjdetail-wrap .hgroup .title-md {
    font-size: 20px;
    margin-bottom: 0;
  }
  .pjdetail-wrap .hgroup .line-texture img{ }
  .pjdetail-wrap, .pjconcept-wrap{ padding-bottom: 50px }

  .pjfacilities-photo .hgroup{ top: 0 }

  .pjfacilities-photo .hgroup h2{ font-size: 18px }
  .pjfacilities-photo .hgroup h3{font-size: 22px;}
  .pjfacilities-photo .hgroup h3 span{font-size: 25px; padding-left: 0;}

  .floor-info.first{ margin-top:0px;}
  .floor-info h4{ margin-bottom: 5px; }
  .floor-info li:nth-child(1),
  .floor-info li:nth-child(2){
    width: 0%;
    padding-left: 0;
  }
  .floor-info li:nth-child(2){
    border:0;
    font-size: 0
  }

  .floor-info li p{
    display: inline-block;
    /*width: 50%;*/
    font-size: 16px;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
  }

  .floor-info li:nth-child(2) p:before{
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%
  }



  .pjfacilities-photo{ padding-top: 50px; }
  
  .section{ padding:30px 0 }
  .heading{padding-bottom: 20px }
  .heading h2{ font-size: 25px; }
  

  .tab-gallery-content{ padding-top: 30px;}
  
  .section-gallery .background.g1{ left: -1500px ; opacity: 0.25 }
  .section-gallery .background.g2{ left: 20% }
  .swiper-gallery{ padding-bottom: 50px }
  .gallery-item{ margin-bottom: 10px }


  .swiper-floorplan .swiper-slide img{/* max-width: 200px;*/ }
  .swiper-button-next, .swiper-button-prev{
    width: 30px;
    height: 30px;
  }
  .swiper-button-prev{ left: 20px; }
  .swiper-button-next{ right: 20px; }

  .tab-experience-content{ padding-top: 34px }

  .pc .fancybox::before{
    width: 40px;
    height: 40px;
    background-size: 17px;
  }

  .swiper-roomtype{
    margin:25px 20px;
  }
  .section-roomtype .background.g1{ left: -50vw }
  .section-roomtype .background.g2{ left: 30%; opacity: 0.7 }
  .form-loader{
    width: 400px;
    margin: 50px 0 0 -200px;
    height: 130px
  }

  .dropdown.option{ margin-top: 20px }
  /* .device .tab-progress-gallery{
    display: none;
  }
  .device .nav-progress-gallery-wrapper{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;

    padding-top: 15px;
    margin-right: -25px;
    margin-left: -25px;
  }

  .device .swiper-button.vertical{ display: none; }
  .device .swiper-vertical{ 
    overflow-x: scroll;
    padding:  0 45px 0 25px;
    margin:0 0 0 0;
    -webkit-overflow-scrolling: touch;
  }

  .device .swiper-vertical::-webkit-scrollbar {
      width: 0px;
      background: transparent;
  }
   
  .device .swiper-vertical .swiper-wrapper{
    transform:none !important;
    height: auto;
  }
  .device .swiper-vertical .swiper-slide{ 
    height: auto !important;
    width: 100%;
    padding-right: 10px;
  }
  .nav-progress-gallery-tabs li a{ 
    height: auto !important;
  }
  .device .nav-progress-gallery-tabs li img{display: block; width: 100%}

  .device .nav-progress-gallery-tabs li a::before{display: none;}
  .device .nav-progress-gallery-tabs li a{ background-color: #f1f1f1 }
  .device .nav-progress-gallery-tabs li div{opacity: 1; background-size: contain;}
  .device .swiper-container-vertical > .swiper-wrapper{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: normal;
    -ms-flex-direction: unset;
    flex-direction: unset;
  } 
 
  .device .nav-progress-gallery-wrapper{ padding-top: 15px }
   */

  .tab-progress-gallery{
    display: none;
  }
   .nav-progress-gallery-wrapper{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;

    padding-top: 15px;
    margin-right: -25px;
    margin-left: -25px;
  }

   .swiper-button.vertical{ display: none; }
   .swiper-vertical{ 
    overflow-x: scroll;
    padding:  0 45px 0 25px;
    margin:0 0 0 0;
    -webkit-overflow-scrolling: touch;
  }

   .swiper-vertical::-webkit-scrollbar {
      width: 0px;
      background: transparent; /* make scrollbar transparent */
  }
   
   .swiper-vertical .swiper-wrapper{
    transform:none !important;
    height: auto;
  }
   .swiper-vertical .swiper-slide{ 
    height: auto !important;
    width: 100%;
    padding-right: 10px;
  }
  .nav-progress-gallery-tabs li a{ 
    height: auto !important;
  }
   .nav-progress-gallery-tabs li img{display: block; width: 100%}

   .nav-progress-gallery-tabs li a::before{display: none;}
   .nav-progress-gallery-tabs li a{ background-color: #f1f1f1 }
   .nav-progress-gallery-tabs li div{opacity: 1; background-size: contain;}
   .swiper-container-vertical > .swiper-wrapper{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: normal;
    -ms-flex-direction: unset;
    flex-direction: unset;
  } 
 
   .nav-progress-gallery-wrapper{ padding-top: 15px }
  
  .map-item{ margin-bottom: 10px; overflow: visible;}
  /*.map-item .icon-wrap{display: none;}*/

  .map-item .icon-wrap{
    width: 33px;
    height: 33px;
    right: 12px;
  }

  .map-item .icon-wrap img{ width:13px; top: 10px  }
  .map-item .icon-wrap.icon-google{ right: 58px; }


  .map-item .icon-wrap.icon-map {display: none;}
  .map-item .icon-wrap.icon-google{ right: 12px }

  .pj-progress{ font-size: 14px }
  .pj-progress .text,
  .pj-progress .percent{ padding: 15px 0 25px }

  .progress-chart{ padding-bottom: 0 }
  .progress-chart .align-items-center{
    -ms-flex-align: normal !important;
    align-items: normal!important;
  }
  .progress-circle{
    width: 90px;
    height: 90px;
    position: relative;
    left: 5px
  }
  .progress-circle span.percent{ line-height: 90px }
  .progress-circle canvas{
    width: 90px !important;
    height: 90px !important;
  }

  .footer{ padding:30px 0 28px}
  .footer-info .logo{ 
    width: 36px; 
    height: 58px; 
    left: 8px 
  }
  .footer-logo{ width: 62px; top: -30px; }
  .footer-copyright{
    background-color: #e74c34a9;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    padding:15px 0 
  }
  .footer-copyright a{ color: rgba(255,255,255,0.3); }
  .footer-copyright .container{ padding-left: 30px }
  .hgroupx h3 span {
    font-size: 37px;
    margin-top: -5px !important;
  }
  .tab-gallery-content .pancake{
    top: 31vw; 
  }
}

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

@media (max-width:576px) {
  /*.section-concept .nav-tabs{
   margin-left:-20px;
   margin-right: -20px;  
   font-size: 0;
   white-space: nowrap;
  }*/
  /*.nav-tabs .nav-item{ margin:0 3px;  }*/
  .nav-tabs .nav-item:nth-child(3n){ margin-left:3px;  }
  .nav-tabs .nav-item a{ 
    font-size: 13px;
    height: 30px;
    line-height: 32px;
    padding: 0 5px
  }

  .pjdetail-table .table tr th, .pjdetail-table .table tr td{ font-size:14px}
  .pjdetail-table .table:not(.table-room) tr th,
  .pjdetail-table .table:not(.table-room) tr td{
    display: block;
    padding-left: 0;
    padding-right: 0;
  }
  .pjdetail-table .table:not(.table-room) tr th{ padding-bottom: 0 }
  .pjdetail-table .table:not(.table-room) tr td{ padding-top: 0; padding-bottom: 0 }

  .pjdetail-table .table.table-room{ margin-top:20px  }

  .tab-gallery-content{ 
    padding-right: 0;
    padding-bottom: 100px;
  }
  .tab-gallery-content .pancake {
    top: auto;
    right: -46px;
    width: 160px;
    height: 200px;
    bottom: 10px;
  }

  .heading.bar{ 
    padding-left: 10px; 
    padding-right: 25px; 
    height: 35px;
  }
  .heading.bar h2{ line-height: 35px; font-size: 17px}
  .dropdown.option .dropdown-toggle {
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    min-width: 190px;
    padding: 0 35px 0 15px;
  }

  .contact-item .icon{
    width: 95px;
    height: 95px 
  } 
  .contact-item h3{ font-size:16px }
  .contact-item p{ font-size:14px; }
  .contact-item p br{ display: none }

  .tab-contact-content{ /*height: 480px;*/ }
  #contact1.tab-pane .row{ width: auto; margin:0  }
  #contact1.tab-pane .row > div{ padding: 0 }

  .btn{
    height: 48px;
    line-height: 48px;
    font-size: 16px
  }

  .form-loader{
    left: 0;
    right: 0;
    margin-left: 0;
    width: auto;
  }
  .form-loader p{ margin-top: 15px }
  .setchangeimgrv
  {
    width: 100% !important;
  }
}

@media (max-width:480px) {
  .pjdetail-table{ padding:20px 20px  }
  .pjdetail-table .table.table-room tr td{ font-size: 12px; }

  .swiper-floorplan .swiper-slide img{/* max-width: 150px; height:  auto; */}
}

@media (max-width:376px) {
  .section-concept .nav-tabs .nav-item a{ padding: 0 7px; }
  /*.section-concept .nav-tabs .nav-item{ margin:0 2px;  }*/
  .section-concept .nav-tabs .nav-item:nth-child(3n){ margin-left:2px;  }

   
  .footer{padding: 25px 0 19px} 
  .footer-info .logo {
    width: 32px;
    height: 53px;
    left: 0
  }
  .footer-info {padding: 0px 0 0 52px;}
  .footer-logo{ width: 55px;top: -25px; right: 20px }
}

@media (max-width:369px) {
  .swiper-caption h2{
    font-size: 20px
  }
  .swiper-caption h2{
    font-size: 28px;
  }
  .swiper-caption .btn{
    padding: 0 30px; 
  }
  .caption-video
  {
    margin-top:30vh !important;
  }
  .caption-video h2{
    font-size: 28px !important;
  }
  .caption-video h3{
    font-size: 20px !important;
  }
  .caption-video .btn{
    font-size: 25px !important;
  }
  .caption-video2
  {

  }
  .caption-video2 h2{
    font-size: 28px !important;
  }
  .caption-video2 h3{
    font-size: 20px !important;
  }
  .caption-video2 .btn{
    font-size: 25px !important;
  }
  .centercept
  {
    width: auto !important;
    height:100vh !important;
    margin-left:50vw;
    transform:translate(-50%);
  }
  .nav-tabs .nav-item a{ font-size: 11px; }
}

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



/**************************************

              Site - background

**************************************/
.site-background{
  pointer-events: none;
}
.site-background > div{
  position: absolute;
  z-index: 9
}
.site-background > div img{ width: auto; } 

.site-background.pjdetail.left{
  width: 20%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.site-background.pjdetail.right{
  width: 20%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
@media only screen and (max-width:992px) {
  .section-experience{ padding-bottom: 60px }
} 

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

}

@media (max-width: 576px) {
  .section-experience{ padding-bottom: 50px }
} 

.thelangddl
{
 background-color: rgba(0,0,0,0.3);
}

.lang .lang-btn {
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  padding-top: 2px;
}
.lang .lang-btn .arrow{
  position: relative;
  width: 7px;
  height: 7px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
  margin-left: 5px;
}
.lang .lang-btn .arrow .arrow-down{
  width: 100%;
  height: 100%;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}
.lang .dropdown-menu{
  padding: 5px 0;
  width: 55px;
  min-width: 0;
  text-align: center;
  border-radius: 0;
  margin-left: -12px;
  margin-top: 16px;
  border: 1px solid rgba(0,0,0,.15);
} 
.lang .dropdown-menu .dropdown-item{
  padding: 0 15px;
  font-size: 12px;
  padding: 5px 0;
}


.phone{
  display: block;
  margin:0 auto;
  background-color: #fff;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  padding-top:30px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  text-align: center;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.ph3
{
  padding-top: 30px !important;
}

.tpic
{
  margin-top: 4% !important;
}

@media (max-width: 1199px) {
  .phone{
    width: 90% !important;
    height: 90% !important;
    padding-top: 20% !important;
  }
  .ph3
  {
    padding-top: 10px !important;
  }
  .showon1199{
    display: block !important;
    margin: 10px;
  }
  .hideon1199{
    display: none !important;
  }
  .showon1199flex{
    display: inline-flex !important;
    margin: 10px;
  }
  .hideon1199flex{
    display: none !important;
  }
  .hgroupx h2
  {
    font-size: 34px;
  }
  .hgroupx h3
  {
    font-size: 32px;
  }
  .hgroupx h3 span
  {
    font-size: 37px;
  }
  .pjfacilities-wrap{
    padding: 155px 0 40px;
  }
}


@media (max-width: 991px) {
  .phone{
    width: 90% !important;
    height: 90% !important;
    padding-top: 20% !important;
  }
  .tpic
  {
    margin-top: 0% !important;
  }

  .pjdetail-table{
    box-shadow:none;
  }
  .htpjtb
  {
    padding-top:12px;
  }
  .htpjtc
  {
    
  }
  
  .hgroupx h2{
    font-size: 34px;
    padding-right: 10vw;
  }
  .hgroupx h3{
    font-size: 32px;
    padding-left: 10vw;
  }
  .hgroupx h3 span{
    font-size: 37px;
    margin-top: -7px;
  }
  .showon991{
    display: block !important;
    margin: 10px;
  }
  .hideon991{
    display: none !important;
  }
  .showon991flex{
    display: inline-flex !important;
    margin: 10px;
  }
  .hideon991flex{
    display: none !important;
  }
}

.changefloorto
{
  height:200px;
  overflow: auto;
}

.htpjt
{
  color:#FFA400 !important;
}

.htpjtc
{
  padding-top:18px !important;
}

.divtoshowborder
{
  width:95%;float:right;
}
.divtoshowsetborder
{
  border-left:1px solid white !important;
}

@media only screen and (max-width:1091px)
{
  .divtoshowborder
  {
    width:100%;float: auto;;
  }
  .divtoshowsetborder
  {
    border-left:none !important;
  }
}

.nav-tabs .nis2  a:before{
  background-color: rgb(78,103,114);
}

.phoneico
{
  fill: #4e6772 !important;
}

.smallflower-1
{
  top: 40px;
  left: -47px;
}

.smallflower-2
{
  bottom: 50px;
  right: -47px;
}

.smallflower-3
{
  bottom: 100px;
  left: -45px;
}

.smallflower-4
{
  top: 50px;
  right: -45px;
}

.smallflower-5
{
  bottom: 100px;
  left: -45px;
}

.smallflower-6
{
  top: 50px;
  right: -45px;
}

.smallflower-7
{
  top: 120px;
  left: -47px;
}

.smallflower-8
{
  bottom: 100px;
  right: -47px;
}

.smallflower-9
{
  bottom: 100px;
  left: -48px;
}

.smallflower-10
{
  top: 50px;
  right: -46px;
}

.smallflower-11
{
  bottom: 100px;
  left: -48px;
}

.smallflower-12
{
  top: 50px;
  right: -46px;
}

.smallflower
{
  opacity:0.5
}

.bigflower-1x
{
  top: -342px;
  right: -510px;
  z-index: 1 !important;
  opacity:0.5;
}
.bigflower-1x img
{
  width:80% !important;
}

.bigflower-1
{
  bottom: -342px;
  left: -341px;
  z-index: 999 !important;
  opacity:0.5;
}
.bigflower-1 img
{
  width:80% !important;
}


.bigflower-2
{
  bottom: -342px;
  left: -341px;
  z-index: 1 !important;
  opacity:0.5;
}

.bigflower-2 img
{
  width:80% !important;
}


svg path,
svg rect,
svg line{ 
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

svg path {fill: #e66157 !important;}

svg g#Ellipse_5 {stroke: #e66157 !important;}

.svg
{
  margin-bottom: -13px;
  margin-right: 10px;
}

.showon991{
  display: none;
  margin: 10px;
}
.hideon991{
  display: block;
}


.showon991flex{
  display: none;
  margin: 10px;
}
.hideon991flex{
  display: inline-flex;
}

.showon767{
  display: none;
}
.hideon767{
  display: block;
}

.showon767flex{
  display: none;
}
.hideon767flex{
  display: inline-flex;
}

.showon1024{
  display: none;
}
.hideon1024{
  display: block;
}
.showon1024flex{
  display: none;
}
.hideon1024flex{
  display: inline-flex;
}

.showon1199{
  display: none;
}
.hideon1199{
  display: block;
}
.showon1199flex{
  display: none;
}
.hideon1199flex{
  display: inline-flex;
}

.showon414
{
  display: none;
}
.hideon414
{
  display: inline;
}

.thefirstf
{
  /*background-color: red;*/
}

.theotherf
{
  /*background-color: green;*/
}

.setchangeimgrv
{
  width: 80%;
}

.shs:before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  background-color: #fff;
  border-radius: 50%
}

@media (max-width:505px)
{
  .cnam
  {
    display: block;
  }
  .allr
  {
    display: block;
  }
}

@media (max-width:414px)
{
  .hgroupx h2{
    padding-right: 0vw !important ;
  }
  .hgroupx h3
  {
    padding-left: 0vw !important ;
  }
  .showon414
  {
    display: inline;
  }
  .hideon414
  {
    display: none;
  }
}


@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border .75s linear infinite;
  animation: spinner-border .75s linear infinite;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

.spinner-style {
  border-width: 0.5px !important;
  margin-left: 15px;
  width: 25px;
  height: 25px;
  font-size: 15px;
}

/*.wow { z-index: 1; }*/


.caption-video
{
  display: flex;
  width: 100%;
  /*margin-top:20vh;*/
  height:100vh;
  position: absolute;
  z-index: 9;
  text-align: center;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.caption-video .inner{
  display: inline-block;
  margin: -5vh auto 0;
  color: #fff;
}

.caption-video h3{
  color: rgb(240,103,33);
  font-size: 32px;
  font-weight: 600;
}
.caption-video h2{
  color: #ffffff;
  font-size: 43px;
  font-weight: 600;
}
.caption-video .btn{
  border-radius: 0;
  height: 50px;
  line-height: 50px;
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  padding: 0 50px;
  border:0 !important;
  background-color: rgba(240,103,33,0.8) !important;
  cursor:text !important;
  margin-top: 20px;
}

.caption-video2
{
  display: flex;
  width: 100%;
  /*margin-top:20vh;*/
  height:100vh;
  position: absolute;
  z-index: 9;
  text-align: center;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.caption-video2 .inner{
  display: inline-block;
  margin: -5vh auto 0;
  color: #fff;
}

.caption-video2 h3{
  color: rgb(249,182,78);
  font-size: 32px;
  font-weight: 600;
}
.caption-video2 h2{
  color: #ffffff;
  font-size: 43px;
  font-weight: 600;
}
.caption-video2 .btn{
  border-radius: 0;
  height: 50px;
  line-height: 50px;
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  padding: 0 50px;
  border:0 !important;
  background-color: rgba(230,97,87,0.8) !important;
  cursor:text !important;
  margin-top: 20px;
}
.centercept
{
  width:100%;
}
.forcenterslide
{
  height:100%;
  width:100%;
}

.centertheimg
{
  cursor: pointer;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translateY(-50%) translateX(-50%) !important;
          transform: translateY(-50%) translateX(-50%) !important;
  z-index:999 !important;
  width:150px !important;
}


.centertheimgnow
{
  cursor: pointer;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translateY(-50%) translateX(-50%) !important;
          transform: translateY(-50%) translateX(-50%) !important;
  z-index:999 !important;
}

.circle {
  stroke: #e66157;
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  -webkit-transition: all 0.5s ease-in-out;
  opacity: 0.3;
}

.playBut {
/*  border: 1px solid red;*/
  display: inline-block;
  -webkit-transition: all 0.5s ease;
}
.playBut .triangle {
-webkit-transition: all 0.7s ease-in-out;
  stroke-dasharray: 240;
  stroke-dashoffset: 480;
  stroke: #4f6773;
  transform: translateY(0);
}
.playBut.addplayan .triangle {
  stroke-dashoffset: 0;
  opacity: 1;
  stroke: #e66157;
  animation: nudge 0.7s ease-in-out ;
}
@keyframes nudge {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  70% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}
.playBut.addplayan .circle {
  stroke-dashoffset: 0;
  opacity: 1;

}

.img-ribbon-tr
{
  pointer-events: none;
  z-index:10000;
  position: fixed;
  top: 0;
  right: 0;
  border: 0;
  width: 150px;
  height: 150px;
}

.img-ribbon-br
{
  pointer-events: none;
  z-index:10000;
  position: fixed;
  bottom: 0;
  right: 0;
  border: 0;
  width: 150px;
  height: 150px;
  display: none;
}
.img-ribbon-bl
{
  pointer-events: none;
  z-index:10000;
  position: fixed;
  bottom: 0;
  left: 0;
  border: 0;
  width: 150px;
  height: 150px;
  display: none;
}

.main-logo1 {
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
}

.main-logo {
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
}

.main-logo1 {
	position: absolute;
	top: -15px;
	left: -20px;
	opacity: 0;
	background-color: #272727;
	padding: 10px 10px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.scrolling .main-logo {
	display: 0;
}
.scrolling .main-logo1 {
	opacity: 1;
}

@media (max-width: 1930px) {
	.scrolling .main-logo {
		opacity: 0;
	}

	.main-logo {
		margin-right: 20px !important;
	}

	.main-logo1 {
		top: 0px;
		left: -15px;
		width: 72px;
		height: auto;
		position: absolute;
		background-color: #272727;
		padding: 10px 10px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0);
	}
}


@media (max-width: 1380px) {
	.scrolling .main-logo {
		opacity: 0;
	}

	.main-logo {
		margin-right: 15px !important;
	}

	.main-logo1 {
		top: 0px;
		left: -15px;
		width: 72px;
		height: auto;
		position: absolute;
		background-color: #272727;
		padding: 10px 10px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0);
	}
}

@media (max-width: 1200px) {
	.scrolling .main-logo {
		opacity: 0;
	}

	.main-logo {
		margin-right: 15px !important;
	}

	.main-logo1 {
		top: 0px;
		left: -15px;
		width: 72px;
		height: auto;
		position: absolute;
		background-color: #272727;
		padding: 10px 10px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0);
	}
}

@media (max-width: 1024px) {
	.img-ribbon-tr
	{
		display: none;
	}
	.img-ribbon-bl
	{
		display: block !important;
	}
	.scrolling .main-logo {
		opacity: 0;
	}

	.main-logo {
		margin-right: 0px !important;
	}

	.main-logo1 {
		top: -20px;
		left: -10px;
		width: 72px;
		height: auto;
		position: absolute;
		background-color: #272727;
		padding: 10px 10px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0);
	}
}

@media (max-width: 850px) {
	.scrolling .main-logo {
		opacity: 0;
	}

	.main-logo {
		margin-right: 0px !important;
	}

	.main-logo1 {
		top: -20px;
		left: -10px;
		width: 72px;
		height: auto;
		position: absolute;
		background-color: #272727;
		padding: 10px 10px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0);
	}
}

@media (max-width: 480px) {
	.scrolling .main-logo {
		opacity: 0;
	}

	.header-inner {
		padding-top: 0px !important;
	}

	.main-logo {
		margin-right: 0px !important;
	}

	.main-logo1 {
		top: -17px;
		left: -10px;
		width: 61px;
		height: auto;
		position: absolute;
		background-color: #272727;
		padding: 10px 10px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0);
	}
}