html,
body {
	margin: 0;
	padding: 0;
	font-family: 'Raleway', sans-serif;
	color: #e5caaf;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
	font-size: 12pt;
    font-weight: 400;
    line-height: 1.5;
   
}

a {
    color: #BBA17A;
    text-transform: uppercase;       
}

a:hover,
a:focus {
    color: #BBAA7A;
    text-decoration: none; 
}

h1 {
    font-family: 'Raleway', sans-serif;
    color: #fff;
    font-size: 48pt;
    line-height: 1.4;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Sans', sans-serif;  
    color: #fff;
    font-weight: 600;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #dcc2a8;
    margin: 2em 0;
    padding: 0; 
}

.khk-tl-border-design {
    border: 1.5px solid #BBA17A;
    width: 150px;
    height: 150px;
    border-left: none;
    border-top: none;    
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px 15px;
    z-index: 2;
}

.khk-br-border-design {
    border: 1.5px solid #BBA17A;
    width: 150px;
    height: 150px;
    border-right: none;
    border-bottom: none;    
    position: absolute;
    bottom: 0;
    right: 0;
}

.khk-border {
    border: 1.5px solid #BBA17A;
    padding: 75px;
}

.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    position: absolute;
}

#main-menu.navbar-shrink {
    padding-top: 0;
    padding-bottom: 0;
    background-color: #0f1023; 
}

.nav-item {
    font-size: 12pt;
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #e5caaf;
}

.navbar-brand {
    color: #e5caaf;
    display: block;
}

.navbar-brand img {
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 0;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: 96%;  
  cursor: pointer;  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;  
  background: #BBA17A;
  border-radius: 3px;
    z-index: 1;
  left: 96%;
  transform-origin: 4px 0px;  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #BBA17A;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
/*#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -70px;
  padding: 50px;
  padding-top: 175px;
  height: 100%;
    position: fixed;
  background-color: rgba(6,29,25,0.75);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;*/
  /* to stop flickering of text in safari */
  
 /* transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
*/
#menu {
    position: absolute;
    /*margin: -40px 0 0 0;*/
    margin: -43px 0 0 -470px;
    list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(200%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
display: none;
}

#menu li {
    padding: 12px 15px;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    display: inline-block;
    margin-right: 0;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
    display: block;
    transform: translate(100%, 0);
}

#menu-item-313 {
    display: none;
}

#projects {
    background-image: url('../img/habitus.jpg');
    height: 100vh;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    /*position: relative;*/
}

#project-details,
#project-details .project {
    padding-left: 0;
    padding-right: 0;
    min-height: 0;
}

.projects {
    padding-right: 50px;
    padding-left: 50px;
    margin-top: 175px;
} 

.projects h1 {
    font-size: 31px;
    color: #BBA17A;
    margin-bottom: 100px;
}
.projects h2 {
    font-family: 'PT Serif', serif;
    font-style: italic;
}

.projects p {
    font-family: 'PT Serif', serif;
    font-style: italic;
    font-size: 14px;
    margin-bottom: 50px;
    margin-right: 200px;
}

.hero-text ul li,
.projects ul li {
    text-transform: uppercase;
    padding-left: 25px;
    padding-right: 25px;
    border-right: 1px solid #BBA17A;
    font-size: 17px;
    font-weight: 400;
    margin-right: 0 !important;
}

.projects ul li:first-child {
    padding-left: 0px;
    margin-right: 0 !important;
}

.hero-text ul li:last-child,
.projects ul li:last-child {
    border-right: none;
}

.projects .container ul li a {
    color: #BBA17A; 
}

.projects ul li a:hover,
.projects ul li a:focus,
.projects ul li a:active {
    color: #BBA17A;   
    text-decoration: none;
}

.projects ul li .active {
    border: 1.5px solid #BBA17A;
    padding: 10px;/*padding: 10px 25px;*/
}

#project-details .project {
    position: fixed;
    right: 0;
    max-width: 33.333333%;
     z-index: 1000;
  /*position: fixed;
  right: 500px;
  width: 500px;*/
  height: 100vh;
  /*margin-right: -500px;*/
  overflow-y: auto;
  background: #fff;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
    display: none;
}
#project-details .project .project-details {
    /*padding: 0px 20px;*/
    padding-left: 25px;
    padding-right: 25px;
    position: absolute;
    bottom: 46%;
}

#project-details .project .project-details h2,
#project-details .project .project-details h5,
#project-details .project .project-details p {
    color: #3D3D3D
}

#project-details .project .project-details h2,
#project-details .project .project-details h5 {
    text-align: center;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

#project-details .project .project-details h2 {
    letter-spacing: 5px;   
}

#project-details .project .project-details h5 {
    font-size: 12px;
    margin-bottom: 30px;
}

#project-details .project .project-details p {
    font-size: 14px;
   /* margin-bottom: 30px;*/
}

#project-details .project .project-details .visit-website {
    color: #BBA17A;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

#project-details .project .project-details .visit-website:hover {
    text-decoration: none;
}

#project-details #palm .project-details h2,
#project-details #rubber .project-details h2,
#project-details #durian .project-details h2 {
    text-align: left !important;
}

