@charset "utf-8";



/*@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}*/

@font-face {
	font-family: 'entypo';
	src:url('../fonts/controls/entypo.eot');
	src:url('../fonts/controls/entypo.eot?#iefix') format('embedded-opentype'),
		url('../fonts/controls/entypo.woff') format('woff'),
		url('../fonts/controls/entypo.ttf') format('truetype'),
		url('../fonts/controls/entypo.svg#entypo') format('svg');
	font-weight: normal;
	font-style: normal;
}
* {
	margin: 0;
	outline: none;
	/*border: 0;
	border:none;*/
	padding: 0;
	outline-style: none;
	text-decoration: none;
	font-style: normal; 
	font-weight: normal
}

::-webkit-scrollbar { 
    display: none; 
}
::-moz-scrollbars { 
    display: none; 
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}




html body{
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	height:100%;
	width:100%;
}

b, strong {
	font-weight: bold;
}

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}


pre {
	white-space: pre-wrap;
}
q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}

svg:not(:root) {
	overflow: hidden;
}

button, input, select, textarea {
	font-family: inherit;
	font-size: 100%;
	
}
button, input {
	line-height: normal;
}
button, select {
	text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}
button[disabled], html input[disabled] {
	cursor: default;
}
input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
	
}
input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none;
}

textarea {
	overflow: auto;
	vertical-align: top;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after {display: table;  content: ''; }
.clearfix:after { clear: both; }


body {
	background: #2a2e39;
	color: #dbdbdb;
	font-weight: 300;
	font-size: 1em;
    font-family: 'Josefin Sans', sans-serif;
    /*overflow: hidden;*/
	
}


section:after{
	 clear:both;
	display:table;
	content: '';
	
	}


a {
	color: #36b6dd;
	text-decoration: none;
}

a:hover,
a:focus {
	
	color: #fff !important;
}
h1, h2, h3, h4, h5, h6	{  font-family: 'Playfair Display', serif;color: #dbdbdb;font-weight:900}
/*h1  {font-size:64px}
h2 {font-size:3em}*/

h1.page-title{
	 color:#dbdbdb;
	 padding-bottom:10px;
	 text-align:center;
	 font-size:5vw;
	 text-transform:uppercase;
	 font-family: 'Josefin Sans', sans-serif;
     font-weight:300;
	 position:fixed;
	 width:70%;
	 left:0;
	 right:0;
	 margin:5% auto;
	 z-index:100;
	/*-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: -webkit-transform 0.6s, opacity 0.6s;
	transition: transform 0.6s, opacity 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);*/

	
	}
	h1.page-title{
	opacity:1;
	top:5%;
	-webkit-transition:  0.6s;
	transition: 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	
	}
	
	h1.page-title span {
		
		text-transform:capitalize;
		font-family: 'Playfair Display', serif;
        font-weight:400;
		padding-bottom:20px;
		display:block;
		font-size:17px;
	}
	
	
.container--open h1.page-title{top:-10%;opacity:0;}

.hide{visibility: hidden; }
.slideContainer {
	transition: visibility 0s, opacity 0.5s linear;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 99;
	background: #2a2e39;
}

.menu {
	margin-top: 0.5em;
}

.menu__item {
	display: inline-block;
	margin: 0 1em 0 0;
	padding: 0.2em 0;
	text-transform: uppercase;
	white-space: nowrap;
	letter-spacing: 2px;
	font-size: 0.75em;
}

.menu__item--current {
	border-bottom: 1px solid #000;
	border-color: initial;
}

.intro { transition: visibility 0s, opacity 0.5s linear; }
.items-wrap{ transition: visibility 0s, opacity 0.5s linear; }

.visibleContainer { visibility: visible;  opacity: 1; }
.closebtn {
	width: 80px;
	height: 80px;
	position: fixed;
	right: 5px;
	bottom: 5px;
	background: transparent;
	border: none;
	font-size: 60px;
	color: #1a1a1a;
}
.divider {
	width: 98%;
	height: 1px;
	box-shadow: inset 0 1px rgba(0,0,0,0.2), inset 0 -1px rgba(0,0,0,0.2);
	margin: 20px auto;
	clear: both;
	display:block;
	
}
.divider:before, .divider:after {display: table;  content: '';clear: both;}

.divider.green {
	width: 200px;
	height: 1px;
	box-shadow: inset 0 1px #0F6, inset 0 -1px #0F6;
	margin: 20px auto;
	clear: both;
	display: block;
	font-size: 15px;
	text-transform: lowercase;	
	opacity:0.8;
	
}
.related {
	padding: 9em 1em;
	text-align: center;
	font-size: 1.5em;
	line-height: 1.8;
}



.intro {
	position: fixed;
	top:0;
	z-index: 10;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: #2a2e39;
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);

	
}

.container {position:relative;}

.container--open .intro  {
	-webkit-transform: translate3d(0, -100%, 0) translate3d(0, 250px, 0);
	transform: translate3d(0, -100%, 0) translate3d(0, 250px, 0);
}

/* Fullscreen image */
.intro__image {
	position: absolute;
	bottom: 0;
	z-index:-1;
	min-width: 100%;
	min-height: 100%;
	/*width: auto;
	height: auto;*/
	opacity: 0.8;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: -webkit-transform 0.6s, opacity 0.6s;
	transition: transform 0.6s, opacity 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	
}
/* Fullscreen image per area */

.intro__image.chalong {background-image: url(../img/chalong/header-chalong.jpg);}
.intro__image.rawai {
	background-image: url(../img/rawai/header-rawai.jpg);
}
.intro__image.patong {
	background-image: url(../img/patong/header-patong.jpg);
}
.intro__image.kamala {
	background-image: url(../img/kamala/header-kamala.jpg);
}
.intro__image.kathu {
	background-image: url(../img/kathu/header-kathu.jpg);
}
.intro__image.naiharn {
	background-image: url(../img/naiharn/header-naiharn.jpg);
}
.intro__image.cover{
	background-image: url(../img/header-main.jpg);
}

/*.overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../img/pattern.png) repeat top left;
	z-index:0;
	opacity:0.5;
	webkit-transition: 0.6s;
	transition:  0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);}	*/

.container--open .intro .overlay {top:-300px!important}


.container--open .intro__image/*  .container--open .page-title*/ {
	opacity: 0;
	top:0%;
	-webkit-transform: translate3d(0, 20%, 0);
	transform: translate3d(0, 20%, 0);
	
}


.items-wrap{opacity:0;}

.container--open .items-wrap{opacity:1;}
/* Intro content */
.intro__content {
	position: absolute;
	bottom: 0;
	padding: 1.8em;
	width: 100%;
	font-size: 1.15em;
}
.intro__content.top {
	position: relative;
	bottom: unset;
	padding: 1.8em;
	width: 100%;
	font-size: 1.15em;
}

h2.intro__title {
	margin: 0 0 20px;
	font-weight: 900;
	font-size: 4.5vw;
	font-family: "Playfair Display", Georgia, serif;
	line-height: 1;
}

.intro__subtitle {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}

.intro__description {
	line-height: 1.2;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 0.3em;
}
.intro__description span {color: #36b6dd}

/* Trigger button with SVG */
.trigger {
	position: relative;
	-webkit-flex: none;
	flex: none;
	overflow: hidden;
	margin: 0 0 0 20px;
	padding: 0;
	width: 50px;
	height: 50px;
	outline: none;
	border: none;
	background: none;
}
.trigger.slide-trigger{
    width: 100px;
    height: 100px;
    position:fixed;
    right:7px;
    top:140px;
   
}
.trigger.slide-trigger .icon{ 
    opacity:1;
}

/* arrow*/
.trigger span {
	position: fixed;
    width: 300px;
    height:auto;
	bottom: 100px;
	right: 20px;
	z-index: 1000;
	display:block;
	opacity:0.8;
	-webkit-transition: opacity 0.6s;
	transition: opacity 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.trigger span img {max-width:100%}
.container--open .trigger span {opacity:0}

.icon rect,
.icon line {
	stroke: #dbdbdb;
	fill: none;
	stroke-width: 2px;
}

.icon {
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

/* Hide grid and show cross when opening */
.icon--cross,
.trigger--active .icon--grid {
	opacity: 0;
	-webkit-transform: scale3d(0.5, 0.5, 1);
	transform: scale3d(0.5, 0.5, 1);
}

.trigger--active .icon--cross {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
    
}



/* Main content */
.items-wrap {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 250px 5px 0;
}

.items-wrap::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #2a2e39;
	content: '';
	opacity: 1;
	-webkit-transition: opacity 0.6s;
	transition: opacity 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	pointer-events: none;
}

.container--open .items-wrap::after {
	opacity: 0;
}

.item {
	position: relative;
	-webkit-flex: 1 0 25%;
	flex: 1 0 25%;
	overflow: hidden;
	height: 22vw;
	outline: none;
	border: 5px solid #2a2e39;
	border-width: 0 5px 10px;
	background: #2a2e39;
}

.item__image {
	position: absolute;
	top: 50%;
	min-height: 100%;
	width: 100%;
	opacity: 0.7;
	-webkit-transform: translate3d(0, -50%, 0) scale3d(1.2, 1.2, 1);
	transform: translate3d(0, -50%, 0) scale3d(1.2, 1.2, 1);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

.item:hover .item__image {
	opacity: 1;
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
}

.item__title {
	position: absolute;
	bottom: 0;
	margin: 0;
	padding: 1em;
	color: #dbdbdb;
	font-size: 1.85em;
	font-family: "Playfair Display", Georgia, serif;
	line-height: 1;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.item:hover .item__title {
	opacity: 0;
	-webkit-transform: translate3d(0, 20px, 0);
	transform: translate3d(0, 20px, 0);
}

.item-casenumber {position:absolute;top:10px;left:10px;z-index:100}
.case-number span {color: #36b6dd;}

.listing-wrap {
	/*padding-top:45px;*/
	margin-bottom:50px;
	width:100%;
	padding: 10px;
	
}

.listing-wrap h1.intro__title {
	font-size:64px;
	/*padding-left:0;*/
	/*padding-top:1.2em;*/
	}

.listing-gallery {
	width:48%;
	float:left;
	overflow:hidden;
	/*height:400px;*/
	max-width:640px;
	margin-right:10px;
	
	}

/*.page-heading{width:100%;padding:10px}*/
/*.listing-gallery img {max-width: initial}*/
	
.listing-info {width:48%;float:left;}
.listing-info h2 {padding-left:2px;margin-bottom:10px}	
.listing-info table {margin-bottom:10px;margin-top:20px;} 
.listing-info table td {padding:2px;}
.listing-info table tr:last-child td {border-bottom:none!important;}
.listing-info table tr td {border-bottom: 1px solid #fff!important;border-left:1px solid #fff!important;border-right:none!important;}
.listing-info table tr td:first-child {border-left:none!important;}
.listing-description{
	width: 48%;
	float: left;
	color: #919191;
	padding-left:2px;
	padding-top:10px;
	}
.listing-description h4{margin-bottom:10px;margin-top:20px}

@media screen and (max-width: 1100px) {
	.listing-description {
		width:100%;
	   }
}

@media screen and (max-width: 700px) {
	
	.listing-gallery {
	width:100%;
	float:none;
	margin-right:0;
	
	}
.listing-info {
	width:100%;
	float:none;
	}

}

/* gallery slider*/

.main {position:absolute;z-index:-1;}

.slider {top:80px;left:40px;position:absolute;}

.slider-case-number {font-size: 1.25em;}

.slider h2 {margin: 0 0 20px;
	font-weight: 900;
	font-size: 64px;
	font-family: "Playfair Display", Georgia, serif;
	line-height: 1;
}
.cbp-bislideshow {
	list-style: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	padding: 0;
	margin: 0;
	opacity:0.8;
}

.cbp-bislideshow li {
	position: absolute;
	width: 101%;
	height: 101%;
	top: -0.5%;
	left: -0.5%;
	opacity: 0;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	transition: opacity 1s;
}

/* If background-size supported we'll add the images to the background of the li */

.backgroundsize .cbp-bislideshow li {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
}

/* ...and hide the images */
.backgroundsize .cbp-bislideshow li img {
	display: none;
  
}

.cbp-bislideshow li img {
	display: block;
	width: 100%;
     
    
}

.cbp-bicontrols {
	position: fixed;
	width: 300px;
	height: 100px;
	margin: -50px 0 0 -150px;
	top: 50%;
	left: 50%;
}

.cbp-bicontrols span {
	float: left;
	width: 100px;
	height: 100px;
	position: relative;
	cursor: pointer;
}

.cbp-bicontrols span:before {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
	font-family: 'entypo';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 100px;
	font-size: 80px;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	opacity: 0.7;
}

.cbp-bicontrols span:hover:before {
	opacity: 1;
}

.cbp-bicontrols span:active:before {
	top: 2px;
}

span.cbp-biplay:before {
	content: "\e002";
}

span.cbp-bipause:before {
	content: "\e003";
}

span.cbp-binext:before {
	content: "\e000";
}

span.cbp-biprev:before {
	content: "\e001";
}

.cbp-bicontrols span.cbp-binext {
	float: right;
}

/* Fallback */

.no-js.no-backgroundsize .cbp-bislideshow li:first-child {
	opacity: 1;
}

.no-js.backgroundsize .cbp-bislideshow li:first-child img {
	display: block;
}


/** Form Basic Styling **/









form table {
	border-collapse: collapse;
	border-spacing: 0;
	text-align: left;
}
form table *, form * {
	font-family: 'Raleway', Arial, sans-serif;
	font-size: 1em;
	
}

.TTWForm-container {
	width:100%;
	text-align: center;
	padding-left:10px;
	padding-right:10px;
	margin-top: 50px;
	max-width:660px;
	
}
.TTWForm-container:after {
    clear:both;
	display:table;
	content: '';
	}

.TTWForm-container h3 {

	margin-bottom: 0.75em;
	text-align: left;	
	color:#919191!important;

}

.TTWForm{
	width: 100%;
	max-width: 640px;
	
}



/** Field Styles **/

.TTWForm .field {

    padding-bottom: 12px;
	padding-top: 12px;
	position: relative;
	clear: both;
	margin-bottom:12px;
	color: #919191;

}
/** Field Widths */


.f_100 {
	width: 100%;
	display: inline;
	float: left;
	/*margin-left: 2%; 
	margin-right: 2%; */
}


.TTWForm input, .TTWForm textarea, .TTWForm select, .TTWForm .field  { }

.TTWForm input:focus, .TTWForm textarea:focus, .TTWForm select:focus {

    -webkit-box-shadow: 0px 0px 5px #bfdeff;
	-moz-box-shadow: 0px 0px 5px #bfdeff;
	box-shadow: 0px 0px 5px #bfdeff;

}

.TTWForm input[type=radio], .TTWForm input[type=checkbox] {

    width: 12px;
	margin: 8px 12px;
	top: 3px;
	position: relative;

}

.TTWForm .option{ margin: 6px 0; }

.TTWForm option { background-color: #bfdeff; }

.TTWForm select { padding: 6px 6px; background-color: #FFFFFF; }
    

    
   


.TTWForm textarea { overflow: hidden; width: 100%; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; text-shadow: 1px 1px 0px #fff; border: 1px solid #d9d9d9; box-shadow: 0 0 5px #eee inset; -moz-box-shadow: 0 0 5px #eee inset; -webkit-box-shadow: 0 0 5px #eee inset; -ms-box-shadow: 0 0 5px #eee inset; height: 132px;color: #919191;}


.TTWForm label { color: #919191; text-align: left;}

input {

width:100%;

  

   padding: 6px 0;

    color: #999999;
     
    border: 1px solid #d9d9d9;

    outline: none;

    display: inline-block;

    position: relative;

    z-index: 2;

    box-shadow: 0 0 5px #eee inset;

    -moz-box-shadow: 0 0 5px #eee inset;

    -webkit-box-shadow: 0 0 5px #eee inset;

    -ms-box-shadow: 0 0 5px #eee inset;

    border-radius: 3px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    -webkit-transition: .3s ease-in-out;

    -moz-transition: .3s ease-in-out;

}

.TTWForm .submit input {
	text-align: center;
	text-decoration: none;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	text-shadow: 0px 1px 0px #fff;
	display: block;
	text-align: center;
	float: left;
	cursor: pointer;
	min-width: 96px;
	width: auto;
	border: 1px solid #d9d9d9;
	color: #36b6dd;
	background-color: #FFFFFF;
	margin-right: -2px;
	margin-bottom: 12px;
	margin-left: 0;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom:2px;
	padding-left: 5px;
}






/* Media Queries */

@media screen and (max-width: 1440px) {
	.item {
		-webkit-flex: 1 0 33.333%;
		flex: 1 0 33.333%;
		height: 30vw;
	}
}

@media screen and (max-width: 1000px) {
	.item {
		-webkit-flex: 1 0 50%;
		flex: 1 0 50%;
		height: 45vw;
	}
	/*.item,
	.intro__content, .intro__content.listing {
		font-size: 0.85em;*/
	
}

@media screen and (max-width: 590px) {
	.item {
		-webkit-flex: 1 0 100%;
		flex: 1 0 100%;
		height: 90vw;
	}
	h1.page-title{

	 font-size:30px;
	
	
	}

	h2.intro__title {
	
		font-size: 28px!important;
	}
	
	
}