section#slider_banner {height: 100vh; max-height: 720px;}

section#slider_banner .container {height: 100%;}
section#slider_banner .container .slider_wrapper {height: 100%; position: relative; background-color: black;}
section#slider_banner .container .slider_wrapper .owl-stage-outer {height: 100%;}
section#slider_banner .container .slider_wrapper .owl-stage-outer .owl-stage {height: 100%;}
section#slider_banner .container .slider_wrapper .owl-stage-outer .owl-stage .owl-item {height: 100%;}
section#slider_banner .container .slider_wrapper .owl-stage-outer .owl-stage .owl-item .slide_item {display: block; height: 100%; position: relative; background-position: center; background-repeat: no-repeat; -webkit-background-size: cover;
background-size: cover;}





@media (min-width: 1081px){
	section#slider_banner .owl-item .text_wrapper .adapt_red_line {
		transform: translate3d(1500px, 0, 0) scaleX(0.1); opacity: 0;
		-webkit-transition: all 1.4s ease;
		-moz-transition: all 1.4s ease;
		-ms-transition: all 1.4s ease;
		-o-transition: all 1.4s ease;
		transition: all 1.4s ease;
	}
	section#slider_banner .owl-item.active .text_wrapper .adapt_red_line {
		transform: translate3d(0, 0, 0) scaleX(1); opacity: 1;
	}


	section#slider_banner .owl-item .text_wrapper .hd_wrapper {
		
		transform: translate3d(1400px, 0, 0); opacity: 0;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;
	}
	section#slider_banner .owl-item.active .text_wrapper .hd_wrapper {
		transform: translate3d(0, 0, 0); opacity: 1;

	}


	section#slider_banner .owl-item .text_wrapper p {
		transform: translate3d(-2300px, 0, 0); opacity: 0;
		-webkit-transition: all 1.3s ease;
		-moz-transition: all 1.3s ease;
		-ms-transition: all 1.3s ease;
		-o-transition: all 1.3s ease;
		transition: all 1.3s ease;
	}
	section#slider_banner .owl-item.active .text_wrapper p {
		transform: translate3d(0, 0, 0); opacity: 1;
	}





}






@media (max-width: 1080px){
	section#slider_banner {height: 600px; max-height: none; position: relative;}
	section#slider_banner .container .slider_wrapper .owl-stage-outer {height: 100% !important;}
}

@media (max-width: 720px){
	section#slider_banner {height: 500px;}
}

@media (max-width: 480px){
	section#slider_banner {height: 500px;}
}


@media (max-width: 320px){
	section#slider_banner {height: 450px;}
}


section#slider_banner .slider_wrapper .owl-nav {display: block; position: absolute; margin: auto; height: 1px; top: 0; bottom: 0; width: 100%;}
@media (max-width: 860px) {section#slider_banner .slider_wrapper .owl-nav {display: none;}}
section#slider_banner .slider_wrapper .owl-nav {}
section#slider_banner .slider_wrapper .owl-nav > div {display: block; position: absolute; width: 40px; height: 40px; border-radius: 50%; margin: 0; background-color: rgba(255, 255, 255, 0); background-position: center; background-repeat: no-repeat; -webkit-background-size: cover;
background-size: cover;}
section#slider_banner .slider_wrapper .owl-nav > div.owl-prev {left: 30px; background-image: url('../img/slider-arrow-left-white.svg')}
section#slider_banner .slider_wrapper .owl-nav > div.owl-next {right: 30px; background-image: url('../img/slider-arrow-right-white.svg');}



section#slider_banner .slider_wrapper .owl-dots {display: block; width: 100%; position: absolute; bottom: 30px;}
section#slider_banner .slider_wrapper .owl-dots .owl-dot span {background: transparent; border: 2px solid white;}
section#slider_banner .slider_wrapper .owl-dots .owl-dot.active span {background: white; border: 2px solid white;}


