@font-face {
    font-family: 'Gotham Rounded Book';
    src: url('../fonts/GothamRounded-Book.eot');
    src: url('../fonts/GothamRounded-Book.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GothamRounded-Book.woff2') format('woff2'),
        url('../fonts/GothamRounded-Book.woff') format('woff'),
        url('../fonts/GothamRounded-Book.ttf') format('truetype'),
        url('../fonts/GothamRounded-Book.svg#GothamRounded-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/GothamRounded-Medium.eot');
    src: url('../fonts/GothamRounded-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GothamRounded-Medium.woff2') format('woff2'),
        url('../fonts/GothamRounded-Medium.woff') format('woff'),
        url('../fonts/GothamRounded-Medium.ttf') format('truetype'),
        url('../fonts/GothamRounded-Medium.svg#GothamRounded-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Rounded Light';
    src: url('../fonts/GothamRounded-Light.eot');
    src: url('../fonts/GothamRounded-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GothamRounded-Light.woff2') format('woff2'),
        url('../fonts/GothamRounded-Light.woff') format('woff'),
        url('../fonts/GothamRounded-Light.ttf') format('truetype'),
        url('../fonts/GothamRounded-Light.svg#GothamRounded-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Rounded Bold';
    src: url('../fonts/GothamRounded-Bold.eot');
    src: url('../fonts/GothamRounded-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GothamRounded-Bold.woff2') format('woff2'),
        url('../fonts/GothamRounded-Bold.woff') format('woff'),
        url('../fonts/GothamRounded-Bold.ttf') format('truetype'),
        url('../fonts/GothamRounded-Bold.svg#GothamRounded-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Varela Round';
    src: url('../fonts/VarelaRound.eot');
    src: url('../fonts/VarelaRound.eot?#iefix') format('embedded-opentype'),
        url('../fonts/VarelaRound.woff2') format('woff2'),
        url('../fonts/VarelaRound.woff') format('woff'),
        url('../fonts/VarelaRound.ttf') format('truetype'),
        url('../fonts/VarelaRound.svg#VarelaRound') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Navbar Mobile */
.sub-menu.navbar-light .navbar-nav .active>.nav-link,
.sub-menu.navbar-light .navbar-nav .nav-link.active,
.sub-menu.navbar-light .navbar-nav .nav-link.show,
.sub-menu.navbar-light .navbar-nav .show>.nav-link {
    border-bottom: 3px solid #007bff;
    color: #007bff;
}

.navbar .navbar-toggler {
    border: none;
}

.navbar-light .navbar-toggler:focus {
    outline: none;
}

.main-menu {
    z-index: 1030;
}

.sub-menu {
    position: relative;
    z-index: 2;
    padding: 0 1rem;
}

.user-dropdown .nav-link {
    padding: 0.15rem 0;
}

#sidebar {
    background: #fff;
    height: 100%;
    left: -100%;
    top: 0;
    bottom: 0;
    overflow: auto;
    position: fixed;
    transition: 0.4s ease-in-out;
    width: 84%;
    z-index: 1031;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
    font-family: "Gotham Rounded";
}

#sidebar.active {
    left: 0;
}

#sidebar .sidebar-header {
    background: #f5f6f7;
    text-transform: uppercase;
    font-size: 15px;
    font-family: "Gotham Rounded Bold";
}

#sidebar ul.components {
    border-bottom: 1px solid #e4e4e4;
    margin-bottom: 40px;
    padding: 1.25rem 1rem 1rem;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px 16px;
    font-size: 1.1em;
    display: block;
    color: #000;
}

#sidebar ul li a:hover {
    color: #c00000;
    text-decoration: none;
    border-radius: 0;
}

#sidebar ul li.active>a,
#sidebar a[aria-expanded="true"] {
    color: #c00000;
    border-radius: 2px;
}

a[data-toggle="collapse"] {
    position: relative;
}

#sidebar .links .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}


.overlay {
    background: rgba(0, 0, 0, 0.7);
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index: -1;
    width: 100%;
    opacity: 0;
}

.overlay.visible {
    opacity: 1;
    z-index: 1031;
}

/* .mobiHeader .menuActive~.overlay {
    opacity: 1;
    width: 100%;
} */

