/* Theme Name: LuxuryConceptFree Theme URI: https://www.luxuryconcept.website Author: Stefano Fattori Author URI: https://www.stefanofattori.it Description: A lightweight, fast and responsive WordPress theme with Header Styles like trasparent Header Template, Menus, Amazing Block Patterns, Cool animations. Outstanding performance, modern design, and intuitive customization. Optimized for mobile devices, it delivers a seamless user experience. Tested up to: 6.4 Requires PHP: 5.8 Version: 1.1.6 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%; --content-padding: 20px 5%; --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 ------------------------------- */ /* ------------------------------------------------------------------------- */ .wrapper-grid{ display: grid; grid-template-columns: auto; grid-template-areas: "topbar" "header" "wrapper_content" "footer-sidebar" "footer"; overflow: visible; /* Keep this to enable sticky header (position: sticky)*/ width: var(--wrapper-width); min-height: 100vh; padding: 0; margin: 0; } .wrapper_content{ display: grid; grid-area: wrapper_content; grid-template-columns: 15% auto; grid-template-areas: "breadcrumbs breadcrumbs" "primary-sidebar main-content"; overflow:hidden; padding: var(--content-padding); margin: 0; gap:55px; } /* ------------------------ HEADER ------------------------------- */ .header{ grid-area: header;display: flex; gap:15px;flex-direction: row; justify-content: space-between;align-items: center;align-self:flex-start; 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 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{ 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 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;} } .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);} /* 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: " - "} /* ------------------------------------------------------------------------- */ /* -------------------------- 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); } }