

#highlight .wrapper { padding-bottom:22px; 
	background-image:url(../images/bg-hl.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
	position:relative; margin-bottom:15px;}
#service { min-height:350px; overflow: hidden; padding:15px 20px; 
	background-image:url(../images/bg-service.png);
	background-repeat: no-repeat;
	margin-bottom: 20px; box-sizing:border-box; 
	white-space:normal; -moz-box-sizing:border-box;}
#service2 { min-height:289px; overflow: hidden; padding:15px 20px; background:url(../images/bg-service2.png) repeat; margin-bottom: 20px; box-sizing:border-box; white-space:normal; -moz-box-sizing:border-box;}
#service h1, #service2 h1 { text-shadow:0px 1px 0px #5F3B1B;}
#service  .col , #service2  .col { padding-right: 20px; font-family: 'db_ozone_xmedium'; font-size:22px; display:inline-block; float:left; color:#131212; box-sizing:border-box; white-space:normal; -moz-box-sizing:border-box; }
#service  .col p, #service2  .col p {}
#service  .col.col-one { width: 215px;}
#service  .col.col-two { width: 365px; padding-top:46px; padding-left:20px;}
#service  .col.col-fb {width: 370px; float: right; padding-right: 0;}
#service2  .col.col-all { width:100%;color: #FFF;}

.obj-contact { margin-top: 12px; margin-left:25px;}

#all-port { overflow: hidden;}
#all-port h1 { padding: 20px 20px 10px 20px;}
#all-port .h-port { text-align:center;  width:218px; height:52px; background:url(../images/h-all-port.png) no-repeat;}
#all-port .h-port h1 {line-height:1.5em; padding: 0;}
#all-port .inner { min-height: 200px; overflow: hidden; padding:10px 20px; background:url(../images/bg-all-port.png) repeat; box-sizing:border-box; white-space:normal; -moz-box-sizing:border-box;}
.thumb-port { width:25%;
	display: inline-block; text-align: center; 
	float: left;}
.thumb-port .img { background-image:url(../images/bg-tn.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding:6px;}
.thumb-port .img img { width: 100%; display: block; vertical-align: top;}
.thumb-port .title { font-size:13px; color:#FFF; text-align: center; padding:10px 0;}
.thumb-port .title a { color: #FFF;}
.thumb-port .thumbnails { min-height:180px; padding: 10px;}

.innerpage {color: #fff;}
input, textarea {background-color: #DED3C6;padding: 5px; color: #6B3010;opacity:.7;filter:alpha(opacity=70);}
.send, .send2 {cursor: pointer;}
.inner-page {color: #fff;}
.inner-page strong {font-size: 26px;}
.inner-page li {
	display: list-item;
	list-style-type: disc; 
  	list-style-position: inside; 
  	font-size: 20px;
  	margin-bottom: 4px;
   }
.inner-page ul { 
   list-style-type: disc; 
   list-style-position: inside; 
   margin: 5px;
}
.inner-page ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
.inner-page ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
.inner-page ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

.bx-address { width: 50%; float:left;}
.form-contact { width: 48%; float: right;}
.form-contact .btn { margin-top:20px; text-align: left;}
.form-contact .btn img { margin-right:10px;}
.form-group { overflow: hidden; margin-bottom: 6px;}
.form-group input { height:35px; line-height:35px; width: 100%; padding: 0 15px;}
.form-group input.md { display: inline-block; width: 49%;}
.form-group input:focus { outline: 0; border: 1px solid #703112;}
.form-group textarea { width: 100%; padding:10px 15px;}
.form-group textarea:focus { outline: 0; border: 1px solid #703112;}

.row-portfolio { overflow: hidden;}
.gallery-portfolio { width: 69%; padding:30px 30px; 
	float: left; background-color:#b7aa8d;
	  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.detail-portfolio { width: 28%; float: right; line-height: 1.5;}
.detail-portfolio h3 { font-size: 22px; font-weight: normal; padding-bottom: 10px; color: #FFF;   font-family: 'db_ozone_xmedium';}
.detail-portfolio p { line-height: 1.5;}

.ad-gallery { width: 100%;}
.ad-gallery .ad-info { color: #FFF; font-size: 11px;}
.ad-gallery .ad-slideshow-controls { color: #FFF;}

/* STYLE 02 TABLET - iPad portait, Andriod tab */

@media screen and ( max-width:1000px ) {
  #modeScreen:after { content:"desktop 02"; }
  .thumb-port .thumbnails { min-height: 195px;}
	
	#service .col.col-two {
  width: 255px;
  padding-top: 46px;
  padding-left: 10px;
}
	#service .col.col-fb {
  width:225px;
  float: right;
  padding-right: 0;
}
	
}

@media screen and ( max-width:980px ) {
#modeScreen:after { content:"Tablet 03"; }
	
	#highlight .wrapper {
  	padding-bottom: 17px;
	}

	.thumb-port .thumbnails { min-height: 170px;}
	
	#service { background-image: url(../images/bg-service-1.png); background-size: cover;}
	#service .col, #service2 .col { width: 100%!important; padding:0!important; font-size: 21px;}
	#service .col.col-fb { padding-bottom: 20px!important;}
	
	.obj-contact { margin:20px 0 20px -10px; text-align: center;}
	
	.gallery-portfolio,.detail-portfolio { width: 100%; float: none; margin-bottom:30px;}
	.gallery-portfolio .ad-gallery{width: 100%;}
	.gallery-portfolio .ad-gallery .ad-image-wrapper {height: 200px;}
	
}

@media screen and ( max-width:768px ) {
	
	
	
	#highlight .wrapper { background: none;}
	
	#highlight .wrapper { padding-bottom: 12px;}
	
	
	.form-contact,.bx-address { width: 100%; float: none;}
	.form-contact { padding-top: 30px;}
	
}

@media screen and ( max-width:480px ) {
#modeScreen:after { content:"Mobile 06";}
	
	
	#highlight .wrapper { padding-bottom:8px;}
  .thumb-port .thumbnails { min-height: 0;}
	 
	
}
