@import url(https://fonts.googleapis.com/css?family=Playfair+Display:700|Roboto:300,400,500);

.icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle
}

.icon:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg)
}

.icon-fb {
    width: 11px
}

.icon-fb:before {
    background-position: -3px -11px
}

.footer-social .icon-fb:before {
    background-position: -3px -30px
}

.article-social .icon-fb:before {
    background-position: -362px -118px
}

.icon-tw {
    width: 24px
}

.icon-tw:before {
    background-position: -21px -11px
}

.footer-social .icon-tw:before {
    background-position: -21px -30px
}

.icon-ig {
    width: 20px
}

.icon-ig:before {
    background-position: -45px -11px
}

.footer-social .icon-ig:before {
    background-position: -45px -30px
}

.icon-gp {
    width: 29px
}

.icon-gp:before {
    background-position: -66px -11px
}

.footer-social .icon-gp:before {
    background-position: -66px -30px
}

.icon-yt {
    width: 28px
}

.icon-yt:before {
    background-position: -97px -11px
}

.footer-social .icon-yt:before {
    background-position: -97px -30px
}

.icon-pt {
    width: 16px
}

.icon-pt:before {
    background-position: -127px -11px
}

.footer-social .icon-pt:before {
    background-position: -127px -30px
}

.icon-search {
    width: 20px
}

.icon-search:before {
    background-position: -325px -12px
}

.icon-location {
    width: 16px
}

.icon-location:before {
    background-position: -349px -12px
}

.icon-account {
    width: 16px
}

.icon-account:before {
    background-position: -283px -12px
}

.icon-cart {
    width: auto
}

.icon-cart:before {
    background-position: -305px -12px;
    width: 16px
}

.icon-wa {
    width: 18px
}

.icon-wa:before {
    background-position: -144px -71px
}

.icon-mailw {
    width: 22px
}

.icon-mailw:before {
    background-position: -166px -71px
}

.icon-min,
.icon-plus {
    width: 22px;
    height: 22px;
    cursor: pointer
}

.icon-min:before,
.icon-plus:before {
    width: 12px;
    height: 9px;
    vertical-align: middle
}

.icon-min:before {
    background-position: -581px -11px
}

.icon-plus:before {
    background-position: -592px -11px
}

.icon-star {
    width: 17px;
    margin-right: 10px
}

.icon-star:before {
    background-position: -523px -13px
}

.wishlist:hover .icon-star:before {
    background-position: -523px -36px
}

.icon-delete {
    width: 14px;
    height: 14px
}

.icon-delete:before {
    background-position: -466px -11px
}

.icon-filter {
    width: 20px;
    margin-right: 15px
}

.icon-filter:before {
    background-position: -367px -11px
}

.togglefilter:hover .icon-filter:before {
    background-position: -367px -33px
}

.article-social .icon {
    height: 18px
}

.article-social .icon-tw {
    width: 20px
}

.article-social .icon-tw:before {
    background-position: -376px -118px
}

.article-social .icon-gp {
    width: 25px
}

.article-social .icon-gp:before {
    background-position: -419px -118px
}

.article-social .icon-pt {
    width: 14px
}

.article-social .icon-pt:before {
    background-position: -450px -118px
}

.article-social .icon-mail {
    width: 25px
}

.article-social .icon-mail:before {
    background-position: -468px -118px
}

.article-social .icon-share {
    width: 16px
}

.article-social .icon-share:before {
    background-position: -495px -118px
}

.article-social .icon:hover:before {
    background-position-y: -99px
}

.product-social .icon {
    height: 18px
}

.product-social .icon-fb:before {
    background-position: -362px -81px
}

.product-social .icon-tw {
    width: 20px
}

.product-social .icon-tw:before {
    background-position: -376px -81px
}

.product-social .icon-gp {
    width: 25px
}

.product-social .icon-gp:before {
    background-position: -419px -81px
}

.product-social .icon-pt {
    width: 14px
}

.product-social .icon-pt:before {
    background-position: -450px -81px
}

.product-social .icon-mail {
    width: 25px
}

.product-social .icon-mail:before {
    background-position: -468px -81px
}

.product-social .icon-share {
    width: 16px
}

.product-social .icon-share:before {
    background-position: -495px -81px
}

.preload .navTrigger i {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    -webkit-animation-duration: 0s !important
}

.navTrigger {
    position: absolute;
    top: 13px;
    left: 0;
    cursor: pointer;
    width: 20px;
    height: 20px
}

.navTrigger i {
    background-color: #777779;
    border-radius: 2px;
    content: '';
    display: block;
    width: 100%;
    height: 2px
}

.navTrigger i:nth-child(1) {
    -webkit-animation: outT .5s backwards;
    animation: outT .5s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse
}

.navTrigger i:nth-child(2) {
    margin: 5px 0;
    -webkit-animation: outM .5s backwards;
    animation: outM .5s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse
}

.navTrigger i:nth-child(3) {
    -webkit-animation: outBtm .5s backwards;
    animation: outBtm .5s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse
}

@-webkit-keyframes inM {
    50% {
        -webkit-transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(45deg)
    }
}

@keyframes inM {
    50% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(45deg)
    }
}

@-webkit-keyframes outM {
    50% {
        -webkit-transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(45deg)
    }
}

@keyframes outM {
    50% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(45deg)
    }
}

@-webkit-keyframes inT {
    0% {
        -webkit-transform: translateY(0) rotate(0)
    }

    50% {
        -webkit-transform: translateY(7px) rotate(0)
    }

    100% {
        -webkit-transform: translateY(7px) rotate(135deg)
    }
}

@keyframes inT {
    0% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(7px) rotate(0)
    }

    100% {
        transform: translateY(7px) rotate(135deg)
    }
}

@-webkit-keyframes outT {
    0% {
        -webkit-transform: translateY(0) rotate(0)
    }

    50% {
        -webkit-transform: translateY(7px) rotate(0)
    }

    100% {
        -webkit-transform: translateY(7px) rotate(135deg)
    }
}

@keyframes outT {
    0% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(7px) rotate(0)
    }

    100% {
        transform: translateY(7px) rotate(135deg)
    }
}

@-webkit-keyframes inBtm {
    0% {
        -webkit-transform: translateY(0) rotate(0)
    }

    50% {
        -webkit-transform: translateY(-7px) rotate(0)
    }

    100% {
        -webkit-transform: translateY(-7px) rotate(135deg)
    }
}

@keyframes inBtm {
    0% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-7px) rotate(0)
    }

    100% {
        transform: translateY(-7px) rotate(135deg)
    }
}

@-webkit-keyframes outBtm {
    0% {
        -webkit-transform: translateY(0) rotate(0)
    }

    50% {
        -webkit-transform: translateY(-7px) rotate(0)
    }

    100% {
        -webkit-transform: translateY(-7px) rotate(135deg)
    }
}

@keyframes outBtm {
    0% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-7px) rotate(0)
    }

    100% {
        transform: translateY(-7px) rotate(135deg)
    }
}

.back-link {
    position: relative;
    padding-left: 45px;
    line-height: 20px
}

.back-link:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 27px;
    height: 16px;
    background: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg) no-repeat;
    background-position: -144px -55px
}

.close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
    cursor: pointer
}

.close-btn:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg);
    background-position: -428px -54px
}

.noticemsg {
    background: #f87498;
    display: inline-block;
    padding: 10px 35px 10px 15px;
    color: #fff;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0)
}

.noticemsg:after {
    content: '';
    display: block;
    position: absolute;
    width: 14px;
    height: 100%;
    top: 0;
    right: 10px;
    background: url(https://cathydoll.co.id/assets/frontend/images/icon/sm-white.svg) no-repeat center;
    cursor: pointer
}

.site-main {
    background-color: #fff
}

.extra-pad {
    padding-left: 20px;
    padding-right: 20px
}

@media (max-width:500px) {
    #navbar4 {
        display: none
    }
}

.form-control::-webkit-input-placeholder {
    font-weight: 300;
    color: #666;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    font-weight: 300;
    color: #666;
    opacity: 1
}

.form-control::-ms-input-placeholder {
    font-weight: 300;
    color: #666;
    opacity: 1
}

.form-control::placeholder {
    font-weight: 300;
    color: #666;
    opacity: 1
}

.form-control {
    background: 0 0;
    border: none;
    border-radius: 0;
    border: 2px solid #000;
    padding: 15px 16px;
    outline: 0;
    box-shadow: none;
    line-height: 1
}

.form-control:focus {
    color: inherit;
    background-color: transparent;
    border-color: inherit;
    outline: 0;
    box-shadow: none
}

textarea.form-control {
    min-height: 100px
}

.btn.focus,
.btn:focus {
    outline: 0;
    box-shadow: none
}

.btn {
    border-radius: 0;
    line-height: 1;
    text-rendering: geometricPrecision
}

.btn-doll {
    width: 140px;
    padding: 16px;
    background: #f87498;
    color: #fff;
    font-weight: 500;
    cursor: pointer
}

.btn-doll:hover {
    box-shadow: inset 0 -4px 0 0 #e4557c
}

a.btn-doll:hover {
    color: #fff
}

.btn-doll-long {
    width: auto
}

.btn-doll-full {
    width: 100%
}

@media (min-width:767px) {
    .btn-doll-long {
        padding-left: 95px;
        padding-right: 95px
    }
}

