/* Show it is fixed to the top */
@import url('https://fonts.googleapis.com/css?family=Lora:400,400i,500,700,700i|Raleway:400,500,600');
body {
  min-height: 50rem;
  padding-top: 2.5rem;
font-family: 'Raleway', sans-serif !important;
}



p {
	font-family: 'Raleway', sans-serif !important;
	font-weight: 400;
	font-size: 1.063rem !important;
	line-height: 1.625rem;
}
h2, .h2 {
	font-family: 'Lora', serif !important;
	font-size:2rem !important;
	letter-spacing: -0.05rem;
}
h3, .h3 {
	font-family: 'Lora', serif !important;
	font-size:2.125rem !important;
	font-style:italic;
}
h4, .h4 {
	font-family: 'Lora', serif !important;
	font-size:1.75rem !important;
	letter-spacing: -0.015em;
}
.display-4 {
	font-family: 'Lora', serif !important;
	font-size: 3rem;
  	font-weight: 300;
  	line-height: 1.2;
}
@media (min-width: 576px) {
.display-4 { font-size: 3.5rem; }
h2, .h2 { font-size:2.5rem !important;}
}
.branch-1 {
	font-family: 'Raleway', sans-serif !important;
	font-weight: 400;
	font-size: 2.5rem !important;
	line-height: 1.825rem;
}
.branch-2 {
	font-family: 'Raleway', sans-serif !important;
	font-weight: 500;
	font-size: 1.125rem !important;
	line-height: 3rem;
}
.bg-branch {
	background-image:url(../images/bg-branch.svg);
	background-position:center center;
	padding: 20px 50px;
}
.branch-link {
	font-family: 'Raleway', sans-serif !important;
	font-weight: 600;
	font-size: 1rem !important;
	color: #9f846f;
	letter-spacing: 0.05rem;
}

 .btn-ov {
    position:fixed;
    bottom: 150px;
    right: 5px;
    z-index: 9999;
     cursor: pointer;
                
}

@media (min-width: 768px) {
    .btn-ov {
    bottom: 170px;
                
    }
}

/**** overlay *****/


.well {
        /* drop-shadow is better than box-shadow as it add a shadow to tooltip arrows arrow as well,
        however drop-shadow dramatically affects the performance of transition animation on Android. */
        /* filter: drop-shadow(0 0 10px rgba(0,0,0,0.3)); */
        display:none;
        margin:1em;
        max-width: 740px;
    border-radius: 8px;
    }
    .well .popup_close {
        position: absolute;
        top: 0;
        right: 0px;
        border-radius: 0;
        background: none;
        border: 0;
        font-size: 35px;
        padding: 0 10px;
    }
    pre.prettyprint {
        padding: 9px 14px;
    }
    pre {
      font-size: 12px;
    }
    .fulltable {
        max-width: 100%;
        overflow: auto;
    }

#fadeandscale {
  transform: scale(0.8);
}
.popup_visible #fadeandscale {
  transform: scale(1);
}

	

	

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */



