/* ------------------------------------ */ /* ---------- SITE FRAMEWORK ---------- */ /* ------------------------------------ */ :root { --mainColour: #172B68; --secondaryColour: #59C6F1; --tertiaryColour: #222529; --background: #F4F4F4; --border: #E5E1E1; --topbarColour: #fff; --footerColour: #222529; --bylineColour: #1A1D21; --textColour:#222529; --productAspect: 1/1; --categoryAspect: 1/1; } html { scroll-behavior: smooth; overflow-x: hidden; overflow-y: scroll; } body { font-family: "Noto Sans", sans-serif; font-size: 14px; background: var(--background); color: var(--textColour); overflow: hidden; } :is(.site-header, .content-wrap, .site-footer) * { box-sizing: border-box; } .content-div { min-height: 600px; } .ui-autocomplete { z-index: 10001 !important; background: var(--background);} .ui-autocomplete li{list-style: none; padding: 5px 0; cursor: pointer;} /* APPRISE EDITS */ div.apprise { font-family: "Noto Sans", sans-serif; border-color: #D8E1EB; } div.apprise .apprise-buttons button { background: #4476BA; border: 1px solid #4476BA; color: #fff; } div.apprise .apprise-buttons button:hover { background: #fff; color: #4476BA; } div.apprise .apprise-buttons button:active { background: #fff; color: #4476BA; } /* DISPLAY CLASSES */ .full-width-fix { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .hidden { display: none; } .hideImportant { display: none !important; } /* SITE FORMS */ input::placeholder { font-family: "Noto Sans", sans-serif; } textarea { font-family: "Noto Sans", sans-serif; } select { width: 100%; border: 1px solid #DBDBDB; height: 50px; padding: 0 10px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(../images/chevron-down-black.svg) no-repeat 98% center #fff; } input[type=text], input[type=date], input[type=tel], input[type=number], input[type=email], input[type=password], textarea, select { width: 100%; height: 50px; background-color: #F9F9F9; border: 2px solid #F9F9F9; padding: 0 20px; box-sizing: border-box; font-size: 16px; color: var(--textColour); transition: 0.2s ease-in-out all; border-radius:25px; } input[type=text]:focus, input[type=date]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus{border-color: #00ACE9;} textarea { height: 120px; resize:none; padding: 20px;} input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } :is(input, select, textarea).input-error { border-color: #a30e0e !important; } .site-form-field { padding: 10px 0; } .site-form-label { font-size: 16px; color: #3B3B3D; padding: 5px 0; } /* ----- TYPOGRAPHY ----- */ h1, h2, h3, h4, h5, h6 { display: block; color: var(--textColour); margin: 0; padding: 0 0 10px 0; font-weight: 400; } h1 { font-size: 36px; line-height: 42px; } h2 { font-size: 32px; line-height: 38px; } h3 { font-size: 30px; line-height: 38px; } h4 { font-size: 26px; line-height: 32px; } h5 { font-size: 24px; line-height: 32px; } h6 { font-size: 20px; line-height: 28px; } p { padding: 5px 0 20px 0; font-size: 16px; color: var(--textColour); line-height: 26px; } a { text-decoration: none; color: var(--textColour); } .content-wrap p a:not([class]){text-decoration: underline;} a:focus-visible { background-color: #f9dc4a; color: #000; outline: 1px solid #000; } ul { list-style-position: outside; padding: 5px 0 20px 20px; font-size: 14px; color: var(--textColour); list-style-type: disc; line-height: 24px; } ul li { padding: 0 0 15px 0; line-height: 20px; } ol { list-style-position: outside; padding: 5px 0 20px 20px; font-size: 14px; color: var(--textColour); list-style-type: decimal; line-height: 24px; } ol li { padding: 0 0 5px 0; } hr { color: #D8D8D8; background: #D8D8D8; height: 1px; border: 0; margin-bottom: 20px; position: relative; } /* Button Classes */ .button-primary, .button-secondary, .button-tertiary{display: inline-block; padding: 22px 38px; margin: 5px 10px 5px 0; line-height: 22px; font-weight: 500; border-radius: 33px; text-transform: uppercase; font-size: 16px; transition: 0.2s ease-in all; text-align: center;} .button-primary { background: #fff; border: 1px solid var(--textColour); color: var(--textColour); text-decoration: none;} .button-primary:hover { background: #707171; border-color: #707171; color: #fff; } .button-secondary { background: var(--mainColour); border: 1px solid var(--mainColour); color: #fff; } .button-secondary:hover { background:#ABE1F4; border-color:#ABE1F4; color: #222529;} .button-tertiary { border:2px solid #FFFFFF; color: #fff; } .button-tertiary:hover { background: #fff; color:#222529; } .empty-loader:empty { display: flex; align-items: center; justify-content: center; padding: 5px; } .empty-loader:empty:after { content: ''; width: 20px; height: 20px; border: 2px solid #fff; border-color: var(--mainColour) transparent transparent; border-radius: 50%; animation: spin 1s infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ------------------------------------ */ /* ------------ SITE DESIGN ----------- */ /* ------------------------------------ */ /* ----- SITE HEADER ----- */ .admin_panel+.site-header { margin-top: 31px; } header.site-header { position: relative; z-index: 1000; } /*-- TOP STRAP --*/ .top-wrap { height: 45px; background: var(--topbarColour); } .top-wrap > div{display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 10px; box-sizing: border-box; border-bottom: 1px solid #F7F7F7;} .top-left a{color: #646669; font-weight: bold;} .top-right { display: flex; justify-content: flex-end; } .top-menu { height: 100%; } .top-menu ul { display: flex; height: 100%; align-items: center; gap:20px; list-style: none; padding: 0; margin: 0; } .top-menu ul li { list-style: none; height: 100%; display: flex; align-items: center; padding: 0;} .top-menu ul li a { color: #646669; font-size: 12px; text-transform: capitalize; font-weight: bold; text-decoration: none; } .top-social{display: flex; align-items: center; gap:20px; padding-left: 20px;; margin-left: 20px; border-left: 1px solid #CDEEFB;} .top-social a{height: 14px; width: 14px; transition: ease-in-out all .3s;} .top-social a.fb{background: url(../images/facebook.svg) center no-repeat;} .top-social a.ig{background: url(../images/instagram.svg) center no-repeat;} .top-social a:hover{transform: translateY(-5px);} /*-- HEADER WRAP --*/ .header-wrap { background: var(--topbarColour); height: 110px; } .header-wrap > div{ display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 10px; } .logo {height: 100%; display: flex; align-items: center;} .logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; } .site-search { display: flex; width: 450px; height: 48px; background: #fff; border-radius: 24px; background:#F7F7F7; margin-right:40px; } .site-search input { width: calc(100% - 60px); height: 100%; padding: 0 20px; box-sizing: border-box; background: none; border: 0; font-size: 14px; font-family: inherit; color: #222529;} .site-search input::placeholder { font-size: 14px; color: inherit; } .site-search .search-button { width: 60px; height: 100%; background: url(../images/search.svg) no-repeat center; } .header-right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; } .header-phone{display: flex; align-items: center; gap:10px;} .header-phone::before{content: ""; height: 31px; width: 31px; background: url(../images/phone.svg) center no-repeat;} .header-phone > div{display: flex; flex-direction: column; gap:5px;} .header-phone strong{color: #646669; font-size: 12px; text-transform: uppercase;} .header-phone span{font-weight: 900; color: #646669; font-size: 16px;} .my-account { display: flex; width: 34px; height: 34px; background: url(../images/user.svg) no-repeat center; position: relative;} .my-account span{height: 20px; width: 20px; background: url(../images/user_arrow.svg) center no-repeat; position: absolute; top: -5px; right: -5px;} .shopping-cart {} .small-cart{display: flex; align-items: center; gap:10px;} .small-cart > div.tablet{display: flex; flex-direction: column; gap:5px;} .small-cart > div.tablet strong{font-size: 14px; color: #202021; font-weight: bold;} .small-cart > div.tablet label{font-size: 14px; color: #202021;} .small-cart .small-cart-icon{height: 34px; width: 34px; background: url(../images/bag.svg) center no-repeat; position: relative;} .small-cart .small-cart-icon > span{height: 20px; width: 20px; border-radius: 100%; position: absolute; top: -5px; right: -5px; background: #646669; color: #fff; font-weight: bold; font-size: 10px; display: flex; align-items: center; justify-content: center; text-align: center;} /*-- MENU WRAP --*/ .menu-wrap { background: var(--topbarColour); position: relative; height: 60px; width: 100%;} .menu-wrap > div { display: flex; align-items: center; height: 100%; padding:0 10px; } .main-menu-wrap{height: 100%;} /* Main Menu */ .main-menu{list-style: none; margin: 0; padding: 0; display: flex; align-items: center; height:100%; width: 100%; justify-content: space-between;} .main-menu li{list-style: none; margin: 0; padding: 0; position: relative; height: 100%; display: flex; align-items: center;} .main-menu li a{font-size: 14px; line-height: 20px; color: #222529; transition: ease-in-out all .3s; position: relative; text-align: center; ext-transform: capitalize; font-weight: bold;} .main-menu > li > a{height: 100%; padding: 0 20px; display: flex; align-items: center;} .main-menu > li > a:hover, .main-menu > li.menu-open > a{background: #172B68; color: #fff;} .main-menu li ul{list-style: none; margin: 0; padding: 20px 0; position: absolute; left: 0; top: 100%; width: 260px; background:#F7F7F7; display: flex; flex-direction: column; gap:15px;} .main-menu li ul li{padding: 0 20px;} .main-menu li ul li a{} .main-menu li ul li a:hover{color: #222529; text-decoration: underline;} .main-menu li ul li ul{left: 100%; top: 0; background: #FFFFFF;} .main-menu li ul li.has-sub-items{position: relative;} .main-menu > li > ul > li.has-sub-items::after{content: ""; height: 7px; width: 7px; transform: rotate(45deg); border: solid #419CE5; border-width: 2px 2px 0 0; position: absolute; right: 10px; top: calc(50% - 5px); transition: ease-in-out all .3s; opacity: 0;} .main-menu > li > ul > li.has-sub-items:hover::after{opacity: 1;} /*Effect on sub menu*/ .main-menu li ul{visibility:hidden; opacity:0; transform: translateY(20px); transition: ease-in-out all .3s; z-index: -1; } .main-menu li.has-sub-items:hover > ul{visibility:visible; opacity:1; z-index: 1000; transform: translateY(0px); padding: 20px 0;} /*Overlay*/ .overlay { background: rgba(0, 0, 0, .5); position: fixed; top: 0; height: 100vh; width: 100%; left: 0; z-index: -1; visibility:hidden; opacity:0; transition: ease-in-out all .4s;} .overlay.hover { visibility:visible; opacity:1; z-index: 999;} /*-- FOOTER WRAP --*/ .footer-wrap { background-color: var(--footerColour); background-image: url(../images/footer_icon.svg); background-position: right bottom; padding: 100px 0 50px 0; background-repeat: no-repeat;} .footer-wrap > div{padding: 0 10px; display: flex; align-items: flex-start; justify-content: space-between;} .footer-left{width: 50%; display: flex; flex-direction: column; gap:30px;} .footer-left section{display: flex; align-items: flex-start;} .footer-left section > div{flex-grow: 1; display: flex; flex-direction: column; gap:30px;} .footer-left section > div > div{display: flex; flex-direction: column; gap:10px;} .footer-left label{text-transform: uppercase; color: #FFFFFF; font-size: 14px;} .footer-left p, .footer-left a{color: #fff; padding: 0; font-weight: bold; font-size: 15px; line-height: 30px;} .footer-right{width: 35%;} .footer-right nav{display: flex; flex-direction: column;} .footer-social{display: flex; gap:20px; align-items: center;} .footer-social a{height: 55px; width: 55px; transition: ease-in-out all .3s; background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0;} .footer-social a.fb{background-image: url(../images/facebook_round.svg);} .footer-social a.ig{background-image: url(../images/instagram_round.svg);} .footer-social a.tw{background-image: url(../images/twitter_round.svg);} .footer-social a.tt{background-image: url(../images/tiktok_round.svg);} .footer-social a:hover{transform: translateY(-5px);} .footer-right nav{display: flex; flex-direction: column; width: 100%;} .footer-right nav span{color:#FFFFFF; font-size:16px; font-weight:bold; border-bottom: 1px solid #FFFFFF66; line-height: 24px; padding:20px 0; position: relative; cursor: pointer;} .footer-right nav span::after{content: ""; height: 10px; width: 10px; border: solid #fff; border-width: 0 3px 3px 0; position: absolute; right: 10px; top: 20px; transform: rotate(45deg); transition: ease-in-out all .3s;} .footer-right nav > div{display: none;} .footer-menu { list-style: none; padding: 20px 0 20px 20px; margin: 0; display: flex; flex-direction: column; gap: 20px; } .footer-menu>li { padding: 0; margin: 0; } .footer-menu>li>a { color: #fff; text-transform: capitalize; font-size: 14px; text-decoration: none; } .footer-right nav.active span::after{transform: rotate(225deg); top: 28px;} /*-- BYLINE --*/ .byline-wrap { background: var(--bylineColour); padding: 80px 0;} .byline-wrap > div{padding: 0 10px; display: flex; justify-content: space-between; align-items: center;} .byline-left{display: flex; gap:70px;} .byline-left > div{display: flex; flex-direction: column; gap:10px;} .byline-left > div > label{color: #fff; font-size: 14px; text-transform: uppercase;} .byline-left > div > div{display: flex; align-items: center; gap:10px;} .byline-right a{color: #fff; font-size: 14px;} /*Back to top*/ .back_to_top{width: 100%; display: flex; justify-content: center; align-items: center; margin: 100px 0;} .back_to_top > a{color: var(--textColour); font-weight: bold; display: flex; flex-direction: column; align-items: center; gap:15px;} .back_to_top span{height: 48px; width: 48px; background: #fff; border-radius: 100%; position: relative;} .back_to_top span::before{content: ""; height: 8px; width: 8px; border: solid var(--textColour); border-width:2px 0 0 2px; transform:rotate(45deg); position: absolute; left: 20px; top:21px;} /* ------------------------------------ */ /* --------------- MODULES ------------ */ /* ------------------------------------ */ .youtube-iframe { width: 100%; aspect-ratio: 16/9; } /* ----- TEXT MODULE ----- */ .text-wrap { } .text-wrap.full-width-fix { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .text-wrap:not(.bg-on) { background: none !important; } .text-container { padding: 0 10px; box-sizing: border-box; } /* -- SPACING MODULE -- */ .spacing-module { display: flex; align-items: center; justify-content: center; background: transparent; position: relative; z-index: 1; transition: 0.2s ease-in-out all; } .spacing-module span { opacity: 0; text-align: center; font-size: 24px; font-weight: bold; transition: 0.2s ease-in-out all; } .spacing-module.admin-logged:hover { background: #efefef; } .spacing-module.admin-logged:hover span { opacity: 1; } /* ----- CONTACT FORM ----- */ form.contact-form { width: 100%; margin: 20px auto 20px auto; padding: 35px 20px; background-color: #fff; box-sizing: border-box; } .cf-title { display: flex; align-items: center; justify-content: flex-start; padding: 10px 0; } .cf-title span { font-size: 20px; line-height: 26px; color: var(--textColour); font-weight: 900; text-transform: capitalize; position: relative; } .cf-line { clear: both; line-height: 30px; color: #393838; font-size: 14px; line-height: 26px; margin-bottom: 10px;} .cf-line p { color: var(--textColour); font-size: 16px; line-height: 20px; margin: 0 0 5px; padding: 0;} .cf-label { float: left; width: 100%; font-size: 15px; line-height: 36px; color: var(--textColour); } .cf-label .cf-field { width: 100%; box-sizing: border-box; } :is(.cf-checkbox, .cf-radio) .cf-label { float: left; width: auto; font-size: 14px; padding: 5px 0; line-height: 24px; color: #696969; font-weight: normal; } :is(.cf-checkbox, .cf-radio) .cf-field { float: left; width: auto; padding: 5px; line-height: 24px; } :is(.cf-checkbox, .cf-radio) input { width: 15px; height: 15px; accent-color: #000; } .cf-button-row { display: flex; align-items: center; justify-content: flex-end; padding: 5px 0; } .cf-submit input[type=submit] { cursor: pointer; margin:0; } p.denotes { font-size: 11px; color: #696969; padding: 0; font-weight: normal; } /* ----- GALLERY ----- */ div.fullscreen-fade { opacity: 0; display: flex; justify-content: center; transition: opacity 0.3s ease-in-out 0s; position: relative; } div.fullscreen-fade::before { content: ""; position: absolute; width: 100%; height: 100%; } div.fullscreen-fade.full-width-fix { width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } div.fullscreen-fade:not(.full-width-fix) div.slide { background-size: contain; } div.fullscreen-fade div.slide { float: left; position: relative; display: flex; align-items: center; background-position: center top; background-size: cover; background-repeat: no-repeat; height: 100%; } div.fullscreen-fade.parallax-on div.slide { background-attachment: fixed; } div.fullscreen-fade div.slide .banner { margin: 0 auto; width: 1200px; } div.fullscreen-fade div.slide .frame { height: 100%; align-self: center; display: inline-block; padding: 16px 20px; } div.fullscreen-fade div.slide .frame.frame-on { background: #222529B3; } div.fullscreen-fade div.slide .frame.frame-on * { color: #fff; } div.fullscreen-fade div.slide .frame h1, div.fullscreen-fade div.slide .frame h2, div.fullscreen-fade div.slide .frame h3, div.fullscreen-fade div.slide .frame h4 { position: relative; } div.fullscreen-fade div.slide .frame p { padding: 15px 0; margin: 0; line-height: initial; } /* pagination */ div.fullscreen-fade .pagination { position: absolute; bottom: 30px; width: 100%; height: 30px; display: flex; align-items: center; justify-content: center; gap: 15px; z-index: 1; } div.fullscreen-fade .pagination a { height: 14px; width: 14px; box-sizing: border-box; transition: ease-in-out all .3s; background: #BFBFBF; border-radius: 50%;} div.fullscreen-fade .pagination a.selected { background: var(--textColour); height: 20px; width: 20px;} /* navigation */ div.fullscreen-fade .arrows { display: flex; justify-content: center; align-items: center; width: 74px; height: 74px; position: absolute; top: calc(50% - 37px); cursor: pointer; background: #fff; border-radius: 100%;} div.fullscreen-fade .arrows:after { content: ""; width: 10px; height: 10px; border: solid var(--textColour); transform: rotate(45deg); } div.fullscreen-fade .arrows.prev { left: 30px; } div.fullscreen-fade .arrows.next { right: 30px; } div.fullscreen-fade .arrows.prev:after { border-width: 0 0 3px 3px; margin-left: 5px; } div.fullscreen-fade .arrows.next:after { border-width: 3px 3px 0 0; margin-right: 5px; } .shop-button { display: block; padding: 15px 40px; background: #4476BA; border: 1px solid #4476BA; box-sizing: border-box; font-size: 16px; color: #fff; text-align: center; position: relative; cursor: pointer; transition: 0.2s ease-in all; } .shop-button:hover { background: #fff; color: #4476BA; } .shop-button.rounded { border-radius: 20px; } /* ---- Content Layout Module ---- */ .content-layout-module { } .content-layout-block { display: flex; flex-direction: row; align-items: center; background: #D2EEF9;} .content-layout-block .layout-image { width: 50%; flex: 0 0 auto; display: flex; align-items: center; } .content-layout-block .layout-image img{max-width: 100%; height: auto; width: auto;} .content-layout-block .layout-texts { width: 50%; display: flex; flex-direction: column; width: 50%; padding: 40px 0;} .content-layout-block .layout-inner { display: flex; flex-direction: column; gap: 15px; padding:0 80px; width: 800px; max-width: 100%;} .content-layout-block .layout-texts { position: relative; } .content-layout-block .layout-texts h2 { font-size: 41px; font-weight: 900; line-height: 46px; padding: 0; color: var(--textColour); } .content-layout-block .layout-texts h4 { font-size: 20px; line-height: 26px; text-transform: uppercase; color: #646669; padding: 0; } .content-layout-block .layout-texts p { color: var(--textColour); font-size: 16px; line-height: 28px; padding: 0; } /*Layout Side*/ .content-layout-module.layout-left .content-layout-block { flex-direction: row-reverse; background: #EFFAFE;} .content-layout-module.layout-left .content-layout-block .layout-texts { align-items: flex-end; } .content-layout-module.layout-right .content-layout-block .layout-image { justify-content: flex-end; } /*Layout Buttons*/ .content-layout-block .layout-buttons { width: 100%; display: flex; align-items: flex-start; gap: 20px; margin-top:20px; } .content-layout-block .layout-buttons a { margin: 0; } /* ----------------------- */ /* ----- SEARCH PAGE ----- */ /* ----------------------- */ .search-page.category-page .cat-hidden { display: none !important; } .search-page.product-page .prod-hidden { display: none !important; } .search-page { padding: 20px 10px; } /* search header */ .search-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; background: #fff; } .search-title { display: flex; flex-direction: column; gap: 10px; justify-content: center; } .search-title h1 { font-size: 24px; line-height: 30px; font-weight: bold; color: #000000; padding: 0; } .search-results-found { font-size: 16px; color: #707171; font-weight:bold; } .search-order { display: flex; align-items: center; gap: 10px; } .sort-search { width: 270px; color: #707171; font-size: 14px; padding: 0 10px; text-indent: 10px;} .cat-footer:not(.hidden){margin-top:20px;} /* -- PAGER -- */ .search-pager { display: flex; align-items: center; width: auto; height: 95px; justify-content: center; gap: 10px; position: relative; background: #fff; } .pager-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .pager-link a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 18px; color: var(--textColour); text-decoration: underline; font-weight: 500;} .pager-link.hidden { display: none !important; } .pager-current-page a { text-decoration:none; } .pager-prev-button, .pager-next-button { margin-right: auto; height: 100%; width: 90px; display:flex; align-items:center; justify-content:center; } .pager-next-button { margin-right: initial; margin-left: auto; } .pager-next-button a {height: 48px; width: 48px; border-radius: 100%; background:#59C6F1; position:relative; } .pager-prev-button a { height: 48px; width: 48px; border-radius: 100%; background:#F9F9F9; position: relative; } .pager-next-button a::after{content: ""; height: 8px; width: 8px; border: solid #fff; border-width: 2px 2px 0 0; transform: rotate(45deg); position: absolute; top: 20px; right: 20px;} .pager-prev-button a::after{content: ""; height: 8px; width: 8px; border: solid #222529; border-width: 0 0 2px 2px; transform: rotate(45deg); position: absolute; top: 20px; left: 20px;} .pager-next-button.disabled a, .pager-prev-button.disabled a { opacity: .5; } /* Search Results */ .search-results-wrap { display: flex; align-items: flex-start; gap: 20px; } .search-results { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 20px; row-gap: 40px; padding: 40px 0; flex: 1; max-width:100%; } /* -- Product Block -- */ .product-block { width: calc((100% - 60px) / 4); } .product-block .product-box{padding: 16px; background: #fff; border: 3px solid #fff; transition:ease-in-out all .3s;} .product-block .product-image { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: var(--productAspect); position: relative; overflow: hidden; } .product-block .product-image a { display: flex; align-items: center; justify-content: center; height: 100%; overflow: hidden; text-decoration: none; } .product-block .product-image img { width: auto; height: 100% !important; max-width: none !important; } .product-block .product-brand{font-size: 12px; color: #707171; text-transform: uppercase; height: 20px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 20px; overflow: hidden; margin-bottom: 5px;} .product-block .product-title { display: flex; align-items: flex-start; justify-content: flex-start; height: 40px; font-size: 14px; line-height: 20px; overflow: hidden; font-weight: 500;} .product-block .product-title a { color: var(--textColour); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .product-block .product-info {display: flex; flex-direction: column; gap: 10px; padding: 10px 0 0 0;} .product-block .product-stickers{display: flex; align-items: center; justify-content: flex-end; height:30px;} .product-block .product-sale-sticker{flex-grow: 1; font-size: 12px; color: #DC2C2C; font-weight: bold; line-height: 18px;} .product-block .product-no-stock{color: #646669; font-size: 12px; font-weight: bold; line-height: 30px; border: 1px solid #f5f5f5; flex-shrink: 0; padding: 0 10px} .product-block .product-price { display: flex; align-items: center; gap: 10px; padding: 0; font-weight: 500; color: var(--textColour); height: 20px;} .product-block .product-price .main-price { font-size: 14px; line-height: 20px; order: 1; } .product-block .product-price .was-price { font-size: 14px; line-height: 20px; order:2;} .product-block .product-price .was-price span { text-decoration: line-through; } .product-block .product-price .was-price:not(.hidden)+.main-price { color:#DC2C2C; } .product-block .product-buttons { display: flex; align-items: center; justify-content: flex-end; height: 35px;} .product-block .product-buttons a {line-height: 35px; border: 1px solid var(--textColour); color: var(--textColour); padding: 0 20px; border-radius: 40px; opacity: 0; transition: ease-in-out all .3s; text-transform: uppercase; font-weight: 500; font-size: 12px;} .product-block .product-box:hover{border-color: #59C6F1;} .product-block .product-box:hover .product-buttons a{opacity: 1;} .product-block.no-stock .product-image img {opacity: .5;} /*Product Ratings*/ .product-buttons .product-energy{flex: 1;} .product-buttons .product-energy > div{height: 35px; width: 62px;} /* -- Category Block -- */ .category-block { width: calc((100% - 60px) / 4); cursor: pointer;} .category-block .cat-image { width: 100%; aspect-ratio: var(--categoryAspect); overflow: hidden; display: flex; border-radius: 100%; align-items: center; justify-content: center; background: #fff; padding: 0px; border:3px solid #fff; transition: ease-in-out all .3s;} .category-block .cat-image img { height: auto; width: auto; max-width: 100%; } .category-block .cat-title { text-align: center; height: 50px; margin-top: 20px; width: 100%; overflow: hidden; font-size: 18px; line-height: 24px; font-weight: 900; color: var(--textColour); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .category-block:hover .cat-image{border-color: #59C6F1;} /* ----------------------- */ /* ----- DETAILS PAGE ----- */ /* ----------------------- */ .details-page { padding: 0 10px; display: flex; flex-direction: column; } .details-header { display: flex; align-items: center; height: 60px; gap: 10px; } .details-header>a { text-decoration:underline; color: var(--textColour);} .details-page-container { display: flex; align-items: flex-start; } .details-page-left { width: 50%; padding-right: 10px; } /* product thumbnails */ .small-images-gal-wrap { margin: 10px 0; } .small-image { height: 80px; } .small-image a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; overflow: hidden; } .small-image a img { max-height: 100%; height: 100%; width: auto; max-width: none !important; } /* Product Images with carousel */ .product-image-gal-wrap { position: relative; min-height: 200px; } .product-image-gal-wrap .product-sale-sticker { background: var(--secondaryColour); color: #fff; font-size: 18px; font-weight: 600; position: absolute; top: 0; left: 0; line-height: 44px; padding: 0 10px; z-index: 100; } .product-image-gal .product-image a { width: 100%; aspect-ratio: var(--productAspect); overflow: hidden; display: flex; align-items: center; justify-content: center; } .product-image-gal .product-image a img { width: auto; height: 100% !important; max-width: none !important; } /*Product Images*/ .product-images { height: 580px; box-sizing: border-box; margin-bottom: 15px; position: relative; display: flex; align-items: center; } .product-images-items { height: 100%; } .product-images-items .swiper-wrapper { align-items: center; width:100%; } .product-images-item a { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } .product-images-item img { max-width: 100%; max-height: 100%;} .product-images .product-stickers{position: absolute; left: 10px; top: 10px;} .product-image-prev, .product-image-next { height: 48px; width: 48px; background: #fff; position: absolute; top: calc(50% - 24px); z-index: 10; border-radius: 100%;} .product-image-prev { left: -10px;} .product-image-prev::after { content: ""; height: 8px; width: 8px; border: solid var(--textColour); border-width: 0 0 3px 3px; transform: rotate(45deg); position: absolute; right: 16px; top: calc(50% - 4px); } .product-image-next { right: -10px;} .product-image-next::after { content: ""; height: 8px; width: 8px; border: solid var(--textColour); border-width: 3px 3px 0 0; transform: rotate(45deg); position: absolute; left: 16px; top: calc(50% - 4px);} .product-image-nav-disabled::after { border-color: #e1e1e1; } .product-images .product-stickers{position: absolute; z-index: 10; top: 20px; left: 20px;} .product-images .product-stickers > span{line-height: 56px; padding: 0 20px; background: #F7F7F7; color: #DC2C2C; font-weight: bold; font-size: 24px; display: block;} /*Thumbnail images*/ .product-thumbnails {} .product-thumbnails .swiper-wrapper{flex-wrap: wrap; gap:10px;} .product-thumbnails .pt-item.swiper-slide {display: flex; align-items:center; justify-content:center; width:auto; height:105px; border:2px solid transparent; transition: ease-in-out all .3s; cursor: pointer;} .product-thumbnails .pt-item.swiper-slide.swiper-slide-thumb-active{border-color: #00ACE9;} .pt-item img{max-width: 100%; max-height: 100%; width: auto; height: auto;} .details-page-right { width: 50%; padding-left: 10px; box-sizing: border-box; } /* product details */ .product-details-wrap{display: flex; flex-direction: column; gap:10px; align-items: flex-start;} .product-details-wrap .product-title {} .product-details-wrap .product-title h1 { font-weight: 900; color: var(--textColour); font-size: 36px; line-height: 46px; padding:0; } .product-details-wrap .product-sale-title { font-size: 20px; color: #DC2C2C; font-weight:bold; line-height:28px; } .product-details-wrap .product-price { gap: 20px; padding: 10px 0; font-size: 28px; display:flex; gap:20px;} .product-details-wrap .product-price .main-price{color: #000000; order: 1;} .product-details-wrap .product-price .was-price{order: 2;} .product-details-wrap .product-price .was-price span { text-decoration: line-through; font-weight: 500; color: var(--textColour);} .product-details-wrap .product-price .was-price:not(.hidden)+.main-price{color: #DC2C2C;} .product-details-wrap .product-short-description { font-size: 16px; color: var(--textColour); line-height: 24px; } .product-details-wrap .product-short-description:empty { display: none; } .product-details-wrap .product-brand{color: #707171; text-transform: uppercase; font-size: 18px; line-height: 24px;} .product-details-wrap .product-brand:empty{display: none;} /*Product Ratings*/ .product-energy:not(.hidden){display: flex; flex-direction: column; gap:10px;} .product-energy div{height: 50px; width: 88px; background-size: contain; background-position: center; background-repeat: no-repeat;} .product-energy.rating-A div{background-image: url(../images/rating-A.svg);} .product-energy.rating-B div{background-image: url(../images/rating-B.svg);} .product-energy.rating-C div{background-image: url(../images/rating-C.svg);} .product-energy.rating-D div{background-image: url(../images/rating-D.svg);} .product-energy.rating-E div{background-image: url(../images/rating-E.svg);} .product-energy.rating-F div{background-image: url(../images/rating-F.svg);} .product-energy.rating-G div{background-image: url(../images/rating-G.svg);} .product-energy > a{text-decoration: underline; font-size: 14px;} /* variations */ .variations { width: 100%; } .variation-wrap { padding: 10px 0; width: 100% } .variation-label { font-size: 16px; font-weight: bold; color: var(--textColour); padding: 0 0 10px 0; } .variation-wrap select { width: 100%; height: 50px; text-indent: 10px; padding: 0 10px; background-color: #fff; font-size: 16px; cursor: pointer; } /* quantity */ .quantity-wrap { width: 126px; display: flex; flex-direction: column; gap:5px;} .quantity-wrap .quantity-label { font-size: 17px; color: var(--textColour); padding: 5px 0; font-weight: bold;} .quantity-wrap .quantity { display: flex; align-items: center; height: 50px; width: 100%; box-sizing: border-box; background: #fff; border-radius: 25px;} .quantity-wrap .quantity a { display: flex; align-items: center; justify-content: center; width: 40px; height: 100%; font-size: 25px; color: #000; font-weight: bold; } .quantity-wrap .quantity input { width: 46px; height: 100%; background: none; box-sizing: border-box; font-size: 16px; color: var(--textColour); text-align: center; padding:0; border:0; } /* add to cart */ .add-to-cart-row { display: flex; align-items: flex-end; gap: 20px; padding: 10px 0; width: 100%;} .add-to-cart { flex: 1; text-transform: uppercase; display: flex; align-items: center; justify-content: center; padding: 0 10px; margin: 0; height: 50px;} /* Added to cart */ .added-to-cart-inner{padding: 0 30px;} .added-to-cart-header { display: flex; align-items: center; justify-content: center; padding: 20px 0; gap:10px;} .added-to-cart-header::before{content: ""; height: 27px; width: 27px; background: url(../images/icon-added-cart.svg) center no-repeat; flex-shrink: 0;} .added-to-cart-header span { font-size: 28px; line-height: 38px; text-align: center; color: #000; font-weight: 600; } .added-to-cart-buttons { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 20px 0; gap: 20px; row-gap:10px; } .added-to-cart-buttons .continue-shopping{} .added-to-cart-buttons .button-secondary{margin: 0;} .out-of-stock-wrap { height: 50px; background: #646669; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 18px; text-transform:uppercase; color: #fff; width: 100%; border-radius: 40px; margin: 10px 0;} /* Delivery */ .product-meta { display: flex; border-radius: 25px; height: 50px; align-items: center; justify-content: flex-start; padding: 10px 0; gap: 30px; border: 2px solid #FFFFFF; padding: 10px 20px;} .product-meta a { font-size: 14px; text-decoration: underline; display: flex; align-items: center; gap:10px; } .product-meta a:before { content: ''; width: 20px; height: 20px; background: url(../images/check.svg) no-repeat center; background-size: contain; } /* Product Tabs */ .product-tabs{padding: 40px 0; background: #fff; margin-top: 50px; width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;} .product-tabs > div{padding: 0 10px; } .product-tabs-header{display: flex; align-items: center; justify-content: center; gap:10px;} .product-tabs-header > a{color: #222529; font-size: 16px; text-transform: uppercase; padding: 22px 38px; border-radius: 39px; background: var(--background); transition: ease-in-out all .3s; transition: ease-in-out all .3s;} .product-tabs-header > a.active{background: var(--mainColour); color: #fff;} .product-tabs-header > a:hover{background: var(--mainColour); color: #fff;} .product-tab-content{padding: 40px 0; min-height: 250px;} .download-items{display: flex; flex-direction: column; gap:10px; align-items: center; justify-content: center;} .download-item > a{display: flex; align-items: center; gap:10px; padding: 22px 38px; font-size: 16px; font-weight: 500; border-radius: 39px; border:1px solid #222529; text-transform: uppercase;} .download-item > a::before{content: ""; height: 22px; width: 34px; background: url(../images/download.svg) center no-repeat;} /* Associations */ .associations_wrap { padding: 80px 0; position: relative; background:#EFFAFE; } .associations_wrap>div{ padding: 0 10px;} .associations_wrap .associations_headings{display: flex; flex-direction: column; gap:10px; justify-content: center; align-items: center;} .associations_wrap h6 { color: #707171; font-size: 20px; line-height: 26px; padding:0; } .associations_wrap h2 { color: #222529; font-size: 32px; line-height: 38px; padding: 0; margin: 0 0 40px 0; font-weight: 900; } .associations_wrap .associations_produtcs { display: flex; width: 100%; } .associations_products_container { position: relative; } .assoc-nav-prev { height: 74px; width: 74px; position: absolute; left: -90px; top: calc(50% - 37px); z-index: 20; background:#fff; border-radius:100%; } .assoc-nav-prev::after { content: ""; height: 10px; width: 10px; border: solid var(--textColour); border-width: 0 0 3px 3px; transform: rotate(45deg); position: absolute; right: 30px; top: 30px; } .assoc-nav-next { height: 74px; width: 74px; position: absolute; right: -90px; top: calc(50% - 37px); z-index: 20; background:#fff; border-radius:100%; } .assoc-nav-next::after { content: ""; height: 10px; width: 10px; border: solid #000; border-width: 3px 3px 0 0; transform: rotate(45deg); position: absolute; left: 30px; top: 30px; transition: ease-in-out all .3s; } .assoc-nav-disabled::after { opacity: .5; } .assoc-pagination{display: flex; align-items: center; justify-content: center; gap:20px; height: 30px; width: 100%; margin-top: 30px;} .assoc-pagination > span{ border-radius: 100%; background: #BFBFBF; height: 14px; width: 14px; margin: 0 !important; opacity: 1; transition: ease-in-out all .3s;} .assoc-pagination > span.active{height: 20px; width: 20px; background: #222529;} /* ------------------- */ /* ----- MODULES ----- */ /* ------------------- */ /* -- Product Module -- */ .product-module { padding: 80px 0; box-sizing: border-box; width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .product-module.bg-on { background: #EFFAFE; } .pm-container {padding: 0 10px;} /* titles */ .pm-title { display: flex; justify-content: center; align-items: center; } .pm-title span { font-size: 32px; line-height: 40px; color: var(--textColour); font-weight: 900; text-align: center; } .pm-subtitle { display: flex; align-items: center; justify-content: center; margin-bottom: 10px;} .pm-subtitle span { font-size: 20px; line-height: 26px; color: #707171; text-align: center; } /* gallery */ .pm-gal-wrap { position: relative; padding: 40px 0 0 0; display:flex; flex-direction:column; gap:40px; } .pm-gal{width: 100%;} /* List View */ .product-module.list .pm-gal-inner { display: flex; flex-wrap: wrap; gap: 20px; } .product-module.list .pm-gal-inner .product-block { width: calc((100% - 60px) / 4);} .product-module.list :is(.pm-gal-pagination, .pm-gal-nav){display: none !important;} /* Carousel View */ /* navigation */ .pm-gal-nav {position: absolute; height:74px; width:74px; background:#FFFFFF; border-radius: 100%; top: calc(50% - 37px); transition: ease-in-out all .3s; cursor: pointer;} .pm-gal-prev{left: -90px;} .pm-gal-prev::before{content: ""; height: 12px; width: 12px; border: solid var(--textColour); border-width: 0 0 3px 3px; transform:rotate(45deg) translateY(-50%); position:absolute; left: 26px; top: 50%; } .pm-gal-next{right: -90px;} .pm-gal-next::before{content: ""; height: 12px; width: 12px; border: solid var(--textColour); border-width: 3px 3px 0 0; transform:rotate(45deg) translateY(-50%); position:absolute; right: 38px; top: 50%; } .pm_nav_disabled{opacity: 0.5;} /* pagination */ .pm-gal-pagination{display: flex; align-items: center; justify-content: center; height: 30px; gap:15px;} .pm-gal-pagination span{transition: ease-in-out all .3s; opacity: 1; border-radius: 100%; background: #BFBFBF; height: 14px; width: 14px; margin: 0 !important;} .pm-gal-pagination span.active{background: #222529; height: 20px; width:20px; } /* -- Category Module -- */ .category-module { padding: 80px 0; box-sizing: border-box; width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .category-module.bg-on { background: #EFFAFE; } .cm-container {padding: 0 10px;} /* titles */ .cm-title { display: flex; justify-content: center; align-items: center; } .cm-title span { font-size: 32px; line-height: 40px; color: var(--textColour); font-weight: 900; text-align: center; } .cm-subtitle { display: flex; align-items: center; justify-content: center; margin-bottom: 10px;} .cm-subtitle span { font-size: 20px; line-height: 26px; color: #707171; text-align: center; } /* gallery */ .cm-gal-wrap { position: relative; padding: 40px 0 0 0; display:flex; flex-direction:column; gap:40px; } .cm-gal{width: 100%;} /* List View */ .category-module.list .cm-gal-inner { display: flex; flex-wrap: wrap; gap: 70px; row-gap:40px; } .category-module.list .cm-gal-inner .category-block { width: calc((100% - 210px) / 4);} .category-module.list :is(.cm-gal-pagination, .cm-gal-nav){display: none !important;} /* Carousel View */ /* navigation */ .cm-gal-nav {position: absolute; height:74px; width:74px; background:#FFFFFF; border-radius: 100%; top: calc(50% - 37px); transition: ease-in-out all .3s; cursor: pointer;} .cm-gal-prev{left: -90px;} .cm-gal-prev::before{content: ""; height: 12px; width: 12px; border: solid var(--textColour); border-width: 0 0 3px 3px; transform:rotate(45deg) translateY(-50%); position:absolute; left: 26px; top: 50%; } .cm-gal-next{right: -90px;} .cm-gal-next::before{content: ""; height: 12px; width: 12px; border: solid var(--textColour); border-width: 3px 3px 0 0; transform:rotate(45deg) translateY(-50%); position:absolute; right: 38px; top: 50%; } .cm_nav_disabled{opacity: 0.5;} /* pagination */ .cm-gal-pagination{display: flex; align-items: center; justify-content: center; height: 30px; gap:15px;} .cm-gal-pagination span{transition: ease-in-out all .3s; opacity: 1; border-radius: 100%; background: #BFBFBF; height: 14px; width: 14px; margin: 0 !important;} .cm-gal-pagination span.active{background: #222529; height: 20px; width:20px; } /* ---------------------- */ /* ------ CHECKOUT ------ */ /* ---------------------- */ /*----- LARGE CART -----*/ .shopping-checkout { flex-direction: column; } .cart-title { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 0; } .cart-title span { font-size: 18px; color: #393A3D; font-weight: bold; text-transform: capitalize; } .cart-product { display: flex; align-items: center; justify-content: space-between; background: #F9F9F9; box-sizing: border-box; margin: 10px 0; padding: 40px 20px; gap: 4px; } .cart-product-left { display: flex; align-items: center; justify-content: flex-start; height: 100%; } .cart-product-image { box-sizing: border-box; width: 60px; } .cart-product-image img { max-width: 50px; max-height: 50px; width: auto; height: auto; } .cart-product-details { box-sizing: border-box; height: 100%; } .cart-product-title span { font-size: 14px; line-height: 20px; color: #202020; } .cart-product-variations span { font-size: 10px; line-height: 16px; color: #393A3D; } .cart-product-sku span { font-size: 12px; line-height: 14px; color: #202020; } .cart-product-right { display: flex; align-items: flex-start; justify-content: space-between; } .cart-product-quantity-wrap { box-sizing: border-box; } .cart-product-quantity { display: flex; align-items: center; justify-content: center; width: 110px; height: 46px; background: #fff; border-radius: 25px;} .cart-product-quantity a { display: flex; align-items: center; justify-content: center; width: 50%; height: 100%; font-size: 20px; font-weight: bold; color: var(--textColour); } .cart-product-quantity input { height: 100%; text-align: center; background: none; padding: 0; border: 0; } .cart-product-update { padding-top: 5px; } .cart-product-update a { display: flex; align-items: center; justify-content: center; gap: 5px; } .cart-product-update a { font-size: 12px; color: #222529; text-decoration: underline; } .cart-product-price { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 100%; width: 110px; } .cart-product-price span { font-size: 16px; color: #000; line-height: 24px; display: flex; flex-direction: column; gap:3px;} .cart-product-price span span{font-size: 12px;} .cart-product-remove { display: flex; align-items: center; justify-content: center; width: 35px; height: 25px; } .cart-product-remove a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: url(../images/icon-delete.svg) no-repeat center; background-size: 15px; } .cart-lines { padding: 20px 0; } .cart-line { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #F2ECEC; } .cart-line.total { border: 0; } .cart-line>div { font-size: 18px; color: #3B3B3D;} .cart-line.discount-line>div { color: #202020; } .cart-line.total>div { font-weight: bold; } /*----- CHECKOUT -----*/ .site-body[data-page=checkout] .site-header, .site-body[data-page=checkout] .site-footer { display: none; } .checkout-page { display: flex; min-height: 1000px; } .checkout-left { padding: 40px 20px 200px 20px; padding-left: calc((100vw - 1200px) / 2); width: 50%; box-sizing: border-box; background: var(--background); } .checkout-right { padding: 130px 20px 200px 20px; padding-right: calc((100vw - 1200px) / 2); width: 50%; box-sizing: border-box; background: #fff; } .back-to-shopping-wrap { padding: 10px 0 20px; } .back-to-shopping-wrap a { font-size: 12px; color: #575757; text-decoration: underline; } .checkout-logo { padding: 20px 0; } .checkout-logo img { max-width: 225px; } .checkout-button { display: flex; align-items: center; justify-content: center; gap: 5px; height: 35px; width: 265px; background: #fff; border: 1px solid #74AF43; border-radius: 3px; } .checkout-button span { font-size: 12px; color: #393A3D; } .checkout-button.tick::before { content: ""; display: block; width: 15px; height: 15px; background: url(../images/tick-green.svg) no-repeat center; background-size: contain; } .checkout-logger { padding: 10px 0; } .checkout-logger-title {padding: 0 0 10px 0;} .checkout-logger-title span { font-size: 16px; line-height: 20px; color: var(--textColour); } .checkout-logger-title span a { color: var(--textColour); text-decoration: underline; font-weight: normal; } /* logger popup */ .login-popup { } .login-popup-title { padding: 10px 0; } .login-popup-title span { font-size: 18px; color: #3B3B3D; font-weight: 600; } .login-popup .login-form { } .login-popup .login-form-field { padding: 10px 0; } .login-popup .login-form-label { font-size: 14px; color: #3B3B3D; font-weight: 600; padding: 5px 0; } .login-popup .login-form-input { width: 60%; } .login-popup .login-form-input input { width: 100%; height: 35px; border: 1px solid #D8E1EB; padding: 0 10px; box-sizing: border-box; } .checkout-section-title { display: flex; align-items: center; justify-content: flex-start; padding: 10px 0; } .checkout-section-title span, .checkout-section-title h1 { font-size: 36px; padding: 0; line-height: 48px; color: var(--textColour); font-weight: bold; } .checkout-card { background: #fff; width: 100%; margin: 10px 0; padding: 20px; box-sizing: border-box; } .checkout-card-header { } .checkout-card-title { display: flex; align-items: center; gap: 10px; height: 60px; } .checkout-card-title>span { font-size: 18px; line-height: 28px; color: var(--textColour); font-weight: bold; display: flex; align-items: center; width: 100%; } .checkout-card-title>span>span { margin-left: auto; display: flex; align-items: center; font-weight: normal; } .checkout-card[data-card=billing] .checkout-card-title{display: flex; flex-direction: column; gap:25px; align-items: flex-start; height: initial; margin-bottom: 20px;} .checkout-card[data-card=billing] .checkout-card-title label{font-size: 16px; font-weight: bold;} .checkout-card[data-card=billing] .checkout-card-title span{font-size: 15px; font-weight: 400; gap:10px;} .checkout-card-inner { padding: 10px 0; box-sizing: border-box; } .checkout-card-inner-title { font-size: 14px; line-height: 24px; } .checkout-card-subtitle span { font-size: 16px; color: #3B3B3D; } .checkout-card-field { padding: 10px 0; } .checkout-card-input { display: flex; align-items: center; justify-content: flex-start; gap: 10px; } .checkout-card-input span { font-size: 16px; line-height: 18px; color: #3B3B3D; } .apply-promo{width: 100%;} .checkout-card-input input[name=promocode]{color: #000000; font-size: 14px;} .checkout-card-input input[type=checkbox] , .checkout-card[data-card=billing] input { width: 15px; height: 15px; margin: 0; padding: 0; border-color: #000; border-radius: 2px; accent-color: #000; } .checkout-card-input.checkbox span { font-size: 14px; color: #393A3D; } .checkout-card[data-card=delivery] .checkout-card-inner{display: flex; flex-direction: column; gap:30px;} .delivery-select-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .delivery-select-wrap > div{display: flex; gap:10px; flex-wrap: wrap; align-items: center; width: 100%;} .delivery-select-wrap > div > p{width: 100%; padding: 0;} .delivery_radio::before{content: ""; height: 22px; width: 22px; border-radius: 100%; border: 1px solid var(--textColour);} .delivery_radio::after{content: ""; height: 16px; width: 16px; position: absolute; left: 4px; top: 4px; background: var(--textColour); border-radius: 100%; transition: ease-in-out all .3s; opacity: 0;} .delivery_radio.active::after{opacity: 1;} .delivery_radio {font-size: 20px; line-height: 26px; font-weight: bold; display: flex; gap:20px; position: relative; display: flex; gap:10px;} .delivery_radio span{font-size: 16px;} .delivery-selector { width: 60%; } .delivery-price { } .delivery-price span { font-size: 16px; font-weight: bold; color: #000; } .free-delivery-wrap { padding: 10px 0; } .checkout-card.expandable .checkout-card-header { position: relative; cursor: pointer; } .checkout-card.expandable:not(.noarrow) .checkout-card-header::after { content: ""; display: block; width: 8px; height: 8px; border: solid #393A3D; border-width: 0 2px 2px 0; transform: scale(1, 1) rotate(45deg); position: absolute; right: 15px; top: calc(50% - 6px); transition: 0.2s ease-in-out all; } .checkout-card.expandable .checkout-card-header.active::after { transform: scale(-1, -1) rotate(45deg); } .checkout-card.expandable .checkout-card-content { display: none; } .checkout-card[data-card=promo] .checkout-card-content { padding-top: 10px; position: relative; } .checkout-card[data-card=promo] .checkout-card-subtitle span { font-size: 16px; } .checkout-card[data-card=details] .checkout-card-title span { font-size: 24px; } .checkout-card[data-card=details] .checkout-card-subtitle { padding: 10px 0; } .checkout-card[data-card=details] .checkout-card-subtitle span { font-size: 16px; font-weight: bold; } .checkout-form { padding: 10px 0; } .checkout-form-title { display: flex; align-items: center; justify-content: flex-start; padding: 10px 0; } .checkout-form-title span { font-size: 14px; color: #393A3D; font-weight: bold; } .checkout-form-field { padding: 10px 0; position: relative; } .checkout-form-label { font-size: 16px; color: #3B3B3D; padding: 5px 0; } .checkout-form-input { margin: 0 0 15px 0; display: flex; flex-direction: column; gap:10px;} .checkout-form-input label{font-size: 16px;} .checkout-form[data-form=billing] { display: none; } .checkout-card[data-card=tnc] { padding: 0 20px; } .checkout-card[data-card=tnc] .checkout-card-input span a { color: #4476BA; text-decoration: underline; } .checkout-card[data-card=paymethods] { padding: 0px 20px 20px; } .checkout-card[data-card=paymethods] .checkout-card-subtitle { padding: 10px 0; } .checkout-card[data-card=paymethods] .checkout-card-subtitle span { font-size: 16px; font-weight: bold; } .payment-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; } .payment-option { border: 1px solid #D8E1EB; padding: 10px; background: #fff; width: 100%; box-sizing: border-box; cursor: pointer; } .payopt-row { display: flex; align-items: center; gap: 10px; } .payopt-row.payopt-image { padding: 10px 0 0; } .payopt-title { font-size: 15px; font-weight: bold; line-height: 24px; } .payopt-radio { display: flex; flex-grow: 0; flex-shrink: 0; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #000; border-radius: 50%; padding: 3px; cursor: pointer; } .payment-option.payment-option-selected .payopt-radio::after { content: ""; width: 100%; height: 100%; display: block; background: #000; border-radius: inherit; } .payment-option img { max-width: 80%; max-height: 35px; margin-left: 30px; } .continue-button { width: 100%; } /*Payment Page*/ .payment-header { padding: 0 10px; margin: 0 0 25px; box-sizing: border-box; display: flex; flex-direction: column; } .payment-header>div { display: flex; flex-wrap: wrap; } .payment-header h1 { color: #000000; font-weight: bold; font-size: 30px; margin: 0 0 15px; padding: 0; } .payment-header>div>div { width: 30%; font-size: 12px; color: #000; line-height: 24px; } .payment-header>div>div:nth-child(3), .payment-header>div>div:nth-child(6) { width: 50%; } .payment-header>div>div:first-child, .payment-header>div>div:nth-child(4) { width: 20%; } .payment-content { padding: 0 10px; margin: 0 0 20px; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; } .payment-content h3 { color: #000; font-weight: bold; font-size: 18px; margin: 0 0 10px; padding: 0; position: relative; } .payment-content .payment-order-summary { width: calc(33% - 10px); padding: 10px; box-sizing: border-box; background: #f9f9f9; display: flex; flex-direction: column; } .payment-content .payment-delivery { width: calc(33% - 10px); padding: 10px; box-sizing: border-box; font-size: 12px; background: #f9f9f9; } .payment-content .payment-delivery p { font-size: 12px; color: #000; padding: 0 0 15px; line-height: 20px; } .payment-content .payment-order-summary span { font-weight: bold; font-size: 12px; line-height: 28px; } .payment-content .payment-order-summary .payment-cart-products>div { border-bottom: 1px solid #F2EFEF; display: flex; align-items: center; justify-content: space-between; } .payment-content .payment-order-summary .payment-cart-products>div>div { line-height: 20px; padding: 5px 0; font-size: 12px; color: #000; } .payment-content .payment-cart-calculations { border-bottom: 1px solid #F2EFEF; padding: 5px 0; } .payment-content .payment-cart-calculations>div { padding: 5px 0; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #000; line-height: 20px; } .payment-content .payment-total { display: flex; align-items: center; justify-content: space-between; border: 0; } .payment-content .payment-total>div { padding: 5px 0; font-size: 12px; color: #000; line-height: 20px; font-weight: bold; } .payment-pay { padding: 0 10px; box-sizing: border-box; } .payment-pay h1 { color: #000000; font-weight: bold; font-size: 30px; margin: 0; padding: 0; } .payment-pay label { font-size: 16px; color: #000000; font-weight: normal; } .payment-pay .payment-button-container { display: flex; justify-content: space-between; align-items: center; } .payment-pay .payment-button-container p { line-height: 24px; color: #000000; font-size: 16px; padding: 0; } .payment-pay .payment-button-container img { margin: 10px 0 0; } .payment-pay .payment-button { cursor: pointer; line-height: 40px; padding: 0 20px; } .payment-pay .payment-fields { margin-bottom: 25px; } .payment-footer { display: flex; align-items: center; justify-content: center; padding: 20px; margin: 20px 0 30px; box-sizing: border-box; background: #f9f9f9; } .payment-footer p { font-size: 16px; color: #000; line-height: 24px; text-align: center; padding: 0; } .group-area, .icon-group-area { border: 1px solid #aaa; margin: 5px 0; padding: 2px; } /* ------------------------ */ /* ------ MEMBERSHIP ------ */ /* ------------------------ */ /* ----- SIGNUP PAGE ----- */ .signup-page { padding: 50px 0 0; display: flex; align-items: flex-start; gap: 20px; } .signup-header { background: var(--mainColour); height: 140px; color: #fff; font-size: 32px; font-weight: 600; } .signup-header .container_16 { height: 100%; display: flex; align-items: center; } .signup-tab-headers { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; } .signup-tab-header { display: flex; align-items: center; justify-content: center; height: 55px; padding: 0 30px; background: var(--background); border: solid var(--border); border-width: 1px 1px 0; position: relative; z-index: 0; text-align: center; cursor: pointer; font-weight: 600; color: var(--mainColour); } .signup-tab-header.active { background: #fff; color: var(--mainColour); z-index: 2; } .signup-tab-header.active:after { content: ''; width: 20px; height: 2px; background: var(--mainColour); bottom: 0; left: calc(50% - 15px); position: absolute; } .signup-tab-content { border: 1px solid var(--border); background: #fff; margin-top: -1px; z-index: 1; position: relative; } .signup-tab { display: none; padding: 20px; } .signup-tab.active { display: block; position: relative; z-index: 1; } .signup-tab-left { flex: 1; box-sizing: border-box; } .signup-tab-right { width: 350px; flex: 0 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; } .signup-right-header { margin-top: 50px; font-size: 16px; font-weight: 600; line-height: 26px; } .signup-right-bullets { display: flex; flex-direction: column; gap: 10px; } .signup-right-bullets>div { display: flex; align-items: center; gap: 10px; font-size: 18px; height: 40px; } .signup-right-bullets>div:before { content: ''; width: 15px; height: 15px; background: url(../images/tick.svg) no-repeat center; } .signup-tab-text { color: var(--mainColour); font-size: 15px; line-height: 26px; } .signup-bottom { display: flex; flex-direction: column; gap: 20px; margin: 40px 0; font-size: 16px; } .signup-bottom a { color: inherit; text-decoration: underline; } .signup-page .signup-form, .signup-page .login-form { padding: 10px 0; } .signup-form-field { padding: 10px 0; } .signup-form-label { font-size: 16px; color: #3B3B3D; padding: 5px 0; } .signup-form-input { width: 100%; } .signup-page-button { margin: 10px 0; width: 100%; text-transform: uppercase; text-align: center;} .forgot-button { color: #255E99; } .login-error { text-align: center; font-size: 16px; color: #990000; line-height: 40px; } .login-form { margin-bottom: 20px; } /* forgot password popup */ .forgot-password.login-form { flex-direction: column; align-items: center; } .forgot-password.login-form span { display: block; font-size: 20px; color: #1C1B1B; margin: 0 0 10px; text-align: center; } /* ----- DASHBOARD ----- */ .dashboard-header { background: var(--background); border: 1px solid var(--border); border-width: 0 0 1px 0; color: var(--mainColour); } .dashboard-header .container_16 { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 5px; padding: 0 10px; font-size: 16px; } .dashboard-header span:nth-child(1) { font-size: 24px; font-weight: 600; } .dashboard-header span:nth-child(2) { margin-left: auto; display: flex; align-items: center; font-weight: 600; gap: 5px; } .dashboard-header span:nth-child(2):before { content: ''; width: 15px; height: 17px; background: url(../images/account.svg) no-repeat center; background-size: contain; } .dashboard-header a { color: var(--mainColour); text-decoration: underline; } .dash-tabs { display: flex; align-items: stretch; min-height: 700px; } .dash-tab-titles { background: var(--background); width: 40%; display: flex; flex-direction: column; border-right: 1px solid var(--border); } .dash-tab-titles a { height: 80px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; position: relative; background: #fff; color: #302F2F; transition: 0.2s all ease-in-out; } .dash-tab-titles a span { width: 200px; display: flex; align-items: center; gap: 10px; color: #302F2F; text-transform: uppercase; font-weight: 600; transition: 0.2s all ease-in-out; } .dash-tab-titles a span:before { content: ''; width: 20px; height: 20px; background: transparent no-repeat center; transition: 0.2s all ease-in-out; } .dash-tab-titles a[data-tab='orders'] span:before { background-image: url(../images/dash-order.svg); } .dash-tab-titles a[data-tab='orders'].active span:before { background-image: url(../images/dash-order-white.svg); } .dash-tab-titles a[data-tab='details'] span:before { background-image: url(../images/dash-account.svg); } .dash-tab-titles a[data-tab='details'].active span:before { background-image: url(../images/dash-account-white.svg); } .dash-tab-titles a[data-tab='delivery-addresses'] span:before { background-image: url(../images/dash-address.svg); } .dash-tab-titles a[data-tab='delivery-addresses'].active span:before { background-image: url(../images/dash-address-white.svg); } .dash-tab-titles a[data-tab='password'] span:before { background-image: url(../images/dash-password.svg); } .dash-tab-titles a[data-tab='password'].active span:before { background-image: url(../images/dash-password-white.svg); } .dash-tab-titles a.active span { color: #fff; } .dash-tab-titles a.active { background: #242424; } .dash-tab-titles a:hover { text-decoration: underline; } .dash-tab-content>div { display: none; } .dash-tab-inner.active { display: block; padding: 20px 0 0 20px; } .dash-order-row-wrap { border: 1px solid var(--border); border-bottom: 0; overflow: hidden; } .dash-order-row-wrap:first-of-type { border-radius: 5px 5px 0 0; } .dash-order-row-wrap .dash-order-headings { background: var(--background); padding: 0 10px; height: 50px; color: #25242B; font-weight: 600; font-size: 16px; } .dash-order-row-wrap:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 5px 5px; } .dash-order-row { display: flex; align-items: center; justify-content: flex-start; height: 50px; } .dash-order-row-wrap:nth-child(even) { background: var(--background); } .dash-order-row>div { width: 20%; } .dash-order-row>div.ref { flex: 1; width: auto; } .dash-order-info { padding: 0 10px; font-size: 14px; } .dash-order-info>div span { color: #25242B; } .dash-order-row .view { width: 60px; } .dash-order-info .view-invoice { display: flex; align-items: center; } .dash-order-info .view-invoice:before { content: ''; width: 20px; height: 20px; background: url(../images/order-blue.svg) no-repeat center; } .dash-forms-wrap { display: flex; } .dash-form { width: 50%; padding: 10px; box-sizing: border-box; background: var(--background); border: 1px solid var(--border); } .dash-form-field { padding: 10px 0; } .dash-form-label { font-size: 16px; color: #3B3B3D; padding: 5px 0; } .dash-form-input { width: 100%; } .dash-form-button-row { padding: 10px 0; } /* logged in addresses */ .member-addresses { width: 100%; display: flex; flex-wrap: wrap; gap: 15px; } :is(.billing-address, .delivery-address) { display: flex; box-sizing: border-box; gap: 10px; flex-wrap: wrap; } :is(.billing-address, .delivery-address) input { height: 20px; margin: 0 5px; } :is(.billing-address, .delivery-address) div { font-size: 14px; line-height: 18px; color: #393A3D; } :is(.billing-address, .delivery-address) div span { font-weight: bold; font-size: 16px; color: #1871B4; } .address-button-row { display: flex; width: 100%; } .pop-overlay { position: absolute; z-index: 10000; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); opacity: 0; display: flex; justify-content: center; } .pop-overlay>div { background: #fff; position: absolute; background: #fff; padding: 20px; margin: 10px; max-width: 600px; min-width: 300px; flex: 0 0 auto; font-size: 16px; line-height: 26px; box-sizing: border-box;} .pop-overlay>div>a { position: absolute; width: 30px; height: 30px; background: url(../images/close.svg) no-repeat center; z-index: 5; top: 5px; right: 5px; } .pop-overlay.pop-image>div { max-width: 100vw; max-height: 100vh; } .pop-overlay.pop-image>div img { max-width: 100%; max-height: 100%; } .pop-buttons { display: flex; margin: 10px 0; align-items: center; justify-content: space-between; } /* new address popup */ .add-address-popup h2 { color: #1871B4; } .edit-address-box:is(input, select) { width: 100%; height: 35px; padding: 0 10px; box-sizing: border-box; background: #FBF9F5; border: 1px solid #ECEBEA; margin: 5px 0; color: #393A3D; } .address-form { display: flex; flex-direction: column; gap: 10px; max-width: 400px; } .address-form>div { display: flex; flex-direction: column; gap: 10px; } .address-form>div:first-child, .address-form>div:last-child { align-items: center; flex-direction: row; gap: 5px; } .address-form>div:first-child>input:first-child { width: 100px; flex: 0 0 auto; } .address-form>div>input { width: 100%; } .address-form>div>input::placeholder { text-transform: capitalize; } .address-form>div>textarea { height: 100px; width: 100%; } .address-form button { border: 0; background: #5EB229; display: flex; align-items: center; justify-content: center; color: #fff; height: 40px; padding: 0 20px; font-weight: bold; text-transform: uppercase; cursor: pointer; } .address-form button:nth-child(1) { margin-right: auto; background: #65707D; } .member-address { border: 1px solid var(--border); background: #fff; font-size: 14px; line-height: 18px; padding: 20px 5px 5px; width: calc((100% - 20px) / 2); height: 240px; display: flex; align-items: flex-start; position: relative; gap: 1 } .member-address>div:first-child { content: ''; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--mainColour); padding: 3px; margin: 0 10px; } .dash-tab-inner .member-address>div:first-child { display: none; } .checkout-card .member-address.chosen>div:first-child:after { content: ''; display: block; width: 100%; height: 100%; background: var(--mainColour); border-radius: 50%; } .checkout-card .member-address:not(.chosen) { cursor: pointer; } .member-address .address-buttons { position: absolute; bottom: 10px; right: 10px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .add-address { width: 100%; } .edit-address:not(.add-address) { width: 30px; height: 30px; background-image: url(../images/icon-edit.svg); background-repeat: no-repeat; background-position: center; display: block; } .delete-address { width: 30px; height: 30px; background-image: url(../images/icon-delete.svg); background-repeat: no-repeat; background-position: center; display: block; } .use-address { width: 30px; height: 30px; background-image: url(../images/icon-use.svg); background-repeat: no-repeat; background-position: center; display: block; } .checkout-card .member-address:not(.chosen) { cursor: pointer; } /* --------------------------------------- */ /* -------- LARGE SCREEN >1200px --------- */ /* --------------------------------------- */ @media only screen and (min-width:1200px) { .mobile:not(.desktop-large), .tablet:not(.desktop-large), .desktop:not(.desktop-large), .desktop-hidden { display: none !important; } /* ----- GRID STRUCTURE ----- */ .container_16 { margin-left: auto; margin-right: auto; width: 1200px; } .container_16 .grid_1 { width: 55px; } .container_16 .grid_2 { width: 130px; } .container_16 .grid_3 { width: 205px; } .container_16 .grid_4 { width: 280px; } .container_16 .grid_5 { width: 355px; } .container_16 .grid_6 { width: 430px; } .container_16 .grid_7 { width: 505px; } .container_16 .grid_8 { width: 580px; } .container_16 .grid_9 { width: 655px; } .container_16 .grid_10 { width: 730px; } .container_16 .grid_11 { width: 805px; } .container_16 .grid_12 { width: 880px; } .container_16 .grid_13 { width: 955px; } .container_16 .grid_14 { width: 1030px; } .container_16 .grid_15 { width: 1105px; } .container_16 .grid_16 { width: 1180px; } .swipe { height: 575px; } } /* -------------------------------------------------------------------------------------------------------- LARGE DESKTOP END */ /* --------------------------------------- */ /*-------------DESKTOP < 1199px------------*/ /* --------------------------------------- */ @media (min-width:960px) and (max-width:1199px) { .mobile:not(.desktop), .tablet:not(.desktop), .desktop-large:not(.desktop), .desktop-hidden { display: none !important; } /* ----- GRID STRUCTURE ----- */ .grid_1 img, .grid_2 img, .grid_3 img, .grid_4 img, .grid_5 img, .grid_6 img, .grid_7 img, .grid_8 img, .grid_9 img, .grid_10 img, .grid_11 img, .grid_12 img, .grid_13 img, .grid_14 img, .grid_15 img, .grid_16 img { max-width: 100% !important; height: auto !important; } /*Header*/ .site-search{width: 350px; margin-right: 20px;} /*Menu*/ .main-menu > li > a{padding: 0 10px;} /* ----- MODULES ----- */ /*Content Layout*/ .content-layout-block .layout-inner{padding: 0 20px;} /* ----- SEARCH PAGE ----- */ .search-results { gap: 12px; } /* -- Product Block -- */ .product-block {width: calc((100% - 36px) / 4);} /* -- Category Block -- */ .category-block{width: calc((100% - 36px) / 4);} /* ----- DETAILS PAGE ---- */ .product-images{height: 460px;} /* associations */ /* -- Product Module -- */ .product-module.list .pm-gal-inner{gap:10px;} /* -- Category Module -- */ /* ----- CHECKOUT ---- */ .checkout-left { padding-right: 10px; padding-left: calc((100vw - 950px) / 2); } .checkout-right { padding-left: 10px; padding-right: calc((100vw - 950px) / 2); } .cart-product-quantity { width: 100px; height: 35px; } } /* -------------------------------------------------------------------------------------------------------- DESKTOP END */ /* ------------------------------------------------- */ /* --------------TABLET & MOBILE ------------------- */ /* ------------------------------------------------- */ @media (max-width:959px) { .container_16.resp-full-width { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; box-sizing: border-box; padding-left: 15px; padding-right: 15px; } div:not(.container_16).resp-full-width { width: 101vw !important; max-width: 101vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding-left: 15px; padding-right: 15px; } .alpha, .omega { margin-left: 0; margin-right: 0; } /* ----- SITE HEADER ----- */ .top-wrap>div, .header-wrap>div { width: 100%; } /* -- TOP WRAP -- */ .top-wrap{height: 50px; background: #F7F7F7;} .top-wrap > div{border: 0;} .top-wrap > div > div{display: flex; justify-content: center; align-items: center; flex-grow: 1; height: 100%;} .top-phone{height: 24px;width: 24px; background: url(../images/phone_mobile.svg) center no-repeat;} .top-account{height: 24px;width: 24px; background: url(../images/user_mobile.svg) center no-repeat;} .top-left{border-right: 1px solid #DDDDDE;} /* -- HEADER WRAP -- */ .header-wrap{height: 100px;} .header-right{gap:30px; height: 100%;} .small-cart .small-cart-icon > span{background: #222529;} /*Menu Toggle*/ .menu-toggle{height: 100%; display: flex; align-items: center;} .menu-toggle > div{width: 36px; height: 24px; display: flex; flex-direction: column; justify-content: space-between;} .menu-toggle > div::before{content: ""; width: 36px; height: 4px; background:#202021; transition: ease-in-out all .3s;} .menu-toggle > div > div{width: 36px; height: 4px; background:#202021; transition: ease-in-out all .3s;} .menu-toggle > div::after{content: ""; width: 36px; height: 4px; background:#202021; transition: ease-in-out all .3s;} .menu-toggle.active > div > div{opacity: 0;} .menu-toggle.active > div::before{transform: rotate(45deg) translate(7px, 7px);} .menu-toggle.active > div::after{transform: rotate(-45deg) translate(7px, -7px);} /*Serach Bar*/ .responsive-search{height: 60px; display: flex;} .responsive-search > input{width: calc(100% - 60px); height: 100%; color: #707171; font-size: 14px; padding: 0 10px; border: 0; border-radius: 0;} .responsive-search > a{width: 60px; height: 60px; background: url(../images/search-white.svg) center no-repeat #202021;} /* ----- RESPONSIVE MENU ----- */ .menu-wrap{height: inherit; position: absolute; right: 0; top:100%; background: #fff; width: 100%; box-sizing: border-box; margin: 0; transition: ease-in-out all .3s; opacity: 0; transform: translateY(10px); z-index: -1; visibility: hidden;} .menu-wrap > div{width: 100%; padding: 0;} .menu-wrap.open{opacity: 1; visibility: visible; z-index: 1000; transform: translateY(0);} .main-menu-wrap{display: flex; flex-direction: column; width: 100%;} .main-menu-wrap .menu-header{color: #fff; background: var(--mainColour); text-transform: uppercase; padding: 14px 10px; font-size: 14px; line-height: 20px; font-weight: bold;} .responsive-main-menu ul{width: 100%; display: none; list-style: none; padding: 0;} .responsive-main-menu li{list-style: none; padding: 0;} .responsive-main-menu {padding: 0 20px;} .responsive-main-menu > li > a{border-bottom: 1px solid #F4F4F4; font-weight: bold;} .responsive-main-menu li {width: 100%; position: relative;} .responsive-main-menu li a{padding:10px 0; color: var(--textColour); font-size: 15px; display: block; transition: ease-in-out all .3s;} .responsive-main-menu li ul li a{padding: 10px;} .responsive-main-menu li ul li ul li a{padding: 10px 20px;} .responsive-main-menu > div > li > a{border-bottom: 1px solid #F4F4F4; font-weight: bold;} .toggle_sub{position: absolute; top: 0; right: 0; height: 40px; width: 40px; z-index: 10;} .toggle_sub::after{content: ""; height: 10px; width: 10px; border: solid var(--textColour); border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; right: 13px; top: 12px; transition: ease-in-out all .3s;} li.has-sub-items.open > .toggle_sub::after{transform: rotate(225deg); top:17px;} li.has-sub-items.open > a{color: #172B68;} /*Shop*/ /*Checkout*/ .checkout-logo { padding: 0; } .dash-tab-content { width: 100% !important; } .dash-tab-inner.active { padding: 0; border-bottom: 1px solid var(--border); } .tab-link { padding: 0 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; height: 60px; font-weight: 600; text-transform: uppercase; font-size: 15px; color: var(--mainColour); } .tab-link:after { content: ''; width: 10px; height: 10px; background: url(../images/chevron-down-black.svg) no-repeat center; background-size: contain; margin-left: auto; } .tab-link.active { border-bottom: 0; } .tab-link.active:after { transform: rotate(180deg); } .dash-order-row-wrap { border-radius: 0 !important; } .dash-form { width: 100%; border-width: 0; background: none; padding-top: 0; } .delivery-address { padding: 0 10px 10px; } /* ----- MODULES ----- */ /* -- Fullscreen Gallery -- */ div.fullscreen-fade .arrows { display: none !important; } /* ----- Modules ----- */ /*Content Layout*/ .content-layout-block { flex-direction: column !important; padding:60px; } .content-layout-block .layout-image { width: 100%; padding: 0 0 40px 0;} .content-layout-block .layout-texts{padding: 0; width: 100%;} .content-layout-block .layout-inner{width: 100%;padding: 0;} .content-layout-block .layout-buttons { justify-content: center; flex-direction: column; align-items: center; gap:15px;} .content-layout-block .layout-buttons a { width: 100%; } .content-layout-block .layout-inner { text-align: center; align-items: center; } .content-layout-block .layout-texts h4{font-size: 18px;} .content-layout-block .layout-texts h2{font-size: 31px;} .content-layout-block .layout-texts p{font-size: 14px; line-height: 26px;} /* -- Product Module -- */ /* -- Category Module -- */ .category-module.list .cm-gal-inner{gap:40px;} .category-module.list .cm-gal-inner .category-block {width: calc((100% - 120px) / 4);} /* ----- CHECKOUT ---- */ .checkout-page { flex-wrap: wrap; } .checkout-top { width: 100%; padding: 20px 20px 20px; order: 1; } .checkout-left { width: 100%; padding: 20px 20px 20px; order: 3; } .checkout-right { width: 100%; padding: 20px 20px 20px; order: 2 } .signup-page { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 20px 10px; flex-direction: column; } .signup-tab-left { width: 100%; } .signup-bottom { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 20px; margin-bottom: 20px; padding: 20px 10px; } .signup-header .container_16 { width: 100%; padding: 0 10px; } .product-block .product-image a.add-to-favourites { display: flex; } } /* -------------------------------------------------------------------------------------------------------- TABLET & MOBILE END */ /* --------------------------------------- */ /* --------------TABLET------------------- */ /* --------------------------------------- */ @media (min-width:768px) and (max-width:959px) { .desktop-large:not(.tablet), .desktop:not(.tablet), .mobile:not(.tablet), .tablet-hidden { display: none !important; } /* ----- GRID STRUCTURE ----- */ .container_16 { margin-left: auto; margin-right: auto; width: 768px; } .container_16 .grid_1 { width: 32px; } .container_16 .grid_2 { width: 80px; } .container_16 .grid_3, .container_16 .grid_tab_3 { width: 128px; } .container_16 .grid_4, .container_16 .grid_tab_4 { width: 176px; } .container_16 .grid_5, .container_16 .grid_tab_5 { width: 224px; } .container_16 .grid_6, .container_16 .grid_tab_6 { width: 272px; } .container_16 .grid_7, .container_16 .grid_tab_7 { width: 320px; } .container_16 .grid_8, .container_16 .grid_tab_8 { width: 368px !important; } .container_16 .grid_9, .container_16 .grid_tab_9 { width: 416px; } .container_16 .grid_10, .container_16 .grid_tab_10 { width: 464px; } .container_16 .grid_11, .container_16 .grid_tab_11 { width: 512px; } .container_16 .grid_12, .container_16 .grid_tab_12 { width: 560px; } .container_16 .grid_13, .container_16 .grid_tab_13 { width: 608px; } .container_16 .grid_14, .container_16 .grid_tab_14 { width: 656px; } .container_16 .grid_15, .container_16 .grid_tab_15 { width: 704px; } .container_16 .grid_16, .container_16 .grid_tab_16 { width: 752px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 { margin-left: 8px; margin-right: 8px; } .grid_1 img, .grid_2 img, .grid_3 img, .grid_4 img, .grid_5 img, .grid_6 img, .grid_7 img, .grid_8 img, .grid_9 img, .grid_10 img, .grid_11 img, .grid_12 img, .grid_13 img, .grid_14 img, .grid_15 img, .grid_16 img { max-width: 100% !important; height: auto !important; } /*Headar*/ .small-cart{width: initial;} /*Footer*/ .footer-wrap{padding: 80px 0 40px 0; background-image: url(../images/lighthouse-md.svg); } .footer-wrap > div{flex-direction: column; gap:50px;} .footer-left{width: 100%; align-items: center; gap:40px;} .footer-left section{width: 100%;} .footer-left section > div{flex:initial; width: 100%;} .footer-right{width: 100%;} /*Byline*/ .byline-wrap{padding: 40px 0;} .byline-wrap > div{flex-direction: column; gap:40px;} .byline-left{width: 100%; gap:200px;} /* ----- Search Page ----- */ .category-page .search-results{gap:40px;} .product-page .search-results{gap:4px;} /*Category Block*/ .category-block{width: calc((100% - 120px) / 4);} .category-block .cat-title{font-size: 16px;} /*Product Block*/ .product-block{width: calc((100% - 8px) / 3);} .product-block .product-brand, .product-block .product-sale-sticker{font-size: 10px;} .product-block .product-title a{font-size: 12px;} .product-block .product-price .main-price, .product-block .product-price .was-price{font-size: 12px;} .product-block .product-buttons a{font-size: 10px;} /* ----- Details Page ----- */ .product-images{height: 364px;} .product-images .product-stickers{top: 10px; left: 10px;} .product-images .product-stickers > span{line-height: 40px; font-size: 20px; padding: 0 10px;} .product-thumbnails .swiper-wrapper {gap:5px;} .product-thumbnails .pt-item.swiper-slide{height: 85px;} .product-details-wrap .product-title h1{font-size: 26px;} .product-details-wrap .product-brand, .product-details-wrap .product-sale-title{font-size: 16px;} .product-details-wrap .product-short-description, .quantity-wrap .quantity-label{font-size: 14px;} .product-details-wrap .product-price{font-size: 22px;} .product-tabs-header > a{font-size: 14px; padding: 18px 30px;} .product-tab-content *{font-size: 14px;} /*Product Module*/ .product-module.list .pm-gal-inner{gap:4px;} .product-module.list .pm-gal-inner .product-block{width: calc((100% - 8px) / 3);} /* ---------------------- */ /* ----- MEMBERSHIP ----- */ /* ---------------------- */ /* ----- Dashboard ------ */ .signup-header { height: 110px; font-size: 30px; } } /* -------------------------------------------------------------------------------------------------------- TABLET END */ /* --------------------------------------- */ /* --------------MOBILE------------------- */ /* --------------------------------------- */ @media (max-width:767px) { .tablet:not(.mobile), .desktop:not(.mobile), .desktop-large:not(.mobile), .mobile-hidden { display: none !important; } /* ----- GRID STRUCTURE ----- */ .container_16 { margin-left: auto; margin-right: auto; width: 320px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 { margin-left: 5px; margin-right: 5px; width: 310px !important; } .grid_1 img, .grid_2 img, .grid_3 img, .grid_4 img, .grid_5 img, .grid_6 img, .grid_7 img, .grid_8 img, .grid_9 img, .grid_10 img, .grid_11 img, .grid_12 img, .grid_13 img, .grid_14 img, .grid_15 img, .grid_16 img { max-width: 100% !important; height: auto !important; } .prefix_1, .prefix_2, .prefix_3 { padding: 0 !important; } /* -------------------------------------------------------------------- */ /* ----- TYPOGRAPHY ----- */ h1 { font-size: 34px; line-height: 40px; } h2 { font-size: 30px; line-height: 38px; } h3 { font-size: 28px; line-height: 34px; } h4 { font-size: 24px; line-height: 30px; } h5 { font-size: 22px; line-height: 28px; } h6 { font-size: 18px; line-height: 24px; } p { font-size: 14px; line-height: 24px; padding: 5px 0 10px 0; } img { max-width: 100%; vertical-align: middle; } .button-primary, .button-secondary, .button-tertiary{font-size: 14px; padding: 18px 30px;} /*Header*/ .header-wrap{height: 72px;} .logo img{max-width: 175px;} .header-right{gap:15px;} /*Footer*/ .footer-wrap{padding: 80px 0 40px 0; background-image: url(../images/lighthouse-sm.svg); background-position:center bottom; } .footer-wrap > div{flex-direction: column; gap:50px;} .footer-left{width: 100%; align-items: center; text-align: center;} .footer-left section{flex-direction: column; gap:30px; align-items: center;} .footer-left section > div{flex:initial; width: 100%;} .footer-right{width: 100%;} .footer-right nav span{font-size: 14px;} .footer-social a{height: 40px; width: 40px; background-size: contain;} .footer-right nav span::after{height: 8px; width: 8px; top:23px;} /*Byline*/ .byline-wrap {padding: 40px 0;} .byline-wrap > div{flex-direction: column; gap:40px; align-items: center;} .byline-left{flex-direction: column; gap:40px; text-align: center; justify-content: center; align-items: center;} .back_to_top{margin: 80px 0;} /* ----- MODULES ----- */ /* -- Full Screen Gallery -- */ .frame.main { background: none; border: 0; border-radius: 0; box-shadow: none; } .fsg, .fullscreen-fade { min-width: 100%; height: auto; max-width: 100vw !important; } div.fullscreen-fade div.slide { background-repeat: no-repeat; background-size: cover; } div.fullscreen-fade div.slide .banner { padding: 20px 10px; width: 100%; box-sizing: border-box; } div.fullscreen-wrap, div.fullscreen-wrap div { max-width: initial !important; } .label { float: none; width: 100%; } .value { float: none; width: 100%; } /* ----- MODULES ----- */ /*Content Layout Module*/ .content-layout-block{padding: 20px 10px;} /* ----- Search Page ----- */ /* Search Page */ .search-header{flex-direction: column; align-items: flex-start; gap:20px;} .search-order{width: 100%;} .sort-search{width: 100%;} .search-results{padding: 20px 0; width: 100%; flex: initial;} .search-title{gap:5px;} .search-title h1{font-size: 20px;} .search-results-found{font-size: 14px;} .product-page .search-results{gap:10px; row-gap:10px;} .category-page .search-results{gap:40px;} .pager-link:not(.pager-prev-button, .pager-next-button){width: 20px;} .pager-prev-button, .pager-next-button{width: 60px;} .pager-link a{font-size: 16px;} /*Product Block*/ .product-block{width: calc((100% - 10px) / 2);} .product-block .product-box{padding: 10px 5px;} .product-block .product-brand{font-size: 8px;} .product-block .product-title{height: 30px;} .product-block .product-title a{font-size: 10px; line-height: 14px;} .product-block .product-sale-sticker, .product-block .product-price .was-price, .product-block .product-price .main-price, .product-block .product-no-stock{font-size: 10px;} .product-block .product-buttons{height: 26px;} .product-buttons .product-energy > div{height: 26px; width: 44px;} /*Category Block*/ .category-block{width: calc((100% - 40px) / 2);} .category-block .cat-title{font-size: 13px;} /*Details Page*/ .product-images{height: 300px;} .details-page-container{flex-wrap: wrap;} .details-page-left, .details-page-right{width: 100%; padding: 0 0 30px 0;} .product-images .product-stickers{left: 10px; top: 10px;} .product-images .product-stickers > span{ line-height:30px; padding: 7px 10px; font-size: 18px;} .product-image-prev, .product-image-next{height: 25px; width: 25px;} .product-image-prev::after{border-width: 0 0 1px 1px; width: 6px; height: 6px; top: calc(50% - 3px); right:8px;} .product-image-next::after{border-width: 1px 1px 0 0; width: 6px; height: 6px; top: calc(50% - 3px); left:8px;} .product-thumbnails .swiper-wrapper{gap:5px;} .product-thumbnails .pt-item.swiper-slide{height: 70px;} .product-details-wrap .product-brand, .product-details-wrap .product-sale-title{font-size: 16px;} .product-details-wrap .product-title h1{font-size: 26px;} .product-details-wrap .product-short-description{font-size: 14px;} .product-details-wrap .product-price{font-size: 22px;} .product-energy div{width: 45px; height: 26px;} .product-energy > a{font-size: 12px;} .add-to-cart-row{flex-direction: column; align-items: center;} .quantity-wrap{width: 100%;} .quantity-wrap .quantity input{width: calc(100% - 80px);} .add-to-cart{width: 100%; line-height: 50px; padding: 0;} .product-meta{height: initial; gap:20px; padding:20px;} .product-meta a{flex-direction: column; align-items: center; padding: 0; font-size: 14px;} .tab-button-container{width: 100%; display: flex; align-items: center; justify-content: center;} .tab-button{background: var(--background); text-transform: uppercase; padding: 18px 30px; border-radius: 40px; transition: ease-in-out all; margin-bottom: 10px;} .tab-button.active{background: var(--mainColour); color: #fff;} .product-tab-content{min-height: initial;} .download-item > a{font-size: 14px; padding: 18px 30px;} .associations_wrap h2{font-size: 27px;} .associations_wrap h6{font-size: 17px;} .added-to-cart-inner{padding: 0;} .dash-order-row>div { width: 30%; } .dash-order-row .view { width: 20px; } .dashboard-header .container_16 { flex-wrap: wrap; justify-content: flex-start; padding: 10px; width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .dashboard-header .container_16>span:first-child { width: 100%; } .dashboard-header .container_16>span:nth-child(2) { margin-left: 0; } .delivery-selector {width: 80%;} .delivery_radio{font-size: 18px;} .cart-product { flex-direction: column; gap: 5px; } .cart-product-left { width: 100%; height: auto; } .cart-product-quantity-wrap { display: flex; align-items: center; gap: 10px; } .free-delivery-wrap { line-height: 22px; } .checkout-card-inner-title { margin-bottom: 5px; } .checkout-card-input.checkbox span { font-size: 12px; } .payment-header>div>div { width: 100% !important; } .payment-content { flex-direction: column; gap: 10px; } .payment-content>div { width: 100% !important; } .signup-page { padding: 20px 5px; } .signup-header { height: 90px; font-size: 20px; } .signup-bottom { padding: 0 5px; } .byline-menu>li { font-size: 14px; } .byline-container>a { font-size: 12px; } .member-address { width: 100%; } /*Product Module*/ .product-module{padding: 60px 0;} .product-module.list .pm-gal-inner{gap:10px;} .product-module.list .pm-gal-inner .product-block{width: calc((100% - 10px) / 2);} .pm-title span{font-size: 27px;} .pm-subtitle span{font-size: 17px;} /*Category Module*/ .category-module{padding: 60px 0;} .category-module.list .cm-gal-inner{gap:40px;} .category-module.list .cm-gal-inner .category-block{width: calc((100% - 40px) / 2);} .cm-title span{font-size: 27px;} .cm-subtitle span{font-size: 17px;} } /* ------- MOBILE END ------- */