.form-section .btn-doll {
    width: 100%
}

.form-section a,
.location-item a {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px
}

.blank-section a {
    font-weight: 500
}

.upperlink {
    text-transform: uppercase;
    font-weight: 500
}

a {
    color: #000;
    transition: color .15s;
    outline: 0;
    text-decoration: none
}

a.active,
a:hover {
    color: #f87498;
    text-decoration: none
}

body,
html {
    font-size: 16px;
    color: #000;
    background-color: #fff;
    font-family: Roboto, sans-serif;
    font-weight: 300;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    text-rendering: geometricPrecision
}

p {
    margin-bottom: 25px
}

strong {
    font-weight: 500
}

.content a {
    font-weight: 500
}

.font-xxl {
    font-size: 24px;
    font-family: 'Playfair Display', serif;
    color: #f87498
}

.font-xl {
    font-size: 20px;
    font-family: 'Playfair Display', serif;
    color: #f87498
}

.font-xl2 {
    font-size: 20px;
    font-family: 'Playfair Display', serif;
    color: #f87498
}

.font-l {
    font-size: 18px;
    font-family: Roboto, sans-serif
}

.font-m {
    font-size: 16px;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    letter-spacing: .5px
}

.font-s {
    font-size: 14px;
    font-family: Roboto, sans-serif;
    font-weight: 400
}

.title-carousel {
    font-size: 65px;
    font-family: 'Playfair Display', serif
}

.title-banner {
    font-size: 48px;
    font-family: 'Playfair Display', serif
}

.title-banner-s {
    font-size: 36px;
    font-family: 'Playfair Display', serif
}

.title-xl {
    font-size: 24px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600
}

.title-l {
    font-size: 21px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600
}

.title-m {
    font-size: 18px;
    font-family: 'Work Sans', sans-serif
}

.title-s {
    font-size: 16px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600
}

.title-xs {
    font-size: 14px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 1.5px
}

.txt-xl {
    font-family: 'Work Sans', sans-serif
}

.txt-xs {
    font-size: 14px
}

.color-white {
    color: #fff
}

.color-red {
    color: #ff6074
}

.mb-l {
    margin-bottom: 60px
}

.mb-m {
    margin-bottom: 40px
}

.mb-s {
    margin-bottom: 30px
}

.container-med {
    width: 100%;
    max-width: 610px;
    margin: auto;
    padding-left: 20px;
    padding-right: 20px
}

.container-small {
    width: 100%;
    max-width: 450px;
    margin: auto;
    padding-left: 20px;
    padding-right: 20px
}

.container-wrapper {
    padding-left: 90px;
    padding-right: 90px
}

.separator {
    width: 100%;
    height: 20px
}

.separator-m {
    width: 100%;
    height: 80px
}

.separator-s {
    width: 100%;
    height: 10px
}

.row-listing {
    margin-bottom: -30px
}

.row-listing>div {
    margin-bottom: 30px
}

#masthead {
    aposition: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    atransform: translate(0, -95px);
    atransition: transform .3s
}

.nav-notification {
    width: 100%;
    height: 42px;
    background-color: #fee3ea;
    font-size: 14px;
    color: #f87498;
    text-align: center;
    line-height: 42px;
    overflow: hidden
}

.nav-header {
    position: relative;
    padding: 2px 2px 2px;
    background: #fff;
    display: flex;
    align-items: center;
    z-index: 97
}

.nav-header .row {
    align-items: center;
    position: relative
}

.nav-header .list-inline {
    margin: 0 0 3px 0
}

.nav-header.stick {
    position: fixed;
    width: 100%;
    top: 0
}

.nav-menu {
    margin-top: 30px;
    text-align: center
}

.nav-menu .menu-detail {
    text-align: left;
    height: 0;
    visibility: hidden;
    opacity: 0;
    position: absolute
}

.nav-menu>ul>li:hover>div.menu-detail {
    opacity: 1;
    height: auto;
    width: auto;
    visibility: visible;
    z-index: 99;
    background-color: pink;
    -webkit-transition: height 1s;
    -moz-transition: height 1s;
    transition: height 1s;
    border-top: 3px solid #39d;
    overflow: hidden
}

.menu-detail .section {
    padding: 10px
}

.menu-detail .links ul li {
    display: inline-block
}

.menu-detail .links ul li a {
    text-decoration: none
}

@media (min-width:768px) {
    .menu-detail.profile .links {
        width: 100%
    }
}

.nav-menu .list-inline-item {
    margin-left: 13px;
    margin-right: 13px;
    font-size: 14px;
    font-family: Roboto, sans-serif;
    font-weight: 500;
    text-transform: uppercase
}

.nav-menu .list-inline-item a {
    display: inline-block;
    padding: 5px;
    color: #000
}

.nav-icon .list-inline-item {
    margin-left: 34px;
    cursor: pointer
}

.nav-icon .list-inline-item:first-child {
    margin-left: 0
}

.search-bar {
    position: relative
}

.search-bar .form-control {
    border: none;
    border-bottom: 2px solid;
    padding-right: 0;
    max-width: 610px;
    margin: auto;
    padding-right: 0;
    padding-left: 0
}

.nav-header .search-bar {
    display: none;
    position: absolute;
    left: 0;
    top: 80px;
    width: 100%;
    height: 800px;
    background: #fff
}

.nav-header .search-bar form {
    position: relative;
    max-width: 610px;
    margin: auto
}

.search-bar .icon {
    position: absolute;
    top: 16px;
    left: 0
}

.search-bar .form-control {
    max-width: 100%;
    padding-left: 35px;
    margin-bottom: 60px
}

.mobile-menu .title {
    text-align: center;
    margin-bottom: 25px
}

.mobile-menu .close-btn {
    position: absolute;
    top: 40px;
    left: 20px
}

.mobile-menu .category-item,
.mobile-menu .footer-links li {
    margin-left: 10px;
    font-size: 14px
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    height: 100%;
    width: 100%;
    background: #fff;
    z-index: 99;
    transition: all .5s;
    padding: 35px 20px 30px
}

.open-menu .mobile-menu {
    opacity: 1;
    visibility: visible
}

@media (min-width:992px) {
    .open-menu .mobile-menu {
        opacity: 0;
        visibility: hidden
    }
}

.accor-title {
    margin-bottom: 20px;
    cursor: pointer
}

.m-title {
    margin-bottom: 20px;
    cursor: pointer
}

.accor-title:after {
    content: '';
    display: inline-block;
    width: 17px;
    height: 10px;
    vertical-align: middle;
    background-image: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg);
    background-position: -448px -11px;
    margin-left: 14px
}

.accor>.accor-content {
    display: none
}

.accor-open>.accor-content {
    display: block
}

.accor-open .accor-title:after {
    margin-top: -3px;
    transform: rotate(180deg)
}

.custom-select {
    outline: 0;
    font-weight: 300;
    width: 100%;
    border: 2px solid;
    border-radius: 0;
    padding: 13px 16px;
    height: auto
}

.custom-select:focus {
    border-color: inherit
}

.product-filter .custom-select {
    width: auto;
    border: none;
    padding: .375rem 1.75rem .375rem .75rem
}

.cradio input[type=radio].css-radio {
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0
}

.cradio input[type=radio].css-radio+label.css-label {
    position: relative;
    visibility: visible;
    opacity: 1;
    display: inline-block;
    font-weight: 300;
    color: #000;
    line-height: 1.8;
    letter-spacing: .1px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: 0 2px;
    padding-left: 40px;
    cursor: pointer
}

.cradio input[type=radio].css-radio:checked+label.css-label {
    background-image: url(https://cathydoll.co.id/assets/frontend/images/icon/cradio-checked.png)
}

.cradio label.css-label {
    background-image: url(https://cathydoll.co.id/assets/frontend/images/icon/cradio.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.customradio {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 0;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.customradio+div {
    margin-top: 30px
}

.customradio input {
    position: absolute;
    opacity: 0
}

.radiobtn {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 20px;
    border: 2px solid #000
}

.radiobtn:after {
    content: "";
    position: absolute;
    display: none
}

.customradio input:checked~.radiobtn {
    border-color: #f87498
}

.customradio input:checked~.radiobtn:after {
    display: block
}

.customradio .radiobtn:after {
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 6px;
    background: #f87498
}

.checkbox {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid #000;
    transition: background-color .25s
}

.customradio input:checked~.checkbox {
    border-color: #f87498
}

.checkbox:after {
    content: "";
    position: absolute;
    display: none
}

.customradio input:checked~.checkbox:after {
    display: block
}

.customradio .checkbox:after {
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid #f87498;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.u-paging {
    margin-top: 25px
}

.u-paging li {
    margin: 0 5px
}

.u-paging li a {
    font-size: 18px;
    font-weight: 400;
    padding: 0 5px
}

.u-paging li a:hover {
    text-decoration: none
}

.u-paging .prev {
    display: inline-block;
    width: 10px;
    height: 20px;
    background: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg) no-repeat top left;
    background-position: -622px -11px;
    vertical-align: middle
}

.u-paging a:hover .prev {
    background-position: -622px -34px
}

.u-paging .next {
    display: inline-block;
    width: 10px;
    height: 20px;
    background: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg) no-repeat top left;
    background-position: -645px -11px;
    vertical-align: middle
}

.u-paging a:hover .next {
    background-position: -645px -34px
}

