@import url('https://fonts.googleapis.com/css?family=Barlow:400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css?family=El+Messiri:600,700&display=swap');

h1,h3,h4,h5,h6{font-family: 'Montserrat', sans-serif;}
h2{font-family: 'El Messiri', sans-serif;}
header video, header .poster{min-width: 100%!important; min-height: 100%!important; position: absolute;}
header .overlay{position: absolute;width: 100%; height:100vh; background: rgba(0, 0, 0, 0.56); left: 0; top:0;}

/* header .container{width: 1170px!important} */
header .logo img{height: 65px; margin-top: 20px;}

header nav{background: #FFF; height: 180px; line-height: 59px; margin-bottom: 70px; border-radius: 4px;}
header nav a{letter-spacing: 1px; color: #000!important; padding: 0px 25px; font-weight: bold;font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 14px;}
#dropdown1 a{font-size: 12.5px!important; padding: 12px 14px;}
header nav a i{line-height: 90px!important;}
body{
  top: 0px!important;
  margin-top: 180px;
}
.sidenav li>a{
  color: #000!important; padding: 0px 25px; font-family: 'El Messiri', sans-serif; text-transform: uppercase; font-size: 14px;
}
.separator{background: url('/assets/img/separator.svg'); width: 250px; height: 35px;display: inline-block;}

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

.box-nav{position: absolute;left: 0; bottom:50px; width: 100%;}
.tagline{color: #FFF; font-family: 'Barlow', sans-serif; position: absolute; bottom: 200px}
.tagline img{display: block; margin-bottom: 40px; max-width: 100%;}
.tagline h2{margin-top: 26px; margin-bottom: 46px; font-size: 60px; line-height: 70px;}
.tagline p{font-style: italic; font-size: 24px; color:#f2c94c; font-weight: 400;}

.search-button i{height: 90px!important;}

.account-button #bima-nav-customer{background: #b92424; color: #FFF; display: inline-block; height: 53px; line-height: 53px; padding: 0px; border-radius: 10px; margin-right: 10px; margin-left: 10px}
.account-button #bima-nav-customer a{display: inline-block; padding: 0px 15px; color: #FFF!important;}
.account-button #bima-nav-customer a:first-child{padding-left: 25px; padding-right: 5px;}
.account-button #bima-nav-customer a:last-child{padding-left: 5px; padding-right: 25px;}
.account-button #bima-nav-customer a:hover,.account-button #bima-nav-customer a:focus{background: transparent!important;}

.container-scrolldown{position: absolute; bottom: 0; width: 100%; left: 0;}
.scrolldownicon{display: block; width: 40px; margin: auto; clear: both;}

.v-header {height: 100vh;display: flex;align-items:center;color: #fff; position: relative;}
.fullscreen-video-wrapper {position: absolute;top: 0;	left: 0;width: 100%;height: 100vh;overflow: hidden;}
.fullscreen-video-wrapper video {min-height: 100%;min-width: 100%;}

.sidenav .divider{margin: 0px!important}

.search-container{position: fixed; top: -56px; left: 0; width: 100%; background: #111; z-index: 9;}
.search-container form{background: #0a0a0a!important;border-radius: 4px; margin: 8px 0px;}
.search-container button,.search-container .form-control{width: 100%; background: #0a0a0a!important; color: #EEE; border: none!important; box-shadow: none!important; margin: 0px!important; height: 40px!important; line-height: 40px!important; font-size: 14px!important}
.search-container .row{margin: 0px;}
.search-container button{text-align: right;padding-right: 10px}

header.not-home-page{height: 90px;}
.not-home-page nav.nav-desktop{margin: 0px;}
.not-home-page .box-nav{position: static;}

nav, .not-home-page nav.nav-desktop{position: fixed; box-shadow: none!important; top:0; left: 0; width: 100%;z-index: 999}
nav .navlogo, .not-home-page nav.nav-desktop .navlogo{display:inline-block;}
nav .navlogo img, .not-home-page nav.nav-desktop .navlogo img{height: 60px; line-height: 90px; display: inline-block; margin-top: 18px;}
header nav a, .not-home-page nav.nav-desktop a{padding: 0 13px}
.dropdown-content{
  height: 450px!important;
  top: 89%!important;
  box-shadow: none!important;
  width: 200px!important;
  overflow-y: unset!important;
}
.dropdown-content-mobile li{
    clear: both;
    color: rgba(0,0,0,0.87);
    cursor: pointer;
    min-height: 50px;
    line-height: 1.5rem;
    width: 100%;
    text-align: left;

}
.dropdown-content-mobile{
  background-color: #fff;
  margin: 0;
  display: none;
  min-width: 100px;
  overflow-y: auto;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  box-shadow: none!important;
}
header .navbar-center ul a:hover {
    border-bottom: 2px solid #6c1812;
    background: none!important;
}
header .navbar-center #dropdown1 a:hover {
    border-bottom: none!important;
    background: transparent!important;
    background-color: none!important;
}
.goog-te-combo{height: 35px!important;}
  .goog-te-gadget{font-size: 0px!important;}
    .goog-logo-link,
    .goog-te-gadget span {
        display: none !important;
    }
    #google_translate_element {
        font-size: 0; /* Atur agar tidak ada space kosong */
    }

.skiptranslate{
  overflow: hidden!important;
  position: fixed;
  height: 42px;
  top: 110px;
  left: 20px;
  z-index: 9999;
}
.goog-te-combo{
  font-size: 11px!important;
  font-family: 'Barlow', sans-serif;
  display: block!important;
  height: 33px;
  margin-bottom: 10px;
  width: 95px!important;
  border: none!important;
  color: #000!important;
  padding: 5px 10px!important;
  border-radius: 30px!important;
  font-weight: 700!important;
  background-color: #f7f5f5;
}
.select-dropdown{
  width: 100%!important;
}

.home-product .item-product-category-homepage{
  padding: 10px 25px!important;
}
.kolom-kategori{padding-top: 0px!important;}
.title-kolom{padding-top: 50px; padding-bottom: 35px;}
.title-kolom h2{font-size: 36px; margin: 0px;}
.title-kolom .btn{margin-top: 6px; border: none; background: transparent; color: #1f1f1f; box-shadow: none; transition: none; border-radius: 4px;overflow: hidden; padding-right: 0px;}
.title-kolom .btn i{height: 17px; line-height: 10px; font-size: 14px; display: inline-block;}

img{max-width: 100%;}
.thumb-4-5{
   aspect-ratio: 4 / 5;
   overflow: hidden;
}
.thumb-4-5 img{
   width:100%;
    height:100%;
    object-fit:cover;
}


.item-product-category-homepage img{width: 100%;}
.item-product-category-homepage h3{text-align: center!important; font-size: 18px; font-weight: 600!important;color:#000;}
.item-product-category-homepage small{font-size: 14px; font-family: 'Barlow', sans-serif;}

.item-event-homepage{position: relative; margin-bottom: 15px;}
.item-event-homepage .thumbnail a{width: 100%; overflow: hidden;}
.item-event-homepage .thumbnail img{width: 100%; border-radius: 4px; padding: 20px;}
.item-event-homepage .img-activity{
  position: relative;
}
.item-event-homepage .content h3{font-family: 'El Messiri', sans-serif; font-size: 32px;color:#000; font-weight: 600; text-align: center; margin: 20px 0px!important;}
.item-event-homepage .overlay h3:hover{}
.item-event-homepage .overlay small{color: #fff;font-family: 'Poppins', sans-serif;}

.article-kolom{margin-top: 100px;}
.produk-overlay{margin-bottom: 50px;}
.produk-overlay h3{font-size: 20px; font-weight: 600!important; color: #000; text-align: center; margin: 0px;}
.item-article-homepage{position: relative; margin-bottom: 10px;border-radius: 4px; overflow: hidden;}
    transform: translate(-50%, -50%);
.item-article-homepage .overlay{bottom: 0; left: 0; width: 100%; position: absolute; padding: 0 1.5rem; padding-bottom: 1.5rem; background: rgb(255,255,255);
background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(17,17,17,0.7665441176470589) 66%);
background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(17,17,17,0.7665441176470589) 66%);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(17,17,17,0.7665441176470589) 66%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#111111",GradientType=1);}
.item-article-homepage img{width: 100%}
.item-article-homepage .content{margin-top: 20px;}
.item-article-homepage h3{font-family: 'El Messiri', sans-serif; font-size: 28px;color:#000!important; line-height: 24px;font-weight: 700; margin: 0px; margin-bottom: 10px!important;}
.item-article-homepage small{font-size: 12px; color: #797979;font-family: 'Poppins', sans-serif;}
.search-modern {
    margin-bottom: 25px;
}

.search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 10px 15px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.search-box:hover {
    border-color: #bdbdbd;
}

.search-box:focus-within {
    border-color: #2196f3;
    box-shadow: 0 0 0 3px rgba(33,150,243,0.1);
}

.search-icon {
    color: #999;
    margin-right: 10px;
    font-size: 14px;
}

.search-box input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
    color: #333;
    background: transparent;
}

.search-box input::placeholder {
    color: #aaa;
}

.clear-btn {
    cursor: pointer;
    font-size: 14px;
    color: #aaa;
    display: none;
    transition: 0.2s;
}

.clear-btn:hover {
    color: #f44336;
}
.form-group{display: inline-block!important; margin: 10px 0px;}
.modal-header{padding-bottom: 0px!important; border-bottom: 0px!important;}
.modal-header .close{background-color: #D1D3D4; opacity: initial; margin-top: -2px;position: absolute;padding: 0px 5px;right: 12px;top: 12px;border-radius: 50px;line-height: 26px;}
.modal-body{padding-top: 0px!important; padding-bottom: 0px!important;}
.modal-content h5{font-size: 12px;text-align: center;margin: 0px!important;color: #fff; padding-top: 15px;}
.modal-content p{text-align: center; font-size: 10px; color: #fff; margin: 0px 12px!important; padding-bottom: 15px;}
.modal-content .form-group .form-control{height: 34px!important;
    background-color: #D1D3D4!important;
    width: 200px;
    border-radius: 0px!important;
    box-shadow: none!important;
    margin: 0px!important;
    -webkit-transition: none!important;}
    .modal-trigger{
      border-radius: 50px;
    position: fixed;
    right: 14px;
    bottom: 75px;
    z-index: 999;
    }
.modalfooter{display: inline-block!important; border-top: none!important; padding-left: 0px!important;padding-right: 0px!important; margin-left: -10px; }
.modalfooter .btn{vertical-align: unset!important; width: 200px; background-color: #58595B!important;border-radius:0px!important; border-color: #58595B!important; height: 35px;}
.open{width: 450px; margin: auto!important; background-color: #000!important;}
.form-newsletter{background: url('../img/bgnewsletter.png?v=min') top left no-repeat; padding: 40px 40px; color: #FFF; margin-top: 100px;}
.form-newsletter h4{font-size: 24px; line-height: 36px; max-width: 480px; margin: 30px 0px; margin-top: 50px; font-weight: 500px!important;}
.form-newsletter form{background: #FFF;border-radius: 4px; max-width: 480px; margin-bottom: 20px;}
.form-newsletter form input{width: calc(100% - 100px)!important; border: none!important; box-shadow: none!important; padding: 0px 15px!important;}
.form-newsletter form button,.form-newsletter form button:hover, .form-newsletter form button:focus{width: 60px; background: transparent; color: #b11a1a; border: none; box-shadow: none; text-align: right;}

.slick-prev:before,.slick-next:before{color: #000!important; font-size: 25px!important; line-height: 2!important;}
.video-youtube-item{position: relative; display: block;}
.video-youtube-item img{width: 100%}
.video-youtube-item .overlay{width: 100%; height: 100%; left: 0; top:0; position: absolute; background: rgba(0,0,0,0.4);}
.video-youtube-item .overlay span{color: #EEE; display: block; padding: 10px;}
.video-youtube-item .overlay i{width: 30px; height: 30px; margin: 50px auto; display: block; color: #b92424; background: #FFF; border-radius: 100%; text-align: center; padding-top: 4px; font-size: 20px;}

.title-kolom .btn:hover{background:transparent!important;}


.btn.youtube,.btn.youtube:hover,.btn.youtube:focus{background: #b92424!important; color: #FFF; font-size: 14px; height: auto; padding: 15px; line-height: 20px; border-radius: 4px;}
.btn.youtube i{color: #b92424; background: #FFF; width: 30px; height: 20px; border-radius: 5px; display: inline-block; text-align: center; padding-top: 4px; margin-right: 5px;}

h1, h4{
  font-family: 'Montserrat', sans-serif!important;
  font-weight: normal!important;
}
p{
  font-family: 'Montserrat', sans-serif!important;
}

.youtube-kolom p{
 text-align: center;
 font-size: 20px;
 margin: 0px!important;
}
.youtube-kolom h2{
 color: #000!important;
 background: none!important;
}
.autoplay .slick-slide{
  transform: scale(1);
  transition: opacity .3s ease;
}
.autoplay .slick-slide.slick-active{
  animation: grow 1s linear forwards;
  opacity: 1;
}
@keyframes grow
{
0%, 20%
{
  transform: scale(1);
}
75%, 100%
{
  transform: scale(1.1);
}
}
.autoplay .thumbnail{
  position: relative;
}
.autoplay .thumbnail .content{
  position: absolute;
  right: 7%;
  top: 25%;
}
.autoplay .thumbnail .content h1{
  color: #000;
  text-align: right;
  margin: 0px!important;
  font-size: 22px;
}
.autoplay .thumbnail .content p{
  text-align: right;
  max-width: 220px;
  font-size: 12px;
}
iframe{
  width: 100%;
}
.title-kolom{
  position: relative;
}
.button-shop-now{
  margin-top: 20px;
  margin-bottom: 25px;
}
.product-images .slider-nav img{
  width: 80px!important;
}
.button-shop-now a{
  color: #fff;
  background-color: #b92424;
  padding: 10px 20px;
  width: 120px;
}
.slick-dots li.slick-active button:before{
  color: #b50001;
}
.slick-dots li button:before {
    font-family: 'slick';
    font-size: 15px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots{
  bottom: 5px!important;
}
.autoplaygallery{
.slick-slide img {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 80% !important;
}
}

.youtube-box{max-width: 370px; width: 100%; padding-top: 100px; padding-bottom: 100px; margin: auto;}
.youtube-box>div{display: table-cell;vertical-align: top;}
.youtube-box .photo{width: 100px; height: 80px;}
.youtube-box .photo span{display: block;;width: 80px; height: 80px; background: #FFF; border-radius: 100%; padding: 10px; padding-top: 25px;}
.youtube-box .photo span img{width: 100%;}
.youtube-box .info strong{font-size: 18px; font-weight: 600; display: block; margin-bottom: 5px;}

.youtube-kolom{padding: 80px 0px 50px;}

.footer-top{background: url('https://www.sarungatlas.co.id/bima-content/2023/02/23/l-lalala-181c08649fd38837f7852c6f3d698fd6420230223145711-bimacms.png'); background-size: cover;padding-top: 30px;color:#EEE; padding-bottom: 30px;}
.footer-top .medsos-footer{max-width: 220px; margin: auto; text-align: center;}
.footer-top .medsos-footer img{max-width: 34px; padding: 5px;}
footer .logo img{height: 64px; margin-bottom: 30px;}
footer .text-footer{font-size: 16px; text-align: center; color:#DDD}

footer .box-external-maket p{color:#EEE!important}
.box-external-maket{width: 100%}
.box-external-maket ul{width: 100%;}
.box-external-maket ul li{list-style: none; margin: 0px; display: inline-block;}
.box-external-maket ul li a{display: inline-block; border-radius: 8px; overflow: hidden; height: 50px; display: table-cell; vertical-align: middle; padding-left: 10px; padding-right: 10px;}
.box-external-maket ul li a img{width: 100px;}

.footer-bottom h4{text-align: center; font-size: 20px; margin: 0px!important; padding-top: 50px;}
.footer-bottom .logo-sarung img{float: right; padding-top: 40px!important; max-width: 420px;}
.footer-bottom{color:#303030; font-size: 12px}
.footer-bottom .copyright{line-height: 40px;}
.footer-bottom .item-link.social{width: 100%; text-align: right;}
.footer-bottom .item-link.social>a{display: inline-block; font-size: 25px; padding: 10px; border: 0px; border-radius: 4px; width:40px; height: 40px; text-align: center; color: #999;}
.footer-sertifikasi img {text-align: center; padding: 0px; margin: auto!important;display: block;}
.nav-desktop .navlogo a:hover{background: none!important}

.full-width{width: 100%;}
nav.mobile .navlogo a img{height: 30px; margin-top: 10px;}

.title-page{font-weight: bold;font-size: 32px;padding-top: 12px; margin: 0px;}

.btn, .btn-large, .btn-small,.btn:hover, .btn-large:hover, .btn-small:hover, .btn:focus{background-color: #6c1812;}


.product-images .slider{height: auto;}

#single-product .box-external-maket ul li a{border: #EEE solid 1px; height:76px!important;}
#single-product .sub-title,#single-product .box-external-maket p{font-size: 75%; margin-top: 40px;}
.autoplay img{
  width: 100%;
}
.whatsapp-link a{
  position: fixed;
    right: 10px;
    bottom: 10px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: none!important;
    display: block;
    font-size: 30px;
    text-align: center;
    padding-top: 4px;
    color: #FFF;
    z-index: 999;
}
.whatsapp-link svg{
  margin-bottom: 3px;
}
@media (min-width: 1200px){
  .container{min-width: 1170px!important}
}
@media (max-width: 992px){
  .skiptranslate{
    bottom: 75px!important;
    top: auto!important;
    position: fixed!important;
  }
  .sosmed-sertifikasi{
    width: 80%!important;
  }
}
@media (max-width:1169px){
  header .overlay, header .box-nav{padding: 0 .75rem}
  /* header .container{width: 100%!important;} */
  /* header nav a{padding: 0 15px} */
}

@media (max-width:992px){
  body{margin-top: 0px!important;}


  .produk-overlay h3{font-size: 20px; height: 44px;}
  .item-event-homepage .content h3{font-family: 'Barlow', sans-serif; font-size: 28px; height: 60px; margin: 0px!important;}
  .slick-prev:before,.slick-next:before{display: none;}
  .slick-prev,.slick-next{display: none!important;}
  .item-event-homepage .thumbnail img{padding: 0px;}
  .white-space{height: 200px!important;}
  .produk-overlay {margin-bottom: 0px!important; margin-top: 15px;}
  .navlogo{height: 50px;}
  .autoplay .thumbnail .content p{float: right;max-width: 200px;font-size: 10px;}
  .autoplay .thumbnail .content{right: 7%; top: 30%;}
  nav img{padding: 0px!important;}
  header .logo,.tagline img{text-align: center; margin-left: auto; margin-right: auto;}
  nav.mobile{box-shadow: none!important; position: fixed; top: 0; left: 0; width: 100%; margin: 0px; border-radius: 0px; line-height: 50px; height: 50px; z-index: 99}
  nav.mobile .search-button i,nav.mobile .search-button svg{height: 50px!important; line-height: 50px!important;color: #a62a23;}
  nav.mobile .search-button svg{font-size: 20px;display: inline-block;}
  nav.mobile ul{display: table; width: 100%}
  nav.mobile ul li{display: table-cell; float: none; vertical-align: top;}
  nav.mobile ul li a{text-align: center;}
  nav.mobile ul li a.sidenav-trigger{float: none!important; height: 50px!important;margin: 0px!important;}
  .container-scrolldown{bottom: 110px}
  .tagline .icon{width: 100px}
  .tagline .text{width: 240px}
  header video, header .poster{margin-left: calc(100% - 130vh);}
  .tagline{margin-top: 160px; position: static;}
  .autoplay img {
  margin-top: 50px;
  }
  header.not-home-page{height: 0px;}

  .filter-content{position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #FFF; z-index: 99999999; padding: 10px 20px; overflow: auto;}

  .video-youtube-item .overlay i{margin: 25px auto;}
  .title-kolom h2 { font-size: 32px;}
  .item-product-category-homepage{margin-bottom: 20px;}
  .item-product-category-homepage .content{height: 40px;}
  .item-product-category-homepage h3 { font-size: 14px; margin-top: 10px;}
  .pruduk-wrapper{margin-top: 30px;}
  .font-outlet{
    margin: 20px;
    height: 88px;
    font-size: 40px;
    font-weight: 100!important;
    color: #fff;
    font-style: normal;
  }

  .item-event-homepage .overlay h3{font-size: 20px;}
  .item-event-homepage .overlay small{font-size: 10px;}

  .item-article-homepage{margin-bottom: 40px;}
  .item-article-homepage .content{margin-top: 10px;}
  .item-article-homepage h3{margin: 0px!important; font-size: 20px;}
  .item-article-homepage small{font-size: 10px;}

  .autoplay .thumbnail .content{
    width: inherit;
  }
  .autoplay .thumbnail .content h1{
    font-size: 30px;
  }
  .footer-bottom .logo-sarung img{
    max-width: 100%!important;
  }
}
@media (max-width:700px){
.youtube-kolom{padding: 150px 0px 50px;}
footer .text-footer{font-size: 13px!important;}
iframe {margin-top: 30px;}
}
@media (max-width:768px){
.box-external-maket ul li a img{max-width: 80px; width: 100%!important;}
.footer-bottom .logo-sarung img{width: 100%; padding:30px 0px;}
footer .box-external-maket{margin-top: 20px!important;}
}
@media (max-width:1040px){
  .container{width: 90%; max-width: 1170px!important}
  /* header nav a{font-size: 12px;} */
}
.title-kolom h2{text-align: center; padding-top: 12px; padding-bottom: 6px; background-image: url('https://bimamedia-cms.ap-south-1.linodeobjects.com/demoatlas.bima.co.id/2023/02/22/l-atlas-web-design-2023-2-220230222143931.png');}
.background-motif{background-color:#EFEFEF;}
.bg-motif{background: url('https://bimamedia-cms.ap-south-1.linodeobjects.com/sarungatlas.co.id/2024/01/01/l-bg-220240101155536.png');}
@media (max-width:600px){
  .open{width: 350px;}
  .form-group .form-control{width: 150px!important;}
  .modalfooter .btn{width: 150px;}
  .article-kolom{
    margin-top: 0px!important;
  }
  .product-kolom .outlet .content{padding: 35px 0px;}
  .product-kolom .outlet{bottom: -15%!important;}
  .font-outlet{
  margin: 20px;
  height: 100%!important;
  max-height: 53px;
  font-size: 40px!important;
  font-weight: 100!important;
  color: #fff;
  font-style: normal;
  }
  .outlet-button .thumbnail-2{
    margin-top: 20px;
  }
  .autoplay .thumbnail .content{top: 32%; right: 7%;}
  .autoplay .thumbnail .content h1{font-size: 28px;}
  .sosmed-sertifikasi{
    width: 100%!important;
  }
}
@media (max-width:500px){
.footer-bottom .logo-sarung img {
    padding-top: 80px!important;
}
.box-external-maket ul li a{
  width: 80px;
}
}