ul.social-icons {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

ul.social-icons li {
    display: inline-block;
    margin-right: 0px;
    margin-bottom: 0;
}

#sidebar ul.social-icons li a {
    font-size: 24px;
}


.utility-nav {
    background: #e4e4e4;
    padding: 0.5rem 1rem;
}


.user-dropdown .dropdown-menu {
    left: auto;
    right: 0;
}

.icon-bar+.icon-bar {
    margin-top: 4px;
}

.icon-bar {
    display: block;
    width: 25px;
    height: 3px;
    border-radius: 3px;
    background: white;
    -webkit-transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    -o-transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.navbar-toggler.is-active>.icon-bar:nth-child(2) {
    opacity: 0;
    transition: 0.25s;
    -webkit-transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.navbar-toggler.is-active>.icon-bar:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(45deg);
    -ms-transform: translateY(8px) rotate(45deg);
    -o-transform: rotateY(8px) rotateY(45deg);
    transform: rotateY(8px) rotateY(45deg);
    transition: 0.25s;
    -o-transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.navbar-toggler.is-active>.icon-bar:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    -o-transform: rotateY(-8px) rotateY(-45deg);
    transform: rotateY(-8px) rotateY(-45deg);
    transition: 0.25s;
    transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.right a,
.left a,
.cart a {
    color: white;
    font-size: 17px;
}

.badge-cart {
    position: absolute;
    right: 5px;
    font-family: "Gotham Rounded";
    color: black;
    background-color: #c00000;
    padding: 2px 3px;
    font-size: 60%;

}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #c00000 !important;
    background-color: #f5f6f7;
    border-radius: 0 !important;
    transition: .3s ease-in-out;
    border-bottom: 2px solid #c00000;
}

.category-product {
    height: 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 150px;
    text-align: center;
    width: 100%;
}


.category-product {
    color: white;
    font-size: 18px;
}

.form-search {
    border: 0;
    background: 0 0;
    border-bottom: 2px solid #c00000;
    padding: 0;
    font-family: "Gotham Rounded";
    width: 100%;
    text-align: center;
    font-size: 15px;
    color: #fff;
    letter-spacing: 2px;
}

.form-search:focus {
    outline: none;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0 !important;
}

/* End Navbar Mobile */


.landing-page {
    height: 100%;
    margin: 0;
}

.alert-black {
    background-color: #c00000;
    color: white;
    font-family: "Gotham Rounded Book";
    font-size: 15px;
}

.bg-black {
    background: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.8), transparent);
    transition: .3s ease-in-out;
}

.bg-black-2 {
    background: black;
    transition: .3s ease-in-out;

}

.bg-black.scrolling,
.bg-black.scrolling {
    background: black;
    transition: .3s ease-in-out;
    z-index: 1030;
}

/* Navbar */
.navbar {
    font-family: "Gotham Rounded Book";
}

.nav-link {
    display: block;
    padding: 0;
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
    color: white;
}

.navbar-light .navbar-nav .nav-link {
    color: white;
    font-size: 14px;
    transition: .3s ease-in-out;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #c00000;
}

.absolute-nav {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1030;
    transition: .3s ease;
}

.nav-2 {
    position: relative;
    left: 0;
    right: 0;
    z-index: 1030;
}

/* Owl */
.banner-slider .slick-slide {
    margin: 0px auto;
    padding: 0 3px;
}


.banner-slider .slick-slide img {
    width: 100%;
}

.prev {
    display: block;
    position: absolute;
    z-index: 1000;
    top: 50%;
    transform: translateY(-50%);

}