.home-slider .item,
.home-slider .owl-carousel,
.home-slider .owl-carousel .owl-item,
.home-slider .owl-carousel .owl-stage,
.home-slider .owl-carousel .owl-stage-outer {
    height: 141px
}

.home-slider .item {
    position: relative
}

.home-slider .item a {
    display: block;
    height: 100%;
    background-size: cover;
    background-position: center
}

.home-slider .owl-nav {
    position: absolute;
    width: 100%;
    height: 40px;
    top: 50%;
    transform: translate(0, -50%);
    pointer-events: none
}

.home-slider .owl-nav>div {
    position: absolute;
    display: block;
    width: 100px;
    height: 40px;
    pointer-events: auto
}

.home-slider .owl-nav>div.disabled {
    display: none
}

.home-slider .owl-nav>div:before {
    position: absolute;
    top: 10px;
    width: 30px;
    height: 60px;
    content: '';
    background-image: url(../images/icon/next.webp);
    background-size: 60px 30px;
    background-repeat: no-repeat;
    background-color: #eaeaea;
    opacity: .5
}

.home-slider .owl-prev {
    left: 30px
}

.home-slider .owl-prev:before {
    background-position: 5px 16px
}

.home-slider .owl-prev:hover:before {
    opacity: 1
}

.home-slider .owl-next {
    right: 30px
}

.home-slider .owl-next:before {
    background-position: -35px 16px;
    right: 0
}

.home-slider .owl-next:hover:before {
    opacity: 1
}

@media only screen and (min-width:576px) {

    .home-slider .item,
    .home-slider .owl-carousel,
    .home-slider .owl-carousel .owl-item,
    .home-slider .owl-carousel .owl-stage,
    .home-slider .owl-carousel .owl-stage-outer {
        height: 75vh
    }

    .side-cart-bottom {
        padding-bottom: 10vh
    }
}

.home-slider .item img {
    height: 100%;
}

.banner-caption {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(0, -50%)
}

.banner-caption .title {
    max-width: 350px;
    line-height: 1;
    margin-bottom: 30px
}

.banner-caption .desc {
    max-width: 250px;
    color: #000
}

.owl-dots {
    position: absolute;
    bottom: -10px;
    left: 0;
    margin: auto;
    right: 0;
    text-align: center
}

.owl-dots .owl-dot {
    display: inline-block;
    padding: 0 5px;
    cursor: pointer
}

.owl-dots .owl-dot:before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: #ffeef2
}

.owl-dots .owl-dot.active:before {
    background: #f7939b
}

.best-bg {
    background: url(https://cathydoll.co.id/assets/frontend/images/icon/pro-bg.png) no-repeat center;
    background-size: contain
}

.home-slider-best {
    text-align: center
}

.home-slider-best .product-thumb-img {
    margin-bottom: 0
}

.home-slider-best .owl-nav {
    position: absolute;
    bottom: 50%;
    width: 100%;
    pointer-events: none
}

.home-slider-best .owl-nav>div {
    position: absolute;
    display: block;
    width: 100px;
    height: 40px;
    pointer-events: auto
}

.home-slider-best .owl-nav>div.disabled {
    display: none
}

.home-slider-best .owl-nav>div:before {
    position: absolute;
    top: -20px;
    width: 30px;
    height: 60px;
    content: '';
    background-image: url(../images/icon/next.webp);
    background-size: 60px 30px;
    background-repeat: no-repeat;
    background-color: #eaeaea;
    opacity: .5
}

.home-slider-best .owl-prev {
    left: 0
}

.home-slider-best .owl-prev:before {
    background-position: 5px 16px;
    left: 0
}

.home-slider-best .owl-prev:hover:before {
    opacity: 1
}

.home-slider-best .owl-next {
    right: 0
}

.home-slider-best .owl-next:before {
    background-position: -35px 16px;
    right: 0
}

.home-slider-best .owl-next:hover:before {
    opacity: 1
}

.collections-highlight {
    text-align: center
}

.collections-thumb {
    display: block;
    justify-content: center
}

.collections-thumb .item a {
    position: relative;
    display: block
}

.collections-thumb .item {
    width: 20%;
    display: inline-block;
    transition: transform .3s .3s;
    overflow: hidden
}

.collections-thumb .item .hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transition: .35s .15s
}

.collections-thumb .item .hover img {
    padding: 15%;
    transform: translate(0, 30px);
    opacity: 0;
    transition: .45s cubic-bezier(.175, .885, .32, 1.275) .1s
}

.collections-thumb .item .hover span {
    font-size: 12px;
    transform: translate(0, 50px);
    opacity: 0;
    color: #fff;
    transition: .5s cubic-bezier(.175, .885, .32, 1.275) .1s
}

@media(min-width:768px) {
    .collections-thumb {
        display: flex
    }

    .collections-thumb .item .hover img {
        padding: 20px;
        margin-bottom: 24px
    }

    .collections-thumb .item .hover span {
        font-size: 14px
    }

    .collections-thumb .item:nth-child(2n) {
        margin-top: 20px
    }
}

@media(min-width:992px) {
    .collections-thumb .item .hover span {
        font-size: 16px
    }
}

.collections-thumb .item:hover {
    transform: translate(0, -5px);
    transition: .2s
}

.collections-thumb .item:hover .hover {
    opacity: 1;
    transition-delay: 0s
}

.collections-thumb .item:hover .hover img,
.collections-thumb .item:hover .hover span {
    transform: translate(0, 0);
    opacity: 1
}

.about-highlight {
    margin-bottom: -70px
}

.about-highlight .row>div {
    display: flex;
    margin-bottom: 70px;
    text-align: center;
    flex-direction: column;
    justify-content: center
}

.about-highlight .row>div>.img-fluid {
    width: 100%
}

.about-highlight .text-cover {
    display: flex;
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    text-align: center;
    flex-direction: column
}

.side-content {
    position: fixed;
    display: flex;
    flex-direction: column;
    background: #fff;
    width: 415px;
    max-width: 100%;
    top: 0;
    bottom: 0;
    right: -100%;
    z-index: 99;
    padding-bottom: 30px;
    transition: .4s
}

.side-content.open {
    right: 0
}

.side-content-header {
    height: 95px;
    flex: 0 0 95px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 25px;
    text-align: center
}

.side-content-header .back-link {
    cursor: pointer
}

.side-content-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto
}

.side-cart {
    overflow: auto;
    padding-left: 20px;
    padding-right: 20px
}

.side-cart-bottom {
    margin-top: auto;
    padding-left: 20px;
    padding-right: 20px
}

.banner-store {
    background-size: cover;
    height: 500px;
    color: #fff
}

.section {
    text-align: center
}

.section>.title {
    margin-bottom: 40px
}

.product-thumb-img {
    display: block;
    position: relative;
    padding: 15%
}

.product-thumb-img img {
    width: 100%
}

.product-thumb-color {
    height: 20px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: 66%
}

.product-color-thumb-custom {
    height: 20px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: 66%
}

.product-thumb-title {
    margin-bottom: 5px;
    margin-top: 5px
}

.product-thumb-img .sale {
    position: absolute;
    top: 7.75%;
    left: 7.85%;
    width: 62px;
    height: 62px;
    background: url(../images/icon/badge-sale.png) no-repeat;
    color: #fff;
    font-weight: 500;
    line-height: 65px;
    text-align: center
}

.product-thumb-img .sold {
    position: absolute;
    top: 7.75%;
    right: 7.85%;
    width: 62px;
    height: 62px;
    padding: 0 8px;
    background: url(../images/icon/badge-sold.png) no-repeat;
    background-size: 90%;
    color: #fff;
    font-weight: 500;
    line-height: 65px;
    text-align: center;
    font-size: 11px
}

.product-thumb-img .sold span {
    line-height: 1;
    display: inline-block;
    vertical-align: middle
}

.journal-section {
    margin-bottom: -85px
}

.journal-thumb {
    text-align: left;
    margin-bottom: 85px
}

.journal-thumb .journal-thumb-img {
    display: inline-block;
    margin-bottom: 27px;
    background: #fee3ea no-repeat center;
    background-size: cover;
    height: 300px;
    width: 300px;
    position: relative
}

.journal-thumb .journal-thumb-img picture,
.journal-thumb .journal-thumb-img picture img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

.journal-thumb-date {
    margin-bottom: 10px;
    padding: 0 25px
}

.journal-thumb-title {
    display: inline-block;
    padding: 0 25px
}

.journal-long .row {
    align-items: center;
    text-align: left
}

.journal-long .journal-thumb-img {
    display: block;
    margin-bottom: 27px;
    background: #fee3ea no-repeat center;
    background-size: cover;
    height: 360px;
    width: 100%
}

.journal-long .journal-thumb-img picture,
.journal-long .journal-thumb-img picture img {
    width: 100%;
    display: block;
    object-fit: cover;
    position: static;
    height: 100%
}

.home-highlight>.row>div {
    padding-right: 20px;
    padding-left: 20px
}

.ig-thumb {
    margin-bottom: 40px;
    padding-bottom: 100%;
    background: #fee3ea no-repeat center;
    background-size: cover
}

.home-highlight>.row>div:first-child {
    margin-top: 10%
}

.testimonial {
    position: relative;
    margin-bottom: 40px;
    padding: 140px 25px 60px;
    background: #ffeef2;
    text-align: center;
    color: #f87498
}