.header-line { border-bottom: 5px solid #24205d; }
.bg-brown { background-color: #9f846f }
.bg-dummy { background-image:url(../images/dummy_750.jpg); }
.bg-brown-light { background-color: rgba(159,132,111,0.1); }
.bg-brown-mix { background-color: rgba(159,132,111,0.3); }
.bg-menu-color { background-color: rgba(223,223,223,0.3); }
.bg-abt { background:url(../images/abt_us.jpg) center center; background-size:cover;}
.bg-ttdi { background:url(../images/ttdi_b.jpg) top ; background-size:cover;}
.bg-lepetit { background:url(../images/lepetit_b.jpg) top ; background-size:cover;}
.bg-parlour { background:url(../images/parlour_a.jpg) top ; background-size:cover;}
.bg-klcc { background:url(../images/klcc_a.jpg) top right ; background-size:cover;}
.bg-ioi { background:url(../images/ioi-a.jpg) top center ; background-size:cover;}
.thumb-index { padding:300px 0 10px 15px;}
.btn-brown {
	background-color:#9a8048;
	padding: 10px 65px !important;
	font-family: 'Raleway', sans-serif !important;
	color: #fff;
	letter-spacing: 0.15rem;
	border-radius: 0;
}
.btn-view {
	background: url(../images/view-menu.svg) center center no-repeat;
	padding: 20px 80px;
	letter-spacing: 0.25rem;
	color: #9a8048;
}
.btn-view:hover { text-decoration: none; color:#630; }
	

.bdr-brown { border: 2px solid #9f846f; }

.tx-gold { color: #9a8048 }
.tx-brown { color: #9f846f }
.tx-white { color: #fff }


footer .list-inline-item a {
	color: #fff;
	font-size: 0.875rem;
	padding: 0 20px 0 0; }
.bg-footer-1 { background: none; }
.bg-footer-2 { background:none; }

footer small {
	font-size: 0.75rem;
	letter-spacing: 0.05rem }

@media (min-width: 576px) {
.bg-footer-1 { background:url(../images/bg-footer-1.png) bottom left no-repeat; }
.bg-footer-2 { background:url(../images/bg-footer-2.png) top right no-repeat; }
}

input::placeholder {
	/***font-family: 'Nunito Sans', sans-serif;***/
	font-family: 'Open Sans', sans-serif;
	font-size: 0.875rem;
	font-style:italic;
	opacity: 0.6;
}
input::-webkit-input-placeholder {
color: #CCC !important;
}
 
input:-moz-placeholder { /* Firefox 18- */
color: #CCC !important;  
}
 
input::-moz-placeholder {  /* Firefox 19+ */
color: #CCC !important;  
}
 
input:-ms-input-placeholder {  
color: #CCC !important;  
}
	
/**** NAVIGATION *****/

.nav-link {
font-family: 'Lora', serif !important;
font-size: 1.125rem;

}
.nav-item {
	padding-left: 20px;
padding-right: 20px;
}
.nav-item .nav-link { color: #000 !important; }

/**************Card**********/
.card {
  background-color: transparent !important;
  border: 0 solid rgba(0, 0, 0, 0.125) !important;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.125) !important;
}
.card-title {
	font-family: 'Lora', serif !important;
	font-size: 1.125rem;
	color: #9a8048;
    /**color: #373535;**/
    font-weight: 500;
}
.card-text {
	font-family: 'Lora', serif !important;
	font-size: 0.875rem !important;
	font-style:italic;
	color: #868686;
	line-height: 1.5rem;
}


/****************Jumbotron*********/
.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 8rem 2rem !important;
  }
}

@media (min-width: 992px) {
  .jumbotron {
    padding: 12rem 2rem !important;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}




/*****google maps***/
.google-maps {
        position: relative;
        /***padding-bottom: 36%; // This is the aspect ratio***/
		padding-bottom: 110%;
        height: 0;
        overflow: hidden;
}
.google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
		border: 0;
}
	  
.maps iframe{
    pointer-events: none;
}
	
@media (min-width: 576px) {
/***@media (max-width: 47.9em) {***/
	.google-maps { padding-bottom: 60%; // This is the aspect ratio }
}
@media (min-width: 768px) {
	.google-maps { padding-bottom: 55%; // This is the aspect ratio }
}
@media (min-width: 992px) {
	.google-maps { padding-bottom: 45%; // This is the aspect ratio }
}
@media (min-width: 1200px) {
	.google-maps { padding-bottom: 40%; // This is the aspect ratio }
}


/*****MARGIN & PADDING EXTRA*****/
.m-6 {
	padding: 5rem;
}
.mt-6 {
  margin-top: 5rem !important;
}
.mt-7 {
  margin-top: 7rem !important;
}
.my-6 {
 margin-top: 5rem !important;
 margin-bottom: 5rem !important;
}
.my-7 {
 margin-top: 7rem !important;
 margin-bottom: 7rem !important;
}
.p-7 {
	padding: 7rem;
}
.pt-6 {
  padding-top: 5rem !important;
}
.pt-7 {
  padding-top: 7rem !important;
}
.pb-6 {
  padding-bottom: 5rem !important;
}
.pb-7 {
  padding-bottom: 7rem !important;
}
.py-6 {
 padding-top: 5rem !important;
 padding-bottom: 5rem !important;
}
.py-7 {
 padding-top: 7rem !important;
 padding-bottom: 7rem !important;
}
.mt-150 {
	margin-top: 75px; }
.mt-200 {
	margin-top: 100px; }
.mt-250 {
	margin-top: 125px; }	
.mt-300 {
	margin-top: 150px; }

@media (min-width: 576px) {
.mt-sm-6 {
  margin-top: 5rem !important;
}
.mt-sm-7 {
  margin-top: 7rem !important;
}
.pt-sm-6 {
  padding-top: 5rem !important;
}
.pt-sm-7 {
  padding-top: 7rem !important;
}
.pb-sm-6 {
  padding-bottom: 5rem !important;
}
.pb-sm-7 {
  padding-bottom: 7rem !important;
}
.py-sm-6 {
 padding-top: 5rem !important;
 padding-bottom: 5rem !important;
}
.py-sm-7 {
 padding-top: 7rem !important;
 padding-bottom: 7rem !important;
}
.mt-150 {
	margin-top: 150px; }
.mt-200 {
	margin-top: 200px; }
.mt-250 {
	margin-top: 250px; }	
.mt-300 {
	margin-top: 300px; }
}
@media (min-width: 768px) {
.mt-md-6 {
  margin-top: 5rem !important;
}	
.mt-md-7 {
  margin-top: 7rem !important;
}
.pt-md-6 {
  padding-top: 5rem !important;
}	
.pt-md-7 {
  padding-top: 7rem !important;
}
.pb-md-6 {
  padding-bottom: 5rem !important;
}
.pb-md-7 {
  padding-bottom: 7rem !important;
}
.px-md-6 {
 padding-left: 5rem !important;
 padding-right: 5rem !important;
}
.py-md-6 {
 padding-top: 5rem !important;
 padding-bottom: 5rem !important;
}
.py-md-7 {
 padding-top: 7rem !important;
 padding-bottom: 7rem !important;
}
.big_tp5 { min-height: 860px; }
}
@media (min-width: 992px) {
.mt-lg-6 {
  margin-top: 5rem !important;
}
.mt-lg-7 {
  margin-top: 7rem !important;
}
.pt-lg-6 {
  padding-top: 5rem !important;
}
.pt-lg-7 {
  padding-top: 7rem !important;
}
.pb-lg-6 {
  padding-bottom: 5rem !important;
}
.pb-lg-7 {
  padding-bottom: 7rem !important;
}
.py-lg-6 {
 padding-top: 5rem !important;
 padding-bottom: 5rem !important;
}
.py-lg-7 {
 padding-top: 7rem !important;
 padding-bottom: 7rem !important;
}
.my-lg-6 {
 margin-top: 5rem !important;
 maargin-bottom: 5rem !important;
}

}
@media (min-width: 1200px) {
.mt-xl-6 {
  margin-top: 5rem !important;
}
.mt-xl-7 {
  margin-top: 7rem !important;
}
.pt-xl-6 {
  padding-top: 5rem !important;
}
.pt-xl-7 {
  padding-top: 7rem !important;
}
.pb-xl-6 {
  padding-bottom: 5rem !important;
}
.pb-xl-7 {
  padding-bottom: 7rem !important;
}
.py-xl-6 {
 padding-top: 5rem !important;
 padding-bottom: 5rem !important;
}
.py-xl-7 {
 padding-top: 7rem !important;
 padding-bottom: 7rem !important;
}
}



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

@media (min-width: 576px) {
    .card-columns {
        column-count: 1;
    }
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 2;
    }
}

@media (min-width: 992px) {
    .card-columns {
        column-count: 3;
    }
}

@media (min-width: 1200px) {
    .card-columns {
        column-count: 4;
    }
}