/*
Theme Name: Vega
Theme URI: https://www.lyrathemes.com/vega/
Author: Lyra Themes
Author URI: https://www.lyrathemes.com/
Description: Vega is a clean, minimal, responsive one page business theme. This simple theme can be used for a personal blog , business website, landing page, business portfolio, or any other creative website. Using Vega to create your new website will be a fast and easy experience, without getting overwhelmed with needless settings and choices. This multipurpose theme is built on the Bootstrap framework making it fully responsive and mobile friendly. This one page theme can also be used to set up a single page (one page) website. It has animated content, three pre-built color choices (orange, blue, and green), text and image logo options, full screen image banner, multiple home page displays, multiple blog feed displays, and custom CSS options. The one page home page displays the banner, welcome content, featured pages, two call to action rows with an optional parallax background effect, recent posts, and an open content row. Vega has been tested with WooCommerce and has basic WooCommerce support/integration. This simple business theme can also be used to create multilanguage websites (tested using qTranslateX). Backed by world class, one-on-one support, Vega is featured-packed yet simple enough to be used to create almost any kind of website.
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vega
Domain Path: /languages/
Tags: one-column, two-columns, right-sidebar, grid-layout, flexible-header, custom-header, custom-colors, custom-menu, featured-image-header, featured-images, footer-widgets, full-width-template, theme-options, translation-ready, blog, news, portfolio
*/


/*
- Headings
- Special Headings
- Links
- Background Colors for Sections
- Custom Icons
- Buttons
- Helper
- Forms
- Search Form
- Images and Thumbnails
- Video Embed
- Structure
- Header Navigation
- Top Navigation
- Page Banner 
- Image Banner
- Blog Feed
- Pagination
- Post
- Page
- Widgets
- Tag Cloud Widget
- Icon List
- Front Page - Content 
- Front Page - Featured Icons / 4 Columns with Icons
- Front Page - CTA 
- Front Page - Open Content 
- Front Page - Recent Posts
- 404 Page
- Comments
- Footer
- Footer Widgets
- Footer Nav
- Back to Top
- Jetpack
- Wordpress Core
- qTranslateX
- Media Queries
*/



body{ font-family: 'Gill Sans', sans-serif; font-size:14px; line-height:24px; color:#000; background-color:#dcd6d3; height:100%;   }


/* Headings
------------------------------------------------------------------------*/

h1,h2,h3,h4,h5,h6{ font-family: 'Gill Sans', sans-serif; line-height:1.36; font-weight:600;}
h1{ font-size:38px; }
h2{ font-size:36px; }
h3{ font-size:26px; }
h4{ font-size:18px; }
h5{ font-size:16px; }
h6{ font-size:16px; }
p{ text-align:justify }^



.blog-feed .content ul li{list-style-type:inherit}
.blog-feed .content ol li{list-style-type:decimal; margin-left:5px}



/* Special Headings
------------------------------------------------------------------------*/
.block-title1{ font-family:'Perpetua', serif;  }

.block-title{ font-family:'Perpetua', serif; font-weight:bold; margin:0 0 25px; /* text-transform:uppercase; */ position:relative; text-align:center; line-height:1.2; padding-bottom:10px; color:#3f3f3f; }
.block-title:after{ content:""; height:0px; width:50px; position:absolute; bottom:-2px; left:50%; margin-left:-25px;  }
.block-title a{ color:inherit; }
.block-title.block-title-left {text-align:left;}
.block-title.block-title-left:after{ left:0; margin-left:0; }
.page-content .block-title{ margin: 0 0 10px; }
.home .block-title{font-weight:900}

/** 
embed youtube responsive
**/
.videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#headtitle{ 
   
    /*-webkit-text-stroke: 0.5px white;*/
    -webkit-text-fill-color: #e31317;
    margin: 1em 0 0.5em 0;
    font-weight: 900;
    font-family: 'Ultra', sans-serif; 
    
    text-shadow: 0 2px white, 0 3px #777;
    font-size: 36px;
	line-height: 42px;
    }

#subtitle{
    -webkit-text-stroke: 0.1px black;
    -webkit-text-fill-color: white;
    font-size: 21px
    }


#forklift{
     text-align: center;
    }
/* Links
------------------------------------------------------------------------*/