.testimonial:before {
    content: '';
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 32px;
    height: 27px;
    background: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg) no-repeat -219px -38px
}

.testimonial .title {
    margin-top: 60px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .5px;
    word-break: break-all
}

.title-testi {
    margin-top: 50px;
    margin-bottom: 40px;
    word-break: break-word
}

.title-ig {
    margin-top: 40px;
    word-break: break-word
}

@media (min-width:1200px) {
    .journal-long .journal-thumb-title {
        font-size: 30px
    }

    .testimonial {
        padding-left: 80px;
        padding-right: 80px
    }

    .title-testi {
        margin-top: 50px;
        margin-bottom: 138px
    }

    .title-ig {
        margin-top: 138px
    }
}

@media (min-width:1440px) {
    .home-highlight>.row>div {
        padding-right: 30px;
        padding-left: 30px
    }
}

.article .content {
    margin: 0 auto -25px;
    max-width: 790px;
    word-wrap: break-word
}

.article .date {
    margin-bottom: 15px
}

.article>.title {
    margin: auto;
    max-width: 610px;
    text-align: center
}

.article .journal-img {
    margin: auto;
    max-width: 790px
}

.article .content img {
    max-width: 100%
}

.article-social {
    text-align: center;
    margin: 0
}

.article-social li {
    margin: 0 10px
}

.video-section {
    max-width: 970px;
    margin-bottom: -85px;
    padding-left: 20px;
    padding-right: 20px
}

.video-section>.row {
    margin-right: -10px;
    margin-left: -10px
}

.video-section>.row>div {
    padding-right: 10px;
    padding-left: 10px
}

.video-thumb {
    text-align: left;
    margin-bottom: 40px;
    text-align: center;
    cursor: pointer
}

.video-thumb-img {
    position: relative;
    display: block;
    padding-bottom: 57.5%;
    margin-bottom: 27px;
    background: #fee3ea no-repeat center;
    background-size: cover
}

.video-thumb-img:after,
.video-thumb-img:before {
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    background: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg) no-repeat -212px -92px;
    transition: opacity .15s
}

.video-thumb-img:before {
    background-position: -287px -92px
}

.video-thumb-title {
    display: inline-block;
    padding: 0 25px;
    transition: color .15s
}

.video-thumb:hover .video-thumb-title {
    color: #f87498
}

.video-thumb:hover .video-thumb-img:after {
    opacity: 0
}

.event-section {
    margin-bottom: -80px
}

.event-thumb {
    align-items: center;
    text-align: left;
    margin-bottom: 80px
}

.event-thumb-img {
    display: block;
    padding-bottom: 51.6%;
    background: #fee3ea no-repeat center;
    background-size: cover
}

.event-thumb-date {
    margin-bottom: 10px
}

.event-thumb-title {
    display: inline-block;
    font-size: 30px !important
}

.event-thumb-desc {
    margin-top: 30px
}

.article .event-img {
    margin: auto;
    max-width: 790px
}

.side-box {
    background-color: #f9f9f9;
    padding: 51px 35px 35px;
    margin-top: 30px
}

.side-box:first-child {
    margin: 0
}

.blank2>.title,
.side-box>.title {
    margin-bottom: 35px
}

.side-link {
    margin-top: 15px;
    margin-bottom: 15px
}

.faq-box {
    margin-top: 21px
}

.faq-box:first-child {
    margin-top: 45px
}

.faq-box .title {
    font-weight: 700;
    margin-bottom: 10px
}

.faq-box .desc {
    padding-bottom: 24px
}

.size-box {
    margin-bottom: 30px
}

.size-box>.title {
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 30px;
    text-transform: uppercase
}

.size-box table {
    width: 100%;
    margin-bottom: 21px;
    text-align: center
}

.size-box table td:first-child,
.size-box table th:first-child {
    text-align: left
}

.size-box table td,
.size-box table th {
    margin: 0;
    padding: 0
}

.blank2>p {
    margin-bottom: 30px
}

.page-cover {
    height: 100%;
    background: #fee3ea no-repeat center;
    background-size: cover
}

.page404 body,
html.page404 {
    background: #fee3ea;
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.modal,
.modal-review {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffeef2;
    background: rgba(255, 238, 242, .9);
    z-index: 98
}

.modal-review:after,
.modal:after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5%;
    right: 10%;
    background: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg) no-repeat -428px -11px;
    cursor: pointer
}

.open-modal .modal,
.open-modal-review .modal-review {
    display: block;
    opacity: 1
}

.modal>iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 800px;
    max-height: 450px
}

.pink-pad {
    padding: 40px 30px;
    background: #ffeef2
}

.silver-pad {
    padding: 40px 30px;
    background: #f7f7f7;
    border: solid 1px #e8e8e8
}

.silver-pad>.title {
    margin-bottom: 30px
}

.pink-item {
    display: block;
    font-weight: 500
}

.pink-item.active {
    color: #f87498
}

.silver-pad .checkout-cart-2 {
    margin-bottom: 20px
}

.silver-pad .btn-doll {
    margin-top: 30px;
    width: 100%
}

.pink-pad>.title {
    margin-bottom: 30px
}

.pink-item {
    display: block;
    margin-bottom: 5px;
    font-weight: 100
}

.pink-item.active {
    color: #f87498
}

.pink-pad .checkout-cart-2 {
    margin-bottom: 20px
}

.pink-pad .btn-doll {
    margin-top: 30px;
    width: 100%
}

.inv-pad {
    padding: 40px 0;
    margin-bottom: -60px
}

.blank-item {
    margin-bottom: 60px
}

.blank-item>.title {
    margin-bottom: 30px
}

.blank-form {
    margin-top: 30px
}

.blank-form input,
.blank-form textarea {
    margin-bottom: 30px
}

.blank-form textarea {
    min-height: 110px
}

.career-item {
    text-align: left;
    margin-bottom: 40px
}

.career-desc {
    margin-top: 20px
}

.career-title {
    position: relative;
    margin-bottom: 12px;
    cursor: pointer
}

.career-title:after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    top: 3px;
    right: 0;
    vertical-align: middle;
    background-image: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg);
    background-position: -388px -11px;
    margin-left: 14px
}

.career-item>.career-desc {
    display: none
}

.career-item-open>.career-desc {
    display: block
}

.career-item-open .career-title:after {
    background-position: -408px -11px
}

.site-footer {
    font-size: 14px
}

.footer-logo {
    height: 30px;
    margin-bottom: 17px
}

.footer-logo img {
    height: 100%
}

.footer-title {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 15px;
    border-bottom: 1px #fff solid;
    border-bottom-right-radius: 0
}

.footer-1 {
    background: #fff;
    color: #000
}

.newsletter {
    display: flex;
    max-width: 436px;
    margin: auto
}

.newsletter .form-control {
    color: #f87498;
    border-color: #f87498
}

.footer-social {
    margin-top: 55px
}

.footer-social li {
    margin: 0 30px
}

.footer-2 {
    background: #fee3ea;
    color: #2e2e2e;
    padding-top: 25px
}

.footer-2 a {
    color: #2e2e2e
}

.footer-2 a:hover {
    color: #f87498
}

.footer-2 .row {
    margin-bottom: -70px
}

.footer-2 .row>div {
    margin-bottom: 40px
}

.footer-links li {
    margin-bottom: 5px
}

.footer-bottom {
    padding: 40px 0 60px;
    font-size: 12px
}

.footer-info {
    margin: 0 -15px -15px
}

.footer-info a {
    margin: 0 15px 15px;
    display: block
}

.footer-bottom .row {
    margin-bottom: -40px
}

.footer-bottom .row>div {
    margin-bottom: 0
}

.footer-info .icon {
    height: 19px;
    vertical-align: middle;
    margin-right: 6px
}

.newsletter .form-control::-webkit-input-placeholder {
    color: #f87498;
    opacity: 1
}

.newsletter .form-control:-ms-input-placeholder {
    color: #f87498;
    opacity: 1
}

.newsletter .form-control::-ms-input-placeholder {
    color: #f87498;
    opacity: 1
}

.newsletter .form-control::placeholder {
    color: #f87498;
    opacity: 1
}

@media (min-width:768px) {
    .page-cover {
        height: 400px
    }

    .site-footer {
        font-size: inherit
    }

    .footer-info a {
        display: inline
    }
}

.product-filter {
    display: flex;
    justify-content: center
}

.togglefilter {
    cursor: pointer;
    padding: 6px 0
}

.category-item {
    text-align: left;
    margin-bottom: 40px
}

.category-title {
    margin-bottom: 12px;
    cursor: pointer
}

.category-title:after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: -3px;
    vertical-align: middle;
    background-image: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg);
    background-position: -388px -11px;
    margin-left: 14px
}

.category-item>ul {
    display: none
}

.category-item>ul>li {
    font-size: 14px;
    margin-bottom: 10px
}

.category-item-open>ul {
    display: block
}

.category-item-open .category-title:after {
    background-position: -408px -11px
}

.product-list {
    margin-top: 40px;
    position: relative;
    overflow: hidden
}

.product-list>.col-25 {
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    transition: all .5s, opacity .4s .3s
}

.product-list>.col-75 {
    transition: all .5s
}

.product-list.category-close .col-25 {
    opacity: 0;
    visibility: hidden;
    margin-left: -25%;
    transition: all .5s, opacity .4s
}

