/*
Theme Name: Theme Toko Hompimpa
Theme URI: https://www.tokohompimpa.com/
Author: Rendy Setiotomo
Author URI: https://goproject.site/
Description: Theme for Toko Hompimpa
Version: 1.0
License: Commercial
License URI: https://goproject.site/
Tags: white, Blue, Purple, Pink, Orange, Yellow
Text Domain: Toko Hompimpa
*/

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus { outline: 0; }
body { background: #fff; line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
del { color: #333; }
ins { background: #fff9c0; text-decoration: none; }
hr { background-color: #ccc; border: 0; height: 1px; margin: 24px; margin-bottom: 1.714285714rem; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
small { font-size: smaller; }
img { border: 0; -ms-interpolation-mode: bicubic; }


/* GENERAL */
body {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 14px;
	color: #363636;
	background: #ffffff;
}
a { text-decoration: none;
    cursor: pointer; transition: 0.4s ease; -webkit-transition: 0.4s ease; -o-transition: 0.4s ease; -moz-transition: 0.4s ease;
}
a:hover { text-decoration: underline; color: #000; }
sup { font-size: 60%; }
strong { font-weight: bold; }
em { font-style: italic; }
.clear { clear: both; }
small { font-size: 12px; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
img { border: 0; -ms-interpolation-mode: bicubic; }
.floatright { float: right; }
.floatleft { float: left; }
.floatnone { float: none; }

/* GENERAL */
.wrapper { position: relative; width: 100%; margin: 0 auto; }
.wrap { position: relative; width: 1200px; margin: 0 auto; }
.wrap-content { position: relative; display: block; }
.wrap-content .wrap { position: relative; padding: 10px 0px 15px; }
.wrapper-grey { background: #fff; }

.thecontent h1 { font-family: 'Roboto', sans-serif; font-size: 32px; line-height: 40px; font-weight: bold; color:#f77b03; margin-bottom: 20px; font-style: italic; }
.thecontent h2 { font-family: 'Roboto', sans-serif; font-size: 24px; line-height: 20px; font-weight: bold; color:#f77b03; margin-bottom: 15px; }
.thecontent h3 { font-family: 'Roboto', sans-serif; font-size: 22px; line-height: 28px; margin-bottom: 15px; color:#000000; font-weight: bold; }
.thecontent h4 { font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 15px; color:#000000; }
.thecontent h5 { font-family: 'Roboto', sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 15px; color:#000000;  }
.thecontent h6 { font-family: 'Roboto', sans-serif; font-size: 12px; line-height: 20px; margin-bottom: 15px; color:#000000; }
.thecontent p { font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 15px; color:#000000; }
.thecontent a { font-family: 'Roboto', sans-serif; color: #f8ad40; font-size: 16px; cursor: pointer; font-style: italic; font-weight: bold; }
.thecontent a:hover { color: #006838; text-decoration: underline; }
.thecontent img { max-width: 100%; height: auto; }
.thecontent img, .thecontent img.alignleft {float: left; display: block; margin: 0px 30px 17px 0px; }
.thecontent img.aligncenter {float: none; margin: 0 auto 17px;  }
.thecontent img.alignright { float: right; margin: 0px 0px 17px 30px;}
.thecontent ul { list-style: upper-alpha; margin-bottom: 15px; padding-left: 40px; }
.thecontent ol { list-style: decimal; margin-bottom: 15px; padding-left: 40px; }
.thecontent ul li, .thecontent ol li { font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 20px; color:#000000; padding-left: 8px; }

.wp-pagenavi { font-family: 'SFProDisplay', sans-serif; display: block; position: relative; margin: 30px auto 20px; font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: bold; text-align: center; padding: 0px !important; }
.wp-pagenavi, .wp-pagenavi a { font-family: 'SFProDisplay', sans-serif; color: #f77b03; border: 0px; font-style: normal; font-weight: normal; font-size: 14px; padding: 10px 17px; }
.wp-pagenavi a:hover { background: #ec0a78; color: #fff; text-decoration: none; }
.wp-pagenavi span.current { background: #f77b03; color: #fff; border: 0px; padding: 10px 17px; }
.wp-pagenavi span.pages { background: #f77b03; color: #fff; border: 0px; padding: 10px 17px; }

/* HEADER */
.head-top { padding: 25px 25px 35px; text-align: center; }
.header #logoweb { display: inline-block; vertical-align: middle; float: left; max-width: 300px; height: auto; }
.header #logoweb img { max-width: 100%; height: auto; }
.hashtags-title { font-size: 30px; font-weight: bold; width: 500px; text-align: center; display: inline-block; margin: 15px auto 0px; vertical-align: middle; }
.hashtags-title a { color: #000000;}
.hashtags-title a:hover{ text-decoration: none !important; color: #000000; }
.icon-sosmed { position: relative; display: inline-block; vertical-align: middle; float: right; text-align: left; margin-top: 15px; }
.icon-sosmed span {  font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: bold; color: #006c38; display: block; margin-bottom: 10px; }
.icon-sosmed a { color: #ffffff; background: #f77b03; border-radius: 10px; font-size: 20px; width: 42px; height: 42px; position: relative; display: inline-block; margin-left: 10px; }
.icon-sosmed a i.fa,
.icon-sosmed a i.fab { position: absolute; width: 20px; height: 20px; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; }
.icon-sosmed a i.fa-rss { font-size: 22px; width: 17px; height: 22px; }
.icon-sosmed a:hover { background: #ec0a77; color: #fff; }
.fa-instagram:before,
.fa-facebook-f:before, 
.fa-facebook:before { margin-left: 2px; }
.fa-facebook-f:before, .fa-facebook:before { content: "\f39e"; }
.box-search { position: relative; width: calc(100% - 600px); display: block; margin: 15px auto 0px 330px; max-width: 650px; }
#searchform { position: relative; display: block; width: 100%; }
.searchform { position: relative; display: block; }
.searchform:after { font-family: FontAwesome; content: "\f002"; font-size: 18px; color: #808080; width: 18px; height: 18px; position: absolute; top: 0px; bottom: 0px; left: 12px; margin: auto; padding: 3px; border-radius: 50%; }
.searchform .text { font-size: 16px; padding: 14px 18px 14px 40px; border-radius: 8px; width: calc(100% - 60px); box-shadow: none; border: 0px; background: #f3f3f4; color: #888888; 
	transition: 0.4s ease; -webkit-transition: 0.4s ease; -o-transition: 0.4s ease; -moz-transition: 0.4s ease; }
.searchform .text:active, .searchform .text:focus { background: #f5f5f5; }
.searchform input[type="submit"] { position: absolute; left: 6px; top: 0px; height: 48px; z-index: 5; background: transparent; color: transparent; border: none; cursor: pointer; }

.wrap-header-tags { position: relative; display: block; margin: 10px 0px 25px; }
.wrap-header-tags span { width: 120px; display: inline-block; font-size: 20px; font-weight: bold; line-height: 30px; color: #147448; padding: 7px 0px; }
.list-tags { width: calc(100% - 125px); display: block; float: right; text-align: right; white-space: nowrap; overflow: auto; padding-bottom: 2px; }
.list-tags a { font-size: 18px; font-weight: bold; line-height: 25px; background: #006838; color: #fff;  padding: 10px 20px; border-radius: 8px; display: inline-block; margin-left: 5px;}
.list-tags a:hover { text-decoration: none; color: #444142; background: #ced0d1; }

.wrap-header-tags.tag-grey { margin-bottom: 35px; }
.wrap-header-tags.tag-grey a { background: #c9cace; color: #3e3e40; }
.wrap-header-tags.tag-grey a:hover { background: #006838; color: #fff; }

.wrapsidebar { position: relative; display: inline-block; width: 380px; float: left; }
.menu-primary { position: relative; display: inline-block; width: 100%; margin-bottom: 25px; }
.menu-primary .main-menu { position: relative; display: block; width: 100%; text-align: center; background: #ec0a78; }
.main-menu li { position: relative; display: inline-block; }
.main-menu li a { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: bold; line-height: 14px; color: #ffffff; padding: 16px 30px; display: block; }
.main-menu li.current-menu-item a { color: #F7B509; text-decoration: none; }
.main-menu li a:hover { color: #F7B509;  text-decoration: none; }
.main-menu li.menu-item-has-children { padding-right: 5px; }
.main-menu li.menu-item-has-children > a:after { font-family: FontAwesome; content: "\f0d7"; font-size: 20px; color: #ffffff; width: 25px; height: 25px; position: absolute; right: 0px; top: 8px; bottom: 0px; margin: auto; cursor: pointer; 
	transition: 0.4s ease; -webkit-transition: 0.4s ease; -o-transition: 0.4s ease; -moz-transition: 0.4s ease; }
.main-menu li.menu-item-has-children > a:hover:after { color: ##F7B509; }
.main-menu ul li ul { display: none; position: absolute; z-index: 10; background: #eeeeee; 
	transition: 0.4s ease; -webkit-transition: 0.4s ease; -o-transition: 0.4s ease; -moz-transition: 0.4s ease; }
.main-menu ul li:hover ul { display: block;
	transition: 0.4s ease; -webkit-transition: 0.4s ease; -o-transition: 0.4s ease; -moz-transition: 0.4s ease; }
.main-menu ul ul > li a { display: block; width: 150px; }
.main-menu li.current-menu-ancestor > a { color: #F7B509; text-decoration: none; }
.main-menu li.current-menu-ancestor > a:after { color: #F7B509; }
.main-menu > ul ul > li { text-align: left; }
.main-menu ul ul > li a:hover { color: #fff; }
.main-menu > ul ul > li:nth-child(1) { background-color: #F7B509; }
.main-menu > ul ul > li:nth-child(2) { background-color: #43E5FF; }
.main-menu > ul ul > li:nth-child(3) { background-color: #F453A7; }

/* Last End Menu - Cart 
.main-menu > ul > li:last-child { padding-left: 0px; margin-left: 15px; }
.main-menu > ul > li:last-child > a:before { font-family: FontAwesome; content: "\f07a"; font-size: 24px; color: #006838; width: 24px; height: 24px; position: absolute; left: 0px; top: 8px; bottom: 0px; margin: auto; cursor: pointer; 
	transition: 0.4s ease; -webkit-transition: 0.4s ease; -o-transition: 0.4s ease; -moz-transition: 0.4s ease; }
.main-menu > ul > li:last-child > a:hover:before { color: #f57d02; }
.main-menu > ul > li.current-menu-item:last-child > a:before { color: #f57d02; }
*/

/* Footer */
.foo-cs { position: relative; display: block; padding: 40px 0px 30px; margin-bottom: 45px; border-top: 2px solid #f77b03; border-bottom: 2px solid #f77b03; }
.foo-cs h2 { font-size: 30px; line-height: 38px; font-weight: bold; text-align: center; display: block; margin: 0px auto 35px; }
.foo-cs .box-csbtn { display: block; margin: 0px auto 35px; }
.foo-cs .col-3 { width: calc(33.3% - 30px); margin: 0px auto; display: inline-block; text-align: center; }
.foo-cs .cs-btn { position: relative; display: inline-block; padding: 7px 18px; font-size: 14px; font-weight: bold; color: #fff; border-radius: 8px; cursor: pointer; }
.foo-cs .cs-btn .fa, .foo-cs .cs-btn .fab, 
.foo-cs .cs-btn .fad, .foo-cs .cs-btn .fal, 
.foo-cs .cs-btn .far, .foo-cs .cs-btn .fas { font-size: 22px; line-height: 22px; vertical-align: middle; margin-right: 5px; }
.foo-cs .cs-btn.wa { background: #39b54a; }
.foo-cs .cs-btn.mail { background: #ec0a77; }
.foo-cs .cs-btn.webchat { background: #2366bc; }
.foo-cs span, .foo-cs p { font-size: 16px; line-height: 22px; text-align: center !important; }
.foo-subs { position: relative; display: block; }
.foo-subs .subs-title { font-size: 35px; line-height: 35px; font-weight: bold; color: #fff; background: #f77b03; text-align: center; display: block; margin: 0px auto 30px; padding: 8px 0px; }
.foo-subs > span { font-size: 20px; line-height: 24px; text-align: center; max-width: 1000px; display: block; margin: 0px auto 30px; }
.foo-subs .es-field-wrap { display: inline-block; width: calc(100% - 270px);}
.foo-subs input[type="email"] { font-size: 16px; padding: 14px 18px; border-radius: 8px; width: calc(100% - 30px); box-shadow: none; border: 0px; background: #f3f3f4; color: #888888; 
	transition: 0.4s ease; -webkit-transition: 0.4s ease; -o-transition: 0.4s ease; -moz-transition: 0.4s ease; }
.foo-subs input[type="email"]:active, .foo-subs input[type="email"]:focus { background: #f5f5f5; }
.foo-subs input[type="submit"] { position: relative; display: inline-block; width: 200px; height: 46px; font-size: 14px; font-weight: bold; color: #fff; background: #23c3ff; border: 1px; border-radius: 8px; cursor: pointer; float: right; }
.foo-subs span.es_spinner_image { margin: 7px 10px 7px 0px; width: 25px; }
.foo-subs span.es_spinner_image img { width: 100%; height: auto;}
.subs-form { position: relative; display: block; width: 100%; margin: 0px auto 20px; }

.foo-menu { position: relative; width: 100%; background: #ec0a78; padding: 60px 0px; }
.foomenu-title { font-size: 20px; line-height: 26px; color: #fff; font-weight: bold; margin-bottom: 15px; }
.cols-4 { width: calc(25% - 20px); margin-right: 25px; display: block; float: left; }
.cols-4:nth-child(4) { margin-right: 0px; }
.foo-menu .menu a { font-size: 16px; line-height: 22px; color: #FFEE00; }
.foo-menu .menu a:hover { color: #fff; text-decoration: none; }
.foo-menu .menu li { margin-bottom: 5px; }
.foo-menu .icon-sosmed { float: none; margin-top: 0px; }
.foo-menu .icon-sosmed a { color: #ec0a78; background: #ffffff; width: 38px; height: 38px; }
.foo-menu .icon-sosmed a:hover { background: #f77b03; color: #ffffff; }
.foo-menu .fa-instagram:before, .foo-menu .fa-facebook-f:before, .foo-menu .fa-facebook:before { margin-left: 1px; }

/* HOME PAGE */
.container-tabs { position: relative; width: 100%; margin: 0px auto; }
.container-tabs ul { padding: 20px 0px 15px; border-top: 2px solid #f77b03; border-bottom: 2px solid #f77b03; margin-bottom: 20px; }
.container-tabs ul li { width: calc(25% - 22px); display: inline-block; padding: 0px 8px; margin: 0px auto; text-align: center; }
.container-tabs ul li a { font-size: 18px; color: #ec0a78; }
.container-tabs ul li a:hover { color: #2366bc; text-decoration: none; }
.container-tabs ul li.ui-tabs-active a { color: #2366bc; text-decoration: none; }
.wrap-tabs-panel { position: relative; margin-bottom: 55px; 
	transition: 0.4s ease; 
	-webkit-transition: 0.4s ease; 
	-o-transition: 0.4s ease; 
	-moz-transition: 0.4s ease;
}
a.allkonten_tabs { font-size: 18px; color:#2366bc; position: absolute; bottom: -16px; left: 0px; right: 0px; margin: auto; text-align: center;} 
a.allkonten_tabs:hover { text-decoration: none; }

.list-box-product { width: calc(25% - 52px); margin: 0px 24px 35px; display: inline-block; }
.lb-product-img { position: relative; display: block; }
/* .product-1, .product-2, .product-3, .product-4,
.product-9, .product-10, .product-11, .product-12, */
.list-box-product:nth-child(1)  .lb-product-img,
.list-box-product:nth-child(2)  .lb-product-img,
.list-box-product:nth-child(3)  .lb-product-img,
.list-box-product:nth-child(4)  .lb-product-img,
.list-box-product:nth-child(9)  .lb-product-img,
.list-box-product:nth-child(10) .lb-product-img,
.list-box-product:nth-child(11) .lb-product-img,
.list-box-product:nth-child(12) .lb-product-img,
li:nth-child(1) .product-dyn, 
li:nth-child(2) .product-dyn, 
li:nth-child(3) .product-dyn, 
li:nth-child(4) .product-dyn,
li:nth-child(9) .product-dyn, 
li:nth-child(10) .product-dyn, 
li:nth-child(11) .product-dyn, 
li:nth-child(12) .product-dyn
	 { background-color: #d1eefc; }
/* .product-5, .product-6, .product-7, .product-8,
.product-13, .product-14, .product-15, .product-16, */
.list-box-product:nth-child(5)  .lb-product-img,
.list-box-product:nth-child(6)  .lb-product-img,
.list-box-product:nth-child(7)  .lb-product-img,
.list-box-product:nth-child(8)  .lb-product-img,
.list-box-product:nth-child(13) .lb-product-img,
.list-box-product:nth-child(14) .lb-product-img,
.list-box-product:nth-child(15) .lb-product-img,
.list-box-product:nth-child(16) .lb-product-img,
li:nth-child(5) .product-dyn, 
li:nth-child(6) .product-dyn, 
li:nth-child(7) .product-dyn, 
li:nth-child(8) .product-dyn,
li:nth-child(13) .product-dyn, 
li:nth-child(14) .product-dyn, 
li:nth-child(15) .product-dyn, 
li:nth-child(16) .product-dyn
	{ background-color: #fde9f2; }
.lb-product-img img { width: 180px; margin: 0 auto; display: block; padding: 50px 0px; float: none;  transition: transform .2s; }
.lb-product-img img:hover { transform: scale(1.1); }
.lb-product-btn { display: inline-block; padding: 12px 35px; background: #f9b506; border-radius: 8px; font-size: 18px !important; color: #ffff !important; font-style: normal  !important; font-weight: normal !important; margin: 10px 0px; }
.lb-product-btn:hover { background: #ec0a78 !important; text-decoration: none !important; }

.wrap-slide-post { position: relative; width: 100%; display: block; }
.slide-post { position: relative; width: 100%; display: block; }
.slide-post .div-img { width: 500px; margin-right: 50px; display: inline-block; }
.slide-post .div-img img { max-width: 100%; height: auto; }
.slide-post .div-content { width: calc(100% - 550px); float: right; display: inline-block; }
.slide-post .div-content a { color: #000; }
.slide-post .div-content a:hover { text-decoration: none; }
.slide-post .div-content h3 { font-size: 30px; line-height: 40px; font-weight: bold; color: #000; margin-bottom: 30px; }
.slide-post .div-content p { font-size: 20px; line-height: 30px; margin-bottom: 30px; }
.slide-post .div-content .btnlinkpost { font-size: 16px; padding: 10px 25px; color: #fff; background: #23c3ff; border-radius: 8px; display: inline-block; }
.slick-dotted.slick-slider { margin-bottom: 45px; }
.slick-dots { bottom: -35px; }
.slick-dots li button:before { font-size: 12px; }

.wrap-form { position: relative; display: block; width: calc(100% - 35px); max-width: 500px; font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 22px; margin: 0px auto; color: #000000; padding: 20px 15px; border: 1px solid silver; border-radius: 8px;}
.wrap-form h3 { font-size: 22px; line-height: 30px; text-align: center; margin-bottom: 20px; }
.wrap-form .form-container { margin-bottom: 15px; display: block;}
.wrap-form .form-container.btnsubmit { position: relative; }
.wrap-form label { width: 140px; display: inline-block; }
.wrap-form input[type="text"] { width: calc(100% - 175px); padding: 8px 12px; font-size: 16px; border: 1px solid #c0c0c0; border-radius: 5px; }
.wrap-form input[type="submit"] { width: 180px; height: 40px; font-size: 16px; background: #23c3ff; color: #fff; font-weight: bold; text-align: center; border: 0px; border-radius: 8px; cursor: pointer; margin-top: 10px; }
.conloadercon { position: absolute; display: none; top: 12px; left: 200px; }
.notifno{
	text-align:center;
	color:#ffffff;
	background:#cd0000;
	font-size:13px;
	line-height: 17px;
	padding:10px 5px;
	font-weight:700;
}
.notifyes{
	text-align:center;
	color:#ffffff;
	background:#f48635;
	font-size:13px;
	line-height: 17px;
	padding:10px 5px;
	font-weight:700;
}

/* Single Post */
.single_content { position: relative; display: block; width: 100%; margin-bottom: 35px; }
.title-single { text-align: center; margin-bottom: 20px; }
.singlepost-content { text-align: left; }
.single-thumb { position: relative; display: block; margin: 0px auto 15px; }
.single-thumb img { float: none; width: 100%; height: auto; }
.tagline-single { font-size: 16px; line-height: 22px; font-style: italic; text-align: center; display: block; margin-bottom: 20px; }
.tag-date.singlepage { width: 100%; display: block; text-align: center; margin-bottom: 20px; }
.tag-date.singlepage span { padding: 8px 10px; border-radius: 5px; background: #c9cace; margin: 0px 5px 10px; font-weight: normal; display: inline-block; }
.tag-date.singlepage span a { font-weight: normal; color: #000000; }
.tag-date.singlepage span a:hover { color: #000000; text-decoration: none; }

.info_post { position: relative; display: block; margin-bottom: 15px; }
.info_post p { margin-bottom: 0px; color: grey; font-size: 12px; line-height: 16px; font-style: italic; }
.info_post a { color: grey; font-size: 12px; line-height: 16px; font-style: italic; font-weight: normal; }
.info_post a:hover { color: #000000; }

.pageblog .wrapcontent { width: calc(100% - 80px); padding: 0px 40px; }
.wrapblog-post { position: relative; width: 100%; display: block; margin-bottom: 25px; }
.wrapblog-post .div-img { width: 300px; margin-right: 50px; display: inline-block; }
.wrapblog-post .div-img img { max-width: 100%; height: auto; float: none; margin: 0px auto; }
.wrapblog-post .div-content { width: calc(100% - 350px); float: right; display: inline-block; }
.wrapblog-post .div-content a { color: #000; }
.wrapblog-post .div-content a:hover { text-decoration: none; }
.wrapblog-post .div-content h3 { font-style: normal; margin-bottom: 30px; }
.wrapblog-post .div-content p { margin-bottom: 30px; }
.wrapblog-post .div-content .btnlinkpost { font-size: 16px; font-style: normal; padding: 10px 25px; color: #fff; background: #23c3ff; border-radius: 8px; display: inline-block; }

/* Post Promo */
.wrap-post-promo { position: relative; display: block; width: 100%; margin-bottom: 30px; }
.wrap-post-col2 { position: relative; display: inline-block; width: calc(50% - 42px); margin: 0px 40px 15px 0px; }
.wrap-post-col2:nth-child(2n){ margin: 0px 00px 15px 40px; }
.wrap-post-promo .wrap-post-col2 img { width: 100%; height: auto;}
h3.titlebtn { color: #fff; background: #23c3ff; padding: 8px 15px; border-radius: 4px; display: inline-block; margin-bottom: 25px; } 

/* Page kontak */
.contact-maps { width: 100%; display: block; margin: 0px auto 30px; }
.contact-maps iframe { max-width: 100%; }
.contact-desc { width: calc(50% - 10px); float: left; }
.contact-form { width: calc(50% - 10px); float: right; }
.wrap-form-kontak { position: relative; display: block; width: 100%; font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 22px; margin: 0px auto; color: #000000; }
.wrap-form-kontak h3 { font-size: 22px; line-height: 30px; text-align: center; margin-bottom: 20px; }
.wrap-form-kontak .form-container { margin-bottom: 15px; display: block;}
.wrap-form-kontak .form-container.btnsubmit { position: relative; }
.wrap-form-kontak label { width: 140px; display: inline-block; vertical-align: top; }
.wrap-form-kontak input[type="text"] { width: calc(100% - 175px); padding: 8px 12px; font-size: 16px; border: 1px solid #c0c0c0; border-radius: 5px; }
.wrap-form-kontak textarea { width: calc(100% - 175px); padding: 8px 12px; font-size: 16px; border: 1px solid #c0c0c0; border-radius: 5px; height: 50px; }
.wrap-form-kontak input[type="submit"] { width: 180px; height: 40px; font-size: 16px; background: #23c3ff; color: #fff; font-weight: bold; text-align: center; border: 0px; border-radius: 8px; cursor: pointer; margin-top: 20px; }


/* Woocommerce Single */
.woocommerce-ordering { display: none; }
.woocommerce-result-count { display: none; }
h1.title-single { margin-bottom: 35px !important;}
.singleWC .product .product_title { font-size: 18px; line-height: 24px; color: #ec0a78; font-style: normal; }
.singleWC .woocommerce .wrap-product-top { padding: 0px 20px; max-width: 1000px; margin: 0px auto; }
.singleWC .woocommerce .woocommerce-product-details__short-description { margin-bottom: 30px; }
.singleWC .woocommerce .product p.price, 
.singleWC .woocommerce .product span.price { color: #000; font-size: 20px; line-height: 26px; font-weight: bold; }
.singleWC .woocommerce .product .price > span { min-width: 220px; text-align: center; display: inline-block; padding-bottom: 15px; border-bottom: 1px solid #888888; }
.singleWC .woocommerce .woocommerce-tabs { padding: 25px 0px 10px; border-top: 3px solid #f77b03; border-bottom: 3px solid #f77b03; margin-bottom: 25px; }
.singleWC .woocommerce .product .woocommerce-tabs ul.tabs { margin-bottom: 0px; }
.singleWC .woocommerce .product .woocommerce-tabs ul.tabs li a,
.singleWC .woocommerce .product .woocommerce-tabs ul.tabs li { color: #ec0a78; background: #fff; font-style: normal; padding: 4px 15px; border: 0px; }
.singleWC .woocommerce .product .woocommerce-tabs ul.tabs li.active { border-top: 1px solid #D3CED2; border-left: 1px solid #D3CED2; border-right: 1px solid #D3CED2;}
.singleWC .woocommerce .product .woocommerce-tabs ul.tabs li.active a,
.singleWC .woocommerce .product .woocommerce-tabs ul.tabs li a:hover { color: #2366bc; }
.singleWC .woocommerce .product .woocommerce-Tabs-panel { padding: 20px 20px !important; border-bottom: 1px solid #D3CED2; border-left: 1px solid #D3CED2; border-right: 1px solid #D3CED2;}
.singleWC .woocommerce .product .woocommerce-Tabs-panel h2 { font-size: 18px; color: #000; margin-bottom: 20px; }
.singleWC .woocommerce .related.products h2 { color: #fff; background: #23c3ff; padding: 8px 15px; border-radius: 4px; display: inline-block; margin-bottom: 25px; } 
.singleWC .woocommerce a.wpgis-popup.fa { font: normal normal normal 14px/1 FontAwesome !important; }
.singleWC .woocommerce a.wpgis-popup.fa:hover { text-decoration: none !important; }
.productsingle_imgpromo { position: relative; display: block; }
.img-maulebihmurah { display: inline-block; }
.img-maulebihmurah img { width: 220px; height: auto; transition: transform .2s; }
.img-maulebihmurah:hover img {transform: scale(1.1); }
.img-promospesial { position: absolute; left: 270px; top: -50px; }
.img-promospesial img { width: 180px; height: auto; transition: transform .2s;}
.img-promospesial:hover img {transform: scale(1.1); }
.productsingle_linkmarket { position: relative; display: block; max-width: 220px; }
.img_marketplace { margin: 0px 8px 15px; display: inline-block; vertical-align: middle; font-size: 12px !important; line-height: 0px !important; font-weight: normal !important; }
.img_marketplace img { width: 55px; height: auto; transition: transform .2s; float: none; margin: 0px auto; }
.img_marketplace:hover img {transform: scale(1.1); }
.img_marketplace.mpwa a { font-size: 14px !important; line-height: 18px; display: inline-block; font-weight: normal !important; font-style: normal !important; display: inline-block; vertical-align: middle; }
.img_marketplace.mpwa:hover { text-decoration: none !important;}
.img_marketplace.mpwa img { width: 165px; display: inline-block; margin-left: 10px; vertical-align: middle; }

/* Popup */
.popup-background{background:rgba(0,0,0,0.5);z-index:90}
.popup-wildcard{background:#FFF;z-index:90;border-radius:5px;box-shadow:2px 2px 10px #000}
.popup-background {
transition:0.6s ease-out;
-webkit-transition:0.6s ease-out;
-moz-transition:0.6s ease-out;
-o-transition:0.6s ease-out;
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
opacity:0;
visibility:hidden
}
.popup-background.open {visibility:visible;opacity:1}   
.panel-mobi { display: none; }
.menu-mobi { left: -260px; display: none; }


/* 
# Favicon belum ada
# SideBar apa mungkin gambar saja, nanti custom link bisa
# 
*/

/* ========  RESPONSIVE =========== */
@media screen and (max-width:1199px) {
	.wrap { width: calc(100% - 40px); padding: 0px 20px; }
	.lb-product-img img { width: 80%; padding: 25px 0px; }
	.slide-post .div-img { width: 40%; margin-right: 25px; }
	.slide-post .div-img img { width: 100%; height: auto;}
	.slide-post .div-content { width: calc(60% - 30px);}
}

@media screen and (max-width:999px) {
	.header #logoweb { display: none; }
	.head-top { padding: 25px 0px 35px;}
	.box-search { width: calc(100% - 230px); margin: 0px; float: left; display: inline-block; }
	.icon-sosmed { margin-top: 0px;}

	header { margin-top: 70px; }
	.menu-primary { display: none; }
	.panel-mobi { background: #f4f4f4; display: block; position: fixed; top: 0; padding: 14px 10px; width: calc(100% - 20px); z-index: 100; }
    .panel-mobi #panel-menu-mobi { cursor: pointer; display: inline-block; }
	/* Mobile Menu */
    .menu-mobi { position: fixed; top: 60px; height: calc(100% - 77px);  padding: 3px 0px 15px; background: #f4f4f4; color: #fff; z-index: 110; width: 260px;  display: block; overflow: auto; 
        transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; 
    }
    .menu-mobi.open { left: 0px; }
    .mob-main-menu { position: relative; display: block; margin-bottom: 15px; }
    .mob-main-menu li { display: block; }
    .mob-main-menu li a { font-family: 'Verdana', sans-serif; font-size: 16px; line-height: 14px; color: #f77b03; padding: 16px 15px 16px 20px; display: block; }
    .mob-main-menu li.current-menu-item a { background: #ec0a78; color: #ffffff; text-decoration: none; }
	.mob-main-menu li:hover a { background: #ec0a78; color: #ffffff; text-decoration: none; }
	.mob-main-menu>ul>li { margin-bottom: 1px; box-shadow: 0 0 0 1px #f77b03; }
	.mob-main-menu ul.sub-menu { background: #e6e6e6; }
	.mob-main-menu ul.sub-menu li a { font-size: 14px; padding-left: 35px; }
	.menu-mobi #searchform { display: block; float: none; margin-left: 20px; width: 210px; }
    .menu-mobi #searchform .text { width: 170px; }
    #logomobi { position: absolute; display: block; width: 170px; height: 49px; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; }
    #logomobi img { width: auto; height: 48px; }
    .menu-mobi .icon-sosmed { float: none; }
    .menu-mobi .icon-sosmed a { margin-left: 7px; background: #ee802f; }
	.menu-mobi .icon-sosmed a:first-child { margin-left: 15px; }
	
	.container-tabs ul li { vertical-align: top; }
	.container-tabs ul li a { font-size: 16px;}
	.wrap-post-col2 { width: calc(50% - 18px); margin: 0px 15px 15px 0px; }
	.wrap-post-col2:nth-child(2n) { margin: 0px 00px 15px 15px; }
	.slide-post .div-content h3 { font-size: 22px; line-height: 28px; margin-bottom: 25px; }
	.slide-post .div-content p {font-size: 16px; line-height: 22px; }
	.foo-cs .col-3:nth-child(1), .foo-cs .col-3:nth-child(3)  { width: 29%;}
	.foo-cs .col-3:nth-child(2) { width: 41%;}

	.singleWC .woocommerce .wrap-product-top { padding: 0px; }
	/*
	.woocommerce-tabs iframe { max-width: 100%; height: auto;} */
	.wrap_iframe { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
	.wrap_iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

	.pageblog .wrapcontent { width: 100%; padding: 0px; }
	.wrap-form-kontak label { margin-bottom: 4px; }
	.wrap-form-kontak input[type="text"] { width: calc(100% - 26px);}
	.wrap-form-kontak textarea { width: calc(100% - 26px);}
}

@media screen and (max-width:769px) {
	.list-box-product { width: calc(50% - 50px); }

	.list-box-product:nth-child(1)  .lb-product-img,
	.list-box-product:nth-child(2)  .lb-product-img,
	.list-box-product:nth-child(5)  .lb-product-img,
	.list-box-product:nth-child(6)  .lb-product-img,
	.list-box-product:nth-child(9)  .lb-product-img,
	.list-box-product:nth-child(10) .lb-product-img,
	.list-box-product:nth-child(13) .lb-product-img,
	.list-box-product:nth-child(14) .lb-product-img,
	.list-box-product:nth-child(17) .lb-product-img,
	.list-box-product:nth-child(18) .lb-product-img,
	.list-box-product:nth-child(21) .lb-product-img,
	.list-box-product:nth-child(22) .lb-product-img,
	li:nth-child(1) .product-dyn, 
	li:nth-child(2) .product-dyn, 
	li:nth-child(5) .product-dyn, 
	li:nth-child(6) .product-dyn,
	li:nth-child(9) .product-dyn, 
	li:nth-child(10) .product-dyn, 
	li:nth-child(13) .product-dyn, 
	li:nth-child(14) .product-dyn,
	li:nth-child(17) .product-dyn, 
	li:nth-child(18) .product-dyn, 
	li:nth-child(21) .product-dyn, 
	li:nth-child(22) .product-dyn
		{ background-color: #d1eefc; }
	.list-box-product:nth-child(3)  .lb-product-img,
	.list-box-product:nth-child(4)  .lb-product-img,
	.list-box-product:nth-child(7)  .lb-product-img,
	.list-box-product:nth-child(8)  .lb-product-img,
	.list-box-product:nth-child(11) .lb-product-img,
	.list-box-product:nth-child(12) .lb-product-img,
	.list-box-product:nth-child(15) .lb-product-img,
	.list-box-product:nth-child(16) .lb-product-img,
	.list-box-product:nth-child(19) .lb-product-img,
	.list-box-product:nth-child(20) .lb-product-img,
	.list-box-product:nth-child(23) .lb-product-img,
	.list-box-product:nth-child(24) .lb-product-img,
	li:nth-child(3) .product-dyn, 
	li:nth-child(4) .product-dyn, 
	li:nth-child(7) .product-dyn, 
	li:nth-child(8) .product-dyn,
	li:nth-child(11) .product-dyn, 
	li:nth-child(12) .product-dyn, 
	li:nth-child(15) .product-dyn, 
	li:nth-child(16) .product-dyn,
	li:nth-child(19) .product-dyn, 
	li:nth-child(20) .product-dyn, 
	li:nth-child(23) .product-dyn, 
	li:nth-child(24) .product-dyn
		{ background-color: #fde9f2; }

	.foo-menu { padding: 60px 0px 30px; }
	.foo-menu .cols-4 { width: calc(33.3% - 15px); margin-right: 20px;}
	.foo-menu .cols-4:nth-child(3) { margin-right: 0px; }
	.foo-menu .cols-4:nth-child(4) { width: 100%; display: block; margin-top: 30px; }
	.foomenu-title { font-size: 18px; line-height: 24px; }
	.foo-menu .cols-4:nth-child(4) .foomenu-title { margin-bottom: 5px; }
}

@media screen and (max-width:729px) {
	.icon-sosmed { width: 100%; display: block; text-align: center; margin-bottom: 20px; }
	.icon-sosmed a { margin: 0px 4px;}
	.box-search  { width: 100%; display: block; float: none; }
	.searchform { display: inline-block; width: 100%;}

	.container-tabs ul { overflow: auto; white-space: nowrap;}
	.container-tabs ul li { white-space: nowrap; width: auto; padding: 0px 10px; }

	.slide-post .div-img { width: 100%; margin: 0px auto 15px; float: none; }
	.slide-post .div-content { width: 100%; float: none; }
	.wrap-post-col2 { width: 100%; margin: 0px auto 15px !important; }
	.foo-cs .col-3 { width: 100% !important; float: none; display: block; margin: 0px auto 15px; }
	.foo-cs .cs-btn { width: 250px; }
	.foo-subs .es-field-wrap { width: 100%; margin-bottom: 15px; }
	.foo-menu .cols-4 { width: calc(50% - 10px) !important; margin: 0px 5px 15px !important; }
	.foo-menu .cols-4:nth-child(3) { clear: both; }
	.foo-menu .cols-4:nth-child(4) .foomenu-title { margin-bottom: 15px; }
	.icon-sosmed a i.fa-facebook-f, .icon-sosmed a i.fa-facebook { margin-left: 10px !important; }

	.wrapblog-post .div-img { margin-right: 15px; }
	.wrapblog-post .div-content { width: calc(100% - 315px);}
}
@media screen and (max-width:600px) {
	.wrapblog-post .div-img { width: 100%; margin: 0px auto 15px; }
	.wrapblog-post .div-content { width: 100%; float: none;}
	.wrapblog-post .div-content h3 { margin-bottom: 15px;}
	.wrapblog-post .div-content p { margin-bottom: 15px;}
	.contact-desc { width: 100%; float: none; margin-bottom: 20px; }
	.contact-form { width: 100%; float: none; }

}
@media screen and (max-width:480px) {
	.singleWC .woocommerce .product .woocommerce-tabs ul.tabs { white-space: nowrap; overflow: auto; }
}
@media screen and (max-width:450px) {
	.list-box-product { width: calc(50% - 20px); margin: 0px 9px 30px; }
	.wrap-form label { width: 100%; display: block; margin-bottom: 5px; }
	.wrap-form input[type="text"] { width: calc(100% - 25px); }

	.foo-menu .cols-4 { width: 100% !important; margin: 0px auto 15px !important; }
	.foo-menu .icon-sosmed { text-align: left;}
	.img-promospesial { left: 235px;}
	.productsingle_linkmarket { margin: 0px auto; }
}

@media screen and (max-width:375px) {
	.lb-product-btn { padding: 12px 0px; width: 100%; text-align: center; }
	.foo-subs .subs-title { font-size: 32px;}

	.singleWC .woocommerce .product .price > span { width: 100%; }
	.img-maulebihmurah { position: relative; width: 100%; left: 0px; top: 0px; margin: 0px auto 15px; }
	.img-promospesial { position: relative; width: 100%; left: 0px; top: 0px; margin: 0px auto 15px; float: none; display: inline-block; } 
	.img-promospesial img, .img-maulebihmurah img { margin: 0px auto; float: none; }
}