/*

Theme Name: LayerSlider WP Theme
Theme URI: https://layerslider.kreaturamedia.com/
Description: Theme for LayerSlider
Author: Kreatura Media
Author URI: https://kreaturamedia.com/
Version: 1.0.0
Tags:

*/
/* VARIABLES */
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.footer-2022 {
	color: #000;
	display: block;
	padding: 20px 0;
	text-align: center; }
	.footer-2022 .copyright > b {
		text-transform: uppercase;
		font-weight: 700; }
	.footer-2022 .developer > a {
		color: #000;
		font-family: 'Poppins', cursive; }
		
::selection{
	background: #353434;
	border-radius: 5px;
	color: #fefefe;
}

.bodoamat{
    position: fixed;
        right: 0;
        top: 29%;
    z-index: 9998 !important;
}
.bodoamat li{
    box-shadow: -5px -1px 5px rgba(25, 25, 25, .25);
    list-style-type: none;
}
.bodoamat li a{
    color: #fff;
    display: block;
    padding: 15px;
    transition: all .5s;
}
.bodoamat li a.whatsapp{
    background: #25d366;
    transition: all .5s;
}
.bodoamat li a.whatsapp:hover{
    background: rgba(28, 165, 79, .5);
}
.bodoamat li a.email{
    background: #d84141;
    transition: all .5s;
}
.bodoamat li a.email:hover{
    background: rgba(178, 42, 42, .5);
}
.bodoamat li a.instagram{
    background: 
      radial-gradient(circle at 17% -3%, rgba(74,98,216,1) 0%, rgba(147,50,189,1) 20%, rgba(147,50,189,-0.49) 49%, rgba(255,255,255,0.15) 74%, rgba(255,255,255,0) 100%),
      radial-gradient(circle at 21% 97%, rgba(254,213,111,1) 0%, rgba(254,213,111,1) 4%, rgba(251,159,47,1) 21%, rgba(241,78,69,1) 41%, rgba(217,40,149,1) 69%, rgba(208,40,149,1) 100%);
    transition: all .5s;
}
.bodoamat li a.instagram:hover{
    background: linear-gradient( #400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
    opacity: .7;
}
.bodoamat li a.phone{
    background: #5c9be0;
    transition: all .5s;
}
.bodoamat li a.phone:hover{
    background: rgba(64, 116, 173, .5);
}
.bodoamat li a i{
    font-size: 30px;
    transition: all .5s;
}
.bodoamat li a:hover > i{
    transition: all .5s;
}

/* RESET */
body, html { margin: 0; padding: 0; outline: 0; font-weight: 400; }
h1, h2, h3, h4, h5, p, ul, li {color: #101010; margin: 0; padding: 0; outline: 0; font-weight: 400; }

* { -moz-osx-font-smoothing: grayscale; }

a, a:hover, a:visited { text-decoration: none; }

ul { list-style: none; }

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none;
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

html#layerslider6home, * html#layerslider6home body { margin-top: 0 !important; }

@media screen and (max-width: 782px) { html#layerslider6home, * html#layerslider6home body { margin-top: 0 !important; } }

#wpadminbar { opacity: .5 !important; position: fixed !important; top: 100% !important; margin-top: -100px !important; }
/* NURJAMAN STYLE */
#empty{
	margin: 0;
}
#empty::after{
	content: 'Maaf, Koleksi Kosong.';
	background: -webkit-linear-gradient(#555555, #353434);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	display: block;
	font-family: 'Kaushan Script';
	font-size: 3em;
	margin: 0 auto;
	opacity: .6;
	text-align: center;
	padding: 50px 0 10px 0;
	width: 500px;
}
.map-area{
	display: block;
	margin: 0;
	width: 100%;
	background: #fff;
}
.box-in-map{
	position: absolute;
	max-width: 350px;
	height: 360px;
	background: rgba(250, 250, 250, .65);
	box-shadow: 2px 3px 7px #333;
	border-right: 5px solid #323336;
	width: 100%;
	padding: 10px 20px;
	margin-top: -430px;
	margin-left: 10px;
}
.box-in-map h3{
	margin: 0;
	padding: 15px 0 5px ;
	font-size: 1.1em;
	font-weight: bold;
	text-transform: lowercase;
	font-family: 'Comfortaa';
}
.box-in-map h3::after{
	content: ' :';
}
.box-in-map h3 i{
	font-size: 1.3em;
	margin: 5px 0;
	background: #111;
	height: 30px;
	width: 30px;
	text-align: center;
	line-height: 30px;
	margin-bottom: -10px;
	margin-left: -10px;
	border-radius: 50%;
}
.box-in-map span{
	color: #111111 !important;
	display: block;
	font-family: 'Comfortaa';
	font-size: .95em;
	letter-spacing: 1px;
	margin: 0 0 -20px 4px;
	padding: 5px 0 0 10px;
	border-left: 3px solid #111;
}
.box-in{
	margin: 0;
	width: 100%;
}
.box-in h4{
	color: #101010;
	margin: 0;
	padding: 0 ;
	font-size: 1em;
	text-transform: lowercase;
	font-family: 'Comfortaa';
}
.box-in h4 i{
	font-size: 1.3em;
	margin: 5px 0;
}
.box-in h4::after{
	content: ' :';
}
.box-in span{
	color: #111;
	display: block;
	font-family: 'Comfortaa';
	font-size: .7em;
	letter-spacing: 1px;
	margin: 0 0 0 4px;
	padding: 5px 0 15px 10px;
	border-left: 3px solid #101010;
}
.box-in-service{
	color: #101010;
	display: block;
	margin: 40px 0;
	width: 100%;
}
.box-in-service::after{
	content: '';
	clear: both;
}
.box-in-service img{
	width: 100%;
	display: block;
}
.box-in-service h3{
	color: #101010;
	margin: 0;
	padding: 7px 0 0 0;
}
.box-in-service blockquote{
	margin: 0;
	line-height: 20px;
}
.box-in-service p{
	color: #101010;
	margin: 10px 0 !important;
	padding: 0 !important;
	line-height: 20px;
}
.box-in-order{
	display: block;
	margin: 40px 0;
	width: 100%;
}
.box-in-order .box-form{
	margin: 0;
}
.box-in-order .box-form h3{
	padding: 3px 0 0 0;
	margin: 0;
	display: block;
	font-size: 2em;
	color: #101010;
}
.box-in-order .box-form p{
	padding: 7px 0 !important;
	margin: 0;
	font-size: 1em !important;
	color: #101010;
	text-indent: 15px;
}
.box-in-order .box-info{
	margin: 5px;
	display: block;
	background: linear-gradient(to top left, rgba(255, 255, 255, .7), #fff);
	padding: 20px;
	border-radius: 5px;
	color: #000;
}
.box-in-order .box-info h4{
	margin: 0;
	padding: 0 ;
	font-size: 1.2em;
	text-transform: lowercase;
	font-family: 'Comfortaa';
	font-weight: bolder;
	color: #222;
}
.box-in-order .box-info h4 i{
	font-size: 1.3em;
	margin: 5px 0;
	background: #111;
	height: 30px;
	width: 30px;
	text-align: center;
	line-height: 30px;
	margin-bottom: -10px;
	margin-left: -10px;
	border-radius: 50%;
}
.box-in-order .box-info h4::after{
	content: ' :';
}
.box-in-order .box-info span{
	color: #111111 !important;
	display: block;
	font-family: 'Comfortaa';
	font-size: .95em;
	letter-spacing: 1px;
	margin: 0 0 -5px 4px;
	padding: 5px 0 15px 10px;
	border-left: 3px solid #101010;
}
.box-in-order .box-info span a{
	color: #233112 !important;
	font-weight: bold;
}
.hvr-bounce-to-bottom{
	border-radius: 10px !important;
}
.collection-box{
	width: 100%;
	height: 310px;
	display: block;
	padding: 15px;
	background-origin: content-box;
	border: 5px solid #fff;
	border-radius: 10px;
	margin: 10px 0;
	transition: all .5s;
}
.collection-box:hover{
}
.form-order{
	margin: -20px 0 20px 0;
	display: block;
}
.form-order .form-group{
	margin: 5px;
	background: #eee;
	border: 1px ridge #aaa;
	border-left: 3px solid #353434;
}
.form-order .form-group label.control-label{
	color: #101010;
	font-family: 'Comfortaa';
	padding: 5px 0 0 10px;
}
.form-order .form-group input.form-control{
	background: none !important;
	color: #101010;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
}
.form-order .form-group input.form-control:invalid:focus{
	background: rgba(244, 80, 66, .3);
}
.form-order .form-group textarea.form-control::-webkit-input-placeholder,
.form-order .form-group input.form-control::-webkit-input-placeholder{
	font-family: 'Comfortaa';
}
.form-order .form-group textarea.form-control,
.form-order .form-group textarea.form-control:focus{
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: 0 !important;
	color: #101010;
	height: 120px;
	outline: 0 !important;
	resize: none;
}
.form-order button{
	display: block;
	outline: 0;
	padding: 10px 15px;
	margin: 10px 0;
	font-weight: bolder;
	background: linear-gradient(to bottom left, #cdcdcd, #cccccc);
	border: 7px solid #ccc;
	box-shadow: inset 0 0 0 20px #222;
	transition: all .5s;
	color: #fff
}
.form-order button:hover{
	color: #353434;
	box-shadow: inset 0 0 0 0px #fff;
	border-color: #353434;
}
.timestamp{
	border-top: 1px solid #D2AAC0;
	border-bottom: 1px solid #D2AAC0;
	display: block;
	font-style: italic;
	padding: 10px 5px;
	width: 100%;
}
.timestamp b{
	display: block;
	float: left;
	font-weight: bolder;
}
.timestamp u{
	display: block;
	float: right;
	text-decoration: none;
}
.box-in-article{
	color: #141414;
	display: block;
	border: 1px solid #eee;
	border-radius: 5px;
	width: 100%;
	min-height: 90px;
	background-size: cover;
	filter: grayscale(100%);
	transition: all .5s;
}
.box-in-article:hover{
	color: #000 !important;
	filter: grayscale(0);
}
.box-in-article .thumb-article{
	display: block;
	float: left;
	width: 30%;
	height: 190px;
	margin: 0;
}
.box-in-article .content-article{
	display: block;
	float: left;
	margin: 0;
	width: 60%;
}
.box-in-article .content-article b{
	display: block;
	font-size: 1.6em;
	padding: 15px 17px !important;
	margin: 0 !important;
	word-wrap: normal;
}
.box-in-article .content-article span{
	display: block;
	font-size: 1.1em;
	line-height: 18px;
	padding: 0 17px;
	word-wrap: normal;
	margin: 0;
	text-align: justify;
}

/* SLIDER */
.button_slider:hover{
	background: #7609c4 !important;
}

.button_next{
	background: linear-gradient(124deg, #bc4e12, #db611e, #f76f25);
	background-size: 1800% 1800%;

	-webkit-animation: rainbow 18s ease infinite;
	-z-animation: rainbow 18s ease infinite;
	-o-animation: rainbow 18s ease infinite;
	animation: rainbow 18s ease infinite;
	top:940px;
	left:50%;
	text-align:initial;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	word-wrap:false;
	opacity:1;
	font-family:Nunito;
	font-size:36px;
	color:#ffffff;
	border-radius:50px;
	padding:30px 60px;
}

/* #TESTIMONIALS
================================================== */
.ts-container {
	position:relative;
}
.ts-icon-container-bg {
	background-color: rgba(255,234,0,.5);
	padding-top:52px;
	padding-bottom:53px;
	width:85px;
	float:left;
	position:absolute;
	top:0;
	left:0;
}
.ts-icon-container {
	background-color:#ffea00;
	width:85px;
	height:85px;
	opacity:1;
	text-align:center;
	padding:19px;
}
.ts-icon-container span {
	padding:0;
	margin:0;
	padding-bottom: 14px;
	padding-top: 8px;
	font-size:26px;
	color:#323336;
	border-color:#323336;
}
.ts-main-container-bg {
	background-color:#eee;
}
.ts-main-container-bg{
	margin-left: 85px;
}
.ts-lines:before {
	content: "";
	display: block;
	width: 300%;
	height: 40px;
	background: #dfdfdf;
	position: absolute;
	top: 0;
	left: -300%;
	filter: alpha(opacity=50);
	height:190px;
}
.ts-text-container {
	position:relative;
	min-height:190px; 
	padding-top: 70px;
	padding-left: 40px;
	padding-right: 240px;
	font-size: 14px;
	line-height: 22px;
}
.ts-img-container {
	width:200px; 
	height:190px; 
	position:absolute;
	right:0;
	top:0;
}
.ts-img-container img{
	width:200px; 
	height:190px; 
}
.tls-small-text-container {
	background-color:#eee;
	border-bottom: 7px solid rgba(255, 255, 255, .4);
	padding:30px;
	padding-bottom:80px;
	text-indent: 25px;
}
.tls-small-text-container p{
	padding: 0 !important;
	margin: 0 !important;
	line-height: 18px !important;
	font-size: 17px !important;
}
.tls-small-text-container::before{
	content: '';
	background: url('../image/component/quote.png') center center no-repeat;
	background-size: contain;
	display: block;
	float: left;
	position: absolute;
	margin-top: -30px;
	margin-left: -10px;
	opacity: .3;
	height: 70px;
	width: 70px;
}
.tls-small-img-container {
	float:left;
	margin-right: 20px;
	max-width: 250px;
}
.tls-small-img-container img{
	max-width: 120px;
	border: 7px solid #323336;
	border-radius: 50%;
}
.tls-small-author-name{
	font-size:16px;
	font-weight: 700;
  	line-height:15px;
	color:#323336;
	text-transform: capitalize;
}
.tls-small-author-role {
	margin-top:3px;
	font-size:12px;
	text-transform: capitalize;
}
.tls-small-author-container {
	margin-top: -55px;
}
.bg-light-gray {background:#eee;}
.testimonials {
	position:relative;
}
.quote-author {
	position: relative;
	left: 15px;
	margin-top: 20px;
}
.quote-author-description {
	font-size: 12px;
}
.author-testimonial {
	display: inline;
	margin-top: 7px;
	font-size: 12px;
	font-family: 'Poppins',Arial,Helvetica,sans-serif;
	color: #323336;
}

/* COMMON */
html { font-size: 16px; height: 100%; }

body { background: linear-gradient(#353434, #fff) no-repeat !important;background-size: cover !important;}

button, .button { border-radius: 30px; padding: 5px 20px; white-space: nowrap; }

.separator { width: 100%; height: 1px; font-size: 0; line-height: 0; border-bottom: 1px solid #ddd; padding-top: 50px; margin-bottom: 20px; }

.center { text-align: center !important; }

.justify { text-align: justify !important; }

.left { text-align: left !important; }

.right { text-align: right !important; }

.uppercase { text-transform: uppercase; }

.nopadding { padding-top: 0 !important; }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.outer { padding: 0 20px; }

.sizer { position: relative; max-width: 1200px; margin: 0 auto; box-sizing: border-box; z-index: 1; }

#km-ui-text-underline { height: 2px; border-radius: 2px; background: #555; }

/* STRUCTURE, STYLES */
body { background: white; }

#outer-wrapper { min-width: 300px !important; overflow: hidden !important; }

header { display: none; position: fixed; z-index: 10; left: 0; right: 0; height: 70px; box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.15); border-bottom: 1px solid transparent; background: rgba(55, 55, 55, 0.93); border-color: rgba(0, 0, 0, 0.1); }

header .sizer { max-width: none; }

header #layerslider-logo { float: left; transform: translateY(10px); width: 39px; margin: 0 20px 0 30px; }

header .layerslider-logo-layer .layerslider-logo-inner { background: #ccc; }

header .layerslider-logo-layer:nth-child(2) .layerslider-logo-inner { background: #aaa; }

header .layerslider-logo-layer:nth-child(3) .layerslider-logo-inner { background: #888; }

header h1{ height: 70px; float: left; }

header h1 { line-height: 70px; font-family: 'Kaushan Script', sans-serif; font-size: 2.7rem; font-weight: 400; letter-spacing: -1px; color: #555; }

header h2 {vertical-align: bottom;margin-left: 10px;margin-top: 15px; font-family: 'Comfortaa', sans-serif; font-size: 1.61rem;display: block;float: left;color: #9400ff;padding: 7px 10px;background: rgba(255, 255, 255, .7) }

header nav { height: 70px; float: right; line-height: 70px; font-family: Nunito, sans-serif; font-size: 1rem; font-weight: 400; }

header nav > a { position: relative; padding: 10px 15px; color: #fafafa; }

header nav > a.button { font-size: 0.85rem; color: #555; text-transform: uppercase; border: 2px solid #777; margin-left: 15px; margin-right: 20px; }

header nav > a.button:hover { background: #7fb704; color: white; border-color: #7fb704; }

header #mobilemenu { display: none; position: absolute; width: 30px; height: 30px; top: 21px; right: 0; }

header #mobilemenu select { display: block; position: relative; z-index: 2; opacity: 0; width: 100% !important; height: 100% !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; margin: 0; padding: 0; }

header #mobilemenu div { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; }

header #mobilemenu div i { display: block; content: ''; width: 100%; height: 3px; background: rgba(0, 0, 0, 0.5); border-radius: 4px; margin-bottom: 8px; }

#purchase, #purchase-inside-slider { border-radius: 16px; padding: 10px; background-color: #7fb704; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); }

#purchase.km-showme-top .km-arrow, #purchase-inside-slider.km-showme-top .km-arrow { border-top-color: #7fb704; }

#purchase.km-showme-bottom .km-arrow, #purchase-inside-slider.km-showme-bottom .km-arrow { border-bottom-color: #7fb704; }

#purchase.km-showme-left .km-arrow, #purchase-inside-slider.km-showme-left .km-arrow { border-left-color: #7fb704; }

#purchase.km-showme-right .km-arrow, #purchase-inside-slider.km-showme-right .km-arrow { border-right-color: #7fb704; }

#purchase a, #purchase-inside-slider a { display: block; border-radius: 8px; margin: 0 !important; padding: 10px !important; width: 148px; height: 37px; transition: background-color 0.2s ease-in-out; }

#purchase a:hover, #purchase-inside-slider a:hover { background-color: rgba(0, 0, 0, 0.25); }

#purchase a:first-child, #purchase-inside-slider a:first-child { margin-bottom: 10px !important; }

#purchase p, #purchase-inside-slider p { height: 0px; border-bottom: 1px dashed rgba(255, 255, 255, 0.85); margin-bottom: 10px !important; text-align: center; }

#purchase p :before, #purchase-inside-slider p :before { content: "also available on:"; display: inline-block; padding: 0 5px; background: #7fb704; font-size: 0.75rem; color: white; text-align: center; line-height: 21px; height: 21px; position: relative; top: -12px; }

.slider { position: relative; z-index: 5; }

hr { border: 0;margin: 0 }
hr::after { content: '';display: block;filter: hue-rotate(195deg);height: 45px;width: 170px;margin: 0 auto;background: url('../image/component/wave-graph.png') center center no-repeat;background-size: contain;}

main { position: relative; overflow: hidden; z-index: 5; }

main h1, main h2, main h3, main h4, main h5, main p, main ul, main li, main div.inner { font-family: Nunito, sans-serif; }

main h1, main h2, main h3, main p { padding-top: 20px; }

main h1, main h2, main h3 { color: #000; }

main h1 { font-size: 2rem; }

main h2 { font-size: 1.75rem; }

main h3 { font-size: 1.5rem; }

main p { font-size: 1.25rem; font-weight: 300; line-height: 140%; color: #111; }

main #home-why { margin-top: 100px; }

main #home-welcome {background: linear-gradient(to top, #ddd, #fff); }

main #home-welcome2 {
	padding-top: 50px;
	box-shadow: 1px 3px 5px #333;
	background: linear-gradient(124deg, #bc4e12, #db611e, #f76f25);
	background-size: 1800% 1800%;

	-webkit-animation: rainbow 18s ease infinite;
	-z-animation: rainbow 18s ease infinite;
	-o-animation: rainbow 18s ease infinite;
	animation: rainbow 18s ease infinite;
}

main #home-welcome img.img-responsive, main #home-welcome2 img.img-responsive { width: 100%;display: block;margin: 0 auto; }

main #home-welcome h1, main #home-welcome2 h1 { padding: 0; font-family: Lato, sans-serif; font-weight: 700; font-size: 10rem; color: #111; }

main #home-welcome h2, main #home-welcome2 h2 { font-family: 'Kaushan Script', sans-serif; font-size: 2.3rem; font-weight: 200; color: #111; }

main #home-welcome h1, main #home-welcome h2, main #home-welcome2 h1, main #home-welcome2 h2 { text-align: center; }

main #home-welcome p, main #home-welcome2 p { padding-top: 50px; text-align: justify; margin: 0 auto; font-size: 1.25rem; max-width: 900px; color: #111; }

main #home-why .outer { padding: 20px; }

main #home-why .sizer { cursor: pointer; width: 100%; padding: 30px 0; border-radius: 100px; background-image: url('../image/component/bg-gradient.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; transition: all .5s;}

main #home-why .sizer:hover { filter: grayscale(100%); }

main #home-why h2, main #home-why p { color: white; font-weight: 200; }

main #home-why h2 { color: #dedede; padding: 0; font-size: 2rem; }

main #home-why p { color: #dedede; font-size: 1.5rem; }

main #home-features { padding-top: 100px; background: linear-gradient(to bottom, #ddd, #fff);}

main #home-features article { position: relative; text-align: center; padding-bottom: 150px; }

main #home-features article .feature-list-wrapper, main #home-features article .feature-image { display: inline-block; vertical-align: middle; position: relative; width: 45%; }

main #home-features article .feature-list-wrapper .border { position: absolute; width: 5px; background: #e32d00; top: 0; height: 0; opacity: .35; border-radius: 2px; }

main #home-features article .feature-transition-wrapper { position: absolute; visibility: hidden; top: 50%; width: 45%; }

main #home-features article .feature-transition-wrapper .keep-aspect-ratio { width: 100%; position: relative; }

main #home-features article .feature-transition-wrapper .keep-aspect-ratio .feature-transition { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

main #home-features article#feature-animations .feature-image { width: 35%; padding-right: 10%; }

main #home-features article#feature-optimization .feature-image, main #home-features article#feature-optimization .feature-transition-wrapper { min-width: 500px;width: 95%; padding-right: 20%; }

main #home-features article#feature-optimization .feature-transition-wrapper { left: 55%; }

main #home-features article#feature-optimization .feature-transition-wrapper .keep-aspect-ratio { padding-top: 141.4%; }

main #home-features article#feature-optimization .feature-transition-wrapper ul { position: absolute; left: 20%; right: 20%; top: 20%; bottom: 20%; }

main #home-features article#feature-optimization .feature-transition-wrapper ul li { position: relative; float: left; width: 10%; height: 100%; margin: 0 5%; }

main #home-features article#feature-optimization .feature-transition-wrapper ul li div { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 0%; background: #7fb704; border-radius: 2px; }

main #home-features article#feature-optimization.from-right .feature-image, main #home-features article#feature-optimization.from-right .feature-transition-wrapper { width: 25%; padding-left: 20%; padding-right: 0; }

main #home-features article#feature-optimization.from-right .feature-transition-wrapper { left: 0; padding-left: 15%; padding-right: 0; }

main #home-features article#feature-support .feature-image, main #home-features article#feature-support .feature-transition-wrapper { width: 25%; }

main #home-features article#feature-support .feature-image { padding: 0 15% 0 5%; }

main #home-features article#feature-support .feature-transition-wrapper { padding-right: 20%; left: 55%; z-index: -1; }

main #home-features article#feature-support .feature-transition-wrapper .keep-aspect-ratio { padding-top: 120.2%; }

main #home-features article#feature-support .feature-transition-wrapper p { width: 28%; position: absolute; border-radius: 50px; padding: 0 !important; left: 100%; top: 44%; opacity: 0; }

main #home-features article#feature-support .feature-transition-wrapper p:before { content: ''; display: block; width: 100%; padding-bottom: 100%; }

main #home-features article#feature-support .feature-transition-wrapper p:after { content: '?'; color: #111; font-size: 360%; font-weight: 800; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: inherit; text-align: center; }

main #home-features article#feature-support .feature-transition-wrapper p:first-child { width: 33%; left: 0; top: 0; }

main #home-features article#feature-support .feature-transition-wrapper p:last-child { width: 24%; top: auto; bottom: 0; left: 6%; }

main #home-features article#feature-support.from-right .feature-image, main #home-features article#feature-support.from-right .feature-transition-wrapper { width: 25%; }

main #home-features article#feature-support.from-right .feature-image { padding: 0 5% 0 15%; }

main #home-features article#feature-support.from-right .feature-transition-wrapper { padding-left: 5%; left: 0; }

main #home-features article#feature-templates .feature-image { border-radius: 5px; } 

main #home-features article#feature-templates .feature-transition-wrapper { left: 55%; }

main #home-features article#feature-templates .feature-transition-wrapper .keep-aspect-ratio { padding-top: 56.25%; }

main #home-features article#feature-templates .feature-transition-wrapper img { position: absolute; left: 0; top: 0; width: 100%; border-radius: 5px; visibility: hidden; }

main #home-features article#feature-dynamic .feature-image { width: 25%; }

main #home-features article#feature-dynamic .feature-image { padding: 0 15% 0 5%; }

main #home-features article#feature-dynamic.from-right .feature-image { padding: 0 5% 0 15%; margin-left: 5%; margin-right: 0; }

main #home-features article.from-left > div { margin-right: 5%; }

main #home-features article.from-left > img { margin-left: 5%; }

main #home-features article.from-left .border { right: -5%; }

main #home-features article.from-right > div { margin-left: 5%; }

main #home-features article.from-right > img { margin-right: 5%; }

main #home-features article.from-right .border { left: -5%; }

main #home-features article h3 { text-transform: uppercase; letter-spacing: -1px; font-size: 1.75rem; padding-top: 0; color: #e32d00; }

main #home-features article h4 { font-size: 1.5rem; font-weight: 200; margin-top: -5px; color: #111; }

main #home-features article h5 { text-transform: uppercase; padding-top: 10px; font-size: 1rem; color: #dda413; }

main #home-features article ul, main #home-features article li { font-weight: 200; font-size: 1rem; color: #111; }

main #home-features article.red h3 { color: #e32d00; }

main #home-features article.red .border, main #home-features article.red .feature-transition-wrapper p { background: #e32d00; }

main #home-features article.purple h3 { color: #780064; }

main #home-features article.purple .border, main #home-features article.purple .feature-transition-wrapper p { background: #780064; }

main #home-features article.green h3 { color: #7fb704; }

main #home-features article.green .border, main #home-features article.green .feature-transition-wrapper p { background: #7fb704; }

main #home-features article.blue h3 { color: #008cb8; }

main #home-features article.blue .border, main #home-features article.blue .feature-transition-wrapper p { background: #008cb8; }

main #home-features article.orange h3 { color: #ff6232; }

main #home-features article.orange .border, main #home-features article.orange .feature-transition-wrapper p { background: #ff6232; }

main #home-features article.yellow h3 { color: #e2b21e; }

main #home-features article.yellow .border, main #home-features article.yellow .feature-transition-wrapper p { background: #e2b21e; }

main#single { padding-top: 71px; padding-bottom: 30px; color: #333; font-size: 1.25rem; }

main#single .inner { margin: 0 auto; padding: 0 20px; font-weight: 200; max-width: 800px; }

main#single h1 { padding: 0; margin: 50px 0 30px 0; }

main#single p { padding: 0; margin-top: 20px; font-size: inherit !important; color: #111 !important; }

main#single .image-holder { margin: 30px 0; text-align: center; }

main#single .image-holder img { border-radius: 10px; max-width: 100% !important; height: auto !important; }

main#single .image-holder img.jellyfish { background: #080d2d; }

main #documentation { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; padding-top: 71px; background: white; }

main #documentation footer { display: none !important; }

main #documentation iframe { display: block !important; width: 100% !important; height: 100% !important; }

main .nojquery { font-size: 1rem; padding-bottom: 10px; }

footer { position: relative; z-index: 1; font-family: Nunito, sans-serif; font-size: 1rem; font-weight: 400; color: white; }

footer #buynow { padding: 30px 0; background: #bc4e12; text-align: center; font-size: 2em; color: #fefefe; }

footer #buynow p { padding: 0 0 5px 0; color: #fefefe; }

footer #buynow p span { font-family: 'Kaushan Script';font-size:1.4em;white-space: nowrap; }

footer #buynow .button { display: block;font-family: 'Kaushan Script';font-size: .7em; background: transparent; color: inherit; text-transform: uppercase; border: 2px solid white;border-radius: 17px; padding: 5px 30px; margin: 10px auto; max-width: 370px; outline: 0; line-height: 47px; }

footer #buynow .button:hover { border-color: white; background: white; color: #008cb8; }

footer #footer { background: linear-gradient(to top, #ededed, #fff); box-shadow: 5px 5px 10px rgba(9, 9, 9) }

footer #footer .inner > div { float: left; font-weight: 200 !important; padding: 20px 0; }

footer #footer .inner > div ul, footer #footer .inner > div li { font-weight: inherit !important; }

footer #footer .inner > div h3 { font-family: 'Kaushan Script';font-size:2em !important;padding-bottom: 20px; color: #111; }

footer #footer .inner > div li a { color: #111; }

footer #footer .inner > div li a:hover { color: white; }

footer #cellar { background: #fff;box-shadow: 1px 0px 10px #555 }

footer #cellar .sizer { max-width: none	!important;}

footer #cellar .sizer .inner div {text-transform: lowercase; padding: 17px 0; color: #000; font-size: 0.95em; font-weight: 200; }
footer #cellar .sizer .inner div a {text-transform: capitalize; font-weight: 700; color: #111; text-decoration: none;}

/* SLIDERS */
#exploresliders { margin: 0 auto; padding-bottom: 50px; }

#exploresliders h2 { padding-top: 30px; font-size: 1.5rem; }

#exploresliders h2.highlight { font-size: 2.8rem; }

#exploresliders h2 span { color: #aaa; font-weight: 300; }

#exploresliders h2 span:before { content: '|'; padding: 0 20px; }

#exploresliders h2 span b { font-family: Lato; color: #e32d00; opacity: .75; font-weight: 700; }

#exploresliders h2.uppercase { padding-top: 50px; }

#exploresliders h3 { border-top: 1px solid #aaa; margin-top: 20px; padding-top: 20px; font-size: 1.25rem; text-align: center; }

#exploresliders p { font-size: 1rem; padding-top: 20px; }

#exploresliders p a { color: #008cb8; font-weight: 500; }

#exploresliders p a:hover { color: #ff6232; }

#exploresliders button { cursor: pointer; text-align: center; font-weight: 400; font-style: normal; text-decoration: none; line-height: 40px; font-family: Nunito; font-size: 20px; padding: 5px 40px; border: 0; border-radius: 100px; background: #008cb8; color: white; margin: 20px 0 0 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; }

#exploresliders button:focus { outline: none; }

#exploresliders .center { padding: 100px 0; }

#exploresliders .center h2 { padding: 0; }

#exploresliders .center button { margin: 100px 0 0 0; }

#exploresliders #qrcode { margin: 20px auto 0 auto; opacity: .65; width: 150px; height: 150px; }

#exploresliders .slider { margin-top: 71px; }

#exploresliders .ls-responsive { margin-top: 121px !important; }

#exploresliders .margin-bottom { margin-bottom: 100px !important; }

#exploresliders .image-holder { padding-top: 20px; }

#exploresliders .image-holder img { opacity: .5; max-width: 100% !important; transition: opacity 0.3s ease-in-out; }

#exploresliders .image-holder img:hover { opacity: 1; }

/* FEATURES */
#features-hero { background: white; }

#explore-feature .inner { padding-bottom: 75px; }

#explore-feature .content { margin-top: 0; }

#explore-feature h2 { color:#333;font-family: 'Kaushan Script';font-size: 4rem;font-weight: 500;text-align: center; padding: 50px 0 20px 0; }

#explore-feature h2 i { display: block; font-style: normal; font-size: 1.5rem; color: #777; margin-top: -3px; font-weight: 300; }

#explore-feature p, #explore-feature .video-container, #explore-feature .image-container { width: 100%; max-width: 1000px !important; margin: 0 auto; font-size: 1.25rem; text-align: justify; }

#explore-feature p { padding-top: 30px; }

#explore-feature .video-container, #explore-feature .image-container { margin-top: 50px; padding: 10px; box-sizing: border-box !important; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3); }

#explore-feature video.fitwidth, #explore-feature img.fitwidth { width: 100% !important; height: auto !important; }

#explore-feature .video-container, #explore-feature .image-container, #explore-feature video.fitwidth, #explore-feature img.fitwidth { border-radius: 5px !important; }

.koleksi_detail img{
	position: relative;
	display: block;
	width: 100%
}

.koleksi_detail .content h3{
	color: #101010;
	font-family: 'Comfortaa';
}

.koleksi_detail .content p{
	color: #101010;
}

.koleksi_detail .content .sharelink{
	margin: 20px 0;
	padding: 10px 0;
	display: block;
	clear: both;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}

.filter-space{
	font-size: 1.3em;
	margin: 20px auto;
	text-align: center;
}

.filter-space a.filter-button{
	background: linear-gradient(#efefef, #ececec);
	border: 1px solid #bbb;
	border-bottom: 5px solid #353434;
	border-radius: 5px;
	padding: 10px 15px;
	text-decoration: none;
	margin: 5px;
	transition: all .5s;
	color: #bc4e12;
}
.filter-space a.filter-button.active,
.filter-space a.filter-button:active,
.filter-space a.filter-button:focus,
.filter-space a.filter-button:hover{
	background: linear-gradient(124deg, #bc4e12, #db611e, #f76f25);
	background-size: 1800% 1800%;
	outline: 0;
	-webkit-animation: rainbow 15s ease infinite;
	-z-animation: rainbow 15s ease infinite;
	-o-animation: rainbow 15s ease infinite;
	animation: rainbow 15s ease infinite;
	color: #fff;
}


/* THEMES */
.dark-theme { background: rgb(9, 9, 9); }

.dark-theme #explore-feature h2 { color: white; }

.dark-theme #explore-feature h2 i, .dark-theme #explore-feature p, .dark-theme #explore-feature p a, .dark-theme #explore-feature .video-container, .dark-theme #explore-feature .image-container { color: rgba(255, 255, 255, 0.7); }

.dark-theme #explore-feature .video-container, .dark-theme #explore-feature .image-container { box-shadow: none; padding: 0; }

.dark-theme #explore-feature p a { border-bottom: 1px solid rgba(255, 255, 255, 0.7); transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; }

.dark-theme #explore-feature p a:hover { color: white; border-color: white; }

.dark-theme footer { color: rgba(255, 255, 255, 0.75); }

.dark-theme #buynow { background: rgba(255, 255, 255, 0.2); }

.dark-theme #buynow .button { border-color: rgba(255, 255, 255, 0.75); }

.dark-theme #footer { background: rgba(255, 255, 255, 0.1); }

.dark-theme #footer .inner > div h3 { color: rgba(255, 255, 255, 0.75); }

.dark-theme #footer .inner > div a { color: rgba(255, 255, 255, 0.7); }

.dark-theme #footer .inner > div a:hover { color: white !important; }

.dark-theme #cellar { background: none; }

.dark-theme header, .dark-menu header { height: 100px; box-shadow: none; background: transparent; border-color: transparent; }

.dark-theme header #layerslider-logo, .dark-menu header #layerslider-logo { transform: translateY(24px); }

.dark-theme header h1, .dark-theme header h2, .dark-theme header nav, .dark-menu header h1, .dark-menu header h2, .dark-menu header nav { transform: translateY(14px); }

.dark-theme header h1, .dark-menu header h1 { color: #ddd; }

.dark-theme header nav a, .dark-menu header nav a { color: #ddd; }

.dark-theme header nav a, .dark-menu header nav a:hover { color: #fff; }

.dark-theme header nav a.button, .dark-menu header nav a.button { background: transparent; color: #f9be0c; border-color: rgba(255, 255, 255, 0.75); }

.dark-theme header nav a.button:hover, .dark-menu header nav a.button:hover { background: #7fb704; color: white; border-color: #7fb704; }

.dark-theme header #mobilemenu, .dark-menu header #mobilemenu { top: 36px !important; }

.dark-theme header #mobilemenu div i, .dark-menu header #mobilemenu div i { background: rgba(255, 255, 255, 0.5); }

.dark-theme #km-ui-text-underline, .dark-menu #km-ui-text-underline { background: #ddd; }

.dark-theme .layerslider-logo-layer .layerslider-logo-inner, .dark-menu .layerslider-logo-layer .layerslider-logo-inner { background: #e6e8e9 !important; }

.dark-theme .layerslider-logo-layer:nth-child(2) .layerslider-logo-inner, .dark-menu .layerslider-logo-layer:nth-child(2) .layerslider-logo-inner { background: #b4b9bc !important; }

.dark-theme .layerslider-logo-layer:nth-child(3) .layerslider-logo-inner, .dark-menu .layerslider-logo-layer:nth-child(3) .layerslider-logo-inner { background: #81898f !important; }

.features-theme header { background: rgba(3, 19, 31, 0.75); }

.features-theme header nav a.button:hover { background: #7f6df0; border-color: #7f6df0; }

.features-theme header h2, .features-theme #buynow .button:hover { color: #dc40b5; }

.features-theme #purchase { background: #7f6df0; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); }

.features-theme #purchase.km-showme-top .km-arrow { border-top-color: #7f6df0; }

.features-theme #purchase.km-showme-bottom .km-arrow { border-bottom-color: #7f6df0; }

.features-theme #purchase.km-showme-left .km-arrow { border-left-color: #7f6df0; }

.features-theme #purchase.km-showme-right .km-arrow { border-right-color: #7f6df0; }

.features-theme #purchase a:hover { background-color: rgba(0, 0, 0, 0.25); }

.features-theme #purchase p { border-bottom: 1px dashed rgba(255, 255, 255, 0.85); }

.features-theme #purchase p :before { background: #7fb704; }

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

/* TRANSITIONS */
header, header .inner > a *, footer * { transition: all .5s ease-in-out; }

/* RESPONSIVE FONTS */
@media screen and (max-width: 848px) { header nav { display: none !important; }
  #mobilemenu { display: block !important; } }

@media screen and (max-width: 767px) { html { font-size: 12px; }
  #home-why { margin-top: 50px !important; }
  #home-why .outer { padding: 0 !important; }
  #home-why .sizer { border-radius: 0 !important; padding-left: 20px !important; padding-rigth: 20px !important; }
  #home-features article { padding-bottom: 100px !important; text-align: center !important; }
  #home-features article .feature-image, #home-features article .feature-transition-wrapper { display: none !important; }
  #home-features article .border { display: none; }
  #home-features article .feature-list-wrapper { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  #home-features article:first-child { padding-top: 20px !important; }
  #home-features article:last-child { padding-bottom: 50px !important; } }

@media screen and (max-width: 1000px) { html { font-size: 14px; }
  #layerslider-logo { display: none; }
  header nav a { padding: 10px; }
  header nav a.button { margin-left: 10px; margin-right: 0; } }

@media screen and (min-width: 900px) and (max-width: 1024px) { html { font-size: 15px; } }