.product-list.category-close .col-75 {
    margin: 0;
    flex: 0 0 100%;
    max-width: 100%
}

.product-selector {
    position: absolute;
    width: 100%;
    z-index: 51;
    top: 60px;
    left: -20px;
    width: 58px
}

.product-selector-thumb {
    width: 55px;
    height: 55px;
    background-size: cover;
    border-radius: 100%;
    cursor: pointer;
    margin: auto
}

.slick-current .product-selector-thumb {
    border: 2px solid
}

.product-selector .slick-slide {
    margin: 15px 0
}

.product-selector .slick-arrow {
    width: 58px;
    height: 30px;
    cursor: pointer
}

.product-selector .slick-arrow:before {
    content: '';
    display: block;
    width: 16px;
    height: 27px;
    background: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg) no-repeat;
    margin: auto
}

.product-selector .slick-prev:before {
    background-position: -235px -11px
}

.product-selector .slick-next:before {
    background-position: -219px -11px
}

.product-selector .slick-prev:hover:before {
    background-position: -267px -11px
}

.product-selector .slick-next:hover:before {
    background-position: -251px -11px
}

@media (max-width:767px) {
    .product-selector {
        position: relative;
        width: auto;
        left: 0;
        padding: 0 30px;
        margin-bottom: 50px
    }

    .product-selector .slick-arrow {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%) rotate(-90deg);
        width: 58px;
        height: 30px;
        cursor: pointer
    }

    .product-selector .slick-prev {
        left: -10px
    }

    .product-selector .slick-next {
        right: -10px
    }
}

.zm-viewer {
    background-color: #fff;
    z-index: 50
}

.product-section .title {
    margin-bottom: 20px
}

.product-section .review {
    margin-bottom: 40px
}

.product-price {
    position: relative;
    font-weight: 700;
    font-size: 18px;
    color: red;
    margin-bottom: 40px;
    display: inline-block
}

.old-price {
    text-decoration: line-through;
    margin-bottom: 5px;
    display: block;
    color: red
}

.product-section .old-price {
    color: red;
    display: inline-block;
    margin-right: 20px
}

.product-section .sale-price {
    font-weight: 700;
    color: red;
    display: inline-block
}

.product-price .sold {
    position: absolute;
    top: -67%;
    left: 100%;
    width: 62px;
    height: 62px;
    padding: 0 8px;
    margin-left: 50px;
    background: url(../images/icon/badge-sold.png) no-repeat;
    color: red;
    font-weight: 500;
    line-height: 65px;
    text-align: center;
    font-size: 11px;
    font-weight: 700
}

.product-price .sold span {
    font-weight: 700;
    color: red;
    line-height: 1;
    display: inline-block;
    vertical-align: middle
}

.product-image-wrapper {
    padding-left: 60px;
    padding-right: 20px
}

.product-image-wrapper .sale {
    position: absolute;
    top: 0;
    right: 0;
    width: 62px;
    height: 62px;
    background: url(../images/icon/badge-sale.png) no-repeat;
    color: #fff;
    font-weight: 500;
    line-height: 65px;
    text-align: center;
    z-index: 51
}

.product-image-wrapper .sold {
    position: absolute;
    top: 0;
    right: 0;
    width: 62px;
    height: 62px;
    background: url(../images/icon/badge-sold.png) no-repeat;
    color: #fff;
    font-weight: 500;
    line-height: 65px;
    text-align: center;
    z-index: 51;
    font-size: 11px
}

.color-pallete {
    display: inline-block;
    margin: 0 4px;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    cursor: pointer
}

.color-pallete.active {
    border: 1px solid #000
}

.option-color {
    margin: 20px -5px 20px;
    max-width: 400px
}

.option-color .color-pallete {
    margin-bottom: 20px
}

.btn-add-cart {
    display: inline-block;
    background: 0 0;
    border-radius: 0;
    font-size: 12px;
    font-size: .857rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid #000;
    max-width: 110px;
    width: 100%;
    height: 50px;
    overflow: hidden;
    transition: .3s;
    margin-right: 17px;
    vertical-align: middle
}

.btn-add-cart button {
    margin: 0;
    width: 100%;
    height: 100%;
    border: none
}

.btn-add-cart .media {
    width: 100%;
    height: 100%
}

.btn-add-cart .q {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.btn-add-cart .q>span {
    display: inline-block;
    vertical-align: middle
}

.btn-add-cart .qmin,
.btn-add-cart .qplus {
    width: 25px;
    height: 25px;
    overflow: hidden;
    cursor: pointer
}

.btn-add-cart .qmin img {
    width: 70px;
    height: 70px;
    position: relative;
    top: -9px;
    left: -21px
}

.btn-add-cart .qplus img {
    width: 50px;
    height: 50px;
    position: relative;
    top: -2px;
    left: -13px
}

.btn-add-cart .qval {
    margin: 0 15px
}

.btn-add-cart .qval-input input {
    border: none;
    width: 30px;
    text-align: center;
    outline: 0
}

.wishlist {
    display: inline-block;
    margin-top: 40px;
    cursor: pointer
}

.share {
    margin-top: 40px
}

.product-social {
    margin: 20px -10px 0
}

.product-social li {
    margin: 0 10px
}

.product-desc .title {
    margin-bottom: 20px
}

.notifyme input {
    max-width: 300px
}

.notifyme-form {
    margin-top: 20px;
    display: flex
}

.notifyme-form input {
    margin-right: 20px
}

.group-form {
    display: flex
}

.group-form input {
    margin-right: 20px
}

.group-form .btn-doll {
    margin: 0
}

.related-slider .owl-nav {
    position: absolute;
    width: 100%;
    bottom: 50%;
    pointer-events: none
}

.related-slider .owl-nav>div {
    position: absolute;
    display: block;
    width: 100px;
    height: 40px;
    pointer-events: auto
}

.related-slider .owl-nav>div.disabled {
    display: none
}

.related-slider .owl-nav>div:before {
    position: absolute;
    top: -20px;
    width: 30px;
    height: 60px;
    content: '';
    background-image: url(../images/icon/next.webp);
    background-size: 60px 30px;
    background-repeat: no-repeat;
    background-color: #eaeaea;
    opacity: .5
}

.related-slider .owl-prev {
    left: 0
}

.related-slider .owl-prev:before {
    background-position: 5px 16px;
    left: 0
}

.related-slider .owl-prev:hover:before {
    opacity: 1
}

.related-slider .owl-next {
    right: 0
}

.related-slider .owl-next:before {
    background-position: -35px 16px;
    right: 0
}

.related-slider .owl-next:hover:before {
    opacity: 1
}

.product-thumb-color .owl-stage {
    margin: auto;
    transition: .7s !important
}

.product-thumb-color .owl-nav {
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    pointer-events: none
}

.product-thumb-color .owl-nav>div {
    position: absolute;
    display: block;
    width: 30px;
    height: 40px;
    pointer-events: auto
}

.product-thumb-color .owl-nav>div.disabled {
    display: none
}

.product-thumb-color .owl-nav>div:before {
    position: absolute;
    top: 10px;
    width: 23px;
    height: 21px;
    content: '';
    background-image: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg);
    background-repeat: no-repeat;
    transition: transform .2s
}

.product-thumb-color .owl-prev {
    left: -25px
}

.product-thumb-color .owl-prev:before {
    background-position: -621px -11px;
    left: 0
}

.product-thumb-color .owl-prev:hover:before {
    background-position: -621px -34px
}

.product-thumb-color .owl-next {
    right: -25px
}

.product-thumb-color .owl-next:before {
    background-position: -633px -11px;
    right: 0
}

.product-thumb-color .owl-next:hover:before {
    background-position: -633px -34px
}

.product-thumb-color .slick-arrow {
    position: absolute;
    display: block;
    top: 0;
    width: 30px;
    height: 20px;
    pointer-events: auto;
    cursor: pointer
}

.product-thumb-color .slick-arrow:before {
    position: absolute;
    top: 0;
    width: 23px;
    height: 21px;
    content: '';
    background-image: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg);
    background-repeat: no-repeat;
    transition: transform .2s
}

.product-thumb-color .slick-prev {
    left: -25px
}

.product-thumb-color .slick-prev:before {
    background-position: -621px -11px;
    left: 0
}

.product-thumb-color .slick-prev:hover:before {
    background-position: -621px -34px
}

.product-thumb-color .slick-next {
    right: -25px
}

.product-thumb-color .slick-next:before {
    background-position: -633px -11px;
    right: 0
}

.product-thumb-color .slick-next:hover:before {
    background-position: -633px -34px
}

.product-thumb-color .slick-disabled:before,
.product-thumb-color .slick-disabled:hover:before {
    background-position-y: -57px
}

.review {
    display: inline-block;
    margin: 0 -7px
}

