article, aside, dialog, figure, footer, header, hgroup, nav, section, time {display : block;}

.container {position: relative;	padding: 0;	width: 1060px; 	margin: 0 auto;	}
.column {float: left;margin: 0 10px;}

/* First and last column in a row */
.first { margin-left: 0;}
.last { margin-right: 0;}
*html .last {margin-right: -3px;}
.first-clear {clear: both;}



/* 12 column grid */

.one {width: 60px;}
.two {width: 140px;}
.three {width: 220px;}
.four {width: 300px;}
.five {width: 380px}
.six {width: 460px}
.seven {width: 540px}
.eight {width: 620px}
.nine {width: 700px}

.pre-one {padding-left: 60px;}
.pre-two {padding-left: 140px;}
.pre-three {padding-left: 220px;}
.pre-four {padding-left: 300px;}

div { position:relative } 

/* Image placement
-------------------------------------------------------------------*/
	
span.caption {
	line-height: 16px;
	color: #666;
	margin: 5px 0 0 0;
	font-style: italic;
	display: block;
	}

.left {float: left; margin: 20px 20px 0 0;}
.right {float: right; margin-left: 20px;}
.right.inset {margin: 0 120px 0 20px;} /* img floated right within text */
.left.inset {margin-left: 230px;} /* img floated left within text */

.outset-1 {margin-left: -100px;}
.outset-2 {margin-left: -200px;}

.frame {}
.frame img {border: 3px solid #fff;}

.solo img {margin-bottom: 20px;}


/* Easy Clearing
----------------------------------------------- */

.clear:after, footer:after, header:after, nav:after, section:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clear             { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */


/*** Grid
---------------------------------------------- */
#grid{

    /* Vertical grid lines */
    background: url(../graphics/bg-grid-980.html) repeat-y 0 0;

    /* Dimensions - same width as your grid with gutters */
    width: 980px;

    /* Grid (centered) */
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -490px;

}

/*** Horizontal grid lines
---------------------------------------------- */
#grid .horiz{
    height: 19px;
    border-bottom: 1px dotted #aaa;
    margin: 0;
    padding: 0;

}

#tips, .productFull {float: left; width: 800px;padding-left:240px;padding-top:20px;}
	.productFull {padding-bottom:30px}
	
#quote {background-color: white;border: thin solid #F90;padding: 10px 5px 10px 15px;}

/* 3 KOLOM */
.triColoum {width:100%; margin-bottom:50px;	text-align:center;}
.triColoum h2 {line-height:1em;font-size:1.4em; color:rgb(37, 46, 255);border-bottom: 1px solid; padding-bottom: 20px; margin-bottom: 15px;}
.triColoum p {font-size:.85em; letter-spacing:.01em; line-height:2em;}
.coloum {width:29%; float:left; margin-left:5%;}

.c30p {width:30%; margin-left:3.33%}
.triColoum #first {margin-left:10px}

