@import url(https://fonts.googleapis.com/css2?family=Lemonada:wght@300..700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Slab:wght@100..900&display=swap); @import url(https://fonts.googleapis.com/css2?family=Marhey:wght@300..700&family=Quicksand:wght@300..700&display=swap); *, ::after, ::before { text-shadow: 1px 1px 1px rgba(0, 0, 0, .004); outline: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::-webkit-scrollbar { background-color: #fff; width: .4em; position: fixed; z-index: 91; } ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:window-inactive { cursor: pointer; background-color: #838383; } a, img { outline: 0; text-decoration: none; } a { cursor: pointer; color: #181616; -webkit-transition: all .1s ease; transition: all .1s ease; } b, strong { font-weight: 700; } body, html { margin: 0; padding: 0; } body { font-optical-sizing: auto; font-style: normal; font-size: 1rem; overflow-x: hidden !important; overflow-y: scroll; } * { font-family: "Roboto Slab", serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } .text-shadow { text-shadow: 0 0 2px #000 !important; } .icon-link>.bi { width: .75em; height: .75em; } .site-header { background-color: rgba(0, 0, 0, .85); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .site-header a { color: #8e8e8e; transition: color .15s ease-in-out; } .site-header a:hover { color: #fff; text-decoration: none; } .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .b-example-divider { width: 100%; height: 3rem; background-color: rgba(0, 0, 0, .1); border: solid rgba(0, 0, 0, .15); border-width: 1px 0; box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); } .b-example-vr { flex-shrink: 0; width: 1.5rem; height: 100vh; } .bi { vertical-align: -.125em; fill: currentColor; } .bg-body-banner { background-repeat: no-repeat; background-size: cover; background-position: center; filter: grayscale(0%); height: 250px; } .btn-bd-primary { --bd-violet-bg: #3a6df6; --bd-violet-rgb: 112.520718, 44.062154, 249.437846; --bs-btn-font-weight: 600; --bs-btn-color: var(--bs-white); --bs-btn-bg: var(--bd-violet-bg); --bs-btn-border-color: var(--bd-violet-bg); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: #3a6df6; --bs-btn-hover-border-color: #3a6df6; --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); --bs-btn-active-color: var(--bs-btn-hover-color); --bs-btn-active-bg: #5a23c8; --bs-btn-active-border-color: #5a23c8; } .bd-mode-toggle { z-index: 1500; } .bd-mode-toggle .dropdown-menu .active .bi { display: block !important; } .btn-custom1 { --bs-btn-color: #fff; --bs-btn-bg: #afcd36; --bs-btn-border-color: #afcd36; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #afcd36; --bs-btn-hover-border-color: #afcd36; --bs-btn-focus-shadow-rgb: 233, 30, 99; --bs-btn-active-color: #fff; --bs-btn-active-bg: #afcd36; --bs-btn-active-border-color: #afcd36; } .btn-custom2 { --bs-btn-color: #fff; --bs-btn-bg: #393287; --bs-btn-border-color: #393287; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #393287; --bs-btn-hover-border-color: #393287; --bs-btn-focus-shadow-rgb: 233, 30, 99; --bs-btn-active-color: #fff; --bs-btn-active-bg: #393287; --bs-btn-active-border-color: #393287; } .text-custom1 { color: #afcd36 !important; } .text-custom2 { color: #393287 !important; } .navbar-toggle { display: none; } .category-strip { background: #fff; } .cat-item { color: #bba27f; font-weight: 600; } .cat-item img { line-height: 1; transition: .1s; width: 100px; } .cat-text { display: inline-block; text-align: left; font-size: 14px; line-height: 1.1; letter-spacing: .2px; } .cat-text strong { font-weight: 700; } .cat-item:hover { color: #6f5330; } .cat-item:hover img { transform: scale(1.1); } .navbar { padding: .5rem 0 1rem 0; background-color: #fff } .navbar::after { content: ""; position: absolute; background-color: #fff; bottom: -1.9rem; left: 0; width: 100%; height: 32px; background: url("../img/torn-top.webp") bottom center; z-index: 5; pointer-events: none; } .navbar-brand { width: 240px; padding: 0 1rem 0 0; margin: 0 1rem 0 0 !important; } .navbar-brand img { width: 100%; } .navbar-brand small { position: absolute; top: 60px; font-size: 14px } .navbar-nav>.nav-item { position: relative; margin: 0 0 0 .5rem; } .navbar-nav>.nav-item>a { font-weight: 600; color: #111; padding: 1rem .5rem; } .navbar-nav>.nav-item:hover>a, .navbar-nav>.nav-item:hover>a:active { color: #f63a3a; } .navbar-nav>.nav-item>a.all-categories { background-color: #dc3545; color: #fff; padding: .8rem; } .navbar-nav>.nav-item>a.all-categories:hover { filter: brightness(110%); color: #fff; } .dropdown-toggle::after { display: none !important; } .offcanvas { width: 100% !important; } .offcanvas-body { background-color: #fff; } .offcanvas-title { font-weight: 700 !important; } @media (max-width:1199px) { .navbar-toggle { display: block; } .navbar-brand { width: 175px; } .navbar-brand small { top: 75%; font-size: 14px } } @media (max-width:1199px) { .navbar-nav>.nav-item { padding: .2rem 0; } .navbar-nav>.nav-item>a { font-size: 1.2rem; } .navbar-nav>.nav-item:active:after, .navbar-nav>.nav-item:hover:after { height: 0; border-bottom: 0; } .offcanvas-header { background-color: #eee; } .offcanvas-body { padding: 2rem 0; } } /* ########## */ .mobile-dropdown { border-bottom: 1px solid #ececec; padding:.1rem .5rem!important; } .mobile-toggle { width: 100%; border: 0; background: transparent; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 600; color: #111; transition: .25s; } .mobile-toggle:hover { color: #afcd36; } .mobile-toggle i { font-size: 16px; transition: .3s; color: #999; } .mobile-dropdown.active .mobile-toggle { color: #afcd36; } .mobile-dropdown.active .mobile-toggle i { transform: rotate(45deg); color: #afcd36; } .mobile-submenu { display: none; padding: 0 0 12px 18px; margin: 0; } .mobile-submenu li { position: relative; } .mobile-submenu li::before { content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #afcd36; transform: translateY(-50%); } .mobile-submenu a { display: block; padding: 10px 0; color: #666; text-decoration: none; font-size: 15px; font-weight: 500; transition: .25s; } .mobile-submenu a:hover { color: #afcd36; padding-left: 8px; } /* ########### */ .navbar-menu { display: flex; gap: 24px; align-items: center; } .navbar-menu>li { position: relative; padding: .5rem 0 0 0; } .navbar-menu>li>a { text-decoration: none; color: #212529; font-weight: 600; font-size: 1.1rem; padding: 1rem 0; display: inline-block; } .navbar-menu>li>a:hover { color: #afcd36; } .submenu { position: absolute; top: 100%; left: -15px; min-width: 250px; background: #fff; border-radius: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); padding: 0; display: none; z-index: 1000; } .submenu li { display: block; } .submenu li a { display: block; padding: 1rem; color: #111; text-decoration: none; font-size: 16px; font-weight: 600; } .submenu li a:hover { background: #f8f9fa; color: #afcd36; } .has-sub:hover>.submenu { display: block; } .index-banner { position: relative; overflow: hidden; z-index: 1; padding: 2rem 4rem !important; transition: .2s; background-repeat: no-repeat; background-position: center; background-size: 150%; transition: .3s; box-shadow: -5px 0 10px #dedede; } .index-banner-overlay { content: ''; width: 75px; height: 75px; background-color: rgba(255, 255, 255, 1); position: absolute; bottom: 0; right: 0; z-index: -1; opacity: 1; display: none !important; overflow: hidden; } .index-banner-overlay:after { font-family: bootstrap-icons; content: "\F122"; font-size: 1.6rem; overflow: hidden; display: block; visibility: visible; color: #393287; text-align: center; line-height: 3; opacity: 1; } .index-banner:hover .index-banner-overlay { animation: index-hover .5s forwards; } .index-banner:hover .index-banner-overlay:after { visibility: hidden; } .index-banner:hover { background-size: 160%; } @keyframes index-hover { 0% { transform: scale(1); } 100% { transform: scale(100); background-color: rgba(0, 0, 0, .6); } } @media (max-width:1199px) { .index-banner { background-size: cover; padding: 1rem 2rem !important; } .index-banner:hover { background-size: 180%; } } .banner { position: relative; height: 500px; overflow: hidden; z-index: 0; } #bannerCarousel .carousel-item { position: relative; height: 100vh; min-height: 480px; } #bannerCarousel .slide-media, #bannerCarousel .slide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #bannerCarousel .carousel-item { position: relative; height: 500px; min-height: 500px; } #bannerCarousel .slide-media, #bannerCarousel .slide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #bannerCarousel .carousel-caption { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 2rem; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .45); } @media (max-width:768px) { .banner { position: relative; height: auto; overflow: hidden; z-index: 0; } #bannerCarousel .carousel-caption { padding: 1.25rem; } } #bannerCarousel .caption-piece { opacity: 1; transform: none; text-align: center; } #bannerCarousel .caption-piece.cap-anim-1 { animation: capIn .6s ease .1s both; } #bannerCarousel .caption-piece.cap-anim-2 { animation: capIn .6s ease .25s both; } #bannerCarousel .caption-piece.cap-anim-3 { animation: capIn .6s ease .4s both; } @keyframes capIn { from { transform: translateY(14px); filter: brightness(.92); } to { transform: translateY(0); filter: brightness(1); } } @keyframes capIn { from { transform: translateY(14px); filter: brightness(.92); } to { transform: translateY(0); filter: brightness(1); } } #bannerCarousel .slide-media img { transform: scale(1.05) translateZ(0); will-change: transform; backface-visibility: hidden; } #bannerCarousel .carousel-item.active .slide-media img.kenburns { animation: heroKenburns 6s ease-in-out forwards; } @keyframes heroKenburns { from { transform: scale(1.05) translateZ(0); } to { transform: scale(1.18) translateZ(0); } } @media (max-width:768px) { #bannerCarousel .carousel-item { height: 360px; min-height: 360px; } #bannerCarousel .carousel-caption { padding: 1.25rem; } } @media (prefers-reduced-motion:reduce) { #bannerCarousel .caption-piece { animation: none !important; transform: none !important; filter: none !important; } #bannerCarousel .carousel-item.active .slide-media img.kenburns { animation: none !important; transform: none !important; } } .dropdown-menu-cart { width: 420px; position: absolute; right: -.5rem; margin: 1rem 0 0 0; padding: 1rem; background-color: #fff; border: .1rem solid #dedede; border-bottom: .2rem solid #dedede; } @media (max-width:490px) { .dropdown-menu-cart { width: 100%; bottom: 0; top: auto; right: 0; } } .modal.fade.zoom:not(.show) .modal-dialog { transform: scale(.8); } .dropdown-item-danger { color: var(--bs-red); } .dropdown-item-danger:focus, .dropdown-item-danger:hover { color: #fff; background-color: var(--bs-red); } .dropdown-item-danger.active { background-color: var(--bs-red); } .btn-hover-light { color: var(--bs-body-color); background-color: var(--bs-body-bg); } .btn-hover-light:focus, .btn-hover-light:hover { color: var(--bs-link-hover-color); background-color: var(--bs-tertiary-bg); } .cal-days, .cal-month, .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); align-items: center; } .cal-month-name { grid-column-start: 2; grid-column-end: 7; text-align: center; } .cal-btn, .cal-weekday { display: flex; flex-shrink: 0; align-items: center; justify-content: center; height: 3rem; padding: 0; position: relative; } .cal-btn:not([disabled]) { font-weight: 500; color: var(--bs-emphasis-color); } .cal-btn:focus, .cal-btn:hover { background-color: var(--bs-secondary-bg); } .cal-btn[disabled] { border: 0; opacity: .5; } .w-220px { width: 220px; } .w-280px { width: 280px; } .w-340px { width: 340px; } .opacity-10 { opacity: .1; } .rating { display: flex; flex-wrap: nowrap; justify-content: start; cursor: pointer; } .rating .bi { color: #ccc; } .rating .bi.active { color: #ffd600; } .btn-rating { display: block; clip: auto; } .btn-rating label { float: left; } .btn-rating .bi { color: #ccc !important; } .rating-comments { display: block; text-align: center; overflow: hidden; } .rating-comments input:checked~label .bi { color: #ffd600 !important; } .form-control::placeholder { color: #555; opacity: .2; } .control-btn { top: -1rem; right: .4rem; z-index: 1; transform: scale(1.2); position: absolute; width: 50px; } .control-btn button i { font-weight: 700 !important; } .carousel-control-next, .carousel-control-prev { color: #111 !important; } .carousel-indicators { position: absolute; bottom: -1.5rem; width: 100%; overflow: hidden; padding: 0; margin: 0; z-index: 1; text-align: center; justify-content: center; } .carousel-indicators [data-bs-target] { width: 2rem; height: .3rem; background-color: #dedede; } .carousel-indicators .active { opacity: 1; background-color: #f63a3a; } #productDetailsImage .carousel-indicators { position: static; bottom: 0; width: 100%; overflow: hidden; padding: 0; z-index: 1; text-align: left; justify-content: start; } #productDetailsImage .carousel-indicators [data-bs-target] { width: 100%; height: auto; margin: 0 0 .4rem 0; background-color: #dedede; } #productDetailsImage .carousel-indicators .active { opacity: 1; background-color: #f63a3a; } .product-general .form-check-input { transform: scale(1.4); } .product-general .form-check-input[type="checkbox"] { border: 1px solid #ccc; } .product-general .form-check-input:checked[type="checkbox"] { background-color: #f63a3a; border: 0; } .more-link-collapse { display: block; width: 50px; height: 50px; overflow: hidden; } .more-link-collapse:before { width: 50px; height: 50px; overflow: hidden; font-family: bootstrap-icons; content: "\f286"; color: #111; } .more-link-collapse.collapsed:before { width: 50px; height: 50px; overflow: hidden; font-family: bootstrap-icons; content: "\f282"; color: #111; } .price-discount { text-decoration: line-through; } .zoom-container { position: relative; z-index: 2; } .mouse-zoom { background-repeat: no-repeat; width: 100%; overflow: hidden; cursor: crosshair; margin: auto; filter: none !important; } .mouse-zoom img { transition: opacity .5s; display: block; width: 100%; } .mouse-zoom img:hover { opacity: 0; } .custom-tabs .nav-pills { display: flex; flex-wrap: nowrap; justify-content: space-between; } .custom-tabs .nav-pills .nav-item { margin: 0 .4rem 0 0; } .custom-tabs .nav-pills .nav-item:last-child { margin: 0; } .custom-tabs .nav-pills .nav-item .nav-link { background-color: #eee; color: #333; margin: 0 .5rem 0 0; } .custom-tabs .nav-pills .nav-item .nav-link.active { color: #fff; background-color: var(--bs-danger); } .custom-tabs .tab-content { border: 1px solid #dee2e6; padding: 1rem; } .custom-tabs .tab-content .tab-pane { background-color: #fff; min-height: 200px; height: auto; } @media (max-width:768px) { .custom-tabs .nav-pills { display: flex; flex-wrap: wrap; justify-content: space-between; } .custom-tabs .nav-pills .nav-item { width: 49% !important; margin: 0 0 .5rem 0; } } .custom-tabs-1 .nav-pills .nav-item:last-child { margin: 0; } .custom-tabs-1 .nav-pills .nav-item .nav-link { background-color: #eee; color: #333; } .custom-tabs-1 .nav-pills .nav-item .nav-link.active { color: #fff; background-color: var(--bs-primary); } .custom-tabs-1 .tab-content { padding: 0; } .custom-tabs-1 .tab-content .tab-pane { background-color: #fff; min-height: 200px; height: auto; } .thumb-item img { width: 100%; height: auto; } .hover-image-main { position: relative; } .hover-image-main:after { content: ""; display: table; clear: both; } .hover-image-main img { position: relative; display: none; top: 0; left: 0; width: 100%; height: 100%; -o-object-position: center; object-position: center; -o-object-fit: cover; object-fit: cover; } .hover-image-main img:first-child { display: block; } .product-view { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; padding: 0 35%; width: 100%; height: 100%; } .product-view .product-view-table { display: table; height: calc(100% - .625rem); width: 100%; } .product-view .product-view-table a, .product-view .product-view-table div { display: table-cell; position: relative; transition: all .3s ease; transition: all .25s ease; } .product-view .product-view-table a:after, .product-view .product-view-table div:after { content: ""; display: block; position: absolute; bottom: 0; left: .15rem; right: .15rem; border-bottom: .20rem solid #fff; } .product-view .product-view-table a.active:after, .product-view .product-view-table a.active:after, .product-view .product-view-table div.active:after, .product-view .product-view-table div.active:after { border-color: #f14c4c; } .product-view .product-view-table a:first-child:last-child:after, .product-view .product-view-table a:first-child:last-child:after, .product-view .product-view-table div:first-child:last-child:after, .product-view .product-view-table div:first-child:last-child:after { border-color: transparent; } .laces-checkbox { display: inline-block; width: 2rem; height: 2rem; font-size: 1.2rem; line-height: 1.8rem; text-align: center; border: 1px solid #999; border-radius: .3rem; } @keyframes zoomin { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } #lightbox-overlay { position: fixed; inset: 0; background: rgba(172, 172, 172, .9); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: .3s ease } #lightbox-overlay.active { opacity: 1; visibility: visible } #lightbox-overlay img { max-width: 90%; max-height: 90%; border-radius: 12px; animation: zoomIn .3s ease } .lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 40px; color: #fff; cursor: pointer; user-select: none; padding: 10px 15px; transition: .2s ease } .lb-arrow:hover { color: #dc3545 } .lb-prev { left: 30px } .lb-next { right: 30px } @keyframes zoomIn { from { transform: scale(.85); opacity: 0 } to { transform: scale(1); opacity: 1 } } .footer { position: relative; overflow: hidden; padding: 3rem 0; margin: 3rem 0 0 0; background-repeat: no-repeat; background-position: center top; background-size: cover }