/* ---------------------------------------------------------- :: Template Name: Karl - Fashion Ecommerce Template :: Author: Colorlib :: Author URL: https://colorlib.com :: Description: Karl is smart & elegant fashion e-commerce Template. It's suitable for all e-commerce business platform. It's super responsive for all Desktop/Mobile layout. :: Version: 1.0 :: Created: 09 January 2018 :: Last Updated: 09 January 2018 ---------------------------------------------------------- */ /* ------------------------------------------------- ============ PLACE YOUR CUSTOM CSS HERE ============ ------------------------------------------------- */ @font-face{font-family:ButlerUltraLight;src:url('//static.showit.co/file/QUTHAMs_TXeO0gKQjqOh4A/191589/butler-ultralight.woff');} @font-face{font-family:Allyson Pro;src:url('//static.showit.co/file/UyewJ7STRPuSWpqWxV17SQ/191589/font.woff');} @font-face{font-family:Muli Bold;src:url('//static.showit.co/file/PLeSwPZdSiKSrzJ70albfA/shared/muli-bold.woff');} @font-face{font-family:Commuter Sans Regular;src:url('//static.showit.co/file/rPeZ7ewcSIGvGMEl2ug6EQ/shared/commuterssans-regular.woff');} /* cyrillic-ext */ @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; src: url(/fonts/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL9wU6ingQ.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; src: url(/fonts/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL95U6ingQ.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; src: url(/fonts/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL9xU6ingQ.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; src: url(/fonts/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL9-U6ingQ.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; src: url(/fonts/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL9yU6ingQ.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; src: url(/fonts/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL9zU6ingQ.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; src: url(/fonts/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL99U6g.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; src: url(/fonts/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkCY9_S6w.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; src: url(/fonts/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkAI9_S6w.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; src: url(/fonts/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkCI9_S6w.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; src: url(/fonts/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkB49_S6w.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; src: url(/fonts/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkC49_S6w.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; src: url(/fonts/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkCo9_S6w.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; src: url(/fonts/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RkBI9_.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url(/fonts//JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url(/fonts//JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url(/fonts//JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url(/fonts//JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url(/fonts//JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url(/fonts//JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url(/fonts//JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url(/fonts//JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url(/fonts//JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url(/fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Old Standard TT'; font-style: italic; font-weight: 400; src: url(/fonts/MwQsbh3o1vLImiwAVvYawgcf2eVer2q3bHNiZg.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Old Standard TT'; font-style: italic; font-weight: 400; src: url(/fonts/MwQsbh3o1vLImiwAVvYawgcf2eVer2q-bHNiZg.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Old Standard TT'; font-style: italic; font-weight: 400; src: url(/fonts/MwQsbh3o1vLImiwAVvYawgcf2eVer2q1bHNiZg.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Old Standard TT'; font-style: italic; font-weight: 400; src: url(/fonts/MwQsbh3o1vLImiwAVvYawgcf2eVer2q0bHNiZg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Old Standard TT'; font-style: italic; font-weight: 400; src: url(/fonts/MwQsbh3o1vLImiwAVvYawgcf2eVer2q6bHM.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: url(/fonts/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDTbtPY_Q.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: url(/fonts/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDYbtPY_Q.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: url(/fonts/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDZbtPY_Q.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: url(/fonts/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtM.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .cart-fix{ font-size: 4px; text-align: center; line-height: 60px; } .showSortBtn{ display: none; } .show-size{ display: none; } #clear_cart{ cursor: pointer; } #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */ z-index: 9999; /* makes sure the overlay is on top of other elements */ display: none; /* initially hidden */ } .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border: 10px solid #f3f3f3; border-top: 10px solid #3498db; border-radius: 50%; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .about_me > h2{ font-family: 'Dancing Script', cursive; } .paypal-button { background-color: #ffc439; color: #2C2E2F; padding: 10px 20px; width: 100%; border: none; border-radius: 4px; cursor: pointer; margin: 10px; text-decoration: none; /* Remove default link underline */ display: inline-block; transition: background-color 0.3s; } .credit-card-button { background-color: #2C2E2F; color: #ffffff; padding: 10px 20px; width: 100%; border: none; border-radius: 4px; cursor: pointer; margin: 10px; text-decoration: none; /* Remove default link underline */ display: inline-block; transition: background-color 0.3s; } .paypal-button:hover{ filter: brightness(0.95); } .credit-card-button:hover { filter: brightness(1.25); color: #ffffff; } /*======= CSS variables =======*/ :root{ --white-color: #fff; --dark-color: #222; --body-bg-color: #fff; --section-bg-color: #202834; --navigation-item-hover-color: #3b5378; --text-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); --box-shadow: 0 5px 25px rgb(0 0 0 / 20%); --scroll-bar-color: #fff; --scroll-thumb-color: #282f4e; --scroll-thumb-hover-color: #454f6b; } /*======= Main CSS =======*/ *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: 'founders-grotesk','Helvetica',sans-serif; -webkit-font-smoothing: antialiased; background: var(--body-bg-color); } section{ position: relative; } .section{ color: var(--white-color); background: var(--section-bg-color); padding: 35px 200px; transition: 0.3s ease; } /*======= Header =======*/ header{ z-index: 999; position: fixed; width: 100%; height: calc(5rem + 1rem); top: 0; left: 0; display: flex; justify-content: center; transition: 0.5s ease; transition-property: height, background; } header.sticky{ height: calc(2.5rem + 1rem); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(20px); } header .nav-bar{ position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 200px; transition: 0.3s ease; } .nav-close-btn, .nav-menu-btn{ display: none; } .nav-bar .logo{ color: var(--white-color); font-size: 1.8em; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; text-shadow: var(--text-shadow); } .navigation .nav-items a{ color: var(--white-color); font-size: 1em; text-decoration: none; text-shadow: var(--text-shadow); } .basket-dropdown .basket-list > ul > li a{ color: var(--white-color); font-size: 1em; text-decoration: none; text-shadow: var(--text-shadow); } .basket-dropdown .basket-list > ul > li > a i{ display: none; } .navigation .nav-items a i{ display: none; } .basket-dropdown .basket-list > ul > li > a:not(:last-child){ margin-right: 45px; } .navigation .nav-items a:not(:last-child){ margin-right: 45px; } .nav-close{ display: block; color: var(--dark-color); position: absolute; top: 0; right: 0; font-size: 1.3em; margin: 10px; cursor: pointer; transition: 0.3s ease; } .basket-dropdown{ z-index: 99999; position: fixed; width: 100%; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.25); display: flex; justify-content: center; align-items: center; visibility: hidden; opacity: 0; transition: 0.3s ease; } .basket-dropdown.active{ visibility: visible; opacity: 1; } .basket-dropdown .basket-list{ position: relative; background: var(--white-color); width: 400px; max-width: 450px; display: grid; place-content: center; margin: 20px; padding: 20px; border-radius: 20px; box-shadow: var(--box-shadow); transform: translateY(-200px); transition: 0.3s ease; } .basket-dropdown.active .basket-list{ transform: translateY(0); } .basket-dropdown .basket-list > ul > li a{ color: var(--dark-color); font-size: 1em; margin: 15px 50px; transition: 0.3s ease; } .basket-dropdown .basket-list > ul > li a:hover{ color: var(--navigation-item-hover-color); } .basket-dropdown .basket-list > ul > li > a > i{ display: inline-block; font-size: 1.3em; margin-right: 5px; } /*======= Home =======*/ .home:before{ z-index: 888; content: ''; position: absolute; width: 100%; height: 50px; bottom: 0; left: 0; background: linear-gradient(transparent, var(--section-bg-color)); } /*======= Background slider =======*/ .bg-slider{ z-index: 777; position: relative; width: 100%; min-height: 100vh; } .bg-slider .swiper-slide{ position: relative; width: 100%; height: 100vh; } .bg-slider .swiper-slide video{ width: 100%; height: 100vh; object-fit: cover; background-position: center; background-size: cover; pointer-events: none; } .swiper-slide .text-content{ position: absolute; top: 43%; color: var(--white-color); margin: 0 200px; transition: 0.3s ease; } .swiper-slide .text-content .title{ color: #fff; font-weight: 700; font-family: 'Old Standard TT'; font-style: italic; text-shadow: var(--text-shadow); /*margin-bottom: 20px; transform: translateY(-50px); */ font-size: 1.75rem; letter-spacing: 1px; } .swiper-slide-active .text-content .title{ transform: translateY(0); opacity: 1; transition: 1s ease; transition-delay: 0.3s; transition-property: transform, opacity; } .swiper-slide .text-content .title span{ font-size: 0.6em; font-weight: 300; } .swiper-slide .text-content p{ max-width: 700px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); text-shadow: var(--text-shadow); padding: 20px; border-radius: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--box-shadow); transform: translateX(-80px); opacity: 0; } .swiper-slide-active .text-content p{ transform: translateX(0); opacity: 1; transition: 1s ease; transition-delay: 0.3s; transition-property: transform, opacity; } .swiper-slide .text-content .read-btn{ border: none; outline: none; background: var(--white-color); color: var(--dark-color); font-size: 1em; font-weight: 500; padding: 8px 25px; display: flex; align-items: center; margin-top: 40px; border-radius: 10px; cursor: pointer; transform: translateX(50px); opacity: 0; } .swiper-slide-active .text-content .read-btn{ transform: translateX(0); opacity: 1; transition: 1s ease; transition-delay: 0.3s; transition-property: transform, opacity; } .swiper-slide .text-content .read-btn i{ font-size: 1.6em; transition: 0.3s ease; } .swiper-slide .text-content .read-btn:hover i{ transform: translateX(5px); } .dark-layer:before{ content: ''; position: absolute; width: 100%; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.1); } .bg-slider-thumbs{ z-index: 777; position: absolute; bottom: 7em; left: 50%; transform: translateX(-50%); transition: 0.3s ease; } .thumbs-container{ background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 10px 3px; border-radius: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--box-shadow); } .thumbs-container img{ width: 50px; height: 35px; margin: 0 5px; border-radius: 5px; cursor: pointer; } .swiper-slide-thumb-active{ border: 1px solid var(--white-color); } /*======= Media icons =======*/ .media-icons{ z-index: 999; position: absolute; display: flex; flex-direction: column; top: 50%; transform: translateY(-50%); margin-left: 90px; } .media-icons a{ color: var(--white-color); font-size: 1.7em; margin: 10px 0; } .medias{ z-index: 999; position: absolute; display: flex; flex-direction: column; top: 50%; transform: translateY(-50%); margin-left: 90px; left: 0; margin-right: 50px; } .medias .navs{ color: var(--white-color); font-size: 1.7em; } .baskets{ z-index: 999; position: absolute; display: flex; flex-direction: column; top: 50%; transform: translateY(-50%); margin-left: 50px; right: 0; margin-right: 90px; } .nav-bar > a{ position: absolute; right: 46%; -ms-flex: 0 0 50%; flex: 0 0 50%; } .baskets .navs{ color: var(--white-color); font-size: 1.7em; } .color-dark{ color: var(--dark-color) !important; } /*======= About section =======*/ .about h2{ font-size: 3em; font-weight: 600; } .about p{ margin: 25px 0; } /*======= Media queries (max-width: 1100px) =======*/ @media screen and (max-width: 1100px){ header .nav-bar{ padding: 0 50px; } .section{ padding: 25px 50px; } .media-icons{ right: 0; margin-right: 50px; } .swiper-slide .text-content{ margin: 0 120px 0 50px; } .bg-slider-thumbs{ bottom: 3em; } } /*======= Media queries (max-width: 785px) =======*/ @media screen and (max-width: 785px){ header .nav-bar{ padding: 25px 20px; } .section{ padding: 25px 20px; } .media-icons{ margin-right: 20px; } .media-icons a{ font-size: 1.5em; } .swiper-slide .text-content{ margin: 0 70px 0 20px; } .swiper-slide .text-content .title{ font-size: 1.50rem; letter-spacing: 1px; } .swiper-slide .text-content .title span{ font-size: 0.55em; } .swiper-slide .text-content p{ font-size: 0.9em; } .swiper-slide .text-content .read-btn{ font-size: 0.9em; padding: 5px 15px; } /*======= About section =======*/ .about h2{ font-size: 2.5em; } .about p{ font-size: 0.9em; } .nav-bar > a{ position: absolute; right: 35%; } .baskets{ margin-right: 25px; } .medias{ margin-left: 25px; } } /*======= Navigation menu =======*/ .nav-menu-btn{ display: block; color: var(--white-color); font-size: 1.5em; cursor: pointer; } .nav-close-btn{ display: block; color: var(--dark-color); position: absolute; top: 0; right: 0; font-size: 1.3em; margin: 10px; cursor: pointer; transition: 0.3s ease; } .navigation{ z-index: 99999; position: fixed; width: 100%; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.25); display: flex; justify-content: center; align-items: center; visibility: hidden; opacity: 0; transition: 0.3s ease; } .navbar{ padding: 0px !important; } .navigation.active{ visibility: visible; opacity: 1; } .navigation .nav-items{ position: relative; background: var(--white-color); width: 400px; max-width: 400px; display: grid; place-content: center; margin: 20px; padding: 40px; border-radius: 20px; box-shadow: var(--box-shadow); transform: translateY(-200px); transition: 0.3s ease; } .navigation.active .nav-items{ transform: translateY(0); } .navigation .nav-items a{ color: var(--dark-color); font-size: 1em; margin: 15px 50px; transition: 0.3s ease; } .navigation .nav-items a:hover{ color: var(--navigation-item-hover-color); } .navigation .nav-items > a > i{ display: inline-block; font-size: 1.3em; margin-right: 5px; } .basket-container { position: relative; display: inline-block; font-family: 'Arial', sans-serif; } /* Styling for basket header */ .basket-header { cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; margin-top: 15px; } .basket-count { font-size: 16px; font-weight: bold; } .equal-images img { width: 75px; /* Adjust the width as needed */ height: 75px; /* Adjust the height as needed */ object-fit: contain; /* Maintain aspect ratio */ padding: 5px; /* Optional: Add padding for spacing */ margin-right: 10px; /* Optional: Add margin between the icons */ } .equal img{ width: 115px !important; height: 115px !important; } .change-color{ color: #0b0b0b !important; } .change-color-count{ color: #ef2525 !important; } .accessory { height: 6px; background-image: radial-gradient(closest-side, rgba(128, 128, 128, 1.0), rgba(128, 128, 128, 0) 100%); position: relative; } /*
*/ /*-----------------------------------------------------------------------------------*/ /* About /*-----------------------------------------------------------------------------------*/ .m-t-90{ margin-top: 90px; } .paddsection { padding-top: 90px; padding-bottom: 90px; } .paddsections { padding-top: 90px; padding-bottom: 90px !important; } #about { width: 100%; height: auto; background: #f7f7f7; padding-top: 120px; } #about .div-img-bg { padding-bottom: 30px; } #about .div-img-bg .about-img img { width: 100%; box-shadow: 0px 0px 85px 0px rgba(0, 0, 0, 0.14); margin-top: -60px; margin-left: 40px; height: 400px; -o-object-fit: cover; object-fit: cover; } #about .about-descr .p-heading { font-family: "Playfair Display", serif; font-size: 28px; text-align: left; margin: 25px 0; padding: 0; color: #999999; line-height: 28px; } #about .about-descr .separator { max-width: 80%; text-align: left; margin: 25px 0; padding: 0; font-size: 20px; color: #999999; line-height: 28px; } /** Width between 1200x to 0 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /** Width between 992px to 1199px * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /** Width between 768px to 991px * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ @media (min-width: 768px) and (max-width: 991px) { #about .div-img-bg { padding: 0; } #about .div-img-bg .about-img img { margin-top: 0%; margin-left: calc(0% - 0px); } #about .about-descr .p-heading { font-size: 20px; } #about .about-descr .separator { max-width: 100%; margin-bottom: 0; } /* portfolio */ #portfolio .portfolio-list .nav li { float: none; margin: 20px; display: inline-block; } } /** Width between 767px to 0 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ @media (max-width: 767px) { #about .div-img-bg { padding: 0; } #about .div-img-bg .about-img img { margin-top: 0%; margin-left: calc(0% - 0px); } #about .about-descr .p-heading { font-size: 20px; } #about .about-descr .separator { max-width: 100%; margin-bottom: 0; } /* portfolio */ #portfolio .portfolio-list .nav li { float: none; margin: 20px; display: inline-block; } } /** Width between 600px to 0 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ @media (max-width: 600px) { #about .div-img-bg { padding: 0; } #about .div-img-bg .about-img img { margin-top: 0%; margin-left: calc(0% - 0px); } #about .about-descr .p-heading { font-size: 20px; } #about .about-descr .separator { max-width: 100%; margin-bottom: 0; } /* portfolio */ #portfolio .portfolio-list .nav li { float: none; margin: 10px; display: inline-block; } } /** Width between 480px to 0 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ @media (max-width: 480px) { #about .div-img-bg { padding: 0; } #about .div-img-bg .about-img img { margin-top: 0%; margin-left: calc(0% - 0px); } #about .about-descr .p-heading { font-size: 20px; } #about .about-descr .separator { max-width: 100%; margin-bottom: 0; } /* portfolio */ #portfolio .portfolio-list .nav li { float: none; margin: 20px; } } /** Width between 320px to 0 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ @media (max-width: 320px) { #about .div-img-bg { padding: 0; } #about .div-img-bg .about-img img { margin-top: 0%; margin-left: calc(0% - 0px); } #about .about-descr .p-heading { font-size: 20px; } #about .about-descr .separator { max-width: 100%; margin-bottom: 0; } /* portfolio */ #portfolio .portfolio-list .nav li { float: none; margin: 20px; } } /*-------------------------------------------------------------- # Portfolio --------------------------------------------------------------*/ #portfolio { position: relative; padding-bottom: 50px; } #portfolio #portfolio-flters { padding: 0; margin: 0 auto 35px auto; list-style: none; text-align: center; border-radius: 50px; padding: 2px 15px; } #portfolio #portfolio-flters li { cursor: pointer; display: inline-block; padding: 10px 15px 8px 15px; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #999999; margin-bottom: 5px; transition: all 0.3s ease-in-out; } #portfolio #portfolio-flters li:hover, #portfolio #portfolio-flters li.filter-active { color: #b8a07e; } #portfolio #portfolio-flters li:last-child { margin-right: 0; } #portfolio .portfolio-item { cursor: pointer; margin-bottom: 30px; width: 600px; height: auto; } #portfolio .portfolio-item .portfolio-info { position: absolute; left: 30px; right: 30px; bottom: 0; z-index: 3; transition: all ease-in-out 0.3s; background: rgba(255, 255, 255, 0.9); padding: 15px; } #portfolio .portfolio-item .portfolio-info h4 { font-size: 18px; color: #666; font-weight: 600; margin-bottom: 10px; } #portfolio .portfolio-item .portfolio-info p { color: #999; font-size: 14px; margin: 0; padding: 0; } #portfolio .portfolio-item .portfolio-info .preview-link, #portfolio .portfolio-item .portfolio-info .details-link { position: absolute; right: 40px; font-size: 24px; top: calc(50% - 18px); color: #b8a07e; } #portfolio .portfolio-item .portfolio-info .preview-link:hover, #portfolio .portfolio-item .portfolio-info .details-link:hover { color: #cab89f; } #portfolio .portfolio-item .portfolio-info .details-link { right: 10px; } #portfolio .portfolio-item .portfolio-info { opacity: 1; bottom: 20px; } /*-------------------------------------------------------------- # Portfolio Details --------------------------------------------------------------*/ .portfolio-details { padding-top: 40px; } .portfolio-details .portfolio-details-slider img { width: 100%; } .portfolio-details .portfolio-details-slider .swiper-pagination { margin-top: 20px; position: relative; } .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: #fff; opacity: 1; border: 1px solid #b8a07e; } .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active { background-color: #b8a07e; } .portfolio-details .portfolio-info { padding: 30px; box-shadow: 0px 0 30px rgba(75, 74, 74, 0.08); } .portfolio-details .portfolio-info h3 { font-size: 22px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .portfolio-details .portfolio-info ul { list-style: none; padding: 0; font-size: 15px; } .portfolio-details .portfolio-info ul li+li { margin-top: 10px; } .portfolio-details .portfolio-description { padding-top: 30px; } .portfolio-details .portfolio-description h2 { font-size: 26px; font-weight: 700; margin-bottom: 20px; } .portfolio-details .portfolio-description p { padding: 0; } .section-title { margin-bottom: 70px; } .section-title h2 { font-size: 25px; letter-spacing: 2px; text-transform: uppercase; } /*-------------------------------------------------------------- # Breadcrumbs --------------------------------------------------------------*/ .breadcrumbs { padding: 40px 0 0 15px; background-color: white; min-height: 40px; } @media (max-width: 992px) { .breadcrumbs { padding-top: 100px; } } .breadcrumbs h2 { font-size: 24px; font-weight: 300; margin: 0; } @media (max-width: 992px) { .breadcrumbs h2 { margin: 0 0 10px 0; } } .breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; font-size: 14px; } .breadcrumbs ol li+li { padding-left: 10px; } .breadcrumbs ol li+li::before { display: inline-block; padding-right: 10px; color: #6c757d; content: "/"; } @media (min-width: 768px) { .mt-res-100 { margin-top: 100px; } } @media (max-width: 768px) { .breadcrumbs .d-flex { display: block !important; } .breadcrumbs ol { display: block; } .breadcrumbs ol li { display: inline-block; } } .swiper-slide { width: 100%; /* Set the width as needed */ height: 600px; /* Set the height as needed */ overflow: hidden; /* Hide overflow to crop images */ } .full-screen-image { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; object-fit: contain; /* or "contain" depending on your preference */ } /*-------------------------------------------------------------- # Journal --------------------------------------------------------------*/ #contact { height: auto; width: 100%; } .contact-details { list-style: none; margin: 0; padding: 0; } .contact-details li { padding-bottom: 10px; } #contact input, #contact textarea { width: 100%; margin-bottom: 5px; } #contact textarea { min-height: 160px; } .php-email-form .error-message { display: none; color: #fff; background: #ed3c0d; text-align: left; padding: 15px; margin-bottom: 15px; font-weight: 600; } .php-email-form .error-message br+br { margin-top: 25px; } .php-email-form .sent-message { display: none; color: #fff; background: #18d26e; text-align: center; padding: 15px; font-weight: 600; margin-bottom: 15px; } .php-email-form .loading { display: none; background: #fff; text-align: center; padding: 15px; margin-bottom: 15px; } .php-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid #18d26e; border-top-color: #eee; animation: animate-loading 1s linear infinite; } @keyframes animate-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .single_footer_area{ text-align: center; } .list-selected-product li { list-style: none; margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 10px; display: flex; align-items: center; } /* Style for the product image */ .list-selected-product li .image { margin-right: 10px; } .list-selected-product li img { max-width: 40px; border-radius: 3px; } /* Style for the product description */ .list-selected-product li .cart-item-desc { flex: 1; } .list-selected-product li .nameProductCart { margin: 0; font-size: 14px; color: #333; } .list-selected-product li .count_article { margin: 5px 0; font-size: 12px; color: #777; } .list-selected-product li .price { font-weight: bold; color: #000; } /* Style for the remove icon */ .list-selected-product li .dropdown-product-remove { font-size: 16px; color: #999; cursor: pointer; } /* Style for the total section */ .list-selected-product li.total { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; } .list-selected-product li.total span.pull-right { font-weight: bold; font-size: 14px; color: #333; } .list-selected-product li.total a { font-size: 12px; text-decoration: none; padding: 5px 10px; color: #fff; border-radius: 3px; cursor: pointer; } .btn-cart { background-color: #4CAF50; } .btn-checkout { background-color: #3498db; } .basket-list{ overflow-y: auto; /* Add scrollbar for vertical overflow */ max-height: 450px; /* Set a maximum height for the container */ } /*** shop ****/ .shop_grid_area #portfolio-flters { padding-left: 0 !important; } .shop_grid_area #portfolio-flters li { cursor: pointer; display: block; padding: 10px 15px 8px 15px; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #999999; margin-bottom: 5px; transition: all 0.3s ease-in-out; } .shop_grid_area #portfolio-flters li:hover, .shop_grid_area #portfolio-flters li.filter-active { color: #b36d0b; } .shop_grid_area #portfolio-flters li:last-child { margin-right: 0; } @media (max-width: 768px) { .product-name { max-width: 200px; /* Set the maximum width as per your requirement */ white-space: nowrap; /* Prevent text from wrapping to the next line */ overflow: hidden; /* Hide any content that exceeds the maximum width */ text-overflow: ellipsis; /* Display an ellipsis (...) to indicate text overflow */ } } .product.hidden { display: none; } .product:hover { transform: scale(1.05); } .filter-container { display: flex; align-items: center; margin-bottom: 20px; } .filter-container label { margin-right: 10px; } .filter-container input { width: 80px; padding: 5px; margin-right: 10px; } .filter-container button { padding: 8px; background-color: #4caf50; color: #fff; border: none; cursor: pointer; } .hidden{ display: none; } .slider-range-price{ visibility: hidden; } #min-price, #max-price { width: 100%; padding: 12px; box-sizing: border-box; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; } @media (max-width: 768px) { #min-price, #max-price { font-size: 14px; } } @media (max-width: 480px) { #min-price, #max-price { font-size: 12px; } } #sizeForAdd li.filter-active a { background-color: #ff084e; color: #fff; } @media (max-width: 768px) { #desktop-video { display: none; } } /* CSS za mobilnu verziju */ @media (min-width: 769px) { #mobile-video { display: none; } } .shop_pagination_area .pagination { flex-wrap: wrap; justify-content: center; gap: 5px; } .shop_pagination_area .page-item { flex: 0 0 auto; } @media (max-width: 576px) { .shop_pagination_area .page-link { padding: 0.3rem 0.5rem; font-size: 0.85rem; } } .single_catagory_area { width: 100%; padding-top: 30%; }