.next {
    display: block;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

.banner-button.slick-arrow {
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 13px;
    border-radius: 0px;
}

.product-button.slick-arrow {
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 10px;
    border-radius: 0px;
}


.slick-arrow.next {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.slick-arrow.prev {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

section.about,
section.product {
    padding: 20px;
}

section.about h6.section.product .container>h6 {
    font-family: "Gotham Rounded";
    font-size: 17px;
}

section.about p {
    font-family: "Gotham Rounded Book";
    font-size: 12px;
}

/* Card Product */
.card-product {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-radius: .25rem;
    transition: all ease 0.4s
}

.card-product h6 {
    color: #4D5959;
    font-family: "Gotham Rounded";
    font-size: 11px;
    margin: 0;
    padding: 0;
}

.card-product h6:hover {
    color: #c00000;
    transition: .5s ease;
}

.card-product span {
    color: #4D5959;
    font-family: "Gotham Rounded Book";
    font-size: 10px;
    margin: 0;
    padding: 0;
}

.card-product img {
    transition: all ease 0.4s
}

#product-slide .owl-nav .owl-prev {
    display: block;
    position: absolute;
    z-index: 1000;
    top: 50%;
    transform: translateY(-50%);
}

#product-slide .owl-nav .owl-next {
    display: block;
    position: absolute;
    z-index: 1000;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

#product-slide .owl-nav .owl-prev,
#product-slide .owl-nav .owl-next {
    padding: 5px 6px !important;
    color: black;
    background-color: #c00000;
}

#product-slide .owl-nav .owl-prev:hover,
#product-slide .owl-nav .owl-next:hover {
    padding: 5px 6px !important;
    color: black;
    background-color: #c00000;
}

.card-product .sold-out {
    background-color: #c00000;
    position: absolute;
    padding: 3px 10px;
    text-transform: uppercase;
}

.card-product .sold-out h6 {
    color: white !important;
    font-size: 7px;
}

.bahan {
    position: relative;
}


.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    color: white;
    z-index: 1;
    transition: top .5s ease;
    font-family: "Gotham Rounded";
}

.bahan:hover .title {
    top: 44%;
}

.button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    transition: opacity .35s ease;
    color: white;
    font-family: "Gotham Rounded Book";
    font-size: 10px;
}

.bahan:hover img {
    opacity: .8;
}

.bahan:hover .button {
    opacity: 1;
}

/* End Card Product */

/* Contact */
.card-contact {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    padding: 20px;
    background-clip: border-box;
    border-radius: .25rem;
    transition: all ease 0.4s;
    background: linear-gradient(262.99deg, #C00000 26.16%, #000000 93.12%);
}

.card-contact .title-contact,
.related-product .title-related,
.cart .title-cart {
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 15px;
    color: white;
    font-family: "Gotham Rounded";
    text-transform: uppercase;
}

.card-contact .title-contact::before,
.card-contact .title-contact::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid white;
}

.card-contact .title-contact:not(:empty)::before,
.related-product .title-related:not(:empty)::before,
.cart .title-cart:not(:empty)::before {
    margin-right: .25em;
}

.card-contact .title-contact:not(:empty)::after,
.related-product .title-related:not(:empty)::after,
.cart .title-cart:not(:empty)::after {
    margin-left: .25em;
}

.related-product .title-related {
    color: black;
    text-transform: none;
    font-size: 18px;
}

.cart .title-cart {
    color: black;
    text-transform: none;
    font-size: 18px;
}

.related-product .title-related::before,
.related-product .title-related::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid black;
}

.cart .title-cart::before,
.cart .title-cart::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid black;
}

.card-contact h1 {
    font-size: 15px;
    color: white;
    font-family: "Gotham Rounded";
}

.card-contact span {
    display: block;
    color: white;
    font-family: "Gotham Rounded Light";
    font-size: 10px;
    margin-bottom: 5px;
}

.card-form-contact {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    padding: 20px 10px;
    background-clip: border-box;
    border-radius: .25rem;
    transition: all ease 0.4s;
    background: white;
}

.form-control-underline {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 1px solid black;
    font-size: 13px;
    font-family: "Gotham Rounded Book";
}

.form-control-underline::placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-size: 13px;
    font-family: "Gotham Rounded Book";
}