.review-star {
    float: left;
    width: 20px;
    height: 20px;
    background: url(https://cathydoll.co.id/assets/frontend/images/icon/asset.svg) no-repeat -542px -11px;
    margin: 0 7px
}

.review-star.empty {
    background-position: -542px -35px
}

.review>span {
    margin-left: 15px
}

.review-wrapper {
    margin-bottom: -60px
}

.review-item {
    margin-bottom: 60px
}

.review-item .review {
    margin-bottom: 30px
}

.review-item .title {
    color: #f87498;
    margin-bottom: 30px
}

.review-note {
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 30px
}

@media(max-width:767px) {
    .extra-pad {
        padding-left: 10px;
        padding-right: 10px
    }

    .product-section .row>div {
        margin-bottom: 60px
    }

    .product-image-wrapper {
        padding-left: 20px
    }

    .review-item .review,
    .review-item .review+div,
    .review-item .title {
        margin-bottom: 20px
    }
}

.account-item {
    margin-bottom: 5px;
    max-width: 450px
}

.account-item>.title {
    margin-bottom: 10px
}

.account-item .btn-doll {
    width: 100%
}

.account-orders-table {
    display: table;
    width: 100%
}

.account-orders-item {
    display: table-row;
    margin-bottom: 30px
}

.account-orders-item>div {
    display: table-cell;
    padding-bottom: 20px
}

.account-orders-stat,
.account-orders-total {
    text-align: right
}

.wishlist-section {
    text-align: center
}

.wishlist-section .product-thumb .delete-btn {
    display: none;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 3
}

.wishlist-section .product-thumb .delete-btn:before {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    right: 0;
    background: url(https://cathydoll.co.id/assets/frontend/images/icon/delete.svg) no-repeat center
}

.wishlist-section .product-thumb:hover .delete-btn {
    display: block
}

@media (min-width:767px) {
    .account-orders-item>div>div {
        display: table;
        width: 100%
    }

    .account-orders-item>div>div>div {
        display: table-cell
    }

    .account-orders-date {
        width: 150px
    }

    .account-orders-total {
        width: 120px
    }

    .account-orders-stat {
        width: 120px
    }
}

#shopcart+span {
    font-size: 12px
}

.form-item {
    margin-bottom: 28px
}

.form-item>.title {
    margin-bottom: 10px
}

.cart-delete {
    position: absolute;
    top: 5px;
    right: 0
}

.checkout-cart-item {
    position: relative;
    font-size: 14px;
    margin-bottom: 50px;
    display: flex
}

.checkout-cart-item .title {
    font-size: 14px;
    font-weight: 500;
    padding-right: 40px
}

.checkout-cart-item .price {
    position: absolute;
    bottom: 0;
    right: 0
}

.checkout-cart-item .qval {
    position: relative;
    top: 2px
}

.checkout-cart-image {
    width: 52px;
    height: 52px;
    margin-right: 25px;
    padding: 5px
}

.checkout-cart-desc {
    line-height: 1.7
}

.checkout-cart-desc {
    flex: 1
}

.checkout-cart-desc table {
    width: 100%
}

.shopping-bag-item .cart-delete {
    position: relative
}

.shopping-bag-item .cart-delete:before {
    display: block
}

.checkout-bag .checkout-cart-item {
    font-size: inherit
}

.checkout-bag .checkout-cart-desc .title {
    font-size: inherit;
    font-weight: 400
}

.shopping-bag-item {
    position: relative;
    margin-bottom: 50px;
    display: flex
}

.shopping-bag-item .qval {
    position: relative;
    top: 2px
}

.shopping-bag-item .icon {
    vertical-align: top
}

.separator-line {
    border-top: 1px solid #f87498;
    margin-top: 40px;
    margin-bottom: 40px
}

.checkout-cart-total {
    font-size: 14px;
    letter-spacing: 1px
}

.checkout-cart-2 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center
}

span.voucherlabel {
    display: block;
    font-size: 12px;
    color: #fff;
    background: #f87397;
    padding: 5px 6px;
    border-radius: 4px
}

.voucherlabel .icon {
    cursor: pointer;
    position: relative;
    top: -1px;
    margin-left: 6px
}

.thankyou-title {
    margin-bottom: 15px;
    display: block
}

.thankyou-payment {
    margin-right: 20px;
    vertical-align: bottom
}

@media (min-width:768px) {
    .video-thumb {
        margin-bottom: 60px
    }

    .video-section>.row {
        margin-right: -15px;
        margin-left: -15px
    }

    .video-section>.row>div {
        padding-right: 15px;
        padding-left: 15px
    }
}

@media (min-width:992px) {
    .event-right .row>div:first-child {
        order: 2;
        margin-left: 6.66667%
    }

    .video-thumb {
        margin-bottom: 85px
    }
}

@media (min-width:1200px) {
    .testimonial-section>.row>div:nth-child(2n+1) {
        transform: translate(0, 80px)
    }
}

@media (max-width:767px) {
    .home-slider-best .owl-dots {
        position: relative;
        margin-top: 20px
    }

    .modal>iframe {
        max-height: 300px
    }
}

@media (max-width:575px) {
    .mobile-cart {
        position: absolute;
        padding: 0
    }
}

@media (min-width:768px) {
    .font-xxl {
        font-size: 42px
    }

    .font-xl {
        font-size: 24px
    }

    .font-l {
        font-size: 20px
    }

    .font-m {
        font-size: 18px
    }

    .separator {
        height: 80px
    }

    .section>.title {
        margin-bottom: 60px
    }

    .product-filter {
        justify-content: space-between
    }
}

@media (min-width:992px) {
    .font-xxl {
        font-size: 52px
    }

    .font-xl {
        font-size: 32px
    }

    .font-l {
        font-size: 30px
    }

    .separator {
        height: 100px
    }

    .separator-s {
        height: 20px
    }

    .section>.title {
        margin-bottom: 20px
    }
}

@media (min-width:1200px) {
    .font-xxl {
        font-size: 66px
    }

    .font-xl {
        font-size: 36px
    }

    .separator {
        height: 120px
    }

    .nav-header {
        padding-left: 45px;
        padding-right: 45px
    }

    .home-slider .owl-prev {
        left: 45px
    }

    .home-slider .owl-next {
        right: 45px
    }
}

#notifications {
    cursor: pointer;
    position: fixed;
    right: 0;
    z-index: 9999;
    bottom: 0;
    margin-bottom: 22px;
    margin-right: 15px;
    min-width: 300px;
    max-width: 800px
}

.writereview {
    width: 100%;
    max-width: 450px;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.rating {
    border: none;
    float: left
}

.rating>input {
    display: none
}

.rating>label::before {
    margin: 5px;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f004"
}

.rating>label {
    color: #ddd;
    float: right
}

.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover~label,
.rating>input:checked~label {
    color: #f87498
}

.rating>input:checked+label:hover,
.rating>input:checked~label:hover,
.rating>input:checked~label:hover~label,
.rating>label:hover~input:checked~label {
    color: #f87498
}

h4 {
    font-weight: 400;
    margin-top: 40px;
    margin-bottom: 0
}

#hasil {
    font-size: 20px
}

#star {
    float: left;
    padding-right: 20px
}

#star span {
    padding: 3px;
    font-size: 20px
}

.on {
    color: #f7d106
}

.off {
    color: #ddd
}

.no-js #loader {
    display: none
}

.js #loader {
    display: block;
    position: absolute;
    left: 100px;
    top: 0
}