@media (max-width: 1080px) {
	section#slider_banner .slider_wrapper .owl-dots {width: auto; left: 120px; bottom: 95px;}}
@media (max-width: 860px) {section#slider_banner .slider_wrapper .owl-dots {left: 60px;}}
@media (max-width: 580px) {section#slider_banner .slider_wrapper .owl-dots {left: 30px;}}




section#slider_banner .slider_wrapper .overlay_gradient { background-image: url('../img/bg-gradient-radial-page-home-section-slider.svg');
}

section#slider_banner .text_wrapper {position: absolute; bottom: 120px;}
@media (max-width: 1080px){section#slider_banner .text_wrapper {bottom: 130px;}}

section#slider_banner .text_wrapper .hd_wrapper {display: block; margin-bottom: 20px; }
section#slider_banner .text_wrapper .adapt_red_line {margin-bottom: 10px;}
section#slider_banner .text_wrapper h2 {display: inline; font-family: "fabrikat-light"; }
section#slider_banner .text_wrapper p {display: block; width: 400px;}


section#slider_banner .logo_comet_wrapper {display: none; width: 100%; height: auto;  position: absolute; left: 0; bottom: 0; padding-bottom: 30px;}
@media (max-width: 1080px) {section#slider_banner .logo_comet_wrapper {display: block;}}
section#slider_banner .logo_comet_wrapper .container {padding: 0;}


/*----------------------------------------------------------------*/


section#tentang {background-color: #BDBDBD; }
section#tentang .overlay_gradient {background-image: url('../img/bg-gradient-radial-page-home-section-tentang.svg');}
section#tentang .container {padding-top: 120px; padding-bottom: 120px;}
section#tentang h2 {margin-bottom: 30px; display: block; width: 950px; }
@media (max-width: 1080px) {section#tentang h2 {font-size: 70px; line-height: 85px;}}
@media (max-width: 550px) {section#tentang h2 {font-size: 50px; line-height: 60px;}}
section#tentang p {font-size: 23px; display: block; width: 700px; line-height: 30px;}
section#tentang .container p:last-of-type { margin-bottom: 50px;}




/*----------------------------------------------------------------*/




section#produk {background-color: #c7c8ca;}
section#produk .container {padding-top: 80px; padding-bottom: 80px;}
section:not(#slider_banner) .hd_wrapper {display: block; margin-bottom: 50px; }
section#produk .hd_wrapper {width: 400px; margin-bottom: 0px;}
section:not(#slider_banner) .adapt_red_line {margin-bottom: 10px;}
section#produk h2 {display: inline; color: black; margin-top: 15px;}
section#produk .img_wrapper {display: block; width: 100%; height: 500px; position: relative; margin-top: 50px; margin-bottom: 50px; }
@media (max-width: 1080px){
	section#produk .img_wrapper {height: auto;}
}
@media (max-width: 620px){
	section#produk .img_wrapper {margin-top: 20px; margin-bottom: 30px;}
}
section#produk .img_wrapper .tridi_produk_infog {display: block; width: 600px; height: 339px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
section#produk .img_wrapper .tridi_produk_infog img.foto_produk {display: block; width: 100%; height: 100%; position: absolute; transform: rotate3d(0, 0, 0, 0deg);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;}


section#produk .img_wrapper .tridi_produk_infog .tridi_mousemove_handler {display: none;}
@media (min-width: 1081px){
section#produk .img_wrapper .tridi_produk_infog .tridi_mousemove_handler {display: block; width: 100%; height: 100%;  position: absolute; left: 0; top: 0; }	
}


section#produk .img_wrapper .tridi_produk_infog div.text_el {
	width: 5px; height: 5px; 
	display: block; position: absolute; 
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

section#produk .img_wrapper div.text_el#mudah_dipasang {right: 70px; top: 70px;}
section#produk .img_wrapper div.text_el#mudah_dipasang img {width: 200px;  height: auto; transform: translate3d(0, -100%, 0);}

	section#produk .img_wrapper div.text_el#desain_modern {left: 130px; top: 110px;}
section#produk .img_wrapper div.text_el#desain_modern img {width: 280px;  height: auto; transform: translate3d(-90%, -45%, 0);}


section#produk .img_wrapper div.text_el#anti_bocor {right: 105px; top: 180px;}
section#produk .img_wrapper div.text_el#anti_bocor img {width: 215px;  height: auto; transform: translate3d(0, 0, 0);}

section#produk .img_wrapper div.text_el#tipe_minimalis {left: 215px; bottom: 60px;}
section#produk .img_wrapper div.text_el#tipe_minimalis img {width: 230px;  height: auto; transform: translate3d(-100%, 0, 0);}




div.static_produk_infog_desktop {display: none;}
@media (max-width: 1080px) and (min-width: 721px) {

	section#produk .img_wrapper .tridi_produk_infog {display: none;}

	div.static_produk_infog_desktop {display: block; width: 100%;  margin: auto; position: relative;}
	div.static_produk_infog_desktop img.text_el {display: block; width: 100%; height: auto; position: absolute; left: 0; right: 0; top: 0;  margin: auto;}
	div.static_produk_infog_desktop img.img_el {display: block; width: 75%; height: auto; margin: auto;}
}

div.static_produk_infog_mobile {display: none;}
@media (max-width: 720px){

	section#produk .img_wrapper .tridi_produk_infog {display: none;}

	div.static_produk_infog_mobile {display: block; width: 100%;  margin: auto; position: relative;}
	div.static_produk_infog_mobile img.text_el {display: block; width: 100%; height: auto; position: absolute; left: 0; right: 0; top: 0;  margin: auto;}
	div.static_produk_infog_mobile img.img_el {display: block; width: 100%; height: auto; margin: auto;}
}


/*----------------------------------------------------------------*/

section#galeri {height: 100vh; max-height: 700px; position: relative; background-position: center; background-repeat: no-repeat; -webkit-background-size: cover;
background-size: cover;}

@media (max-width: 720px){
	section#galeri {height: auto; max-height: none;}
}

section#galeri .container {padding-top: 80px; padding-bottom: 80px;}
section#galeri .hd_wrapper {width: 400px;}
section#galeri h2 {display: inline; }

section#galeri .overlay_gradient { background-image: url('../img/bg-gradient-radial-page-home-section-slider.svg');
}
section#galeri .container p {display: block; width: 450px;}
section#galeri .container p:last-of-type { margin-bottom: 50px;}



/*----------------------------------------------------------------*/


#console {display: none !important;}

section#hubungi {background-color: #424242; height: 100vh; max-height: 700px; }
@media (max-width: 720px){section#hubungi {height: auto; max-height: none;}}
section#hubungi .container {padding-top: 80px; padding-bottom: 80px;}
section#hubungi .hd_wrapper {width: 430px;}
section#hubungi h2 {display: inline; }