#project-details .project .carousel {
    position: fixed;
    bottom: 0;
    
}

#project-details .project .embed-responsive {
    height: 255px;
}

.carousel {
    height: 255px;
    width: 100%;
}
.projects-development {
    background-image: url('../img/habitus.jpg');
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
}

.projects-investment {
    background-image: url('../img/investment-bg.jpg');
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
}

.projects-plantation {
    background-image: url('../img/plantation-bg.jpg');
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
}

.projects-development #menu,
.projects-investment #menu,
.projects-plantation #menu {
    margin: -43px 0 0 -600px;
}

.projects-plantation h1 {
    text-transform: uppercase;
    margin-bottom: 25px !important;
}

.projects-plantation p {
    color: #95989A;
}
.overlay:before{
  position: absolute;
  content:" ";
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: block;
  z-index:0;
  background-color: rgba(6,29,25,0.75);
}

.sl-overlay {
    background: rgba(6,29,25,0.75) !important;
    opacity: 1 !important;
}

.sl-wrapper .sl-close, .sl-wrapper .sl-counter,
.sl-wrapper .sl-navigation button {
    color: #fff !important;
}

.sl-counter {
    display: none !important;
}

#investment-projects h1 {
    font-size: 31px;
    text-transform: uppercase;
    color: #BBA17A;
    margin-bottom: 25px;
}

.hidden {
    display: none !important;
}

.active {
    display: block !important;
}

.inner {
    margin-top: 10%;
    padding-bottom: 10%;
}


.hero-image {    
    background-image: url('../img/khk-home-bg.jpg');
    height: 100vh;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 93%;
    height: 85%;
    border: 1.5px solid #BBA17A;
    padding: 75px;    
}

.hero-text .home-center,
.hero-text .nav-center {
    position: absolute;    
    left: 50%;
    transform: translate(-50%, -50%);
}

.hero-text .home-center {
    top: 50%;
}

.hero-text .nav-center {
    top: 90%; 
}

.hero-text h1 {
    line-height: 0.8;
    font-family: 'Raleway', sans-serif;
    font-weight: 300; 
    text-align: center;
    font-size: 20pt;
    margin: 25px 0;
    line-height: 1.5;
}

.hero-text h1 > span{
    margin-left: 75px;
}


#about,
#contact {
    height: 100% !important;
}

#about h1,
#contact h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 31pt;
    font-weight: 400;
    color: #BBA17A;
    text-transform: uppercase;
}

#contact h1 {
    margin-bottom: 35px;
}

#about h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 18pt;
    color: #BBA17A;
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 35px;
}

#about h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 16pt;
    color: #FFFFFF;
    font-weight: 400;
    margin-bottom: 35px;
}

#about p,
#contact p {
    color: #ACACAC;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.form-control {
    color: #BBA17A;
    background-color: transparent;
    border: 1.5px solid #BBA17A;
    border-radius: 0;
}

.btn-primary {
    color: #fff;
    background-color: #BBA17A;
    border-color: #BBA17A;
}

.btn-primary:hover {
    color: #fff;
    background-color: #BBA97A;
    border-color: #BBA97A;
}

#contact address {
    margin-top: 50px;
}

.grecaptcha-badge {
    opacity: 0;
}

@media(max-width:768px) {
    #project-details .project {
        max-width: 100%;
        position: absolute;
    }
    
    #projects,
    #investment-projects,
    #plantation-projects {
        height: 100%;
    }
    
    .projects {        
        padding-right: 0;
        padding-left: 10px;
        margin-top: 125px;
    }
    
    .projects h1 {
        margin-bottom: 50px;
    }
    
    .projects ul li { 
        padding-left: 0;
        padding-bottom: 20px;
        border-right: none;
    }
    
    #investment-projects #project-details .project,
    #plantation-projects #project-details .project {
        position: absolute;
    }
    
    #investment-projects #project-details/*,
    #plantation-projects #project-details*/ {
        margin-top: 300px;
    }
    
    .hero-text ul li, 
    .projects ul li {
        border-right: none;
    }
    
    .inner {
        margin-top: 40%;
        padding: 0 10% 10% 10%;
    }
    
    .khk-border {
        padding: 30px;
    }
    
    .khk-tl-border-design,
    .khk-br-border-design {
        width: 100px;
        height: 100px;
    }
    
    .hero-text .home-center {
        top: 40%;
    }
    
    .hero-text .nav-center {
        top: 83%;
    }
    
    .navbar-brand {
        padding-top: 0;
        margin-top: -5px;
    }
    .navbar-brand img {
        height: 75px;
    }
    
    #menuToggle {
        top: 75px;
        text-align: center;
    }
    
    #menuToggle span,
    #menuToggle input {
        left: 87%;
    }
    
    .projects p {
        margin-right: 0;
    }
    
    .projects-development #menu, 
    .projects-investment #menu, 
    .projects-plantation #menu {
        margin: -60px;
    }
    
    #menu li {/*
        padding: 10px 0;
        display: block; */
        position: relative;
    }
    #menuToggle input:checked ~ ul {
        display: contents;
    }
}