.card-form-contact button {
    width: 100%;
    display: inline-block;
    color: black;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid black;
    padding: .375rem .75rem;
    font-size: 13px;
    line-height: 1.5;
    border-radius: .25rem;
    text-transform: uppercase;
    font-family: "Gotham Rounded";
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.card-form-contact button:hover {
    background: black;
    color: white;
}

/* End Contact */

/* Footer */
.footer {
    height: auto;
    padding: 10px 0px;
    color: white;
    background-color: black;
}

.footer p {
    margin: 0;
    text-align: center;
    font-family: "Gotham Rounded";
    font-size: 10px;
}

/* End Footer */

/* Banner Product */


.banner-product .centered {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.banner-product .centered h5 {
    font-size: 18px;
    color: white;
    text-transform: uppercase;
    font-family: "Gotham Rounded Bold";
}

.banner-product .centered span,
.banner-product .centered a {
    color: white;
    font-family: "Gotham Rounded Book";
    font-size: 12px;
    text-decoration: none;
    font-family: "Gotham Rounded Book";
}

.banner-product .centered a:hover {
    color: #c00000;
    transition: .5s ease;
}

.banner-product .centered span i {
    font-size: 10px;
    margin-left: 4px;
    margin-right: 4px;
}

.products h6.show {
    font-size: 14px;
    font-family: "Gotham Rounded";
    color: #999;
}

.products .left h3 {
    font-size: 20px;
    font-family: "Gotham Rounded Book";
    color: #4D5959;
}

.products .left h3::after {
    content: '';
    display: block;
    margin-top: 4px;
    border-bottom: 2px solid black;
    width: 37%;
}

#main #category .card {
    margin-bottom: 30px;
    border: 0;
}

#main #category .card .card-header {
    border: 0;
    border-radius: 2px;
    background-color: transparent;
    padding: 0;
}

#main #category .card .card-header .btn-header-link {
    color: black;
    display: block;
    text-align: left;
    background: transparent;
    color: #222;
    padding: 0;
    font-family: "Gotham Rounded";
    font-size: 14px;
}

#main #category .card .card-header .btn-header-link:after {
    content: "\f107";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    float: right;
}

#main #category .card .card-header .btn-header-link.collapsed {
    background: transparent;
    color: black;
}

#main #category .card .card-header .btn-header-link.collapsed:after {
    content: "\f106";
}

#main #category .card .collapsing {
    background: transparent;
    line-height: 30px;
}

#main #category .card .collapse {
    border: 0;
}

#main #category .card .collapse.show {
    background: transparent;
    line-height: 30px;
    color: #222;
}

#main #category .card .card-body {
    padding: 4px 20px;
}

ul.sub-menu {
    list-style: none;
    padding: 0;
}

li.sub-category {
    padding-left: 1.3em;
}

li.sub-category:before {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    font-weight: 900;
    display: inline-block;
    margin-left: -1.3em;
    width: 1.3em;
    font-size: 10px;
    color: black;
}

li.sub-category a {
    font-size: 15px;
    color: black;
    font-family: "Gotham Rounded";
    text-decoration: none;
}

li.sub-category a.sub-category-item {
    font-size: 13px;
    color: black;
    font-family: "Gotham Rounded";
    text-decoration: none;
}

li.sub-category a:hover {
    color: #c00000;
    transition: .5s ease;
}

li.sub-category a.active {
    color: #c00000;
}

/* End Banner Product */


/* Detail Product */
.description-product h4 {
    color: black;
    font-family: "Gotham Rounded Bold";
    font-size: 16px;
}

.description-product h6 {
    color: black;
    font-family: "Gotham Rounded Book";
    font-size: 18px;
}

.description-product span {
    color: black;
    font-family: "Gotham Rounded";
    font-size: 10px;
}

.btn-wishlist {
    border: 1px solid #c00000;
    color: #c00000;
    border-radius: 0px;
    font-size: 14px;
    padding: 7px 20px;
    font-family: "Gotham Rounded";
    transition: .5s ease;
}

.btn-addcart {
    background-color: #c00000;
    color: white;
    border-radius: 0;
    font-family: "Gotham Rounded";
    text-transform: uppercase;
    font-size: 14px;
    padding: 7px 20px;
    border: 1px solid #c00000;
}

.btn-wishlist:hover {
    background-color: #c00000;
    color: white;
    border: 1px solid #c00000;
    transition: .5s ease;
}

.btn-addcart:hover {
    color: white;
}

.sku span,
.categories a,
.tag a {
    color: black;
    text-decoration: none;
    transition: 1s;
}

.categories a:hover,
.tag a:hover {
    color: #c00000;
    transition: 1s;
}

/* End Detail Product */

/* Nav Product */
.nav-tab {
    background-color: #c00000;
    padding: 3px 0;
}

.nav-tab span {
    color: white;
    font-family: "Gotham Rounded";
    font-size: 12px;
}

