:root {
	--size-1em: 1em;
	--size-2em: 2em;
	--size-3em: 3em;
	--size-4em: 4em;
	--color-primary: #18A6E8;
	--color-black: #000;
	--color-white: #fff;
	--bg-grey: #E7E7E7;
	--bg-dark-grey: #454545;
}

::placeholder {vertical-align: bottom; font-size: 16px; font-style: italic;}

/* Hacks */
#pushstat {display: none !important;}
* {margin: 0px; padding: 0px;}img {border: none;}
.clearPan, .spacer {clear: both; height: 0px;}
.center, .col-centered {float: none; margin-left: auto; margin-right: auto; text-align: center;}
#body-wrapper {filter: alpha(opacity=40);-moz-opacity:.40;opacity:.40;}
#body-wrapper.enabled {filter: alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;}
#noscriptAlert {margin: 150px auto -255px auto; padding: 20px; text-align: center; width: 400px; background-color: #CCF; border: #1A5F86 2px solid;}
#noscriptAlert div.title {font-size: 28px;}

/* Web Styles */
body {font-size: 16px; font-family: Ubuntu, sans-serif;}
section {position: relative; z-index: 0;}
a, a:hover {-webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;}
a {color: var(--color-primary); text-decoration: none;} a:hover {color: #62AB4F; text-decoration: none;}
a.tobsite {color: #C89F18;}
h1, h2, h3 {font-weight: bold;}
h1 {font-size: 48px;} h2 {font-size: 36px;} h3 {font-size: 24px;} h4 {font-size: 18px;}
.wyswyg {padding: 15px 0px; text-align: left;}
.wyswyg ul, .wyswyg ol, .content ol, .content ul {margin-left: 15px;}
.wyswyg h1, .wyswyg h2, .content h3, .content h4 {margin-bottom: 0.5em;}
.wyswyg p {margin-bottom: 10px;}
.wyswyg img {max-width: 100%;}
.img-responsive {margin: 0 auto;}
.img-wrapper {position: relative; text-align: center; overflow: hidden;}
.img-wrapper.fixed-height-1 {height: 0; padding: 0 15px 65%;}
.img-wrapper img {max-width: 100%;}
.vertical-middle {white-space: nowrap;}
.vertical-middle:before {content: ''; display: inline-block; width: 1px; height: 100%; vertical-align: middle;}
.vertical-middle > * {display: inline-block; vertical-align: middle; white-space: normal;}
.vertical-bottom {white-space: nowrap;}
.vertical-bottom:before {content: ''; display: inline-block; width: 1px; height: 100%; vertical-align: bottom;}
.vertical-bottom > * {display: inline-block; vertical-align: bottom; white-space: normal;}
.equal-height {display: -ms-flex; display: -webkit-flex; display: flex;}
.p4 {padding: var(--size-4em) 0;} .p3 {padding: var(--size-3em) 0;} .p2 {padding: var(--size-2em) 0;} .p1 {padding: var(--size-1em) 0;}
.pt4 {padding-top: var(--size-4em);} .pt3 {padding-top: var(--size-3em);} .pt2 {padding-top: var(--size-2em);} .pt1 {padding-top: var(--size-1em);}
.pb4 {padding-bottom: var(--size-4em);} .pb3 {padding-bottom: var(--size-3em);} .pb2 {padding-bottom: var(--size-2em);} .pb1 {padding-bottom: var(--size-1em);}
.m4 {margin: var(--size-4em) 0;} .m3 {margin: var(--size-3em) 0;} .m2 {margin: var(--size-2em) 0;} .m1 {margin: var(--size-1em) 0;}
.mt4 {margin-top: var(--size-4em);} .mt3 {margin-top: var(--size-3em);} .mt2 {margin-top: var(--size-2em);} .mt1 {margin-top: var(--size-1em);}
.mb4 {margin-bottom: var(--size-4em);} .mb3 {margin-bottom: var(--size-3em);} .mb2 {margin-bottom: var(--size-2em);} .mb1 {margin-bottom: var(--size-1em);}
.parallax {background-attachment: fixed;}

/* Bootstrap Fix */
.navbar-default {border: none; border-bottom: var(--bg-grey) 1px solid; background-color: var(--color-white); margin-bottom: 0;}
.navbar-brand {height: 100px; padding-top: 0; padding-bottom: 0;}
.navbar-brand img {max-height: 100%; display: inline-block;}
.navbar-default .navbar-nav>li>a {color: var(--color-black); font-weight: 500;}
.navbar-default .navbar-nav>li>a:hover {color: var(--bg-dark-grey);}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {background-color: transparent; color: var(--color-primary); font-weight: bold;}
.navbar-toggle {margin-top: 22px;}

.btn {border-radius: 0; padding: 10px 30px; color: var(--color-white); text-transform: uppercase; letter-spacing: 2px; font-size: 14px;}
.btn:hover {color: var(--color-white);}
.btn-primary {background-color: var(--color-primary); border-color: var(--color-primary);}
.btn-primary:hover {background-color: var(--bg-dark-grey); border-color: var(--bg-dark-grey);}
.btn-default {background-color: var(--bg-dark-grey); border-color: var(--bg-dark-grey);}
.btn-default:hover {background-color: var(--color-black); border-color: var(--color-black);}

/* Form */
.noData {color: #f00; text-align: center; text-transform: uppercase;}
.defaultForm {margin: 10px 0px;}
.defaultForm table {width: 100%;}
.defaultForm th, .defaultForm td {padding: 2px 5px; vertical-align: top;}
.defaultForm th {text-align: right;}
.defaultForm input {width: 100%; max-width: 250px;}
.defaultForm input[type='password'], .defaultForm input[type='email'], .defaultForm input.half {max-width: 250px;}
.defaultForm textarea {width: 100%; height: 100px;}
.defaultForm input.button {width: inherit; padding: 5px 10px;}
.defaultForm label.error {color: #f00;}

/* Header & Footer */
section {padding: 6em 0;}
footer {background-color: var(--bg-dark-grey); padding: 4em 0;}
.footer-info {color: var(--color-white); white-space: nowrap;}
.footer-info > * {display: inline-block; vertical-align: top;}
.footer-info .img-wrapper {width: 60px; margin-right: 5px;}
.footer-info .img-wrapper img {max-height: 60px;}
.footer-info .wyswyg {width: calc(100% - 65px);}
.footer-info h2, .footer-info h3 {margin-top: 0; margin-bottom: 20px;}
.footer-info h2 {font-size: 32px;}
.footer-info .wyswyg p {margin-bottom: 5px;}
.footer-info h3 {text-transform: uppercase; font-weight: normal; font-size: 20px;}
#footer-contact .img-wrapper {padding-top: 8px;}
#footer-contact .wyswyg {margin-top: -6px;}
footer .copyright {text-align: center; color: var(--color-white); margin-top: 3em; font-size: 14px;}

/* Content */
.hero {padding: 0;}
.hero > .bg {width: 100%; position: relative; z-index: 1;}
.hero > .container {position: absolute; top: 0; left: 0; z-index: 2; margin: 0 auto; width: 100%;}
.hero > .container, .hero > .container > .row, .hero > .container > .row > .col-xs-12 {height: 100%;}
.hero .wyswyg {width: 100%; color: var(--color-white); font-size: 18px;}
.hero .wyswyg h2 {font-size: 60px; font-weight: 500;}
#product-hero .wyswyg, #gallery-hero .wyswyg {text-align: center;}

.featured-points h2 {text-align: center; margin-bottom: 2em;}
.featured-points h4 {font-size: 24px;}
.featured-points .row {display: flex; flex-wrap: wrap; justify-content: center;}
.featured-points .wrapper {text-align: center; padding: 2em 0;}
.featured-points .img-wrapper {height: 70px; margin-bottom: 1em;}
.featured-points#home-keunggulan .img-wrapper img {max-height: 70px;}
.featured-points p {font-style: italic;}
#product-fitting .img-wrapper {height: auto;}
#product-fitting h2 {color: var(--color-primary)}

.home-static-product {background: var(--bg-grey) no-repeat top 3em right -1em; padding: 0 0 6em;}
.home-static-product .empty {padding-bottom: 80%;}

.basic-info.bg-grey {background-color: var(--bg-grey);}
.basic-info .wyswyg {padding-top: 0;}
.basic-info .img-wrapper {padding: 0 30px;}
.basic-info h3 {color: var(--color-primary); margin-top: 0; margin-bottom: 1.5em; font-size: 36px;}
.basic-info .wyswyg p {margin-bottom: 2em;}
#about-vision {
	color: var(--color-white); padding: 0; text-align: center;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+50,ffffff+50,e7e7e7+50,e7e7e7+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 50%, #ffffff 50%, #e7e7e7 50%, #e7e7e7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#ffffff 50%,#e7e7e7 50%,#e7e7e7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 50%,#ffffff 50%,#e7e7e7 50%,#e7e7e7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */
}
#about-vision .container {margin-right: 0; padding: 6em; background-size: cover;}
#about-vision h2 {margin-bottom: 1.5em;}
#about-vision .wrapper {max-width: 170px; margin: 0 auto 0 0;}
#about-vision .img-responsive {height: 80px; margin: 0 0 1.5em;}

#product-type h2 {color: var(--color-primary); margin-bottom: 1em;}
#product-type h3 {font-weight: normal; margin-bottom: 1.5em; font-size: 28px; text-transform: uppercase;}
#product-type .wrapper {position: relative; color: var(--color-white); margin: 0 -15px 15px;}
#product-type .img-wrapper img {width: 100%;}
#product-type .img-wrapper.transparent img {opacity: 0; visibility: hidden;}
#product-type .content-wrapper, #product-type .overlay {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; padding: 30px;}
#product-type .col-sm-6:not(:first-of-type) .content-wrapper {text-align: center; padding: 30px 45px;}
#product-type .overlay {z-index: 2; opacity: 0; visibility: hidden; transition: 0.5s all; background-color: var(--color-primary);}
#product-type .wrapper:hover .overlay {opacity: 1; visibility: visible;}
#product-type .wrapper.title .wyswyg {color: var(--color-black);}

.gallery-content .item {display: block; margin: 30px 0; padding: 0;}
.link .fa {color: var(--color-black); font-weight: bold; font-size: 20px; margin-right: 5px;}
.link.next {float: right;}
.link.next .fa {margin-right: 0px; margin-left: 5px;}

.contact {color: var(--color-white); background-size: cover;}
.contact .row {margin-left: 30px; margin-right: 30px;}
.contact h2 {margin: 2em 0 1em; font-size: 60px; font-weight: 500;}
.contact .wyswyg .item {margin-top: 1.5em;}
.contact .wyswyg .item > * {display: inline-block; vertical-align: top; text-align: left;}
.contact .wyswyg .img-wrapper {width: 55px; margin-right: 15px;}
.contact .wyswyg .img-wrapper img {height: 45px;}
.contact .wyswyg .content-wrapper {width: calc(100% - 75px);}
#frmContact {background-color: var(--color-white);}
#frmContact .form-control {border-radius: 0; border: none; border-bottom: var(--bg-grey) 2px solid; box-shadow: none; margin-bottom: 3em; font-size: 16px;}

.register-form h2.t {border-bottom: #ccc 1px solid;}
.register-form instruction {display: none;}
.register-form .form-control+.form-control {margin-top: 10px;}

.mini-info .wyswyg {color: var(--color-white); text-align: center; max-width: 700px; margin: 0 auto;}

@media (max-width: 768px) {
	.dropdown-submenu .dropdown-menu {display: block !important;}
	section .container {padding-left: 30px; padding-right: 30px;}
	.hero .wyswyg h2 {font-size: 36px;}
	.featured-points h2 {font-size: 28px;}
	.featured-points h4 {font-size: 16px;}
	.featured-points .img-responsive {max-width: 80%;}
	.home-static-product {background-size: contain;}
	.home-static-product .wyswyg {padding-top: 4em;}
	#about-vision .container {padding: 4em; text-align: center;}
	#about-vision .wrapper {text-align: center; margin-left: auto; margin-bottom: 3em;}
	#about-vision .img-responsive {margin: 0 auto 1.5em;}
	#product-type {padding-top: 0;}
	#product-type .wrapper.title {height: 0; padding-bottom: 60%;}
	#product-type .wrapper.title .content-wrapper {padding: 30px 15px;}
	.contact h2 {margin-top: 0; font-size: 48px;}
	.contact .row {margin-left: -15px; margin-right: -15px;}
	#frmContact {padding: 30px 15px;}
	.contact .wyswyg {padding: 15px 30px;}
	.footer-info h2 {font-size: 20px; margin-bottom: 10px;}
	.footer-info h3 {font-size: 18px; margin-bottom: 10px;}
	.footer-info .wyswyg {white-space: initial;}
	.footer-info .wyswyg p {font-size: 14px;}
	.footer-info .img-wrapper img {max-height: 50px;}
}

@media (min-width: 768px) {
	header {position: absolute; width: 100%; z-index: 100;}
	.navbar-default {background-color: transparent; border-bottom: none;}
	.navbar-default .container {
		background-color: var(--color-white); margin-top: 30px; margin-bottom: 30px; border: var(--bg-grey) 1px solid;
		/*-webkit-box-shadow: 0 0 6px 1px var(--bg-dark-grey);
		box-shadow: 0 0 6px 1px var(--bg-dark-grey);*/
	}
	.navbar-default .navbar-nav {margin-top: 26px; font-weight: bold; text-transform: uppercase;}

	.hero > .container {width: calc(100% - (100% - 750px)); left: calc((100% - 750px) / 2);}
	#about-hero .wyswyg h2 {max-width: 50%;}
	.home-static-product {padding-top: 6em;}
	.home-static-product .empty {padding-bottom: 0;}
	.home-static-product .wyswyg {margin-left: 30px; margin-right: 30px;}
	.basic-info .wyswyg {margin-left: 30px;}
	#about-vision {text-align: left;}
	#about-vision .container {width: calc(((100% - 750px) / 2) + 750px);}
	#frmContact {padding: 2.5em 7.5em 2.5em 2.5em;}
	.contact .wyswyg {position: absolute; right: 0; top: 0; padding: 2.5em; background-color: var(--color-primary);}
}

@media (min-width: 768px) and (max-width: 991px) {
	.navbar-brand {height: 80px;}
	.navbar-default .navbar-nav {margin-top: 16px;}
}
@media (min-width: 992px) {
	.navbar-default .navbar-nav {font-size: 18px;}
	.navbar-default .navbar-nav>li>a {padding-left: 30px; padding-right: 30px;}
	.navbar-default .navbar-nav>li>a:hover {color: var(--color-primary);}
	/*.navbar-default .navbar-nav>li>a:hover:after {content: ''; display: block; position: absolute; width: calc(100% - 45px); bottom: 0px; border-top: var(--color-black) 2px solid;}*/
	.hero > .container {width: calc(100% - (100% - 970px)); left: calc((100% - 970px) / 2);}
	.equal-height-desktop {display: -ms-flex; display: -webkit-flex; display: flex;}
	#about-hero .wyswyg {width: 50%; margin-left: 60px;}
	#about-vision .container {width: calc(((100% - 970px) / 2) + 970px);}
}

@media (min-width: 1200px) {
	.navbar-default .navbar-nav>li>a {padding-left: 40px; padding-right: 40px;}
	.hero > .container {width: calc(100% - (100% - 1170px)); left: calc((100% - 1170px) / 2);}
	.featured-points .wrapper {padding: 3em;}
	.home-static-product {padding: 8em 0; background-position: top right;}
	#about-vision .container {width: calc(((100% - 1170px) / 2) + 1170px);}
	.footer-info {padding-left: 115px;}
}