@font-face {
    font-family: 'DB Helvethaica X';
    src: url('../fonts/helvethaica_x/DB_Helvethaica_X.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/helvethaica_x/DB_Helvethaica_X.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/helvethaica_x/DB_Helvethaica_X.woff') format('woff'), /* Modern Browsers */
         url('../fonts/helvethaica_x/DB_Helvethaica_X.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/helvethaica_x/DB_Helvethaica_X.svg#ac36d5c78f119f40112a192d0270d625') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 400;
}


body {
  font-size: 18pt;
  line-height: 2.0;
  color: #000;  
  font-family: 'DB Helvethaica X', serif;
  margin: 0; padding: 0;  
} 
 

.logo-wp{width:100%; text-align: center; margin: 30px 0 30px 0;}
.logo{width:250px; height:auto;}
 
 
.form-group {position: relative; text-align: left;}
.form-control {width: 100%;
  font-family: 'DB Helvethaica X', serif;
  transition: .25s border ease-in-out;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  color: #282F3D; font-size: 14pt; line-height: 18pt;
  border: 0;
  border-bottom: 1px solid #CDC09E; 
  margin-bottom: 0px;
  padding-left: 0; padding-right: 0;  
}
 
.img-responsive {width: 100%; height: auto;}

.form-control:focus {
  border-bottom-color: #85754E; 
} 

.form-control:not(.touched)+.floater:before {/*text title*/
  display: block;
  position: absolute;
  top: 0px;
  font-size: 14pt;
  color: #282F3D;
  pointer-events: none;
  transition: .25s all ease-in-out;
}

.form-control.touched+.floater:before,
#firstname:focus+.floater:before,
#firstname:not(:placeholder-shown)+.floater:before,
#lastname:focus+.floater:before,
#lastname:not(:placeholder-shown)+.floater:before,
#mobile:focus+.floater:before,
#mobile:not(:placeholder-shown)+.floater:before,
#email:focus+.floater:before,
#email:not(:placeholder-shown)+.floater:before,
#message:focus+.floater:before,
#message:not(:placeholder-shown)+.floater:before 
{
  position: absolute;
  top: -20px;
  font-size: 14pt;
  color: #85754E; 
}
 
#firstname+.floater:before,
#firstname:focus+.floater:before {
  width:100%;
  content: "ชื่อ*"; 
}

#lastname+.floater:before,
#lastname:focus+.floater:before {
  width:100%;
  content: "นามสกุล"; 
}
#mobile+.floater:before,
#mobile:focus+.floater:before {
width:100%;
  content: "เบอร์โทร*"; 
}
#email+.floater:before,
#email:focus+.floater:before {
 width:100%;
content: "อีเมล์*"; 
} 
#message+.floater:before,
#message:focus+.floater:before {
  width:100%;
  content: "ข้อความ"; 
}
 
/****/ 
.select {position: relative; padding: 0; margin: -20px 0 0 0; cursor: pointer;}  
.not-show{display: none;}
.select-text {
	position: relative;
	font-family: inherit;
	background-color: transparent;
	width: 100%;
	padding: 8px 10px 12px 0; 
	border-radius: 0;
	border: none;
	border-bottom: 1px solid #CDC09E;
} 
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Remove focus */
.select-text:focus {
	outline: none;
	border-bottom: 1px solid #85754E;
}

/* Use custom arrow */
.select .select-text {
	appearance: none;
	-webkit-appearance:none;
	font-size: 14pt; margin-top: 20px; /*text info cus budget*/
}

.select:after {
	position: absolute;
	top: 35px;
	right:0;
	/* Styling the down arrow */
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid rgba(133, 117, 78,1.0);
	pointer-events: none;
 
	
} 
.select-style select {
    padding: 10px 8px;
    width: 100%;
    border: none;
    box-shadow: none; border-bottom: 1px #a88661 solid; 
    background-image: none;
    -webkit-appearance: none;
}

.select-style select:focus {
    outline: none;
}
/* LABEL ======================================= */
.select-label {
	color: #282F3D;
	font-size: 14pt; /*text title*/
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 0;
	top: 20px; 
	transition: 0.2s ease all; 
	 
}

/* active state */
.select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
	color: #85754E;
	top: 0;
	transition: 0.2s ease all;
	font-size: 14pt;  /*text title hover*/
}

/* BOTTOM BARS ================================= */
.select-bar {
	position: relative;
	display: block; width: 100%;}

.select-bar:before, .select-bar:after {
	content: '';
	height: 1px;
	width: 0;
	bottom: 11px;
	position: absolute;
	background: #85754E;
	transition: 0.2s ease all;
}

.select-bar:before {
	left: 50%;
}

.select-bar:after {
	right: 50%;
}