.nav-tab span a {
    color: white;
    text-decoration: none;
    transition: .3s ease-in-out;
}

.nav-tab span a:hover {
    color: black;
}

.nav-tab span:last-child {
    opacity: .8;
}

/* End Nav Product */

/* Account */
.account h5 {
    font-size: 18px;
    font-family: "Gotham Rounded Bold";
    text-transform: uppercase;
    color: #4d5959;
    margin-bottom: 15px;
}

.account label {
    font-family: "Gotham Rounded Book";
    font-size: 13px;
}

.account input,
.account textarea {
    border-radius: 0;
}

.account input:focus,
.account textarea:focus {
    outline: 0;
    border: 1px solid #c00000;
    box-shadow: none;
}

.btn-auth {
    background-color: #C00000;
    color: white;
    font-family: "Gotham Rounded";
    padding: 5px 25px;
    text-transform: uppercase;
    border-radius: 0;
}

.btn-auth:hover {
    color: white;
}

.dropdown-menu {
    font-size: 13px;
    background-color: #C00000;
    border: 1px solid black;
}

.dropdown-item {
    color: white;
    font-family: "Gotham Rounded";
    transition: .3s ease-in-out;
}

.dropdown-item:hover {
    color: white;
    background-color: black;
}

/* End Account */

/* Paginate */
.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: black !important;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.page-link:hover {
    z-index: 2;
    color: black;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.page-item.active .page-link {
    z-index: 3;
    color: black !important;
    background-color: #c00000;
    border-color: red;
}

/* End Paginate */

#popUp {
    position: fixed;
    max-width: 350px;
    height: 225px;
    background: rgba(236, 240, 241, 1);
    border: 7px solid #9A1D21;
    bottom: 0;
    margin-left: 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    z-index: 1030;
}

#popUp .close {
    color: black;
    right: 8px;
    top: 0px;
    position: absolute;
    font-size: 20px;
    cursor: pointer;
}

#popUp h2 {
    font-size: 17px;
    color: #464646;
    line-height: 24px;
    font-weight: 400;
    margin-top: 34px;
    padding: 0 20px;
}

#new span {
    background: #9A1D21;
    position: absolute;
    color: white;
    padding: 4px 10px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: -5px;
}

#contactModal {
    position: fixed;
    color: #fff;
    bottom: 15%;
    font-size: 15px;
    margin-left: -425px;
    -webkit-transition: all 1.25s ease;
    -moz-transition: all 1.25s ease;
    -o-transition: all 1.25s ease;
    transition: all 1.25s ease;
    cursor: pointer;
    text-align: left;
    letter-spacing: 1px;
    z-index: 1030;
}

#contactModal span {
    position: absolute;
    margin-top: 45px;
    left: 4px;
}

#contactModal::after {
    content: '';
    display: block;
    display: relative;
    border-top: 55px solid transparent;
    border-bottom: 55px solid transparent;
    border-left: 55px solid #9A1D21;
}

@media all and (max-width: 900px) {
    #popUp {
        margin-left: -425px;
    }

    #plus {
        margin-left: 0px;
    }

    .desktop {
        display: unset;
    }
}


.dropdown-submenu {
    position: relative;
}

.dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
}

.keistimewaan img {
    width: 100% !important;
    height: 100% !important;
}

/* Ipad */
@media (min-width: 768px) {
    .banner-slider .slick-slide {
        margin: 0px 5px;
        padding: 0;
    }
}

