@CHARSET "UTF-8";

@import url(//fonts.googleapis.com/css?family=Ubuntu+Mono);
@import url(fontface.css);

/*mod*/
	div.col-sm-7.five-three {
	width: 60% !important;
	}
	
	div.col-sm-5.five-two {
	  width: 40% !important;
	}
/*mod*/

*, td, th, div, p, span{
	font-family: 'thaisans_neueregular';
}

body{
	background: url(../../images/front/body_bg.jpg) top center;
	font-size: 16px;
}

h1{
	font-size: 1.5em;
}

h2{
	font-size: 1.4em;
}

h3{
	font-size: 1.3em;
}

h4{
	font-size: 1.2em;
}

h5{
	font-size: 1.1em;
}

#container {
	width: 100%;
	max-width: 1000px;
	margin: 10px auto;
	background: #FFF url(../../images/front/header_bg.jpg) no-repeat;
	min-height: 500px;
	padding: 15px 10px;
	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	
	-webkit-box-shadow: 0px 0px 24px -5px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 0px 24px -5px rgba(0,0,0,0.6);
	box-shadow: 0px 0px 24px -5px rgba(0,0,0,0.6);
}

#container > header{
	
}

#container > header  .left{
	
}

#container > header  .right{
	text-align: right;
}

#container > header  .right ul#langitems{
	list-style: none;
}

#container > header  .right ul#langitems > li{
	display: inline;
	padding: 2px;
}

#container > header button#sound-control{
	display: inline-block;
	width: 80px;
	height: 29px;
	text-decoration: none;
	border: none;
}

#container > header button#sound-control.playing{
	background: url(../../images/front/sound_on.png) no-repeat;	
}

#container > header button#sound-control.paused{
	background: url(../../images/front/sound_off.png) no-repeat;
}

#container > #body  #slice{
	width: 100%;
	height: 100%;
	position: relative;
}

#container > #body  img{
	/*width: 100%;
	height: 100%;*/
}

#container > #body .black-caption{
	display: block;
	/*background: #231F20;*/
	background: url(../../images/front/caption_bg.jpg);
	text-align: center;
	border-left: 3px solid #FFF;
	color: #FFF;
	vertical-align: middle;
	padding: 20px 25px 20px 5px;
}

#container > #body .black-caption h3,
#container > #body .black-caption h4,
#container > #body .black-caption h5{	
	color: #D4E38B;
}

#container > #body  #slice > .left{
	width: 100%;
	display: table-cell;
}

#container > #body  #slice > .right{
	display: none;
}

#container > #body  #slice > .right h3,
#container > #body  #slice > .right h4,
#container > #body  #slice > .right h5{	
	color: #D4E38B;
}

#container > #body  #slice:after{
	content: "";
	display: block !important;
	background: url(../../images/front/slice_fg.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	display: inline-block;
	width: inherit;
	height: inherit;
	top: 0;
	z-index: 4;
}

#container > #body #promoblock{
	width: 290px;
	/*height: 100%;*/
	border: #E5E5E5 2px solid;
	position: relative;
	padding: 15px 10px 10px;
	margin: 0 auto;
	display: table;
}

#container > #body #promoblock:after{
	content: "";
	position: absolute;
	display: block;
	width: 280px;
	height: 32px;
	background: url(../../images/front/promotion_head.png) no-repeat; 
	top: -15px;
	margin: 0 auto;
	left: 0;
  	right: 0;
}

#container > #body #promoblock .left{
	display: table-cell;
}

#container > #body #promoblock .right{
	display: table-cell;
	vertical-align: top;	
	width: 26px;
}

#container > header ul.menu{
	list-style: none;
	display: table;
	width: 100%;
	padding: 0;
	margin: 0;
}

#container > header ul.menu li{
	display: table-cell;
	padding: 0 2px;
	height: 80px;
	text-align: center;
}