.se-pre-con {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(https://cathydoll.co.id/assets/frontend/images/gif/lg.ring-loading-gif.gif) center no-repeat #fff
}

.quickview {
    width: 100%;
    padding: 10px, 0;
    text-align: center;
    background-color: pink;
    position: absolute;
    top: -5000%;
    left: 0;
    font-size: 18px;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    cursor: pointer
}

.card-prod .product-thumb-img img.sm {
    height: 17.5vh;
    object-fit: contain;
}

.card-prod .product-thumb-img img.lg {
    height: 20vh;
    object-fit: contain;
}

@media only screen and (min-width:767px) and (max-width:1366px) {
    .card-prod {
        height: 350px
    }
}
@media only screen and (min-width:1367px) and (max-width:1600px) {
    .card-prod {
        height: 370px;
    }
}
@media only screen and (min-width:1601px) {
    .card-prod {
        height: 380px;
    }
}

.card-feat {
    height: 220px
}

.card:hover .quickview {
    top: 90%;
    display: block
}

.extra-pad:hover .quickview {
    top: 60%;
    display: block
}

.single-testimonial-area .quote {
    font-size: 72px;
    font-weight: 700;
    color: #ff084e;
    line-height: 1
}

.single-testimonial-area h6 {
    line-height: 2;
    color: #9f9f9f
}

.testimonial-info .tes-thumbnail {
    width: 200px;
    height: 200px;
    border-radius: 50%
}

.testimonial-info .tes-thumbnail img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.testimonial-info .testi-data>p {
    font-size: 14px;
    text-align: left;
    font-weight: 700;
    margin-bottom: 0
}

.testimonial-info .testi-data span {
    font-size: 12px;
    text-align: left;
    display: block;
    font-weight: 700;
    color: #ff084e
}

.karl-testimonials-slides.owl-carousel .owl-dots {
    position: absolute;
    top: 50%;
    left: -20%;
    z-index: 5;
    width: 30px;
    background-color: transparent;
    height: auto;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.karl-testimonials-slides.owl-carousel .owl-dot {
    border: 2px solid #9f9f9f;
    border-radius: 50%;
    display: block;
    height: 9px;
    margin: 15px 10px;
    width: 9px
}

.karl-testimonials-slides.owl-carousel .owl-dot.active {
    background-color: #ff084e;
    border-color: #ff084e
}

.pink-icon {
    color: pink
}

.pink-icon:hover {
    background-color: pink;
    color: #000
}

.card:hover {
    -webkit-box-shadow: -1px 9px 40px rgba(0, 0, 0, .75);
    -moz-box-shadow: -1px 9px 40px rgba(0, 0, 0, .75);
    box-shadow: -1px 9px 40px -12px rgba(0, 0, 0, .75)
}

.icon-sos ul {
    display: inline-flex;
    margin-left: 30px;
    margin-top: 20px
}

.icon-sos ul li {
    list-style: none
}

.icon-sos ul li a {
    width: 45px;
    height: 45px;
    background: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 25px;
    margin: 0 2px;
    display: block;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 3px solid #fff
}

.icon-sos ul li a .fa {
    position: relative;
    color: #fff;
    transition: .5s
}

.icon-sos ul li a:hover .fa {
    transform: rotateY(360deg)
}

.icon-sos-kanan ul {
    display: inline-flex;
    margin-left: 0;
    margin-top: 0
}

.icon-sos-kanan ul li {
    list-style: none
}

.icon-sos-kanan span {
    transform: translate(-100%, 150%)
}

.icon-sos-kanan ul li a {
    width: 45px;
    height: 45px;
    background: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 25px;
    margin: 0 2px;
    display: block;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 3px solid #fff
}

.icon-sos-kanan ul li a .fa {
    position: relative;
    color: #fff;
    transition: .5s
}

.icon-sos-kanan ul li a:hover .fa {
    transform: rotateY(360deg)
}

.product-view {
    display: none;
    position: absolute;
    width: 800px;
    height: auto;
    padding: 10px;
    border: 1px solid;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    background-color: #fff;
    z-index: 100
}

hr.style {
    padding: 0;
    border: none;
    border-top: medium double pink;
    color: #f87498;
    text-align: center;
    font-size: 20px;
    font-family: 'Playfair Display', serif
}

hr.style:after {
    display: inline-block;
    position: relative;
    font-size: 1.5em;
    padding: 0 .25em;
    background: #fff
}

hr.style-best {
    padding: 0;
    border: none;
    border-top: medium double pink;
    color: #f87498;
    text-align: center;
    font-size: 20px;
    font-family: 'Playfair Display', serif
}

hr.style-best:after {
    content: "Best Selling Product";
    display: inline-block;
    position: relative;
    top: -.7em;
    font-size: 1.5em;
    padding: 0 .25em;
    background: #fff
}

hr.style-sale {
    padding: 0;
    border: none;
    border-top: medium double pink;
    color: #f87498;
    text-align: center;
    font-size: 20px;
    font-family: 'Playfair Display', serif
}

hr.style-sale:after {
    content: "Sale Product";
    display: inline-block;
    position: relative;
    top: -.7em;
    font-size: 1.5em;
    padding: 0 .25em;
    background: #fff
}

hr.style-testi {
    padding: 0;
    border: none;
    border-top: medium double pink;
    color: #f87498;
    text-align: center;
    font-size: 20px;
    font-family: 'Playfair Display', serif
}

hr.style-testi:after {
    content: "Beauty Review";
    display: inline-block;
    position: relative;
    top: -.7em;
    font-size: 1.5em;
    padding: 0 .25em;
    background: #fff
}

hr.style-instagram {
    padding: 0;
    border: none;
    border-top: medium double pink;
    color: #f87498;
    text-align: center;
    font-size: 20px;
    font-family: 'Playfair Display', serif
}

hr.style-instagram:after {
    content: "@cathydollindonesia";
    display: inline-block;
    position: relative;
    top: -.7em;
    font-size: 1.5em;
    padding: 0 .25em;
    background: #fff
}

hr.style-jurnal {
    padding: 0;
    border: none;
    border-top: medium double pink;
    color: #f87498;
    text-align: center;
    font-size: 20px;
    font-family: 'Playfair Display', serif
}

hr.style-jurnal:after {
    content: "Beauty Tips";
    display: inline-block;
    position: relative;
    top: -.7em;
    font-size: 1.5em;
    padding: 0 .25em;
    background: #fff
}

hr.style-video {
    padding: 0;
    border: none;
    border-top: medium double pink;
    color: #f87498;
    text-align: center;
    font-size: 20px;
    font-family: 'Playfair Display', serif
}

hr.style-video:after {
    content: "Beauty Video";
    display: inline-block;
    position: relative;
    top: -.7em;
    font-size: 1.5em;
    padding: 0 .25em;
    background: #fff
}

.dropdown-conten {
    display: none;
    width: 750px;
    height: 450px;
    position: absolute;
    text-align: left;
    background-color: pink
}

.dropdown-conten ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative
}

.nav-item:hover .dropdown-conten {
    display: block
}

.nav-link {
    font-size: 18px;
    font-weight: 700
}

.mdl {
    display: none;
    position: fixed;
    z-index: 98;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #fff;
    background-color: rgba(255, 192, 203, .8)
}

.mdl .mdl__body {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border-radius: 3px;
    width: 80%
}

.mdl__close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: 700;
    cursor: pointer
}

.ctg {
    z-index: -1;
    border-radius: 2px;
    margin-left: 10px;
    margin-bottom: 50px
}

.ctg img {
    position: absolute;
    display: block;
    transform: translate(10%, 10%);
    position: unset
}

.ctg .title-ctg {
    margin: 20px;
    font-size: 30px;
    font-family: 'Playfair Display', serif;
    color: #fff
}

@media only screen and (max-width:600px) {
    .ctg .title-ctg {
        font-size: 20px
    }
}

.ctg:hover .title-ctg {
    margin: 20px;
    font-size: 40px;
    font-family: 'Playfair Display', serif;
    color: #fff;
    transform: translate(20px, 0);
    transition: transform .5s
}