a{ color:#fda403; }
a:hover,
a:focus{ color:#DC483E;}
button:focus,input:focus,img:focus, a:focus {outline:0;}
a.more-link { color: #333; text-transform: uppercase;}

/* new button */
/*
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #fafafa;
  color: #fafafa;
} 
*/
.newbutton{
  border: 5px solid red;
  background: transparent;
  color: red;
  padding : 5px 8px;
  font-weight: bold;
  font-size: 3rem;
  cursor: pointer;
  outline: transparent;
  transition background: .25s ease, color .25s ease, box-shadow .15s ease;
  box-shadow: 8px 8px 0 #888;
}  
  .newbutton:hover{
    color : currentColor;
    background : red;
    box-shadow : 4px 4px 0 #888;
  }
  .newbutton:active{
    box-shadow: 0 0 0 #888;
  }


/* Background Colors for Sections
------------------------------------------------------------------------*/

.bg-white{ 
    background-color:#fff;
    
}
.bg-dark{ background-color:#4D4C4C; color:#fff; }
.bg-primary{ background-color:#fda403; color:#fff; }
.bg-grey-light{ background-color:#F4F4F4; } 
.bg-grey-light-2{ background-color:#fafafa; }
.bg-grey-light-3{ background-color:#fcfcfc; }
.bg-smoke{ background-color:#F5F5F5; }
.bg-footer{
    
    background-color:#efefef;
    height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    
    /*
    
    background-image:url(assets/images/bg/jatrafoot.png);
    */
}


/***
non rectangular css
***/

  
  /* set height to pixels if you want angle to change with screen width */

/** rippaer**/

.rippaper{
  margin-left:5px;
  padding:20px;
  position: relative;
    }

.rippaper::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 20px;
  width: 100%;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/rip.svg) bottom center;
  background-size: 100%;
  
}

.rippaperside{
  margin-left:5px;
  padding-left:20px;
  padding-top:20px;
  padding-right:20px;
  position: relative;
    }

.rippaperside::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 30px;
  width: 100%;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/rip.svg) bottom center;
  background-size: 200%;
  
}
 
.svgmenu {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
}



.svgintro {
  position: absolute;
 
  bottom: 0;
  
  width: 100%;
  height: 100px;
  
}


/*** Konten shape css ****/

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

.wrapper {
  padding: 30px 30px 10px 30px;
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}
.circle {
  background-repeat: no-repeat;
  background-image: url(assets/images/konten/aspalsejarah.jpg);
  width: 250px;
  height: 250px;
  
  border-radius: 50%;
  float: left;
  shape-outside: circle() margin-box;
  margin: 10px;
}

/** box-prod**/

.headerx{
  box-sizing: border-box;
  padding: 2em 3em 7em;
  background: linear-gradient(to left,#e74245 , #E21317);
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
}

.headerx h4{
    color:white;
    }

.separatorx{
  height: 125px;
  margin-top:calc(125px * -1);
  background-image: linear-gradient(to bottom right, transparent, transparent 50%, #f3efe4 50%, #f3efe4);
  /* Using transparent for top of the gradient allows for a background image on the header. Alternatively you can just use a solid color that matches the header color. */
}

.footerx{
  background: #f3efe4;
  border-radius: 25px;
}

.cardsx {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  display:inline-block;
  
  
}

.cardx {
  width: 250px;
  margin: 2em;
  text-align: center;
  box-shadow: 0px 5px 40px rgba(0,0,0,0.2);
  border-radius: 25px;
}

.product-wrapperx{
  width: 150px;
  position: relative;
}

.product-imagex{
  height: 150px;
  position: absolute;
  top: -100px;  
  left: 60px;
  
}

.product-wrapperx .product-imagex:focus,
.product-wrapperx .product-imagex:hover {
  transform: scale(1.5);
  z-index: 1;
}

.footerx p{
  margin: 0;
  font-size: x-small;
  padding: 2.5em ;
  text-align:center;
}

.cardp{
    text-align:center;
    }


/* Custom Icons
------------------------------------------------------------------------*/

.ic{ display:inline-block; background-repeat:no-repeat; background-position:center center; vertical-align:middle }
.ic-angle-up-white{ width:19px; height:11px; background-image:url(assets/img/ico_arrow_ud_white.png); background-position:0 0; }
.ic-angle-left{ width:11px; height:19px; background-image:url(assets/img/ico_arrow_lr_black.png); background-position:0 0; }
.ic-angle-left-white{ width:11px; height:19px; background-image:url(assets/img/ico_arrow_lr_white.png); background-position:0 0; }
.ic-angle-right{ width:11px; height:19px; background-image:url(assets/img/ico_arrow_lr_black.png); background-position:right 0; }
.ic-angle-right-white{ width:11px; height:19px; background-image:url(assets/img/ico_arrow_lr_white.png); background-position:right 0; }
.ic-angle-up{ width:19px; height:11px; background-image:url(assets/img/ico_arrow_ud_black.png); background-position:0 0; }
.ic-angle-down{ width:19px; height:11px; background-image:url(assets/img/ico_arrow_ud_black.png); background-position:0 bottom; }
.ic-angle-down-white{ width:19px; height:11px; background-image:url(assets/img/ico_arrow_ud_white.png); background-position:0 bottom; }

/* Buttons
------------------------------------------------------------------------*/

.btn{ font-family: 'Lato', sans-serif; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; font-size:13px; padding:12px 20px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.btn .fa{ font-size:14px; margin-right:5px; color:#9d9d9d; }

.btn-inverse{ background-color:#3f3f3f; color:#fff; }
.btn-inverse:focus,
.btn-inverse:hover{ background-color:#292929; color:#fff; }

.btn.btn-social-icon{ padding:0; }
.btn.btn-social-icon .fa{ color:#fff; }

.btn-primary-custom{ background-color:#fda403; border-color:#fda403; color:#fff; }
.btn-primary-custom{ background-color:#fda403; color:#fff; }
.btn-primary-custom:focus,
.btn-primary-custom:hover{ background-color:#DC483E; color:#fff; }

.btn.btn-margin-top{margin-top:20px;}
.btn.btn-margin-bottom{margin-bottom:10px;}

/* Helper
------------------------------------------------------------------------*/

.light{ font-weight:300; }
.spacer{ clear:both; width:100%; }
.shadow{ z-index:1; -webkit-box-shadow:0 -11px 49px rgba(121,121,121,0.35); -moz-box-shadow:0 -11px 49px rgba(121,121,121,0.35); box-shadow:0 -11px 49px rgba(121,121,121,0.35); }
.helper{ display:inline-block; width:0; height:100%; vertical-align:middle; }
.separator{ clear:both; position:relative; }
.center{ text-align:center !important; }
.large{ font-size: 180px; line-height: 200px; padding-bottom: 20px; color: #777; }
.clearfix:after { content: ""; display: table; clear: both; }

/* Forms
------------------------------------------------------------------------*/

.form-control{ border-radius:0; height:40px; border-color:#aeaeae; }
.form-control:focus { border-color: #fda403; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(249, 98, 56, 0.6); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(249, 98, 56, 0.6); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(249, 98, 56, 0.6); outline: 0 none; }
.form-control::-webkit-placeholder{ color:#3e3e3e }
.form-control::-moz-placeholder{ color:#3e3e3e }
.form-control::placeholder{ color:#3e3e3e }
.input-sm{ height:32px; }
.input-lg{ height:54px; }
textarea.input-lg{ height:auto; }
.input-group-addon{ border-color:#aeaeae; }
.input-group-btn > .btn { padding-bottom:10px; padding-top:9.5px; position:relative; }

/* Search Form
------------------------------------------------------------------------*/
.search-form{ position:relative }
.search-form .form-control{ border:0; padding-right:50px; -webkit-box-shadow:0 0 9px #bdbdbd inset; -moz-box-shadow:0 0 9px #bdbdbd inset; box-shadow:0 0 9px #bdbdbd inset; }
.search-form .btn{ width:45px; position:absolute; right:0; top:0; height:100%; padding:0 }

/* Images and Thumbnails
------------------------------------------------------------------------*/
.img-responsive.center{ margin-left:auto; margin-right:auto; }
.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail { max-width: 100%; height: auto; }

/* Video Embed
------------------------------------------------------------------------*/

.iframe-video {position: relative; padding-bottom: 65%; height: 0; overflow: hidden;}
.iframe-video iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

/* Structure
------------------------------------------------------------------------*/

.section{ position:relative; padding:55px 0 35px; /*65*/ }


/* Header Navigation 
------------------------------------------------------------------------*/

.header{background-color: rgba(255,255,255,.4);}
.header .social-menu{float:right}	

.header-left{padding-left:0px;}

.top-menu{list-style:none;margin:0;padding:0;}
.top-menu:after{content:"";display:table;clear:both}
.top-menu>li{float:left;padding:0;margin:0}
.top-menu>li>a{padding:6px 12px;color:#fff;display:block;font-size:12px;text-decoration:none;line-height:22px}

.top-menu>li>a:focus,
.top-menu>li>a:hover{color:#000;text-decoration:none}

.social-menu .top-menu>ul{float:left;padding:0;margin:0}
.social-menu .top-menu>ul>a{padding:6px 12px;color:#fff;display:block;font-size:12px;text-decoration:none;line-height:22px}

.social-menu .top-menu>ul>a:focus,
.social-menu .top-menu>ul>a:hover{color:#000;text-decoration:none}

#menu-top-right {color:#fff;padding-top:3px}
#menu-top-right a {color:#fff}
#menu-top-right a:focus {color:#000}
#menu-top-right a:hover {color:#000}

.social-menu{list-style:none;margin:0;padding:0}
.social-menu li{display:inline-block;}
.social-menu li:last-child{margin-right:0}


.top-menu.social-menu>li>a{position:relative;overflow:hidden;width:42px;padding-left:0;padding-right:0;white-space:nowrap}
.top-menu.social-menu>li>a:before{width:42px;text-align:center;display:inline-block}

.social-menu a:before{font-family:'FontAwesome';}
.menu-social-container .menu a[href*="facebook.com"]:before,
.social-menu a[href*="facebook.com"]:before{content: "\f09a";}
.menu-social-container .menu a[href*="twitter.com"]:before,
.social-menu a[href*="twitter.com"]:before{content: "\f099";}
.menu-social-container .menu a[href*="instagram.com"]:before,
.social-menu a[href*="instagram.com"]:before{content: "\f16d";}
.menu-social-container .menu a[href*="pinterest.com"]:before,
.social-menu a[href*="pinterest.com"]:before{content: "\f231";}
.menu-social-container .menu a[href*="wordpress.com"]:before,
.social-menu a[href*="wordpress.com"]:before{content: "\f19a";}
.menu-social-container .menu a[href*="linkedin.com"]:before,
.social-menu a[href*="linkedin.com"]:before{content: "\f0e1";}
.menu-social-container .menu a[href*="youtube.com"]:before,
.social-menu a[href*="youtube.com"]:before{content: "\f16a";}
.menu-social-container .menu a[href*="plus.google.com"]:before,
.social-menu a[href*="plus.google.com"]:before{content: "\f0d5";}
.menu-social-container .menu a[href*="mailto"]:before,
.social-menu a[href*="mailto"]:before{content: "\f0e0";}
.menu-social-container .menu a[href*="rss"]:before,
.social-menu a[href*="rss"]:before{content: "\f09e";}

.header-toggle{display:none;text-align:center;background-color:#f3f3f3;cursor:pointer;font-size:16px;}
.header-toggle.open,
.header-toggle:hover{background-color:#545454;color:#fff;}



/* Top Navigation
------------------------------------------------------------------------*/

.navbar-custom{ min-height:90px; margin:0; border:0; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; background-color: rgba(255,255,255,.4); -webkit-box-shadow:0 0 5px rgba(0,0,0,0.2); -moz-box-shadow:0 0 5px rgba(0,0,0,0.2); box-shadow:0 0 5px rgba(0,0,0,0.2); }

.navbar-custom .navbar-brand{ line-height:36px; padding-top:26px; padding-bottom:17px; height:70px; }
a.navbar-brand.text-logo { text-transform: uppercase; font-weight: 900; font-size:30px; color:#010101;}


.navbar-custom .navbar-nav > li > a{ font-family: Georgia, serif; font-size:12px; font-weight:bold; font-weight:600; padding: 25px 12px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; text-transform: uppercase; color:#010101; }
.navbar-custom .navbar-nav > li > a { line-height: 40px;}
.navbar-custom .navbar-nav{ position:relative }
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { color:#fda403 !important; background-color: transparent; }

.navbar-custom .nav > li > a:hover,
.navbar-custom .nav > li > a:focus,
.navbar-custom .nav > .current > a,
.navbar-custom .nav > .active > a,
.navbar-custom .nav > .current-menu-ancestor > a,
.navbar-custom .nav > .open > a{ background-color:transparent; color:#fda403; }

.navbar-custom .nav > .page-scroll > a{color:#010101 !important;}
.navbar-custom .nav > .page-scroll > a:hover,
.navbar-custom .nav > .page-scroll > a.showing{color:#fda403 !important;}

.navbar-custom ul .sub-arrow{ display:none }



.navbar-custom span.scroll-up, 
.navbar-nav magnet.scroll-down{ position:absolute; display:none; visibility:hidden; height:20px; overflow:hidden; text-align:center; }
.navbar-custom span.scroll-up-arrow, 
.navbar-custom span.scroll-down-arrow{ position:absolute; top:-2px; left:50%; margin-left:-8px; width:0; height:0; overflow:hidden; border-top:7px dashed transparent; border-right:7px dashed transparent; border-bottom:7px solid; border-left:7px dashed transparent; }
.navbar-custom span.scroll-down-arrow{ top:6px; border-top:7px solid; border-right:7px dashed transparent; border-bottom:7px dashed transparent; border-left:7px dashed transparent; }
.navbar-custom ul.sm-nowrap > li > a{ white-space:nowrap; }

.navbar-nav .collapsible ul{ display:none; position:static !important; top:auto !important; left:auto !important; margin-left:0 !important; margin-top:0 !important; width:auto !important; min-width:0 !important; max-width:none !important; }
.navbar-nav .collapsible ul.sm-nowrap > li > a{ white-space:normal;}

.navbar-nav .dropdown-menu{ left:0; right:auto; min-width:175px !important; padding:10px 0; -webkit-border-radius:3px !important; -moz-border-radius:3px !important; border-radius:3px !important; border:0; margin-top:-2px !important; margin-left:0 !important; border-top:2px solid #fda403; }
.navbar-nav .dropdown-menu .dropdown-menu{ left:100% !important; top:-10px !important; }
.navbar-custom .dropdown-menu > li > a{ white-space:normal; font-size:13px; Noto Sans, sans-serif; padding:10px 15px; position:relative; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; color:#5c5c5c; font-weight:bold;font-weight:500; letter-spacing:0.5px }
.navbar-custom .dropdown-menu .dropdown-menu > li > a{ color:#999999; }
.navbar-custom .dropdown-menu > li > a .fa{ position:absolute; top:8px; right:20px; line-height:20px; font-size:16px }
.navbar-custom .dropdown-menu > li > a:hover,
.navbar-custom .dropdown-menu > li:hover > a,
.navbar-custom .dropdown-menu > .open > a{ background:transparent; color:#fda403; }

.navbar-toggle{ font-size:22px; margin-bottom:8px; margin-top:24px; margin-right:5px; color:#585858; }

@media (min-width:768px){
    .nav-wrapper{height:90px;}
}

.navbar-fixed-top .navbar-collapse{
   padding-right:15px;
   padding-left:30px;
}


/***breadcrumb***/

.bread {
    background-color: #fff;
    padding: 5px;
    margin-left:5px;
   
    clip-path: polygon(0% 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%);
    }

.bread1 {
    background-color: #fff;
    padding: 5px;
   
   
    clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
    }    

.breadchild {
    background-color: #fff;
    padding: 5px;
   
    
    clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
    }  
    
.breadchild2 {
    background-color: #fff;
    padding: 5px;
   
    
    clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
    }  
.breadchild3 {
    background-color: #fff;
    padding: 5px;
   
    
    clip-path: polygon(97% 0, 100% 50%, 97% 100%, 0% 100%, 3% 50%, 0% 0%);
    }      



/* fix for smartmenu */
.navbar-nav > li .scroll-up, .navbar-nav > li .scroll-down{display:none !important}

/* Page Banner 
------------------------------------------------------------------------*/

.jumbotron{ background:url(assets/img/bg_slide.png) repeat 0 0 #ebebea; margin:0; padding:80px 0 80px; line-height:26px; }
/* .jumbotron.parallax-bg { background: none !important;} */

/* .home .jumbotron{ background:url(assets/img/bg_slide.png) repeat 0 0 #ebebea; margin:0; padding:180px 0 160px; line-height:26px; } */
.jumbotron p{ font-size:22px; font-weight:400; }
.jumbotron .description{ font-size:22px; font-weight:400; }
.jumbotron p span{ padding:10px; display:inline-block; background-color:#fda403; }
.jumbotron .block-title{ margin-bottom:30px;  }
.jumbotron h1,
.jumbotron h2{ font-size:28px; color:"#e31317" }

.jumbotron.banner-none{padding:50px 0 40px;}

/* Image Banner
------------------------------------------------------------------------*/

.frontpage-banner.image-banner{ position:relative; overflow:hidden; color:#fff; }
.frontpage-banner.image-banner.banner-featured-image { padding:200px 0 180px;  }
.frontpage-banner.image-banner.banner-custom-header { padding:200px 0 180px;  }
.frontpage-banner.banner-none { padding-top: 60px; padding-bottom: 50px;  }
.frontpage-banner.image-banner .container{ z-index:3; position:relative }
.frontpage-banner.image-banner p{ font-size:20px; font-weight:bold; margin-bottom:20px; }
.frontpage-banner.image-banner .description{ font-size:20px; font-weight:bold; }

.frontpage-banner.image-banner.full-screen .container{ min-height:200px; height:100%; text-align:center }
.frontpage-banner.image-banner.full-screen .inner{ display:inline-block; vertical-align:middle; }
.frontpage-banner.image-banner.full-screen p{ font-size:20px; font-weight:bold; }
.frontpage-banner.image-banner.frontpage-banner .block-title{ font-size:36px; font-weight:900;  }

/* .home .jumbotron.parallax-bg { background: none !important; } */
.frontpage-banner.frontpage-banner-parallax-bg{ margin:0; padding:180px 0 160px; line-height:26px; } 
.frontpage-banner.frontpage-banner-parallax-bg:before { width: 100%; height: 100%; background-color: #000; opacity: 0.35; content: ""; position: absolute; left: 0; top: 0; z-index: 2; }

.image-banner .block-title{ color:#fff; }

/* Blog Feed
------------------------------------------------------------------------*/

.no-results { font-size: 24px; color:#666; }

.blog-feed .entry{ clear:both; padding-bottom:10px; margin-bottom:60px;}

.blog-feed .entry .entry-image-left{ margin-bottom:30px; position:relative; overflow:hidden; display:block; max-width:100%; width: 300px; float: left; }
.blog-feed .entry .entry-image-left img{ width:300px; float:left; height:auto;}

.blog-feed .entry .entry-image-top{ margin-bottom:20px; }
.blog-feed .entry .entry-image-top img{ max-width:99%; height:auto; }

.blog-feed .entry .entry-image-two-col img{ height:auto; width:100%; }

.blog-feed .entry h3{ margin:0 0 20px; line-height:1.2; }
.blog-feed .entry h3 a{ color:inherit; }

.blog-feed .entry .entry-content-right{ position:relative; padding-bottom:15px; margin-bottom:10px; margin-left:315px; padding-right:10px; text-align:justify; }
.blog-feed .entry .entry-content-right p:last-child{ margin-bottom:0; }
.blog-feed .entry .entry-content-right:after{ height:0; position:absolute; bottom:0; left:0; width:50px; content:""; border-bottom:1px solid #fda403; }

.blog-feed .entry .entry-meta{  font-family:'Lato', sans-serif; font-weight:600; font-size:12px; margin-bottom:15px; }
.blog-feed .entry .entry-meta-right{ margin-left: 315px; }
.blog-feed .entry .entry-meta a{ font-weight:600; color:inherit; }
.blog-feed .entry .entry-meta .sep{ margin:0 5px; }
.blog-feed .entry .entry-meta label{ font-weight:600; margin-bottom:0; margin-right:10px; }

.blog-feed .entry .entry-buttons-right{ margin-left: 315px;}
.blog-feed .entry .entry-buttons .btn{ min-width:125px; padding-left:5px; padding-right:5px; margin-right:5px; }

.blog-feed .blog-feed-column li {
    list-style-type: none;   
    margin-left: -39px; 

    }


.blog-feed #karir1 {
    background-color: #e1f7d5;
    padding: 15px;
    border-radius: 10px;
    clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
    }
.blog-feed #karir2 {
    background-color: #ffbdbd;
    padding: 15px;
    border-radius: 10px;
    clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
    }  
.blog-feed #karir3 {
    background-color: #c9c9ff;
    padding: 15px;
    border-radius: 10px;
    clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
    }      

.blog-feed .content p img {
    text-align: center;
    
    }

/* Pagination
------------------------------------------------------------------------*/
.posts-pagination{margin-bottom:30px; margin-top:70px;}
.posts-pagination-block a{ display:inline-block; width:50px; height:50px; line-height:44px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; text-align:center; font-size:40px; margin-right:-15px; position:relative; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; -webkit-box-shadow:0 0 0 10px transparent; -moz-box-shadow:0 0 0 10px transparent; box-shadow:0 0 0 10px transparent; background-color:#e4e4e4; color:#000000; }
.posts-pagination-block a:focus,
.posts-pagination-block a:hover{ outline:none; z-index:2; -webkit-box-shadow:0 0 0 0 #fda403; -moz-box-shadow:0 0 0 0 #fda40; box-shadow:0 0 0 0 #fda403; color:#fff; background-color:#fda403;}
.posts-pagination-block a:focus .ic-angle-right,
.posts-pagination-block a:hover .ic-angle-right,
.posts-pagination-block a:focus .ic-angle-left,
.posts-pagination-block a:hover .ic-angle-left{ background-image:url(assets/img/ico_arrow_lr_white.png) }

/* Post 
------------------------------------------------------------------------*/

.post-content .post{ margin-bottom:40px; padding-bottom:20px; }

.post-content .post .entry-title{ position:relative; padding-bottom:20px; line-height:20px; margin:0 0 15px;  }
.post-content .post .entry-title:after{ height:0; position:absolute; bottom:0; left:0; width:50px; content:""; border-bottom:1px solid #fda403; }

#karirjudul {
  position: relative;
  display: inline-block;
  font-size: 1.5em;
  font-weight: 800;
  color: #e21317;
  overflow: hidden;
  background: linear-gradient(to right, #800000, #800000 50%, #e21317 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 275ms ease;
  text-decoration: none; // text decorations are clipped in WebKit browsers
}
  #karirjudul:hover {
    background-position: 0 100%;
  }


.post-content .post .entry-meta{ font-family:'Lato', sans-serif; font-weight:600; font-size:12px; margin-bottom:15px; margin-top:20px; }
.post-content .post .entry-meta a{ font-weight:600; }
.post-content .post .entry-meta .sep{ margin:0 5px; }
.post-content .post .entry-meta label{ font-weight:600; margin-bottom:0; margin-right:10px; }

.post-content .post .entry-tags{ margin-bottom:28px }
.post-content .post .entry-tags a{ font-size:11px; display:inline-block; padding:5px; position:relative; margin-right:5px; color:#7e7e7e; background-color:#e6e6e6; }
.post-content .post .entry-tags a:focus,
.post-content .post .entry-tags a:hover{ text-decoration:none; outline:none; background-color:#3f3f3f; color:#fff; }
.post-content .post .entry-tags a:after{ position:absolute; right:-9px; top:0; content:""; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:6px solid #ffffff; }

.post-content .post .entry-image{ margin-bottom:20px; }
.post-content .post .entry-image img{ max-width:99%; height:auto; }

.post-content .type-attachment{ margin-bottom:40px; padding-bottom:20px; border-bottom:1px solid #3f3f3f; }
.post-content .type-attachment .entry-title{ position:relative; padding-bottom:20px; line-height:20px; margin:0 0 15px; }
.post-content .type-attachment .entry-title:after{ height:0; position:absolute; bottom:0; left:0; width:50px; content:""; border-bottom:1px solid #fda403; }

.post-content .type-attachment .entry-meta{ font-family:'Lato', sans-serif; font-weight:600; font-size:12px; margin-bottom:15px; margin-top:20px; }
.post-content .type-attachment .entry-meta a{ font-weight:600; }
.post-content .type-attachment .entry-meta .sep{ margin:0 5px; }
.post-content .type-attachment .entry-meta label{ font-weight:600; margin-bottom:0; margin-right:10px; }

/* Page 
------------------------------------------------------------------------*/

.page-content .page{ margin-bottom:40px; padding-bottom:20px; }
.page-content .page .page-title{ position:relative; padding-bottom:20px; line-height:20px; margin:0 0 15px;  }
.page-content .page .page-title:after{ height:0; position:absolute; bottom:0; left:0; width:50px; content:""; border-bottom:1px solid #fda403; }

.post-content .post .entry-image{ margin-bottom:20px; }
.post-content .post .entry-image img{ max-width:99%; height:auto; }

/* Widgets
------------------------------------------------------------------------*/

.sidebar {margin-top:8px;}
.widget{ margin-bottom:55px; }

.widget-title{ position:relative; padding-bottom:19px; line-height:20px; margin:0 0 20px;  color:#010101; }
.widget-title a{ color:inherit }

h3.widget-title{font-size:18px;}

.widget ul{ list-style:none; margin:0; padding:0;  }
.widget ul li{ margin-bottom:10px; }
.widget ul li a{ display:inline-block; padding-left:20px; position:relative; color:#000; }
.widget ul li a:focus,
.widget ul li a:hover{ color:#fda403; }
.widget ul li a:before{ content:"\f054"; position:absolute; left:0; top:1px; font-family:'FontAwesome'; color:inherit; font-size:12px;  color:#000; }

.widget ul li.recentcomments{ position:relative;padding-left:20px }
.widget ul li.recentcomments:before{ content:"\f054"; position:absolute; left:0; top:1px; font-family:'FontAwesome'; color:inherit; font-size:12px; color:#000; }
.widget ul li.recentcomments a:before{ display:none }

.widget ul li ul{ list-style:disc; margin:10px 0 0 33px; padding:0; font-size:12px }
.widget ul li li{ margin-bottom:8px; }
.widget ul li li a{ padding-left:0; }
.widget ul li li a:before{ display:none; }

/**** paper note *****/

.paperline2 {
    position: relative;
    width: 90%;
    max-width: 200px;
    min-width: 100px;
    height: 300px;
    margin: 0 auto;
    background: #fafafa;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    overflow: hidden;
}
.paperline2:before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 40px;
    background: radial-gradient(#575450 6px, transparent 7px) repeat-y;
    background-size: 30px 30px;
    border-right: 2px solid #D44147;
    box-sizing: border-box;
}

.paper-content {
    position: absolute;
    top: 30px; right: 0; bottom: 30px; left: 40px;
    background: linear-gradient(transparent, transparent 28px, #000 18px);
    background-size: 30px 30px;
}

.paper-content textarea {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    line-height: 30px;
    padding: 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #000;
    font-family: 'Handlee', cursive;
    
    font-size: 14px;
    box-sizing: border-box;
    z-index: 1;
}

/****post it widget ***/

.paper {
  --paper-dark: #e5c93d;
  --paper-color: #ffed87;

  position: relative;
  display: inline-block;
  justify-content: center;
  min-width: 325px;
  min-height: 175px;
  background: linear-gradient(
    135deg,
    var(--paper-dark),
    30%,
    var(--paper-color)
  );
  box-shadow: 3px 3px 2px var(--paper-shadow);
  border-radius : 10px;
}

.paper h3 {
    margin-top:50px;
    margin-left :50px;
  
}

.paper ul {

    margin-left :50px;
  
}


.pin {
  --pin-color: #d02627;
  --pin-dark: #9e0608;
  --pin-light: #fc7e7d;

  position: absolute;
  left: 20px;
  width: 60px;
  height: 50px;
}

.shadow {
  position: absolute;
  top: 18px;
  left: -8px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: radial-gradient(var(--paper-shadow), 20%, rgba(201, 191, 141, 0));
}

.metal {
  position: absolute;
  width: 5px;
  height: 20px;
  background: linear-gradient(to right, #808080, 40%, #eae8e8, 50%, #808080);
  border-radius: 0 0 30% 30%;
  transform: rotate(50deg);
  transform-origin: bottom left;
  top: 15px;
  border-bottom: 1px solid #808080;
}

.bottom-circle {
  position: absolute;
  right: 15px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: var(--pin-color);
  background: radial-gradient(
    circle at bottom right,
    var(--pin-light),
    25%,
    var(--pin-dark),
    90%,
    var(--pin-color)
  );
}

/* Barrel */
.bottom-circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 20px;
  height: 30px;
  transform: rotate(55deg);
  transform-origin: 100% 100%;
  border-radius: 0 0 40% 40%;
  background: linear-gradient(
    to right,
    var(--pin-dark),
    30%,
    var(--pin-color),
    90%,
    var(--pin-light)
  );
}

/* Top circle */
.bottom-circle::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(
    circle at right,
    var(--pin-light),
    30%,
    var(--pin-color),
    var(--pin-dark) 80%
  );
}


/* Tag Cloud Widget
------------------------------------------------------------------------*/

.tagcloud{ padding-top:20px }
.tagcloud a{ display:inline-block; padding:5px 8px; margin-bottom:10px; margin-right:3px; font-size:13px; background-color:#767a7c; color:#fff; }
.tagcloud a:focus,
.tagcloud a:hover{ text-decoration:none; background-color:#fda403; color:#fff; }

/* Icon List
------------------------------------------------------------------------*/

.icon-list{ list-style:none; margin:0 0 25px; padding:0 }
.icon-list li{ padding-left:32px; position:relative; margin-bottom:15px; }
.icon-list li .fa{ position:absolute; left:0; top:7px; font-size:14px; color:#000; }
.icon-list li a{ color:inherit }

/* Front Page - Content 
------------------------------------------------------------------------*/

.frontpage-content {text-align:center;}
.frontpage-content .description { width: 75%; margin:0 auto;}

/* Front Page - Featured Icons / 4 Columns with Icons
------------------------------------------------------------------------*/

.frontpage-4cols p{margin-bottom:40px;}
.frontpage-4cols .description {width:75%; margin:0 auto;}
.frontpage-4cols .cols{margin-top:0px;margin-bottom:20px;}
.content-icon{ text-align:center; padding:20px 25px 40px; -webkit-box-shadow:0 0 0 transparent; -moz-box-shadow:0 0 0 transparent; box-shadow:0 0 0 transparent; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.content-icon:hover{ /* -webkit-box-shadow:0 0 15px rgba(0,0,0,0.06);-moz-box-shadow:0 0 15px rgba(0,0,0,0.06); box-shadow:0 0 15px rgba(0,0,0,0.06); */ }
.content-icon .icon{ width:85px; height:85px; line-height:85px; text-align:center; -webkit-border-radius:85px; -moz-border-radius:85px; border-radius:85px; margin:0 auto 35px; font-size:30px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; background-color:#fffefe; color:#fda403; display:block;}
.content-icon:hover .icon{ /* color:#3f3f3f; */}
.content-icon .title{  margin:0 0 15px; overflow:hidden; }
.content-icon .title a {color: inherit;}
.content-icon .body{ line-height:20px; text-overflow:ellipsis; margin:0 0 35px; }
.content-icon .body p{ line-height:20px; font-size:13px; }
.content-icon .body p:last-child{ margin-bottom:0 }
.content-icon:hover .btn{ /*background-color:#fda403; */}

/** prod **/

.centerBox{
	display: flex;
	justify-content: center;
	align-items: center;

}

.categoryWrapper{

	background: url("http://ohlookawebsite.com/bathroomtestfull.jpg") no-repeat center center;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.categoryWrapper:after{
	position: absolute;
	top:0;
	left: 0;
	right:0;
	bottom: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a29ca9+0,95909b+99 */
background: #b30000 ; /* Old browsers */
background: -moz-linear-gradient(-45deg, #b30000  0%, #9a0000  99%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #b30000 0%,#9a0000  99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #b30000 0%,#9a0000  99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a29ca9', endColorstr='#95909b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	content: '';
	opacity: 0;
		-webkit-transition: opacity 0.9s ease 0s; 
}

.categoryWrapper:hover:after{
	opacity: 0.4;
}

.categoryWrapper h1{
	color:white;
	font-size: 50px;
	letter-spacing: 2px;
	-webkit-transition: all 0.15s ease 0s; 
	position: relative;
	z-index: 10;
}

.categoryWrapper:hover h1{
	transform: translateY(-10px);
}

.categoryWrapper button{
	position: absolute;
	transform: translatey(60px);
	-webkit-appearance: none;
	border: none;
	background: none;
	color:#e31317;
	width: 250px;
	height:50px;
	font-size: 20px;
	padding: 0;
	margin: 0;
	outline: none;
	z-index: 10;
}

.categoryWrapper button span{
	display: block;
	position: relative;
	line-height: 50px;
	height: 50px;
	cursor: pointer;
}

.categoryWrapper button > span:after{
	content:'';
	position: absolute;
	top:0;
	left: 50%;
	width: 20px;
	height: 0;
	
	border: 1px solid #e31317;
	border-left: none;
	border-bottom: none;
	
	    transition: height 0.15s ease-out, width 0.15s ease-out 0.15s;
}

.categoryWrapper:hover button > span:after{
	width: calc(50% - 1px);
	height: calc(100% - 2px);
	transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}

.categoryWrapper button > span:before{
	content:'';
	position: absolute;
	top:0;
	right: 50%;
	width: 20px;
	height: 0;
	
	border: 1px solid #e31317;
	border-right: none;
	border-bottom: none;
	
	    transition: height 0.15s ease-out, width 0.15s ease-out 0.15s;
}

.categoryWrapper:hover button > span:before{
	width: calc(50% - 1px);
	height: calc(100% - 2px);
	transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}

.categoryWrapper button > span > span:before{
	content:'';
	position: absolute;
	bottom:0;
	right: 0%;
	width: 1px;
	height: 1px;
	opacity: 0;
	
}

.categoryWrapper:hover button > span > span:before{
	opacity: 1;
	border-bottom: 1px solid #e31317;
	width: calc(50%);
	height: 1px;
	transition: opacity 0s ease-out 0.29s, width 0.15s ease-out 0.3s;
}

.categoryWrapper button > span > span:after{
	content:'';
	position: absolute;
	bottom:0;
	left: 0%;
	width: 1px;
	height: 1px;
	opacity: 0;
	
}

.categoryWrapper:hover button > span > span:after{
	opacity: 1;
	border-bottom: 1px solid #e31317;
	width: calc(50%);
	height: 1px;
	transition: opacity 0s ease-out 0.29s, width 0.15s ease-out 0.3s;
}

.categoryWrapper button > span > span > span{
	transition: color 0.15s ease-out 0.3s;
	color: transparent;
}

.categoryWrapper:hover button > span > span > span{
	color:white;
}

.categoryWrapper button > span > span > span:after{
	position: absolute;
	top:0;left:0;right:0;bottom:0;
	color: white;
	content: attr(data-attr-span);
	width: 0%;
	height: 100%;
	background:#e31317;
	white-space: nowrap;
	text-align: center;
	margin: auto;
	overflow: hidden;
	display: flex;
	justify-content: center;
	transition: width 0.2s;
}

.categoryWrapper button:hover > span > span > span:after{
	width: 100%;
}



/* Front Page - CTA 
------------------------------------------------------------------------*/

.frontpage-cta {text-align:center; }
/* .frontpage-cta:before { width: 100%; height: 100%; background-color: #000; opacity: 0.35; content: ""; position: absolute; left: 0; top: 0; z-index: 0; } */
.frontpage-cta .description {width:85%; margin:0 auto;}
.frontpage-cta .btn{margin-right:10px;margin-top:10px;text-decoration:none;}
.frontpage-cta p{ text-align:center; font-family: 'Lato', sans-serif; line-height: 1.36; font-size:22px; font-weight:bold;  /*letter-spacing:-1px*/}
.frontpage-cta p.small{ font-size:14px; font-family:'Lato', sans-serif; margin-bottom:0px;line-height:20px;}
.frontpage-cta a{color:#fff; text-decoration:underline;}
.frontpage-cta a:hover{color:#fff;}
.frontpage-cta.parallax-bg{color: #fff !important;}
.frontpage-cta.parallax-bg.section{padding:30px 0 30px}

.frontpage-cta.parallax-bg{position:relative;}
.frontpage-cta.parallax-bg:before {width: 100%; height: 100%; background-color: #000; opacity: 0.35; content: ""; position: absolute; left: 0; top: 0; z-index: 2; }
.frontpage-cta.parallax-bg .container {z-index: 3; position: relative;  }


/**
parallax video trial
**/

/* Video Parallax Section*/
.ParallaxVideo{ 
	height: 300px;
	padding-bottom: 50px;
    padding-top: 50px; 
}
.ParallaxVideo video{ 
    min-width: 100%;
    position: fixed;
	top:0;
	z-index: -9999;
}
.ParallaxVideo h3 {
    color: #fff;
    font-size: 76px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

/**paralax video full */
.ParallaxVideo2{ 
	height: 550px;
	padding-bottom: 50px;
    padding-top: 50px; 
}
.ParallaxVideo2 video{ 
    min-width: 100%;
    position: fixed;
	top:0;
	z-index: -9999;
}

.ParallaxVideo2 .container{ min-height:200px; height:100%; text-align:center }
.ParallaxVideo2 .inner{ display:inline-block; vertical-align:middle; text-align:center }
.ParallaxVideo2 p{ font-family: serif; font-size:15px; font-weight:bold; text-align:center }
.ParallaxVideo2 .block-title{ font-size:36px; font-weight:900;  }


/* edit paralaxvideo3 */
.konten{
    height:100%;
    }
.ParallaxVideo3{ 
	position:relative;
	bottom:0;
	height:500px;
    
	padding-bottom: 50px;
    padding-top: 50px; 
}
.ParallaxVideo3 video{ 
    min-width: 100%;
    position: fixed;
	top:0;
	z-index: -9999;
}

.ParallaxVideo3 .container{ min-height:200px; height:100%; text-align:center }
.ParallaxVideo3 .inner{ display:inline-block; vertical-align:middle; text-align:center }
.ParallaxVideo3 p{ font-family: serif; font-size:15px; font-weight:bold; text-align:center }
.ParallaxVideo3 .block-title{ font-size:36px; font-weight:900;  }

/* float wa*/
#sidebarfloat {
  float : right;
  padding: 10px ;
  width:100%;
  color: #fff;
}
.btn-wa {
  float : right;
  background: #25D366; 
  padding: 10px ;
  border-radius: 15px;
  width:100%;
  color: #fff;
  width:100%;
}

/* about CSS */

.img-fluid{
 border-radius: 10px;
 border:1px solid #ddd;
 margin:10px;
}


/*
@media (max-width:720px){
    
#sidebarfloat{
  float : right;
  background: #efefef; 
  padding: 13px ;
  border-radius: 20px;
  width:70%;
  position:fixed;
 
}
}
@media (max-width:240px){
    
#sidebarfloat{
  float : right;
  background: #efefef; 
  padding: 13px ;
  border-radius: 20px;
  width:70%;
  position:fixed;
 
}
}
*/


video {
    border-radius: 10px;
   border:5px solid #ddd;
    }





/* Front Page - Open Content 
------------------------------------------------------------------------*/

.frontpage-open1 .btn {margin-top:5px; }

/* Front Page - Recent Posts
------------------------------------------------------------------------*/

.icon-link{ width:45px; height:45px; font-size:16px; line-height:45px; display:inline-block; vertical-align:middle; -webkit-border-radius:45px; -moz-border-radius:45px; border-radius:45px; text-align:center; margin:3px; -webkit-transform:translateZ(0); -moz-transform:translateZ(0); transform:translateZ(0); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; background-color:#140d0a; background-color:rgba(20,13,10,0.9); color:#fff; }
.icon-link.white{ color:#3f3f3f; background-color:#fff; background-color:rgba(255,255,255,0.9) }
.icon-link:after{ width:100%; position:absolute; height:100%; top:-3px; left:-3px; padding:3px; -webkit-transition:-webkit-transform 0.2s, opacity 0.2s; -webkit-transform:scale(.8); -moz-transition:-moz-transform 0.2s, opacity 0.2s; -moz-transform:scale(.8); -ms-transform:scale(.8); transition:transform 0.2s, opacity 0.2s; transform:scale(.8); opacity:0; content:''; -webkit-border-radius:45px; -moz-border-radius:45px; border-radius:45px; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; -webkit-box-shadow:0 0 0 2px #fff; box-shadow:0 0 0 2px #fff; }
.icon-link.white:after{ -webkit-box-shadow:0 0 0 2px #000; box-shadow:0 0 0 2px #000; }
.icon-link:hover{ background-color:#ffffff; color:#000; }
.icon-link.white:hover{ background-color:#000; color:#ffffff; }
.icon-link:hover:after{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); opacity:1; }


/** post berita home ***/

/**edit**/
.imgnews {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middlenews {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .imgnews {
  opacity: 0.3;
}

.container:hover .middlenews {
  opacity: 1;
}

/** post berita home awal ***/
.recent-entry{ margin-bottom:30px; }

.recent-entry .recent-entry-image{ margin-bottom:30px; position:relative; overflow:hidden; display:block; max-width:100%; }
.recent-entry .recent-entry-image img{ height:auto; width:100%; }
.recent-entry .recent-entry-image .caption{ 
    position:absolute; left:0; top:-100%; text-align:center; width:100%; height:100%; 
    }
.recent-entry:hover .recent-entry-image .caption{ top:0; }
.recent-entry .recent-entry-image .caption .icon-link{ opacity:0 }
.recent-entry:hover .recent-entry-image .caption .icon-link{ opacity:1; }
.recent-entry .recent-entry-image .caption .caption-inner{ display:inline-block; vertical-align:middle; }

.recent-entry .recent-entry-title{ margin:0 0 10px; line-height:1.2; /*letter-spacing:-1px;*/}
.recent-entry .recent-entry-title a{ color:inherit; }

.recent-entry .recent-entry-content{ position:relative; padding-bottom:15px; margin-bottom:20px; font-size:13px; }
.recent-entry .recent-entry-content p:last-child{ margin-bottom:0; }
.recent-entry .recent-entry-content:after{ height:0; position:absolute; bottom:0; left:0; width:50px; content:""; }

.recent-entry .recent-entry-meta{ font-family:'Lato', sans-serif; font-weight:600; font-size:12px; margin-bottom:15px; }
.recent-entry .recent-entry-meta a{ font-weight:600; }
.recent-entry .recent-entry-meta .sep{ margin:0 5px; }
.recent-entry .recent-entry-meta label{ font-weight:600; margin-bottom:0; margin-right:10px;}

.recent-entry .recent-entry-buttons .btn{ min-width:125px; padding-left:10px; padding-right:12px; margin-right:5px; margin-bottom:5px; }


/* 404 Page
------------------------------------------------------------------------*/

.error-content{ text-align: center; }
.error-content h2{font-size: 180px; line-height: 200px; padding-bottom: 20px; color: #777; }
.error-content h3{text-transform:uppercase; }

/* Google Map 
-----------------------------------------------------------------------*/
.map iframe{ display:block; max-width:100% }
.map iframe{ border:5px solid #262525 !important }

/* Comments
------------------------------------------------------------------------*/

.comments-area{border-top:1px solid #3f3f3f; padding-top:30px;}

h3#comments{ color: #fda403;font-family: "Lato",sans-serif;font-weight: 400;margin: 0 0 20px; }

.commentlist{list-style:none;margin:0 0 40px;padding:0 0 15px;border-bottom:1px solid #3f3f3f}
.commentlist ul{list-style:none;margin:0;padding:1px 0}
.commentlist ul.children{margin-left:50px}
.commentlist li{position:relative;padding:1px 0}
.commentlist .avatar{width:80px;height:80px;float:left;background-color:#3f3f3f;left:-100px;top:0;position:absolute}
.commentlist ul.children .avatar{width:50px;height:50px;left:-70px}
.commentlist ul.children ul.children .avatar{width:35px;height:35px;left:-55px}
.commentlist .comment-body{position:relative;margin-left:100px;padding:20px 20px 10px;min-height:80px;margin-bottom:30px;background-color:#f1f1f1;border:1px solid #d3d3d3;}
.commentlist ul.children  .comment-body{margin-left:70px}
.commentlist ul.children ul.children .comment-body{margin-left:55px}
.commentlist .comment-body:before{position:absolute;left:-11px;top:19px;content:"";width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-right:11px solid #d3d3d3;}
.commentlist .comment-body:after{position:absolute;left:-10px;top:20px;content:"";width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #f1f1f1;}
.commentlist ul.children .comment-body:before,
.commentlist ul.children ul.children .comment-body:before{top:14px}
.commentlist ul.children .comment-body:after,
.commentlist ul.children ul.children .comment-body:after{top:15px}
.commentlist .comment-author{line-height:1.3}
.commentlist .comment-author .fn a,
.commentlist .comment-author .fn{font-family:'Lato', sans-serif;font-size:13px;text-transform:uppercase;font-style:normal}
.commentlist .comment-author .says{display:none}
.commentlist .comment-meta{margin:0 0 10px;color:#999;font-size:12px}
.commentlist .comment-meta a{color:inherit}
#respond h3{color: #fda403;font-family: "Lato",sans-serif;font-weight: 400;margin: 20px 0 20px;font-size: 20px; text-transform:uppercase;}
#commentform input[type="text"],#commentform textarea{border:1px solid #aaa;height:40px;color:#555;font-size:14px;padding:6px 12px;line-height:1.42857;width:100%;max-width:500px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset}
#commentform textarea{height:auto;max-width:inherit}
#commentform label{display:block;font-weight:600;line-height:1.3;margin:0;padding:0 0 10px;/*position:absolute;left:0;top:0*/}
#commentform p{position:relative;padding-top:25px}
#commentform #submit{color:#3f3f3f;border:0;font-size: 13px;text-transform:uppercase;font-weight:600;padding: 13px 20px;}
.comments-area .navigation a { color: black; text-transform: uppercase; }
p.nocomments { font-size: 16px; text-transform: uppercase; color: #666; }

/* Footer
------------------------------------------------------------------------*/

.footer{ padding:20px 0 20px; background-color:#fda403; }

.copyright{ text-align:right; font-size:11px; margin-right:45px; line-height:1.3; color:#fff; }
.copyright a{ text-decoration:none; color:#fff; }
.copyright a:hover{color:#fff;}

/* Footer Widgets
------------------------------------------------------------------------*/

.footer-widgets{ padding:40px 0 10px }

.footer-widgets .widget-title{ padding-bottom:10px; border-bottom:none; }
.footer-widgets .widget-title:after{ content:""; height:0px; width:50px; position:absolute; bottom:-2px; left:0; margin-left:0px;  }

.footer-widgets .textwidget{padding-right:10px;}

/* Footer Nav
------------------------------------------------------------------------*/

.nav-foot{ list-style:none; margin:0;  padding:0 }
.nav-foot li{ display:inline-block; font-family:'Lato', sans-serif; margin-right:20px; font-size:12px; }
.nav-foot li a{ display:block; font-weight:600; color:#fff; }

/* Back to Top
------------------------------------------------------------------------*/

#back_to_top{ position:fixed; opacity:0; bottom:-90px; left:0; width:100%; height:0px; z-index:1000; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0); outline:none; -webkit-box-shadow:0 0 0 50px transparent; -moz-box-shadow:0 0 0 50px transparent; box-shadow:0 0 0 50px transparent; }
#back_to_top.show{ opacity:1; bottom:0; -webkit-box-shadow:0 0 0 0 #000; -moz-box-shadow:0 0 0 0 #000; box-shadow:0 0 0 0 #000; }
#back_to_top .container{ position:relative; height:0; }
#back_to_top a{ text-align:center; line-height:46px; position:absolute; bottom:10px; right:0; width:50px; height:50px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; background-color:#000; color:#fff; -webkit-box-shadow:0 0 0 10px transparent; -moz-box-shadow:0 0 0 10px transparent; box-shadow:0 0 0 10px transparent; opacity:0.8; filter:alpha(opacity=80); filter:-ms-alpha(opacity=80); }
#back_to_top.scroll a{ opacity:1; filter:alpha(opacity=100); filter:-ms-alpha(opacity=100); }
#back_to_top a:hover{ opacity:1; filter:alpha(opacity=100); filter:-ms-alpha(opacity=100); outline:none; background-color:#3f3f3f; -webkit-box-shadow:0 0 0 0 #3f3f3f; -moz-box-shadow:0 0 0 0 #3f3f3f; box-shadow:0 0 0 0 #3f3f3f; }


/* Jetpack
------------------------------------------------------------------------*/
#jp-carousel-comments-loading { display: none !important; }
.jetpack-image-container img { width: 100%; height: auto; }


/* Wordpress Core
------------------------------------------------------------------------*/
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter,
div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float:right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto }
img.alignright { max-width:100%; height:auto;}
img.alignnone { max-width:100%; height:auto;}
img.alignleft { max-width:100%; height:auto;}
img.aligncenter { max-width:100%; height:auto;}
.wp-caption { max-width: 100%; /* Image does not overflow the content area */ }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; margin-top: 10px; padding: 0 4px 5px; }
/* Text meant only for screen readers. */
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ }
.sticky,
.gallery-caption,
.bypostauthor {}

/* qTranslateX
------------------------------------------------------------------------*/

.qtranxs_widget ul li a:before{content:none;}
.qtranxs_widget ul li a{padding-left:0px}

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {background-color: #000;}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {border-radius:0px;}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {background-color: #000000;}

/* ----------------------------------------------------------------------*/
/* MEDIA QUERIES
/* ----------------------------------------------------------------------*/


/* MIN WIDTH 1200
------------------------------------------------------------------------*/
@media (min-width:1200px){

    .container{ width:1130px }

}

/* MIN WIDTH 768
------------------------------------------------------------------------*/
@media (min-width:768px){

    .navbar-nav>li>a{ padding-top:25px; padding-bottom:25px }

}

/* MAX WIDTH 991
------------------------------------------------------------------------*/
@media (max-width:991px){
    
    .nav-foot{ text-align:center; margin-bottom:15px; }
    .copyright{ text-align:center; margin-right:0; }
    
}

/* MIN WIDTH 992 + MAX WIDTH 1199
------------------------------------------------------------------------*/
@media (min-width:992px) and (max-width:1199px){

}

/* MIN WIDTH 768 + MAX WIDTH 991
------------------------------------------------------------------------*/
@media (min-width:768px) and (max-width:991px){
    
    .recent-entry .recent-entry-meta .btn{ font-size:9px; line-height:18px; width:85px; }
	.navbar-custom .navbar-nav > li > a{ padding-left:10px; padding-right:10px; }

}

/* MAX WIDTH 767
------------------------------------------------------------------------*/
@media (max-width:767px){
    
    h1{ font-size:30px; }
    h2{ font-size:28px; }
    h3{ font-size:26px; }
    h4{ font-size:18px; }
    h5{ font-size:16px; }
    h6{ font-size:16px; }

	.center-on-mobile{ text-align:center !important; }
	.center-on-mobile *{ text-align:center !important; }
	.center-on-mobile ul{ display:inline-block; }
	.center-on-mobile ul li{ text-align:left !important; }

    .navbar-custom .navbar-nav > li > a{ padding:5px 15px }
    .navbar-custom .navbar-nav > li > a { line-height: 20px; }
    .navbar-custom .dropdown-menu{ padding:2px 0 2px 25px }
    .navbar-custom .open .dropdown-menu > li > a, 
    .navbar-custom .open .dropdown-menu .dropdown-header{ padding:5px 15px }
    .navbar-custom .dropdown-menu > li > a .fa{ top:4px }
    .navbar-custom .dropdown-menu > li > a:hover,
    .navbar-custom .dropdown-menu > li:hover > a ,
    .navbar-custom .dropdown-menu > .open > a{ color:#fff; background:#fda403 }
    .navbar-custom .navbar-collapse{ -webkit-box-shadow:0 1px 0 rgba(58,57,57,0.1) inset; -moz-box-shadow:0 1px 0 rgba(58,57,57,0.1) inset; box-shadow:0 1px 0 rgba(58,57,57,0.1) inset; }
    .navbar-custom .nav > .current > a, 
    .navbar-custom .nav > .open > a{ background-color:#fda403; color:#fff; }
    
    .content-icon .body{ height:auto; }
    
    .top-menu{border-left:0;margin:0 -15px;text-align:center}
	.top-menu > li > a{padding:5px 15px}
	.header .top-menu{float:none;}
	.header .top-menu> li{border-bottom:0;float:none;display:inline-block;vertical-align:top}
    
    .header{max-height:0;margin:0;overflow:hidden;-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;}
	.header.open{max-height:300px}
    
    .header-toggle{display:block}
    
}

/* MAX WIDTH 680
------------------------------------------------------------------------*/
@media (max-width:680px){

    .blog-feed .entry .entry-image-left{ float:none;}
    .blog-feed .entry .entry-image-left img {width:100%;height:auto}
    .blog-feed .entry .entry-meta, 
    .blog-feed .entry .entry-buttons, 
    .blog-feed .entry .entry-content-right{ margin-left:0 }
    
}

/* MAX WIDTH 540
------------------------------------------------------------------------*/
@media (max-width:540px){
    
}

/* MAX WIDTH 480
------------------------------------------------------------------------*/
@media (max-width:480px){
    .recent-entry .recent-entry-meta .btn{ font-size:9px; line-height:18px; width:85px }
	.commentlist .avatar{left:0;top:-100px}
	.commentlist ul.children,
	.commentlist ul.children ul.children{margin-left:10px}
	.commentlist ul.children .avatar{left:0;top:-70px}
	.commentlist ul.children ul.children .avatar{left:0;top:-55px}
	.commentlist .comment-body{margin-left:0;margin-top:100px}
	.commentlist ul.children  .comment-body{margin-left:0;margin-top:70px}
	.commentlist ul.children ul.children .comment-body{margin-left:0;margin-top:55px}
	.commentlist .comment-body:before{left:10px;top:-11px;border-top:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:11px solid #d3d3d3;}
    .commentlist .comment-body:after{left:11px;top:-10px;border-top:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #f1f1f1;}
    .commentlist ul.children .comment-body:before,.commentlist ul.children ul.children .comment-body:before{top:-11px}
    .commentlist ul.children .comment-body:after,.commentlist ul.children ul.children .comment-body:after{top:-10px}
    .frontpage-cta {padding:60px;}
    .frontpage-cta p{ font-size:18px; font-weight:bold; }
    
}

/* MAX WIDTH 400
------------------------------------------------------------------------*/
@media (max-width:400px){

    .recent-entry .recent-entry-meta .btn{ font-size:9px; line-height:18px; width:85px; }
    
}

/* FULL SCREEN BANNER
------------------------------------------------------------------------*/
@media (min-width:320px){
    .image-banner.full-screen{ height:480px; }
    .frontpage-banner.frontpage-banner-parallax-bg{padding:60px 0;}
    .frontpage-banner.image-banner.frontpage-banner .block-title{font-size:24px;}
    .frontpage-banner.image-banner p {font-size: 18px;}
}
@media (min-width:360px){
	.image-banner.full-screen{ height:640px; }
    .frontpage-banner.frontpage-banner-parallax-bg{padding:80px 0;}
    .frontpage-banner.image-banner.frontpage-banner .block-title{font-size:24px;}
    .frontpage-banner.image-banner p {font-size: 18px;}
}
@media (min-width:480px){
    .image-banner.full-screen{ height:800px; }
    .frontpage-banner.frontpage-banner-parallax-bg{padding:100px 0;}
    .frontpage-banner.image-banner.frontpage-banner .block-title{font-size:36px;}
    .frontpage-banner.image-banner p {font-size: 18px;}
}
@media (min-width:768px){
	.image-banner.full-screen{ height:1024px; }
    .frontpage-banner.image-banner.frontpage-banner .block-title{font-size:48px;}
    .frontpage-banner.image-banner p {font-size: 20px; font-weight:bold;}
    .frontpage-banner.frontpage-banner-parallax-bg{padding:120px 0;}
}
@media (min-width:1280px){
	.image-banner.full-screen{ height:720px; }
    .frontpage-banner.frontpage-banner-parallax-bg{ margin:0; padding:180px 0 160px; } 
}
@media (min-width:1440px){
	.image-banner.full-screen{ height:900px; }
    .frontpage-banner.frontpage-banner-parallax-bg{ margin:0; padding:180px 0 160px; } 
}
@media (min-width:1366px){
    .image-banner.full-screen{height:768px; }
    .frontpage-banner.frontpage-banner-parallax-bg{ margin:0; padding:180px 0 160px; } 
}
@media (min-width:1920px){
	.image-banner.full-screen{ height:1080px; }
    .frontpage-banner.frontpage-banner-parallax-bg{ margin:0; padding:180px 0 160px; } 
}


/*** css floating audio ***/
.floating-audio {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 330px;
  max-width: calc(100vw - 36px);
  padding: 10px 12px;
  background: rgba(34, 34, 34, 0.92);
  color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
}

.floating-audio-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--accent-color);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.25s ease;
}

.floating-audio-btn:hover,
.floating-audio-btn.is-playing {
  transform: scale(1.06);
  background: #ffffff;
  color: var(--accent-color);
}

.floating-audio-btn i {
  font-size: 24px;
  line-height: 1;
}

.floating-audio-info {
  min-width: 0;
  flex: 1;
}

.floating-audio-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #ffffff;
  opacity: 0.9;
  margin-bottom: 2px;
}

.floating-audio-title {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.floating-audio-track {
  display: inline-flex;
  white-space: nowrap;
  animation: floatingAudioMarquee 18s linear infinite;
}

.floating-audio-track span {
  display: inline-block;
  padding-right: 35px;
  font-size: 12px;
  color: #ffffff;
}

@keyframes floatingAudioMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 575px) {
  .floating-audio {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    padding: 9px 10px;
  }

  .floating-audio-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .floating-audio-track span {
    font-size: 11px;
  }
}
.floating-audio {
  position: fixed;
  left: 16px;
  bottom: 16px;
  right: auto;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 230px;
  max-width: 230px;
  padding: 8px 12px 8px 8px;
  background: linear-gradient(90deg, #252529 0%, #30282d 100%);
  color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.floating-audio-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #e60012;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  padding: 0;
}

.play-triangle {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #e60012;
  margin-left: 3px;
  display: inline-block;
}

.floating-audio-btn.is-playing .play-triangle {
  width: 12px;
  height: 14px;
  border: 0;
  margin-left: 0;
  background: linear-gradient(
    to right,
    #e60012 0,
    #e60012 4px,
    transparent 4px,
    transparent 8px,
    #e60012 8px,
    #e60012 12px
  );
}

.floating-audio-info {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.floating-audio-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #ffffff;
  margin-bottom: 2px;
  white-space: nowrap;
}

.floating-audio-title {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.floating-audio-track {
  display: inline-flex;
  white-space: nowrap;
  animation: floatingAudioMarquee 16s linear infinite;
}

.floating-audio-track span {
  display: inline-block;
  padding-right: 28px;
  font-size: 10px;
  color: #ffffff;
}

@keyframes floatingAudioMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 575px) {
  .floating-audio {
    left: 10px;
    right: auto;
    bottom: 14px;
    width: 205px;
    max-width: 205px;
    padding: 7px 10px 7px 7px;
    z-index: 9980;
  }

  .floating-audio-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .play-triangle {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid #e60012;
  }

  .floating-audio-label {
    font-size: 8px;
  }

  .floating-audio-track span {
    font-size: 9px;
    padding-right: 22px;
  }
}

/* Klien Kami Slider */
#klien-slider {
  overflow: hidden;
  padding: 0 10px;
}

#klien-slider .slick-list {
  margin: 0 -12px;
}

#klien-slider .slick-slide {
  margin: 0 !important;
  padding: 0 12px;
  box-sizing: border-box;
}

#klien-slider .slide-klien {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#klien-slider .slide-klien img {
  width: 100%;
  max-width: 180px;
  height: 138px;
  object-fit: contain;
  margin: 0 auto;
  padding: 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

@media (max-width: 1199px) {
  #klien-slider .slide-klien img {
    max-width: 220px;
    height: 145px;
  }
}

@media (max-width: 767px) {
  #klien-slider {
    padding: 0 20px;
  }

  #klien-slider .slick-list {
    margin: 0;
  }

  #klien-slider .slick-slide {
    padding: 0;
  }

  #klien-slider .slide-klien img {
    max-width: 240px;
    height: 150px;
  }
}