/* active state */
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
	width: 50%;
} 
/*****/
.select select { 
        display: inline-block;
        width: 100%;
        cursor: pointer;
        padding: 15px 0 0 0;
        outline: 0; 
        border-radius: 0px; 
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;  
 
}
.select select option{padding: 10px 0; line-height: 2.0; background: #D1D5D7;} 
.select select::-ms-expand {display: none;}
.select select:hover,
.select select:focus {color: #282F3D;}
.select select:disabled { opacity: 0; pointer-events: none;}  
.select select option:checked,
.select select option:hover { background: #D1D5D7; color:#000;}
 
/*end input*/ 

 
.footer{border-top: 1px #CDC09E solid; background: #fff; margin-top: 40px;}
.footer .estarpcl{padding: 0;  min-height: 70px; max-height: 70px; text-align: left;}
.footer .estarpcl img{width: 160px; height: auto; margin: 10px 0;}
.footer .contact{padding: 0; margin: 0; min-height: 70px; max-height: 70px; text-align: right;}
.footer .contact a{color: #85754E; text-decoration: none; font-weight: 500; font-size: 24pt; line-height: 2.0;} 


.submit {
  font-family: 'DB Helvethaica X', serif;
  width: auto; min-width: 240px; background: #282F3D; color: #fff; 
  font-size: 19pt; padding: 6px 20px;
  cursor: pointer; 
  border: 1px #282F3D solid;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;}

.submit:hover {color: #282F3D; background: #ffffff; border: 1px #282F3D solid; text-decoration: none;}
 

.visit-website{text-align: center;}
.visit-website a{ width: auto; min-width: 200px; 
 font-weight: 100;
 font-family: 'DB Helvethaica X', serif;
 font-size: 17pt;  color: #85754E; transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
 padding: 4px 50px;
 border: 1px solid #85754E;
 background: #fff;
} 
.visit-website a:hover {background: #85754E; text-decoration: none; color: #fff;border: 1px solid #85754E;}

 



/*cookie warning*/
.cookiealert {
    position: fixed; text-align: center;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    transform: translateY(100%);
    transition: all 500ms ease-out;
    color: #282F3D;
    background: #EEEEEE;
    font-size: 14pt;  line-height: 16pt; 
}

.cookiealert.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
    transition-delay: 1000ms; 
}

.cookiealert a {text-decoration: underline; color: #000;} 
.cookiealert .acceptcookies {margin-left: 10px; vertical-align: baseline; font-size: 14pt; background: #85754E; color: #fff; padding: 0 10px;}


/*ThanksYou*/
.ty-form {background: #eeeeee; line-height: 24pt;}
.logo-wp-ty{width:100%; text-align: center; padding: 80px 0 72px 0; }
.logo-wp-ty img{width:300px; height: auto;}

.project-info{text-align: center; margin-top: 40px;}
.project-info a{ width: auto; min-width: 240px;  
 font-family: 'DB Helvethaica X', serif;
 font-size: 18pt;  color: #85754E; transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
 padding: 8px 50px;
 border: 1px solid #85754E;
 background: #fff;
} 
.project-info a:hover {background: #85754E; text-decoration: none; color: #fff;border: 1px solid #85754E;}

.footer-ty{border-top: 1px #CDC09E solid;  border-bottom: 1px #CDC09E solid; text-align: center; background: #fff;}
.footer-ty .estarpcl{padding: 0;  min-height: 70px; max-height: 70px; border-right: 1px #CDC09E solid; }
.footer-ty .estarpcl img{width: 200px; height: auto; margin: 10px 0; }
.footer-ty .contact{padding: 0; margin: 0; min-height: 70px; max-height: 70px;}
.footer-ty .contact a{color: #85754E; text-decoration: none; font-weight: 600; font-size: 24pt; letter-spacing: 2.5pt; line-height: 2.5;} 
 



@media screen and (max-width: 1160px) {   
.logo-wp { margin: 0 0 20px 0;}
.logo { width:200px;}
.footer .estarpcl img{width: 120px;} 
.footer .contact a{font-size: 20pt; line-height: 2.5;}  
}


@media screen and (max-width: 960px) {   
.logo-wp-ty img{width:280px; height: auto;}
	
.footer .estarpcl img{width: 200px;}    
.footer .contact a{font-size: 24pt; line-height: 2.5;}  
}

@media screen and (max-width: 640px) { 
.logo {width: 200px;}
.footer .estarpcl{border-bottom: 1px #CDC09E solid; border-right: 0; text-align: center;}
.footer .estarpcl img{width: 180px;} 
.footer .contact {text-align: center;}
.footer .contact a{font-size: 26pt;}
	
	
.logo-wp-ty img{width:250px; height: auto;}
.footer-ty .estarpcl{border-bottom: 1px #CDC09E solid;  border-right: 0;}
.footer-ty .estarpcl img{width: 180px;}
.footer-ty .contact a{font-size: 22pt;}
	
}


@media screen and (max-width: 380px) {   
.footer .estarpcl{min-height: 50px; max-height: 50px;}
.footer .estarpcl img{width: 160px;} 
	
.footer .contact{min-height: 50px; max-height: 50px;}
.footer .contact a{font-size: 24pt; line-height: 1.5;}
}