/* Desktop */
@media (min-width: 992px) {

    .dropdown:hover>.dropdown-menu,
    .dropdown>.dropdown-menu>.dropdown-submenu:hover>.dropdown-menu {
        display: block;
    }

    /* Banner Product */
    .banner-product .centered {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

    .banner-product .centered h5 {
        font-size: unset;
        color: white;
        text-transform: uppercase;
        font-family: "Gotham Rounded Bold";
    }

    .banner-product .centered span i {
        font-size: 10px;
    }

    .banner-product .centered span,
    .banner-product .centered a {
        font-size: 13px;
    }

    /* End Banner Product */


    /* Footer */
    .footer p {
        margin: 0;
        text-align: center;
        font-family: "Gotham Rounded";
        font-size: 15px;
    }

    /* End Footer */

    /* Contact Section */
    .card-form-contact {
        padding: 35px;
    }

    .card-contact {
        background: linear-gradient(262.99deg, #C00000 26.16%, #000000 40.58%);
    }

    .card-contact .title-contact {
        font-size: 20px;
    }

    .related-product .title-related {
        font-size: 24px;
    }

    .card-contact h1 {
        font-size: 23px;
        color: white;
        font-family: "Gotham Rounded";
    }

    .card-contact span {
        display: block;
        color: white;
        font-family: "Gotham Rounded Light";
        font-size: 15px;
        margin-bottom: 5px;
    }

    /* End Contact */
    .card-product .sold-out {
        background-color: #c00000;
        position: absolute;
        padding: 5px 15px;
        text-transform: uppercase;
    }

    .card-product .sold-out h6 {
        color: white !important;
        font-size: 10px;
    }

    .card-product h6 {
        font-size: 13px;
    }

    .card-product span {
        font-size: 12px;
    }

    .title {
        font-size: 35px;
    }

    .button {
        font-size: 12px;
    }

    .banner-slider .slick-slide {
        margin: 0px 5px;
    }

    .banner-button.slick-arrow {
        padding: 10px 20px;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        border-radius: 0px;
        font-size: 13px;
    }

    .product-button.slick-arrow {
        padding: 5px 10px;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        border-radius: 0px;
        font-size: 10px;
    }

    /* About Us Section */
    section.about,
    section.product {
        padding: 40px;
    }

    section.about h6,
    section.product .container>h6 {
        font-family: "Gotham Rounded";
        font-size: 20px;
    }

    section.about p {
        font-family: "Gotham Rounded Book";
        font-size: 15px;
    }

    /* End About Us Section */

    /* Detail Product */
    .description-product h4 {
        font-size: 20px;
    }

    .description-product h6 {
        font-size: 22px;
    }

    .description-product span {
        font-size: 13px;
    }

    /* End Detail Product */

    /* Navbar */
    .form-search {
        border: 0;
        background: 0 0;
        border-bottom: 2px solid #c00000;
        padding: 0;
        font-family: "Gotham Rounded";
        width: 40%;
        text-align: center;
        font-size: 15px;
        color: #fff;
        letter-spacing: 2px;
    }

    /* End Navbar */

    /* Cart */
    .cart .title-cart {
        display: flex;
        align-items: center;
        text-align: center;
        font-size: 20px;
        color: black;
        font-family: "Gotham Rounded";
        text-transform: uppercase;
    }

    /* End Cart */
}

.content {
    display: none;
}


.loader-wrapper {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 1090;
    overflow: hidden;
}

.spinner {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    -webkit-animation: rotate-all 1s linear infinite;
}

.right-side,
.left-side {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.left-side {
    left: 0;
}

.right-side {
    right: 0;
}

.bar {
    width: 100%;
    height: 100%;
    border-radius: 200px 0 0 200px;
    border: 10px solid #c00000;
    position: relative;
}

.bar:after {
    content: "";
    width: 10px;
    height: 10px;
    display: block;
    background: #c00000;
    position: absolute;
    border-radius: 10px;
}

.right-side .bar {
    border-radius: 0 200px 200px 0;
    border-left: none;
    transform: rotate(-10deg);
    transform-origin: left center;
    animation: rotate-right 0.75s linear infinite alternate;
}

.right-side .bar:after {
    bottom: -10px;
    left: -5px;
}

.left-side .bar {
    border-right: none;
    transform: rotate(10deg);
    transform-origin: right center;
    animation: rotate-left 0.75s linear infinite alternate;
}

.left-side .bar:after {
    bottom: -10px;
    right: -5px;
}

@keyframes rotate-left {
    to {
        transform: rotate(30deg);
    }

    from {
        transform: rotate(175deg);
    }
}

@keyframes rotate-right {
    from {
        transform: rotate(-175deg);
    }

    to {
        transform: rotate(-30deg);
    }
}

@keyframes rotate-all {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}



.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}

.loader {
    color: #c00000;
    font-size: 10px;
    margin: 250px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
}

.loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.loader:after {
    left: 3.5em;
}

@-webkit-keyframes load7 {

    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

@keyframes load7 {

    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}