/** Shopify CDN: Minification failed Line 1257:10 Expected identifier but found whitespace Line 1257:11 Unexpected "1" Line 4080:0 Unexpected "}" **/ /*GENERAL CHANGES TO ALL THEME*/ @font-face { font-family: 'Montserrat'; src: url('//flaska.es/cdn/shop/files/Montserrat-100.woff2?v=12888779422413147312') format('woff2'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('//flaska.es/cdn/shop/files/Montserrat-200.woff2?19089') format('woff2'); font-weight: 200; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('//flaska.es/cdn/shop/files/Montserrat-300.woff2?v=12888779422413147312') format('woff2'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('//flaska.es/cdn/shop/files/Montserrat-400.woff2?v=12888779422413147312') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('//flaska.es/cdn/shop/files/Montserrat-600.woff2?v=12888779422413147312') format('woff2'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('//flaska.es/cdn/shop/files/Montserrat-700.woff2?v=12888779422413147312') format('woff2'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('//flaska.es/cdn/shop/files/Montserrat-800.woff2?v=12888779422413147312') format('woff2'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('//flaska.es/cdn/shop/files/Montserrat-900.woff2?19089') format('woff2'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Inter'; src: url('//flaska.es/cdn/shop/files/Inter-100.woff2?v=7909294212369237607') format('woff2'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Inter'; src: url('//flaska.es/cdn/shop/files/Inter-200.woff2?19089') format('woff2'); font-weight: 200; font-style: normal; } @font-face { font-family: 'Inter'; src: url('//flaska.es/cdn/shop/files/Inter-300.woff2?v=7909294212369237607') format('woff2'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Inter'; src: url('//flaska.es/cdn/shop/files/Inter-400.woff2?v=7909294212369237607') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Inter'; src: url('//flaska.es/cdn/shop/files/Inter-500.woff2?v=7909294212369237607') format('woff2'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Inter'; src: url('//flaska.es/cdn/shop/files/Inter-600.woff2?v=7909294212369237607') format('woff2'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Inter'; src: url('//flaska.es/cdn/shop/files/Inter-700.woff2?v=7909294212369237607') format('woff2'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Inter'; src: url('//flaska.es/cdn/shop/files/Inter-800.woff2?v=7909294212369237607') format('woff2'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Inter'; src: url('//flaska.es/cdn/shop/files/Inter-900.woff2?19089') format('woff2'); font-weight: 900; font-style: normal; } /* Global CSS rule */ html { scroll-behavior: smooth; } body { /* font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif;*/ font-family: "Inter", Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 500; text-align: left; color: #555 } ol, ul, li { color: #555 } p { font-weight: 500; color: #555; line-height: 1.5; } h1, h2, h3 { font-weight: 800; color: #555; } h2 { font-size: 50px; line-height: 1.4; text-transform: uppercase; word-wrap: break-word; overflow-wrap: break-word; color: #555; } @media (max-width: 767px) { h2 { font-size: 36px; } } .flex-row-reverse { flex-direction: row-reverse; } .container-full{ width: 100%; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; } .container-narrow { width: 100%; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; } .container-fluid { width: 100%; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; } img { vertical-align: middle; border-style: none; border: 0; max-width: 100%; height: auto; display: block; } /*Header and Navigation*/ .transparent-on-top { z-index: 150 !important; } /*General Settings for all Product Cards*/ .m-product-card__content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; /* Ensure the container takes the full available height */ } .m-product-card__info { flex-grow: 1; /* Allows the content above the price to expand */ } .m-product-card__price { margin-top: auto; } @media (min-width: 1024px) { .m-product-card.m-product-card--show-second-img .m-product-card__media:hover .m-product-card__hover-image { transform: none; } } /*END OF General Settings for all Product Cards*/ /*Breadcrum separator*/ .m-breadcrumb--separator svg { width: 8px; height: 10px; position: relative; top: -1px; color: #fff; } /* main wrapper bottom padding */ .template-page #MainContent { padding-bottom: 0; } /* Css for footer area */ /*Wave at the bottom special case for home and Discover*/ .wave-footer .o-waves-section { z-index: -1; } /* #shopify-section-sections--24420200284485__fl_waves_section_YtDPwD { background:#b5c9d3; } */ m-footer.m-footer::after { position: absolute; left: 0; top: -100px; right: 0; bottom: 0; background-image: url('/cdn/shop/files/footer_bg.png?v=1726221496'); background-size: cover; background-repeat: no-repeat; content: ''; } .m-footer{ background-color: #b5c9d3; } .m-footer--bottom{ position: relative; z-index: 99; background: transparent !important; } .footer_new_bg { position: relative; overflow: hidden; z-index: 500; } .bg_color { background: #b5c9d3; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 100; } .footer_area { position: relative; padding-top: 50px; padding-bottom:50px; } span.m-footer__copyright { color: white; font-size: 14px; } svg.footer_temp {width:20px; height:21px; flex:0 0 20px;} m-footer.m-footer::before { position: absolute; content:''; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg,rgba(72,141,169,0) 0%,#5f9bb4 79%,#488da9 91.5%); z-index: 3; } .m-footer--middle{ background-color: transparent !important; position:relative; z-index: 99; } /* Footer Certificates */ .flaska-certificates { padding-top: 30px; } .flaska-certificates svg.m-placeholder-svg { display: none; } .flaska-certificates h2.m-section__heading{ font-size: 25px; font-weight: bold; text-align: center; text-transform: none; color: #113e59; } .flaska-certificates .m-mixed-layout__inner { display: grid; column-gap: 20px; align-items: center; height: 100% } .flaska-certificates .m-mixed-layout__wrapper { height: 100%; } .flaska-certificates .m-icon-box-section__wrapper { height: 100%; } .flaska-certificates .m-icon-box__inner { column-gap: 30px; align-items: center; display: flex; } .flaska-certificates .m\:column { padding: 0; } .flaska-certificates .m-icon-box--horizontal .m-icon-box__icon { margin-right: 0; } @media (max-width:1199px){ .flaska-certificates .m-mixed-layout__inner { display: grid; gap: 20px; /* Optional spacing between grid items */ align-items: flex-start; margin-bottom: 35px; } .flaska-certificates .m\:column { display: flex; flex-direction: column; /* Stack content vertically */ } .flaska-certificates .m-icon-box__inner { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; max-width: 240px; margin: auto; /* Centers and adds bottom spacing */ height: 100%; /* Ensures it takes full height */ } .flaska-certificates .m-icon-box__content{ text-align: center; } } /* @media (max-width:767px){ .flaska-certificates h2.m-section__heading{ font-size: 20px; } .flaska-certificates .m-mixed-layout__inner {display:block;} .flaska-certificates .m-icon-box__inner {display:block; margin-bottom:35px;} .flaska-certificates .m-icon-box__icon{display:block; margin:0 auto !important;} .flaska-certificates .m-icon-box__description{text-align:center;} } END of Footer Certificates */ /*Footer Newsletter */ .footer_newsletter .m-newsletter-section__wrapper { padding-bottom: 100px; } .footer_newsletter .m-newsletter-form__wrapper { column-gap: 15px; } .footer_newsletter .m-newsletter-form__button-inline .m-newsletter-form__button { position: unset !important; background: #113e59 !important; border: #113e59; border-radius: 16px !important; color: white; height:60px; } .footer_newsletter .m-newsletter-form__button-inline .m-newsletter-form__button.m-button--blank { color: white; text-transform:uppercase; } @media (max-width: 767px) { .footer_newsletter { padding-bottom:50px; } } .footer_newsletter h2.m-newsletter-section__heading.h3 { font-size: 20px; font-weight: bold; } .footer_newsletter .m-newsletter-section__header{ margin-bottom:25px; } .footer_newsletter .m-newsletter-section__form { margin-left: auto; margin-right: auto; max-width: 500px; position: relative; z-index: 1; } .footer_newsletter .m-newsletter-form__input-wrapper { border-radius: 16px !important; } @media (min-width:768px){ .footer_newsletter .m-newsletter-section__form { width: 500px; } } .footer_newsletter .m-newsletter-section__form .form-field { border-radius:16px; height:60px; border: #fff; padding-left: 40px; } @media (max-width:767px){ .footer_newsletter .m-section-py{padding-top:0px;} .footer_newsletter .m-newsletter-form__wrapper { flex-direction: column; row-gap: 15px; } .footer_newsletter .m-newsletter-section__form .form-field { padding-left:0; text-align: center; } } /* End of Footer Newsletter */ /*.bg_wraping { position: absolute; top: 0; left: 0; right: 0; z-index: 100; width: 100% !important; height: auto !important; object-fit: cover; object-position: center top; }*/ .m-footer--accordion p{ color: #fff; } .m-footer--middle .m-footer--block-title { font-weight: bold; color: #fff; } .bg_wraping { position: absolute; top: 105px; left: 0; right: 0; z-index: 100; width: 100% !important; height: auto !important; object-fit: cover; object-position: center top; } @media (max-width: 1579px) { .bg_wraping { bottom: 0; height: 100% !important; } } .footer_bg { position: relative; z-index: 300; background: transparent; } .footer__overlay { position: absolute; left: 0; right: 0; top: 200px; bottom: 0; z-index: 200; background: linear-gradient(180deg,rgba(72,141,169,0) 0%,#5f9bb4 79%,#488da9 91.5%); } .o-site-footer-quote-temp { color: #e7f8ff; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; align-items: center; -moz-column-gap: 6px; -webkit-column-gap: 6px; column-gap: 6px; font-size: 12px; -ms-flex-pack: end; justify-content: flex-end; margin-bottom: 25px; } .o-site-footer-quote__text { color: #113e59; font-size: 30px; font-family: "Montserrat","Inter",Helvetica,Arial,sans-serif; font-weight: 600; text-align: center; text-transform: uppercase; margin-bottom: 15px; } .o-waves { background-image: url("/cdn/shop/files/waves-gray.svg?v=1731413744"); background-size: auto 4px; background-repeat: repeat-x; height: 4px; position:relative; z-index: 100; margin-bottom:20px; } .m-link-lists .m-link { color: #fff; } .m-link-lists--item:hover .m-link, .m-link-lists--item.active .m-link { color: #103E59; } /* End css for footer */ /* start css for header right icons background */ .m-header__right { background: #fe978c; color: #113e59; max-width: 245px; padding: 1px; } .m-search-form__button { padding: 30px 15px 30px 20px !important; } .m-cart__buttons { display: flex; column-gap: 20px; align-items: center; padding-right: 20px; } .m-cart__shop-link{ text-transform: uppercase; font-weight: 600; } .m-cart__separator { height: 30px; border-right: 1px solid #113e59; } .m-header__wrapper .m-header__mobile m-search-popup { padding: 20px; } .m-cart-count { background-color: #113e59; } @media (min-width: 1024px){ /*.m-header .m-header__wrapper { top: 36px; }*/ .m-header.stuck .m-header__wrapper { top: 0; } .m-cart-icon-bubble { padding-left: 0px; } .m-cart-icon-bubble .m-tooltip { padding-left: 0px; } } @media (max-width: 1199px){ .m-header__desktop .m-menu__link--main { color: white; font-size: 15px; } .m-cart__shop-link, .m-cart__separator { display: none; } } /* end css for header right icons background */ /** CART DRAWER CUSTOMIZATION **/ .m-cart-drawer__inner { background: #f5f5f5; } .m-cart-drawer__close { top: 10px; } .m-cart-drawer__title { color: #fe978c; font-weight: 800; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; padding-bottom: 10px; text-transform: uppercase; } .m-cart-item--drawer__wrapper { background: #fff; padding: 20px; border-radius: 15px; } .m-cart-item__price { font-weight: 400; } .m-cart-item__image.m-cart-drawer-item__image { border: 0px; } .m-cart-addon__header button .m-cart-addon__text { width: auto; max-width: 100%; overflow: visible; margin-left: 6px; } .m-cart-addon__header button { font-size: 15px; } @media screen and (max-width: 767px) { .m-cart-addon__header button { flex-flow: column; flex: 1; font-size: 15px; } .m-cart-drawer .m-cart-addon__header button { flex-direction: row; justify-content: center; } .m-cart-drawer .m-cart-addon__header button .m-cart-addon__text{ width: auto; max-width: 100%; overflow: visible; margin-left: 6px; } .m-cart-addon__header button .m-cart-addon__text { width: auto; max-width: 100%; overflow: visible; margin-left: 0px; } .m-cart-addon__header button { font-size: 15px; } } .m-cart-drawer__footer .m-button { padding: 14px; } .m-cart-drawer__footer .m-cart-drawer__link-to-cart { --btn-link-border: 1px; margin-top: 8px; color: #113e59; padding: 5px 0 5px 0; } .m-cart-drawer__footer { padding: 20px 20px 10px; } .m-cart .m-cart-addon__body.open { border-radius: 15px; } /** END --- CART DRAWER CUSTOMIZATION **/ /** CART PAGE **/ /*.m-header { background: #f5f5f5; }*/ #shopify-section-template--24420198711621__main.shopify-section { background: #f5f5f5; padding-bottom: 30px; } @media screen and (max-width: 767px) { #shopify-section-template--24420198711621__main.shopify-section { margin-bottom: -30px; } } @media screen and (min-width: 1024px) { .m-page-header--template-cart { padding-top: 178px; margin-top: -128px; } } @media screen and (max-width: 1023px) { .m-page-header--template-cart { padding-top: 90px; margin-top: -90px; } } .m-page-header--template-cart .m-page-header__title{ color: #fe978c; text-transform: uppercase; } .m-page-header--template-cart .m-breadcrumb { display: none; } .m-cart-item { background: #fff; border-radius: 15px; margin-bottom: 10px; } .m-cart__header { font-weight: 700; border-bottom: 0; margin-bottom: 4px; } .m-cart__header .m-cart__column:last-child { padding-right: 20px; } .m-cart__header .m-cart__column:first-child { padding-left: 20px; } .m-cart-item .m-cart__column--subtotal { padding-right: 20px; } .f-incart__product { background-color: #f5f5f5; padding: 20px; } @media screen and (max-width: 767px) { .m-cart-item .m-cart__column--quantity { padding-left: 20px; } .m-cart__column--price { padding-right: 30px; } } .m-cart__subtotal--label { font-weight: 700; font-size: 20px; } .m-cart__subtotal--price { font-weight: 700; font-size: 20px; } .m-cart__shipping-note { color:#555 } .m-cart__checkout-button .m-button { padding: 14px; } .cart-wave { background: #F5f5f5 } /** END of CART PAGE **/ /* hover menu list */ ul.m-menu > li.m-menu__item { border: 1px solid transparent; margin:0 10px; } ul.m-menu > li.m-menu__item:hover { border: 1px solid #fff; border-radius: 16px; transition: all 120ms ease-out; } li.m-menu__item.active_cls:hover { border: 1px solid #6bc4e8 !important; } .m-menu__item:hover>a:after { width: unset !important; } .m-menu__link--main { display: flex; align-items: center; position: relative; /* padding: var(--main-link-py) var(--main-link-px); */ padding: 15px 20px; } /* active menu background */ li.m-menu__item.active_cls { background: #6bc4e8; border-radius: 16px; color: #fff; border-color:#6bc4e8; } /*------------------------------------------------------------*/ /* START css for Top Banner content (.top-banner-mc) */ /*For Breadcrumb only Pages*/ .top-banner-mc .m-breadcrumb--itempage .container { width: 100%; margin: 0; padding: 0 15px 0 0; max-width: var(--container-width, 1280px); } /*For Breadcrumb only Collections*/ .top-banner-mc .m-breadcrumb--itemcollection .container { width: 100%; margin: 0; padding: 0 15px 0 0; max-width: var(--container-width, 1280px); } .top-banner-mc .m-breadcrumb--item { padding: 0px; font-size: 15px; color: inherit; white-space: nowrap; transition: all var(--m-duration-default, .25s) ease; color: #6bc4e8; } .top-banner-mc .m-breadcrumb--item-current { padding: 0px; font-size: 15px; color: inherit; transition: all var(--m-duration-default, .25s) ease; color: #fff; } .top-banner-mc .m-breadcrumb--wrapper { margin: 0px; } .top-banner-mc .m-breadcrumb--separator { display: flex; margin: 0px 8px 0px 8px; } /*This makes the hero-section go behind the Navigation bar*/ .m-section.m-hero-section.top-banner-mc { position: relative; margin-top: -145px; /* Adjust according to the header height */ z-index: 1; /* Move it behind the header */ width: 100vw; /* Make it full-width */ } .top-banner-mc .container-full h2.m-hero__title.h2 { color: #fff; text-shadow: 0px 4px 20px rgba(0, 0, 0, .35); font-size: 70px; font-weight: 800; line-height: 1.1; text-transform: uppercase; margin-bottom: 5px; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; padding-top: 0px; } .top-banner-mc .m-hero__content { max-width: 1540px; margin-top: auto; margin-bottom: auto; text-align: left; } .top-banner-mc .m-hero__text.rte.h6 p{ font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.4; color: #fff; } .top-banner-mc .o-waves-section { height: 110px !important; position: absolute; z-index: 200; width: 3745px; object-fit: cover; object-position: center bottom; max-width: 3745px !important; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translate(-50%); left: 50%; overflow: hidden; bottom: 0; } .top-banner-mc .m-hero__inner { z-index: 500; padding-bottom: 0px; padding-left: 40px; justify-content: center; } .top-banner-mc .m-hero.m-hero--adapt { /* padding-bottom: 122px; */ overflow: visible; /* position: unset; */ } /* .top-banner-mc .m-hero.m-hero--adapt .m-parallax { position: unset; }*/ /* .top-banner-mc m-parallax.m-parallax { height: 1000px !important; }*/ .top-banner-mc .m-hero--has-overlay:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 150; background: linear-gradient(270deg, rgba(4, 23, 35, 0) .39%, rgba(4, 23, 35, .85) 100%); opacity:.9; } .top-banner-mc a.m-button.m-button--primary { line-height: 1.25; text-align: center; color: #fff; font-weight: 500; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; text-transform: uppercase; padding: 19px 30px; border-radius: 16px; } .top-banner-mc .o-location { color: #e7f8ff; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; align-items: center; -moz-column-gap: 6px; -webkit-column-gap: 6px; column-gap: 6px; font-size: 14px; -ms-flex-pack: end; justify-content: flex-end; } .top-banner-mc .o-location svg { width: 20px; height: 21px; -ms-flex: 0 0 20px; flex: 0 0 20px; } .top-banner-mc .t-home-hero-temp { position: absolute; right: 45px; bottom: 150px; z-index: 500; } .top-banner-mc .for_m { display:none; } /*End of making the hero-section go behind the Navigation bar*/ /* START Css for Top Banner MEDIUM sizes device */ @media (max-width: 1199px) { .top-banner-mc .container-full h2.m-hero__title.h2 { font-size: 60px; } .top-banner-mc .m-hero__inner[class*="--middle-"] { align-items: self-start; /* margin-top: 100px; blocking this margin centers the text to the available space*/ } /* This hides the location tag .top-banner-mc .t-home-hero-temp { display:none; }*/ /* .top-banner-mc m-parallax.m-parallax { height: 900px !important; /*check this out if it is making the banner to big }*/ .top-banner-mc .m-hero__btn { display:block } .top-banner-mc a.m-button.m-button--primary { padding: 19px; } .top-banner-mc .for_m { display:flex; } } /* END css for medium sizes device */ /* START for TOP BANNER SMALL sizes device */ @media (max-width: 767px) { /* .top-banner-mc .m-breadcrumb--wrapper { display: none; } .top-banner-mc .m-hero__content { margin-top: 90px; } */ .m-hero:not(.m-hero--adapt).m-hero--medium .m-hero__bg,.m-hero:not(.m-hero--adapt).m-hero--small .m-hero__bg{height:450px!important} .top-banner-mc .container-full h2.m-hero__title.h2 { font-size: 40px; margin:15px 0px; } .top-banner-mc .m-hero__text.rte.h6 { font-family: Montserrat, Inter, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.4; color: #fff; } .top-banner-mc .m-hero__breadcrumb { display: block; } .bg_wraping { bottom: 0; height: 100% !important; } .top-banner-mc .o-waves-section { width: 2000px; } .top-banner-mc .o-waves-section img { width: 2000px !important; } .top-banner-mc .m-hero--has-overlay:before { background-color: transparent; } .o-waves-section img { width: 2000px !important; } /*This hides the location on mobile*/ .top-banner-mc .for_d { display:none; } /* Override aspect-ratio constraints on mobile */ .top-banner-mc .m-hero.m-hero--adapt { min-height: 375px !important; height: auto !important; position: relative; } .top-banner-mc .m-hero.m-hero--adapt .m-hero__bg { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; height: 100% !important; min-height: 0 !important; padding-block-end: 0 !important; z-index: 0; } .top-banner-mc .m-hero.m-hero--adapt .m-hero__inner { position: relative; min-height: 375px; z-index: 2; height: auto; display: flex; align-items: center; } /* Ensure content doesn't collapse margins */ .top-banner-mc .m-hero.m-hero--adapt .m-hero__content { margin-top: 0; margin-bottom: 0; padding-top: 135px; padding-bottom: 135px; } } /* END css Top Banner for small sizes device */ /* START --- Navigation Bar*/ /*Header for Desktop*/ .m-header__desktop { position: relative; height: 90px; z-index: 9999; background: rgba(0, 0, 0, .15); backdrop-filter: blur(15px); align-content: center; } .template-product .m-header__desktop { background: #113E59; backdrop-filter: none; } .m-header__desktop .m-menu__link--main { color: white; /*padding: 15px 20px !important;*/ font-weight: 600; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 18px; } .m-header__container { padding-right: 0; } .m-header__inner { padding-left: 60px; } @media (max-width: 1579px) { .m-header__inner { padding-left: 20px; } } @media (max-width: 1199px) { /* .m-header__desktop { height: 60px; }*/ /* mobile menu wave */ .mobile_wave { position: absolute; bottom: 0; z-index: 9999; height: 60px !important; width: 1800px !important; } } /* header.m-header__desktop { background-color: transparent !important; color: #ffff } */ /* sticky header background color*/ .m-header.stuck.transparent-on-top .m-header__desktop,.m-header.stuck.transparent-on-top .m-header__mobile { background-color: rgba(0,0,0,.15) !important; backdrop-filter: blur(15px); } .m-header.stuck.transparent-on-top .m-header__desktop .m-color-default{ color: #fff !important; } /*Header Top Bar with announcements*/ /* .m-topbar.transparent-on-top { background: rgba(0, 0, 0, .15); backdrop-filter: blur(15px); color: white; }*/ .m-topbar.transparent-on-top { background: #6bc4e8; color: #113e59; } /* .m-topbar.transparent-on-top::after { content: ""; Make sure the after element is displayed display: block; /* Ensures it behaves like a block element background-image: url('https://www.flaska.eu/wp-content/themes/flaska/images/waves-gray.svg'); background-size: auto 4px; /* Set the background height to 4px background-repeat: repeat-x; /* Repeat horizontally height: 4px; /* Set the height of the pseudo-element width: 100%; /* Ensure it spans the full width of the top bar position: absolute; /* Position it under the top bar bottom: 0; /* Place it at the bottom of the top bar left: 0; /* Align it to the left */ z-index: 1; /* Make sure it's behind the content of the top bar } /*Header for Mobile*/ header.m-header__mobile { /*background-color: transparent !important;*/ color: #ffff } /* .m-section-header .m-header.stuck.transparent-on-top .m-header__mobile { background-color: #0000; } */ .m-header.scroll-up .m-header__wrapper { background: rgba(0, 0, 0, .15); } /* Default state when the drawer is closed (apply blur) */ .m-header__mobile { position: relative; height: 60px; z-index: 150; background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(15px); /* Apply blur effect when drawer is closed */ -webkit-backdrop-filter: blur(15px); align-content: center; transition: background 0.3s ease, backdrop-filter 0.3s ease; } .template-product .m-header__mobile { background: #113e59; backdrop-filter: none; } /* When the drawer is open (ignore the blur effect) */ .header-drawer-open { backdrop-filter: none; /* Force removal of blur */ -webkit-backdrop-filter: none; } .m-header__mobile.container-fluid { padding: 0 0 0 15px; } .m-header__mobile-right { background: #fe978c; height: 100%; display: flex; justify-content: space-around; width: 100%; align-items: center; } .m-header__mobile .m\:w-3\/12 { width: 100%; } /*Header Mobile menu-drawer*/ .m-menu-drawer .m-menu-drawer__wrapper { left: 0; right: 0; height: 100vh; width: 100%; background: rgba(17, 62, 89, .8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 990; display: flex; overflow-x: scroll; overflow-x: hidden; transition: top 240ms; color: #ffff; } .m-menu-drawer__navigation.m-menu-mobile { display: flex; flex: 1; flex-direction: column; height: 100%; justify-content: flex-start; padding: 125px 20px 0 20px; } .m-menu-drawer__content ul li { list-style: none; padding: 0; border-bottom: 1px solid rgba(231, 248, 255, .5); } li.m-menu-mobile__item.active .m-menu-mobile__link { color:#fe978c; /* highlight color */ font-weight: 700; } .m-menu-mobile .m-menu-mobile__item>a { padding: 12px 16px 12px 0px; color: #fff; font-weight: 500; } .m-menu-customer__label a.m-button { padding: 20px; } .m-menu-drawer__wrapper{ width: 100%; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; max-width: 1540px; } .m-menu-drawer .m-menu-drawer__wrapper { top: 0 !important; } .m-header__mobile .m-header__mobile-right { z-index: 9; flex: 1; } .m-header__mobile .m-logo { z-index: 5; } .m-header__mobile .m-menu-button { z-index: 5; } /*.m-menu-drawer .m-menu-drawer__wrapper { z-index: 1; }*/ .m-menu-drawer{ top:0 !important; z-index: 0 !important; } /* END --- Navigation Bar*/ .m-menu-customer__wrapper{ margin-bottom:60px !important; } .m-menu-customer{ margin-top: 0 !important; } /* START Spots custom class daily_hydration*/ .daily-hydration { padding: 220px 20px 95px 20px; } @media (max-width: 767px) { .daily-hydration { padding: 150px 10px 0px 10px; } } /* END Spots custom class daily_hydration*/ /* Background for CTA sections in home*/ .cta-light-blue .container-full { background: linear-gradient(180deg, #f3fbff 0%, white 100%); } /* -------------------------*/ /*----DISCOVER VIDEO ----*/ /* START css for Video Hero content (.video-hero) */ .video-hero .m-hero__inner{ width: 100%; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; max-width: 1340px; bottom: auto; padding-top: 0px; padding-bottom: 0px; } .video-hero .m-hero__content{ position: relative; z-index: 200; padding: 185px 0 450px 0; } @media (max-width: 767px) { .video-hero .m-hero__content { padding-top:115px; padding-bottom: 345px; } } @media (max-width: 767px) { .video-hero .m-hero--large .m-hero__inner { padding-top: 40px; padding-bottom: 40px; } } /*For Breadcrumb only*/ .video-hero .m-breadcrumb--itempage .container { width: 100%; margin: 0 auto; padding: 0 15px 0 0; max-width: var(--container-width, 1280px); } .video-hero .m-breadcrumb--item { padding: 0px; color: #6bc4e8; } .video-hero .m-breadcrumb--item-current { padding: 0px; color: #fff; } .video-hero .m-breadcrumb--wrapper { margin: 0px; } .video-hero .m-breadcrumb--separator { display: flex; margin: 0px 8px 0px 8px; } /*@media (max-width: 767px) { .video-hero .m-hero__breadcrumb { display: none; } }*/ /*This makes the hero-section go behind the Navigation bar*/ .m-section.m-hero-section.video-hero { position: relative; margin-top: -120px; /* Adjust according to the header height */ z-index: 1; /* Move it behind the header */ width: 100vw; /* Make it full-width */ } @media (max-width: 767px) { .video-hero .m-hero:not(.m-hero--adapt).m-hero--large .m-hero__bg { height: 640px; } } /*Changes the Overlay color*/ .video-hero .m-hero--has-overlay:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background: linear-gradient(0deg, #0c2f45 0%, #0c2f45 15%, rgba(0, 255, 148, 0) 98.94%); opacity: unset; } .video-hero h3.m-hero__title.h2 { color: #fff; text-shadow: 0px 4px 20px rgba(0, 0, 0, .35); font-size: 80px; font-weight: 700; line-height: 1.1; text-transform: uppercase; margin-bottom: 5px; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; padding-top: 0px; } @media (max-width: 767px) { .video-hero h3.m-hero__title.h2 { font-size: 48px; } } .video-hero .m-hero__text { font-size: 20px; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; font-weight: 600; line-height: 1.48; margin-top: 7px; } .video-hero .m-hero__text p{ color: #fff; } @media (max-width: 767px) { .video-hero .m-hero__text { font-size: 16px; font-weight: 500; margin-top: 17px; } } .video-hero .o-location { color: #e7f8ff; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; align-items: center; -moz-column-gap: 6px; -webkit-column-gap: 6px; column-gap: 6px; font-size: 14px; -ms-flex-pack: end; justify-content: flex-end; } .video-hero .o-location svg { width: 20px; height: 21px; -ms-flex: 0 0 20px; flex: 0 0 20px; } .video-hero .t-home-hero-temp { position: absolute; right: 20px; bottom: 350px; z-index: 1; } /*This hides the location on mobile*/ @media (max-width: 767px) { .video-hero .t-home-hero-temp { display:none; } } /*DISCOVER PAGE*/ /*START Process */ .process .container-full { background-color: #061D2B; } .process .m-gradient { background: transparent; } .process h2 { color: #6bc4e8; text-align: center; text-align: center; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; font-size: 30px; font-weight: 700; text-transform: uppercase; margin-bottom: 50px; } .process .m-richtext__description { position: relative; font-style: normal; line-height: 1.5; display: flex; align-items: center; font-weight: 400; } .process-left .m-richtext__description { padding-right: 30px; } .process-right .m-richtext__description { padding-left: 30px; } .process-left .m-richtext__description p, .process-right .m-richtext__description p{ color: #fff; } .process-left .m-richtext__description::after { content: ""; position: absolute; right: 0; top: 50%; width: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 51%, rgba(255, 255, 255, 0) 100%); opacity: .3; height: 230px; transform: translateY(-50%); } .process-right .m-richtext__description::after { content: ""; position: absolute; left: 0; /* Move the line to the left for .proces-right */ top: 50%; width: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 51%, rgba(255, 255, 255, 0) 100%); opacity: .3; height: 230px; transform: translateY(-50%); } @media (max-width: 1199px) { .process-left .m-richtext__description::after { right: auto; left: 50%; transform: translateX(-50%); height: 1px; width: 230px; top: auto; bottom: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 51%, rgba(255, 255, 255, 0) 100%); } .process-right .m-richtext__description::after { right: auto; left: 50%; bottom: auto; top: 0; transform: translateX(-50%); height: 1px; width: 230px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 51%, rgba(255, 255, 255, 0) 100%); } .process-left .m-richtext__description { padding-right: 0; padding-bottom: 30px; max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; } .process-right .m-richtext__description { padding-right: 0; padding-top: 30px; max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; } /* This makes that text and images take th whole width instead for two columns*/ .process .md\:m\:w-1\/2 { width: 100%; /* This is for the text block*/ } .process .lg\:m\:w-1\/2 { width: 100%; /* This is for the image block*/ } } /*Wave Full Dark Blue Discover */ .wave-full-dark-blue { background: #061D2B; } /*Wave Dark Blue Discover */ .wave-dark-blue { background: #061c2b; } /* Cosmogram collection */ .cosmo2 .m-section__header { max-width: 800px; margin-left: auto; margin-right: auto; } .cosmo2 h2 { color: #6bc4e8; text-align: center; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; font-size: 30px; font-weight: 700; text-transform: uppercase; margin-bottom: 50px; } .cosmo2 .m-section__heading { position: relative; text-align: center; margin-bottom: 50px; /* Space under the heading */ } .cosmo2 .m-section__heading:after { content: ""; display: block; max-width: 330px; margin-left: auto; margin-right: auto; margin-top: 50px; /* Adjust this value to increase the space between the heading and wave */ background-image: url(https://flaska.eu/wp-content/themes/flaska/images/waves-gray.svg); background-size: auto 4px; background-repeat: repeat-x; height: 4px; width: 100%; } .cosmo2 .m-section__description { color: #fff; text-align: center; line-height: 1.5; margin-bottom: 50px; } .cosmo2 .m-icon-box__heading { color: #fff; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; text-transform: uppercase; padding: 0 10px; } .cosmo2 .m-icon-box__heading hr { box-sizing: content-box; width: 18px; height: 1px; background: #fff; border: none; margin: 2px auto 4px auto; } .cosmo2 .container-full { background: #051722; } .cosmo2 .m-icon-box { background: transparent; } .cosmo2 .m-icon-box__inner { display: flex; flex-direction: column; justify-content: center; text-align: center; } .cosmo2 .m-icon-box__external-image-wrapper { border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 15px; padding: 30px; display: flex; align-items: end; justify-content: center; margin-bottom: 20px; height: 310px; } .cosmo2 .m-icon-box__heading, .cosmo2 .m-icon-box__description { color: #fff; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; text-transform: uppercase; padding: 0 10px; font-size:17px; } .cosmo2 h3.m-icon-box__heading.h4::after { content: ""; display: block; width: 18px; height: 1px; background-color: white; margin: 0 auto; margin-top: 5px; } .cosmo2 .m-icon-box__heading hr { box-sizing: content-box; width: 18px; height: 1px; background: #fff; border: none; margin: 2px auto 4px auto; } .cosmo2 .m-icon-box { /*width: 140px; /* Set fixed width for the icon box */ max-width: 100%; /* Make sure it doesn't grow beyond the fixed width */ } .cosmo2 .m-icon-box__content hr { display: none; } .cosmo2 .m-icon-box__inner { display: flex; flex-direction: column; align-items: center; width: 100%; /* Make the inner content fit the box width */ } .cosmo2 .m-mixed-layout__inner { margin-left: 0; margin-right: 0; display: flex; justify-content: center; } .cosmo2 .m-image{position:unset;} .cosmo2 .m-image img { margin: 0 auto; position: unset !important; object-fit: contain !important; width: auto; } .cosmo2 .m-icon-box__external-image-wrapper.m\:w-full img { width: 50%; margin: 0 auto; } .cosmo2 .m-image::before{padding-top:0;} .cosmo2 .m-icon-box__badge img{ height: 150px; width: auto; display: flex; justify-content: center; aspect-ratio: 1; } .cosmo2.cosmo_img .m\:column:nth-child(1) .m-icon-box__external-image-wrapper img{ width:101px; } .cosmo2.cosmo_img .m\:column:nth-child(2) .m-icon-box__external-image-wrapper img{ width:172px; } .cosmo2.cosmo_img .m\:column:nth-child(3) .m-icon-box__external-image-wrapper img{ width:133px; } .cosmo2.cosmo_img .m\:column:nth-child(4) .m-icon-box__external-image-wrapper img{ width:22px; } @media (max-width: 767px) { .cosmo2.cosmo_img .m-mixed-layout--mobile-scroll .m-mixed-layout__inner>* { flex: none; width: auto !important; } .cosmo2 .m-mixed-layout__inner { justify-content: left; } } /*CTA on dark background*/ .disc-cta{ background: #051722; } /*Wave Dark Blue Discover */ .wave-dark-blue .o-waves-section { background: #051722; } /*DISIGN HOTSPOT*/ /*Background*/ .design .t-discover-design { background: linear-gradient(180deg, #082639 0%, #0a334d 100%); } /* THE BENEFITS*/ .thebenefits .container-full { background: linear-gradient(180deg, #0a334d 0%, #0c4162 100%); } .thebenefits .m-section__header { max-width: 800px; margin-left: auto; margin-right: auto; margin-bottom: 50px; } .thebenefits h2 { color: #fe978c; text-align: center; margin-bottom: 15px; font-weight: 800; font-size: 50px; } @media (max-width: 767px) { .thebenefits h2 { font-size: 30px; } } .thebenefits .m-section__heading { position: relative; text-align: center; margin-bottom: 30px; /* Space under the heading */ } .thebenefits .m-section__heading:after { content: ""; display: block; max-width: 330px; margin-left: auto; margin-right: auto; margin-top: 15px; /* Adjust this value to increase the space between the heading and wave */ background-image: url(https://flaska.eu/wp-content/themes/flaska/images/waves-gray.svg); background-size: auto 4px; background-repeat: repeat-x; height: 4px; width: 100%; } .thebenefits .m-section__description { text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; margin-top: 0px; color: #fff; font-size: 20px; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; font-weight: 600; line-height: 1.48; } .thebenefits .m-icon-box { background: transparent; } .thebenefits .m-icon-box-section__wrapper { margin-left: 0px; margin-right: 0px; } /* .thebenefits .m-icon-box__inner { max-width: 220px; }*/ .thebenefits .m-mixed-layout__inner { display: -ms-grid; display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; max-width:1090px; margin:0 auto; } @media (max-width: 991px) { .thebenefits .m-mixed-layout__inner { padding-left:10px; padding-right: 10px; grid-template-columns: repeat(2,1fr); } } @media (max-width: 767px) { .thebenefits .m-mixed-layout__inner { padding-left:15px; padding-right: 15px; grid-template-columns: repeat(1,1fr); } } .thebenefits .m-mixed-layout--mobile-scroll .m-mixed-layout__inner>* { flex: none; width: auto !important; } .thebenefits .m-mixed-layout--mobile-scroll{ padding-left: 0 !important; } .thebenefits .m-mixed-layout__inner .m\:column {padding: 0!important;} .thebenefits .icon-box-item__inner{ background: rgba(4, 23, 35, .1); border-radius: 15px; padding: 45px 30px 25px 30px; text-align: center; flex: 1; height:220px; } @media (max-width: 991px) { .thebenefits .icon-box-item__inner { padding: 30px 20px; height: auto; } } .thebenefits .m-icon-box .m-button { margin-top: 0px; } .thebenefits a.m-button.m-button--plain::after { content: "\2192"; margin-left: 5px; } .thebenefits a.m-button { text-transform: uppercase; color: #6bc4e8; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; font-size: 14px; } .thebenefits .icon-box-item__number { color: #fff; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.2; text-transform: uppercase; margin-bottom: 25px; } .thebenefits .icon-box-item__number::after { content: ""; display: block; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 51%, rgba(255, 255, 255, 0) 100%); opacity: .3; margin-top: 20px; } .thebenefits .icon-box-item__text{ color: #fff; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.2; } .thebenefits a.m-button:hover { text-decoration: none !important; color: #fe978c; } .disc-cosmo { background: linear-gradient(180deg, #0c4162 0%, #0e4d76 100%); } .disc-cosmo .m-custom-content__wrapper{ justify-content: center; } .disc-cosmo .m-gradient { background: transparent; } .disc-cosmo .m-custom-content__block-inner { width: 150px; margin-left: auto; margin-right: auto; } /*VIBRATION SECTION - Custom Content*/ /*Section background*/ .vibration { background: linear-gradient( 180deg, #0e4d76 0%, /* ~42.8571% color */ #105a89 92%, /* matches original at 56% */ #125b89 100% /* ~57.1428% color */ ); padding-bottom: 60px; } .vibration .m-color-default { background: transparent; max-width: 1190px; margin-left: auto; margin-right: auto; } .vibration h2.m-section__heading { color: #fe978c; margin-bottom: 15px; font-size: 50px; font-weight: 800; line-height: 1.4; text-transform: uppercase; hyphens: auto; word-wrap: break-word; overflow-wrap: break-word; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; position: relative; /* Needed to position :after relative to the heading */ } @media (max-width: 767px) { .vibration h2.m-section__heading { font-size: 36px; } } /* Wave after title */ .vibration h2.m-section__heading:after { content: ""; display: block; background-image: url(https://flaska.eu/wp-content/themes/flaska/images/waves-gray.svg); background-size: auto 4px; background-repeat: repeat-x; height: 4px; width: 330px; margin: 0 0 25px 0; position: relative; margin-top: 15px; } .vibration .m-section__description { max-width: 600px; color: #fff; font-size: 20px; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; font-weight: 600; line-height: 1.48; } .vibration .m-richtext__description p { color: #fff; line-height: 1.5; font-family: "Inter", Helvetica, Arial, sans-serif; } /* Discover Tab Section*/ .tabbed-sliders-section { background: linear-gradient(180deg, #125b89 0%, #2b6990 100%); } .tabbed .swiper-pagination { display: none; } @media (max-width: 767px) { /* .tabbed .swiper-slide { margin-right: 20px !important; Set desired margin }*/ .tabbed .swiper { overflow: visible; } } .tabbed .swiper-button-prev, .tabbed .swiper-button-next { width: 60px; height: 60px; opacity: 1; border-radius: 15px; -webkit-transition: all 120ms ease-out; transition: all 120ms ease-out; margin-top: -30px; background: #113e59; color: #fff; position: absolute; top: 300px; } .tabbed .swiper-button-next:after { content: ''; display: inline-block; width: 13px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 20' fill='%23fff'%3E%3Cpath d='M10.6641 9.33594C11.0312 9.70313 11.0312 10.2969 10.6641 10.6602L4.41406 16.9141C4.04688 17.2813 3.45312 17.2813 3.08984 16.9141C2.72656 16.5469 2.72266 15.9531 3.08984 15.5898L8.67578 10.0039L3.08594 4.41406C2.71875 4.04688 2.71875 3.45313 3.08594 3.08985C3.45312 2.72656 4.04688 2.72266 4.41016 3.08985L10.6641 9.33594Z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; } .tabbed .swiper-button-prev:after { content: ''; display: inline-block; width: 13px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 20' fill='%23fff'%3E%3Cpath d='M1.83594 10.6641C1.46875 10.2969 1.46875 9.70312 1.83594 9.33984L8.08594 3.08594C8.45313 2.71875 9.04688 2.71875 9.41016 3.08594C9.77344 3.45312 9.77734 4.04687 9.41016 4.41015L3.82422 9.99609L9.41406 15.5859C9.78125 15.9531 9.78125 16.5469 9.41406 16.9102C9.04688 17.2734 8.45312 17.2773 8.08984 16.9102L1.83594 10.6641Z'/%3E%3C/svg%3E") no-repeat center; background-size: contain; } @media (max-width: 1199px) { .tabbed .swiper-button-prev, .tabbed .swiper-button-next { display: none; }} /* ENDO of Discover Tab Section*/ .disc-know-more { background: linear-gradient(180deg, #2b6990 0%, #4e7c99 100%); } .disc-bott { background: linear-gradient(180deg, #4e7c99 0%, #5f859e 100%); } /* story year section */ .story_years{ padding:50px 0px; } .story_years .m-bullet-list-svg__bullets li::before { top: 12px; } .story_years .m-bullet-list-svg__bullets li { padding: 0; text-align: left; padding-left: 20px; } .story_years .m-bullet-list-svg__title { text-align: left !important; } .story_years .m-promotion { align-items: flex-start; } .story_years .m-promotion__item{ position:relative; margin-top:15px; } .story_years .m-promotion__item .shadow_bg { position: absolute; left: 10px; right: 10px; top: 0; bottom: 15px; box-shadow: 10px -40px 50px #00000010; z-index: 100; border-radius: 15px; } .story_years .m-bullet-list-svg { width: 300px; padding: 10px 30px; padding-bottom:100px; } @media (max-width: 767px){ .story_years .m-section__title{ width:98% !important; hyphens:none !important; } } .story_years .m-bullet-list-svg__icon::after { content: ""; height: 250px; z-index: 9; width: 1px; } /*--------------------------------------------------------------*/ /*spiritual collection*/ .spiritual_collection h2.m-section__heading.h2.m-scroll-trigger.animate--fade-in-up { text-transform: uppercase; font-weight: bolder; font-size: 50px; color: #113e59; font-family: montserrat; } /*--------------------------------------------------------------*/ /* /// THE STORY /// */ /* This rule makes the toggle to work as expected*/ .story_1 .story-wrapper, .story_2 .story-wrapper, .story_3 .story-wrapper, .story_last .story-wrapper { max-width: 1350px; margin: 0 auto; } /* Gradients for THE STORY background*/ .story_1 .container-full { background: linear-gradient(180deg, #f6f6f6 0%, #f7f7f7 100%); } .story_2 .container-full { background: linear-gradient(180deg, #f7f7f7 0%, #f9f9f9 100%); } .story_3 .container-full { background: linear-gradient(180deg, #f9f9f9 0%, #fbfbfb 100%); } .story_last .container-full { background: linear-gradient(180deg, #fbfbfb 0%, #fff 100%); } /* ------- */ /* Special Case for .story_last */ .story_1 .t-story-years-item-image-drop svg { left: -28px; /* Specific adjustment for story_# */ width: 57px; /* Special width for story_# SVG */ } .story_2 .t-story-years-item-image-drop svg { left: -23px; /* Specific adjustment for story_# */ width: 47px; /* Special width for story_# SVG */ } .story_3 .t-story-years-item-image-drop svg { left: -18px; /* Specific adjustment for story_# */ width: 37px; /* Special width for story_# SVG */ } .story_last .t-story-years-item-image-drop svg { left: -13px; /* Specific adjustment for story_last */ width: 27px; /* Special width for story_last SVG */ } @media screen and (max-width: 991px) { /*.story_last .m-image-with-text__content { padding-top: 35px; }*/ .story_last .m-richtext__title { margin-top: 100px; } .story_1 .t-story-years-item-image-drop svg { left: -18px; /* Specific adjustment for story_# */ width: 37px; /* Special width for story_# SVG */ } .story_2 .t-story-years-item-image-drop svg { left: -16px; /* Specific adjustment for story_# */ width: 33px; /* Special width for story_# SVG */ } .story_3 .t-story-years-item-image-drop svg { left: -15px; /* Specific adjustment for story_# */ width: 30px; /* Special width for story_# SVG */ } .story_last .story_snowflack_image img { float: right; } .story_last .story_snowflack_image{ position: absolute; right: 80px; top: 0; transform: translate(50%, -40%); } } /* END of customizations for The Story First Part */ .family-commitment { background: linear-gradient(180deg,#e7f8ff -1.54%,#fff 86.04%) !important; padding-top: 50px; } .family-commitment .m-gradient { background: linear-gradient(180deg,#e7f8ff -1.54%,#fff 86.04%) !important; } .family-commitment #m-custom__block--image_cBNAjx { mix-blend-mode: multiply; } .family-commitment .m-richtext__description p { font-size: 24px; } .family-commitment h3.m-richtext__title{ font-weight: bolder; text-transform: uppercase; color: #113E59; } .family-commitment .m-richtext__description { margin-top: 24px; color: #555; } @media (max-width:1199px){ .family-commitment h3.m-richtext__title{ font-size: 36px; } .family-commitment .m-richtext__description p { font-size: 20px; } } .family-commitment-right .m-richtext__description p{ font-size: 16px; } .family-commitment-right .m-richtext__description p:last-child { color: #113e59; text-transform: uppercase; padding-top: 50px; } /* Get own glass section */ .get_own_glass a.o-shop-button.o-cta-bar__button:hover { background: #6bc4e8; } .get_own_glass button.o-square-button:hover { background: #6bc4e8;; border: 1px solid #6bc4e8; } /* family people css*/ .family-people .m-icon-box__icon img { border-radius: 16px; } .family-people .m-icon-box--vertical .m-icon-box__content { margin-left: 30px; margin-right: 30px; } .family-people .m-icon-box__heading { font-size: 20px; color: #113e59; font-weight: 550; } .family-people .m-icon-box__description { text-align: left; font-size: 14px; } .family-people .m-icon-box__description p{ line-height: 1.71; } .family-people .m-icon-box__description::after { content: ""; bottom: -11px; font-size: 70px; font-family: 'circular'; line-height: 1; height: 27px; width: 35px; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg id='svg-quote' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28' fill='%23113e59'%3E%3Cpath d='M32.2736 3.07921C34.2911 5.22096 35.3744 7.62468 35.3744 11.5212C35.3744 18.3742 30.5638 24.5178 23.5645 27.5542L21.8163 24.8564C28.3479 21.3224 29.6244 16.7386 30.1347 13.8483C29.0831 14.3921 27.7064 14.5832 26.3569 14.4583C22.8233 14.1306 20.0383 11.2298 20.0383 7.62467C20.0383 3.83922 23.107 0.770508 26.8925 0.770508C28.994 0.770508 31.0034 1.73097 32.2736 3.07921ZM12.6902 3.07921C14.7077 5.22096 15.7911 7.62468 15.7911 11.5212C15.7911 18.3742 10.9804 24.5178 3.98117 27.5542L2.23299 24.8564C8.7645 21.3224 10.0411 16.7386 10.5513 13.8483C9.49968 14.3921 8.12307 14.5832 6.77352 14.4583C3.23996 14.1306 0.455078 11.2298 0.455078 7.62467C0.455078 3.83922 3.52379 0.770508 7.30924 0.770508C9.41063 0.770508 11.4202 1.73097 12.6902 3.07921Z' /%3E%3C/svg%3E"); background-repeat: no-repeat; margin-top: 5px; } .fl_people_dark_blue h2 { font-size: 50px; text-transform: uppercase; font-weight: 800; color: #113e59; } /* THE PEOPLE */ .fl-people-page .container-full { background: #fff; position: relative; z-index: 1; max-width:880px; } .fl-people-page .container-full::before { content: ""; background-image: url(//flaska.es/cdn/shop/files/cosmogram-symbol-gray.svg?v=599009768605675718); background-repeat: no-repeat; background-position: center; background-size: contain; position: absolute; left: 50%; right: 0; top: 50%; bottom: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; opacity: .2; max-width: 480px; max-height: 480px; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .fl-people-page .m-richtext__description.rte { color: #555; font-size:16px; line-height:30px; } @media (max-width:767px){ .fl-people-page .container-full { padding-top: 0px; } } /* Flaska the people page */ .fl-people-page h2.m-richtext__title { font-weight: bold; text-transform: uppercase; font-size: 30px; color: #113e59; } .fl-people-page .m-richtext__button { display: flex; align-items: center; /* Align text and SVG vertically */ } .fl-people-page .m-button { display: flex !important; /* Ensure flexbox layout */ align-items: center !important; /* Keep text and icon aligned */ justify-content: center !important; /* Center content */ gap: 8px !important; /* Space between text and SVG */ line-height: 1.25 !important; text-align: center !important; position: relative !important; color: #fff !important; font-weight: 500 !important; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif !important; text-transform: uppercase !important; border: 1px solid #113e59 !important; padding: 19px 30px !important; border-radius: 16px !important; -webkit-transition: all 120ms ease-out !important; transition: all 120ms ease-out !important; background: #113e59 !important; font-size: 16px !important; white-space: nowrap !important; /* Prevent text wrapping */ } .fl-people-page .m-richtext__button svg { width: 1em !important; /* Scales with text size */ height: 1em !important; /* Matches text height */ flex-shrink: 0 !important; /* Prevents shrinking */ } .in-numbers h2.m-section__heading { font-size: 50px; font-weight: 800; color: #6cb4e8; text-transform:uppercase; } @media (max-width:767px) { .in-numbers h2.m-section__heading { font-size: 36px; } } @media (min-width:768px){ .in-numbers .m-mixed-layout__inner { display: -ms-grid; display: grid; grid-template-columns: repeat(3, 1fr); -moz-column-gap: 60px; -webkit-column-gap: 60px; column-gap: 60px; } .in-numbers .m-mixed-layout__wrapper{ max-width: 1350px; margin: auto; } } .in-numbers .m-icon-box__heading { color: #113e59; font-size: 30px; font-weight: 700; line-height: 1.12; margin-bottom: 15px; } .in-numbers .m-icon-box__icon{ width:78px !important; height:105px; } /* YOUR EXPERIENCE 2 */ .your-experience2 h2.m-section__heading.h2 { font-size: 50px; font-weight: 800; color: #113e59; } @media (max-width: 767px){ .your-experience2 h2.m-section__heading.h2 { font-size: 36px; } } .your-experience2 .m\:flex { display: block; } .your-experience2 .m-custom-content__wrapper { column-count: 2; column-gap: 30px; /* Adjust the gap between the columns as needed */ max-width: 1350px; margin: auto; } .your-experience2 svg { height: 20px; } .your-experience2 .m-custom-content__wrapper > div { display: inline-block; width: 100%; margin-bottom: 30px; padding: 0; } .your-experience2 .m-custom-content__wrapper > div > * { -webkit-transition: all 480ms ease-out; transition: all 480ms ease-out; opacity: 1; padding: 60px 90px; background: #fff; border-radius: 16px; } .your-experience2 .m-custom-content__block-inner .m-richtext{ text-align: center; padding: 30px; } .your-experience2 .m-custom-content__block-inner .m-richtext .m-richtext__title { color: #555; display: inline-block; padding: 18px 40px; background: #e7f8ff; border-radius: 16px; margin-bottom: 25px; font-size: 1rem; line-height: 1.5; font-weight: 500; font-family: "Inter",Helvetica,Arial,sans-serif !important; } .your-experience2 .m-custom-content__block-inner .m-richtext .m-richtext__description{ margin-top: 0; margin-bottom: 20px; } .your-experience2 .m-custom-content__block-inner .m-richtext .m-richtext__description p{ color: #555 !important; line-height: 1.875; } .your-experience2 .text-testimonial-bottom { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; align-items: center; -moz-column-gap: 20px; -webkit-column-gap: 20px; column-gap: 20px; margin: 0 20px; } .your-experience2 .text-testimonial-bottom svg { width: 36px; height: 28px; -ms-flex: 0 0 36px; flex: 0 0 36px; color: #113e59; } .your-experience2 .text-testimonial-bottom .o-waves { margin-bottom: 0; flex: 1; } @media (max-width: 991px) { .your-experience2 .m-custom-content__container { padding-right: 20px; padding-left: 20px; } .your-experience2 .m-custom-content__wrapper { column-count: 1; } } /* Additional Classes for other pages where only one testimonial is shown*/ .your-experience3 .m-custom-content__wrapper { column-count: 2; column-gap: 30px; max-width: 600px; margin: auto; display: flex; } .your-experience3 .m-section__heading { color: #6bc4e8; font-size: 36px; } @media (min-width: 990px) { .your-experience3 .m-section__heading { font-size: 50px; } } .your-experience3 .m-custom-content__block-inner .m-richtext .m-richtext__title { background: #d9d9d9; } .your-experience3 .m-custom-content__block-inner .m-richtext .m-richtext__description { color: #555; } .your-experience2 .m-custom-content__wrapper > div > * { padding: 0px; } /* end your experience section */ @media (max-width: 767px){ .o-waves-section {width: 2000px !important;} .o-waves-section img {width: 2000px !important;} .your_experience h2.m-section__heading.h2 { font-size: 36px; text-transform: uppercase; } .your_experience .m-custom-content__block { width: 90%; margin: 0% 5%; background: white; padding: 20px; border-radius: 16px; } } /* the world page */ .the_world_btn .m-richtext__button .m-button { padding: 19px 30px; border-radius: 16px; border: 1px solid #113e59; background: #113e59; color: #fff; font-family: "Montserrat","Inter",Helvetica,Arial,sans-serif !important; text-transform: uppercase; display: flex; justify-content: flex-start; max-width: 315px; } svg#svg-line-arrow-right { width: 21px; font-weight: bolder; margin-left: 5px; float: right; /* line-height: 38px; */ } .the_world_btn .m-richtext__button .m-button:hover{ padding: 19px 30px; border-radius: 16px; border:1px solid #6bc4e8; background: #6bc4e8; color:#fff; box-shadow:none !important; } .the_world_btn .m-richtext__description { font-size: 24px; color: #555; margin-top:0px; } .the_world_btn .container-full { max-width: 1040px; } @media (max-width: 767px){ .the_world_btn .m-richtext__description { font-size: 20px; color: #555; } } .top_banner_overlay .m-media { background:#000; } .top_banner_overlay .media-wrapper img { opacity:.7; } /* Instagram Feed*/ .fb_insta { text-align: right; } .fb_insta .o-tinymce-content.t-people-instagram__cta.h-no-child-margins { color: #6cb4e8; } .fb_insta .o-tinymce-content.t-people-instagram__cta.h-no-child-margins a{ color: #113e59; text-decoration:underline; } .fb_insta .o-tinymce-content.t-people-instagram__cta.h-no-child-margins a:hover{ color: #fe978c; } /*mini cart drawer*/ .m-cart-drawer--active { z-index: 99999; } /* search pop up */ .m-search-popup { z-index: 99999; } /* START COLLECTIONS PAGES CUSTOMIZATION */ .col-custom, .col-custom .m-custom-content__wrapper { background: #f7f7f7; } .col-custom .container-full { max-width: 1040px; } .col-custom .m-image img { border-radius: 15px; } /* Second Text */ .col-custom .col-sml-txt p { font-size: 16px; } .col-custom .col-sml-txt .m-richtext__description { margin-bottom: 30px; } .col-custom2 .m-custom-content__wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } /*Customize background for Wave-Section*/ .col-wave-white .o-waves-section { background-color: #f7f7f7; } .col-list .m-image { --aspect-ratio: 1.6 !important; } .col-list .m-image img { border-radius: 15px; aspect-ratio: 1.6; object-fit: cover; width: 100%; display: block; margin-bottom: 10px; } @media (max-width: 767px) { .col-list .m-image img { margin-bottom: 3px; } } .col-list .m-collection-card__title .m-collection-card__link { text-transform: none; margin-left: 30px; font-size: 20px; padding: 0; background: none; border: none; color: #113e59; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; font-weight: 500; -webkit-transition: all 120ms ease-out; transition: all 120ms ease-out; } .col-list .m-collection-card__link:after { content: ""; display: inline-block; width: 21px; /* Match the SVG width */ height: 12px; /* Match the SVG height */ margin-left: 10px; /* Spacing */ -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat; mask: url('data:image/svg+xml;utf8,') no-repeat; -webkit-mask-size: contain; mask-size: contain; background-color: currentColor; /* Matches the text color */ } .col-list .o-waves-section { margin-top: -150px; } /* header hamburger */ .m-hamburger-box__inner { background: #fff !important; } .m-hamburger-box__inner:before, .m-hamburger-box__inner:after { background: #fff !important; } /*----------- */ /* BLOG POST Home Bottom */ .blogFLA { --color-bg-gradient-start: #337592; --color-bg-gradient-end: #6a8ea3; --color-title: #113e59; --color-title-hover: #6bc4e8; --color-excerpt: #fff; --color-arrow: #113e59; --font-size-title-lg: 50px; --font-size-title-sm: 36px; --font-size-article-title: 30px; --font-size-article-title-mobile: 20px; --font-size-excerpt: 14px; --line-height-title: 1.4; --line-height-excerpt: 1.71; --border-radius-img: 15px; --gap-lg: 60px; --gap-md: 30px; --gap-sm: 20px; --article-column-width: 215px; } /* Background */ .blogFLA .container-full { background: linear-gradient(180deg, var(--color-bg-gradient-start) 0%, var(--color-bg-gradient-end) 100%); padding-bottom: 75px; padding-top: 70px; } /* Section Title */ .blogFLA h2 { color: var(--color-title-hover); font-size: var(--font-size-title-lg); font-weight: 800; line-height: var(--line-height-title); text-transform: uppercase; hyphens: auto; word-wrap: break-word; overflow-wrap: break-word; text-align: center; } @media (max-width: 767px) { .blogFLA h2 { font-size: var(--font-size-title-sm); font-weight: 800; text-align: left; padding-left: 20px; } .blogFLA .m-section__header { margin-bottom: 0px; } .blogFLA .m-button--plain { padding-left: 20px; } } /* Grid Wrapper */ .blogFLA .m-blog-grid__wrapper { max-width: 1350px; margin: 0 auto; } .blogFLA .m-mixed-layout { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; } .blogFLA .m-mixed-layout__inner { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--gap-lg); margin-bottom: var(--gap-lg); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } @media (min-width: 1199px) { .blogFLA .m-article-card { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--gap-md); height: 100%; /*align-items: flex-start; without this property Read-more button get pushed to the bottom*/ } /*.blogFLA .m-article-card__image { min-width: 360px; flex-basis: 360px; } .blogFLA .m-article-card__image img { min-width: 360px; height: auto; }*/ .blogFLA .m-article-card__content { flex-grow: 2; } } @media (max-width: 1199px) { .blogFLA .m-mixed-layout__inner { display: grid; flex-direction: column; column-gap: var(--gap-md); margin: 20px; } .blogFLA .m\:column { display: flex; flex-direction: column; } .blogFLA .m-article-card { display: flex; flex-direction: column; flex-grow: 1; } } @media (max-width: 767px) { .blogFLA .container-full { padding-left: 0px; padding-right: 0px; padding-top: 20px; } .blogFLA .m-mixed-layout__inner { grid-template-columns: repeat(2, minmax(var(--article-column-width), 1fr)); column-gap: var(--gap-sm); padding-left: 20px; padding-right: 20px; } .blogFLA .m-mixed-layout__inner > * { min-width: var(--article-column-width); scroll-snap-align: start; } .blogFLA .m-mixed-layout__inner::-webkit-scrollbar { display: none; } } /* Column for Article Card Image */ .blogFLA .m\:column { padding-left: 0px; padding-right: 0px; } /* Article Card Image */ .blogFLA .m-article-card__image .m-image { aspect-ratio: 1; width: 100%; height: 100%; } @media (min-width: 1191px) and (max-width: 1280px) { .blogFLA .m-article-card__image .m-image { aspect-ratio: .8 !important; } } .blogFLA .m-article-card__image img { height: 100%; width: 100%; object-fit: cover; border-radius: var(--border-radius-img); } .blogFLA .m-article-card:hover .m-article-card__image .m-image{ transform: none; } /* Article Card Content */ .blogFLA .m-article-card__content { padding: 25px 0; display: flex; flex-direction: column; flex: 1; } /* Article Card Date */ .blogFLA .m-article-card__date { color: var(--color-excerpt); margin-bottom: 15px; line-height: 1.5; font-size: 1rem; font-weight: 500; text-align: left; font-family: "Inter", Helvetica, Arial, sans-serif; } /* Article Card Title */ .blogFLA .m-article-card__title { margin-bottom: 20px; font-size: var(--font-size-article-title); line-height: var(--line-height-title); font-weight: 800; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; text-transform: uppercase; text-align: left; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: var(--color-title) } .blogFLA .m-article-card__title:hover a { color: var(--color-title-hover); text-overflow: ellipsis; } .blogFLA .m-article-card__title a { color: var(--color-title); transition: all 120ms ease-out; overflow: hidden; text-overflow: ellipsis; line-clamp: 3; } @media (max-width: 767px) { .blogFLA .m-article-card__title { font-size: var(--font-size-article-title-mobile); } } /* Article Card Excerpt */ .blogFLA .m-article-card__excerpt { color: var(--color-excerpt); font-size: var(--font-size-excerpt); line-height: var(--line-height-excerpt); max-width: 240px; margin-bottom: 30px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; /* Enables line clamping */ -webkit-line-clamp: 3; /* Limits to 3 lines */ -webkit-box-orient: vertical; /* Specifies vertical orientation for text */ text-align: left; font-family: "Inter", Helvetica, Arial, sans-serif; font-weight: 500; } /* Read More Button */ .blogFLA .m-article-card__readmore { text-transform: uppercase; margin-top: auto; color: var(--color-title); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; transition: color 0.2s ease-out; } .blogFLA .m-article-card__readmore:hover { color: var(--color-title-hover); } .blogFLA .m-article-card__readmore.m-button.m-button--link { margin-right: auto; padding-left:0px; } /* Button ::before Rule */ .blogFLA .m-button--link::before { content: none; /* Remove underline or decorative elements */ background: none; width: 0; height: 0; display: none; } /* Section Bottom Button */ .blogFLA .m-blog-grid__button { color: var(--color-arrow); text-transform: uppercase; max-width: 1350px; margin: auto; justify-content: left; } .blogFLA .m-button--text-with-icon { color: var(--color-arrow); } .blogFLA svg { width: 21px; height: 12px; margin-left: 5px; color: var(--color-arrow); } /* Ensure Proper Aspect Ratio .blogFLA [style*="--aspect-ratio"] { --aspect-ratio: 1 !important; }*/ /* Rules specific to blogFLA-4 */ /*.blogFLA.blogFLA-4 { background: #F7f7f7; --gap-lg: 80px; Custom gap --border-radius-img: 10px; /* Custom radius } */ /* Custom styles for blogFLA-4 */ .blogFLA-4 .container-full { background: #f7f7f7; } .blogFLA.blogFLA-4 h2, .blogFLA.blogFLA-4 .m-section__description { color: #555; text-align: left; font-size: 30px; } .blogFLA.blogFLA-4 .m-article-card { max-height: 315px; background: rgba(17, 62, 89, .06); border-radius: 15px; } .blogFLA.blogFLA-4 .m-article-card__content { padding: 30px; min-width: 100%; } .blogFLA.blogFLA-4 .m-article-card__title { font-size: 24px; } .blogFLA.blogFLA-4 .m-article-card__excerpt { display: none !important; } .blogFLA.blogFLA-4 .m-article-card__date { color: #555; margin-bottom: 10px; } @media (min-width: 1200px) { .blogFLA.blogFLA-4 .m-article-card { column-gap: 0; height: 315px; min-height: 315px; grid-template-columns: 315px 1fr; } .blogFLA.blogFLA-4 .m-article-card__image { width: 315px; min-width: 315px; height: 100%; } .blogFLA.blogFLA-4 .m-article-card__image img { width: 100%; height: 100%; object-fit: cover; } .blogFLA.blogFLA-4 .m-article-card__content { height: 100%; justify-content: center; } /* Flip 3rd & 4th cards for blogFLA-4 */ .blogFLA.blogFLA-4 .m-mixed-layout__inner .m\:column:nth-child(3) .m-article-card, .blogFLA.blogFLA-4 .m-mixed-layout__inner .m\:column:nth-child(4) .m-article-card { grid-template-columns: 1fr 315px; } .blogFLA.blogFLA-4 .m-mixed-layout__inner .m\:column:nth-child(3) .m-article-card .m-article-card__image, .blogFLA.blogFLA-4 .m-mixed-layout__inner .m\:column:nth-child(4) .m-article-card .m-article-card__image { order: 2; } .blogFLA.blogFLA-4 .m-mixed-layout__inner .m\:column:nth-child(3) .m-article-card .m-article-card__content, .blogFLA.blogFLA-4 .m-mixed-layout__inner .m\:column:nth-child(4) .m-article-card .m-article-card__content { order: 1; } } @media (max-width: 1199px) { .blogFLA.blogFLA-4 .m-article-card { max-height: none; height: 100%; } } @media (max-width: 767px) { .blogFLA.blogFLA-4 .m-mixed-layout__inner { grid-template-columns: 1fr; } } /* Specific styling for the second row (reverse layout) */ /* Flip the image and content on the 3rd and 4th article cards ONLY */ @media (min-width: 1199px) { /* Default layout: image on left, content on right for all cards */ .blogFLA .m-article-card { display: grid; grid-template-columns: 315px 1fr; gap: var(--gap-md); } /* Flip 3rd & 4th cards: content on left, image on right */ .blogFLA .m-mixed-layout__inner .m\:column:nth-child(3) .m-article-card, .blogFLA .m-mixed-layout__inner .m\:column:nth-child(4) .m-article-card { grid-template-columns: 1fr 315px; /* content gets the leftover space, image is fixed 315px */ } .blogFLA .m-mixed-layout__inner .m\:column:nth-child(3) .m-article-card .m-article-card__image, .blogFLA .m-mixed-layout__inner .m\:column:nth-child(4) .m-article-card .m-article-card__image { order: 2; /* Move the image to the right column */ } .blogFLA .m-mixed-layout__inner .m\:column:nth-child(3) .m-article-card .m-article-card__content, .blogFLA .m-mixed-layout__inner .m\:column:nth-child(4) .m-article-card .m-article-card__content { order: 1; /* Content on the left */ } } .fl-know-more-word { background: #f7f7f7; } /*---- Instagram HOME ----*/ /* Flaska Instagram */ .my-flaska-moment .container-full { background: linear-gradient(180deg, #6a8ea3 0%, #90abbc 100%); } .my-flaska-moment h2.m-section__heading { font-size: 50px; font-weight: 800; color: #113e59; text-transform: uppercase; margin-bottom: 30px; /* Unified spacing for consistency */ } @media (max-width: 767px) { .my-flaska-moment h2.m-section__heading { font-size: 27px; } } /* Grid and Item Styling */ .my-flaska-moment .m-instagram__wrapper { max-width: 1350px; margin: 0 auto; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid by default */ overflow-x: auto; /* Enables horizontal scrolling */ scrollbar-width: none; /* Hides scrollbar in Firefox */ } /* Hide Scrollbar */ .my-flaska-moment .m-instagram__wrapper::-webkit-scrollbar { display: none; /* Hides scrollbar in WebKit-based browsers (Chrome, Safari, etc.) */ } .my-flaska-moment .m-instagram__item { border-radius: 16px !important; width: 100%; max-width: 313px; min-width: 200px; margin: 0; } /* Adjustments for Specific Screen Sizes */ @media (min-width: 768px) { .my-flaska-moment .m\:column { padding: 0; justify-items: center; } } @media (min-width: 768px) and (max-width: 874px) { .my-flaska-moment .m-instagram__wrapper { grid-template-columns: repeat(2, 1fr); /* Simplified for consistency */ justify-content: center; } } @media (max-width: 767px) { .my-flaska-moment .m-instagram__wrapper { display: flex; gap: 20px; } .my-flaska-moment .m-instagram__item { flex: 0 0 auto; /* Prevents shrinking */ } } /*----- Testimonials HOME -----*/ .testimonials-home { margin-bottom: -108px } @media (max-width: 767px) { .testimonials-home { margin-bottom: -60px } } /* General Container */ .testimonials-home .container-full { /*background: linear-gradient(180deg, #90abbc 0%, #b5c9d3 100%);*/ background: linear-gradient(180deg, #6a8ea3 0%, #b5c9d3 100%); padding: 70px 0 80px 0; } @media (max-width: 767px) { .testimonials-home .container-full { /*background: linear-gradient(180deg, #90abbc 0%, #b5c9d3 100%);*/ background: linear-gradient(180deg, #6a8ea3 0%, #b5c9d3 100%); padding: 70px 0 40px 0; } } .testimonials .container-full { background: transparent; padding: 70px 0 80px 0; } /* Section Header */ .testimonials-home .m-section__header { margin-bottom: 10px; padding-right: 20px; padding-left: 20px; } /* Section Heading */ .testimonials-home h2.m-section__heading { color: #113e59; font-size: 50px; font-weight: 800; line-height: 1.4; text-transform: uppercase; word-wrap: break-word; overflow-wrap: break-word; } @media (max-width: 767px) { .testimonials-home h2.m-section__heading { font-size: 36px; } } /* Slider Controls */ .testimonials-home .m-slider-controls__button { border-color: #e7f8ff; background: #e7f8ff; } .testimonials-home .m-slider-controls__button:hover { border-color: #fe978c; background: #fe978c; } /* Testimonial Wrapper */ .testimonials-home .m-testimonial__wrapper .m-testimonial__name { color: #555; display: inline-block; padding: 18px 40px; border-radius: 16px; margin: 25px auto; background: #e7f8ff; max-width: 182px; text-align: center; /* Centers text within the block */ } /* Star Styling */ .testimonials-home.m-testimonials .m-stars { display: none; } .testimonials-home .m-star svg path { fill: #113e59; /* Replace with your desired fill color */ stroke: #113e59; /* Replace with your desired stroke color */ } /* Pagination and Fraction Controls */ .testimonials-home .swiper-container .m-testimonial__fraction, .testimonials-home .swiper-pagination { display: none; } /* Hide Slider Controls*/ @media (max-width: 1058px) { .testimonials-home .m-slider-controls__button { display: none; } } .testimonials-home .m-slider-controls__button { border-radius: 15px; width: 60px; height: 60px; } .testimonials-home .m-slider-controls__button svg{ width: 13px; height: 20px; } /* Testimonial Description */ .testimonials-home .m-testimonial__description p { color: #fff; font-size: 16px; line-height: 1.875; } .testimonials .m-testimonial__description p { color: #555; font-size: 16px; line-height: 1.875; } /* Slider Item Bottom */ .testimonials-home .c-testimonials-slider-item__bottom { display: flex; align-items: center; column-gap: 20px; margin: 0 20px; } .testimonials-home .c-testimonials-slider-item__bottom svg { width: 36px; height: 28px; flex: 0 0 36px; color: #113e59; } /* Waves Divider */ .testimonials-home .o-waves { background-image: url(/cdn/shop/files/waves-gray.svg?v=1731413744); background-size: auto 4px; background-repeat: repeat-x; height: 4px; margin-bottom: 0; } .testimonials-home .c-testimonials-slider-item__waves { flex: 1; } .testimonials-home .m-slider-controls__wrapper { display: flex; /* Ensures buttons and pagination are aligned horizontally */ justify-content: space-between; /* Positions the buttons at the ends */ align-items: center; /* Vertically aligns the buttons and pagination */ max-width: 800px; /* Restricts the maximum distance between buttons */ margin: 0 auto; /* Centers the controls horizontally within the container */ } .testimonials-home .m-slider-controls__button { flex: 0 0 auto; /* Prevents the buttons from shrinking or growing */ } .testimonials-home .swiper-pagination { flex: 1; /* Allows the pagination to occupy available space between buttons */ text-align: center; /* Centers the pagination bullets */ } /* GLOBAL STYLES FOR ALL PRODUCT CARDS */ /* 1. Make .swiper-slide a flex container */ .m-product-list .swiper-slide { display: flex; flex-direction: column; max-width: 250px; height: auto; /* Ensure it takes the full height */ padding-left: 0px; padding-right: 0px; } /* 1.1 Make the wrapper to the smallest size possible */ .m-product-list .m-mixed-layout__wrapper { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; } /* 2. Make .m-product-card take up full height inside .swiper-slide */ .m-product-card { display: flex; flex-direction: column; height: 100%; /* Ensure product card fills the height of .swiper-slide */ } /* 3. Prevent image container from shrinking */ .m-product-card__media { flex-shrink: 0; /* Keeps image from being cut off */ border-radius: 15px; /* Rounded corners for all cards */ background: #fff; /* Default background for media */ } .m-product-card__media img { max-width: 100%; height: auto; display: block; padding: 20px; /*this makes the image to have more space between the picture and the edge of the container*/ } /* 4. Set up .m-product-card__content to take up remaining space in .m-product-card */ .m-product-card__content { display: flex; flex-direction: column; flex-grow: 1; /* Allows content to grow */ } /* 5. Make .m-product-card__info a flex container */ .m-product-card__info { display: flex; flex-direction: column; flex-grow: 1; /* Expands to fill available space */ } /* 6. Reserve space for title and push the price down within .m-product-card__info */ .m-product-card__title a { font-weight: 500; display: block; text-align: center; min-height: 2lh; font-size: 20px; color: #113e59; } /* 7. Push the price to the bottom of .m-product-card__info */ .m-product-card__price { font-weight: 600; font-size: 20px; line-height: 0.9; text-align: center; margin-top: auto; padding-bottom: 15px; padding-top: 15px; } /* 7.1. Font for the price */ .m-product-card__price .m-price .m-price__regular .m-price-item--regular { font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; text-transform: lowercase; color: #113e59; } .m-price__sale .m-price-item--regular { color: #113e59; } .m-price__sale .m-price-item--last { color: #fe978c; } /* 8. Push the action button to the bottom of the card */ .m-product-card--style-4 .m-product-card__content .m-product-card__action-wrapper { width: 100%; margin: 0px auto 0; } /* 9. Button Styles for All Product Cards */ .m-button--primary { padding: 7px 20px; text-align: center; color: #fff; display: inline-block; justify-content: center; align-items: center; overflow: hidden; transition: all 120ms ease-out; border-radius: 5px; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 600; background-color: #113e59; border: 0px; } .m-button--primary-light-blue { background-color: #6bc4e8; color: #113e59; } .m-button--primary-light-blue:hover { background-color: #fe978c; color: #fff; } .m-button--secondary { padding: 7px 20px; text-align: center; color: #113e59; display: inline-block; justify-content: center; align-items: center; overflow: hidden; transition: all 120ms ease-out; border-radius: 5px; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 600; background-color: #fff; border: 0px; flex-shrink: 2; } .m-button--primary:hover { background-color: #6bc4e8; border: none; color: #fff; } .m-button--secondary:hover { background-color: #113e59; border: none; color: #fff; } .m-button:not(.m-button--link,.m-link-underline,.m-button--blank):hover { box-shadow: none; } .m-button { padding: 14px; line-height: 1; text-transform: uppercase; font-weight: 600; border: 0px; display: flex; align-items: center; justify-content: center; } /* 9.1 Tags shown for new products, Sold-Out, Offer....*/ .m-product-tag { position: absolute; z-index: 10; border-radius: 5px; display: flex; padding: 7px 15px; width: auto; line-height: 1; height: auto; font-weight: 800; font-family: "Inter", Helvetica, Arial, sans-serif; font-size: 12px; left: 35px; top: 47px; } .m-product-tag--soldout { background-color: #d9d9d9; color: #555; } /* 10. Keep all 5 product cards in featured collection */ .m-mixed-layout__inner.m\:grid.m-cols-5.m\:grid-2-cols.md\:m\:grid-3-cols.lg\:m\:grid-3-cols.xl\:m\:grid-5-cols { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 20px; scrollbar-width: none; /* Hide scrollbar for Firefox */ } /* 11. Make the More and Add to cart Show for products with one or non-variant */ .m-product-card__action-wrapper { display: flex; justify-content: space-between; align-items: center; gap: 10px; /* Adjusts spacing between buttons */ } .m-button--disabled { background: #d9d9d9; pointer-events: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; opacity: 1; } /* 12. This keeps the distance to the borders for the "Feature Collections in place" */ @media (max-width: 1199px) { .m-mixed-layout__inner.m\:grid.m-cols-5.m\:grid-2-cols.md\:m\:grid-3-cols.lg\:m\:grid-3-cols.xl\:m\:grid-5-cols { display: flex; /* Switches to a flex layout for horizontal scrolling */ /* overflow-x: auto;Enables horizontal scrolling but stops the scrolling that is why we have commented */ -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ gap: 20px; /* Spacing between cards */ overflow-x: scroll; -ms-overflow-style: none; width: 100vw; margin-left: -20px; display: -ms-flexbox; display: -webkit-flex; } .m-mixed-layout__inner.m\:grid.m-cols-5.m\:grid-2-cols.md\:m\:grid-3-cols.lg\:m\:grid-3-cols.xl\:m\:grid-5-cols > * { flex: 0 0 250px; /* Ensures cards have a fixed width */ width: 250px; /* Matches the fixed width */ } /* .m-mixed-layout__inner.m\:grid.m-cols-5.m\:grid-2-cols.md\:m\:grid-3-cols.lg\:m\:grid-3-cols.xl\:m\:grid-5-cols > *:first-child { margin-left: 20px; /* Adds spacing to the first card } .m-mixed-layout__inner.m\:grid.m-cols-5.m\:grid-2-cols.md\:m\:grid-3-cols.lg\:m\:grid-3-cols.xl\:m\:grid-5-cols > *:last-child { margin-right: 20px; /* Adds spacing to the last card }*/ } /* ------------------------------ */ /* THEME-SPECIFIC STYLES */ /* LIGHT-BLUE THEME */ .fc-light-blue .container-full { background: linear-gradient(180deg, #e7f8ff 0%, #f3fbff 100%); background: linear-gradient(180deg, #e7f8ff 0%, #ffffff 100%); padding-top: 75px; } .fc-light-blue h2.m-section__heading { color: #6bc4e8; text-align: center; } @media (max-width: 767px) { .fc-light-blue h2.m-section__heading { font-size: 36px; } } .fc-light-blue .m-product-card__title a { color: #113e59; } .fc-light-blue .m-product-card__price { color: #113e59; } .fc-light-blue .m-price .m-price__regular { color: #113e59; } /* DARK-BLUE THEME */ .fc-dark-blue .container-full { /*background: linear-gradient(180deg, #337592 0%, #6a9db2 100%); nulled to add the footer wave functionality*/ background: linear-gradient(180deg, #337592 0%, #ffffff 100%); justify-content: center; padding-top: 75px; } .fc-dark-blue h2.m-section__heading { color: #113e59; font-size: 50px; text-align: center; } @media (max-width: 767px) { .fc-dark-blue h2.m-section__heading { font-size: 36px; } } .fc-dark-blue .m-product-card__title a { color: #113e59; } .fc-dark-blue .m-product-card__price { color: #113e59; } .fc-dark-blue .m-price .m-price__regular { color: #113e59; } .fc-white .container-full { background: #f7f7f7; } .waves-white .container-full{ background: #f7f7f7; } .cta-story .w-full { /*background: linear-gradient(180deg, #6a9db2 0%, #b5c9d3 100%);*/ } /* --- Collection PAGE WebShop --- */ @media (max-width: 767px) { .shopable .m-hero:not(.m-hero--adapt).m-hero--medium .m-hero__bg { height: 420px } } .facest-filters-section { background: #F7F7F7; padding-bottom: 150px; } .shoppage .container-full { margin-top: -60px; padding-top: 60px; width: 100%; padding-right: 20px; padding-left: 40px; margin-right: auto; margin-left: auto; max-width: 1540px; } } .shoppage .m-sidebar { width: 100%; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; max-width: 1540px; } .shoppage .m-sidebar--content { background-color: transparent; } @media (max-width: 1279px) { .shoppage .m-sidebar { --m-bg-opacity: none; } .shoppage .m-sidebar--content { background-color: white; } } .shoppage .m-sidebar--leftColumn .m-sidebar--title { color: #555; font-size: 30px; font-weight: 700; text-transform: uppercase; font-family: "Inter", Helvetica, Arial, sans-serif; line-height: 1.25; margin-bottom: 40px; } .shoppage .m-filter--widget-title { color: #fe978c; font-size: 16px; font-weight: 700; text-transform: uppercase; margin-bottom: 5px; font-family: "Inter", Helvetica, Arial, sans-serif; line-height: 1.25; } .shoppage .m-link-lists--item .m-link { color: #113e59; } .shoppage .m-link-lists--item:hover .m-link { color: #6bc4e8; } .shoppage .o-product-item-header__title a { color: #113e59; font-weight: 500; min-height: 2em; display: block; } .shoppage .t-archive-product-notice { background: #fe978c; color: #113e59; border-radius: 15px; padding: 20px 30px; margin-bottom: 60px; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; align-items: center; } @media (max-width: 767px) { .shoppage .t-archive-product-notice { max-width: 100%; /* Prevent it from overflowing its parent */ width: 100%; /* Ensure it spans the full width of the parent */ box-sizing: border-box; /* Include padding and borders in width calculations */ display: flex; /* Use flexbox for layout */ flex-wrap: wrap; /* Wrap content if needed */ justify-content: space-between; /* Distribute content evenly */ align-items: center; /* Align items vertically */ padding: 1rem; /* Add padding for spacing */ border-radius: 0.5rem; /* Rounded corners */ } } .shoppage .t-archive-product-notice__number { font-size: 80px; font-weight: 700; border-right: 1px solid rgba(255,255,255,.3); padding-right: 30px; line-height: 1; font-family: "Montserrat","Inter",Helvetica,Arial,sans-serif; margin-right: 30px; } @media (max-width: 767px) { .shoppage .t-archive-product-notice__number { border-right:none; padding-right: 0; margin-right: 20px; font-size: 40px; } } .shoppage .t-archive-product-notice__text-wrap { line-height: 1.3; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; } .shoppage .t-archive-product-notice__text { font-size: 30px; line-height: 1.3; font-weight: 700; } @media (max-width: 767px) { .shoppage .t-archive-product-notice__text { font-size:18px; } } .shoppage .t-archive-product-notice__time { margin-top: 10px; } @media (max-width: 767px) { .shoppage .t-archive-product-notice__time { font-size:14px; margin-top: 5px; } } .shoppage .t-archive-product-notice__right { margin-left: auto; padding-left: 30px; } @media (max-width: 767px) { .shoppage .t-archive-product-notice__right { margin-left:0; padding-left: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } } @media (max-width: 767px) { .shoppage .t-archive-product-notice__link { margin-top:15px; } } .shoppage .t-archive-product-notice__link a { min-width: 230px; } @media (max-width: 991px) { .shoppage .t-archive-product-notice__link a { min-width:100%; display: block; } } .shoppage .m-collection--product-count-heading h2 { text-transform: uppercase; font-family: "Inter", Helvetica, Arial, sans-serif; font-size: 30px; line-height: 1.25; color: #555; } .shoppage .m-collection--product-count-heading h2 span { color: #fe978c; } @media (max-width: 767px) { .shoppage .m-collection--product-count-heading h2 { font-size: 20px; } } .shoppage .m-toolbar--right { justify-content: right; margin-bottom: 25px; text-transform: uppercase; font-weight: 600; } .shoppage .m-toolbar--right .m-select-custom--trigger { align-items: center; cursor: pointer; display: flex; gap: 8px; font-weight: inherit; justify-content: space-between; -webkit-user-select: none; user-select: none; height: 45px; border-radius: 15px; color: #113e59; background: #fff; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .25); padding: 0 20px; display: -ms-flexbox; display: -webkit-flex; -ms-flex-align: center; align-items: center; -moz-column-gap: 5px; -webkit-column-gap: 5px; column-gap: 5px; font-weight: 600; text-transform: uppercase; overflow: hidden; } .shoppage .m-collection--pagination { display: flex; justify-content: center; } .shoppage .m-collection--wrapper { display: grid; grid-template-columns: 320px 1fr; } @media (max-width: 1279px) { .shoppage .m-collection--wrapper { display: block; } } @media (max-width: 767px) { .shoppage .m-collection-toolbar--wrapper { background: transparent; padding: 0px; } } @media screen and (min-width: 1280){ .shoppage .m-toolbar--left { display: none; } } /* Parent container for layout */ @media screen and (max-width: 1279px){ .shoppage .m-toolbar--left { display: flex; justify-content: space-between; /* Push buttons apart */ width: 100%; /* Ensures full width to separate items */ row-gap: 10px; margin-top: 25px; margin-bottom: 25px; } /*.shoppge.m-toolbar--left button { flex: 0; Prevents buttons from stretching gap: 10px; } } */ @media screen and (max-width: 767px){ .shoppage .m-toolbar--left { column-gap: 10px; display: -ms-grid; display: grid; grid-template-columns: repeat(2, 1fr); flex: 1; } } @media screen and (max-width: 1279px){ .shoppage .m-toolbar--right { display: none; } } /* General button styles */ .shoppage .m-sidebar--open, .shoppage .m-sortby--open { height: 45px; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; -moz-column-gap: 6px; -webkit-column-gap: 6px; column-gap: 6px; border-radius: 15px; background: #113e59; padding: 0 30px; color: #fff; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; text-transform: uppercase; -ms-flex-align: center; align-items: center; font-weight: 500; text-align: center; -ms-flex-pack: center; justify-content: center; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .25); border: none; margin-right: 0px; } } /* Filter button - dark blue */ .shoppage .m-sidebar--open { background-color: #113e59; /* Dark blue background */ color: #fff; /* White text */ } /* Sort button - white with shadow */ .shoppage .m-sortby--open { height: 45px; border-radius: 15px; background: #fff; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .25); padding: 0 20px; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; align-items: center; -moz-column-gap: 5px; -webkit-column-gap: 5px; column-gap: 5px; color: #555; font-weight: 500; text-transform: uppercase; overflow: hidden; } .shoppage .m-sortby--open span { overflow: hidden; /* Hides the overflowing text */ text-overflow: ellipsis; /* Adds ellipsis (...) to truncated text */ } /* Sort button dropdown arrow */ .shoppage .m-sortby--open svg { margin-left: 0.5rem; /* Add space between text and icon */ width: 1rem; /* Adjust icon size */ height: 1rem; color: inherit; /* Match the text color */ } /* Hover states for better interaction */ .shoppage .m-sidebar--open:hover { background-color: #001d3d; /* Darker blue on hover */ } .shoppage .m-sortby--open:hover { background-color: #f8f8f8; /* Light gray on hover */ border-color: #bbb; /* Slightly darker border */ } .shoppage .m-active-facets{ margin-bottom: 25px; } .shoppage .m-active-facets .m\:flex { gap: 10px; } .shoppage .m-active-facets--item { margin: 0px ; } .shoppage .m-active-facets--item-remove-all { padding: 0px; } .shoppage .m-active-facets--remove-all { color: #fe978c; } /* Order by */ .shoppage .m-sortby-mobile--title { font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; font-weight: 600; padding: 0 20px; margin-bottom: 20px; color: #fe978c; } .shoppage .m-sortby-mobile--item { color: #113e59; font-weight: 400; line-height: 0.6; padding: 12px 20px; } /* END of Order by */ /*customization for mid-banner-promotion*/ .shoppage .m-collection--mid-banner-promotion { background: #113e59; border-radius: 15px; overflow: hidden; position: relative; grid-column: 1 / -1; width: 100%; margin-bottom: 30px; } @media (max-width: 991px) { .shoppage .m-collection--mid-banner-promotion .banner { display: grid; grid-template-columns: 1fr; margin: 0; } } .shoppage .banner__content { padding: 50px 60px 60px 60px; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: start; align-items: flex-start; min-width: 0; -ms-flex-negative: 1; flex-shrink: 1; } .shoppage .banner__image img{ max-width: none; } @media (max-width:991px) { .shoppage .banner__image img { margin: 0; width: 100%; } } .shoppage .banner__content .banner__title { color: #fe978c; font-size: 36px; font-weight: 800; line-height: 1.2; text-transform: uppercase; word-wrap: break-word; overflow-wrap: break-word; width: 100%; } @media (min-width:1280px) { .shoppage .banner__content .banner__title { font-size: 50px; } } .shoppage .banner__content .banner__subtitle { color: #fff; font-size: 20px; margin-bottom: 50px; line-height: 1.5; } .shoppage .banner__content .m-button--primary-light-blue { padding: 19px 30px !important; border-radius: 16px !important; font-weight: 500; } .shoppage .banner__content .m-button--primary-light-blue svg{ width: 21px; height: 12px; margin-left: 5px; } @media (max-width:767px) { .shopable .m-hero:not(.m-hero--adapt).m-hero--medium .m-hero__bg { height: 420px; } } /* Existing CSS for the grid in collection page... */ @media (max-width: 767px) { .shoppage .m-collection-products .m-product-item { width: 50%; } } /* Base product grid setup .shoppage .m-collection-products { display: grid; grid-template-columns: repeat(3,1fr); gap: 60px 30px; margin: 0; } @media (min-width: 1580px) { .shoppage .m-collection-products { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 991px) { .shoppage .m-collection-products { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .shoppage .m-collection-products { grid-template-columns: repeat(2, 2fr); row-gap: 20px; } .shoppage .m-collection-products .m-product-item { padding: 0; } } @media screen and (min-width: 768px) { .shoppage .m-collection-products.m-cols-1 .m-product-item, .shoppage .m-collection-products.m-cols-2 .m-product-item, .shoppage .m-collection-products.m-cols-3 .m-product-item, .shoppage .m-collection-products.m-cols-4 .m-product-item { width: 100%; max-width: 100%; padding: 0px; } .m-collection-products.m-cols-4 .m-product-item { width: 25%; max-width: 25%; } } */ /* RICH Text TOP*/ .rt-top .container-full { max-width: 1040px; width: 100%; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; padding-top: 50px; padding-bottom: 60px; } /*This one is only for colecctions pages*/ .rt-top-col { background: #f7f7f7; } /* ----------------------------------- */ .rt-top .m-button--link { color: #113e59; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif; font-weight: 500; display: inline-flex; -ms-flex-align: center; align-items: center; -moz-column-gap: 8px; column-gap: 8px; position: relative; transition: all 120ms ease-out; text-transform: uppercase; margin-bottom: 35px; padding-left: 0px; font-size: 16px; } @media (min-width: 1040px) { .rt-top .m-button--link { left: -28px; } } .rt-top .m-button--link:before { height: 0px; } .rt-top .m-button--link svg { height: 12px; width: 21px; } .rt-top h2.m-richtext__title { font-size: 24px; margin-top: 0px; text-transform: capitalize; font-family: "Inter", Helvetica, Arial, sans-serif; } .rt-top .m-richtext__description { font-size: 24px; } @media (max-width: 767px) { .rt-top h2.m-richtext__title, .rt-top .m-richtext__description { font-size: 20px; } } /* Buttons from Flaska.eu for the Personalization */ .t-personal-tabs { display: -ms-grid; display: grid; grid-template-columns: repeat(2,1fr); -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; padding-bottom: 90px; } @media (max-width: 991px) { .t-personal-tabs { grid-template-columns:1fr; row-gap: 30px; } } @media (max-width: 767px) { .t-personal-tabs { row-gap:20px; padding-bottom: 80px; } } .t-personal-tabs-item { border-radius: 15px; overflow: hidden; display: -ms-flexbox; display: -webkit-flex; display: flex; background: #113e59; height: 160px; color: #fff; -webkit-transition: all 120ms ease-out; transition: all 120ms ease-out; } @media (max-width: 767px) { .t-personal-tabs-item { height:110px; } } .t-personal-tabs-item:last-child { background: #6bc4e8; } .t-personal-tabs-item:last-child .t-personal-tabs-item__text { color: #113e59; } @media (hover: hover) { .t-personal-tabs-item:hover { background:#fe978c; } .t-personal-tabs-item:hover .t-personal-tabs-item__text { color: #fff; } } .t-personal-tabs-item.is-active { background: #fe978c; } .t-personal-tabs-item.is-active .t-personal-tabs-item__text { color: #fff; } .t-personal-tabs-item__image { height: 100%; width: 160px; -ms-flex: 0 0 160px; flex: 0 0 160px; object-fit: cover; } @media (max-width: 767px) { .t-personal-tabs-item__image { width:110px; -ms-flex: 0 0 110px; flex: 0 0 110px; } } .t-personal-tabs-item__text { padding: 30px; -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: -webkit-flex; display: flex; color: #fff; text-transform: uppercase; font-family: "Montserrat","Inter",Helvetica,Arial,sans-serif; font-size: 18px; line-height: 1.5; -webkit-transition: all 120ms ease-out; transition: all 120ms ease-out; } @media (max-width: 767px) { .t-personal-tabs-item__text { padding:20px; } } /* IMAGE GRID in Business Personaization*/ .img-grid { background: linear-gradient(180deg, #e7f8ff 0%, #fff 86.04%); padding-bottom: 60px; } .img-grid h2.m-section__heading { color: #113e59; font-size: 50px; } @media (max-width: 767px) { .img-grid h2.m-section__heading { font-size: 36px; } } .img-grid .m-gallery { max-width: 990px; margin-left: auto; margin-right: auto; } .print-type .m-icon-box__inner { max-width: 250px; margin-left: auto; margin-right: auto; } .print-type .m-icon-box-section__wrapper { max-width: 990px; margin-left: auto; margin-right: auto; } .print-type .m-image { width: 100%; aspect-ratio: 1; border-radius: 15px; object-fit: cover; margin-bottom: 20px; } .print-type .m-icon-box__content { display: flex; flex-direction: column; align-items: center; /* Center content horizontally */ justify-content: flex-start; /* Align items to the top */ text-align: center; height: 100%; /* Ensure the parent container spans full height */ } .print-type .m-icon-box__heading { color: #555; font-size: 20px; font-style: normal; font-weight: 500; line-height: 1.4; padding: 0 20px; margin-bottom: auto; /* Prevent auto-spacing issues */ flex: 1; /* Allow heading to dynamically grow */ display: flex; flex-direction: column; /* Stack heading and
*/ justify-content: flex-end; /* Align
to the bottom of heading */ } .print-type .m-icon-box__content hr { max-width: 200px; margin: 10px auto; border-top-color: rgba(72, 72, 74, .2); width: 100%; box-sizing: content-box; height: 0; overflow: visible; border: 0; border-top: 1px solid #ddd; } .print-type .m-icon-box__description { color: #555; line-height: 1.875; font-size: 16px; font-weight: 500; margin-top: 10px; /* Space between
and description */ } .single-button .m-custom-content__container{ padding-top: 0px; } .single-button .m-custom-content__wrapper{ justify-content: center; margin-top: 90px; } .single-button .m-button--primary { display: inline-block !important; line-height: 1.25 !important; text-align: center !important; position: relative !important; color: #fff !important; font-weight: 500 !important; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif !important; text-transform: uppercase !important; border: 1px solid #113e59 !important; padding: 19px 30px !important; border-radius: 16px !important; -webkit-transition: all 120ms ease-out !important; transition: all 120ms ease-out !important; background: #113e59 !important; } .memo-gift .container-full{ margin-bottom: 90px; width: 100%; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; max-width: 990px; } .memo-gift .m-image-with-text__inner{ column-gap: 30px; } .memo-gift h2.m-section__heading { font-size: 30px; color: #555; font-family: "Inter", Helvetica, Arial, sans-serif !important; } .memo-gift ul li:not(:last-child) { border-bottom: 1px solid rgba(72, 72, 74, .2); padding-bottom: 12px; } .memo-gift .rte ul { list-style-type: none; font-size: 20px; margin-top: 0px; color: #555; padding-left: 20px; } .memo-gift .m-image { width: 100px; } @media (min-width: 768px) { .memo-gift .m-image-with-text__image{ flex: 0 0 180px; /* Fix the image container width to a max of 180px */ width: 180px; padding-right: 0px; display:grid } .memo-gift .m-image { width: 180px; } } .memo-gift .m-image-with-text__image-wrapper{ align-self: center; } .memo-gift .m-image-with-text__content{ flex: 1; } @media (max-width: 767px) { .memo-gift .m-image-with-text__inner{ flex-direction: column; /* Stack items vertically */ align-items: flex-start; /* Align items to the left */ } .memo-gift .m-image-with-text__image-wrapper{ align-self: bottom; } } .memo-gift2 .m-image-with-text__image-first { display: flex; justify-content: center; } .memo-gift2 .m-image { max-width: 180px; } .trusted-by { padding-bottom: 90px; } .trusted-by .m-promotion__item img { border-radius: 15px; } .trusted-by .m-promotion__item { border: 2px solid #f5f5f5; border-radius: 15px; } .enq-wave { background: #F7F7F7 } .per-opt .m-gradient { max-width: 1350px; margin-left: auto; margin-right: auto; } .per-opt h2.m-section__heading { font-size: 30px; color: #555; } .per-opt h3.m-richtext__title { text-align: center; color: #113e59; font-size: 20px; font-weight: 600; line-height: 1.4; margin-bottom: 10px; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif !important; } .per-per .container-full { background: linear-gradient(180deg, #f6f6f6 0%, #fff 86.04%); margin-bottom: 120px; } .per-per .m-color-default { background: transparent; max-width: 1350px; margin-left: auto; margin-right: auto; } .per-per h2.m-section__heading { color: #fe978c; font-size: 50px; } @media (max-width: 767px) { .per-per h2.m-section__heading { font-size: 30px; } } .per-per .m-image { border-radius: 15px; aspect-ratio: .8012820513; object-fit: cover; } @media (min-width: 1024px) { .bull-cards.t-personal-why-cards { grid-template-columns: repeat(4, 1fr); max-width: auto; } } /** PRODUCT PAGE **/ .template-product #MainContent { padding-top: 20px; } @media (max-width: 767px) { .template-product .m-header { min-height: 0px; } } .m-product-breadcrumb .m-breadcrumb--wrapper { justify-content: flex-start; /* Aligns breadcrumbs to the left */ width: 100%; } .m-product-breadcrumb .w-1\/2 { width: 50%; padding-left: 21px; } .m-product-breadcrumb .m-breadcrumb--separator svg { color: #6bc4e8; } @media (max-width: 767px) { .m-product-breadcrumb > div:first-child { display: none; /* Hides the left column */ } .m-product-breadcrumb > div:last-child { width: 100%; /* Makes the breadcrumb take full width */ } .m-product-breadcrumb .w-1\/2 { width: 100%; } .m-product-breadcrumb .m-breadcrumb--wrapper { justify-content: center; /* Aligns breadcrumbs to the center */ margin-right: auto; margin-left: auto; } } /*.m-breadcrumb--itemproduct .container-full { padding-top: 0px; } .m-breadcrumb--itemproduct .m-breadcrumb--separator svg { color: #6bc4e8; } */ .m-main-product--wrapper { justify-content: center; } .m-main-product--media { max-width: 600px; } .m-product-media--slider .nav-swiper-container .swiper-slide-thumb-active .m-product-media { border: 2px solid #113e59; border-radius: 5px; } .main-product__block-badge+.main-product__block-title { margin-top: 5px; } .main-product__block .m-product-title { padding-bottom: 10px; } .m-price-item { color: #113e59; font-weight: 800 ; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif !important; } .main-product__block .m-product-tax { color: #555 !important; font-size: 14px; font-style: italic; } .m-product-option--label { color: #113e59; font-weight: 800 !important; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif !important; } .m-product-option--button .m-product-option--node input:checked+label { border-color: #113e59; background-color: #113e59; color: #fff; } .m-product-form .m-add-to-cart { padding: 14px; } .m-product-shipping { font-size: 14px; } /* .m-main-product { margin-bottom: 48px; padding-top: 16px; margin-top: 0px; background: #dadbe0; }*/ .m-main-product--info{ padding-bottom: 60px; max-width: 550px; } .prod-richtext { background: #F7F7F7; } .prod-richtext .container-full { max-width: 1350px; } .prod-richtext .m-richtext__title{ font-size: 24px; } .prod-collab { background: #F7F7F7; } .prod-collab .container-fluid{ max-width: 1350px; } .prod-collab .m-collapsible-section__wrapper { background: #fff; border-radius: 15px; padding: 10px 40px 40px 40px; } .prod-collab .m-collapsible--button span { text-transform: uppercase; font-weight: 800; font-size: 24px; } .prod-featured { background: #F7F7F7; } .prod-featured .container-full { max-width: 1350px; } .prod-featured h2.m-section__heading { font-size: 36px; color: #113e59; } .prod-featured .m-mixed-layout__inner { margin-left: 20px; margin-right: 20px; column-gap: 20px; } @media screen and (min-width: 768px) { .prod-featured .m\:column { padding-left: 0px; padding-right: 0px; } } @media screen and (max-width: 767px) { .prod-featured .m-mixed-layout--mobile-scroll .m-mixed-layout__inner { column-gap: 20px; } } .prod-featured .m-image { border-radius: 15px; object-fit: cover; } .prod-featured .m-icon-box { background: #F7F7F7; } .prod-featured .m-icon-box__heading { text-transform: uppercase; font-weight: 700; font-size: 20px; } .prod-testi { background: #F7F7F7; } .prod-testi .container-full { max-width: 1350px; } .prod-testi h2.m-section__heading { color: #113e59; } .prod-testi .m-testimonial__image { border-radius: 15px; } .prod-testi .m-testimonial__wrapper{ border-radius: 15px; } .prod-testi.m-testimonials--layout-7 .m-testimonial__content { padding: 20px; } .prod-testi .swiper-pagination .swiper-pagination-bullet:before { background: #113e59; } .prod-testi .swiper-pagination .swiper-pagination-bullet-active:after { border-color: #113e59; } .prod-faqs { background: #F7F7F7; padding-bottom: 60px; } .prod-faqs .container-fluid { max-width: 1350px; } .prod-faqs h2.m-section__heading { color: #113e59; font-size: 36px; } .prod-faqs .m-collapsible-section__wrapper { background: #fff; border-radius: 15px; padding: 10px 40px 40px 40px; } .prod-faqs .m-collapsible--button span { text-transform: uppercase; font-weight: 600; font-size: 20px; } .prod-wave-blue-grey { background: #F7F7F7; margin-bottom: -168px; } @media screen and (max-width: 767px) { .prod-wave-blue-grey { margin-bottom: -118px; } } .m-product-recommendations__wrapper { max-width: 1350px; margin-left: auto; margin-right: auto; } /* Keep all 5 product cards in Product Recommendations */ .m-mixed-layout__inner.m\:grid.m\:grid-2-cols.md\:m\:grid-4-cols.xl\:m\:grid-5-cols { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 20px; scrollbar-width: none; /* Hide scrollbar for Firefox */ } @media (max-width: 1199px) { .m-mixed-layout__inner.m\:grid.m\:grid-2-cols.md\:m\:grid-4-cols.xl\:m\:grid-5-cols { display: flex; -webkit-overflow-scrolling: touch; gap: 20px; overflow-x: scroll; -ms-overflow-style: none; width: 100vw; margin-left: -20px; display: -ms-flexbox; display: -webkit-flex; } } /* Product Description on sticky add to cart*/ .m-sticky-addtocart--title { display: flex; align-items: center; } /* CONTACT FORM */ .m-contact-form { background: #F5f5f5; } .m-contact-form .container-full{ max-width: 1350px; } .m-contact-information { margin-top: -130px; margin-bottom: -60px; background: #f5f5f5; padding-top: 150px; } .m-contact-information .m-page-header { padding-top: 0px; padding-bottom: 0px } .m-contact-information .m-page-header__title { color: #fe978c; text-transform: uppercase; padding-top: 40px; } .m-contact-information .m-breadcrumb--wrapper { display: none; } .m-contact-form .container-full { padding-top: 60px; padding-bottom: 120px; margin-top: 0px; margin-bottom: -60px; background: #F5f5f5; } .m-contact-form h3 { color: #113e59; font-weight: 800 !important; font-family: "Montserrat", "Inter", Helvetica, Arial, sans-serif !important; } .contact-wave { background: #f5f5f5; margin-bottom: -108px; } @media screen and (max-width: 767px) { .contact-wave { background: #f5f5f5; margin-bottom: -57px; } } /* Search Page */ .template-search .m-header__desktop { background: #113E59; backdrop-filter: none; } .template-search .facest-filters-section { margin-top: -300px; padding-top: 300px; } .template-search .m-sidebar--content { background-color: #F7F7F7; } .template-search .m-sidebar--title { color: #555; font-size: 30px; font-weight: 700; text-transform: uppercase; font-family: "Inter", Helvetica, Arial, sans-serif; line-height: 1.25; margin-bottom: 40px; } .template-search .m-filter--widget-title { color: #fe978c; font-size: 16px; font-weight: 700; text-transform: uppercase; margin-bottom: 5px; font-family: "Inter", Helvetica, Arial, sans-serif; line-height: 1.25; } .template-search .m-link-lists--item .m-link { color: #113e59; } .template-search .m-facets .m-facet--checkbox { color: #113e59; } /* END of Contact Form*/ /* POLICY Pages #MainContent > .shopify-policy__container { position: relative; /* Ensure it acts as a reference for absolute positioning overflow: visible !important; /* Prevent cutting off the SVG } #MainContent > .shopify-policy__container::after { content: ""; position: absolute; bottom: 0px; left: 0; width: 200vw; height: 5%; background: url(//flaska.es/cdn/shop/files/ondas-full-azul-gris.svg) no-repeat; background-size: cover; z-index: -1; pointer-events: none; transform: translateX(-50%); } .shopify-policy__body { position: relative; /* Ensures stacking order works padding-bottom: 5rem; /* Ensures enough space for the wave } */ /* Blog Page Hero Styles */ .blog-page-hero { background: #fff; padding: 60px 20px; } .blog-page-hero .container { max-width: 1280px; margin: 0 auto; text-align: left; } .blog-page-hero .rte { font-size: 18px; line-height: 1.6; color: #555; margin-bottom: 30px; max-width: 800px; margin-right: auto; } .blog-page-hero .m-button { display: inline-block; } /*masaru emoto page*/ .emoto-col { background: linear-gradient(to bottom, #f7f7f7, #ffffff); } .emoto .container-full { max-width: 940px; } .emoto-col .m-product-list .m-mixed-layout__wrapper { justify-content: center; display: flex; } .emoto-col .xl\:m\:grid-3-cols { gap: 0px; } @media (min-width: 1280px) { .emoto-col .xl\:m\:grid-4-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 810px; justify-content: center; margin: auto; gap: 30px; } } @media (min-width: 768px) { .emoto-col .md\:m\:grid-2-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .emoto-col .xl\:m\:grid-3-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } } /*Hid SHOP on Desktop*/ @media (min-width: 1024px) { /* Using nth-child as requested for the 5th element */ ul.m-menu > li.m-menu__item[data-index="5"] { display: none !important; } } /*-----------*/ /*Avoid Word Break siteWide*/ body { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; word-break: normal; overflow-wrap: normal; } /*memo-gift2 - Adaptive Image Container*/ .memo-gift .m-image { width: 100px; } @media (min-width: 768px) { .memo-gift .m-image-with-text__inner { gap: 30px; /* Add spacing between image and content */ } .memo-gift .m-image-with-text__image { flex: 0 0 auto; /* Size based on content, not fixed percentage */ width: auto; /* Let it be determined by the image size */ max-width: 180px; /* Limit maximum size */ } .memo-gift .m-image { width: 180px; height: auto; } } .memo-gift .m-image-with-text__image-wrapper { align-self: center; display: inline-flex; /* Shrink to content size */ max-width: 100%; } .memo-gift .m-image-with-text__content { flex: 1 1 0%; /* Take all remaining space */ min-width: 0; /* Prevent overflow */ } @media (max-width: 767px) { .memo-gift .m-image-with-text__inner { flex-direction: column; /* Stack items vertically */ } .memo-gift .m-image-with-text__image-wrapper { align-self: center; } .memo-gift .m-image { width: 100px; } }