/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; line-break: after-white-space; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /** VIP Offers **/ html { scroll-behavior: smooth; } body{ font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight:normal; font-style: normal; font-variation-settings: "slnt" 0; } header { padding:14px 22px; } header .cart { margin-top:5px; float:right; } .header{ font-size: 32px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.17; letter-spacing: normal; color: #d9d8d6; } .disabled, .button.disabled, :disabled { pointer-events: none; opacity:.6 } .narrow-letter-spacing{ letter-spacing: -0.5px; } @media (hover: hover) { } .stamped-starrating{ display:flex; } .fa-star-o:before, .stamped-fa-star-o:before { content: '\f006'; } .fa-star:before, .stamped-fa-star:before { content: '\f005'; } [class*=" stamped-fa-"]:before, [class*=" stamped-icon-"]:before, [class^=fa-]:before, [class^=stamped-fa-]:before, [class^=stamped-icon-]:before { font-family: stamped-font,FontAwesome,"Font Awesome 5 Pro","Font Awesome 5 Brands"; font-size: 17px; color: #af9963; } /***********/ .cms-wrapper{ max-width:1440px; margin: 0 auto; padding: 20px; } .content strong{ font-weight:bold; color:rgba(0, 0, 0, 0.8) } .content, .offers-wrapper{ max-width:1311px; margin:0 auto; } .offers-wrapper{ padding:25px 22px; } .banner{ height:100%; margin:0 auto; display:block; border-radius: 23px; } .upper{ text-transform: uppercase; } .cms-wrapper h1{ font-size: 48px; font-weight: bold; letter-spacing: -0.96px; text-align: center; color:#000; margin:30px; } .cms-wrapper h2{ padding: 14px 24px; margin:30px auto 50px auto; border-radius: 21px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); background-color: #ba2451; font-size: 24px; font-weight: 500; line-height: 1.5; color: #fff; text-align: center; max-width:fit-content; } .cms-wrapper h3{ font-size: 40px; font-weight: 600; line-height: 1.1; text-align: center; color: #000; margin-bottom:30px; } .cms-wrapper h4{ font-size: 20px; font-weight: 600; line-height: 30PX; text-align: center; color: #000; } .content ul { margin-bottom:45px; } .content ul li{ text-align: center; } .content p{ text-align: center; margin-bottom:30px; } p{ font-size:24px; line-height:150%; color: rgba(0, 0, 0, 0.6); } li{ font-size:14px; line-height:19px; color: rgba(0, 0, 0, 0.6); } .important{ border-radius:20px; padding:30px 15px; text-align:center; margin-bottom:30px; } .important h3{margin-bottom:20px;} .important strong{ font-size:22px; } .bg-color-hidden-discounts{ background-color: rgba(204, 179, 121, 0.3); } ul.how-it-works { display:flex; flex-direction:column; gap:35px; } ul.how-it-works li{ font-size: 20px; font-weight: 500; line-height: 1.5; padding: 25px; position:relative; } ul.how-it-works-arrows li:after{ content:""; display:block; width: 0; height: 0; border-style: solid; border-width: 22px 0 22px 22px; border-color: transparent transparent transparent rgba(204, 179, 121, 0.5); position:absolute; transform: rotate(90deg); bottom:-65px; left:48%; } ul.how-it-works li:last-child:after{ border:none; } .box-shadow{ border-radius: 12px; box-shadow: -4px 8px 20px 0 rgba(0, 0, 0, 0.1); border: solid 1px #f7f7f7; } ul.why-apply { display:flex; flex-direction:column; gap:32px; } ul.why-apply li{ font-size: 20px; line-height: 1.1; } ul.why-apply img{ margin: 35px 0; } ul.why-apply div{ max-width: 170px; margin:0 auto; } .faq-bg{ padding: 64px 48px; } ul.faq{ display:flex; flex-direction: column; gap: 18px; margin:0 auto; } ul.faq li{ padding: 18px 24px; text-align:left; border-radius: 12px; border:1px solid rgba(0, 0, 0, 0.2); } ul.faq li > a{ font-size:18px; line-height: 1.2; font-weight:bold; color:#000; padding-right:35px; display:block; position:relative; } ul.faq li > a span{ padding-right:20px; } ul.faq li > a:after{ content:""; background-image: url("arrow.svg"); background-size: 28px; background-repeat: no-repeat; background-position: center; width: 35px; height: 35px; right:-5px; top:-5px; position:absolute; transform: rotate(180deg); } ul.faq li.active a:after{ transform: none; } ul.faq li div{ font-size: 18px; padding-top:18px; line-height: 1.4; color: rgba(60, 60, 67, 0.85); } @media only screen and (min-width: 64.063em) { .cms-wrapper{ padding: 25px; } .cms-wrapper h1{ font-size: 64px; letter-spacing: -1.28px; margin-top:48px; } p{ max-width:960px; margin: 0 auto 40px auto; } ul.how-it-works { flex-direction: row; padding:50px 0 40px 0; gap:75px; } ul.how-it-works li{ flex: 1 1 33.333%; padding: 32px; } ul.how-it-works-arrows li:after{ transform: rotate(0deg); bottom:auto; left:auto; top:45%; right:-50px; } ul.why-apply { flex-direction: row; margin-bottom:50px; } ul.why-apply li{ flex: 1 1 25%; } ul.faq{ max-width:950px; } .offers-wrapper{ padding:45px 25px; } } /** Footer start **/ .footer-wrapper { padding:3% 0; background-color:#f9f8f4 } .social-links-small{ display: flex; max-width:400px; margin:0 auto; align-items: center; justify-content: space-evenly; } .social-links-small a { width: 38px; height: 38px; border-radius: 5px; display: flex; align-items: center; justify-content: center; } .social-links-small .facebook { background-color: #3b5998; } .social-links-small .youtube{ background-color: #ff0000; } .social-links-small .instagram{ background-color: #fff; } .footer-benefits { display:flex; padding:30px 0; gap:20px; flex-direction: column; } .footer-benefits a { position:relative; font-size: 15px; line-height: 1.26; color: #ac955e; display: inline-block; padding-left:38px; } .footer-benefits img { position:absolute; left:0; max-block-size:none; } .footer-benefits p { font-size: 12px; color: #727a89; padding-left: 38px; } .footer-menu-mobile > li{ border-bottom: 1px solid rgba(65, 68, 73, 0.1); } .footer-menu-mobile .title{ display: block; position:relative; line-height: 1.2; font-size: 18px; font-weight: 500; color: #ac955e; padding: 20px 40px 20px 0; } .footer-menu-mobile .title:after { content: ""; display: inline-block; position: absolute; right: 25px; top: 38%; border: solid #c9b177; border-width: 0 2px 2px 0; padding: 4px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .footer-menu-mobile .active .title:after { transform: rotate(225deg); -webkit-transform: rotate(225deg); } .footer-menu-mobile .a-item a{ font-size: 16px; line-height: 2.25; color: #414449; } .footer-logos{ display:flex; flex-direction: column; margin-top:35px; gap:10px; } .footer-logos .footer-logo{ display:flex; gap:3px; justify-content:center; } .footer-logos .footer-logo img{ height: auto; } .copyright{ padding:35px 0; display:flex; gap:10px; font-size: 12px; color: #ac955e; align-items: center; } /*** Vip offers **/ .vip-offers > p { margin-bottom:70px; } .product-offer{ background-color:#fff; margin:22px auto; padding:19px; border-radius:20px; } .product-offer .image{ position:relative; } .product-offer .image img{ height: auto; border-radius:20px; } .product-title{ font-size:22px; line-height:28px; font-weight:500; } .characteristics li{ position:relative; padding-left:20px; } .characteristics li::before { content: "•"; position:absolute; left:0; top:-1px; font-size: 20px; color: rgba(204, 179, 121, 0.8); } .discount{ position:absolute; bottom:10%; right:10%; width: 84px; height: 84px; border-radius: 84px; background-color: #ba2451; color:#fff; font-size:32px; font-weight:500; display:flex; align-items:center; justify-content:center; } .price-offer .regular { font-size:22px; line-height:28px; font-weight: 400; color:rgba(0, 0, 0, 0.6); position:relative; } .price-offer .regular:after { content:''; width:73%; position:absolute; left:-1px; bottom:48%; transform: rotate(170deg); border-bottom: 2px solid rgb(186, 36, 81); } .price-offer .final{ font-size:36px; font-weight: 700; color:#000; } .price-offer .final .price{ font-size:36px; } .offer-actions{ display:flex; justify-content:right; gap:10%; } .offers-actions { margin-top:35px; display:flex; flex-wrap: wrap; gap:15px; justify-content:left; } .offer-action{ align-content: flex-end; width: 100%; max-width:275px; } h4.offers-actions{ margin-bottom:-20px } .offer-actions .view-more, .offer-actions .button.cart, .offers-actions .button.cart{ padding: 20px 8px; justify-content:center; align-items:center; text-align:center; border-radius: 21px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); display:inline-block; width:100%; background-color: #ba2451; font-size: 24px; font-weight: 500; color: #fff; cursor:pointer; } .offer-actions .button.cart.loading, .offers-actions .button.cart.loading{ background-image:url(../../images/loading.svg); background-repeat: no-repeat; background-position-x: calc(100% - 15px); background-position-y: center; background-size: 30px; } .offers-actions .button.cart.loading{ background-position-x: calc(100% - 10px); background-size: 20px; } .offers-actions .button.cart{ display:flex; flex-flow:column; padding:10px 5px; line-height:1.4; border-radius: 10px; width:30%; font-size:90%; } .offers-actions .button.cart .label{ font-weight:700; } .offers-actions .button.cart .price{ font-size:85%; } .vip-content h2 { margin-bottom:80px; } .newsletter-subscribe-form-container { display:none !important; } @media not (hover: none) { .add-to-cart-form button:hover{ cursor:pointer; } } @media only screen and (max-width: 34em) { .footer-logos .footer-logo:first-child{ display:none !important; } } @media only screen and (max-width: 64em) { .hide-for-small-only{ display:none !important; } .product-offer{ max-width:387px; } .product-title{ margin:25px 0; } ul.characteristics{ margin-bottom:15px; } .price-offer { margin-bottom:15px; text-align: center; } .offer-actions{ flex-flow: column; align-items: center; } .product-offer .image{ text-align:center; } .price-offer .regular:after{ left:18px; } .footer-wrapper footer{ flex-flow: column-reverse; } .footer-menu-mobile{ border-top:1px solid rgba(199, 186, 171, 0.3); margin-bottom: 35px; } .footer-menu-mobile .a-item{ display:none; } .footer-menu-mobile .active .a-item{ display:block; } .social-links-small{ padding:25px; } .footer-benefits{ max-width:fit-content; margin:0 auto; } } @media only screen and (min-width: 64.063em) { li{ font-size:20px; line-height:22px; } .vip-content{ max-width:max-content; } h1.vip-header{ margin-top:85px } .product-offer{ margin:25px 0; padding:25px; display:flex; gap:5%; } .product-offer .image, .product-offer .product-info{ /*flex:1 0 50%;*/ width: 50%; } .product-offer .image img{ display:block; } .discount{ width: 112px; height: 112px; border-radius: 112px; font-size:44px; } .product-title{ font-size: 30px; line-height: 36px; } .product-info{ display:flex; flex-flow:column; justify-content:space-between; } .price-offer .regular{ font-size:32px; line-height: 32px; margin-bottom:15px; } .price-offer .final .price{ font-size: 48px; line-height: 48px; } .footer-menu{ display:flex; font-size: 14px; gap:10px; font-weight: bold; color: #ac955e; } .footer-menu ul li a{ font-weight: normal; font-size: 13px; line-height: 1.83; font-weight: normal; color: #414449; } .footer-menu > div{ flex:1 1 25%; } .footer-benefits { flex-direction: row; gap:10px; margin-top:3%; border-top: 1px solid rgba(199, 186, 171, 0.3); border-bottom: 1px solid rgba(199, 186, 171, 0.3); } .footer-benefits > div{ flex:1 1 25%; } .footer-menu-mobile{ display:none !important; } .footer-benefits a { font-size: 20px; } .footer-logos{ margin-top:3%; flex-direction: row; justify-content: space-between; } .footer-logo-middle > div { display: flex; gap: 3px; justify-content: center; flex-wrap:wrap; } /*** Vip offers **/ .vip-offers-title { font-size: 40px; font-weight: 600; line-height: 1.1; text-align:center; } } @media only screen and (min-width: 75em) { li{ font-size:22px; line-height:28px; } .product-title{ font-size: 36px; line-height: 44px; } } /** Footer end **/