.prodsale {
    background: url(https://cathydoll.co.id/assets/frontend/images/icon/pro-bg.png) no-repeat center;
    background-size: contain
}

nav.menu {
    background: #fff;
    text-align: center
}

.menu>ul>li {
    list-style: none;
    display: inline-block;
    color: #000
}

.menu>ul li a,
.xs-menu li a {
    font-family: Roboto;
    text-decoration: none;
    color: #000;
    display: block;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 700
}

.top-heading {
    text-transform: uppercase
}

.menu>ul li a:hover {
    color: pink;
    text-decoration: underline;
    transition-duration: .3s;
    -moz-transition-duration: .3s;
    -webkit-transition-duration: .3s
}

.displaynone {
    display: none
}

.mega-menu {
    background-color: #fff;
    left: 70px;
    margin-top: 3px;
    position: absolute;
    width: 90%;
    padding: 15px;
    display: none;
    transition-duration: .9s;
    border: 1px solid pink;
    border-radius: 3px
}

.mm-3column {
    float: left
}

.mm-3column {
    width: 25%;
    border-right: 1px solid #999
}

.responsive-img {
    display: block;
    max-width: 100%
}

.left-images {
    margin-right: 25px
}

.left-categories-list,
.left-images {
    float: left
}

.categories-list li {
    display: block;
    line-height: normal;
    margin: 0;
    padding: 5px 0;
    text-align: left
}

.categories-list li :hover {
    background: inherit !important
}

.left-images>p {
    background: none repeat scroll 0 0 coral;
    display: block;
    font-size: 16px;
    line-height: normal;
    margin: 0;
    padding: 5px 14px
}

.categories-list span {
    font-size: 12px;
    padding-bottom: 5px;
    text-transform: uppercase
}

.mm-view-more {
    background: none repeat scroll 0 0 coral;
    color: #fff;
    display: inline !important;
    line-height: normal;
    padding: 5px 8px !important;
    margin-top: 10px
}

.display-on {
    display: block;
    transition-duration: 1s
}

.drop-down>a:after {
    content: "\f103";
    color: #fff;
    font-family: FontAwesome;
    font-style: normal;
    margin-left: 5px
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

.parallax {
    background-image: url(../images/Web-Produk-AA-Powder.jpg);
    min-height: 350px;
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain
}

.parallax-even {
    background-attachment: url(../videos/R2W.mp4);
    min-height: 350px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain
}

.parallax-video {
    background-image: url(../images/video-tutorial-main-banner.jpg);
    min-height: 350px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain
}

.back-to-top {
    position: fixed;
    display: none;
    background: pink;
    color: #fff;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 1;
    font-size: 16px;
    border-radius: 50%;
    right: 15px;
    bottom: 150px;
    transition: background .5s;
    z-index: 11
}

.back-to-top i {
    padding-top: 12px;
    color: #fff
}

.reward {
    position: fixed;
    background: pink;
    color: #fff;
    width: 150px;
    height: 44px;
    text-align: center;
    line-height: 1;
    font-size: 16px;
    border-radius: 5%;
    left: 15px;
    bottom: 25px;
    transition: background .5s;
    z-index: 11;
    cursor: pointer
}

.reward .textre {
    font-weight: 500;
    padding: 16px 2px
}

.wish {
    display: none;
    color: #999;
    width: 100%;
    padding: 10px, 0;
    text-align: right;
    position: absolute;
    left: 0;
    font-size: 18px;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    cursor: pointer
}

.extra-pad:hover .wish {
    display: block
}

.title-social {
    margin-left: 10px
}

.page-item.active .page-link {
    z-index: 2;
    color: #fff;
    background-color: pink;
    border-color: pink
}

.vd {
    width: 50%
}

.kotak img {
    -webkit-transition: .4s ease;
    transition: .4s ease;
    width: 300px
}

.zoom-effect:hover .kotak img {
    -webkit-transform: scale(1.08);
    transform: scale(1.08)
}

.kotak img {
    -webkit-transition: .4s ease;
    transition: .4s ease;
    width: 300px
}

.zoom-effect:hover .kotak img {
    -webkit-transform: scale(1.08);
    transform: scale(1.08)
}

.mdl-confirm {
    position: fixed;
    z-index: 98;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #fff;
    background-color: rgba(51, 50, 50, .8)
}

.mdl-confirm .mdl__body {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border-radius: 3px;
    width: 50%
}

.mdl__close1 {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: 700;
    cursor: pointer
}

.change {
    position: relative;
    width: 100%
}

.image {
    display: block;
    width: 100px;
    height: auto
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease
}

.change:hover .overlay {
    opacity: 1
}

.text {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    opacity: 1
}

@-webkit-keyframes autopopup {
    from {
        opacity: 0;
        margin-top: -200px
    }

    to {
        opacity: 1
    }
}

@-moz-keyframes autopopup {
    from {
        opacity: 0;
        margin-top: -200px
    }

    to {
        opacity: 1
    }
}

@keyframes autopopup {
    from {
        opacity: 0;
        margin-top: -200px
    }

    to {
        opacity: 1
    }
}

.mdlpop {
    position: fixed;
    z-index: 98;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #fff;
    background-color: rgba(255, 192, 203, .8);
    -webkit-animation: autopopup 2s;
    -moz-animation: autopopup 2s;
    animation: autopopup 2s
}

.mdlpop .mdl__body {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border-radius: 3px;
    width: 80%
}

.mdl__closepop {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: 700;
    cursor: pointer
}

.title-pop {
    color: pink;
    font-size: 40px;
    font-weight: 700;
    align-content: center
}

.instagram-img {
    position: relative
}

.image {
    opacity: 1;
    display: block;
    width: 250px;
    transition: .5s ease;
    backface-visibility: hidden
}

.middle {
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    opacity: 0
}

.instagram-img:hover .image {
    opacity: .3;
    cursor: zoom-in
}

.instagram-img:hover .middle {
    opacity: 1;
    cursor: zoom-in
}

.badgeprod .sale {
    position: absolute;
    top: .75%;
    left: 7.85%;
    width: 62px;
    height: 62px;
    background: url(../images/icon/badge-sale.png) no-repeat;
    color: #fff;
    font-weight: 500;
    line-height: 65px;
    text-align: center
}

.badgeprod .sold {
    position: absolute;
    top: 7.75%;
    right: 7.85%;
    width: 62px;
    height: 62px;
    padding: 0 8px;
    background: url(../images/icon/badge-sold.png) no-repeat;
    background-size: 90%;
    color: #fff;
    font-weight: 500;
    line-height: 65px;
    text-align: center;
    font-size: 11px
}

.badgeprod .sold span {
    line-height: 1;
    display: inline-block;
    vertical-align: middle
}

.mplace ul {
    margin-left: 30px;
    margin-top: 20px
}

.mplace ul li {
    list-style: none;
    margin-right: 16px
}

.mplace ul li a {
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 25px;
    position: relative;
    overflow: hidden
}

.mplace ul li a .fa {
    position: relative;
    color: #fff;
    transition: .5s
}

.mplace ul li a:hover .fa {
    transform: rotateY(360deg)
}

.img-icon {
    padding: 500px
}

.reward-content {
    position: fixed;
    background: #fff;
    width: 415px;
    max-width: 100%;
    overflow: auto;
    top: 15px;
    bottom: 0;
    left: -100%;
    z-index: 99;
    padding-bottom: 30px;
    transition: .4s;
    border-radius: 5%;
    margin: 15px -300px 15px 15px
}

.reward-content .open {
    right: 0
}

.reward-content-header {
    text-align: center;
    background-color: pink
}

.reward-content-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto
}

.reward-close {
    text-align: right;
    font-size: 25px;
    width: 100%;
    font-weight: 700;
    cursor: pointer;
    padding: 10px;
    border-radius: 5%
}

.box {
    border-radius: 5%;
    background-color: #faf9f8;
    padding: 25px;
    margin-top: 10px;
    box-shadow: 2px 2px 20px #888
}

.list-group-item {
    background-color: pink;
    color: #fff;
    border: none;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    position: relative;
    margin-bottom: 16px;
    cursor: pointer;
    width: 100%;
    transition: background-color .15s ease-in-out
}

.card-list-item-content {
    display: flex;
    width: 100%
}

.newmember {
    padding: 20px;
    background-color: pink
}

.home_splash_video {
    border: 5px solid #ef92af;
    border-radius: 15px
}

div#controlBar .controlBar {
    background-color: rgba(239, 146, 175, .8)
}

hr.style-video {
    padding: 0;
    border: none;
    border-top: medium double pink;
    color: #f87498;
    text-align: center;
    font-size: 20px;
    font-family: 'Playfair Display', serif
}

hr.style-video:after {
    content: "Beauty Video";
    display: inline-block;
    position: relative;
    top: -.7em;
    font-size: 1.5em;
    padding: 0 .25em;
    background: #fff
}

hr .style-related {
    padding: 0;
    border: none;
    border-top: medium double pink;
    color: #f87498;
    text-align: center;
    font-size: 20px;
    font-family: 'Playfair Display', serif;
}

hr .style-related:after {
    content: "Recomended Product";
    display: inline-block;
    position: relative;
    top: -.7em;
    font-size: 1.5em;
    padding: 0 .25em;
    background: #fff
}

.g-recaptcha {
    display: flex;
    justify-content: end;
    margin-bottom: .75rem;
}

.collapse.in {
    display: block;
}

.blog-content {
    display: grid;
}

.blog-content .title {
    grid-area: title;
}

.blog-content .desc {
    grid-area: desc;
}

.blog-content .image {
    grid-area: image;
}

@media (min-width:800px) {
    .blog-content .title {
        align-self: end
    }

    .blog-content .image img {
        height: 25vh;
        width: 100%;
        object-fit: cover
    }

    .blog-content {
        grid-template-areas: 'image title''image desc';
        grid-gap: 10px;
        grid-template-rows: 50%;
        padding-left: 25px;
        padding-right: 25px
    }
}

@media (max-width:799px) {
    .blog-content .title {
        align-self: center
    }

    .blog-content .image img {
        height: 15vh;
        width: 25vw;
        object-fit: cover
    }

    .blog-content {
        grid-template-areas: 'image title''desc desc';
        grid-gap: 10px;
        grid-template-columns: 25vw auto;
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 2rem
    }

    .home-slider .item,
    .home-slider .owl-carousel,
    .home-slider .owl-carousel .owl-item,
    .home-slider .owl-carousel .owl-stage,
    .home-slider .owl-carousel .owl-stage-outer {
        height: 100%
    }
}

@media (max-width:480px) {
    .blog-content .image img {
        height: 10vh;
        width: 25vw;
        object-fit: cover
    }

    .blog-content {
        grid-template-columns: 30% auto
    }

    .journal-thumb .journal-thumb-img {
        width: 100%
    }

    .ctg .title-ctg {
        margin: 10px !important;
    }

    .ctg:hover .title-ctg {
        margin: 10px !important;
        font-size: 20px !important;
        transform: translate(20%,0);
        transition: transform .5s;
    }

    .ctg img {
        transform:unset;
        height: 10rem;
        object-fit: cover;
    }

    .ctg:hover img {
        transform: scale(1.15);
        transition: transform .5s;
    }
    .home-slider .item img {
        height: auto;
    }
}

.navigation-new {
    display: grid;
    grid-gap: 10px;
    padding: 10px;
}

.navigation-new .section-social {
    grid-area: social-menu;
}
.navigation-new .section-logo {
    grid-area: logo;
}
.navigation-new .section-nav-action {
    grid-area: nav-actions;
}
.navigation-new .section-nav-menu {
    grid-area: nav-menu;
}
.navigation-new .section-mobile-nav {
    grid-area: nav-mobile;
    display: none;
}
.embed-responsive-4by3::before{
    padding-top: 0;
}
.youtube {
    height: 400px;
}
.youtube img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

@media (min-width: 1280px)
{
    .navigation-new {
        grid-template-areas: 
        'social-menu logo logo logo logo nav-actions'
        'social-menu nav-menu nav-menu nav-menu nav-menu nav-actions';
    }
}
@media (min-width:1000px) and (max-width:1279px)
{
    .navigation-new {
        grid-template-areas: 
        'social-menu logo logo logo logo nav-actions'
        'nav-menu nav-menu nav-menu nav-menu nav-menu nav-menu';
    }
}
@media (max-width:999px)
{
    .navigation-new {
        grid-template-areas: 
        'nav-mobile logo logo logo nav-actions';
    }
    .navigation-new .section-nav-menu, .navigation-new .section-social
    {
        display: none;
    }
    .navigation-new .section-mobile-nav
    {
        display: block;
        width: 40px;
        margin-left: 10px;
    }
    .navTrigger {
        position: unset;
    }
    .cart-counter {
        position: absolute;
        bottom: 0.5rem;
        right: 1rem;
    }
    .icon-sos-kanan span {
        transform: unset;
    }
}