.top50 {margin-top:70px}
.triColoum.top50 img {border: 2px solid #cdcdcd;border-radius:10px;}

/* 2 KOLOM */
.twoColoum {height:260px; margin:50px 0 80px;text-align:center;}
.twoColoum .coloum {width:45%;}
.twoColoum .coloum.first {margin-left:10px}
.twoColoum .coloum h4 {padding-top:.5em; font-size:16px; color: rgb(37, 46, 255)}



/* Next Pump */
section .upcomingText {
	padding-top: 60px;
	margin-right: 20px;
	width:320px;
	float:left;
	
	}

section .upcomingText h2, section .upcomingCenter h2, .upcomingImg {font-size: 200%; color:rgb(37, 46, 255); margin-bottom:.3em;}
.upcomingImg {width:600px; float:left; }	

section .upcomingCenter {
	padding-top: 60px;
	text-align:center;
	
	clear:left;
	border-top: 1px solid #d1d1d1;
	}
section .upcomingCenter p {margin: 0 auto; width:950px; padding-bottom:40px;font-size:90%;}


/* Coming Soon INDEX */
.csProduct { height:200px;}
.csImg {position:absolute; right:0; margin-top:-10px; padding-right:30px; z-index:999;}

#rvsTxt, #rvsImg { width:600px; border-top:1px solid #d1d1d1; padding-top:40px; margin-top:40px; margin-right:0; }
#rvsImg { width:320px; color:#666; padding-top:70px;}
#homeP, #homeK{margin-top:40px;}
#homeP h2, #homeK h2 {border-bottom: 1px solid #d1d1d1; padding-bottom: 14px;	margin-bottom:14px;}
section #homeP .coloum, section #homeK .coloum  {margin-bottom: 60x;}
#homeP .coloum, #homeK .coloum  {padding-bottom: 25px;}



/* BOX SHADOW EFFECT */
.box.klien {width:515px; height:318px; margin:0; border:1px solid #CCCCCC; border-radius:2px; padding: 20px; background-color: #F3F3F3;}

.box {
	width:400px;
	height:250px;
	background:#FFF;
	margin:-80px auto 40px; 
	border:1px solid #d1d1d1;
}
.boxHome {height:462px; margin-bottom:27px;}
.boxAuto {height:250px;}
.boxPromo {height:479px; margin:20px 0 35px;}
.effect2{position: relative;}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.csProduct h2, .csProduct h3 {
	background-color: rgb(37, 46, 255);
	color:#FFF;
	
	font-size:1.3em;
	padding:4px 20px;
	width:500px;
	margin-top:30px;
	margin-left:80px;
}
.csProduct h3 {
	background-color:#fff;
	color:rgb(37, 46, 255);
	margin-top:5px;
	text-transform: none;
	font-size:.9em;
	width:370px;
	line-height:1.8em;
	}
	
/* KONSULTASI INDEX */	
#homeK {margin-top:80px;}
.box2 {height:325px; width:940px; margin:60px auto;}
.box460 {height:345px; width:460px; position:absolute; right:0}
.h542 {height:542px; width:450px;}

#moz450, .box450 {width:450px; float:left;}
.box980 {width:980px; z-index:1;}
.headTop {margin-bottom:40px}
.bootomFoot {margin-top:30px;}
.bootomFoot h2 {font-size: 200%; text-align: center; margin:5px 0; padding: 30px 0; color: #eb5e3a; border-top: 1px solid rgba(0, 125, 190, 0.29); border-bottom: 1px solid rgba(0, 125, 190, 0.29); line-height:1.3; background-color:rgb(247, 248, 248)}
.standar {border-top: 1px solid #d1d1d1;}
.konsulCenter, .lampuCenter {padding:50px 0;border-top: 1px solid #d1d1d1;}
.konsulCenter .kolomKanan h2, .konsulCenter .kolomKiri h2 {color: #eb5e3a; font-size:200%; line-height: 1.2; padding-bottom:36px;}

.kolomKanan, .kolomKiri {width:520px; float:right; padding: 0 0 0 80px; line-height:1.9;}
.kolomKiri {padding:0 60px 0 20px; float:left}

.kolKonsul {float:left; display:block; margin-right:20px; padding:50px 0 40px; text-align:center; font-size:12px;width: 242px;}
.kolKonsul p strong{font-size:18px;font-family: 'Raleway', sans-serif; font-weight:400;}


/* ABOUT US */
#isiAbout {padding:50px 0 20px; border-bottom: 1px solid #d1d1d1;}
#isiAbout h2, #isiAbout2 h2{color:#eb5e3a; font-size:1.8em;}
#isiAbout .kolomKanan p span {font-size: 24px;line-height: 36px;padding: 20px 0;display: block;}
.box3 {height: 170px; width: 263px;}
#isiAbout .coloum h2 {font-size:1.3em;}
.round {border-radius:10px;}

#isiAbout2 {padding:50px 0; border-top:none;}
.gmap {text-align:center; padding:50px 0 20px}

/* PROJECT KLIEN */
.noBorder {border-top: none;}
.waterpark .kolomKiri, .waterpark .kolomKanan {
	margin-top: 50px; position:relative; z-index:1
}
	.waterpark .kolomKanan {text-align:left}
	.waterpark .top50 {margin-top:50px;}
	.waterpark .kolomKanan p, .waterpark .kolomKiri p {width:auto; padding:0}
	#imgAdj {margin-left:-50px}
	
.listImage { height:100px; padding:20px 10px; border-bottom:1px solid #e7e7e7}
	.listImage img {float:left; padding-right:25px;}
	.listImage p {font-size:14px; padding-top:7px;}
	.listImage a ul {margin-top:-6px}
	.listImage a ul li {Font-size: 12px; list-style:disc; list-style-position:inside;	}
	
.mapFull {border:1px solid #cdcdcd; padding:20px; background-color:#FAFAFA; margin:35px 0;}

.home .container aside #alamat p strong a img, .item .container aside #alamat p strong a img, .home .container aside #copyright p img, .item .container aside #copyright p img, .info .container aside #copyright p img, .info .container aside #alamat p strong a img {width:inherit}

img {width:100%; height:auto}
@media (min-width: 49em) {
 
}

@media (max-width: 49em) { 
.container {width:100%}
section .introduction { display:none}
 
}

@media (min-width: 700px) and (max-width: 801px) {
		
}

@media (min-width: 320px) and (max-width: 481px) {
	.home .product, .taxon .product { width:99%; padding: 0 5px;}
	#rvsTxt, #rvsImg {width:100%}
	section .upcomingCenter p {width:100%; padding: 0 5px;	}
	.bed {background-size:cover; margin: 50px 0;}
	.boxHome {height:inherit}
	.youtube {width:100%;position: relative; padding-bottom: 56.25%;height: 0; margin:25px 0 50px;}
	.youtube iframe{position: absolute; top: 0;left: 0;width: 100%;height: 100%;}
	
/* HEADER */
	header { height:195px;}
	#basket-info {width:inherit}
	nav.main {left:10px;  top:132px}
	nav.main ul li { padding-bottom:7px}
	
	#tips {width:100%; padding-left:0;}
	
	.product li {width:47%; margin:0; padding:20px 5px 0}
	div.item-detail p {font-size:x-small;font-style: normal;}
	.home .product li:nth-child(4n) {margin:0}
	#basket-info p {font-size:11px}
	#border-edge {width:141px}
	nav.main li.current a, nav.main a:hover {display:inline}
	div.caption {margin-top:100px}

/* FOOTER */
	aside section {width:47%; margin:0 5px;}
	aside #alamat {width:47%}
	.nomer {padding-left:48px; display:block;}
	aside #copyright {width:100%}
	
/* PRODUK PAGE */	
	.tabsmenucontentclass li {margin-bottom:6px}
	.item article {overflow:inherit}
	.item .details {width:92%; float: none; clear:both; padding-bottom:50px; padding-left:10px;}
	.item article figure img {width:58%}
	.video{margin:inherit; float:left}
	.photo-meta-data {margin-top:-60px; height: 23px; font-size:small;}
	.box.klien {width:100%; height:auto; padding:0; margin-bottom:50px;}
	.description {margin:inherit; width:90%; padding-left:10px;}
	.tabsmenucontentclass {padding:5px 0}
	#klien.description h3 {height: inherit; padding:0 0 50px;}


/* POMPA PAGE */
	#tips, .productFull {width:100%; padding:inherit}
	.upcomingImg {width:100%}
	section .upcomingCenter, section .upcomingText {width:95%}
	section .upcomingText h2,section .upcomingText p{padding-left:10px;}
/* JACUZZI PAGE */	
	.svw {width:100%}
	
/* KONSULTASI */
	.info section.text, .info div.text {width:100%}
	.info section.text section h3, .info div.text div h3 {position:inherit; width:100%; font-size:1em; padding-left: 10px;}
	.info section.text section, .info div.text div {padding:10px 0 30px}
	.info section.text p {padding:0 15px 0 10px}
	#quote { width:90%}
	.info section.connect, .info section.toc, .info section.fbPage, .info div.connect, .info section.testi {float:inherit; margin:inherit}
		.info section.toc {width:100%}	
	#homeK {margin-top:inherit}	
		#homeP .coloum, #homeK .coloum {padding-bottom:50px;}
	.kolomKanan, .kolomKiri {width:98%; padding:inherit}
	.coloum {width:95%; margin-left:inherit; padding: 0 5px;}
		.triColoum #first {margin-left:inherit}
	.proFilter { background-size:cover; height:auto;}
	.wrap {width:100%}
	.proFilter h2, .waterpark h2 {width:100%; font-size:18px;}
	.proFilter p, .waterpark p {width:100%;font-size:smaller; padding:5px 0; margin-bottom:40px;}
	.box2, .box460 {width:100%; height:auto}
	.box460 {position:relative}
	.kolKonsul {width:50%; margin:0;}
	

  }

*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE's blue borders */