/*COLOR*/
/*
BLACK #010101
BLACK LIGHT #272727
GREY #b7b7b4
WHITE #fcfbf7
PINK #c6ddd5
PINK LIGHT #cdddd2
*/
/*FONT*/
@font-face {
font-family: 'Conv_Montserrat-Regular';
src: url('fonts/Montserrat-Regular.eot');
src: local('☺'), url('fonts/Montserrat-Regular.woff') format('woff'), url('fonts/Montserrat-Regular.ttf') format('truetype'), url('fonts/Montserrat-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Conv_Montserrat-Light';
src: url('fonts/Montserrat-Light.eot');
src: local('☺'), url('fonts/Montserrat-Light.woff') format('woff'), url('fonts/Montserrat-Light.ttf') format('truetype'), url('fonts/Montserrat-Light.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Conv_TIMESR';
src: url('fonts/TIMESR.eot');
src: local('☺'), url('fonts/TIMESR.woff') format('woff'), url('fonts/TIMESR.ttf') format('truetype'), url('fonts/TIMESR.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
--bg: #fcfbf7;
--f-times: 'Conv_TIMESR';
--f-mon: 'Conv_Montserrat-Regular';
--f-monl: 'Conv_Montserrat-Light';
--c-black: #010101;
--c-blackl: #373737;
--c-white: #fcfbf7;
--c-pink: #c6ddd5;
--c-pinkl: #cdddd2;
--c-grey: #b7b7b4;
--f-xsmall: 13px;
--f-small: 15px;
--f-medium: 18.75px;
--f-large: 22.5px;
--f-xlarge: 37.5px;
--lh-xsmall : calc(var(--f-xsmall)*1.8);
--lh-small : calc(var(--f-small)*1.65);
--lh-medium : calc(var(--f-medium)*1.5);
--lh-large : calc(var(--f-large)*1.4);
--lh-xlarge : calc(var(--f-xlarge)*1.3);
--letter-1: 1px;
--line-1 : 1px solid #b7b7b4;
--line-2 : 1px solid #010101;
--space-1 : 10px;
--space-0 : calc(var(--space-1)/2);
--space-2 : calc(var(--space-1)*2);
--space-3 : calc(var(--space-1)*3);
--space-4 : calc(var(--space-1)*4);
--space-5 : calc(var(--space-1)*5);
--space-6 : calc(var(--space-1)*6);
--space-7 : calc(var(--space-1)*7);
--space-8 : calc(var(--space-1)*8);
}
i{font-family: 'italic';}
b, strong{}
/* Resets
------ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video, img {
display: block;
}
h1, h2, h3, h4, h5, h6{font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; line-height: inherit;}
*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline:none; box-sizing: border-box; margin: 0; padding: 0;}
a {text-decoration:none; border:none; outline:0; color: #0099dd;}
a:hover{color: #24354c;}
img{border:none; outline:0; max-width: 100%;}
.img-circle img{border-radius: 50%; display: inline-block;}
.cursor{cursor:pointer;}
textarea {resize: none;}
ul li{padding:0; list-style:none;}
ol{margin-left: 20px;}
ol li{padding-bottom: var(--space-0);}
.list-bullet li{list-style: disc; margin-left: 20px;}
.is-block{display:block;}
.is-inline{display:inline-block;}
.is-relative{position: relative; width: 100%;}
.f-left{float:left;}
.f-right{float:right;}
.is-left{text-align: left;}
.is-right{text-align: right;}
.is-center{text-align: center;}
.hidden{visibility:hidden; width:0px !important; height:0px !important; margin:0px !important; padding:0px !important;}
.m-no{display:block;}
.m-yes{display:none;}
.clear{clear:both; height:0;}
.line{border-bottom: var(--line-1);}
.line-2{border-bottom: var(--line-2);}
._w{color: #fff;}
/*SPACE*/
.space-0{margin-top: calc(var(--space-1)/2);}
.space-1{margin-top: calc(var(--space-1)*1);}
.space-2{margin-top: calc(var(--space-1)*2);}
.space-3{margin-top: calc(var(--space-1)*3);}
.space-4{margin-top: calc(var(--space-1)*4);}
.space-5{margin-top: calc(var(--space-1)*5);}
.space-6{margin-top: calc(var(--space-1)*6);}
.space-7{margin-top: calc(var(--space-1)*7);}
.space-8{margin-top: calc(var(--space-1)*8);}
/*TEXTFIELD*/
button{font-family: 'Conv_Montserrat-Regular';}
input {outline: none;}
input[type="text"], input[type="password"], input[type="date"], textarea, select, option{font-family: var(--f-monl);}
input:required, textarea:required {box-shadow: none}
::-webkit-input-placeholder{color:#a4b4b5;}
:-ms-input-placeholder{color:#a4b4b5;}
::-moz-placeholder{color:#a4b4b5; opacity: 1;}
:-moz-placeholde {color:#a4b4b5; opacity: 1;}
input[type="date"]{background: url(../img/icon-calendar.png) no-repeat right; background-size: 18px 16px;}
.searchfield ::placeholder {color: var(--c-blackl); opacity: 1;}
.searchfield :-ms-input-placeholder {color: var(--c-blackl);}
.searchfield ::-ms-input-placeholder {color: var(--c-blackl);}
.searchbox{
width: 80%;
height: 32px;
border: none;
background:none;
color: var(--c-blackl);
font-size: var(--f-medium);
padding:6px 0 0 0;
outline:none;
}
.searchfield{position: relative; width: 100%; height: 50px; background: transparent; border-bottom: var(--line-1);}
.searchbtn{position: absolute; top: 0; right: 0; background: url(../img/icon-share.png) no-repeat -73px -57px; background-size: 590px 339px; width: 32px; height: 32px;}
/*SELECT*/
select {-webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: '';}
select:focus {outline: none;}
.styled-select {position: relative; width: 70%; height: 50px; background: transparent; border-bottom: var(--line-1);}
.contact-form .styled-select {width: 100%;}
.styled-select select {
color: var(--c-blackl); font-size: var(--f-medium);
background: transparent; border:none;
width: 100%; height: 70px; padding: 5px; margin-top: -18px;
position:absolute; z-index:10;
outline:none;cursor:pointer;
}
.contact-form .styled-select select {width: 100%; margin-top: -10px;}
.styled-select select option{border:none; padding-left:12px;}
.btn-select{position: absolute; top: 0; right: 0; background: #fff url(../img/icon-share.png) no-repeat -506px -2px; background-size: 590px 339px; width: 82px; height: 80px; margin-top: -20px; z-index: 0;}
.row._select{justify-content: flex-start;}
._select .desc{padding-top: 3px; padding-right: 10px;}
.submenu-dropdown {position: relative; width: 280px; height: 62px; background: transparent;}
.submenu-dropdown select {
font-family: var(--f-times); font-style: italic; color: var(--c-blackl); font-size: var(--f-medium);
background: var(--c-pink); padding-left: 30px; border:none;
width: 280px; height: 62px;
border-radius: 30px;
position:absolute; left: 0; z-index:10;
outline:none;cursor:pointer;
-webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2);
}
.btn-drop{position: absolute; top: 0; right: 0; display: block; z-index: 11; background: url("../img/plus-on.png") no-repeat; width: 93px; height: 91px; margin-top: -8px; margin-right: -16px; pointer-events: none;}
.boxarea{
width: 315px;
height: 78px;
background:none;
border: none;
color: #ffffff;
font-size:12px;
padding:5px 0 0 8px;
}
.fieldarea{width:320px; height:89px; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; background-color: #61380e; margin:6px 0 12px 0;}
/*CHECKBOX*/
.banner-home input[type="checkbox"]{display:none;}
.banner-home input[type="checkbox"] + label{}
.banner-home input[type="checkbox"] + label span{
display:inline-block;
width: 57px; height: 59px;
margin:0 20px -10px 0;
vertical-align:middle;
cursor:pointer;
-moz-border-radius: 50%;
border-radius: 50%;
}
.banner-home input[type="checkbox"] + label span{background: url("../img/radio-off.png") no-repeat;}
.banner-home input[type="checkbox"]:checked + label span{background: url("../img/radio-on.png") no-repeat;}
.banner-home input[type="checkbox"] + label span, .banner-home input[type="checkbox"]:checked + label span{
-webkit-transition:background 0.3s linear;
-o-transition:background 0.3s linear;
-moz-transition:background 0.3s linear;
transition:background 0.3s linear;
}
/*
<div class="logregcheck">
<input type="checkbox" id="check01" name="checkbox" />
<label for="check01"><span></span>Biarkan tetap masuk</label>
</div>
*/
/*radio*/
.banner-home input[type="radio"], .cus input[type="radio"]{display:none;}
.banner-home input[type="radio"] + label {}
.banner-home input[type="radio"] + label span, .cus input[type="radio"] + label span{
display:inline-block;
width:57px; height:59px;
margin:0 30px -10px 0;
vertical-align:middle;
cursor:pointer;
-moz-border-radius: 50%;
border-radius: 50%;
}
.banner-home input[type="radio"] + label span, .cus input[type="radio"] + label span{background: url("../img/radio-off.png") no-repeat;}
.banner-home input[type="radio"]:checked + label span, .cus input[type="radio"]:checked + label span{background: url("../img/radio-on.png") no-repeat;}
.banner-home input[type="radio"] + label span, .banner-home input[type="radio"]:checked + label span, .cus input[type="radio"] + label span, .cus input[type="radio"]:checked + label span{
-webkit-transition:background 0.3s linear;
-o-transition:background 0.3s linear;
-moz-transition:background 0.3s linear;
transition:background 0.3s linear;
}
/*
<input type="radio" id="radio01" name="radio" value="laki-laki" required/>
<label for="radio01"><span></span>Laki-laki</label>
*/
body {
width: 100%;
margin:0 auto;
-webkit-text-size-adjust: 100%;
overflow-x:hidden;
background: var(--bg);
color: var(--c-blackl);
font-size: var(--f-xsmall);
line-height: var(--lh-xsmall);
font-family: 'Conv_Montserrat-Regular';
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/*preloader*/
#preloader {position: fixed; top:0; left:0; right:0; bottom:0; background-color:#fcfbf7; z-index:120;}
.preloader-content{position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translate(0, -50%); width: 100px;}
.preloader-content img{max-width: 100%;}
/*cursor*/
.touch {width: 60px; height: 60px; border-radius: 100%; border: 3px solid #00b3f3; position: absolute; z-index: 9999; left: 50%; transform: scale(.5); display: none;}
.touch.active {display: block; animation: touch .4s ease-out forwards;}
@keyframes touch {
from {transform: scale(.2); opacity: 1;}
to {transform: scale(1); opacity: 0;}
}
/*button*/
.fade-link, footer *{transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s;}
.btn-main{display: block; background: var(--c-pink); font-family: var(--f-times); font-size: var(--f-medium); font-style: italic; border-radius: 30px; -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); padding: 20px 40px; border: 0; cursor: pointer; margin-top: var(--space-4);}
.btn-main:hover{}
/*icon*/
.logo-martha-shop, .logo-martha{display: block; background: url(../img/icon-share.png) no-repeat;}
.logo-sariayu{}
.logo-martha-shop{background-position: -1px -112px; width: 306px; height: 68px;}
.logo-martha{background-position: 0 -330px; width: 298px; height: 107px;}
.logo-olshop{display: block; background: url(../img/icon-share.png) no-repeat; height: 70px;}
.logo-olshop._1{background-position: -2px -236px; width: 106px;}
.logo-olshop._2{background-position: -127px -253px; width: 107px;}
.logo-olshop._3{background-position: -252px -236px; width: 80px;}
.logo-olshop._4{background-position: -350px -236px; width: 114px;}
.logo-olshop._5{background-position: -483px -236px; width: 96px;}
.logo-olshop._6{background-position: -597px -236px; width: 107px;}
.logo-olshop._7{background-position: -722px -236px; width: 155px;}
.logo-olshop._8{background-position: -896px -236px; width: 125px;}
.logo-olshop._9{background-position: -1040px -236px; width: 88px;}
.icon-menu-1, .icon-menu-2, .icon-menu-3, .icon-menu-4, .icon-menu-5, .icon-menu-6, .icon-menu-7,
.tab-menu-link.active .icon-menu-1, .tab-menu-link.active .icon-menu-2, .tab-menu-link.active .icon-menu-3, .tab-menu-link.active .icon-menu-4, .tab-menu-link.active .icon-menu-5, .tab-menu-link.active .icon-menu-6, .tab-menu-link.active .icon-menu-7{display: block; margin: auto; height: 103px; transition: all .4s;}
.icon-menu-1, .icon-menu-2, .icon-menu-3, .icon-menu-4, .icon-menu-5, .icon-menu-6, .icon-menu-7{background: url("../img/product-off.png") no-repeat;}
.tab-menu-link.active .icon-menu-1, .tab-menu-link.active .icon-menu-2, .tab-menu-link.active .icon-menu-3, .tab-menu-link.active .icon-menu-4, .tab-menu-link.active .icon-menu-5, .tab-menu-link.active .icon-menu-6, .tab-menu-link.active .icon-menu-7{background: url("../img/product-on.png") no-repeat;}
.icon-menu-1{background-position: -1px 0px; width: 83px;}
.tab-menu-link.active .icon-menu-1, .menu-tab li:hover .icon-menu-1{background-position: -1px 0px; width: 83px;}
.icon-menu-2{background-position: -114px 0px; width: 83px;}
.tab-menu-link.active .icon-menu-2, .menu-tab li:hover .icon-menu-2{background-position: -114px 0px; width: 83px;}
.icon-menu-3{background-position: -228px 0px; width: 80px;}
.tab-menu-link.active .icon-menu-3, .menu-tab li:hover .icon-menu-3{background-position: -228px 0px; width: 80px;}
.icon-menu-4{background-position: -341px 0px; width: 74px;}
.tab-menu-link.active .icon-menu-4, .menu-tab li:hover .icon-menu-4{background-position: -341px 0px; width: 74px;}
.icon-menu-5{background-position: -452px 0px; width: 82px;}
.tab-menu-link.active .icon-menu-5, .menu-tab li:hover .icon-menu-5{background-position: -452px 0px; width: 82px;}
.icon-menu-6{background-position: -565px 0px; width: 49px;}
.tab-menu-link.active .icon-menu-6, .menu-tab li:hover .icon-menu-6{background-position: -565px 0px; width: 49px;}
.icon-menu-7{background-position: -678px 0px; width: 74px;}
.tab-menu-link.active .icon-menu-7, .menu-tab li:hover .icon-menu-7{background-position: -678px 0px; width: 74px;}
.icon-fb, .icon-ig, .icon-tw, .icon-yt{display: block; background: url(../img/icon-share.png) no-repeat; width: 36px; height: 36px; opacity: .35; background-size: 590px 339px; transition: all .4s;}
.icon-fb{background-position: -208px -57px;}
.icon-ig{background-position: -283px -57px;}
.icon-tw{background-position: -361px -57px;}
.icon-yt{background-position: -434px -58px; width: 44px;}
.icon-fb:hover, .icon-ig:hover, .icon-tw:hover, .icon-yt:hover{opacity: 1;}
.icon-chat, .icon-search, .arrow-left, .arrow-right{display: block; background: url(../img/icon-share.png) no-repeat; background-size: 590px 339px;}
.icon-chat, footer .icon-chat:hover{background-position: 0 -57px; width: 41px; height: 34px;}
.icon-chat:hover{background-position: 0 -113px;}
.icon-search, footer .icon-search:hover{background-position: -73px -57px; width: 32px; height: 32px;}
.icon-search:hover{background-position: -73px -114px;}
.arrow-left{background-position: -293px -3px; width: 19px; height: 26px;}
.arrow-right{background-position: -354px -3px; width: 19px; height: 26px;}
.btn-menu{display: none; background: url(../img/icon-share.png) no-repeat -415px 0; background-size: 590px 339px; width: 63px; height: 41px; cursor: pointer; position: absolute; z-index: 2; top: 5px; right: 0; transition: all .4s;}
header.small .btn-menu{display: block;}
.btn-menu.move{transform: translate(80px,0); transition: all .4s;}
.banner-nav{display: flex; flex-direction: row; justify-content: space-between; font-size: var(--f-small); text-transform: uppercase; color: var(--c-blackl); margin-top: var(--space-4);}
.banner-nav .item._1, .banner-nav .item._2, .banner-nav .item._3, .banner-nav .item._4, .banner-nav .item._5, .banner-nav .item._6{display: inline-block; width: 164px; background: url("../img/banner-nav-off.png") no-repeat; transition: all .4s; cursor: pointer; opacity: .3; text-align: center; padding-top: 168px;}
.banner-nav .item._1:hover, .banner-nav .item._2:hover, .banner-nav .item._3:hover, .banner-nav .item._4:hover, .banner-nav .item._5:hover, .banner-nav .item._6:hover, .banner-nav .synced .item._1, .banner-nav .synced .item._2, .banner-nav .synced .item._3, .banner-nav .synced .item._4, .banner-nav .synced .item._5, .banner-nav .synced .item._6{display: inline-block; width: 164px; background: url("../img/banner-nav-on.png") no-repeat; transition: all .4s; opacity: 1; text-align: center; padding-top: 168px;}
.banner-nav .item._1, .banner-nav .item._1:hover, .banner-nav .synced .item._1{background-position: 0 0;}
.banner-nav .item._2, .banner-nav .item._2:hover, .banner-nav .synced .item._2{background-position: -164px 0;}
.banner-nav .item._3, .banner-nav .item._3:hover, .banner-nav .synced .item._3{background-position: -328px 0;}
.banner-nav .item._4, .banner-nav .item._4:hover, .banner-nav .synced .item._4{background-position: -492px 0;}
.banner-nav .item._5, .banner-nav .item._5:hover, .banner-nav .synced .item._5{background-position: -656px 0;}
.banner-nav .item._6, .banner-nav .item._6:hover, .banner-nav .synced .item._6{background-position: -820px 0;}
.icon-prev, .icon-next{display: block; width: 93px; height: 91px; transition: all .3s; margin-bottom: -35px; cursor: pointer;}
.icon-prev{background: url("../img/prev-off.png") no-repeat;}
.icon-prev:hover{background: url("../img/prev-on.png") no-repeat;}
.paging .icon-prev{margin-right: var(--space-6);}
.icon-next{background: url("../img/next-off.png") no-repeat;}
.icon-next:hover{background: url("../img/next-on.png") no-repeat;}
.paging .icon-next{margin-left: var(--space-6);}
.icon-speech{display: block; background: url(../img/icon-speech.png) no-repeat 0 0; background-size: 53px 43px; width: 53px; height: 43px; margin: var(--space-1) 0;}
._martha .icon-speech{transform: scaleX(-1); filter: FlipH;}
/*container*/
section{padding-top: 130px; color: var(--c-blackl);}
.container, .container-fluid, .wrapper{position: relative; width: 80%; margin: auto;}
.container-fluid{width: 100%;}
.wrapper{width: 90%;}
.classParent{position: relative; display: block; width: 100%; margin: auto;}
/*column*/
.row{position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between;}
.row._reverse{flex-direction: row-reverse;}
.row._start{justify-content: flex-start;}
.row._end{justify-content: flex-end;}
.row._center{justify-content: center;}
.row._around{justify-content: space-around;}
.row._evenly{justify-content: space-evenly;}
.row._item-start{align-items: flex-start;}
.row._item-end{align-items: flex-end;}
.row._item-center{align-items: center;}
.row._item-stretch{align-items: stretch;}
.col{}
.col{width: 45%; z-index: 1;}
.col-2{width: 48%;}
.col-3-1{width: 25%;}
.col-3-2{width: 72%;}
/*header*/
header{position: fixed; top: 0; left: 0; right: 0; z-index: 99; padding-top: var(--space-4); transition: all .3s;}
header.small{background: #fff; -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); padding-top: var(--space-1); height: 70px;}
header.small .menu{margin-top: -20px;}
header.small .menu ul > li > ul{margin-top: -20px;}
header .logo-sariayu{position: absolute; top: 0; left: 0; z-index: 12; margin-top: 25px; transition: all .4s;}
header.small .logo-sariayu{margin-top: 0px;}
.socket.small, .menu.small{opacity: 0; display: none;}
.socket.small.show, .menu.small.show{opacity: 1; display: flex;}
header.small .logo-sariayu{transition: all .3s; width: calc(232px * 0.8);}
header.zoom{padding-top: var(--space-4); height: auto;}
header.zoom .logo-sariayu{margin-top: 25px; transition: all .3s; width: auto;}
header.zoom .menu, header.zoom .menu ul > li > ul{margin-top: 0px;}
header.zoom .socket.small.show, header.zoom .menu.small.show{opacity: 1; display: flex;}
header .socket{display: flex; justify-content: flex-end; align-items: center; font-size: var(--f-small); height: 100%;}
header .socket div{margin-left: var(--space-2); text-transform: uppercase;}
header .socket-mobile{display: none;}
header .menu{font-size: var(--f-medium); text-transform: uppercase; display: flex; justify-content: flex-end;}
header .menu li:nth-first-child(1){margin-left: 0;}
header a{color: inherit;}
header:hover{background: var(--c-pink);}
.header-space{padding-top: 157px;}
.menu {position: relative; width: 100%; margin: auto;}
.menu > ul {display: flex; flex-direction: row; justify-content: flex-end; align-items: center; width: 80%; margin: auto;}
.menu > ul > li {margin-left: var(--space-5);}
.menu > ul > li:nth-first-child(1){margin-left: 0;}
.menu > ul > li a {transition: all .3s; text-decoration: none; display: block; padding: var(--space-3) 0;}
.menu > ul > li ._link a, .menu > ul > li .tab-menu-link a {padding: 0;}
.menu > ul > li:hover, .menu > ul > li a:hover{color: #fff;}
.menu > ul > li.active a{font-weight: bold;}
.menu > ul > li > ul {display: none; width: 100%; background: var(--c-pink); padding: var(--space-2) 10%; position: absolute; z-index: 90; left: 0; margin: 0;}
.menu > ul > li > ul.menu-single{margin-left: -20px;}
.menu > ul > li > ul.menu-single li a{color: var(--c-blackl); font-weight: normal;}
.menu > ul > li > ul.menu-single li:hover a {color: #fff;}
.menu > ul > li > ul:before,
.menu > ul > li > ul:after {content: ""; display: table;}
.menu > ul > li > ul:after {clear: both;}
/*
.menu > ul > li > ul > li {margin: 0; padding-bottom: 0; list-style: none; width: 25%; background: none; float: left;}
.menu > ul > li > ul > li a {width: 95%; display: block;}
.menu > ul > li > ul > li a:hover{color:#fff;}
.menu > ul > li > ul > li > ul {display: block; padding: 0; list-style: none; box-sizing: border-box;}
.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {content: ""; display: table;}
.menu > ul > li > ul > li > ul:after {clear: both;}
.menu > ul > li > ul > li > ul > li {float: left; width: 100%; padding: 10px 0; margin: 0;}
.menu > ul > li > ul > li > ul > li a {border: 0;}
*/
.menu > ul > li > ul.normal-sub {width: 300px; left: auto; padding: 10px 20px;}
.menu > ul > li > ul.normal-sub > li {width: 100%;}
.menu > ul > li > ul.normal-sub > li a {border: 0; padding: 1em 0;}
/*tab*/
.tab {width: 100%; height: auto;}
.tab-menu{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; align-content: center; text-align: center; text-transform: uppercase; padding: var(--space-2) 0; border-top: var(--line-2); border-bottom: var(--line-2);}
.tab-menu button:hover{color: #fff;}
.tab-menu-link {position: relative; overflow: hidden; cursor: pointer; height: auto; border: none; background: transparent; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; font-size: var(--f-small); color: var(--c-black);}
.tab-menu-link::before {position: absolute; content: ""; top: 0; left: 0; width: 100%; height: auto; z-index: 2;}
.tab-menu-link.active {bottom: 0px; z-index: 0; overflow: hidden; color: #fff;}
.tab-bar {overflow: hidden; padding-bottom: var(--space-4);}
.tab-bar-content {display: none; width: 100%;}
.tab-bar-content.active {display: block;}
.tab-bar-content .menulist-1{font-size: var(--f-small); color: var(--c-black); line-height: var(--lh-small);}
.tab-bar-content .menulist-2{font-size: var(--f-small); color: var(--c-black); line-height: var(--lh-small); padding-top: var(--space-4); display: flex; flex-direction: row; justify-content: space-between;}
.menulist-2 li{position: relative; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; align-content: center; margin: 0 var(--space-4);}
.menulist-2 ._bg{position: absolute; top: 0; left: 0; right: 0; margin: auto; opacity: 1; transition: all .4s;}
.menulist-2 ._bg img{border-radius: 50%; width: 100%;}
.menulist-2 ._item{position: relative; height: 310px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; align-content: center; opacity: .9; transition: all .4s;}
.menulist-2 ._text{padding-top: var(--space-2);}
.menulist-2 li:hover ._bg, .menulist-2 li:hover ._item{opacity: 1; transition: all .4s;}
.menulist-2 li:hover ._item{transform: translateY(-10px); transition: all .4s;}
.tab-bar-content .menulist-3{font-size: var(--f-small); color: var(--c-black); line-height: var(--lh-small); padding-top: var(--space-4); display: flex; flex-direction: row; justify-content: space-between;}
.menulist-3 .line-2{padding-top: var(--space-3);}
.menulist-3 .col-2{width: 40%;}
.tab-bar-content .menulist-4{font-size: var(--f-small); color: var(--c-black); line-height: var(--lh-small); padding-top: var(--space-4); display: flex; flex-direction: row; justify-content: space-between;}
.menulist-4 .line-2{padding-top: var(--space-4);}
.menulist-4 .col{width: 100%;}
.menulist-4 .menulist-1{width: 20%;}
.tab-bar-content .menulist-5{display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; font-size: var(--f-small); color: var(--c-black); line-height: var(--lh-small); height: 50vh; padding-top: var(--space-2);}
.tab-bar-content .menulist-5 li{width: 20%;}
.tab-bar-content .menulist-1 li a, .tab-bar-content .menulist-3 li a, .tab-bar-content .menulist-4 li a, .tab-bar-content .menulist-5 li a{padding: 0; padding-top: var(--space-2);}
/*carousel*/
.owlPrev, .owlNext, .owlPrevW, .owlNextW, .disabled .owlPrev, .disabled .owlNext{position: absolute; z-index: 10; top: 0; margin-top: -100px; display: block; width: 93px; height: 91px; cursor: pointer; transition: all .4s;}
.owlPrev{left: 160px; background: url("../img/prev-off.png") no-repeat center;}
.owlPrevW{left: 20px; top: 50%; transform: translate(0,-50%); margin: auto; background: url("../img/prev-w.png") no-repeat center;}
.owlPrev:hover, .owlPrevW:hover{background: url("../img/prev-on.png") no-repeat center;}
.owlNext{right: 160px; background: url("../img/next-off.png") no-repeat center;}
.owlNextW{right: 20px; top: 50%; transform: translate(0,-50%); margin: auto; background: url("../img/next-w.png") no-repeat center;}
.owlNext:hover, .owlNextW:hover{background: url("../img/next-on.png") no-repeat center;}
.title, .price{font-family: var(--f-times); font-size: var(--f-xlarge); line-height: var(--lh-xlarge);}
a .title{color: var(--c-blackl);}
.title-italic, .title-float{font-family: var(--f-times); font-size: var(--f-large); font-style: italic;}
.subtitle{font-family: var(--f-times); font-size: var(--f-large); line-height: var(--lh-large);}
.title-float{position: absolute; z-index: 1; top: 0; left: 0; right: 0; margin: auto; text-align: center; margin-top: 140px;}
.desc{font-family: var(--f-monl); font-size: var(--f-medium); line-height: var(--lh-medium); color: var(--c-blackl);}
.desc p{padding-bottom: var(--space-4);}
.desc a{color: inherit; transition: all .4s;}
.desc a:hover{color: var(--c-pink); transition: all .4s;}
.desc p:nth-last-child(1){padding-bottom: 0;}
.desc._p, .desc._p a{color: var(--c-pink); font-family: var(--f-mon);}
.desc._w, .desc._w a{color: #ffffff;}
.desc._g{color: var(--c-grey); font-family: var(--f-mon); font-size: var(--f-xsmall);}
._back{position: absolute; z-index:0; top: 0; right: 0; max-width: 38%;}
.bahan-pilih ._back{margin-top: 220px;}
.product ._back{max-width: 100%; margin-top: 0; background: #fff;}
.product-detail-2 ._back{margin-top: -50px; z-index: auto;}
._bgPage{position: absolute; top: 0; left: 0; right: 0; margin: auto; z-index: -1;}
.taukah{position: relative; display: block; width: 100%; margin: auto; font-size: var(--f-medium); line-height: var(--lh-medium); text-align: center; border-top: var(--line-1); border-bottom: var(--line-1); padding: var(--space-6) 0;}
#taukah-counter{padding: var(--space-4) 0; font-family: var(--f-times); font-size: var(--f-xlarge);}
#taukah-counter .count{font-size: 60px;}
.taukah-slider{width: 65%; margin: auto;}
.market{position: relative; display: block; width: 100%; margin: auto; padding: var(--space-6) 0; text-align: left;}
.market .title-italic{padding-bottom: var(--space-4);}
.market .col-3-1{width: 23%;}
.market .col-3-1 img{display: inline-block;}
.market .col-3-2{width: 73%;}
.marketslider div{display: flex; align-items: center;}
/*footer*/
footer{position: relative; width: 100%; margin: auto; background: #fff; padding-top: var(--space-7);}
footer a{color: inherit;}
footer a:hover{color: var(--c-pink);}
footer .title{font-size: var(--f-medium); text-transform: uppercase; padding-bottom: var(--space-5);}
footer .menu-footer{padding-bottom: var(--space-8);}
footer .col{width: 200px;}
footer .menu-list{font-size: var(--f-xsmall); text-transform: uppercase; line-height: var(--lh-xsmall);}
footer .menu-list li{padding-bottom: var(--space-0);}
footer .socket-1{padding: var(--space-4) 0; border-top: var(--line-1); border-bottom: var(--line-1);}
footer .socket-1 .col-3-1, footer .socket-1 .col-3-2{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center;}
footer .socket-1 .col-3-2{justify-content: flex-end;}
footer .socket-1 .col-3-1 div{margin-right: var(--space-2);}
footer .socket-1 .col-3-2 div{margin-left: var(--space-4);}
footer .socket-2{padding: var(--space-1) 0; font-size: var(--f-small);}
footer .socket-2 .col-3-1, footer .socket-2 .col-3-2{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: center;}
footer .socket-2 .col-3-1{justify-content: flex-end;}
footer .socket-2 .col-3-1 div{margin-left: var(--space-2);}
footer .logo-sariayu{width: 162px; height: 43px; margin-right: var(--space-2);}
/*tooltip*/
.tooltip{display: inline-flex; justify-content: center; position: relative;}
.tooltip a{color: inherit;}
.tooltip-icon{display: block; position: absolute; top: 0; z-index: 2; background: url(../img/icon-share.png) no-repeat -506px -2px; background-size: 590px 339px; width: 82px; height: 80px; margin-top: -3px;}
.tooltip._left .tooltip-icon{left: 0; margin-left: -30px;}
.tooltip._right .tooltip-icon{right: 0; margin-right: -30px;}
.tooltip-bar{display: inline-block; background: var(--c-pink); font-family: var(--f-times); font-size: 22.5px; font-style: italic; border-radius: 30px; -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); padding: 20px 0;}
.tooltip._left .tooltip-bar{padding-left: 80px; padding-right: 50px;}
.tooltip._right .tooltip-bar{padding-left: 50px; padding-right: 80px;}
/* Tooltip text */
.tooltip .tooltip-text {visibility: hidden; width: 100%; position: absolute; z-index: 3; background: var(--c-pink); font-family: var(--f-times); font-size: var(--f-large); font-style: italic; border-radius: var(--space-3); -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); padding: var(--space-2) 0; text-align: center; transition: all .8s; top: 70px; opacity: 0;}
.tooltip:hover .tooltip-text {visibility: visible; opacity: 1; transition: all .4s;}
/*animate*/
@keyframes pulse {
from {transform: scale3d(1.2, 1.2, 1.2);}
50% {transform: scale3d(1.05, 1.05, 1.05);}
to {transform: scale3d(1.2, 1.2, 1.2);}
}
.pulse {animation-name: pulse; animation-duration: 3s; animation-fill-mode: both; animation-iteration-count: infinite; }
@keyframes fadeInGo {
from {opacity: 0;}
to {opacity: 1;}
}
.fadeInGo {animation-name: fadeInGo;}
@keyframes fadeOutGo {
from {opacity: 1;}
to {opacity: 0;}
}
.fadeOutGo {animation-name: fadeOutGo;}
@keyframes fadeInDownGo {
from {opacity: 0; transform: translate3d(0, -100%, 0);}
to {opacity: 1; transform: none;}
}
.fadeInDownGo {animation-name: fadeInDownGo;}
@keyframes fadeInUpGo {
from {opacity: 0; transform: translate3d(0, 100%, 0);}
to {opacity: 1; transform: none;}
}
.fadeInUpGo {animation-name: fadeInUpGo;}
@keyframes fadeInRightGo {
from {opacity: 0; transform: translate3d(20%, 0, 0);}
to {opacity: 1; transform: none;}
}
.fadeInRightGo {animation-name: fadeInRightGo;}
@keyframes fadeInLeftGo {
from {opacity: 0; transform: translate3d(-20%, 0, 0);}
to {opacity: 1; transform: none;}
}
.fadeInLeftGo {animation-name: fadeInLeftGo;}
@keyframes zoomInGo {
from {opacity: 0; transform: scale3d(.3, .3, .3);}
50% {opacity: 1;}
}
.zoomInGo {animation-name: zoomInGo;}
/*page component*/
.social{display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding-top: var(--space-2); font-size: var(--f-small); color: var(--c-pink);}
.social div{padding-right: var(--space-3); text-transform: uppercase;}
.sub-nav{font-size: var(--f-small); text-transform: uppercase; color: var(--c-blackl); border-bottom: var(--line-1); display: flex; flex-direction: row; justify-content: center; position: absolute; top: 0; left: 0; right: 0; margin: auto; z-index: 10; background: #fff; transition: all .4s; white-space: nowrap;}
.sub-nav.owl-carousel .owl-stage{margin: auto;}
.sub-nav *{transition: all .3s;}
.sub-nav a{color: inherit;}
.sub-nav a:hover{color: var(--c-pink);}
.sub-nav.fixed{position: fixed; margin-top: 70px; z-index: 13;}
.sub-nav li{padding: var(--space-6) var(--space-2); margin-right: 30px;}
.sub-nav.fixed li{padding: var(--space-2);}
.sub-nav li.active{color: var(--c-pink);}
.sub-nav-space{padding-top: 80px;}
.sub-nav.zoom{padding-top: 100px; transition: all .4s;}
.on-top{position: absolute; z-index: 2; left: 0; right: 0; margin: auto; padding: var(--space-5); display: flex; flex-direction: row; justify-content: space-around; width: 80%; text-align: center; margin-top: -150px;}
.on-top li{width: 212px; height: 212px; border: solid 1px #fff; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--space-3);}
.on-top ._light{font-family: var(--f-monl); font-size: var(--f-xsmall); line-height: var(--lh-xsmall);}
.on-top ._bold{font-weight: bold; font-size: var(--f-large); line-height: var(--lh-large)}
.paging{display: flex; flex-direction: row; justify-content: center; align-items: flex-end; font-family: var(--f-times); transition: all .4s; letter-spacing: var(--letter-1); margin-top: var(--space-8);}
.paging li{cursor: pointer; padding-right: 5px; font-size: 26px; }
.paging li span{font-size: 26px; transition: all .4s; padding-right: 5px;}
.paging li.active span{font-size: 60px; transition: all .4s; padding-right: 0;}
.card-list{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding-top: var(--space-4);}
.card-list a{color: inherit;}
.card-list li{position: relative; width: 33%; overflow: hidden; margin-bottom: .3vw; padding-right: .3vw;}
.card-list li:nth-last-child(-n+3){margin-bottom: 0;}
.card-list ._overlay{position: absolute; width: 80%; height: 55%; padding: 8%; background: #fff; bottom: 10%; left: 0; right: 0; margin: auto; overflow: hidden;}
.card-list li ._bg img{transition: all .4s;}
.card-list li:hover ._bg img{transform: scale(1.1); transition: all .4s;}
.card-list ._cat{color: var(--c-pink); font-size: var(--f-small); text-transform: uppercase;}
.card-list ._title{font-family: var(--f-times); font-size: var(--f-xlarge); line-height: normal; padding-top: var(--space-1);}
.card-list ._text{font-family: var(--f-monl); font-size: var(--f-medium); line-height: var(--lh-medium); padding-top: var(--space-4);}
.card-list ._text p{padding-bottom: var(--space-2);}
.card-list ._text p:nth-last-child(1){padding-bottom: 0;}
.content-img{position: relative; display: flex; justify-content: space-between; align-items: center; z-index: 1;}
.content-img._right{padding-left: 5%;}
.content-img._left{padding-right: 5%;}
.content-img._left-top{padding-right: 5%; align-items: flex-start;}
.content-img ._overlay{position: absolute; z-index: 2; top: 50%; transform: translate(0,-50%); width: 40%;}
.content-img ._overlay._left{left: 5%;}
.content-img ._overlay._right{right: 5%;}
.content-img ._overlay._center{left: 0; right: 0; margin: auto;}
.content-bg, .content-panel{position: relative; width: 100%; margin: auto; background: #fff; padding-top: var(--space-8); margin-top: 140px;}
.content-panel{padding: var(--space-8) 0;}
.content-panel.beauty-tips{padding: 0;}
/*chart*/
.circle_percent {font-size:250px; width:1em; height:1em; position: relative; background: #ebebeb; border-radius:50%; overflow:hidden; display:inline-block; font-family: var(--f-times); font-style: italic;}
.circle_inner {position: absolute; left: 0; top: 0; width: 1em; height: 1em; clip:rect(0 1em 1em .5em);}
.round_per {position: absolute; left: 0; top: 0; width: 1em; height: 1em; background: #50ae4d; clip:rect(0 1em 1em .5em); transform:rotate(180deg); transition:1.05s;}
.percent_more .circle_inner {clip:rect(0 .5em 1em 0em);}
.percent_more:after {position: absolute; left: .5em; top:0em; right: 0; bottom: 0; background: #50ae4d; content:'';}
.circle_inbox {position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; background: #fff; z-index:3; border-radius: 50%;}
.percent_text {position: absolute; font-size: 45px; top: 50%; left: 50%; transform: translate(-50%,0); margin-top: -50px; z-index: 3;}
.chart_text {position: absolute; font-size: 30px; line-height: 40px; top: 50%; left: 50%; transform: translate(-50%,0); z-index: 4; text-align: center;}
.banner-home, .banner-home-m{position: relative; width: 100%; margin: auto; color: var(--c-blackl);}
.banner-home-m{display: none;}
.banner-home ._title{font-family: var(--f-times); font-style: italic; font-size: 28px; opacity: 1;}
.banner-home ._text{text-transform: uppercase; font-size: var(--f-small);}
.banner-home ._list-1, .banner-home ._list-2, .banner-home ._list-2-1 , .banner-home ._list-2-2{font-size: var(--f-medium); padding-top: var(--space-4); padding-left: var(--space-8); text-transform: uppercase;}
.banner-home ._list-2-1{padding-left: 0; float: left;}
.banner-home ._list-2-2{padding-left: 0; float: left;}
.banner-home ._list-1 li, .banner-home ._list-2 li, .banner-home ._list-2-1 li, .banner-home ._list-2-2 li{padding-bottom: var(--space-1);}
.banner-home ._nav{position: relative; width: 330px; height: 65px; background: #c6ddd5; font-family: var(--f-times); font-size: var(--f-medium); font-style: italic; border-radius: 30px; -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); padding: 0; margin-top: var(--space-2); opacity: 1;}
.hide-obj-1 .title-italic{padding: 0 40px; padding-top: 20px;}
.mov-obj-3 .title-italic{padding: 0 20px; padding-top: 20px;}
.banner-home ._prev, .banner-home ._next, .banner-home ._plus{display: block; width: 93px; height: 91px; transition: all .3s; margin-top: -5px;}
.banner-home ._prev{background: url("../img/prev-off.png") no-repeat; margin-left: -20px;}
.banner-home ._prev:hover{background: url("../img/prev-on.png") no-repeat;}
.banner-home ._next{background: url("../img/next-off.png") no-repeat; margin-right: -20px;}
.banner-home ._next:hover{background: url("../img/next-on.png") no-repeat;}
.banner-home ._plus{background: url("../img/plus-off.png") no-repeat; margin-right: -20px;}
.banner-home ._plus:hover{background: url("../img/plus-on.png") no-repeat;}
.banner-home ._switch{display: block; width: 16px; height: 16px; background: transparent; border: var(--line-2); border-radius: 50%; transition: all .3s; transform-origin: top;}
.banner-home ._switch:hover, .banner-home ._switch.active{width: 22px; height: 22px; background: var(--c-blackl); transition: all .3s; transform: translateX(-2px);}
.banner-tooltip {position: relative; display: inline-block;}
.banner-tooltip .tooltipc {visibility: hidden; opacity: 0; position: absolute; z-index: 1; transition: all .4s;}
.banner-tooltip:hover .tooltipc {visibility: visible; opacity: 1; transition: all .4s;}
.tooltipc.left{top: 0; right: 0; margin: -60px 50px 0 0;}
.tooltipc.right{top: 0; left: 0; margin: -60px 0 0 50px;}
.mov-obj-1, .mov-obj-2, .mov-obj-3.move{transform: translateX(0); transition: all .4s ease; pointer-events: auto;}
.mov-obj-3.move{display: none;}
.mov-obj-1.move{transform: translateX(-185px); transition: all .4s ease;}
.mov-obj-2.move{transform: translateX(-250px); transition: all .4s ease; pointer-events: none;}
.mov-obj-3{display: block; transition: all .4s ease;}
.hide-obj-1{opacity: 1; transition: all .4s ease;}
.hide-obj-1.move{opacity: 0; transition: all .4s ease;}
/*product*/
.newproduct-list, .product-list-1{font-size: var(--f-small); line-height: var(--lh-medium); display: flex; flex-direction: row; justify-content: space-between;}
.newproduct-list li{position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; align-content: center; margin: 0 var(--space-4); margin-bottom: var(--space-4); max-width: 245px;}
.newproduct-list li a, .product-slider a, .product-list-1 a{color: inherit;}
.newproduct-list li ._bg{transition: all .4s; margin-bottom: -100%;}
.newproduct-list li ._bg img{border-radius: 50%; width: 100%;}
.newproduct-list li ._item, .product-slider ._item, .product-list-1 ._item{position: relative; height: 310px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; align-content: center; transition: all .4s;}
.newproduct-list li ._text, .product-slider ._text, .product-list-1 ._text{padding-top: var(--space-4);}
.product-slider ._text, .product-list-1 ._text{height: 90px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-transform: uppercase;}
.product-list-1 ._text{height: 95px;}
.newproduct-list li ._price, .product-slider ._price, .product-list-1 ._price{font-family: var(--f-times); font-size: var(--f-large);}
.newproduct-list li:hover ._bg, .newproduct-list li:hover ._item, .product-slider .item:hover ._item, .product-list-1 li:hover ._item{transition: all .4s;}
.newproduct-list li:hover ._item, .product-slider .item:hover ._item, .product-list-1 li:hover ._item{transform: translateY(-10px); transition: all .4s;}
.product-list{}
.product-slider{padding: var(--space-4) 0;}
.product-slider *, .product-list-1 *{transition: all .4s;}
.product-slider .item{display: block; background: #ffffff; padding: var(--space-4) 0 var(--space-6) 0; margin: var(--space-1); -webkit-box-shadow: 0px 0px 10px 5px rgba(255,238,230,0); -moz-box-shadow: 0px 0px 10px 5px rgba(255,238,230,0); box-shadow: 0px 0px 10px 5px rgba(255,238,230,0);}
.product-slider .item:hover{-webkit-box-shadow: 0px 0px 10px 5px rgba(255,238,230,0.4); -moz-box-shadow: 0px 0px 10px 5px rgba(255,238,230,0.4); box-shadow: 0px 0px 10px 5px rgba(255,238,230,0.4);}
.product-slider .item .container{width: 70%;}
.product-filter {text-align: center; margin: var(--space-4) auto; text-transform: uppercase;}
.product-filter .item {color: var(--c-blackl); font-size: var(--f-small);}
.product-filter .item.current {color: var(--c-pink);}
.product-list-1{padding-top: var(--space-4); margin-top: -40px;}
.product-list-1 li{display: inline-block; border: var(--line-1); width: 23%; margin: 1%; padding: var(--space-3) 0;}
.product-list-1 .container{padding-bottom: var(--space-4);}
.product-list-1 .date, .product-list-1 .popular{visibility: hidden; height: 0; width: 0; z-index: -1;}
.product-related{}
.product-related .wrapper{background: var(--c-white); z-index: 10;}
.product-related .is-center{padding: var(--space-4) 0; transition: all .4s;}
.active .is-center{background: var(--c-pinkl); padding: var(--space-8) 0; transition: all .4s;}
#sorts{display: none; opacity: 0; height: 0; transition: all .4s;}
#sorts.active{display: block; opacity: 1; height: 100%; transition: all .4s;}
.product .content-img{align-items: flex-start;}
.product .col-3-1 .tooltip{margin-top: 80%;}
.product .col-3-2{width: 65%;}
.product-detail{position: relative; width: 100%; margin: auto;}
.product-detail ._product-float{margin-top: -180px;}
.product-detail .content-bg{padding: var(--space-8) 0; padding-left: 5%; margin-top: 40px;}
.product-detail-2.content-bg{background: none; margin-top: 0;}
.product-detail-2 .container{background: #fff; padding: var(--space-8) 0;}
.product-detail-2 .col-3-1{margin-top: 60px;}
.product-detail-2 .col-3-2{width: 60%;}
.product-content{position: relative; width: 90%; margin: auto; padding-top: var(--space-4);}
.button-group{padding-top: var(--space-4); text-align: center;}
.button-group.owl-carousel .owl-stage{margin: auto;}
.button{background: none; border: none; font-size: var(--f-medium); padding: var(--space-1) var(--space-3); cursor: pointer; text-transform: uppercase;}
.button.is-checked{color: #fff;}
.promos-events .button-group,{text-align: center;}
.promos-events .button.is-checked, .stores .button.is-checked{color: var(--c-pink);}
/*whats happening*/
.themeSlider{}
#themes{position: absolute; z-index: 2; top: 0; right: 0; border-radius: 5px; border: var(--line-1); padding: var(--space-0);}
.themes img{transition: all .3s; z-index: 1;}
.themes img:hover{transform: scale(1.1); transition: all .3s; z-index: 2;}
.themes div{overflow: hidden;}
.themes-a {padding-top: var(--space-4); display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; gap: 0px 0px; grid-template-areas: "a1 a2 a2" "a1 a2 a2" "a3 a5 a6" "a4 a5 a7";}
.themes-a .a1 {grid-area: a1;}
.themes-a .a2 {grid-area: a2;}
.themes-a .a3 {grid-area: a3;}
.themes-a .a4 {grid-area: a4;}
.themes-a .a5 {grid-area: a5; min-width: 100%; position: relative;}
.themes-a .a6 {grid-area: a6;}
.themes-a .a7 {grid-area: a7;}
.themes-b {padding-top: var(--space-4); display: grid; grid-template-rows: 1fr 1fr; gap: 0px 0px; grid-template-areas: "b1 b1 b2" "b1 b1 b3";}
.themes-b .b1 {grid-area: b1;}
.themes-b .b2 {grid-area: b2;}
.themes-b .b3 {grid-area: b3;}
.themes-b .b4 {grid-area: b4;}
.themes-b .b5 {grid-area: b5;}
.themes-b .b6 {grid-area: b6;}
.themes-b .b7 {grid-area: b7; min-width: 100%; position: relative;}
.themes-c {padding-top: var(--space-4); display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; gap: 0px 0px; grid-template-areas: "c1 c2 c2" "c1 c2 c2" "c3 c5 c7" "c4 c6 c7";}
.themes-c .c1 {grid-area: c1; min-width: 100%; position: relative;}
.themes-c .c2 {grid-area: c2;}
.themes-c .c3 {grid-area: c3;}
.themes-c .c4 {grid-area: c4;}
.themes-c .c5 {grid-area: c5;}
.themes-c .c6 {grid-area: c6;}
.themes-c .c7 {grid-area: c7;}
.themes-d {padding-top: var(--space-4); display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; gap: 0px 0px; grid-template-areas: "d1 d1 d1" "d1 d1 d1" "d2 d4 d5" "d3 d4 d6";}
.themes-d .d1 {grid-area: d1;}
.themes-d .d2 {grid-area: d2;}
.themes-d .d3 {grid-area: d3;}
.themes-d .d4 {grid-area: d4; min-width: 100%; position: relative;}
.themes-d .d5 {grid-area: d5;}
.themes-d .d6 {grid-area: d6;}
.themes-e {padding-top: var(--space-4); display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; gap: 0px 0px; grid-template-areas: "e1 e2 e2" "e1 e2 e2" "e3 e2 e2" "e3 e4 e5";}
.themes-e .e1 {grid-area: e1;}
.themes-e .e2 {grid-area: e2;}
.themes-e .e3 {grid-area: e3; min-width: 100%; position: relative;}
.themes-e .e4 {grid-area: e4;}
.themes-e .e5 {grid-area: e5;}
/*banner*/
.banner{position: relative; width: 100%; margin: auto;}
.banner .tooltip{position: absolute; top: 50%; transform: translate(0,-50%);}
.banner .tooltip-bar{font-family: inherit; font-size: var(--f-small); font-style: normal; text-transform: uppercase;}
.banner ._text{position: absolute; z-index: 2; font-family: var(--f-times); font-size: var(--f-large); line-height: var(--lh-large); letter-spacing: var(--letter-1); color: #fff; font-style: italic; text-align: center;}
.banner ._text span{font-family: var(--f-times); font-size: var(--f-xlarge); line-height: var(--lh-xlarge); font-style: italic;}
.banner .tooltip{position: absolute; z-index: 2;}
/* .banner ._text{bottom: 10%; left: 0; right: 0; margin: auto;}*/
/* .banner .tooltip{top: 50%; left: 50%; margin-top: 100px; margin-left: 100px;}*/
.banner._1 ._text{width: 35%; top: 50%; left: 0; right: 0; margin: auto; margin-top: -100px;}
.banner._2 ._text{width: 80%; top: 50%; left: 0; right: 0; margin: auto;}
.banner._3 ._text{width: 40%; top: 50%; left: 50%; margin: auto; margin-top: -100px; margin-left: 140px; text-align: left; color: var(--c-blackl); font-family: var(--f-monl); font-size: var(--f-medium); line-height: var(--lh-medium); font-style: normal;}
.banner._4 ._text{width: 35%; bottom: 15%; left: 0; right: 0; margin: auto;}
.banner._5 ._text{width: 50%; bottom: 15%; left: 0; right: 0; margin: auto;}
.banner._6 ._text{width: 50%; bottom: 15%; left: 0; right: 0; margin: auto;}
.banner._1 .tooltip{top: 50%; left: 50%; margin-top: 100px; margin-left: 100px;}
.banner._2 .tooltip{top: 50%; left: 50%; margin-top: 200px; margin-left: 120px;}
.banner._3 .tooltip{top: 50%; left: 50%; margin-top: 100px; margin-left: 160px;}
.banner._4 .tooltip{top: 50%; left: 50%; margin-left: 100px;}
.banner._5 .tooltip{top: 50%; left: 50%; margin-left: -100px;}
.banner._6 .tooltip{top: 50%; left: 50%; margin-top: 100px; margin-left: 100px;}
.banner-slider .owl-item.active .banner ._text{-webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: fadeInUpGo; animation-delay: 1s;}
.banner-slider .owl-item.active .banner._3 ._text{-webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: fadeInDownGo; animation-delay: 1s;}
.banner-slider .owl-item.active .banner .tooltip-icon{-webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: zoomInGo;animation-delay: 1.2s;}
.banner-slider .owl-item.active .banner .tooltip._left .tooltip-bar{-webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: fadeInRightGo;animation-delay: 1.2s;}
.banner-slider .owl-item.active .banner .tooltip._right .tooltip-bar{-webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: fadeInLeftGo;animation-delay: 1.2s;}
/*bahan*/
.bahan-banner{position: relative; width: 100%; margin: auto;}
.bahan-banner ._overlay{position: absolute; width: 80%; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: auto;}
.bahan-banner ._desc{font-family: var(--f-times); font-size: var(--f-large); line-height: var(--lh-large); letter-spacing: var(--letter-1); color: #fff; font-style: italic; text-align: center;}
.ba_hoverhan-banner ._desc p{padding: var(--space-2);}
.bahan-banner .tooltip{margin: var(--space-8) auto; justify-content: flex-end; margin-left: 40%;}
.bahan-banner .tooltip-bar{font-family: var(--f-mon); text-transform: uppercase; font-style: normal; font-size: var(--f-medium);}
._shortDesc{display: none;}
.bahan-pilih{position: relative; width: 100%; margin: auto; padding-top: 0;}
.bahan-pilih ._nav{position: relative; display: block; width: 100%; text-align: center; padding-top: 100px;}
.bahan-pilih ._nav ul{padding-top: var(--space-6);}
.bahan-pilih ._nav .item{position: relative; border-radius: 50%; overflow: hidden; width: 218px; cursor: pointer; -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2); -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2); box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);}
.bahan-pilih ._nav .item img{border-radius: 50%;}
.bahan-pilih ._nav ._hover{position: absolute; bottom: 0; left: 0; right: 0; border-radius: 0 0 50% 50%; width: 100%; height: 50%; display: flex; justify-content: center; align-items: center; font-family: var(--f-times); font-size: var(--f-medium); line-height: var(--lh-medium); font-style: italic; background: rgba(255,255,255,.9); transition: all .4s; opacity: 0; text-align: center; padding: 0 10%;}
.bahan-pilih ._nav li:hover ._hover, .bahan-pilih ._nav .synced ._hover, .bahan-pilih ._nav .current ._hover, .bahan-pilih ._nav .center ._hover {transition: all .4s; opacity: 1;}
.bahan-pilih ._list-1{width: 45%; text-transform: uppercase;}
.bahan-pilih ._cat{display: flex; flex-direction: row; justify-content: center; align-items: center;}
.bahan-pilih ._cat .title-italic{padding-right: var(--space-4);}
.bahan-pilih ._cat .title-only{font-family: var(--f-times); font-style: italic; color: var(--c-blackl); font-size: var(--f-medium);
background: var(--c-pink); border-radius: 30px; -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2); padding: var(--space-1) var(--space-4);}
.bahan-pilih .slider-nav .owl-stage {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; margin: auto;}
.imageNav a{color: inherit;}
.bahan-pilih-detail{margin: 0; padding: 0;}
.bahan-pilih-detail .content-bg{margin: 0; padding: 0;}
.bahan-pilih-detail .content-img._left{align-items: flex-start;}
.gotolanding1, .gotolanding2{cursor: pointer;}
.landing1, .landing2{height: 0; opacity: 0; transition: all .3s; z-index: 1;}
.landing2{text-align: center; padding-bottom: var(--space-4);}
.landing1.show, .landing2.show{height: auto; opacity: 2;}
/*map*/
.map{position: relative; width: 100%; max-width: 1200px; margin: var(--space-4) auto;}
.map ._bg{}
.map ._poin{position: absolute; top: 0; left: 0; right: 0; margin: auto; opacity: 0; transition: all .3s;}
.map ._poin.active{opacity: 1; transition: all .3s;}
.mapNav{position: relative; width: 100%; margin: auto; padding-bottom: 40px;}
.mapNav .item{position: relative; margin-bottom: 20px;}
.mapNav .item ._img{position: relative; overflow: hidden; border-radius: 50%; cursor: pointer; -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2); -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2); box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);}
.mapNav ._text{position: absolute; bottom: 0; left: 0; right: 0; border-radius: 0 0 50% 50%; width: 100%; padding: 0 5%; height: 50%; display: flex; justify-content: center; align-items: center; font-family: var(--f-times); font-size: var(--f-medium); line-height: var(--lh-medium); font-style: italic; background: rgba(255,255,255,.6); transition: all .4s; text-align: center;}
.mapNav ._plus{position: absolute; top: 0; right: 0; max-width: calc(93px * .8); margin-right: -10px; opacity: 0; pointer-events: none; transition: all .3s;}
.mapNav .show ._plus{opacity: 1; pointer-events: auto; transition: all .3s;}
/*tentang*/
.tentang{position: relative; display: block; width: 100%; margin: auto;}
.clean-beauty .card-list ._overlay{height: 64%;}
.clean-beauty .card-list{width: 97%; margin: auto;}
.clean-beauty .card-list li{width: 33.33333333333333%;}
.clean-beauty .card-list ._desc{text-transform: uppercase;}
.tentang-founder, .tentang-founder._martha, .tentang-founder._wulan{position: relative; width: 967px; margin: auto; transition: all .8s;}
.tentang-founder._martha{width: 1106px;}
.tentang-founder._wulan{width: 1076px;}
.tentang-founder a{color: var(--c-pink);}
#speech{position: absolute; top: -40px; left: 0;}
.tentang-founder .tf{position: absolute; top: 0; left: 0; right: 0; margin: auto;}
.tentang-founder .tf._2{position: relative;}
.tf._wulan, .tf._martha{display: inline-flex; flex-direction: column; font-family: var(--f-times); font-size: var(--f-large); color: var(--c-pink); font-style: italic; width: 150px; left: 50%; right: auto; cursor: pointer;}
.tf._wulan{top: 20px; margin-left: -220px; align-items: flex-end;}
.tf._martha{top: 200px; margin-left: 260px;}
.tentang-founder.move-wulan{transform: translateX(150px); transition: all .8s;}
.tentang-founder.move-martha{transform: translateX(-180px); transition: all .8s;}
.tentang-sariayu-1{padding-top: var(--space-4); padding-bottom: 200px;}
.tentang-sariayu-4{padding-top: var(--space-4); padding-bottom: 0px;}
.tentang-sariayu-1 ._f1{font-size: var(--f-large); font-family: var(--f-mon); color: var(--c-black); padding-bottom: var(--space-0);}
.tentang-sariayu-1 ._f2{font-size: var(--s-small); font-family: var(--f-mon); color: var(--c-black); padding-bottom: var(--space-0);}
.tentang-wulan, .tentang-martha{position: absolute; z-index: 2; width: 30%; max-width: 450px; opacity: 0; display: none; transition: all .8s;}
.tentang-wulan{top: 320px; left: 5%; transform: translateX(-100px);}
.tentang-wulan .tooltip{position: absolute; bottom: 35%; left: 60%;}
.tentang-martha{top: 250px; right: 5%; transform: translateX(100px);}
.tentang-martha .tooltip{position: absolute; bottom: 40%; left: 45%;}
.tentang-wulan.active, .tentang-martha.active{display: block; opacity: 1; transform: translateX(0); transition: all .8s;}
.tentang-founder .tf._5{transform: translateX(0px); transition: all .8s;}
.tentang-founder.move-martha .tf._5{transform: translateX(340px); transition: all .8s;}
.tentang-sariayu-2{margin-top: -100px;}
.tentang-sariayu-2 ._overlay._right{top: auto; transform: translate(0); bottom: 0; right: 0; width: 37%;}
.tentang-sariayu-2 ._overlay._center{top: 250px; left: auto; margin-right: 280px; max-width: 470px}
.tentang-sariayu-3{padding-top: 0;}
.tentangslider{text-align: center; width: 100%; margin: auto;}
.tentangslider img{display: inline-block; width: 100%;}
.tentang-sariayu-3 .col-3-2{width: 65%;}
.history{position: relative; width: 100%; margin: auto;}
.historyslider{position: relative; width: 100%; margin: auto; text-align: center;}
.historyslider ._year{font-family: var(--f-times); font-size: var(--f-xlarge); font-style: italic; padding-top: 20px;}
.historyslider ._desc{width: 85%; padding-top: 80px; margin: auto;}
.historyslider .f1{font-family: var(--f-times); font-size: var(--f-large); line-height: var(--lh-large); font-style: italic;}
.historyslider .f2{font-family: var(--f-monl); font-size: var(--f-small); line-height: var(--lh-medium);}
.historynav{position: absolute; z-index: 12; top: 76%; left: 13.5%; width: 86.5%; transition: all .4s;}
.historyline{position: absolute; z-index: -1; width: 92%; top: 40px; right: 0; border-bottom: 2px dotted var(--c-blackl); opacity: .5; pointer-events: none; transition: all .4s;}
.historynav.active, .moving .historynav{left: 1%; width: 99%; transition: all .6s;}
.historyplay, .historystop{position: absolute; z-index: 2; top: 0; left: 0; cursor: pointer;}
.historyplay, .historystop{display: none; opacity: 0; transition: all .8s;}
.historyplay.active, .historystop.active{display: block; opacity: 1; transition: all .8s;}
.our-women-1, .our-women-2{padding-top: var(--space-4);}
.our-women-2{margin-top: var(--space-4);}
/*achivements*/
.achivements{}
.achivements .sub-nav.owl-carousel .owl-stage{margin: auto 0;}
.achivements .sub-nav{border: none; justify-content: space-between; position: relative; background: none;}
.achivements .sub-nav a{text-shadow: 2px 2px 4px rgba(255, 255, 255, 1);}
.achivements .sub-nav a:hover, .achivements .sub-nav li.active{color: #fff; text-shadow: 2px 2px 4px rgba(150, 150, 150, 1);}
.achivements .sub-nav li{padding: var(--space-4) 0; margin-right: 60px;}
.achivements-1{position: relative; width: 100%; margin: 0; margin-top: var(--space-4);}
.achivements-2 .card-list ._overlay{height: auto; min-height: 35%; max-height: 55%;}
/*trend warna*/
.trend-warna{position: relative; display: block; width: 100%; margin: auto;}
.trend-warna .content-bg{margin-top: 40px; padding-bottom: 40px;}
.trend-warna ._line{position: absolute; z-index: 5; top: 60px; left: 0; right: 0; margin: auto; width: 85%; border-bottom: 2px dotted #000; opacity: .4; pointer-events: none;}
.trend-nav{cursor: pointer;}
.trend-nav .owl-stage{display: flex;}
.trend-nav .synced .item{color: var(--c-pink);}
.trend-nav .item{position: relative; text-align: center; width: 100%; overflow: hidden;}
.trend-nav li{padding-right: var(--space-6);}
.trend-nav li ._img{position: relative;}
.trend-nav li ._year{padding-bottom: 100px;}
.trend-nav li ._hover{position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all .4s; display: flex; justify-content: center; align-items: center; color: #fff; font-family: var(--f-mon); font-size: var(--f-medium);}
.trend-nav li:hover ._hover{opacity: .85; transition: all .4s;}
.trend-nav.owl-carousel .owl-nav.disabled{display: block;}
.trend-nav .owlPrev, .trend-nav .owlNext, .trend-nav .disabled .owlPrev, .trend-nav .disabled .owlNext{margin-top: 15px;}
.trend-nav .owlPrev, .trend-nav .owl-prev.disabled .owlPrev, .trend-nav .owl-prev.disabled .owlPrev:hover{left: 0px;}
.trend-nav .owlNext, .trend-nav .owl-next.disabled .owlNext, .trend-nav .owl-next.disabled .owlNext:hover{right: 0px;}
/*beauty-tips*/
.beauty-tips-detail{position: relative; display: block; width: 100%; margin: auto;}
.beauty-tips-1{padding: 0; margin-top: 0; padding-bottom: 100px;}
/*promos-events*/
.promos-events{}
.promos-events-1 li{display: block; margin-bottom: var(--space-4);}
.events-detail{position: relative; display: block; width: 100%; margin: auto;}
.events-1{padding-bottom: 80px;}
.events-detail .owl-nav{display: none;}
.events-detail .slider-nav2{margin-top: 80px;}
.events-detail .slider-nav2 .item{margin-right: 10px; transition: all .4s; border: solid 1px transparent;}
.events-detail .slider-nav2 .synced .item{transition: all .4s; border: solid 1px var(--c-pink);}
/*stores*/
.stores{position: relative; display: block; width: 100%; margin: auto;}
.stores-1{margin-top: 0;}
.stores-filter{border-top: var(--line-1); padding-top: 50px; margin-top: 50px;}
.stores-filter li:nth-child(1){width: 28%;}
.stores-filter li{width: 29%;}
.stores .desc._p{font-size: var(--f-small);}
.stores .desc._p a{font-family: var(--f-monl);}
#noresults{display: none;}
.mansory{max-width: 100%;}
.mansory:after{content: ''; display: block; clear: both;}
.grid-item, .grid-sizer{width:33%; padding: 20px;}
.gutter-sizer{width: 2%;}
.grid-item {float: left; height: auto; margin-bottom: var(--space-6);}
/*contact*/
.contact{position: relative; display: block; width: 100%; margin: auto;}
.contact .desc._p{font-size: var(--f-small);}
.contact ._img{position: absolute; top: 0; left: 0; right: 0; margin: auto; text-align: center; margin-top: -300px;}
.contact ._img img{border-radius: 50%; display: inline-block;}
.contact-1{margin-top: 350px;}
.contact-1 ._menu{display: flex; justify-content: center; font-family: var(--f-mon); font-size: var(--f-small); margin-top: 60px;}
.contact-1 ._menu li{padding: 20px 30px; cursor: pointer; transition: all .4s;}
.contact-1 ._menu li.active{color: var(--c-pink); transition: all .4s;}
.contact-1 ._list{padding-top: var(--space-4);}
.contact-1 ._list li{padding-bottom: var(--space-4);}
.contact-1 ._list ._que{font-family: var(--f-mon); font-size: var(--f-medium); line-height: var(--lh-medium);}
.contact-1 ._list ._ans{font-family: var(--f-monl); font-size: var(--f-small); line-height: var(--lh-small);}
.contact-form{margin-top: var(--space-6); padding-bottom: var(--space-6);}
.contact-form li{display: flex; justify-content: flex-start; align-items: center; margin-bottom: var(--space-2);}
.contact-form .col-3-1{width: 20%;}
.contact-form .col{width: 1%;}
.contact-form .col-3-2{width:94%;}
.content-faq, .content-cont{display: none;}
.content-faq.active, .content-cont.active{display: block;}
/*search*/
.search{position: relative; display: block; width: 100%; margin: auto; background: url("../img/contact-bg-1.jpg") no-repeat top center; padding-bottom: 100px;}
.contact .desc._p{font-size: var(--f-small);}
.search-1{margin-top: 0px; padding-bottom: 40px;}
.searchList li{padding-bottom: var(--space-6);}
/*DOM*/
.modal{display: none;}
/*NEW ADDTHIS SHARE*/
.icon-social-media{display: inline-block; width: 32px; height: 32px; opacity: .35; transition: all .4s;margin-right: 15px;padding-bottom: 0px;}
.icon-social-media:hover{opacity: 1;}
/*NEW ADDITIONAL IMAGE KANDUNGAN BAHAN ALAMI-280321*/
.alami-kandungan-img{width: 100%;height: auto;align-self: center;}
/*15Jun2021*/
/*instafeed*/
.instafeed *{box-sizing: border-box; font-family: sans-serif; margin: 0; padding: 0;}
.instafeed{position: relative; padding-top: 0px;}
.instafeed a{display: block;}
.instafeed img{display: block; width: 100%;}
.instafeed .items{position: relative;}
.instafeed .items *{transition: all .3s;}
.instafeed .items a, .instafeed .items{color: #fff; font-size: 14px; line-height: 24px; text-align: center;}
.instafeed .items .overlay{position: absolute; z-index: 2; top: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; background: rgba(0,0,0,.6); opacity: 0; display: flex; justify-content: center; align-items: center; align-content: center; padding: 5%;}
.instafeed .items:hover .overlay{opacity: 1;}
.instafeed.grid{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.instafeed.grid .items{width: 25%;}
.view-image, .view-post{position: absolute; z-index: 10; bottom: 20%; opacity: 0; background: url("../img/icon.png") no-repeat; width: 50px; height: 50px; background-size: 50px 150px; padding: 25px;}
.view-image{left: 30%; background-position: 0 -100px;}
.view-post{right: 30%; background-position: 0 0;}
.items:hover .view-image, .items:hover .view-post{opacity: 1;}
/*carousel*/
.owlPrev, .owlNext, .owlPrevW, .owlNextW, .disabled .owlPrev, .disabled .owlNext{margin: 0; top: 50%; transform: translate(0,-50%);}
.owlPrev, .owlPrevW{left: 0px;}
.owlNext, .owlNextW{right: 0px;}
.trend-nav .owlPrev, .trend-nav .owlNext, .trend-nav .disabled .owlPrev, .trend-nav .disabled .owlNext{top: 0; transform: none; margin-top: 25px;}
.trend-nav .owlPrev, .trend-nav .owl-prev.disabled .owlPrev, .trend-nav .owl-prev.disabled .owlPrev:hover{left: 0px;}
.trend-nav .owlNext, .trend-nav .owl-next.disabled .owlNext, .trend-nav .owl-next.disabled .owlNext:hover{right: 0px;}
.taukah-slider .owlPrev, .taukah-slider .owlNext{tranform: translate(0); top: 0; margin-top: -50px;}
.taukah-slider .owlPrev{left: 160px}
.taukah-slider .owlNext{right: 160px}
/*responsive*/
@media only screen and (max-width: 999px) {
.instafeed{padding-top: 0px;}
.instafeed.grid .items{width: 100%;}
.fancybox-caption{display: none;}
.view-image, .view-post{bottom: 10%;}
}
@media only screen and (min-width: 601px) and (max-width: 999px) {
.instafeed.grid .items{width: 50%;}
}
@media only screen and (min-width: 1000px) and (max-width: 1366px) {
.instafeed.grid .items{width: 25%;}
.instafeed .items .overlay{align-items: flex-start; align-content: flex-start; padding: 5%;}
.view-image, .view-post{bottom: 5%;}
}
.no-f{font-size: 0.001px;}
/*NEW ADDITIONAL SOCIAL IMPACT-220721*/
.dropdown-social-impact{display: inline-block; margin-top: 0px; color: black;}
.dropdown-social-impact a.active{color: var(--c-pink); transition: all .4s;}
.dsi-vline{font-weight: normal; padding: 0 5px; font-size: var(--f-medium);}
/*NEW START MODAL 2023*/
/* Slick */
.slick-slide:focus { outline: none; }
.slick-arrow {
width: 30px;
z-index: 1;
opacity: 1;
}
.slick-arrow:before {
content: '';
width: 100%;
height: 100%;
/*background-image: url('../img/arrows.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;*/
display: block;
position: relative;
z-index: 1;
}
.slick-prev {
left: 0;
}
.slick-prev:before {
transform: rotate(180deg);
}
.slick-next {
right: 0;
}
.line-clamp-1 > * {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.line-clamp-2 > * {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.line-clamp-3 > * {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.line-clamp-4 > * {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
/* Promo Modal */
.modal-content .close {
position: absolute;
top: 15px;
right: 15px;
height: 30px;
width: 30px;
border-radius: 100%;
text-shadow: none;
background: var(--red);
box-shadow: 0 0 10px rgba(0,0,0,0.4);
color: white;
opacity: 1;
z-index: 1;
}
#modal-promo .modal-dialog-centered {
display: -webkit-flex; /* NEW */
-webkit-flex-wrap: wrap; /* NEW */
}
#modal-promo .modal-content {
border: none;
background: transparent;
position: relative;
z-index: 1;
}
#modal-promo .modal-body {
padding: 0;
}
#modal-promo .slick-next {
right: -45px;
}
#modal-promo .slick-prev {
left: -45px;
transform: rotate(180deg);
}
.promo-banner a {
display: block;
}
.promo-banner a img {
width: 100%;
border-radius: 15px;
}
/*NEW END MODAL 2023*/