/* Theme Name: LuxuryConceptFree Theme URI: https://www.luxuryconcept.website Author: Stefano Fattori Author URI: https://www.stefanofattori.it Description: Responsive and Fast Starter WordPress Theme (WooCommerce Ready) with: Minimal Style, 3 Header Style, 3 Menus, Amazing Block Patterns, Trasparent Header Template, WhatsApp Chat, Cool animations, Light and fast, Full Site Editing Template! Outstanding performance, modern design and intuitive customization. Optimized for mobile devices, it delivers a seamless user experience. Setup and installation in theme folder readme file. Tested up to: 6.5 Requires PHP: 7.0 Version: 1.3.2 License: GNU General Public License v3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html Text Domain: luxuryconceptfree Tags: translation-ready, grid-layout, blog, news, custom-menu, featured-images, left-sidebar, right-sidebar, one-column, two-columns, block-patterns, wide-blocks, custom-background, custom-colors, custom-logo, featured-image-header, footer-widgets, full-width-template, sticky-post Domain Path: /languages This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ /* ! Reset */ body, html{ font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0;scroll-behavior: smooth;} *,*:before,*:after{ box-sizing: border-box; } h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;} ol,ul{padding-left: 20px;} img{height: auto;} a{text-decoration: none;} hr{border:none; border-bottom: 1px solid #000} /* ------------------------------------------------------------------------- */ /* ----------------------- Base CSS ---------------------------------------- */ /* ------------------------------------------------------------------------- */ /* VARIABLES CUSTOMIZABLE ON WP CUSTOMIZER */ :root { --site-bg: #FFFFFF; --link-color: #45cfbe; --link-color-hover: #3eb2bc; --header-bg: #FFFFFF; --borders-color: #45cfbe; --show-footer-header-borders: 1px solid var(--borders-color); --site-text-color: #000000; --header-text-color: #000000; --header-transparent-text-color: #FFFFFF; --posts-color: #f4f4f4; --site-font-size: 16px; --body-font-family: 'Quicksand'; --h1-font-size: 2.4rem; --h2-font-size: 1.5rem; --h3-font-size: 1.0rem; --h4-font-size: 0.8rem; --number-col-masonry: 3; /*--wrapper-width: 100%; */ --wrapper-max-width: 1300px; /* MAX-WIDTH LAYOUT GRID CONTENT */ --content-padding: 20px 2%; --header-mobile-height: 80px; --header-desktop-height: 135px; --sticky-header: sticky; --topbar-bg: #45cfbe; --topbar-text-color: #FFFFFF; --logo-invert-color: none; /* Invert color logo for transparent header */ /* FIX ADMIN WPBAR POSITION*/ --wpadminbar-desktop-height: 32px; --wpadminbar-mobile-height: 46px; } /* Typography */ body{font-size: var(--site-font-size); background-color: var(--site-bg); color: var(--site-text-color); font-family: var(--body-font-family); } body.custom-background.dark{background-color: var(--site-bg);} /* ! Title System */ h1, h2, h3, h4, h5, h6, p, ol, ul{margin-bottom: 1rem;line-height: 1.2} h1, .text-1{font-size: var( --h1-font-size);} h2, .text-2{font-size: var( --h2-font-size);} h3, .text-3{font-size: var( --h3-font-size);} h4, p, .text-4{font-size: var( --h4-font-size);line-height: 1.5rem} @media (max-width: 768px) { } /* CALL TO ACTION BUTTONS */ .cta a{color:#fff!important; background-color: var(--link-color);border-radius: 100px;padding-left:20px !important;padding-right:20px !important;white-space:nowrap;} .cta:active{transform:scale(0.9);transform: translate(2px,2px)} /* Input Style */ textarea { padding: 10px; width: 100%; border: 1px solid #949494; background: #fff; appearance: none;border-radius: 10px;margin-top:5px} input[type=submit], button[type=submit] {cursor: pointer; margin-top: 10px; padding: 15px 20px; color: #fff; text-transform: uppercase; background: var(--link-color); border:none;margin-top:5px;display: block;font-weight: bold;width: auto;border-radius: 100px;} input[type=submit]:active, button[type=submit]:active{transform:scale(0.9);transform: translate(2px,2px)} input[type=text],input[type=search],input[type=email],input[type=url]{ width: 100%; padding: 10px; border: 1px solid #949494; background: #fff; margin-top:5px; border-radius: 100px; } input:focus, textarea:focus{ outline: 0; } /* Link color */ a { color: var(--link-color); } a:focus, a:hover { color: var(--link-color-hover); text-decoration: none; } /* Button Link */ .wp-block-button__link{text-decoration: none !important; color: var(--link-color); } .wp-block-button__link:hover{text-decoration: none !important; color: var(--link-color-hover); } /* ------------------------------------------------------------------------- */ /* ------------------------ LAYOUT & TEMPATE ------------------------------- */ /* ------------------------------------------------------------------------- */ .main_wrapper{ /* FIX SCROLLBAR X WHEN CONTENT OVERFLOW WRAPPER_CONTENT GRID */ width: 100%; max-width: 100%; overflow-x: clip; } .wrapper_content{ display: grid; grid-template-columns: minmax(200px, 1fr) 4fr; grid-template-areas: "breadcrumbs breadcrumbs" "primary-sidebar main-content"; padding: var(--content-padding); margin: 0 auto; max-width: var(--wrapper-max-width); gap: 20px 55px; } /* ------------------------ HEADER ------------------------------- */ /*.header{ background-color: var(--header-bg); padding: var(--content-padding); max-width: 100vw;height: var(--header-desktop-height);position: var(--sticky-header); top:0;left:0;z-index: 9999; border-bottom: var(--show-footer-header-borders); border-color: var(--borders-color);}*/ .header{ background-color: var(--header-bg); max-width: 100vw; height: var(--header-desktop-height);position: var(--sticky-header); top:0;left:0;z-index: 9999; border-bottom: var(--show-footer-header-borders); border-color: var(--borders-color); } .header__content{display: flex; gap:15px;flex-direction: row; justify-content: space-between;align-items: center;align-self:flex-start;padding: var(--content-padding);max-width: var(--wrapper-max-width); margin:0 auto;} .header a{color: var(--header-text-color);} .header__logo{order: 1;overflow: hidden;overflow-wrap: anywhere; flex: 1 2 20%;} .header__logo-img{width: 100% !important; max-width: 250px; max-height: 115px !important; } .header__logo h1{font-size: 1.8rem;margin-bottom: 0.5rem;} .header__logo h2{font-size: 1.2rem;margin: 0;} .header__hamburger{display: none;} @media (max-width: 768px) { .header__logo h1{font-size: 1.2rem;} .header__logo h2{font-size: 0.8rem;} .header__logo-img{max-width: 180px !important; max-height: 75px !important; } } @media (max-width: 991px) { .header{height: var(--header-mobile-height);} .header__hamburger{display: block;order: 4;} } @media (min-width: 768px) and (max-width: 991px) { .header__logo-img{max-width: 180px !important; max-height: 75px !important; } } /* ------------------------ TOPBAR ------------------------------- */ .topbar{grid-area: topbar; display: grid; grid-template-columns: 1fr; background-color: var(--topbar-bg);padding: var(--content-padding); padding-top: 10px;padding-bottom: 10px;max-height:40px;} .topbar__content * {color: var(--topbar-text-color) !important;} .topbar__content{ text-align: center;} /* ------------------------ BREADCRUMBS ------------------------------- */ .breadcrumbs{ grid-area: breadcrumbs; border: 1px solid var(--borders-color); border-radius: 5px; padding: 10px; font-size: calc(var(--site-font-size) - 2px );} .breadcrumbs ul{margin: 0; padding: 0; list-style-type: none;} .breadcrumbs ul li{display: inline-block;padding: 0} .breadcrumbs ul li:not(:last-child){margin-right: 3px;} /* ------------------------ PRIMARY SIDEBAR, MAIN, FOOTER SIDEBAR, FOOTER ------------------------------- */ .primary-sidebar{ grid-area: primary-sidebar; padding: 0;} .main-content{ grid-area: main-content; padding: 0; } /*.footer-sidebar{ grid-area: footer-sidebar; display: flex; gap:50px; background-color: var(--site-bg);justify-content: space-between;align-items:flex-start; padding: var(--content-padding); border-bottom: var(--show-footer-header-borders); border-top: var(--show-footer-header-borders); border-color: var(--borders-color);} */ .footer-sidebar{ background-color: var(--site-bg); border-bottom: var(--show-footer-header-borders); border-top: var(--show-footer-header-borders); border-color: var(--borders-color); padding: 20px 0; } .footer-sidebar__content{max-width: var(--wrapper-max-width); margin: 0 auto;display: flex; flex-flow: row wrap; gap: 35px 50px;justify-content: space-between;align-items:flex-start; padding: var(--content-padding); } @media (max-width: 768px) { .footer-sidebar__content{flex-direction: column;} } /*.footer{ grid-area: footer; display: flex;flex-direction: column; background-color: var(--site-bg);justify-content: center;align-items: flex-start;gap: 30px; padding: var(--content-padding);} */ .footer{ background-color: var(--site-bg); } .footer__content{max-width: var(--wrapper-max-width); margin: 0 auto;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;gap: 30px;padding: var(--content-padding); } .footer nav.footer__nav{ align-self: center; width: 100%;} .footer div.footer__copyright{ display: inline-flex; align-self: center; justify-content: space-between; width: 100%; } .footer-menu, .footer-menu ul{margin: 0;padding: 0; text-align: center;} .footer-menu li{display: inline-block;} .footer-menu li a{color:var(--link-color); opacity: 0.8;display: block;padding: 0px 12px;font-size: 15px;font-weight: bold;border-right: 2px solid var(--borders-color);} .footer-menu li:last-child a {border-right: 0;} /* ----------------------------- CSS FOR PAGE AND POST TEMPLATES ----------------------------- */ /* Set Grid for Homepage and Transparent Header */ body.home:not(.blog) .wrapper_content, body.page-template-transparent-header .wrapper_content{gap: 0; padding-top: 0; grid-template-columns: 100%;grid-template-areas: "main-content";} /* Set styles and colors for Transparent Header -------------- Transparent Header - Background header: var(--header-bg) --------------------------- */ body.page-template-transparent-header .header {border: none; } @media (min-width: 991px) { body.page-template-transparent-header:not(.scroll-down) .header__logo-img{ filter: var(--logo-invert-color); } body.page-template-transparent-header:not(.scroll-down) .header a{color: var(--header-transparent-text-color);} body.page-template-transparent-header:not(.scroll-down) .menu li.menu-item-has-children > a::after, body.page-template-transparent-header:not(.scroll-down) .menu li.page_item_has_children > a::after{ background-color: var(--header-transparent-text-color); } body.page-template-transparent-header:not(.scroll-down) .sub-menu li.menu-item-has-children > a::after, body.page-template-transparent-header:not(.scroll-down) .children li.page_item_has_children > a::after{ background-color: var(--header-text-color); } body.page-template-transparent-header:not(.scroll-down) .sub-menu a, .children a{ color: var(--header-text-color) !important; } body.page-template-transparent-header:not(.scroll-down) .header__quick .menu-item:not(.cta,input), body.page-template-transparent-header:not(.scroll-down) .icon-cart {background-color: var(--header-transparent-text-color); } body.page-template-transparent-header:not(.scroll-down) .header__mini_cart a{color: var(--header-text-color);} .page-template-transparent-header .header {background: transparent;transition: background 1s cubic-bezier(.215, .61, .355, 1);} .page-template-transparent-header.scroll-down .header {background: var(--header-bg);} /* Add Header BG Color adding .scroll-down in JS */ .page-template-transparent-header .wrapper_content {margin-top: -135px;} } /* NO SIDEBAR TEMPLATE */ body.page-template-page-no-sidebar .wrapper_content, body.post-template-single-no-sidebar .wrapper_content{grid-template-columns: 100%;grid-template-areas: "breadcrumbs" "main-content";} /* RIGHT SIDEBAR TEMPLATE */ body.page-template-page-sidebar-right .wrapper_content, body.post-template-single-sidebar-right .wrapper_content{grid-template-columns: auto 15%; grid-template-areas: "breadcrumbs breadcrumbs" "main-content primary-sidebar";} /* PAGE NO TITLE */ body.page-template-page-no-title .wrapper_content{grid-template-columns: 100%;grid-template-areas: "breadcrumbs" "main-content";} /* --------------------------------------------- */ body.admin-bar .header { top: var(--wpadminbar-desktop-height); } /* Tablet Layout Responsive */ @media (min-width: 991px) { } /* Smartphone Layout Responsive */ @media (max-width: 768px) { .wrapper_content, body.page-template-page-sidebar-right .wrapper_content, body.post-template-single-sidebar-right .wrapper_content{ grid-template-columns: auto; grid-template-areas: "breadcrumbs" "main-content" "primary-sidebar"; } .footer-sidebar{flex-direction: column;} .footer-menu li{display: block;line-height: 30px;} .footer-menu li a{border-bottom: 1px solid var(--borders-color);border-right: 0;} .footer-menu li:last-child a {border:none;} body.admin-bar .header { top: var(--wpadminbar-mobile-height); } } /* -------------------------- POSTS TEMPLATE Masonry Grid -------------------------- */ .grid-masonry{ columns: var(--number-col-masonry) 200px; column-gap: 1rem; } .grid-masonry-item{ font-size: 50%; margin: 0 1rem 1rem 0; display: inline-block; width: 100%; border-radius: 5px; background-color: var(--posts-color); border: 1px solid var(--borders-color); box-shadow: 0 2px 2px rgba(0,0,0,0.05), 0 4px 4px rgba(0,0,0,0.05), 0 8px 8px rgba(0,0,0,0.05), 0 3px 15px rgba(0,0,0,0.05); padding: 0; } @media (max-width: 991px) { .grid-masonry{columns: 1;} } /* ------------------------------------------------------------------------- */ /* ---------------------END LAYOUT & TEMPATE ------------------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* -------------- Flex Header Menu & Dropdown (sub menu) ------------------- */ /* ------------------------------------------------------------------------- */ .menu, .sub-menu, .children {z-index:9999;margin:0;padding:0;} .menu-item-has-children, .page_item_has_children{position:relative;} /* Fix link color when submenu's opening */ .menu-item-has-children > .sub-menu > li > a:hover, .page_item_has_children > .children > li > a:hover{ color: var(--header-text-color);} /* Basic Menu Style */ .header__menu{margin: 0;order: 2;flex: 2 1 60%; text-align: center;} @media (max-width: 991px) { .header__menu{display: block;position: absolute; top:80px; left:0;width: 100%;visibility: hidden;z-index:2;} } .menu li.menu-item-has-children > a::after, .menu li.page_item_has_children > a::after{ content:" "; width: 18px; height: 18px; display: inline-block; vertical-align: bottom; margin-left: 5px; transform: rotate(90deg); --svg-icon-menu: url('data:image/svg+xml,'); /* I'm using MASK instead of BACKGROUND property so I can change svg color using background-color */ /* All Browser Support */ -webkit-mask-image: var(--svg-icon-menu); -webkit-mask-repeat:no-repeat; -webkit-mask-size: 100%; /* Firefox Support */ mask-image: var(--svg-icon-menu); mask-repeat:no-repeat; mask-size: 100%; background-color: var(--header-text-color); } /* Set Submenu Style and Position */ .menu > li.menu-item-has-children > .sub-menu, .sub-menu > li.menu-item-has-children .sub-menu, .menu > ul > li.page_item_has_children > .children, .children > li.page_item_has_children .children{ position: absolute; top: -9999px; left: 0; padding: 0; background: var(--header-bg); box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-align: left; transition: opacity 0.3s ease, transform 0.3s ease; opacity: 0; visibility: hidden; list-style-type: none; } /* Open Dropdown Menu On Desktop (Hover effect) */ @media (min-width: 991px) { /* Basic Style */ .menu li{display: inline-block;position: relative} .menu li a{display: block;padding: 16px;font-size: 15px;font-weight: bold;} /* Menu Dropdown */ .sub-menu > li, .children > ul > li{ display:list-item; } .sub-menu > li a, .children > ul > li a{ display:block; white-space:nowrap; } /* Don't rotate arrow icon */ .sub-menu li.menu-item-has-children > a::after, .children li.page_item_has_children > a::after{ transform: none;margin-right: 5px; } /* Transition Effect submenu */ .sub-menu > li.menu-item-has-children .sub-menu, .children > li.page_item_has_children .children { transition: opacity 0.6s ease, left 0.3s ease; } /* OPEN Dropdown */ .menu > li.menu-item-has-children:hover > .sub-menu, .menu > ul > li.page_item_has_children:hover > .children{ top: 60%; transform: translate(0, 20px); opacity: 1; visibility: visible; } .sub-menu > li.menu-item-has-children:hover > .sub-menu, .children > li.page_item_has_children:hover > .children{ top: 0px; opacity: 1; visibility: visible; left: 100%; } /* Open Dropdown Desktop items and sub-items using js function */ .open-dropdown > .sub-menu { top: 60% !important; transform: translate(0, 20px) !important; opacity: 1 !important; visibility: visible !important; } .open-dropdown-sub > .sub-menu { top: 0px !important; opacity: 1 !important; visibility: visible !important; left: 100% !important; } } /* Open Dropdown Menu On Mobile (Click effect - hover and active) */ @media (max-width: 991px) { /* Set Menu Mobile Style */ .menu{ /*position: absolute; top:80px; left:0;*/ background-color: var(--site-bg); width: 100%; height: 0vh; overflow: hidden;transition: all 1s cubic-bezier(.215, .61, .355, 1);z-index: 9999; } /* Set OPENED Menu Mobile Style */ .menu-open .header__menu{visibility: visible;} .menu-open .menu{height: calc(100vh - var(--header-mobile-height));padding: var(--content-padding);overflow-y: scroll;} /* Basic Style */ .menu li{padding: 16px 5px;width: 100%;border-bottom: 1px solid var(--borders-color);display: block;} .menu li a{display: block;font-size: 15px;font-weight: bold;} /* Disable link click href on mobile dropdown menu */ .menu li.menu-item-has-children > a:hover::after, .menu li.menu-item-has-children > a:active::after { pointer-events: none; } /*.menu li.menu-item-has-children:hover > a::after, .sub-menu li.menu-item-has-children:hover > a::after{transform: rotate(270deg);}*/ .open-dropdown .menu li.menu-item-has-children > a::after, .open-dropdown .sub-menu li.menu-item-has-children > a::after{transform: rotate(270deg);} .menu ul{padding: 0;} /* Set Submenu Style and Position on Mobile */ .menu > li.menu-item-has-children > .sub-menu, .sub-menu > li.menu-item-has-children > .sub-menu, .menu > li.page_item_has_children > .children, .children > li.page_item_has_children > .children { border-left: 1px solid #D0D0D0; padding: 0 0 0 15px; text-align: left; width: 100%; } /* open Dropdown Mobile items and sub-items using js function */ .open-dropdown > .sub-menu, .open-dropdown > .children { position: static !important; transform: translate(0, 10px) !important; opacity: 1 !important; visibility: visible !important; } .sub-menu > li:last-child{border-bottom: none;} /* Change arrow icon position on Mobile */ .menu li.menu-item-has-children > a::after{ position: absolute; right: 5px; } .sub-menu li.menu-item-has-children > a::after{ position: absolute; right:10px; } /* Prevent link click on mobile on submenu items */ .menu li.menu-item-has-children > a, .sub-menu li.menu-item-has-children > a {display: inline;} } /* ------------------------------------------------------------------------- */ /* -------------------------- Hamburger Menu ------------------------------- */ /* ------------------------------------------------------------------------- */ @media (max-width: 991px) { .icon-hamburger{border:none; background: transparent;} .icon-hamburger strong{height: 1px;margin-top:-1px; overflow: hidden;width: 1px;display: block;margin: 0;padding: 0;} .icon-hamburger span{height: 2px !important; width: 30px;background: var(--site-text-color);position: relative;display: block;margin-bottom: 8px; transition: all 0.2s cubic-bezier(.215, .61, .355, 1); border-radius:25px;} .icon-hamburger span:nth-child(3){width:35px;} .menu-open .icon-hamburger span:nth-child(2){transform: rotate(45deg) translateY(9px);margin-bottom: 11px;} .menu-open .icon-hamburger span:nth-child(3){transform: rotate(-45deg) translateY(-9px);margin-bottom: 11px;width:30px;} .menu-open .icon-hamburger span:nth-child(4){display:none;} } /* ------------------------------------------------------------------------- */ /* ------------------------ Flex Quick Header Menu ------------------------- */ /* ------------------------------------------------------------------------- */ .header__quick{display: flex; order: 3; flex: 0 1 20%;; align-items: center;font-weight: bold;gap:15px;justify-content: flex-end;} .header__quick .quickmenu{list-style-type: none;margin-bottom: 0;display: flex; align-items: center;gap:15px;} .header__quick > ul > li > a{padding: 10px 0px;} @media (max-width: 768px) { .header__quick{display: none;} } /* ------------------------------------------------------------------------- */ /* ------------------------ END HEADER MENU -------------------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------ MINI CART DROPDOWN FOR WOOCOMMERCE ------------------- */ /* ------------------------------------------------------------------------- */ .header__mini_cart{position: relative;list-style-type: none; margin: 0; padding: 0;} .mini_cart_button{cursor: pointer;} .badge-cart-items-count{ display: inline-block;text-align: right; margin: 0;padding: 0; position:relative;} .badge-cart-items-count::before{ content:attr(value); font-size:13px; font-weight: 600; color: #fff; background: rgba(255,0,4,0.9); border-radius:50%; padding: 3px 5px 3px 5px; position:absolute; top: -7px; right: 0; z-index: 9999; text-align: center; } .widget_shopping_cart{ outline: 0; position: absolute; top: -99999px; right: 0; background: #eee; width: 300px; border: 1px solid var(--borders-color); border-radius: 15px; padding: 20px 15px 10px 15px; font-size: 14px; overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); visibility: hidden; } .widget_shopping_cart-open{ outline: 0; top: 150%; animation: 0.2s fadeIn; animation-fill-mode: forwards; visibility: visible; max-height: 1000px; transition: max-height 0.5s ease-in-out; } .widget_shopping_cart p, .widget_shopping_cart a{font-size: 14px;} .woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img{ width: 48px !important;} @media (max-width: 768px) { .header__mini_cart{display: none;} } /* ------------------------------------------------------------------------- */ /* ----------- END MINI CART DROPDOWN FOR WOOCOMMERCE ---------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * /* 2.2 Home */ /* ------------------------------------------------------------------------- */ .home-title { position: absolute; top:-9999px; color: #fff; font-size: 12px;} /* ------------------------------------------------------------------------- * /* 2.3 Index */ /* ------------------------------------------------------------------------- */ /* Single, Post & Page */ @media (max-width: 768px) { h1 span{display: block;} } /* ------------------------------------------------------------------------- * /* 2.4 Sections */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * /* 2.6 Footer */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * /* 3 Modules */ /* ------------------------------------------------------------------------- */ /* Pagination (Posts, Pages and Comments) */ .pagination{width: 100%;margin: 35px 0;} .post-nav-links, .nav-links {margin: 15px 0; padding: 0; width: 100%; display: flex; justify-content: center;align-items: center;flex-wrap: wrap;} .post-nav-links span, .nav-links span, .post-nav-links a, .nav-links a {display: flex;justify-content: center;align-items: center; min-width: 34px; height: 34px;margin: 6px; padding: 8px 13px; border: 1px solid var(--borders-color); border-radius: 5px;box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);} .post-nav-links span.current, .pagination span.current{color: #fff; font-weight: 600; background-color: var(--link-color-hover); } /* ------------------------------------------------------------------------- */ /* ------------------ WordPress Default Element ---------------------------- */ /* ------------------------------------------------------------------------- */ /* clearfix for post float images */ .clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } /* Accessibility */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; right: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /* underline for accesibility */ .text-content a, .comment-content a{text-decoration: underline;} /* Image */ .alignleft { float: left; margin-right: 20px; margin-bottom: 10px; max-width: 97%; height: auto; } .alignright { float: right; margin-bottom: 10px; margin-left: 20px; max-width: 97%; height: auto; } .aligncenter { display: block; margin: 0 auto; max-width: 97%; height: auto; } .alignnone { max-width: 97%; height: auto; } .text-center{text-align: center;} @media (max-width: 768px) { .sma-text-center{float:none; text-align: center;} } body .alignfull { margin-left: -20px; margin-right: -20px; } body .alignfull { width: auto; max-width: 1000%; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); } body .alignwide { width: auto; max-width: 1000%; margin-right: calc(25% - 25vw); margin-left: calc(25% - 25vw); } .alignwide img, .alignfull img { display: block; margin: 0 auto; } /* ------------------------------------------------------------------------- */ /* ------------------ END WordPress Default Element ------------------------ */ /* ------------------------------------------------------------------------- */ .post-meta{font-weight: bold;} .post-content-text{padding: 15px;} /* Image Caption */ .wp-caption { margin-bottom: 20px; padding: 10px; max-width: 97%; border: 1px solid #eee; text-align: center; } .wp-caption img { margin: 0; padding: 0; width: 100%!important; height: auto; border: 0 none; } .wp-caption p.wp-caption-text { margin: 0; padding: 8px; font-size: 1em; line-height: 17px; } .gallery-caption{font-size: 20px;} /* Sticky Post */ .sticky { position:relative; border-right: 3px solid var(--borders-color); border-bottom: 3px solid var(--borders-color); border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px; } .sticky:before { content: url('data:image/svg+xml,'); transform: rotate(35deg); display: inline-block; text-align: right; position:absolute; top:-25px; right:0px; width: 48px; height: 48px; } /* Blockquote */ blockquote {font-weight: 200; font-style: italic; margin: 0.25em 0; padding: 0px 30px; line-height: 1.45; position: relative; border-left: 5px solid #333; } /* Search */ .form-search{width: 100%;border-radius: 100px; border: 1px solid #e4e4e4; padding-left: 15px;position: relative;background:#fff;margin-bottom: 30px;padding: 5px;} .form-search input{width: 100%; border:none;background: transparent!important;font-size: 18px;} .form-search button[type=submit]{padding: 0; border: none;background: transparent;color:#000;padding: 0px;border-radius:20px; position:absolute; top: 8px; right:20px;} .form-search button[type=submit] svg{width: 30px; height:30px} /* ===== Comments Template ===== */ /* User Role Label */ .comment-author-label {padding: 3px 9px;border-radius: 8px;font-size: calc(var(--site-font-size) - 2px);} .administrator-label {background-color:#edffa9;} .editor-label {background-color:#eca3f5;} .author-label {background-color:#fdbaf8;} .contributor-label {background-color: #2DD4C9; } .subscriber-label {background-color: #B1E8E8;} /* Comments Head */ .wrapper_comments div.comments_head{width: 100%;border-bottom: 2px solid #ccc;display: flex;flex-direction: row;flex-wrap: wrap; justify-content: space-between;align-items: flex-end;margin: 0 0 30px 0;} .wrapper_comments div.comments_head div.comments-info{color: #555;padding: 5px 15px 3px 5px;font-weight: 600;margin-bottom: -1px;letter-spacing: 1px; text-transform: uppercase;text-align: left;line-height: 24px; border-bottom: 2px solid #ff015d;} .wrapper_comments div.comments_head div.comments-space{flex-grow: 1;} .wrapper_comments div.comments_head div.comments-filter{padding: 5px 15px 3px 5px;margin-bottom: -1px;line-height: 24px;} /* Comments List */ ol.comment-list .comments{list-style-type: none;} ol.comment-list li.comment{display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;margin: 16px 0;} ol.comment-list li.comment .comment-thumbnail{margin-right: 20px;} ol.comment-list li.comment .comment-meta{display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start;font-weight: 600;} ol.comment-list li.comment .comment-block{background-color:#f6f8fa;border: 1px solid #d1d5da;border-radius: 10px;padding: 10px;flex-grow: 1; min-width: 0;position: relative;} ol.comment-list li.comment div.comment-block .comment-author{text-transform: capitalize;display: flex;flex-wrap: wrap;align-items:flex-start;flex-direction: row;gap: 5px; overflow: hidden;max-width: 80%;} ol.comment-list li.comment div.comment-block .comment-author a{padding: 3px 0;} ol.comment-list li.comment div.comment-block .comment-text{padding-top: 5px;} /* Left Chevron default comment */ ol.comment-list li.comment .comment-block::after, li.comment .comment-block:before{border-color: #0000;border-style: solid solid outset;content: " ";display: block; height: 0;left: -16px;pointer-events: none;position: absolute;right: 100%;top: 11px;width: 0;z-index: 99999;} ol.comment-list li.comment .comment-block::before{border-right-color: #d1d5da;border-width: 12px;margin-left: -8px;margin-top: -3px;} ol.comment-list li.comment .comment-block::after{border-right-color: #f6f8fa;border-width: 9px;margin-left: -2px;margin-top: 0px;} /* By Post Author comment style */ ol.comment-list li.bypostauthor .comment-block{background-color: #FAEBD7;border: 1px solid #f55758;padding: 10px;border-radius: 10px;} ol.comment-list li.bypostauthor div.comment-meta div.comment-author .bypostauthor-label{background-color: #f55758;padding: 3px 9px;color: #ffffff;border-radius: 8px;font-size: calc(var(--site-font-size) - 2px);} ol.comment-list li.bypostauthor div.comment-meta div.comment-author .bypostauthor-label::before{content: "Post author";} :lang(it-IT) ol.comment-list li.bypostauthor div.comment-meta div.comment-author .bypostauthor-label::before{content: "Autore dell'articolo";} /* Left Chevron By post Author comment */ ol.comment-list li.bypostauthor .comment-block::after, li.comment .comment-block::before{border-color: #0000;border-style: solid solid outset;content: " ";display: block; height: 0;left: -16px;pointer-events: none;position: absolute;right: 100%;top: 11px;width: 0;z-index: 99999;} ol.comment-list li.bypostauthor .comment-block::before{border-right-color: #F03F40 ;border-width: 12px;margin-left: -8px;margin-top: -3px;} ol.comment-list li.bypostauthor .comment-block::after{border-right-color: #FAEBD7;border-width: 9px;margin-left: -2px;margin-top: 0px;} /* Comment thumbnail and buttons */ ol.comment-list li.comment .container-thumbnail{width:66px;height: 66px; border: 1px solid #DDDDDD;border-radius: 5px;box-shadow: 5px 5px 10px -6px #000;} ol.comment-list li.comment .container-thumbnail img{border: 2px solid #fff;border-radius: 5px;} ol.comment-list li.comment .comment-datetime{text-align: right;font-size: calc(var(--site-font-size) - 3px);} ol.comment-list li.comment .comment-reply{display: flex;flex-direction: row;gap:5px;font-size: calc(var(--site-font-size) - 2px);font-weight: normal;} /* ========================== */ /* Closed Comments */ .no-comments{text-align: center;margin-top: 30px;padding:5px;background-color: #FFAEB0; border: solid 1px #EB5151;border-radius: 5px;} #cancel-comment-reply-link::before{content: " - "} /* ------------------------------------------------------------------------- */ /* ----------------------------- PATTERNS ---------------------------------- */ /* ------------------------------------------------------------------------- */ .pattern__boxed-shadow{ box-shadow:3px 5px 30px rgb(46 56 77/.1); padding:30px; border-radius:10px; } /* ------------------------------------------------------------------------- */ /* ---------------------------- / PATTERNS --------------------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* -------------------------- Helpers -------------------------------------- */ /* ------------------------------------------------------------------------- */ .flex-1{flex:1;} .mt-0{margin-top: 0 } .mt-1{margin-top: 10px} .mt-2{margin-top: 20px} .mt-3{margin-top: 40px} .mt-4{margin-top: 100px } .mb-0{margin-bottom: 0} .mb-1{margin-bottom: 10px} .mb-2{margin-bottom: 20px} .mb-3{margin-bottom: 40px} .mb-4{margin-bottom: 100px} .p-0{padding: 0 !important;} .p-1{padding: 10px} .p-2{padding: 20px} .p-3{padding: 40px} .p-4{padding: 100px} .pt-1{padding-top: 10px;} .pt-2{padding-top: 20px;} .pt-3{padding-top: 40px;} .pt-4{padding-top: 15vh;} .pb-1{padding-bottom: 10px;} .pb-2{padding-bottom: 20px;} .pb-3{padding-bottom: 40px;} .pb-4{padding-bottom: 15vh;} .p-lr1{padding: 0 1vw;} .p-lr2{padding: 0 2vw;} .p-lr3{padding: 0 3vw;} .p-lr4{padding: 0 5vw;} .img-res{width: 100%;} .img-before-title{border-radius: 5px 5px 0 0;} /* ! Grid System */ .grid-flex { margin: 0 auto;display: flex; flex-flow: row; flex-wrap: wrap;width: 100%;padding: 30px 0;} .grid-flex--center{justify-content: center;} .col{ flex: 1;} [class*='col-'] { position: relative;padding: 0 1%;} .grid-flex .grid-flex [class*='col-'] {padding: 0px;} .col-10{ width: 10%;} .col-20{ width: 20%; } .col-25{ width: 25%; } .col-30{ width: 30%; } .col-33{ width: 33.33%; } .col-40{ width: 40%; } .col-50{ width: 50%; } .col-60{ width: 60%; } .col-70{ width: 70%; } .col-80{ width: 80%; } .col-90{ width: 90%; } .col-100{ width: 100%; } @media (max-width: 991px) { .tab-20 { width: 20%; } .tab-25 { width: 25%; } .tab-33 { width: 33.33%; } .tab-50 { width: 50%; } .tab-100 { width: 100%; } } @media (max-width: 768px) { [class*='col-'] { width: 100%;} .sma-20 { width: 20%; } .sma-25 { width: 25%; } .sma-33 { width: 33.33%; } .sma-50 { width: 50%; } .sma-100 { width: 100%; } } /* ------------------------------------------------------------------------- */ /* -------------------------- END Helpers ---------------------------------- */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */ /* ------ Icon System - https://ionicframework.com/docs/v3/ionicons/ ------- */ /* ------------------------------------------------------------------------- */ .icon-arrow{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EArrow Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M268 112l144 144-144 144M392 256H100'/%3E%3C/svg%3E");} .icon-check{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg fill='%23333333' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='405.272px' height='405.272px' viewBox='0 0 405.272 405.272'%3E%3Cg%3E%3Cpath d='M393.401 124.425L179.603 338.208c-15.832 15.835-41.514 15.835-57.361 0L11.878 227.836c-15.838-15.835-15.838-41.52 0-57.358c15.841-15.841 41.521-15.841 57.355-0.006l81.698 81.699L336.037 67.064c15.841-15.841 41.523-15.829 57.358 0C409.23 82.902 409.23 108.578 393.401 124.425z'/%3E%3C/g%3E%3C/svg%3E");} .icon-angle{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");} .icon-fb{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Facebook%3C/title%3E%3Cpath d='M480 257.35c0-123.7-100.3-224-224-224s-224 100.3-224 224c0 111.8 81.9 204.47 189 221.29V322.12h-56.89v-64.77H221V208c0-56.13 33.45-87.16 84.61-87.16 24.51 0 50.15 4.38 50.15 4.38v55.13H327.5c-27.81 0-36.51 17.26-36.51 35v42h62.12l-9.92 64.77H291v156.54c107.1-16.81 189-109.48 189-221.31z' fill-rule='evenodd'/%3E%3C/svg%3E");} .icon-ig{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Instagram%3C/title%3E%3Cpath d='M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z'/%3E%3Cpath d='M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z'/%3E%3C/svg%3E");} .icon-tw{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Twitter%3C/title%3E%3Cpath d='M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z'/%3E%3C/svg%3E"); } .icon-yt{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Youtube%3C/title%3E%3Cpath d='M508.64 148.79c0-45-33.1-81.2-74-81.2C379.24 65 322.74 64 265 64h-18c-57.6 0-114.2 1-169.6 3.6C36.6 67.6 3.5 104 3.5 149 1 184.59-.06 220.19 0 255.79q-.15 53.4 3.4 106.9c0 45 33.1 81.5 73.9 81.5 58.2 2.7 117.9 3.9 178.6 3.8q91.2.3 178.6-3.8c40.9 0 74-36.5 74-81.5 2.4-35.7 3.5-71.3 3.4-107q.34-53.4-3.26-106.9zM207 353.89v-196.5l145 98.2z'/%3E%3C/svg%3E"); } .icon-search{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ESearch%3C/title%3E%3Cpath d='M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32' d='M338.29 338.29L448 448'/%3E%3C/svg%3E");} .icon-wa{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Whatsapp%3C/title%3E%3Cpath d='M414.73 97.1A222.14 222.14 0 00256.94 32C134 32 33.92 131.58 33.87 254a220.61 220.61 0 0029.78 111L32 480l118.25-30.87a223.63 223.63 0 00106.6 27h.09c122.93 0 223-99.59 223.06-222A220.18 220.18 0 00414.73 97.1zM256.94 438.66h-.08a185.75 185.75 0 01-94.36-25.72l-6.77-4-70.17 18.32 18.73-68.09-4.41-7A183.46 183.46 0 0171.53 254c0-101.73 83.21-184.5 185.48-184.5a185 185 0 01185.33 184.64c-.04 101.74-83.21 184.52-185.4 184.52zm101.69-138.19c-5.57-2.78-33-16.2-38.08-18.05s-8.83-2.78-12.54 2.78-14.4 18-17.65 21.75-6.5 4.16-12.07 1.38-23.54-8.63-44.83-27.53c-16.57-14.71-27.75-32.87-31-38.42s-.35-8.56 2.44-11.32c2.51-2.49 5.57-6.48 8.36-9.72s3.72-5.56 5.57-9.26.93-6.94-.46-9.71-12.54-30.08-17.18-41.19c-4.53-10.82-9.12-9.35-12.54-9.52-3.25-.16-7-.2-10.69-.2a20.53 20.53 0 00-14.86 6.94c-5.11 5.56-19.51 19-19.51 46.28s20 53.68 22.76 57.38 39.3 59.73 95.21 83.76a323.11 323.11 0 0031.78 11.68c13.35 4.22 25.5 3.63 35.1 2.2 10.71-1.59 33-13.42 37.63-26.38s4.64-24.06 3.25-26.37-5.11-3.71-10.69-6.48z' fill-rule='evenodd'/%3E%3C/svg%3E");} .icon-tk{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Tiktok%3C/title%3E%3Cpath d='M412.19 118.66a109.27 109.27 0 01-9.45-5.5 132.87 132.87 0 01-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14 23.9 350 16 350.13 16h-82.44v318.78c0 4.28 0 8.51-.18 12.69 0 .52-.05 1-.08 1.56 0 .23 0 .47-.05.71v.18a70 70 0 01-35.22 55.56 68.8 68.8 0 01-34.11 9c-38.41 0-69.54-31.32-69.54-70s31.13-70 69.54-70a68.9 68.9 0 0121.41 3.39l.1-83.94a153.14 153.14 0 00-118 34.52 161.79 161.79 0 00-35.3 43.53c-3.48 6-16.61 30.11-18.2 69.24-1 22.21 5.67 45.22 8.85 54.73v.2c2 5.6 9.75 24.71 22.38 40.82A167.53 167.53 0 00115 470.66v-.2l.2.2c39.91 27.12 84.16 25.34 84.16 25.34 7.66-.31 33.32 0 62.46-13.81 32.32-15.31 50.72-38.12 50.72-38.12a158.46 158.46 0 0027.64-45.93c7.46-19.61 9.95-43.13 9.95-52.53V176.49c1 .6 14.32 9.41 14.32 9.41s19.19 12.3 49.13 20.31c21.48 5.7 50.42 6.9 50.42 6.9v-81.84c-10.14 1.1-30.73-2.1-51.81-12.61z'/%3E%3C/svg%3E"); } .icon-plus{display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EAdd%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M256 112v288M400 256H112'/%3E%3C/svg%3E");} .icon-call{ display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M436.9 364.8c-14.7-14.7-50-36.8-67.4-45.1-20.2-9.7-27.6-9.5-41.9.8-11.9 8.6-19.6 16.6-33.3 13.6-13.7-2.9-40.7-23.4-66.9-49.5-26.2-26.2-46.6-53.2-49.5-66.9-2.9-13.8 5.1-21.4 13.6-33.3 10.3-14.3 10.6-21.7.8-41.9C184 125 162 89.8 147.2 75.1c-14.7-14.7-18-11.5-26.1-8.6 0 0-12 4.8-23.9 12.7-14.7 9.8-22.9 18-28.7 30.3-5.7 12.3-12.3 35.2 21.3 95 27.1 48.3 53.7 84.9 93.2 124.3l.1.1.1.1c39.5 39.5 76 66.1 124.3 93.2 59.8 33.6 82.7 27 95 21.3 12.3-5.7 20.5-13.9 30.3-28.7 7.9-11.9 12.7-23.9 12.7-23.9 2.9-8.1 6.2-11.4-8.6-26.1z'/%3E%3C/svg%3E");} .icon-in{ display:inline-block; margin: -3px 5px;width: 18px;height: 18px;background-size: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z'/%3E%3C/svg%3E");} .icon-hearth{ display:inline-block;margin: -3px 5px;width: 24px;height: 24px;--svg-icon: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="iso-8859-1"%3F>');-webkit-mask-image: var(--svg-icon);-webkit-mask-repeat:no-repeat;-webkit-mask-size: 100%;mask-image: var(--svg-icon);mask-repeat:no-repeat;mask-size: 100%;background-color: #000;} .icon-left-chevron{display:inline-block; margin: -3px 5px;width: 24px;height: 24px;background-size: 100%; background-repeat: no-repeat; background-image: url('data:image/svg+xml,');} .icon-reply{display:inline-block; margin: -3px 0;width: 16px;height: 16px;background-size: 100%; background-repeat: no-repeat;background-image: url('data:image/svg+xml,');} .icon-edit{display:inline-block; margin: -3px 0;width: 16px;height: 16px;background-size: 100%; background-repeat: no-repeat;background-image: url('data:image/svg+xml,');} .icon-cart{display:inline-block; width: 38px;height: 38px; --svg-icon: url('data:image/svg+xml,');-webkit-mask-image: var(--svg-icon);-webkit-mask-repeat:no-repeat;-webkit-mask-size: 100%;mask-image: var(--svg-icon);mask-repeat:no-repeat;mask-size: 100%;background-color: #000;} .icon-home{display:inline-block; margin: -3px 0;width: 24px;height: 24px;background-size: 100%; background-repeat: no-repeat; background-image: url('data:image/svg+xml,');} .icon-arrow-up{display:inline-block; margin: -3px 0;width: 18px;height: 18px;background-size: 100%; vertical-align: middle; background-repeat: no-repeat;background-image: url('data:image/svg+xml,');} .icon-1{width: 40px;height: 40px;} .icon-2{width: 70px;padding: 8px;} .icon-3{width: 100px;padding: 8px;} .icon-invert{filter: invert(1);} /* ------------------------------------------------------------------------- */ /* ----- END Icon System - https://ionicframework.com/docs/v3/ionicons/ ---- */ /* ------------------------------------------------------------------------- */ /* Accordion */ .accordion h3{position: relative;padding-right: 30px;margin: 20px 0 15px 0;cursor:pointer} .accordion h3:after{ width: 30px;height: 30px;position: absolute; top:0; right:0;content: ' '; background-image: url('data:image/svg+xml;utf8,'); transform: rotate(90deg); background-size:100%; } .accordion .wp-block-column .wp-block-group {padding: 0;max-height: 0;overflow:hidden;border-bottom: 2px solid #ddd; transition: all 0.2s ease-in-out;} .accordion .wp-block-column .wp-block-group.open-accordion{max-height:500px;padding-bottom: 15px;overflow: auto;} .accordion .wp-block-group__inner-container{padding-right: 30px;} /* Animation on scroll */ .fade { opacity: 0; transform: translateY(40px); transition: 1.0s ease-in-out; will-change: transform, opacity;} .fadeIn { opacity: 1;transform: translateY(0px)} /* Animation on load */ @keyframes fade-load { from {opacity: 0; transform: translateY(20px);} to {opacity: 1; transform: translateY(0);} } .load { opacity: 0; animation: fade-load cubic-bezier(0.385, 0.135, 0.15, 0.86) 0.5s forwards;} /* Whats App */ .logo-whats-app { display: block; width: 38px; height: 38px; position: fixed; bottom: 43px; right: 43px; z-index: 999; border-radius: 100%; background: #25D366; border: 0px solid #25D366; } .logo-whats-app .icon-wa{width: 44px;height: 44px;margin: -3px 0 0 -3px;padding: 0;filter: invert(1);} .related-post{align-items: flex-start;justify-content: space-between;} /* ------------------------------------------------------------------------- */ /* ---------------------- ANIMATION CSS KEY FRAMES ------------------------- */ /* ------------------------------------------------------------------------- */ @keyframes fadeIn { 0% { opacity: 0; } 100% { visibility: visible; opacity: 1; } } @keyframes fade-load { from {opacity: 0; transform: translateY(20px);} to {opacity: 1; transform: translateY(0);} } @keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(255,255,255, 0.1), 0 0 0 20px rgba(255,255,255, 0.1), 0 0 0 40px rgba(255,255,255, 0.1), 0 0 0 60px rgba(255,255,255, 0.1); } 100% { box-shadow: 0 0 0 20px rgba(255,255,255, 0.1), 0 0 0 40px rgba(255,255,255, 0.1), 0 0 0 60px rgba(255,255,255, 0.1), 0 0 0 80px rgba(255,255,255, 0); } }