/*menu bg*/
#container > header ul.menu li:nth-child(1){
	background: url(../../images/front/menu_1.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(1):hover{
	background: url(../../images/front/menu_1_h.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(2){
	background: url(../../images/front/menu_2.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(2):hover{
	background: url(../../images/front/menu_2_h.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(3){
	background: url(../../images/front/menu_3.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(3):hover{
	background: url(../../images/front/menu_3_h.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(4){
	background: url(../../images/front/menu_4.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(4):hover{
	background: url(../../images/front/menu_4_h.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(5){
	background: url(../../images/front/menu_5.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(5):hover{
	background: url(../../images/front/menu_5_h.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(6){
	background: url(../../images/front/menu_6.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(6):hover{
	background: url(../../images/front/menu_6_h.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(7){
	background: url(../../images/front/menu_7.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(7):hover{
	background: url(../../images/front/menu_7_h.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(8){
	background: url(../../images/front/menu_8.png) top center no-repeat;
}

#container > header ul.menu li:nth-child(8):hover{
	background: url(../../images/front/menu_8_h.png) top center no-repeat;
}
/*menu bg*/

#container > header ul.menu li a{
	display: block;
	padding-top: 60px;
	height: 100%;
	width: 100%;
	text-decoration: none;
	font-weight: bold;
	color: #000;
	font-size: 0.9em;
}

#container > header ul.menu li a:hover{
	color: #EA7E23;
}

#body > div{
	margin-top: 15px;
}

#body .graybox{
	background: #E5E5E5;
	padding: 15px;
	margin-left: 0;
	margin-right: 0;
	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}

#body .whitebox{
	margin-left: 0;
	margin-right: 0;
}

#body .graybox .house-item{
	text-align: center;
	padding: 0px 2px;
	margin-top: 10px;
}

#body .graybox .house-item .item-img{
	background: #FFF;
	padding: 7px 10px;	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#body .graybox .house-item .item-text{
	/*background: #7A7A7A;*/
	background: #ffffef;
	text-align: center;
	/*color: #D4E38B;*/
	color: #000;
	margin-top: 4px;
	position: relative;
}

#body .graybox .house-item .item-text > strong{
	position: relative;
}

#body .graybox .house-item .item-text > strong:after{
	content: "";
	border-bottom: #EA7E23 2px solid;
	width: 80%;
	display: block;
	margin: 0 auto;
}

#body .graybox .house-item .item-text:after{
	content: "";
    position: absolute;
    top: 0px;
    left: 0;
    background: url(../../images/front/flower_icon2.png) no-repeat;
    width: 20px;
    height: 21px;
}

#body .whitebox .photo-item{
	text-align: center;
}

#container > footer{
	text-align: center;
	font-size: 1.1em;
	margin-top: 10px;
}

#container > footer p.copyright{
	font-family: 'Ubuntu Mono', ;
}

div.text-head-yellow{
	background: #08996A;
	color: #D4E38B;
	font-size: 1.1em;
	font-weight: bold;
	padding: 5px;
	width: 100%;
}

div.text-head-white{
	background: #08996A;
	color: #FFF;
	font-size: 1.1em;
	font-weight: bold;
	padding: 5px 15px;
	width: 100%;
	margin-bottom: 15px;
}

.row.items{
}

.item-box{
	padding: 0 5px;
	margin-top: 10px;
}

.item-box .item-img{
	background: #FFF;
	padding: 10px;
	width: 50%;
	float: left;
}

.item-box .item-detail{
	width: 48%;
	float: right;
}

.item-box header{
	background: #7A7A7A;
	height: 25px;
	position: relative;
}

.item-box header > h5{
	margin: 0;
	padding: 5px 15px;
	color: #D4E38B;
}

.item-box header > a{
	padding: 4px 10px;
	top: -2px;
	right: 0;
	background: #EA2227;
	color: #D4E38B;
	position: absolute;
}

.item-box .item-detail > .body{
	margin-top: 5px;
}

.item-box2{
	padding: 0 15px;
	margin-top: 25px;
}

.item-box2 .item-img{
	background: #FFF;
	padding: 20px 15px 10px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.item-box2 .item-img p{
	margin-top: 10px;
}

.item-box2 .item-img > header{
	background: url(../../images/front/item_head_bg4.png) top center no-repeat;
	height: 51px;
	display: block;
	position: relative;
  	padding-top: 15px;
  	margin: 0;
}

.item-box2 .item-img > header > h4{
	margin: 0;
	font-weight: bold;
	text-align: center;
}

.news-box{
	padding: 0 5px;
	margin-top: 10px;
}

.news-box .item-img{
	background: #FFF;
	padding: 10px;
}

.news-box .item-detail{
}

.news-box .item-detail > header{
	background: #7A7A7A;
	height: 25px;
	position: relative;
}

.news-box .item-detail > header > h5{
	margin: 0;
	padding: 5px 15px;
	color: #D4E38B;
}

.news-box .item-detail > header > a{
	padding: 4px 10px;
	top: -2px;
	right: 0;
	background: #EA2227;
	color: #D4E38B;
	position: absolute;
}

.news-box .item-detail > .body{
	margin-top: 5px;
}


.textgreen {
	color: #728236;
}

.textred {
	color: #EC1C24;
}


/******** Carousel effect ********/

.carousel-fade .carousel-inner .item {
	
	/*transition-property: opacity;*/
	-webkit-transition: opacity 2s ease-in-out;
	-moz-transition: opacity 2s ease-in-out;
	-ms-transition: opacity 2s ease-in-out;
	-o-transition: opacity 2s ease-in-out;
	transition: opacity 2s ease-in-out;  /*If wanna change the time also change c.TRANSITION_DURATION in bootstrap_mod.min.js*/
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right{
            opacity: 0;
        }

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right{
            opacity: 1;
        }

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right{
            left: 0;
            transform: translate3d(0, 0, 0);
        }


.carousel-fade .carousel-control {
        z-index: 2;
    }
    
    
.carousel-indicators {
    margin: 10px 0 0;
    overflow-y: hidden;
    overflow-x: auto;
    position: static;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

.carousel-indicators .active {
    width: auto;
    height: auto;
}

.carousel-indicators li {
    background-color: transparent;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    height: auto;
    margin: 0 !important;
    width: auto;
}
.carousel-indicators li img {
    display: block;
    opacity: 0.5;
}
.carousel-indicators li.active img {
    opacity: 1;
}
.carousel-indicators li:hover img {
    opacity: 0.75;
}

#promoblock .carousel-indicators {
    margin: 0;
    overflow-y: hidden;
    overflow-x: auto;
    position: static;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

#promoblock .carousel-indicators .active {
    width: auto;
    height: auto;
}

#promoblock .carousel-indicators li {
    background-color: #603A17;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: block;
    height: auto;
    margin: 0 !important;
    width: auto;
    color: #D4E38B;
    text-indent: 0;
    text-align: center;
}

#promoblock .carousel-indicators li.active {
	background-color: #D4E38B;
    color: #010;
}


/******** Carousel effect ********/

.nav > li > a{
	padding: 5px 10px;
	color: #FFF;
}

.nav > li.active > a{
	background: #31BC8A;
	border: 1px solid transparent;
	color: #603813;
}

.nav > li > a:hover{
	background: #31BC8A;
}

.photo-item{
	padding: 0 5px;
	margin: 5px 0;
}





/*content*/

.content{
	z-index: 1; /*provide child behind parent by z-index: -1 works*/	
	position: relative;
	background: none;
}

.content > div.left{
	padding-left: 0;
}

.content > div.right{
	padding-right: 0;
}

.content table{
	font-size: 0.95em;
}

.content table.simple{
	color: #7A7A7A;
}

.content table.simple tr:nth-child(odd){
	background: #FFF;
}

.content table.simple tr:nth-child(even){
	background: #F1F1F1;
}


.content table.pricing td,
.content table.pricing th {
    border: 1px solid #D4E38B;
}

.content table.pricing th{
	background: #7A7A7A;
	color: #FFF;
}

.content table.pricing tr{
	background: #FFF;
}

.content p.bg-dark{
	background: #000;
	padding: 10px;
	color: #D4E38B;
}

.content p.bg-green{
	background: #728236;
	padding: 10px 20px;
	color: #FFF;
}

.content p.bg-dark a{
	color: #D4E38B;
}

.content .warning{
	font-size: 0.95em;
	color: #EC1C24;
}

.content p{
	padding: 0 10px;
}

.content .underline{
	padding-bottom: 10px;
	border-bottom: 2px solid #000;
}

.content ol.decimal{
	list-style-type: decimal;
}

.content ul.disc{
	list-style-type: disc;
}

.content .ribbon{
	background: url(../../images/front/item_head_bg2.png) no-repeat;
	height: 32px;
	color: #603A17;
	padding: 5px 0 0 15px;
	z-index: 1;
}

.content .ribbon:after{
	content: "";
	display: block;
	position: relative;
	border-top: 2px solid #000;
	height: 1px;
	width: 100%;
	top: -10px;
	z-index: -1;
	margin-left: -20px;
}

/*content*/

select.form-control{
	padding-top: 0;
}

.message-sent{
	text-align: center;
}

.message-sent p{
	font-weight: bold;
}

.dropdown {
	display: inline-block;
}

.carousel-caption{
	/*background-color:rgba(0, 0, 0, 0.5);*/
	padding: 0;
	padding-top: 10px;
	right: 0;
    left: 0;
}

.paging{
	height: 30px;
	padding-left: 10px;
	padding-top: 2px;
	padding: 2px 4px 0 10px; 
	width: 100%;
	text-align: right;
}

.paging span, 
.paging strong{
	display: inline-block;
	font-weight: bold;
	text-align: center;
	height: 24px;
	padding: 2px 0px;
	margin: 0 2px;
	background-color: #603A17;
    color: #D4E38B;
}

.paging span:hover{
	/*background: #de1818; */
}

.paging span a{
	display: block;
	width: 24px;
	color: #D4E38B;
}

.paging span.link-big a{
	width: 47px;
}

.paging strong{
	background-color: #D4E38B;
    color: #010;
	width: 24px;
}

.clearfloat {
	float: none;
	clear: both;
}

.reviewer{
	text-align: center;
}

.reviewer ul{
	list-style: none;
}

.reviewer ul li{
	display: inline;
	margin: 0 10px;
}



/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	
	#container {
		margin: 40px auto;
		padding: 20px 35px;
	}
	
	#container > #body .black-caption{
		display: none;
	}
	
	#container > #body  #slice > .left{
		width: 63%;
		display: table-cell;
	}
	
	#container > #body  #slice > .right{
		margin-left: 10px;
		display: table-cell;
		/*background: #231F20;*/
		background: url(../../images/front/caption_bg.jpg) repeat-y;
		text-align: center;
		border-left: 3px solid #FFF;
		color: #FFF;
		vertical-align: middle;
		padding: 20px 25px 20px 5px;
	}
	
	.content > div.bordered{
		border-left: 2px solid #000;
	}
	
	.item-box2 .item-img > header{
		background: url(../../images/front/item_head_bg3.png) top center no-repeat;
	}
	
	.news-box .item-img{
		width: 30%;
		float: left;
	}
	
	.news-box .item-detail{
		width: 68%;
		float: right;
	}
	
	.carousel-caption{
		right: 35%;
	}
	
	#container > #body #promoblock{
		width: 100%;
		margin-top: 20px;
		margin-left: -20px;
	}
	
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 

	
 } 

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

	
}