@font-face {
  font-family: 'Kanit';
  src: url('fonts/Kanit-Light.ttf')  format('truetype');
}
@font-face {
  font-family: 'Prompt';
  src: url('fonts/Prompt-Light.ttf')  format('truetype');
}
@font-face {
  font-family: 'Pattaya';
  src: url('fonts/Pattaya-Regular.ttf')  format('truetype');
}
@font-face {
  font-family: 'Sarabun';
  src: url('fonts/Sarabun-Regular.ttf')  format('truetype');
}
*{
    margin: 0;
}
body{
    font-family: "Prompt";
    background: #000000 url(images/bg.jpg) top center no-repeat;
}
.wrapper{
    display:block;
    width: 990px;
    margin:0 auto;
}
.wrapper .menu{
    display: block;
    background:rgba(255,255,255,0.4);
    font-size: 1.6em;
    color: #FFCC00;
    line-height: 2.5em;
    text-align: center;

}

.wrapper .line{
    display: block;
    height: 2px;
    background: -webkit-linear-gradient(left, #8f6B29, #FDE08D, #DF9F28);
	background: linear-gradient(left, #8f6B29, #FDE08D, #DF9F28);
    padding:2px 0 0;
}
.wrapper .menu a {
    text-decoration: none;
	background: -webkit-linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
	background: linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    position: relative;
	text-transform: uppercase;	
	margin: 0;
    font-weight: 400;
    padding: 5px 20px;
    margin: 0px 10px;

}

.wrapper .menu a:after {
    background: none;
    content: attr(data-heading);
    left: 0;
	top: 0;
    z-index: -1;
    position: absolute;
    text-shadow: 
		-1px 0 1px #c6bb9f, 
		0 1px 1px #c6bb9f, 
		5px 5px 10px rgba(0, 0, 0, 0.4),
		-5px -5px 10px rgba(0, 0, 0, 0.4);
}
.wrapper .menu a:hover{
    color:#FFFFFF;
}


.wrapper .footer{
    margin-top:20px;
    display: block;
    text-align: center;
    color:#FFFFFF;
    font-size: 0.8em;
    padding: 20px 0px 40px 0;

        display: block;
    text-decoration: none;
    background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    position: relative;
	text-transform: uppercase;	
    margin: 0;
    font-size: 0.8em;

    color:	#D5AD6D; /*if no support for background-clip*/
	
	background: -webkit-linear-gradient(transparent, transparent),
             -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
	background: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wrapper .footer a{
    color:#FFFFFF;
    text-decoration: none;
}
.wrapper .footer a:hover{
    text-decoration: underline;
}

.wrapper .panel .panel-top{
    background: url("images/frame_top_cont.png");
    height: 19px;
}
.wrapper .panel-body{
    min-height: 400px;
    background: url("images/frame_body_cont.png") repeat-y;
    padding:0px 26px;
}
.wrapper .panel-body2{
    min-height: 200px;
    background: url("images/frame_body_cont.png") repeat-y;
    padding:0px 26px;
}
.wrapper .panel .panel-bottom{
    position: relative;
    background: url("images/frame_footer_cont.png") top center no-repeat;
    display: block;
    min-height: 225px;
}
.wrapper .panel .panel-bottom .bottom{
    padding-top: 50px;
    padding:40px 10px;
}
.wrapper .contact-desc p{
    margin-bottom: 0 !important;
}

.wrapper .panel-body .line{
    min-height: 20px;
    background: url("images/line.png") no-repeat center;
    display: block;
    margin: 0 auto;
}
.wrapper .panel-body2 .welcome{
    min-height: 200px;
    padding:20px;
}
.wrapper .panel-body .welcome{
    min-height: 350px;
    background: url("images/bgcont.png") no-repeat;
    padding:20px;
}

.wrapper .panel-body .features{
    padding: 10px 30px;
}
.wrapper .panel-body .features h5{
    margin-bottom: 20px;
    display: block;
    text-align: center;
    font-size: 1.5em;
}
.wrapper .panel-body .features .pad{
    display: block;
    width: 150px;
    height: 71px;
    background: url("images/white.png") no-repeat ;
}


.wrapper .panel-body .features .pad span.code{
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 1.6em;
    line-height: 1.5em;
    font-weight: bolder;
    font-family: "Sarabun";
    margin-bottom:-3px;
}
.wrapper .panel-body .features .pad span.province{
    font-size: 0.8em;
    font-weight: bolder;
    font-family: "Sarabun";
}
.wrapper .panel-body .features .pad-price{
    margin-top: 2px;
    color:#FFFFFF;
    font-size: 0.8em;
    font-family: "Sarabun";
}

.wrapper .panel-body .features .pad-beau{
    background: url("images/beau_new.png") no-repeat ;
}
.wrapper .panel-body .features .pad-gold{
    background: url("images/gold_new.png") no-repeat ;
}
.wrapper .panel-body .features .pad-white{
    background: url("images/white_new.png") no-repeat ;
}
.wrapper .panel-body .features .pad-green-pro{
    background: url("images/pad_pickup_pro_new.png") no-repeat ;
    color:#235620 !important;
}
.wrapper .panel-body .features .pad-green{
    background: url("images/pad_pickup_new.png") no-repeat ;
    color:#235620 !important;
}
.wrapper .panel-body .features .pad-blue{
    background: url("images/pad_pickup_new.png") no-repeat ;
    color:#0172B4 !important;
}
.wrapper .panel-body .features .pad-blue-pro{
    background: url("images/pad_pickup_new.png") no-repeat ;
    color:#0172B4 !important;
}




.wrapper .panel-body .features .pad-bike{
    background: url("images/wmosike2.jpg") no-repeat ;
    width: 120px;
    height: 94px;
}
.wrapper .panel-body .features .pad-bike span.code{
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 1.5em;
    line-height: 1.5em;
    font-weight: bolder;
    font-family: "Sarabun";
    margin-bottom:12px;
}
.wrapper .panel-body .features .pad-bike span.province{
    font-size: 0.8em;
    font-weight: bolder;
    font-family: "Sarabun";
}
.wrapper .panel-body .features  .pad-price{
    margin-top: 2px;
    color:#FFFFFF;
    font-size: 0.8em;
    font-family: "Sarabun";
}


.wrapper .panel-body .features .product{
    margin: 0 auto;
    display: block;
    width:283px;
    height: 182px;
    background: url("images/marked.jpg") no-repeat ;
    font-family: "Sarabun";
}
.wrapper .panel-body .features .product span.product-code{
    display: block;
    padding-top: 45px;
    font-size: 1.5em;
    font-family: "Sarabun";
    font-weight: bolder;
}
.wrapper .panel-body .features .product span.product-sum{
    display: inline-block;
    font-size: 0.8em;
    line-height: 1.2em;
    margin: 0;
    color:#555555;
}
.wrapper .panel-body .features .product span.product-price{
    display: block;
    font-weight: bolder;
}
.wrapper .panel-body .features .product span.product-icon{
    display: block;
}


.wrapper .items{
  margin:15px;
    	border: -webkit-linear-gradient(left, #8f6B29, #FDE08D, #DF9F28);
    border: linear-gradient(left, #8f6B29, #FDE08D, #DF9F28);
    font-family: "Sarabun";

}

.wrapper .items .frame-top{
    height: 50px;
    display: block;
        background: url("images/frame-top.jpg") no-repeat top center ;
}
.wrapper .items .frame-middle{
    display: block;
    padding:0px 30px;
        background: url("images/frame-middle.jpg") repeat-y center ;
}
.wrapper .items .frame-footer{
    height: 34px;
    display: block;
    background: url("images/frame-footer.jpg") no-repeat top center ;
}
.wrapper .items table tr td{
    font-family: "Sarabun";
    line-height: 2em;
}
.wrapper .items table tr td:hover{
  	background: -webkit-linear-gradient(left, #8f6B29, #FDE08D, #DF9F28);
	background: linear-gradient(left, #8f6B29, #FDE08D, #DF9F28);

}
.wrapper .items  span.item-code{
    display: inline-block;
    width: 190px;
    font-weight: bolder;
    font-size: 1.3em;
}
.wrapper .items  span.item-code .small{
    font-size: 0.5em;
}
.wrapper .items  span.item-icon{
    display: inline-block;
    width: 100px;
}

.wrapper .item{
  padding:5px;
  vertical-align: top !important;
}

h3.title,h5.title{
	background: -webkit-linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
	background: linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
h3.title:after,h5.title:after{
    background: none;
    content: attr(data-heading);
    left: 0;
	top: 0;
    z-index: -1;
    position: absolute;
    text-shadow: 
		-1px 0 1px #c6bb9f, 
		0 1px 1px #c6bb9f, 
		5px 5px 10px rgba(0, 0, 0, 0.4),
		-5px -5px 10px rgba(0, 0, 0, 0.4);
}

.product .effect{
    text-decoration: none;
    background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#B69119 78%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    position: relative;
	text-transform: uppercase;	
    margin: 0;
    
color: #D5AD6D; /*if no support for background-clip*/
background: -webkit-linear-gradient(transparent, transparent),
-webkit-linear-gradient(top, rgba(193,153,89,1) 0%,rgba(193,153,89,1) 26%, rgba(216,176,110,1) 35%, rgba(163,126,67,1) 45%, rgba(125,92,46,1) 61%, rgba(213,173,109,1) 100%);
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}
.product .effect:after{
    background: none;
    content: attr(data-heading);
    left: 0;
	top: 0;
    z-index: -1;
    position: absolute;
    text-shadow: 
		-1px 0 1px #c6bb9f, 
		0 1px 1px #c6bb9f, 
		5px 5px 10px rgba(0, 0, 0, 0.4),
		-5px -5px 10px rgba(0, 0, 0, 0.4);
}
.d-gold{
    display: block;
    margin: 0 auto;
}
.d-gold span{
    margin: 0 auto;
    display: inline-block;
    padding:10px 20px;
    font-weight: bolder;
    border-radius: 5px;
}
.bg-gold{
    background:linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    
}

.btn-gold{
    width: 100px;
    font-weight: bolder;
    background:linear-gradient(to right,  #B38728, #FBF5B7, #AA771C);
}

.contact-desc{
    display: block;
    text-decoration: none;
    background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    position: relative;
	text-transform: uppercase;	
    margin: 0;
    font-size: 1.2em;

    color:	#D5AD6D; /*if no support for background-clip*/
	
	background: -webkit-linear-gradient(transparent, transparent),
             -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
	background: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.intro {

    display: block;
    text-decoration: none;
    position: relative;
	text-transform: uppercase;	
    font-size: 1.2em;

    color:	#EECE00; /*if no support for background-clip*/
    padding:10px;


}

.intro p{
    
    	background: -webkit-linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
	background: linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.contact-text{
    display: inline-block;
    height:62px;
    line-height: 62px;
    font-size: 48px;
    color:#FFFFFF;
}
.contact-text2{
    display: inline-block;
    height:62px;
    font-size:32px;
    line-height: 40px;
    color:#FFFFFF;
}