/* Theme Name: Square Socket Minimal Description: Custom Theme Author: Square Socket Author URI: https://www.squaresocket.com Version: 1.5 */ /**** INDEX **************** 0. Root 0.1 Root Colours 1. Fonts 1.1 Font Families 1.2 Link Rules 1.3 General Fonts 1.4 Specific Fonts 1.5 Buttons 1.5.1 Overwrite 3rd Party Buttons 1.5.2 Generic Button 1.5.3 Button Variations Type 1.5.4 Button Variations Color 1.5.5 Custom Taxonomy Buttons 1.5.6 Button Group 1.6 On Black Fonts 1.7 Navigation Fonts EMPTY 1.8 Footer Fonts 1.9 REMOVED 1.10 Mobile Fonts 2. Layout 2.1 Site Widths 2.2 Body Padding 2.3 Misc layout 3. Colours 3.1 Header Colours 3.2 Top Level Nav Colours 3.3 Bottom Level Nav Colours 3.4 Mobile Menu Nav Colours 3.5 Body Background Colours 3.6 Footer Colours 4. Header 4.1 General Menu Rules 4.2 Masthead Grid 4.3 Branding 4.4 Menu Inline 4.5 Menu Top 4.6 Menu Bottom 4.7 Mobile Menu 4.7.2 Navbar Toggle 4.8 Breadcrumbs 4.9 Fixed Heading Positioning 4.9.2 Fixed Heading Positioning Change on up and down scroll 4.10 Above Header Widget Area 4.11 Animated Menu Hover States 4.12 Add Pipe Element Between Menu Items 4.13 Custom Desktop Mobile Menu MIGRATE 4.14 Desktop Contact Fullwidth Modal MIGRATE 4.15 Secondary Mobile Menu MIGRATE 4.16 Custom Contact Menu Item 4.17 Logged In / Logged Out Menu 5. Footer 5.1 Footer Menu 5.2 Below Footer Menu Styling 5.3 Cookie Preferences 5.4 Footer Grid Override 5.5 Custom Footer Area 6. Bootstrap 6.1 Bootstrap / WooCommerce Fixes 6.2 Bootstrap Tabs 6.3 ACF Fixes 7. Swiper 7.1 Header Slider Rules 7.2 Swiper JS Slider 7.3 Swiper Container Rules 7.4 Swiper Slide Rules 7.5 Swiper Image Rules 7.6 Swiper Meta Positoning 7.7 Swiper Meta Items 7.8 Swiper Bullets 7.9 Swiper Controllers 7.10 Swiper Carousel Ribbon 7.11 Swiper Single 7.12 Swiper Ribbon 7.13 Swiper Tickertext 7.14 Swiper Square 7.15 Swiper Header 7.16 Swiper Custom Grid 7.17 Swiper Visable Inactive Slides 8. WooCommerce (MOVED) 9. Blog 9.1 Blog Archive Rules 9.2 Post Cards 9.3 Post Single 9.4 Blog Content Items 9.5 Comments 9.6 Post Sidebar 9.7 Pagination 10. Contact 10.1 Contact Form 7 Rules 10.2 Narrative Contact Form 10.2 CF7 Styles 10.2.1 Contact Form 7 Underline Rules 10.2.2 Contact Form 7 Boxed Rules 10.2.3 CF7 Inline Grid 10.2.4 CF7 Narrative 10.2 Material Design Icons for Contact Details 10.3 Larger Letter for Contact Details 10.4 Grid for Opening Hours Contact Details 10.6 Contact Details List SVG 11. Modals 11.1 General Modal Rules 11.1.1 Modal Close 11.1.1.2 Modal Close Custom 11.1.2 Modal Background 11.2 Fullscreen Modal Rules 11.1 Search Modal 11.2 Full Page Modal 11.3 Subscribe Modal Rules 11.4 Modal Menu Modal Rules 11.5 Homemade Modal 11.6 PhotoSwipe 12. Bits & Bobs 12.1 Table Rules 12.2 Focus States 12.3 Custom Video 12.4 Display Nones 12.5 Remove Visual Composer Link at the Bottom of Page 12.6 Tabs 12.7 WordPress Search 12.8 Download File Icons 12.9 Cookies Grid 12.10 DELETED 12.11 MailChimp 12.12 Scroll to Top 12.13 Random Crap That Shouldn't Have Been in Storefront Anyway 12.14 Page Minimum Height Rule 12.15 DELETED 12.16 Service Card 12.17 Smooth Scrolling 12.18 Irregular and Regular Siblings Blocks 12.19 Lightbox 12.20 Accordion 12.21 Transparent Background Layer After Background Element 12.22 Parralax 12.23 Position Sticky 12.24 Vimeo Background Video 12.25 Hide Google Recaptcha 12.26 Emergency Message 12.27 Two Col Text 12.28 Social Share Icons 12.29 Lightbox Gallery 12.30 Inline CTA 12.31 Line Behind the Title 12.32 Inline Menu Inside Template 12.33 Info Banner VC BLock 12.34 Process Card VC BLock 12.35 Change Image On Hover 12.36 Carosel Anything 12.37 Back Arrow 12.38 Styled ul Tick List 12.39 DELETED 12.40 DELETED 12.41 DELETED 12.42 Wysiwyg Partially Overlaid Image 12.43 List item with custom image 12.44 Strapline 12.45 Animated Section 12.46 Zoom Card 12.47 Video Behind Text 12.48 DELETED 12.49 Team Member Card 12.50 Floating Social Share 12.51 Search Form 12.52 CPT Blocks 12.53 Display Blocks 12.54 Contact Section 12.55 Link Card 12.56 Info Card 12.57 Smart Side Menu 12.58 Grid Rules 12.59 Slanted Card 12.60 Side Modals 12.61 DELETED 12.62 DELETED 12.63 Logo Grid VC 12.64 Rotating Circle of Text 12.65 Image With Text Ribbon 12.66 WYSIWYG Pulled Left 12.67 Speaker Card 12.68 Icon Card 12.69 Testimonial Slider Style Three TTTTTTT 12.70 DELETED 12.71 Floating CTA Lozenge 12.72 Download Card 12.73 Prevent Image Copying 12.74 Pulled Up on Desktop 12.75 Visual Composer Overwrite 12.76 Mosaic Gallery 12.77 Pricing List 12.78 Google Recaptcha 12.79 Image Zoom 12.80 Pages Grid 12.81 Tickertape 12.82 Archive Filter Form Rules 12.83 Read More Expanding Section 12.84 WordPress Admin Bar 12.85 Custom Cursor 12.86 Google Maps 13. Custom Post Types 13.1 Events 13.2 Videos 13.3 Jobs 13.4 Curriculum 13.5 Concrete Pumps 13.6 Custom Products 13.7 Podcasts 13.8 Courses 13.9 Media Assets 13.10 Press Releases 13.11 Articles 13.12 Team 13.13 Offers 13.14 Properties 13.15 Webinars 13.16 Projects 14. Custom Page Templates 14.1 Homepage 14.2 Absolute Slider Template 14.3 Fullwidth 14.4 Search 14.5 DELETED 14.6 Secure Page Login 14.7 Portfolio 14.8 Smart Menu 14.9 Work 14.10 Side Template 14.11 Slider Above Menu Template 14.12 Service Page Template 14.13 Sitemap Page Template 14.14 Static Homepage 14.15 Conversion Page Template 14.16 ACF Page Builder 14.17 Scrollspy 14.18 How To Guide (Scrollspy Horizontal) 14.19 Scrollspy 15. Animations 15.1 Animate SVG 15.2 Viewport Animation Fade 15.3 Viewport Animation Up 15.4 Viewport Animation Down 15.5 Viewport Animation Left 15.6 Viewport Animation Right 15.7 Viewport Animation Curtains 15.8 Viewport Animation Draw Right / Left 15.9 Animation Sliding Text 15.10 Move Background Vertically 15.11 Viewport Sliding Text 15.12 Viewport Sliding Images 15.13 Parralax Animation 16. Display Blocks 17. Cards 18. Testimonials 18.1 Testimonial Blocks 18.2 Testimonial Cards 19. Theme Specific Edits 20. Desktop Only Styling 21. Mobile Only Styling 22. Intermediate Stages Styling /****************************************/ /****************************************/ /************ 0. START ROOT ************/ /****************************************/ /****************************************/ /**** 0.1 Root Colours ****/ :root { --above-header-content:#414141; --above-header-background:#fff; --masthead-background: #fff; --menu-first-level-background: #fff; --menu-background-hover: #fff; --menu-first-level-dropdown-background: #fff; --submenu-background-hover: #fff; --menu-item: #414141; --menu-item-hover: #7ed957; --menu-item-current: #7ed957; --menu-mobile-background: #fff; --menu-mobile-item: #414141; --menu-mobile-line: lightgrey; --menu-mobile-toggle: #7ed957; --menu-mobile-item-active: #7ed957; --button-color: #000; --button-background: #7ed957; --button-border: #7ed957; --button-hover-color: #fff; --button-hover-background: #7ed957; --button-hover-border: #7ed957; --button-active-text: #fff; --button-active-background: #000; --button-active-border: #000; --background: #fff; --background-subtle: #F8F8F7; --background-strong: #222; --detail:#7ed957; --detail-secondary:#785964; --mid-border: #c2c2c2; --blue: #4380b9; --dark-blue: #475273; --grey: #6c757d; --dark-grey: #545b62; --title: #000; --title-secondary: #7ed957; --content: #414141; --content-slider: #fff; --on-black: #fff; --footer-background: #000; --footer-below-background: #000; --footer-content: #fff; --height-half: 25px; --height-standard: 70px; --height-double: 120px; --title-gap: 20px; --title-gap-small: 10px; --text-gap: 10px; --col-full: 1360px; --col-full-padding: 20px; --grid-gap-horizontal: 50px; --mastead-height-mirror-desktop: 135px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ :root { --height-half: 25px; --height-standard: 35px; --height-double: 60px; --title-gap: 20px; --title-gap-small: 10px; --text-gap: 10px; } } /****************************************/ /****************************************/ /************** END ROOT **************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /*********** 1. START FONTS ************/ /****************************************/ /****************************************/ /**** 1.1 Font Families ****/ h1, h2, h3, h4, label { font-family: "Outfit", sans-serif; } p, li, body, button, input, textarea, #page #mc_embed_signup input.email, #mc_embed_signup { font-family: "Montserrat", sans-serif; } .navbar a { font-family: "Outfit"; } /* .logo-custom { font-family: Garamond; } */ /**** 1.2 Link Rules ****/ a, a:hover { color: var(--detail); } span.pillarbox-red { color: #D21B32; } /* FUNKY LINK HOVER STATES .entry-content a:not(.button) { background-image: linear-gradient(120deg, #26BDFF 0%, #26BDFF 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 100% 0%; border-bottom: 1px solid #26BDFF; text-decoration: none!important; transition: background-size .125s ease-in; } .entry-content a:not(.button):hover { background-size: 100% 100%; text-decoration: none!important; } .entry-content a:has(img) { border-bottom: none !important; background-image: none !important; } */ .thick-underlined-link p a:not(.button) { background-image: linear-gradient(120deg, var(--detail) 0%, #baeaff var(--detail-secondary) ); background-position: 0 100%; background-repeat: no-repeat; background-size: 100% 40%; border-bottom: 0px solid #26BDFF; text-decoration: none!important; transition: background-size .125s ease-in; color: #000; } .thick-underlined-link p a:not(.button):hover { background-size: 100% 100%; text-decoration: none!important; } /**** 1.3 General Fonts ****/ h1 { color: var(--title); font-weight: 500; font-size: 42px; line-height: 1.2em; margin: 0 0 0; padding: 0px 0 0; } h1:after { content: " "; width: 70px; height: 2px; background: var(--detail); margin: 20px 0px 10px; display: block; } h1.h1-after-center:after, .h1-after-center h1:after { margin-left: auto; margin-right: auto; } h2 { color: var(--title); font-weight: 600; font-size: 30px; line-height: 1.2em; margin: 0 0 0; padding: 0px 0 0; } h3 { color: var(--title); font-weight: 600; font-size: 22px; line-height: 1.2em; margin: 0 0 0; padding: 0px 0 0; } h4 { color: var(--title-secondary); font-weight: 600; font-size: 18px; line-height: 1.4em; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 0; padding: 0px 0 0; } h5 { color: var(--title); font-weight: 600; font-size: 16px; line-height: 1.2em; letter-spacing: 1px; margin: 0 0 0; padding: 0px 0 0; } p, li, body { line-height: 1.6em; color: var(--content); font-size: 17px; margin: 0 0 0; padding: 0px 0 0; text-wrap-style: pretty; } ::marker { color: var(--detail); } ol, ul { margin: 0 0 10px 29px; padding: 0; } p { margin-bottom: 0px; } /*** Font Spacing */ p + p, p + ul, ul + p, ul + ul, ul + blockquote, p + ol, ol + p, ol + ol, ol + blockquote, blockquote + p, blockquote + ul, blockquote + ol, .video-embed + p, .video-embed + ul, .video-embed + ol { padding-top: var(--text-gap); } p + button, p + .button, ul + button, ul + .button, ol + button, ol + .button, blockquote + button, blockquote + .button, p + blockquote, p + .video-embed, .video-embed + .video-embed { margin-top: var(--text-gap); } p + p:has(.button), p + p:has(button) { padding-top: var(--title-gap); } h1 + h1, h2 + h2, h3 + h3, h4 + h4, h4 + p, h4 + ul, h4 + ol { padding-top: var(--title-gap-small); } h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + p, h1 + ul, h1 + ol, h1 + blockquote, h1 + .wpcf7, h2 + h1, h2 + h3, h2 + h4, h2 + h5, h2 + p, h2 + ul, h2 + ol, h2 + blockquote, h2 + .wpcf7, h3 + h1, h3 + h2, h3 + h4, h3 + h5, h3 + p, h3 + ul, h3 + ol, h3 + blockquote, h3 + .wpcf7, h4 + h1, h4 + h2, h4 + h3, h4 + h5, h4 + ul, h4 + ol, h4 + blockquote, h4 + .wpcf7, h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + p, h5 + ul, h5 + ol, h5 + blockquote, h5 + .wpcf7, p + h1, p + h2, p + h3, p + h4, p + .wpcf7, ul + h1, ul + h2, ul + h3, ul + h4, ul + .wpcf7, ol + h1, ol + h2, ol + h3, ol + h4, ol + .wpcf7, blockquote + h1, blockquote + h2, blockquote + h3, blockquote + h4, blockquote + h5, blockquote + .wpcf7, .video-embed + h1, .video-embed + h2, .video-embed + h3, .video-embed + h4, .video-embed + h5, .video-embed + .wpcf7, p + .button--group, ul + .button--group, ol + .button--group, blockquote + .button--group, h1 + .button--group, h2 + .button--group, h3 + .button--group, h4 + .button--group, h5 + .button--group, .wpcf7 + .button--group { padding-top: var(--title-gap); } h1 + button, h1 + .button, h2 + button, h2 + .button, h3 + button, h3 + .button, h4 + button, h4 + .button, h5 + button, h5 + .button, h1 + .video-embed, h2 + .video-embed, h3 + .video-embed, h4 + .video-embed, h5 + .video-embed { margin-top: var(--title-gap); } /**** 1.4 Specific Fonts ****/ b, strong { font-weight: 500; } .meta-info { font-size: 20px; } #comments { color: var(--content); } .widget .widget-title, .widget .widgettitle { color: var(--content); } h1 underline { position: relative; text-decoration: none; white-space: nowrap; z-index: 10; } h1 underline:after { background-repeat: no-repeat; background-size: cover; height: 0.5rem; position: absolute; content: ""; bottom: -0.25rem; left: -0.25rem; right: -0.25rem; z-index: -1; background-color: var(--detail); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } h1 circle { position: relative; text-decoration: none; white-space: nowrap; z-index: 2; font-weight: inherit; } h1 circle:after { background-repeat: no-repeat; background-size: cover; position: absolute; height: 130%; width: 116%; content: ""; bottom: -15%; left: -8%; z-index: -1; background-color: var(--detail); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } .sml { font-size: 0.6em; } /* COMMON / Footer Menu */ .site-footer h1, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6, .site-footer .widget .widget-title, .site-footer .widget .widgettitle { color: white; font-size: 22px; /* text-transform: uppercase; */ font-weight: 600; border-bottom: 1px solid var(--detail); margin-bottom: 10px; padding-bottom: 7px; } .site-footer h2 { color: var(--footer-content); font-size: 42px; font-weight: 600; text-align: center; } /* Sidebar Fonts */ .widget-area .widget a:not(.button) { font-weight: 100; text-decoration: none; font-size: 18px; } /* Slider Fonts */ .header-text h1, .header-text h2, .header-text p, .header-text-inner h1, .header-text-inner h2, .header-text-inner p { color: var(--content-slider); /*text-shadow: 1px 1px 5px black;*/ } /* home blocks */ .home-blocks h4 { font-size: 18px; } /* Below Footer Fonts */ .below-footer p { font-size: 14px; font-weight: 500; } /**** 1.5 Buttons ****/ /**** 1.5.1 Overwrite 3rd Party Buttons ****/ /* COMMON / Button Colours */ input[type="reset"], .added_to_cart, .widget a.button, .site-header-cart .widget_shopping_cart a.button, button.alt, input[type="button"].alt, input[type="reset"].alt, input[type="submit"].alt, .button.alt, .added_to_cart.alt, .widget-area .widget a.button.alt, .added_to_cart, .widget a.button.checkout, .woocommerce-page div#tab-reviews p.form-submit input { padding: 8px 30px; border: 1px solid var(--button-border); color: var(--button-color)!important; background-color: var(--button-background); font-weight: 100; text-decoration: none!important; display: inline-block; white-space: nowrap; line-height: 1em; } /* COMMON / Button Hover Colours */ input[type="reset"]:hover, .added_to_cart:hover, .widget a.button:hover, .site-header-cart .widget_shopping_cart a.button:hover, .woocommerce-page div#tab-reviews input#submit:hover { -webkit-transition: .5s!important; -o-transition: .5s!important; transition: .5s!important; border-color: var(--button-hover-border)!important; background-color: var(--button-hover-background)!important; color: var(--button-hover-color)!important; text-decoration: none!important; } /**** 1.5.2 Generic Button ****/ /* COMMON / Button Colours */ button, .button, input[type="button"], input[type="submit"] { padding: 12px 25px; border: 1px solid var(--button-border); color: var(--button-color); background-color: var(--button-background); font-weight: 400; text-decoration: none; display: inline-block; white-space: nowrap; line-height: 1em; } /* COMMON / Button Hover Colours */ button:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover { -webkit-transition: .5s; -o-transition: .5s; transition: .5s; border-color: var(--button-hover-border); background-color: var(--button-hover-background); color: var(--button-hover-color); text-decoration: none; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ button, .button, input[type="button"], input[type="submit"] { padding: 10px 14px; } } /**** 1.5.3 Button Variation ****/ /**** 1.5.3.1 Elevated Button ****/ body .button--elevated { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.26); } body .button--elevated:hover { box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.26); } /**** 1.5.3.2 Inverted Button ****/ body .button--inverted { background: var(--button-hover-background); color: var(--button-hover-color); border-color: var(--button-hover-border); } body .button--inverted:hover { background: var(--button-background); color: var(--button-color); border-color: var(--button-border); } /**** 1.5.3.3 Text Button ****/ body .button--text { background: transparent; color: var(--button-background); border-color: transparent; text-decoration: underline; } body .button--text:hover { background: var(--button-hover-background); color: var(--button-hover-color); border-color: var(--button-hover-border); } /**** 1.5.3.4 Gradient Button ****/ body .button--gradient { background-image: linear-gradient(to right, #4b6cb7 0%, #182848 51%, #4b6cb7 100%); flex: 1 1 auto; background-size: 200% auto; color: white; border-color: transparent; } body .button--gradient:hover { background-position: right center; border-color: transparent; } /**** 1.5.3.5 Arrow Button ****/ body .button--arrow { /* border-radius: 33px; */ position: relative; padding-right: 50px; } body .button--arrow:after { content: ""; display: inline-block; width: 21px; height: 21px; background-color: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; position: absolute; top: 50%; right: 19px; transform: translateY(-50%); } body .button--arrow::after:hover { background-color: currentColor; } body .on-black .button--arrow { color: var(--detail); background: transparent; border-color: var(--detail); } body .button--arrow.button--arrow-solid { background-color: var(--detail); color: #000; border-color: var(--detail); } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ body .button--arrow { padding-right: 32px; font-size: 11px; } body .button--arrow:after { right: 11px; width: 16px; height: 16px; } } /**** 1.5.3.6 Phone Button ****/ body .button--phone { /* border-radius: 33px;*/ position: relative; padding-left: 50px; } body .button--phone:before { content: ""; display: inline-block; width: 21px; height: 21px; background-color: var(--button-color); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; position: absolute; top: 50%; left: 19px; transform: translateY(-50%); } body .button--phone:before:hover { background-color: var(--button-hover-color); } body .on-black .button--phone { color: var(--detail); background: transparent; border-color: var(--detail); } /**** 1.5.3.6 Navigate Button ****/ body .button--navigate { border-radius: 33px; position: relative; padding-left: 50px; } body .button--navigate:before { content: ""; display: inline-block; width: 21px; height: 21px; background-color: var(--button-color); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; position: absolute; top: 50%; left: 19px; transform: translateY(-50%); } body .button--navigate:before:hover { background-color: var(--button-hover-color); } body .on-black .button--navigate { color: var(--detail); background: transparent; border-color: var(--detail); } /**** 1.5.3.6 WhatsApp Button ****/ body .button--whatsapp { border-radius: 33px; position: relative; padding-left: 50px; } body .button--whatsapp:before { content: ""; display: inline-block; width: 21px; height: 21px; background-color: var(--button-color); background: url("data:image/svg+xml;utf8,") no-repeat center / contain; position: absolute; top: 50%; left: 19px; transform: translateY(-50%); } body .button--whatsapp:before:hover { background-color: var(--button-hover-color); } body .on-black .button--whatsapp { color: var(--detail); background: transparent; border-color: var(--detail); } /**** 1.5.3.6 Website Button ****/ body .button--website { border-radius: 33px; position: relative; padding-left: 50px; } body .button--website:before { content: ""; display: inline-block; width: 21px; height: 21px; background-color: var(--button-color); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; position: absolute; top: 50%; left: 19px; transform: translateY(-50%); } body .button--website:before:hover { background-color: var(--button-hover-color); } body .on-black .button--website { color: var(--detail); background: transparent; border-color: var(--detail); } /**** 1.5.3.7 Down Arrow Button ****/ body .button--downarrow { border-radius: 33px; position: relative; padding-right: 50px; } body .button--downarrow:after { content: ""; display: inline-block; width: 21px; height: 21px; background-color: var(--button-color); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; position: absolute; top: 50%; right: 19px; transform: translateY(-50%); } body .button--downarrow:after:hover { background-color: var(--button-hover-color); } body .on-black .downarrow--arrow { color: var(--detail); background: transparent; border-color: var(--detail); } /**** 1.5.3.8 Outlined Button ****/ body .button--outlined { background: transparent; color: var(--button-background); border-color: var(--button-border); } body .button--outlined:hover { background: var(--button-hover-background); color: var(--button-hover-color); border-color: var(--button-hover-border); } body .button--outlined:after, body .button--outlined:before { background-color: var(--button-background); } body .button--outlined:hover:after, body .button--outlined:hover:before { background-color: var(--button-hover-color); } /**** 1.5.3.5 CTA Button ****/ body .button--cta { position: relative; padding-right: 50px; } body .button--cta:after { content: ""; display: inline-block; width: 21px; height: 21px; background-color: var(--button-color); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; position: absolute; top: 50%; right: 19px; transform: translateY(-50%); } body .button--cta:after:hover { background-color: var(--button-hover-color); } body .on-black .cta--arrow { color: var(--detail); background: transparent; border-color: var(--detail); } /**** 1.5.4 Button Variations Color ****/ /**** 1.5.4.1 Button Colours Blue ****/ body .button--blue { color: white; background: var(--blue); border-color: var(--blue); } body .button--blue:hover { color: white; background: var(--dark-blue); border-color: var(--dark-blue); } body .button--blue.button--outlined { color: var(--blue); background: transparent; border-color: var(--blue); } body .button--blue.button--outlined:hover { color: white; background: var(--dark-blue); border-color: var(--dark-blue); } body .button--blue.button--outlined:after, body .button--blue.button--outlined:before { background-color: var(--blue); } body .button--blue.button--outlined:hover:after, body .button--blue.button--outlined:hover:before { background-color: white; } /**** 1.5.4.2 Button Colours Grey ****/ body .button--grey { color: white; background: var(--grey); border-color: var(--grey); } body .button--grey:hover { color: white; background: var(--dark-grey); border-color: var(--dark-grey); } body .button--grey.button--outlined { color: var(--grey); background: transparent; border-color: var(--grey); } body .button--grey.button--outlined:hover { color: white; background: var(--dark-grey); border-color: var(--dark-grey); } body .button--grey.button--outlined:after, body .button--grey.button--outlined:before { background-color: var(--grey); } body .button--grey.button--outlined:hover:after, body .button--grey.button--outlined:hover:before { background-color: white; } /**** 1.5.5 Custom Taxonomy Buttons ****/ .category-description-container { padding: 0 0 15px; } .custom-taxonomy-in-button-list { display: flex; grid-gap: 15px; flex-wrap: wrap; font-size: 0; /* margin-top: 24px; */ } a.button.custom-taxonomy-in-button-list-button { margin: 0 0px 0px 0; border-radius: 30px; padding: 8px 20px; font-size: 16px; text-decoration: none; background: transparent; border: 2px solid black; } a.button.custom-taxonomy-in-button-list-button:hover { background: black; } /**/ .custom-active-button { margin: 0 0px 0px 0; border-radius: 30px; padding: 8px 20px; font-size: 16px; text-decoration: none; background: lightgrey!important; color: var(--button-color); border: none; opacity: .5; } .custom-active-button:hover { opacity: .9; } .custom-active-button.custom-active-button--active { background-color: #7b7575!important; color: #fff; opacity: 1; } /* Custom Taxonomy Dropdown */ .custom-taxonomy-in-dropdown-list select { padding: 7px 10px; border: 1px solid var(--mid-border); border-radius: 4px; } /**** 1.5.6 Button Group ****/ .button--group { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .button--group { gap: 5px; } } /**** 1.6 On Black Fonts ****/ .on-black, .on-black h1, .on-black h2, .on-black h3, .on-black p, .on-black li, .on-black a, .on-black label, .on-black label.gfield_label { color: var(--on-black); } /**** 1.7 Navigation Fonts ****/ /**** 1.8 Footer Fonts ****/ #colophon p, #colophon a, #colophon { color: var(--footer-content); margin-bottom:0; font-size: 16px; } #colophon a { font-family: "Outfit", sans-serif; text-decoration: none; } #colophon p:has(svg) { display: flex; align-items: center; gap: 16px; padding: 0; } #colophon p:has(svg) a { padding: 10px 0; } .custom-footer--menu .navbar li { --spacing: 32px; position: relative; margin-left: var(--spacing); color: var(--footer-content); } .custom-footer--menu .navbar li::before { content: ""; position: absolute; left: calc(var(--spacing) * -1); top: 50%; transform: translateY(-50%); width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtOSAxOCA2LTYtNi02Ii8+PC9zdmc+") no-repeat center / contain; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtOSAxOCA2LTYtNi02Ii8+PC9zdmc+") no-repeat center / contain; } .custom-footer--menu .navbar li a { display: block; padding: 16px 2px; } .footer-inner { text-align: center; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } /**** 1.9 REMOVED ****/ /**** 1.10 Mobile Fonts ****/ @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ h1 { font-size: 20px; } h2 { font-size: 22px; } h3 { font-size: 20px; } h4 { font-size: 12px; } p, li, body { font-size: 14px; } } /****************************************/ /****************************************/ /************* END FONTS **************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /*********** 2. START LAYOUT ************/ /****************************************/ /****************************************/ /**** 2.1 Site Widths ****/ .container { width: 100%; padding-right: 0px; padding-left: 0px; margin-right: 0px; margin-left: 0px; max-width: 100%; } .col-full { max-width: var(--col-full); width: 100%; padding-left: var(--col-full-padding); padding-right: var(--col-full-padding); margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; } .narrow { max-width: 1000px; margin: 0 auto; } .narrower { max-width: 800px; margin: 0 auto; } .narrowest { max-width: 600px; margin: 0 auto; } .masthead-grid { max-width: 100%; width: 100%; padding: 0; transition: 0.5s; background: var(--masthead-background); z-index: 12; position: relative; } .colophon--grid { max-width: var(--col-full);; margin: 0 auto; } .below-footer--grid { max-width: var(--col-full);; margin: 0 auto; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 2.2 Body Padding ***/ div#content { padding-top: 0px; } body { margin: 0; padding: 0; overflow: auto; } #page { min-height: 100dvh; display: flex; flex-direction: column; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ #page { min-height: calc(100dvh - 32px); } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 2.3 Misc Layout ***/ img { max-width: 100%; height: auto; border-radius: 0px; } .alignright { float: right; margin: 15px 0 15px 20px; max-width: 50%!important; } .alignleft { float: left; margin: 15px 20px 15px 0px; max-width: 50%!important; } .alignright + p, .alignleft + p { margin-top: var(--text-gap); } iframe { border: 0; max-width: 100%; margin: 0!important; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .mobile--only { display: none!important; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .desktop--only { display: none!important; } } /****************************************/ /****************************************/ /************* END LAYOUT **************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /*********** 3. START COLOURS ***********/ /****************************************/ /****************************************/ /**** 3.1 Header Colours ****/ #masthead { background:var(--masthead-background); } /**** 3.5 Body Background Colours ****/ /* COMMON / Outer Body Background Colour */ body { background-color: var(--background); color: var(--content); } /* COMMON / Inner Body Background Colour */ #content > .col-full { background: var(--background); } /**** 3.6 Footer Colours ****/ /* COMMON / Outer Footer Background Colour */ #colophon { background: var(--footer-background); padding-bottom: 0px; margin-top: auto; } /* COMMON / Inner Footer Background Colour */ .below-footer { background: var(--footer-below-background); } /****************************************/ /****************************************/ /************* END COLOURS **************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /********** 4. START HEADER *************/ /****************************************/ /****************************************/ /**** 4.1 General Menu Rules ****/ /** Menu Generic */ nav.navbar { margin: 0; padding: 0; } /**** 4.2 Masthead Grid ****/ .logo-custom { grid-area: logocustom; } .menu-top { grid-area: menutop; } .menu-bottom { grid-area: menubottom; } .menu-mobile { grid-area: menumobile; } .custom-contact-menu-item-container { grid-area: customcontactmenuitem; } .custom-header--map-pin { grid-area: mappin; } .strapline { grid-area: strapline; } .menu-modal-fullscreen--button { grid-area: fullscreenmodal; } .navbar-toggler { grid-area: menutoggle; } .mobile-menu { grid-area: mobilemenu; } .multipanel--toggle { grid-area: menumultipanel; } .modalmobilemenu--toggle { grid-area: modalmobilemenu; } .de-dual-burger { grid-area: burger; } .custom-minimalist-woo-header--basket { grid-area: basket; } .masthead-grid--group { grid-area: group; } .custom-woo-header { grid-area: wooheader; } .custom-minimalist-woo-header--basket { grid-area: woobasket; } .custom-minimalist-woo-header--search { grid-area: woosearch; } .searchmodal--toggle { grid-area: search; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .masthead-grid { margin: 0 auto; padding: 30px 40px; display: grid; grid-template-columns: 300px minmax(0, 1fr) minmax(0, auto); grid-gap: 0 15px; align-items: center; justify-items: end; grid-template-areas: "logocustom menutop customcontactmenuitem"; /* grid-template-rows: ; */ } /* .masthead-grid--group { display: grid; grid-template-columns: minmax(0, auto) minmax(0,1fr) minmax(0, auto) repeat(4, auto); grid-gap: 0 10px; grid-template-areas: "wooheader strapline mappin woobasket woosearch search menumultipanel"; padding: 5px 5px; } */ /* .masthead-grid--group { display: contents; } */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .masthead-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* grid-gap: 0 15px; */ grid-template-areas: "logocustom menumultipanel"; align-items: center; justify-items: end; padding: 10px 20px; } /* .masthead-grid--group { display: grid; grid-template-columns: minmax(0, auto) minmax(0,1fr) minmax(0, auto) auto auto auto; grid-gap: 0 10px; grid-template-areas: "strapline . mappin woobasket woosearch search"; padding: 5px 5px; } */ .custom-contact-menu-item-container, .menu-modal-fullscreen--button, .custom-header--map-pin, .above-header-sidebar-relative, .custom-woo-header { display: none!important; } } /**** 4.3 Branding ****/ a.logo-custom--link { text-decoration: none; } .logo-custom { padding: 0px } .logo-custom--grid { display: grid; grid-template-rows: auto auto; grid-gap: 0px; } .logo-custom--strap { text-align: center; font-size: 10px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 4.4 Menu Inline ****/ .menu-inline { width: 100%; background: var(--menu-first-level-background);; } .menu-inline ul.navbar-nav { font-size: 0px; width: 100%; list-style: none; margin: 0; display: flex; flex-wrap: wrap; flex-direction: row; grid-gap: 0 0px; } .menu-inline li.menu-item { position: relative; display: inline-block; text-align: left; line-height: 1.6em; font-size: 18px; width: fit-content; } .menu-inline li.menu-item a { font-size: 16px; font-weight: 500; padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; color: var(--menu-item); transition: 0.5s; text-decoration: none; -moz-transition: color 0.3s ease-out; -webkit-transition: color 0.3s ease-out; -o-transition: color 0.3s ease-out; transition: color 0.3s ease-out; } .menu-inline > ul > li.menu-item > a { margin: 0 0px; } .menu-inline li.menu-item:hover a { color: var(--menu-item-hover); /* background: var(--menu-background-hover) ; */ } .menu-inline ul li.current_page_item > a { color: var(--menu-item-current); text-decoration: none; } .menu-inline ul.sub-menu { margin: 0; padding: 0; display: initial; position: absolute; opacity: 0; visibility: hidden; z-index: 15; background-color: var(--menu-first-level-dropdown-background); top: 56px; left: 0px; width: 200px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.175); float: left; list-style: none; -moz-transition: opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; -webkit-transition: opacity 0.3s ease-out, visibility 0.1s 0.1s linear; -o-transition: opacity 0.3s ease-out, visibility 0.1s 0.1s linear; transition: opacity 0.3s ease-out, visibility 0.1s 0.1s linear; } .menu-inline ul.sub-menu li.menu-item { margin: 0; padding: 0; font-size: 12px; color: var(--menu-item); width: 100%; clear: both; -moz-transition: opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out; -webkit-transition: opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out; -o-transition: opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out; transition: opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out; clear:both; margin-top:-15px; padding:0; -moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out; -webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out; -o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out; transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out; } .menu-inline ul.sub-menu li.menu-item a { color: var(--menu-item); background: var(--menu-background); padding: 15px 15px; } .menu-inline ul.sub-menu li.menu-item:hover > a { color: var(--menu-item-hover); background: var(--submenu-background-hover) ; } .menu-inline ul.navbar-nav li:hover ul.sub-menu li { margin-top:0; opacity:1; } .menu-inline ul.sub-menu ul.sub-menu { margin: 0; padding: 0; position: absolute; float: left; list-style: none; left: 200px; top: 0px; opacity: 0; visibility: hidden; -moz-transition: opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; -webkit-transition: opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; -o-transition: opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; transition: opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; } .menu-inline .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; } .menu-inline ul.navbar-nav > li.menu-item-has-children > a::after { display: inline-block; vertical-align: baseline; width: 8px; height: 8px; background-size: contain; margin-left: 7px; content: ''; background-color: var(--menu-item); -webkit-mask: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 shape-rendering%3D%22geometricPrecision%22 text-rendering%3D%22geometricPrecision%22 image-rendering%3D%22optimizeQuality%22 fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 viewBox%3D%220 0 512.02 319.26%22%3E%3Cpath d%3D%22M5.9 48.96 48.97 5.89c7.86-7.86 20.73-7.84 28.56 0l178.48 178.48L434.5 5.89c7.86-7.86 20.74-7.82 28.56 0l43.07 43.07c7.83 7.84 7.83 20.72 0 28.56l-192.41 192.4-.36.37-43.07 43.07c-7.83 7.82-20.7 7.86-28.56 0l-43.07-43.07-.36-.37L5.9 77.52c-7.87-7.86-7.87-20.7 0-28.56z%22/%3E%3C/svg%3E') no-repeat center; mask: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 shape-rendering%3D%22geometricPrecision%22 text-rendering%3D%22geometricPrecision%22 image-rendering%3D%22optimizeQuality%22 fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 viewBox%3D%220 0 512.02 319.26%22%3E%3Cpath d%3D%22M5.9 48.96 48.97 5.89c7.86-7.86 20.73-7.84 28.56 0l178.48 178.48L434.5 5.89c7.86-7.86 20.74-7.82 28.56 0l43.07 43.07c7.83 7.84 7.83 20.72 0 28.56l-192.41 192.4-.36.37-43.07 43.07c-7.83 7.82-20.7 7.86-28.56 0l-43.07-43.07-.36-.37L5.9 77.52c-7.87-7.86-7.87-20.7 0-28.56z%22/%3E%3C/svg%3E') no-repeat center; } .menu-inline ul.sub-menu li.menu-item-has-children > a::after { display: inline-block; vertical-align: baseline; width: 8px; height: 8px; background-color: var(--menu-item); -webkit-mask: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 shape-rendering%3D%22geometricPrecision%22 text-rendering%3D%22geometricPrecision%22 image-rendering%3D%22optimizeQuality%22 fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 viewBox%3D%220 0 319 511.61%22%3E%3Cpath d%3D%22M48.92 505.72 5.88 462.68c-7.85-7.85-7.83-20.72 0-28.54l178.35-178.35L5.88 77.44c-7.85-7.85-7.8-20.73 0-28.54L48.92 5.87c7.83-7.82 20.71-7.82 28.54 0l192.25 192.26.37.36 43.04 43.03c7.82 7.84 7.86 20.69 0 28.54l-43.04 43.04-.37.36L77.46 505.72c-7.85 7.86-20.68 7.86-28.54 0z%22/%3E%3C/svg%3E') no-repeat center; mask: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 shape-rendering%3D%22geometricPrecision%22 text-rendering%3D%22geometricPrecision%22 image-rendering%3D%22optimizeQuality%22 fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 viewBox%3D%220 0 319 511.61%22%3E%3Cpath d%3D%22M48.92 505.72 5.88 462.68c-7.85-7.85-7.83-20.72 0-28.54l178.35-178.35L5.88 77.44c-7.85-7.85-7.8-20.73 0-28.54L48.92 5.87c7.83-7.82 20.71-7.82 28.54 0l192.25 192.26.37.36 43.04 43.03c7.82 7.84 7.86 20.69 0 28.54l-43.04 43.04-.37.36L77.46 505.72c-7.85 7.86-20.68 7.86-28.54 0z%22/%3E%3C/svg%3E') no-repeat center; background-size: contain; margin-left: 7px; content: ''; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 4.5 Menu Top ****/ .menu-top { text-align: right; } /**** 4.6 Menu Bottom ****/ .menu-bottom { text-align: left; } /**** 4.7 Mobile Menu ****/ .mobile-menu .navbar-nav { margin: 0; } nav.navbar.mobile-menu { background: var(--menu-mobile-background); } .mobile-menu li.menu-item a { color: var(--menu-mobile-item); border-bottom: 1px solid var(--menu-mobile-line)!important; background: var(--menu-mobile-background); } .mobile-menu li.menu-item > a { position: relative; padding: 10px 15px; } .mobile-menu li.menu-item-has-children button.dropdown-toggle { position: absolute; right: 0px; top: 0px; display: grid; align-items: center; justify-content: center; background: transparent!important; border-radius: 0; min-height: 48px; padding: 5px 25px; border: 0; box-shadow: none!important; } .mobile-menu li.menu-item-has-children button.dropdown-toggle:hover { background: transparent!important; border: 0; } .mobile-menu .dropdown-toggle::after { border-top: 0; border-right: 0; border-left: 0; text-align: center; transition: 0.5s; display: inline-block; vertical-align: baseline; width: 10px; height: 10px; background-size: contain; margin-left: 0px; content: ''; background-color: var(--menu-mobile-item); -webkit-mask: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 shape-rendering%3D%22geometricPrecision%22 text-rendering%3D%22geometricPrecision%22 image-rendering%3D%22optimizeQuality%22 fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 viewBox%3D%220 0 512.02 319.26%22%3E%3Cpath d%3D%22M5.9 48.96 48.97 5.89c7.86-7.86 20.73-7.84 28.56 0l178.48 178.48L434.5 5.89c7.86-7.86 20.74-7.82 28.56 0l43.07 43.07c7.83 7.84 7.83 20.72 0 28.56l-192.41 192.4-.36.37-43.07 43.07c-7.83 7.82-20.7 7.86-28.56 0l-43.07-43.07-.36-.37L5.9 77.52c-7.87-7.86-7.87-20.7 0-28.56z%22/%3E%3C/svg%3E') no-repeat center; mask: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 shape-rendering%3D%22geometricPrecision%22 text-rendering%3D%22geometricPrecision%22 image-rendering%3D%22optimizeQuality%22 fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 viewBox%3D%220 0 512.02 319.26%22%3E%3Cpath d%3D%22M5.9 48.96 48.97 5.89c7.86-7.86 20.73-7.84 28.56 0l178.48 178.48L434.5 5.89c7.86-7.86 20.74-7.82 28.56 0l43.07 43.07c7.83 7.84 7.83 20.72 0 28.56l-192.41 192.4-.36.37-43.07 43.07c-7.83 7.82-20.7 7.86-28.56 0l-43.07-43.07-.36-.37L5.9 77.52c-7.87-7.86-7.87-20.7 0-28.56z%22/%3E%3C/svg%3E') no-repeat center; } .mobile-menu li.menu-item-has-children.dropdown.show > a + .dropdown-toggle::after { transform: rotate(180deg); } .mobile-menu ul.dropdown-menu { border: 0; padding: 0; margin: 0 !important; } .mobile-menu ul.dropdown-menu li.menu-item > a { padding: 10px 15px 10px 30px; } .mobile-menu ul.dropdown-menu ul.dropdown-menu li.menu-item > a { padding: 10px 15px 10px 45px; } .mobile-menu .dropdown-menu { display: none; opacity: 0; transition: 2s; } .mobile-menu .dropdown.show > .dropdown-menu { display: block; opacity: 1; } .mobile-menu ul.dropdown-menu { background: transparent; } /**** 4.7.2 Navbar Dropdown ****/ .navbar-dropdown { width: 100%; } .navbar-dropdown .navbar-nav { margin: 0; } .on-black .navbar-dropdown li.menu-item a { color: white; } .on-black .navbar-dropdown .dropdown-toggle::after { background-color: white!important; } .navbar-dropdown li.menu-item > a { position: relative; padding: 12px 25px; font-weight: 500; white-space: revert; } .menu-mobile--modal--navbar a:focus, .menu-mobile--modal--navbar a:hover { color: white; background-color: var(--menu-mobile-item-active); } .navbar-dropdown a:focus + .dropdown-toggle::after, .navbar-dropdown a:hover + .dropdown-toggle::after { background-color: white!important; } .navbar-dropdown li.menu-item-has-children button.dropdown-toggle { position: absolute; right: 0px; top: 0px; display: grid; align-items: center; justify-content: center; background: transparent!important; border-radius: 0; min-height: 48px; padding: 5px 80px 5px 40px; border: 0; box-shadow: none!important; } .navbar-dropdown li.menu-item-has-children button.dropdown-toggle:hover { background: transparent!important; border: 0; } .navbar-dropdown .dropdown-toggle::after { border-top: 0; border-right: 0; border-left: 0; text-align: center; transition: 0.5s; display: inline-block; vertical-align: baseline; width: 10px; height: 10px; background-size: contain; margin-left: 0px; content: ''; background-color: var(--menu-mobile-item); -webkit-mask: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 shape-rendering%3D%22geometricPrecision%22 text-rendering%3D%22geometricPrecision%22 image-rendering%3D%22optimizeQuality%22 fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 viewBox%3D%220 0 512.02 319.26%22%3E%3Cpath d%3D%22M5.9 48.96 48.97 5.89c7.86-7.86 20.73-7.84 28.56 0l178.48 178.48L434.5 5.89c7.86-7.86 20.74-7.82 28.56 0l43.07 43.07c7.83 7.84 7.83 20.72 0 28.56l-192.41 192.4-.36.37-43.07 43.07c-7.83 7.82-20.7 7.86-28.56 0l-43.07-43.07-.36-.37L5.9 77.52c-7.87-7.86-7.87-20.7 0-28.56z%22/%3E%3C/svg%3E') no-repeat center; mask: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 shape-rendering%3D%22geometricPrecision%22 text-rendering%3D%22geometricPrecision%22 image-rendering%3D%22optimizeQuality%22 fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 viewBox%3D%220 0 512.02 319.26%22%3E%3Cpath d%3D%22M5.9 48.96 48.97 5.89c7.86-7.86 20.73-7.84 28.56 0l178.48 178.48L434.5 5.89c7.86-7.86 20.74-7.82 28.56 0l43.07 43.07c7.83 7.84 7.83 20.72 0 28.56l-192.41 192.4-.36.37-43.07 43.07c-7.83 7.82-20.7 7.86-28.56 0l-43.07-43.07-.36-.37L5.9 77.52c-7.87-7.86-7.87-20.7 0-28.56z%22/%3E%3C/svg%3E') no-repeat center; } .navbar-dropdown li.menu-item-has-children.dropdown.show > a + .dropdown-toggle::after { transform: rotate(180deg); } .navbar-dropdown ul.dropdown-menu { border: 0; padding: 0; margin: 0 !important; opacity: 0; transition: 2s; } .navbar-dropdown ul.dropdown-menu li.menu-item > a { padding: 10px 15px 10px 40px; } .navbar-dropdown ul.dropdown-menu ul.dropdown-menu li.menu-item > a { padding: 10px 15px 10px 55px; } /* .navbar-dropdown .dropdown-menu.show { display: block; opacity: 1; } */ .navbar-dropdown .dropdown > .dropdown-menu { opacity: 0; transition: 2s; width: 100%; background: transparent; } .navbar-dropdown .dropdown.show > .dropdown-menu { opacity: 1; display: block; transition: 2s; } .navbar-dropdown ul.dropdown-menu.show { opacity: 1; display: block; transition: 1.5s; } .navbar-dropdown ul.dropdown-menu li { opacity: 1; transition: 1.5s; } .navbar-dropdown ul.dropdown-menu.show li { opacity: 0; } .menu-mobile--modal ul.dropdown-menu { background: transparent; } /* Delays */ .navbar-nav .nav-item li.menu-item:nth-of-type(1) { transition-delay: 0s; } .navbar-nav .nav-item li.menu-item:nth-of-type(2) { transition-delay: 0.05s; } .navbar-nav .nav-item li.menu-item:nth-of-type(3) { transition-delay: 0.1s; } .navbar-nav .nav-item li.menu-item:nth-of-type(4) { transition-delay: 0.15s; } .navbar-nav .nav-item li.menu-item:nth-of-type(5) { transition-delay: 0.2s; } .navbar-nav .nav-item li.menu-item:nth-of-type(6) { transition-delay: 0.25s; } .navbar-nav .nav-item li.menu-item:nth-of-type(7) { transition-delay: 0.3s; } .navbar-nav .nav-item li.menu-item:nth-of-type(8) { transition-delay: 0.35s; } .navbar-nav .nav-item li.menu-item:nth-of-type(9) { transition-delay: 0.4s; } .navbar-nav .nav-item li.menu-item:nth-of-type(10) { transition-delay: 0.45s; } .navbar-nav .nav-item li.menu-item:nth-of-type(11) { transition-delay: .5s; } /**** 4.7.2 Navbar Toggle ****/ button.navbar-toggler, button.navbar-toggler:hover, .handheld-navigation .dropdown-toggle { color: var(--menu-mobile-item); } button.navbar-toggler:after, button.navbar-toggler:before, button.navbar-toggler span:before { background-color: var(--menu-mobile-toggle); } button.navbar-toggler, button.navbar-toggler:hover { background-color: transparent!important; box-shadow: none!important; } .navbar-toggler-icon { display: block; width: 50px; height: 46px; vertical-align: middle; background-image: none; background-repeat: no-repeat; background-position: center; background-size: 100%; } .storefront-handheld-footer-bar, .storefront-handheld-footer-bar ul li > a, .storefront-handheld-footer-bar ul li.search .site-search, button.navbar-toggler:hover { background-color: var(--menu-mobile-toggle); } button.navbar-toggler { background-color: transparent; border: 0; position: relative; width: fit-content; padding: 0 !important; } button.navbar-toggler span:before, button.navbar-toggler:after, button.navbar-toggler:before { height: 1px; width: 32px; content: ""; display: block; position: absolute; top: 50%; left: 0; transition: all, ease, .2s; border-radius: 3px; } button.navbar-toggler:before { -webkit-transform: translateY(-8px); -ms-transform: translateY(-8px); transform: translateY(-8px); } button.navbar-toggler:after { -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); } .handheld-navigation, .main-navigation div.menu>ul:not(.nav-menu), .nav-menu { -webkit-transition: all,ease,1.5s; transition: all,ease,1.5s; } .navbar-toggler span { visibility: hidden; } .navbar-toggler span:before { visibility: visible; } button.navbar-toggler[aria-expanded=true]::before { transform: rotate(45deg) } button.navbar-toggler[aria-expanded=true]::after { transform: rotate(-45deg) } button.navbar-toggler[aria-expanded=true] span::before { opacity: 0 } /**** 4.7.3 Navbar Toggle DE Burger ****/ .de-burger { display: grid; grid-template-columns: minmax(0, 1fr); width: 34px; gap: 6px; cursor: pointer; } .de-burger--line { height: 1px; width: 100%; background-color: var(--menu-mobile-item); } /**** 4.7.3 Navbar Toggle DE Burger ****/ .de-dual-burger { cursor: pointer; display: flex; height: calc(1.37931vw + 12.41379px); position: relative; transition: opacity 1s cubic-bezier(.83,0,.17,1) 0s; width: calc(1.37931vw + 32.41379px); z-index: 1101; } @media(min-width: 2001px) { .de-dual-burger { width:60px } } @media(max-width: 550px) { .de-dual-burger { width:40px } } @media(min-width: 2001px) { .de-dual-burger { height:40px } } @media(max-width: 550px) { .de-dual-burger { height:20px } } @media(hover: hover) { .de-dual-burger:hover .de-dual-burger__burger,.de-dual-burger:hover .de-dual-burger__cross { opacity:.4 } } .de-dual-burger .de-dual-burger__burger,.de-dual-burger .de-dual-burger__cross { transition: opacity .4s cubic-bezier(.25,1,.5,1) } body:has(.andermatt-modal-menu--modal.show) .de-dual-burger .de-dual-burger__burger span { transform: scaleX(0); transition: transform .6s ease,background-color .4s ease } body:has(.andermatt-modal-menu--modal.show) .de-dual-burger .de-dual-burger__cross span { transition: transform .6s ease .6s,background-color .6s ease .3s } body:has(.andermatt-modal-menu--modal.show) .de-dual-burger .de-dual-burger__cross span:first-of-type { transform: rotate(0) scale(1) } body:has(.andermatt-modal-menu--modal.show) .de-dual-burger .de-dual-burger__cross span:last-of-type { transform: rotate(90deg) scale(1) } .de-dual-burger__block { position: relative; transition: margin .6s ease 1s; width: calc(1.37931vw + 32.41379px) } @media(min-width: 2001px) { .de-dual-burger__block { width:60px } } @media(max-width: 550px) { .de-dual-burger__block { width:40px } } .de-dual-burger__block span { background-color: var(--content); height: 2px; left: 0; position: absolute; width: 100% } .de-dual-burger__block,.de-dual-burger__burger,.de-dual-burger__cross { height: calc(1.37931vw + 12.41379px); width: calc(1.37931vw + 32.41379px) } @media(min-width: 2001px) { .de-dual-burger__block,.de-dual-burger__burger,.de-dual-burger__cross { width:60px } } @media(max-width: 550px) { .de-dual-burger__block,.de-dual-burger__burger,.de-dual-burger__cross { width:40px } } @media(min-width: 2001px) { .de-dual-burger__block,.de-dual-burger__burger,.de-dual-burger__cross { height:40px } } @media(max-width: 550px) { .de-dual-burger__block,.de-dual-burger__burger,.de-dual-burger__cross { height:20px } } .de-dual-burger__burger,.de-dual-burger__cross { position: absolute } .de-dual-burger__burger { opacity: 1; top: 6px; transition: opacity .4s ease 1s } .de-dual-burger__burger span { transition: transform .6s ease .6s,background-color .4s ease } .de-dual-burger__burger span:first-of-type { top: 0; transform-origin: left } .de-dual-burger__burger span:last-of-type { top: calc(.13793vw + 9.24138px); transform-origin: right } @media(min-width: 2001px) { .de-dual-burger__burger span:last-of-type { top:12px } } @media(max-width: 550px) { .de-dual-burger__burger span:last-of-type { top:10px } } .de-dual-burger__cross { height: calc(.68966vw + 26.2069px); margin-top: calc(-.48276vw - 12.34483px); top: 16px; transform: rotate(45deg); width: calc(.68966vw + 26.2069px); z-index: 1 } @media(min-width: 2001px) { .de-dual-burger__cross { width:40px } } @media(max-width: 550px) { .de-dual-burger__cross { width:30px } } @media(min-width: 2001px) { .de-dual-burger__cross { height:40px } } @media(max-width: 550px) { .de-dual-burger__cross { height:30px } } @media(min-width: 2001px) { .de-dual-burger__cross { margin-top:-22px } } @media(max-width: 550px) { .de-dual-burger__cross { margin-top:-15px } } .de-dual-burger__cross span { transition: transform .6s ease,background-color .4s ease .6s } .de-dual-burger__cross span:first-of-type { left: 0; top: calc(.34483vw + 13.10345px); transform: rotate(0) scale(0); transform-origin: left } @media(min-width: 2001px) { .de-dual-burger__cross span:first-of-type { top:20px } } @media(max-width: 550px) { .de-dual-burger__cross span:first-of-type { top:15px } } .de-dual-burger__cross span:last-of-type { left: calc(-.34483vw - 13.10345px); top: calc(.68966vw + 26.2069px); transform: rotate(90deg) scale(0); transform-origin: right } @media(min-width: 2001px) { .de-dual-burger__cross span:last-of-type { top:40px } } @media(max-width: 550px) { .de-dual-burger__cross span:last-of-type { top:30px } } @media(min-width: 2001px) { .de-dual-burger__cross span:last-of-type { left:-20px } } @media(max-width: 550px) { .de-dual-burger__cross span:last-of-type { left:-15px } } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .de-dual-burger { top: 5px; } } body.is-menu-panel-in .de-dual-burger__cross span { background-color: #1a1a1a } .page-navigating .de-dual-burger { opacity: 0; transition: opacity 1s cubic-bezier(.83,0,.17,1) 0s } /**** 4.7.X MultiPanel Toggle ****/ .multipanel--toggle { display: grid; align-items: center; } /**** 4.7.3 Navbar Toggle DE Burger ****/ /**** 4.7.3 Navbar Toggle DE Burger ****/ /**** 4.7.3 Navbar Toggle DE Burger ****/ /**** 4.8 Breadcrumbs ****/ .breadcrumbs { padding: 20px 0 0; } .woocommerce-breadcrumb { padding: 20px 0; margin: 0; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media (max-width: 767px) { /* MOBILE RULES GO HERE */ } /*** 4.9 Fixed Heading Positioning ****/ header#masthead { width: 100%; top: 0; z-index: 12; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ header#masthead { position: fixed; } body.admin-bar header#masthead { top: 32px; } .has-y-scroll .masthead-grid { padding: 0px 40px; } /* .has-y-scroll .logo-custom, .has-y-scroll .logo-custom svg { width: auto!important; max-height: 50px!important; } */ .has-y-scroll header#masthead { background: var(--masthead-background); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .has-y-scroll .menu-inline li.menu-item a { padding-top: 6px; padding-bottom: 6px; } .has-y-scroll .menu-inline ul.sub-menu { top: 41px; } .has-y-scroll .above-header-sidebar-relative { display: none; } .has-y-scroll .logo-custom--strap { display: none; } /*.page-template-template-homepage:not(.has-y-scroll) .site-branding { display: none!important; }*/ } @media (max-width: 767px) { /* MOBILE RULES GO HERE */ .mastead-height-mirror { height: 0!important; } } /*** 4.9.2 Fixed Heading Positioning Change on up and down scroll ****/ @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ /* header#masthead { transition: 1s; } body.has-y-scroll.has-y-scroll-down header#masthead { transform: translateY(-100%); } body.has-y-scroll.has-y-scroll-up header#masthead { transform: translateY(0%); }*/ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ /* header#masthead { position: sticky; transition: 1s; } body.has-y-scroll.has-y-scroll-down header#masthead { transform: translateY(-100%); } body.has-y-scroll.has-y-scroll-up header#masthead { transform: translateY(0%); }*/ } /*** 4.10 Above Header Widget Area ***/ .above-header-sidebar-relative { position: relative; z-index: 1; background: white; } .above-header-sidebar-outer { position: relative; width: 100%; top: 0; z-index: 15; } .above-header-sidebar { max-width: 1200px; margin: 0 auto; padding: 0px 20px; } .above-header-sidebar-inner { padding: 10px 20px; background: white; width: 100%; text-align: center; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .above-header-sidebar-outer { position: relative; } .above-header-sidebar { padding: 0px; } .above-header-sidebar-inner { float: none; } } /*** 4.11 Animated Top Menu Hover States ***/ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .menu-inline ul:not(.sub-menu) > li > a:before { -ms-transition: -webkit-transform .3s ease-out,border-color .3s ease-out; -webkit-transition: -webkit-transform .3s ease-out,border-color .3s ease-out; transition: transform .4s ease-out, border-color .4s ease-out; position: absolute; display: block; bottom: -6px; left: 10px; width: calc( 100% - 20px ); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); transform-origin: left; border-top: 2px solid var(--detail); content: ''; padding-bottom: inherit; } .home .menu-inline a:before { border-top: 2px solid var(--detail); } .menu-inline a:hover:before, .menu-inline ul.navbar-nav li.current-menu-item > a:before, .menu-inline ul:not(.sub-menu) > li a:hover:before { -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } .menu-inline a:before, .menu-inline .current_page_item a { border-color: var(--detail); } .home .menu-inline a:before, .home .menu-inline .current_page_item a { border-color: var(--detail); } .menu-inline ul.menu > li.menu-item-has-children>a::before, .menu-inline ul > li.page_item_has_children > a::before, .menu-inline ul.nav-menu > li.menu-item-has-children > a::before, .menu-inline ul.nav-menu > li.page_item_has_children > a::before { content: " "; margin-left: 0em; } } /*** 4.12 Add Pipe Element Between Menu Items ***/ /* Inline Menu Pipe */ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ /* .menu-inline ul.navbar-nav > li.menu-item:before { content: "|"; position: absolute; color: var(--menu-item); left: -2px; top: 12px; z-index: 0; width: 2px; } .menu-inline ul.navbar-nav > li.menu-item:first-of-type:before { content: none; } */ .has-y-scroll .menu-inline ul.navbar-nav > li.menu-item:before { top: 4px; } } /*** 4.13 Custom Desktop Mobile Menu ***/ button.open-deskop-mobile-menu-button { position: absolute; right: 50px; border: none; background: transparent; padding: 0; } .open-deskop-mobile-menu-button span.material-icons { font-size: 50px; color: #FFD503; } .open-deskop-mobile-menu-modal { padding: 0!important; } .deskop-mobile-menu-modal { width: 100%!important; max-width: 100%!important; margin: 0!important; height: 100vh!important; } .deskop-mobile-menu-modal-content { max-width: 100%!important; } .deskop-mobile-menu-modal-content { max-width: 100%!important; height: 100%!important; background-size: cover; background-position: center; } .deskop-mobile-menu-modal-content { position: relative!important; overflow: hidden; } .deskop-mobile-menu-modal-content:after { content: " "; background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); background: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; display: block!important; position: absolute; z-index: 13; left: 0; top: 0; } .deskop-mobile-menu-modal-content * { z-index: 15; position: relative; } .deskop-mobile-menu-modal-content .row { max-width: 1200px; margin: 0 auto; } .desktop-mobile-top-section { top: 0; position: absolute; width: 100%; z-index: 17; } ul.deskop-mobile-menu-ul { list-style: none; margin: 0; text-align: center; min-width: 1200px; padding: 40px; } .deskop-mobile-menu-social-side { margin-top: 50px; } ul.deskop-mobile-menu-social-ul { list-style: none; margin: 0; } a.deskop-mobile-menu-item { font-size: 6vw; margin: 10px 0; line-height: 7vw; z-index: 50; color: white; text-shadow: 1px 1px 5px black; font-weight: 900; } a.deskop-mobile-menu-item:hover { text-decoration: none!important; } a.deskop-mobile-menu-item:before { -ms-transition: -webkit-transform .3s ease-out,border-color .3s ease-out; -webkit-transition: -webkit-transform .3s ease-out,border-color .3s ease-out; transition: transform .3s ease-out,border-color .3s ease-out; position: absolute; display: block; bottom: 5px; left: 10px; width: calc( 100% - 20px ); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); border-top: 2px solid #FFD503; content: ''; padding-bottom: inherit; } a.deskop-mobile-menu-item:before { -ms-transition: -webkit-transform .3s ease-out,border-color .3s ease-out; -webkit-transition: -webkit-transform .3s ease-out,border-color .3s ease-out; transition: transform .3s ease-out,border-color .3s ease-out; position: absolute; display: block; bottom: -6px; left: 10px; width: calc( 100% - 20px ); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); border-top: 10px solid #FFD503; content: ''; padding-bottom: inherit; } a.deskop-mobile-menu-item:hover:before, a.deskop-mobile-menu-item:active:before { -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } a.deskop-mobile-menu-item:before, a.deskop-mobile-menu-item{ border-color: #FFD503!important; } a.deskop-mobile-menu-item::before { content: " "; margin-left: 0em; } .social-title { font-size: 20px; color: white; text-shadow: 1px 1px 5px black; font-weight: 100; } a.deskop-mobile-menu-social-side-link { font-size: 20px; color: white; text-shadow: 1px 1px 5px black; font-weight: 100; } a.deskop-mobile-menu-logo-link img { max-width: 150px; margin: 40px auto 0; } .deskop-mobile-menu-close { right: 50px!important; top: 50px!important; opacity: 0.6!important; color: #FFD503!important; font-size: 75px!important; font-weight: 100!important; } .deskop-mobile-menu-close:hover { opacity: 1!important; color: #FFD503!important; } .deskop-mobile-menu-close.close:before, .deskop-mobile-menu-close.close:after { content: none!important; } img.deskop-mobile-menu-item-image-left, img.deskop-mobile-menu-item-image-right { max-width: 500px; } ul.deskop-mobile-menu-ul li { position: initial; } img.deskop-mobile-menu-item-image-background { max-width: 100%; position: fixed; left: 0; top: 0; z-index: -1; } img.deskop-mobile-menu-item-image-left { position: absolute; left: 0; top: 0; } img.deskop-mobile-menu-item-image-right { position: absolute; right: 0; bottom: 0; } li.deskop-mobile-menu-item-li img { opacity: 0; transition: 1.5s; } li.deskop-mobile-menu-item-li:hover img.deskop-mobile-menu-item-image-left, li.deskop-mobile-menu-item-li:hover img.deskop-mobile-menu-item-image-right { opacity: 1; } a.deskop-mobile-menu-item:hover + img.deskop-mobile-menu-item-image-background { opacity: 1; } .modal.fade.open-deskop-mobile-menu-modal.show { overflow-y: hidden; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /*** 4.14 Desktop Contact Fullwidth Modal ***/ .open-contact-modal-fullwidth { margin: 0!important; padding: 0!important; } .contact-modal-fullwidth { width: 100%!important; max-width: 100%!important; margin: 0!important; height: 100vh!important; background: white; } .contact-modal-fullwidth--content { max-width: 100%!important; min-height: 100%!important; background: #f5f1ee; display: grid!important; justify-content: initial; grid-template-rows: auto minmax(0,1fr) auto auto; } .contact-modal-fullwidth--content-top { display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-gap: 20px; align-items: center; max-width: 1600px; width: 100%; margin: 0 auto; padding: 20px; border-bottom: 1px solid #535c57; } button.close.contact-modal-fullwidth-close-button { display: block; position: relative; color: black!important; font-size: 20px; width: auto; top: 0px; box-shadow: none; text-transform: uppercase; } button.close.contact-modal-fullwidth-close-button:hover { background: transparent!important; } button.close.contact-modal-fullwidth-close-button:before, button.close.contact-modal-fullwidth-close-button:after { content: none!important; } .contact-modal-fullwidth--logo img { margin: 0 auto; max-width: 300px; } .contact-modal-fullwidth--content-middle { display: grid; /* min-height: calc( 100vh - 115px );*/ align-items: center; text-align: center; padding: 20px 20px; } .contact-modal-fullwidth--content-middle-grid { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,4fr); grid-gap: 50px; margin: 0 auto; max-width: 1120px; text-align: left; } .contact-modal-fullwidth--content-middle-grid-left p { font-size: 14px; } .contact-modal-fullwidth--content-bottom-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-gap: 40px; max-width: 1160px; margin: 0 auto 20px; padding: 0 20px; } .contact-modal-fullwidth--menu-grid { display: grid; grid-template-columns: auto auto; grid-gap: 40px; } .contact-modal-fullwidth--content-bottom-grid-left { max-width: 200px; } .contact-modal-fullwidth--footer { background: #4b5e5c; align-self: end; position: relative; } .contact-modal-fullwidth--footer:after { content: ""; display: block; background-size: contain!important; width: 161px; height: 100px; background: url(/wp-content/uploads/2023/08/corner.png); position: absolute; top: -100px; right: 0; } .contact-modal-fullwidth--footer-inner { max-width: 1240px; margin: 0 auto; color: white; padding: 10px 0; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .contact-modal-fullwidth--content-middle-grid { grid-template-columns: minmax(0,1fr); } .contact-modal-fullwidth--content-bottom-grid { grid-template-columns: minmax(0,1fr); } } /*** 4.15 Secondary Mobile Menu ***/ button.open-secondary-mobile-menu-button { position: absolute; right: 150px; border: none; background: transparent; padding: 0; } .secondary-mobile-menu button.custom-accordion.active span.material-icons { position: relative; top: 4px; } .secondary-mobile-menu button.custom-accordion span.material-icons { position: relative; top: 4px; } .secondary-mobile-menu span.material-icons { transition: 0.5s; } button.secondary-mobile-menu-accordion.active span.material-icons { transform: rotate(-180deg) 2s; -webkit-transform: rotate(-180deg); } .secondary-mobile-menu { position: relative; } .secondary-mobile-menu-accordion { order: 5; } .secondary-mobile-menu-panel { order: 2; } .buttonbox { position: absolute; right: 0; background: green; padding: 0px; bottom: 0; } button.secondary-mobile-menu-accordion { background: transparent; border: none!important; padding: 0; } a.secondary-mobile-menu-link { order: 9; } img.secondary-mobile-menu-custom-logo { max-height: 50px; width: auto; } .secondary-mobile-menu .menu { padding: 0!important; margin: 0!important; text-align: center; font-size: 0!important; display: flex; justify-content: space-between; } .secondary-mobile-menu .menu-item { list-style: none; display: inline-block; font-size: 0px; } .secondary-mobile-menu .menu-item a { padding: 20px 0px; text-align: center; color: #46545e; font-size: 16px; display: inline-block; transition: 0.5s; } .secondary-mobile-menu .menu-item a:hover, .secondary-mobile-menu .current_page_item a { text-decoration: none; background: #ee8b26; color: white!important; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .secondary-mobile-menu .menu { display: none; animation: fadeIn .5s; margin-top: 0; } .secondary-mobile-menu p:hover .menu { display: block; } .secondary-mobile-menu .menu.block { display: block; } .secondary-mobile-menu .menu-item { display: block; text-align: left; } .secondary-mobile-menu .menu-item a { padding: 20px 0px; text-align: left; display: block; width: 100%; } } /*** 4.19 Custom Contact Menu Item ***/ .custom-contact-menu-item-container { display: flex; gap: 10px; } .custom-contact-menu-item { font-family: "Outfit", sans-serif; border: 1px solid #c2c2c2; border-radius: 100vmax; color: var(--button-color); padding: 8px 20px 8px; background-color: transparent; font-weight: 400; font-size: .9em; cursor: pointer; text-decoration: none; line-height: 1em; transition: .2s; display: flex; justify-content: center; align-items: center; gap: 8px; } .custom-contact-menu-item:hover { border-color: var(--button-hover-border); color: var(--button-hover-color); background-color: var(--button-hover-background); } .custom-contact-menu-item span.material-icons { font-size: 16px; top: 3px; position: relative; margin-right: 5px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .custom-contact-menu-item-container { display: none; } } /*** 4.17 Logged In / Logged Out Menu ***/ body.logged-in .loggedout { background: red; display: none; } body:not(.logged-in) .loggedin { background: red; display: none; } /****************************************/ /****************************************/ /********** END HEADER *****************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /********** 5. START FOOTER *************/ /****************************************/ /****************************************/ .footer-widgets { padding: 20px 0 20px; border-bottom: 0; } .widget { margin: 0 0 0 0; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .footer-widgets { padding: 20px 0 1px; } } /*** 5.1 Footer Menu Styling ****/ #colophon ul.menu, #colophon ul.menu li { margin: 0em; } #colophon .menu { padding-bottom: 10px; } #colophon .menu a { text-decoration: none; margin-bottom: 5px; line-height: 1.4em; font-size: 14px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /*** 5.1.2 Menu Footer Menu Styling ****/ .menu-footer ul { margin: 0em; } .menu-footer ul li { margin: 0em; line-height: 1.4em; } .menu-footer ul li a { text-decoration: none; line-height: 13px !important; font-size: 13px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /*** 5.2 Below Footer Menu Styling ****/ .below-footer--area { padding: 10px 20px; background: var(--footer-below-background); } .below-footer p { margin-bottom: 0px!important; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .below-footer--grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; } /* .below-footer--area .below-footer:last-of-type { text-align: right; } */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .below-footer p { text-align: center; } } /*** 5.3 Cookie Preferences ****/ .cookie-notice-banner { display: grid; padding: 20px; position: fixed; bottom: 0; left: 0; width: 100%; background: #f5f5f5; grid-template-columns: minmax(0,1fr) 340px; z-index: 50; grid-gap: 20px; } .manage-cookies-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,3fr); grid-gap: 20px; } .manage-cookies-panel.active { display: block; } .manage-cookies-panel { display: none; } .manage-cookies-wrapper { display: none; } .manage-cookies-wrapper.active { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: grid; align-content: center; } .manage-cookies-inner { background: white; padding: 20px; width: 100%; margin: 0 auto; max-width: 700px; -webkit-box-shadow: 0 0px 40px rgba(0, 0, 0, 1); -moz-box-shadow: 0 0px 40px rgba(0, 0, 0, 1); -o-box-shadow: 0 0px 40px rgba(0, 0, 0, 1); box-shadow: 0 0px 40px rgba(0, 0, 0, 1); } .cookie-options-not-set .manage-cookies-tab { display: none; } .cookie-options-set .cookie-notice-banner { display: none; } .manage-cookies-tab { position: fixed; top: 50%; left: -80px; transform: rotate(-90deg); z-index: 30; } .cookie-notice .nav-items { padding-bottom: 20px; } .cookie-notice .nav-items a { display: block; } .cookie-notice-banner p { margin-bottom: 0; font-size: 14px; } .cookie-notice-banner-buttons { align-content: center; display: grid; grid-template-columns: 190px 130px; grid-gap: 20px; } button.manage-cookies.open-cookie-options { background: transparent; text-decoration: underline; color: black!important; } button.accept-all-cookies { margin: 0; } .manage-cookies-body label { font-size: 18px; font-weight: 100; margin-left: 5px; margin-bottom: 15px; } .manage-cookies-panel { margin-bottom: 25px; } .cookie-notice button.close-cookie-options { color: black!important; font-size: 40px; background: none; border: none; position: absolute; top: 0; right: 10px; } .manage-cookies-inner { position: relative; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media only screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cookie-notice-banner-buttons { align-content: center; display: grid; grid-template-columns: minmax(0,1fr); grid-gap: 20px; } .manage-cookies-footer { display: grid; grid-gap: 20px; margin-bottom: 50px; } .manage-cookies-body { display: block; } .manage-cookies-header h3 { margin-top: 50px; max-width: calc( 100% - 50px ); } .manage-cookies-header { display: block; } .cookie-notice-banner { display: block; } .cookie-notice-banner-text { margin-bottom: 20px; } .manage-cookies-inner { position: relative; max-height: 100vh; overflow: auto; } .cookie-notice-banner-buttons { min-width: 0px; width: 100%; } } /*** 5.4 Footer Grid Override ****/ .colophon--grid { padding: 50px 20px; display: grid; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .colophon--grid { grid-gap: 35px; grid-template-columns: repeat( 4, minmax(0,1fr)); grid-template-columns: minmax(0,2fr) minmax(0,3fr) minmax(0,3fr) minmax(0,6fr); } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .colophon--grid { padding: 30px 20px 20px; grid-gap: 15px; grid-template-columns: minmax(0,1fr); } } /*** 5.4 Custom Footer ***/ .custom-footer { background: var(--footer-background); padding-top: 50px; } .custom-footer--grid { margin: 0px 0 0; border-top: 0px solid #F4F4F4; padding: 20px 0 20px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 40px; } .custom-footer h4 { margin: 0 0 10px; border-bottom: 1px solid var(--detail); Padding: 0 0 10px; color: white; width: 100%; } .custom-footer p, .custom-footer a { font-size: 14px; color: var(--on-black); } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .custom-footer--grid { grid-template-columns: minmax(0,1fr); grid-gap: 15px; } } /****************************************/ /****************************************/ /********** END FOOTER *****************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /********* 6. START Bootstrap ***********/ /****************************************/ /****************************************/ /**** 6.1 Bootstrap / WooCommerce Fixes ****/ div#customer_details .col-1, div#customer_details .col-2, .woocommerce-column.woocommerce-column--1.woocommerce-column--billing-address.col-1, .woocommerce-column.woocommerce-column--2.woocommerce-column--shipping-address.col-2, .u-column1.col-1.woocommerce-Address, .u-column2.col-2.woocommerce-Address { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width: 100%; padding-left: 0px; padding-right: 0px; width: 100%; } .u-column1.col-1, .u-column2.col-2 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding-left: 0px; padding-right: 0px; } .form-row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -5px; margin-left: -4px; } .stripe-card-group, div#stripe-exp-element, div#stripe-cvc-element { width: 100%; } /**** 6.2 Bootstrap Tabs ****/ /* .nav-tabs { margin: 0; } .nav-link { border-radius: 0; border: none; color: white; padding: 5px 15px; } .nav-link.active { background-color: var(--detail); border-radius: 0; color: white!important; } .nav-tabs .nav-item { margin-bottom: -1px; background: pink; border: none!important; margin-right: 5px; } .nav-tabs .nav-item:hover { background: orange; } .nav-tabs { border-bottom: 5px solid #dee2e6; }*/ /**** 6.3 ACF Fixes ****/ .gm-style button { color: #333333!important; background-color: white !important; border-radius: 0!important; } .gm-style button:hover { color: #333333 !important; background-color: #F8F8F7 !important; } /****************************************/ /****************************************/ /********** END Bootstrap **************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /*********** 7. START Swiper ***********/ /****************************************/ /****************************************/ /**** 7.1 Header Slider Rules ****/ .header-slider { position: relative; } .header-text { top: 0px; z-index: 9; width: 100%; left: 0px; height: 100%; display: grid; } .header-text-background { background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); width: 100%; height: 100%; } .header-text-max-width { max-width: 1200px; margin: 0 auto; height: 100%; display: grid; align-items: normal; align-items: center; align-items: end; } .header-text-inner { width: 100%; display: block; max-width: 800px; padding: 20px; /*position: absolute;*/ bottom: 0; } /**** 7.2 Swiper JS Slider ****/ .my-slider { position: relative; } /**** 7.3 Swiper Container Rules ****/ .acfpb--tickertape swiper-container { width: 100%; height: 64px; /* height: fit-content; CLASHING WITH effect="fade" */ /* height: auto; */ } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ swiper-container.mySwiper { order: 2; } } /**** 7.4 Swiper Slide Rules ****/ swiper-slide { /* display: flex; NOT SURE WHAT THIS FIXED BUT ITS CAUSING WIDTH ISSUES ON CPT008 */ justify-content: center; align-items: center; } swiper-slide { /* width: auto!important; this breaks 3 items */ } /**** 7.5 Swiper Image Rules ****/ swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } img.mySwiper--controller-image { width: fit-content !important; height: 100px; } /**** 7.6 Swiper Meta Positoning ****/ .mySwiper--meta { display: grid; grid-template-columns: auto auto; justify-items: end; padding: 10px 0; min-height: 70px; } .mySwiper--meta--overlay { position: absolute; inset: 0; max-width: 1800px; width: 100%; margin: 0 auto; display: grid; justify-items: stretch; justify-content: space-between; align-items: center; grid-template-columns: minmax(0,1fr); } .mySwiper--meta--overlaid--bottom-right { position: absolute; bottom: 10px; right: 0px; z-index: 1; min-height: fit-content; padding: 0; width: 100%; grid-template-columns: minmax(0,1fr); text-align: center; } .mySwiper--meta--overlaid--middle { position: absolute; bottom: 10px; right: 0px; z-index: 1; min-height: fit-content; padding: 0; width: 100%; grid-template-columns: minmax(0,1fr); text-align: center; } .mySwiper--meta.mySwiper--meta--overlaytight { position: absolute; inset: 0; max-width: 2000px; width: calc(100% - 30px); margin: 0 auto; display: flex; justify-items: stretch; justify-content: space-between; align-items: center; left: -15px; } .mySwiper--meta.mySwiper--meta--overlay--from-top { position: absolute; width: calc(100% - 30px); margin: 0 auto; display: flex; justify-items: stretch; justify-content: space-between; align-items: center; left: 15px; top: 0; padding-top: calc(25% - 20px); } .mySwiper--meta.mySwiper--meta--overlay--small { position: absolute; inset: 0; width: calc( 100% + 80px )!important; left: -40px; margin: 0 auto; display: grid; justify-items: stretch; justify-content: space-evenly; align-items: center; grid-template-columns: minmax(0,1fr); } .mySwiper--meta--pagination-bottom { width: 100%; max-width: 100%; text-align: center; padding: 0px 20px 10px; position: absolute; bottom: 0; z-index: 2; } .mySwiper--meta--pagination-underneath { width: 100%; max-width: 100%; margin: 0 auto; text-align: center; padding: 10px 20px 0; } .mySwiper--meta button { transition: 0.5s; } .my-slider:not(:hover) .mySwiper--meta--hover button { opacity: 0!important; } .my-slider--controller swiper-slide { width: fit-content; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .mySwiper--meta.mySwiper--meta--overlay--small { width: calc( 100% + 0px )!important; left: -0px; } .mySwiper--meta.mySwiper--meta--overlay { position: relative!important; } } /**** 7.7 Swiper Meta Items ****/ .swiper-button-disabled { opacity: 0.3; } .mySwiper--buttons { height: fit-content; display: grid; grid-template-columns: auto minmax(0,1fr) auto; width: calc(100% + 100px); left: -50px; position: relative; } .mySwiper--buttons--lodzenge { background: var(--detail); width: fit-content; border-radius: 16px; height: fit-content; display: grid; grid-template-columns: auto 5px auto; left: 0; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /* Arrow Circled */ .mySwiper--buttons--arrow-circled { width: fit-content; display: grid; grid-template-columns: auto 15px auto; left: 0; } .mySwiper--arrow-circled { background: transparent; padding: 5px; color: var(--content) !important; z-index: 2; position: relative; border: 1px solid var(--content); border-radius: 50%; aspect-ratio: 1; display: grid; justify-items: center; align-items: center; min-width: auto; } .mySwiper--arrow-circled:hover { background: var(--content)!important; border-color: var(--content)!important; color: white!important; } .mySwiper--arrow-circled svg { height: 28px; width: 28px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .mySwiper--arrow-circled { padding: 0px; } } /* Arrow */ .mySwiper--arrow { background: transparent; padding: 0px 4px 2px 4px; border: none; color: var(--content)!important; font-size: 19px; z-index: 2; position: relative; } .mySwiper--arrow:hover { background: transparent!important; border: none!important; color: var(--content)!important; } .mySwiper--arrow--round { background: var(--detail)!important; border-radius: 50%; height: 33px; width: 33px; padding: 0px!important; display: grid; align-content: center; text-align: center; justify-content: center; z-index: 1; } .mySwiper--arrow--round svg { width: 16px; position: relative; top: 0px; height: 17px; } .mySwiper--arrow.mySwiper--arrow--round:hover { background: #222!important; color: white !important; } .mySwiper--arrow--round[aria-label="Previous slide"] svg { right: 1px; } .mySwiper--arrow--round[aria-label="Next slide"] svg { left: 1px; } .mySwiper--arrow--tall { display: grid; align-content: center; text-align: center; justify-content: center; z-index: 1; color: white !important; } .mySwiper--arrow.mySwiper--arrow--tall:hover { opacity: 1; color: white !important; } .mySwiper--arrow--square { background: var(--detail)!important; border-radius: 0%; height: 33px; width: 32px; padding: 3px 0px 4px 0px!important; display: grid; align-content: center; text-align: center; justify-content: center; z-index: 1; } .mySwiper--arrow--square:hover { background: #222!important; } button.mySwiper--custom-svg { background: transparent!important; border: none!important; } button.mySwiper--custom-svg:hover { background: transparent!important; border: none!important; } .mySwiper--custom-svg { z-index: 1; } .mySwiper--custom-svg svg { color: white; width: 14px; height: 16px; } .mySwiper--custom-svg--mirrored { transform: rotate(180deg); } .swiper-pagination-fraction { color: black; font-size: 20px; } .on-black .swiper-pagination-fraction { color: white; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .mySwiper--buttons { grid-template-columns: minmax(0, 1fr) 10px auto; width: fit-content; left: 0px; justify-items: end; } } /**** 7.8 Swiper Bullets ****/ .swiper-pagination-bullet { border: 1px solid white; } .swiper-pagination-bullet-active { border-color: white; } :root { --swiper-pagination-bullet-horizontal-gap:4px; --swiper-pagination-bullet-height: 14px; --swiper-pagination-bullet-width:14px; --swiper-pagination-bullet-size:10px; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-inactive-color: transparent; --swiper-pagination-color: white; } /**** 7.9 Swiper Controllers ****/ .my-slider--with-controller { display: grid; grid-gap: 20px; grid-template-columns: minmax(0,1fr); } .my-slider--controller { display: grid; grid-template-columns: minmax(0,1fr); } .my-slider--controller, .my-slider--controlled { position: relative; } .mySwiper--controller { width: 100%; aspect-ratio: 1.6; overflow: hidden; position: relative; cursor: pointer; opacity: 0.7; transition: 0.5s; } .mySwiper--controller--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } swiper-slide.swiper-slide-thumb-active .mySwiper--controller { opacity: 1; } /*** CUSTOMIZATION */ .carousel--single--full-height swiper-container { /* height: 100%; If that wrapper is present and the parent doesn’t have an explicit height, the slider can collapse or behave unpredictably. Avoid forcing height:100% unless the parent has a definite height. */ } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .my-slider.testimonial-carousel { display: grid; grid-template-columns: minmax(0, 1fr); } } /**** 7.10 Swiper Carousel Ribbon ****/ .carousel--ribbon swiper-slide img { max-height: 216px; width: auto; } .carousel--ribbon, .carousel--single--slide { position: relative; } /**** 7.11 Swiper Single ****/ .carousel-single swiper-slide { display: block; } .carousel--single swiper-slide { /* width: 100%!important;*/ } .carousel--single { margin: 0 auto 0px; position: relative; width: 100%;; } .carousel--single--slide { width: 100%!important; height: 100%; border-radius: 15px; aspect-ratio: 2.2; } .carousel--single--contain { background: rgba(0, 0, 0, 0.5); } .carousel--single--contain img.carousel--single--srcset { object-fit: contain; } .swiper-single-item--pane { padding-top: 60%; background-position: center!important; background-size: cover!important; } .carousel--single--expand { position: absolute; color: white; top: 15px; left: 20px; z-index: 2; display: grid; display: grid; grid-template-areas: "stack"; width: 20px; } img.carousel--single--expand--srcset { grid-area: stack; opacity: 0; } .carousel--single--expand--svg { grid-area: stack; } /**** 7.12 Swiper Ribbon ****/ img.swiper-ribbon-item--image { max-height: 64px; width: auto; } .image-ribbon-carousel swiper-slide { display: block; width: auto; } .image-ribbon-carousel--Right { transform: rotate(180deg); } .image-ribbon-carousel--Right img.swiper-ribbon-item--image { transform: rotate(-180deg); } .swiper-ribbon--item--width { display: none !important; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ img.swiper-ribbon-item--image { max-height: 70px; } .swiper-ribbon--item--width { display: none!important; } } /**** 7.13 Swiper Tickertext ****/ .carousel--textticker-item { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; font-size: 80px; font-weight: bold; color: var(--content); margin-left: 0px; line-height: 1em; text-transform: uppercase; grid-gap: 20px; margin-left: 20px; font-size: 44px; } .on-black .carousel--textticker-item { color: var(--on-black); } .carousel--textticker-item:before { content: ""; display: inline-block; background: var(--detail); width: 22px; aspect-ratio: 1; border-radius: 50%; margin: 18px 0px; } .image-ribbon-carousel--Right .carousel--textticker-item { transform: rotate(180deg); } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .carousel--textticker-item { font-size:30px; grid-gap: 10px; margin-left: 10px; } .carousel--textticker-item:before { width: 16px; } } /**** 7.14 Swiper Square ****/ .carousel--square swiper-container { height: auto; } .carousel--square .carousel--single--slide { padding-top: 100%; } img.carousel--single--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .swiper-square-item { padding-top: 100%; width: 100%; background-size: cover !important; background-position: center !important; } /**** 7.15 Swiper Header ****/ .carousel--header--slide { width: 100%; background-size: cover !important; background-position: center !important; /* min-height: 400px; */ aspect-ratio: 2 / 1; position: relative; display: grid; } .carousel--header--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; } /**** 7.16 Swiper Custom Grid ****/ .carousel-layout--descriptor-grid--controller { max-width: 50%; position: absolute; bottom: 0; right: 0; } .carousel-layout--descriptor-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 20px; width: 100%; } .carousel-layout--descriptor-grid--controller .my-slider--controller { width: fit-content; margin: 0 0 0 auto; } .my-slider--controller swiper-slide { margin-right: 0 !important; margin-left: 10px; } .carousel-layout--descriptor-grid--controller { max-width: 50%; position: absolute; top: 0; right: 0; width: 100%; padding: calc( 50% + 30px ) 0 0; } .carousel-layout--descriptor-grid--bottom { /* display: grid;*/ } .carousel-layout--descriptor-grid--textarea { max-width: 300px; opacity: 0; transition: 0.5s; } swiper-slide.swiper-slide-visible .carousel-layout--descriptor-grid--textarea { opacity: 1; } .mySwiper--controller--with-img img { height: 100px!important; cursor: pointer; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .carousel-layout--descriptor-grid--textarea { max-width: 50%; } .mySwiper--controller--with-img img { height: 30px !important; } .carousel-layout--descriptor-grid--controller { max-width: 100%; } } /**** 7.17 Swiper Visable Inactive Slides ****/ .carousel--backface-mask { overflow: clip; } .carousel--backface-mask swiper-container::part(container) { overflow: visible; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .carousel--backface-mask--desktop { overflow: clip; } .carousel--backface-mask--desktop swiper-container::part(container) { overflow: visible; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .carousel--backface-mask--mobile { overflow: clip; } .carousel--backface-mask--mobile swiper-container::part(container) { overflow: visible; } } /**** 7.18 Under Carousel Textarea ****/ .acf-page-builder--layout--background--White .carousel--under-textarea-grid { background: white; } .acf-page-builder--layout--background--Subtle .carousel--under-textarea-grid { background: var(--background-subtle); } .acf-page-builder--layout--background--Strong .carousel--under-textarea-grid { background: var(--background-strong); } .acf-page-builder--layout--background--Black .carousel--under-textarea-grid { background: #000; } .carousel--under-textarea-grid { width: 100%; height: 100%; display: grid; background: white; } .carousel--under-textarea { max-width: 500px; } /**** 7.19 Swiper Half Contained ****/ .swiper-half-contained { display: grid; grid-template-columns: minmax(0,1fr); margin: 0 auto; position: relative; } .swiper-half-contained--header { display: grid; grid-template-columns: minmax(0,1fr) auto; padding: 0 0 20px; grid-gap: 20px; align-items: center; } .swiper-half-contained--textarea { padding: 0 20px 0 0; } .swiper-half-contained--meta { display: flex; flex-wrap: wrap; align-items: flex-start; grid-gap: 15px; } .swiper-half-contained--carousel { position: relative; padding: 0 0px; } .swiper-half-contained--pagination { padding: 20px 0 0; } .swiper-half-contained--pagination .swiper-pagination-bullet { border: 1px solid var(--detail); } .swiper-half-contained--pagination .swiper-pagination-bullet-active { border-color: var(--detail); background: var(--detail)!important; } .swiper-half-contained--pagination :root { --swiper-pagination-color: var(--detail); } .swiper-half-contained--pagination .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-half-contained--pagination .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { background: transparent; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .swiper-half-contained--header { max-width: var(--col-full); width: 100%; margin: 0 auto; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .swiper-half-contained { grid-template-columns: minmax(0,1fr); grid-gap: 20px; } .swiper-half-contained--header { grid-template-columns: minmax(0,1fr); padding: 0 0 0px; } .swiper-half-contained--carousel { padding: 0 0px 20px; } .swiper-half-contained--meta { display: flex; flex-wrap: wrap; align-items: center; grid-gap: 15px; justify-content: space-between; } .swiper-half-contained--button { order: 2; } } /**** 7.XX Swiper Inline ****/ .swiper-inline { display: grid; grid-template-columns: calc(50% - calc(var(--col-full) / 2)) 360px minmax(0, 1fr); margin: 0 auto; position: relative; } .swiper-inline--body { padding: 0 var(--col-full-padding); display: grid; align-content: space-between; } .swiper-inline--title { padding: 0 0 20px; } .swiper-inline--textarea { padding: 0 20px 0 0; } .swiper-inline--meta { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } .swiper-inline--pagination { padding: 0px 0 0; } .swiper-inline--slider { } .swiper-inline--carousel { position: relative; } .swiper-inline--pagination .swiper-pagination-bullet { border: 1px solid var(--detail); } .swiper-inline--pagination .swiper-pagination-bullet-active { border-color: var(--detail); background: var(--detail)!important; } .swiper-inline--pagination :root { --swiper-pagination-color: var(--detail); } .swiper-inline--pagination .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-inline--pagination .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { background: transparent; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .swiper-inline--carousel { position: relative; padding: 0 var(--col-full-padding) 0 0; } .swiper-inline--slider { display: grid; grid-template-columns: minmax(0, 1fr) calc(50vw - 8px - calc(var(--col-full) / 2) ) ; margin: 0 auto; position: relative; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .swiper-inline--body { display: contents; } .swiper-inline--content { padding: 0 var(--col-full-padding); } .swiper-inline { grid-template-columns: minmax(0,1fr); padding: 0 0px; grid-gap: var(--col-full-padding); } .swiper-inline--carousel { padding: 0 var(--col-full-padding); } .swiper-inline--meta { padding: 0 var(--col-full-padding); order: 3; justify-content: center; } } /****************************************/ /****************************************/ /************* END SLIDERS *************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /***** 8. START WOOCOMMERCE (MOVED) *****/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /*********** END WOOCOMMERCE ***********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /*********** 9. START BLOG *************/ /****************************************/ /****************************************/ /**** 9.1 Blog Archive Rules ****/ .posts-archive--header { padding: 30px 0 35px; margin: 0 auto 20px; border-bottom: 1px solid var(--mid-border); } .posts-archive--textarea { padding: 0 0 30px; } .posts-archive--filters { display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; } .posts-archive--search { max-width: 230px; } .post-feed { display: grid; grid-gap: 20px; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0 auto; padding: 20px 0 20px; } .post-feed article { container-type: inline-size; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .blog article:first-of-type { grid-column: span 3; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .post-feed { grid-template-columns: minmax(0,1fr); } } /**** 9.2 Blog Cards ****/ /**** 9.2.001 Post Card 001 ****/ /**** 9.2.002 Post Card 002 ****/ /**** 9.2.003 Post Card 003 ****/ /**** 9.2.004 Post Card 004 ****/ .pc004 { border: 1px solid #e2e3e5; display: grid; height: 100%; grid-template-rows: auto minmax(0,1fr); } .pc004 a { text-decoration: none; } .pc004--image { position: relative; width: 100%; aspect-ratio: 1.6; overflow: hidden; position: relative; } .pc004--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .pc004--lodzenge { background: var(--detail); color: #000; padding: 0px 10px 0px; position: absolute; top: 10px; right: 10px; } .pc004--text { padding: 20px 20px 20px; display: grid; grid-template-rows: minmax(0,1fr) auto; background: var(--background); grid-gap: 10px; } .pc004--link { text-decoration: none; } .pc004--date { color: var(--detail); color: #000; margin: 0 0 10px; font-size: 16px; } .pc004--title { padding: 0 0 25px; } .pc004--cats { font-size: 0; } .pc004--cats span, .pc004--cats a { background: white; padding: 5px 13px; font-size: 12px; border: 1px solid #414141; color: #414141; border-radius: 0px; width: fit-content; margin: 0 5px 5px 0; } @container (min-width: 701px) { /* LARGE RULES GO HERE */ .pc004 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } } @container (max-width: 700px) { /* SMALL RULES GO HERE */ .pc004--title { min-height: 100px; } .pc004--excerpt { display: none; } } /**** 9.2.005 Post Card 005 ****/ /**** 9.2.006 Post Card 006 ****/ /**** 9.2.007 Post Card 007 ****/ /**** 9.2.008 Post Card 008 ****/ /**** 9.2.009 Post Card 009 ****/ /**** 9.3 Post Single ****/ .post-single { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 50px; padding: 0 0 50px; } .post-single--body { } .post-single--footer { } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 9.3.2 Other Blogs Styles ****/ .other-blog-posts-feed { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-gap: 20px; } .other-blog-posts-feed--item { container-type: inline-size; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .other-blog-posts-feed { grid-template-columns: minmax(0,1fr); } } /**** 9.4 Blog Content Items ****/ blockquote { background: var(--background-subtle); padding: 20px 26px 20px; border-left: 5px solid var(--detail); margin: 0; } .post-item-rules iframe { width: 100%; } /* Image Spacing **/ .post-item-rules p + .alignnone img, .post-item-rules .alignnone + p, .post-item-rules ul + .alignnone img, .post-item-rules .alignnone + ul, .post-item-rules .alignnone + ol, .post-item-rules blockquote + .alignnone img, .post-item-rules .alignnone + blockquote, .post-item-rules button + .alignnone img, .post-item-rules .alignnone + button { padding-top: var(--text-gap); } .post-item-rules h1 + .alignnone img, .post-item-rules .alignnone + h1, .post-item-rules h2 + .alignnone img, .post-item-rules .alignnone + h2, .post-item-rules h3 + .alignnone img, .post-item-rules .alignnone + h3, .post-item-rules h4 + .alignnone img, .post-item-rules .alignnone + h4, .post-item-rules h5 + .alignnone img, .post-item-rules .alignnone + h5 { padding-top: var(--title-gap); } /* Post Image Caption */ .post-item-rules .wp-caption { width: 100%; max-width: 100%; border-bottom: 1px solid var(--mid-border); } .post-item-rules .wp-caption p { font-size: 12px; padding: 10px 0 0; margin: 0 0 10px; } /**** 9.5 Comments ****/ #comments { padding-top: 0px; background: #F5F5F6; margin-bottom: 40px; padding: 35px 35px 30px; } #comments .comment-body { grid-template-areas: "commentphoto commentname" "commentphoto commentdate" "commentphoto commentcontent" "commentrespond commentrespond"; display: grid; grid-gap: 0px 20px; grid-template-columns: 64px minmax(0,1fr); padding: 0px 0px 20px; } #comments .summary.entry-summary { grid-area: producttextarea; } #comments img.avatar { grid-area: commentphoto; float: none; } #comments cite.fn { grid-area: commentname; background: white; padding: 25px 25px 0; text-align: left; } #comments a.comment-date { grid-area: commentdate; text-align: left; background: white; padding: 0px 25px 25px; } #comments .comment-content { grid-area: commentcontent; } #comments .comment-list .comment-content { padding: 0; margin: 0; } #comments .comment-meta.commentmetadata, #comments .comment-author.vcard { display: contents; } #comments .comment-text { background: white!important; padding: 0 25px 20px!important; } #comments .comment-list .comment-body::before, #comments .comment-list .comment-body::after { content: none; } #comments .comment-body, #comments .comment-meta.commentmetadata, #comments .comment-list .comment-content, #comments .comment-list #respond { width: 100%; } #comments textarea#comment, #comments input#author, #comments input#email, #comments input#url { background: white; border: 1px solid #D9D9D9; box-shadow: none; } #comments div#respond { padding: 0em; background: transparent; grid-area: commentrespond; padding: 0px; box-shadow: none; } a#cancel-comment-reply-link { color: #222; } a#cancel-comment-reply-link, a#cancel-comment-reply-link:hover { text-decoration: none!important; } #respond #cancel-comment-reply-link { height: 25px; width: 25px; font-size: 24px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ #respond .comment-form-author { width: calc( 50% - 17px ); margin-right: 34px; } #respond .comment-form-email { width: calc( 50% - 17px ); margin-right: 0%; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /* #comments { padding-top: 0px; background: transparent; margin-bottom: 40px; } ol.commentlist > li { background: white; padding: 25px; } .description *:last-of-type { margin-bottom: 0!important; } .comment_container { display: grid; grid-template-columns: 100px minmax(0,1fr); grid-gap: 25px; } #reviews .commentlist li .avatar, #reviews .commentlist li .comment_container .comment-text { width: 100%!important; } #reviews .commentlist li .comment_container::before, #reviews .commentlist li .comment_container::after { content: none; } .woocommerce .ratings .star-rating span:before, .woocommerce .woocommerce-product-rating .star-rating span:before, .woocommerce-page .ratings .star-rating span:before, .woocommerce-page .woocommerce-product-rating .star-rating span:before, .star-rating span:before { color: #706B98; content: '\f0ec\f0ec\f0ec\f0ec\f0ec'; font-size: 16px; letter-spacing: 0px; font-family: 'Material Icons'; } .star-rating::before { opacity: 0; } div#respond { padding: 0em; background: transparent; } */ /**** 9.6 Post Sidebar ****/ .widget .widget-title, .widget .widgettitle { border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 0 0 10px; margin-bottom: 15px; } .widget_recent_entries ul li::before, .widget_pages ul li::before, .widget_categories ul li::before, .widget_archive ul li::before, .widget_recent_comments ul li::before, .widget_nav_menu ul li::before, .widget_links ul li::before, .widget_product_categories ul li::before, .widget_layered_nav ul li::before, .widget_layered_nav_filters ul li::before { content: none; } .widget_recent_entries ul li, .widget_pages ul li, .widget_categories ul li, .widget_archive ul li, .widget_recent_comments ul li, .widget_nav_menu ul li, .widget_links ul li, .widget_product_categories ul li, .widget_layered_nav ul li, .widget_layered_nav_filters ul li { padding-left: 0px; } .widget-area .widget a:not(.button) { text-decoration: none; } .widget_categories ul li.current-cat::before { content: none; } .widget_recent_entries ul li, .widget_pages ul li, .widget_categories ul li, .widget_archive ul li, .widget_recent_comments ul li, .widget_nav_menu ul li, .widget_links ul li, .widget_product_categories ul li, .widget_layered_nav ul li, .widget_layered_nav_filters ul li { list-style: none; margin-bottom: 15px; line-height: 1.3em; } .widget_recent_entries ul li { border-bottom: 1px solid #eeeeee; padding: 0px 0 12px; } /**** 9.7 Pagination ****/ nav.navigation.pagination { display: flex; justify-content: center; padding: 30px 0 40px; } nav.navigation.pagination .nav-links { display: flex; grid-gap: 10px; } nav.navigation.pagination .page-numbers { background: rgba(0,0,0,.025); padding: 10px 16px; font-size: 16px; color: var(--content); width: 44px; text-align: center; text-decoration: none; } nav.navigation.pagination a.next.page-numbers, nav.navigation.pagination a.prev.page-numbers { padding: 10px 13px; } nav.navigation.pagination .page-numbers:hover { background-color: rgba(0, 0, 0, .05); padding: 10px 16px; font-size: 16px; color: var(--content); } nav.navigation.pagination span.page-numbers.current { background: #e6e6e6; } nav.navigation.pagination .nav-links svg { position: relative; top: -2px; } nav.navigation.pagination h2.screen-reader-text { display: none; } /****************************************/ /****************************************/ /************* END BLOG ****************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /********* 10. START CONTACT ***********/ /****************************************/ /****************************************/ /**** 10.1 Contact Form 7 Rules ****/ input[type=text], input[type=number], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=search], textarea, .input-text { padding: 9px 12px; background-color: #f2f2f2; color: #43454b; border: 0; -webkit-appearance: none; box-sizing: border-box; font-weight: 400; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .125); } .wpcf7 label { width: 100%; font-size: 16px; } span.wpcf7-form-control-wrap { margin-right: 0px; } .wpcf7 input[type="checkbox"] { width: 20px; } .wpcf7-form input { width: 100%; margin: 0px 0 0px; } input.wpcf7-submit { margin: 0px 0 0 0; position: relative; } .wpcf7 p:has(input.wpcf7-submit) { position: relative; } .wpcf7-textarea { margin: 0 0 -10px; padding: 10px 10px; height: 140px; width: 100%; } .wpcf7 input[type="radio"] { display: inline-block; width: 35px; } span.wpcf7-list-item-label { line-height: 1em; font-size: 0.9em; } span.wpcf7-list-item { display: block; margin: 0; } .wpcf7-checkbox span.wpcf7-list-item, .wpcf7-radio span.wpcf7-list-item { display: block; margin: 0; display: grid; grid-template-columns: auto minmax(0,1fr); grid-gap: 15px; } .wpcf7-acceptance label { display: grid; grid-template-columns: auto minmax(0,1fr); grid-gap: 15px; align-items: center; } span.wpcf7-form-control { display: grid; grid-gap: 9px; padding: 10px 0; } .wpcf7-form-control-wrap { padding-bottom: 0px; } .wpcf7 input[type="checkbox"], .wpcf7 input[type="radio"] { width: 18px; margin-right: 0px; margin-bottom: 0px; font-size: 39px; height: 18px; top: 0px; position: relative; cursor: pointer; accent-color: var(--detail); } .wpcf7-select { width: 100%; padding: 5px 0px; } .wpcf7-select option:checked, .wpcf7-select option:active { background-color: var(--detail); color: #fff; } .wpcf7-form option { padding: 5px 8px; cursor: pointer; } .wpcf7 form { margin-bottom: 0em; } div.wpcf7-response-output { margin: 0px 0px 10px; padding: 0.2em 1em; } .wpcf7 .row { margin-right: -10px; margin-left: -10px; } .wpb_text_column .wpcf7 .row { margin-right: -15px; margin-left: -15px; } .wpcf7 p { margin: 0; padding: 0; } .wpcf7-spinner { position: absolute; right: 0; top: 12px; visibility: hidden; display: inline-block; background-color: #23282d; opacity: 0.75; width: 24px; height: 24px; border: none; border-radius: 100%; padding: 0; margin: 0 15px; } span.wpcf7-not-valid-tip { font-size: 0.7em; } /** Popup Messages */ .wpcf7 form .wpcf7-response-output { margin: 20px 0px 0px; padding: 8px 13px; border-radius: 4px; font-size: 0.9em; } .wpcf7 form.sent .wpcf7-response-output { border-color: #b3efb9; background: #b3efb9; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border-color: #ffebb6; background-color: #ffebb6; } .wpcf7 form.spam .wpcf7-response-output { border-color: #ffc3a4; background: #ffc3a4; } /** CF7 Grid **/ .cf7--grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-gap: 15px 25px; container-type: inline-size; } @media (max-width: 767px) { /* MOBILE RULES GO HERE */ .cf7--grid { grid-gap: 15px 5px; } } @container (min-width: 401px) { /* DESKTOP RULES GO HERE */ .cf7--grid-desktop-1 { grid-column: span 1; } .cf7--grid-desktop-2 { grid-column: span 2; } .cf7--grid-desktop-3 { grid-column: span 3; } .cf7--grid-desktop-4 { grid-column: span 4; } .cf7--grid-desktop-5 { grid-column: span 5; } .cf7--grid-desktop-6 { grid-column: span 6; } .cf7--grid-desktop-7 { grid-column: span 7; } .cf7--grid-desktop-8 { grid-column: span 8; } .cf7--grid-desktop-9 { grid-column: span 9; } .cf7--grid-desktop-10 { grid-column: span 10; } .cf7--grid-desktop-11 { grid-column: span 11; } .cf7--grid-desktop-12 { grid-column: span 12; } } @container (max-width: 400px) { /* MOBILE RULES GO HERE */ .cf7--grid-mobile-1 { grid-column: span 1; } .cf7--grid-mobile-2 { grid-column: span 2; } .cf7--grid-mobile-3 { grid-column: span 3; } .cf7--grid-mobile-4 { grid-column: span 4; } .cf7--grid-mobile-5 { grid-column: span 5; } .cf7--grid-mobile-6 { grid-column: span 6; } .cf7--grid-mobile-7 { grid-column: span 7; } .cf7--grid-mobile-8 { grid-column: span 8; } .cf7--grid-mobile-9 { grid-column: span 9; } .cf7--grid-mobile-10 { grid-column: span 10; } .cf7--grid-mobile-11 { grid-column: span 11; } .cf7--grid-mobile-12 { grid-column: span 12; } } /**** 10.2 CF7 Styles ****/ /**** 10.2.1 Contact Form 7 Underline Rules ****/ .cf7-underline-style input[type=text], .cf7-underline-style input[type=number], .cf7-underline-style input[type=email], .cf7-underline-style input[type=tel], .cf7-underline-style input[type=url], .cf7-underline-style input[type=password], .cf7-underline-style input[type=search], .cf7-underline-style textarea, .cf7-underline-style .input-text, .cf7-underline-style .wpcf7-select, .cf7-underline-style .wpcf7-date { padding: 3px 0; background-color: transparent; box-shadow: inset 0 0px 0px rgb(0 0 0 / 13%); border: 0px solid #D0D3D9; border-bottom: 1px solid #ccc; } .cf7-underline-style input:focus, .cf7-underline-style textarea:focus { border-bottom: 1px solid #222; } /**** 10.2.2 Contact Form 7 Boxed Rules ****/ .cf7-boxed-style input[type=text], .cf7-boxed-style input[type=number], .cf7-boxed-style input[type=email], .cf7-boxed-style input[type=tel], .cf7-boxed-style input[type=url], .cf7-boxed-style input[type=password], .cf7-boxed-style input[type=search], .cf7-boxed-style textarea, .cf7-boxed-style .input-text, .cf7-boxed-style .wpcf7-select, .cf7-boxed-style .wpcf7-date { padding: 3px 8px; background-color: var(--background); box-shadow: inset 0 0px 0px rgb(0 0 0 / 13%); border: 1px solid #D0D3D9; transition: 0.5s; } .cf7-boxed-style input:focus, .cf7-boxed-style textarea:focus { border-left: 5px solid var(--detail); } /**** 10.2.3 CF7 Inline Grid ****/ .cf7--inlinegrid { } .cf7--inlinegrid-item { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,3fr); grid-gap: 0px; border-bottom: 1px solid #B0B0B0; /* align-content: center; */ align-items: center; } .cf7--inlinegrid { display: grid; grid-gap: 10px; } .cf7--inlinegrid p { margin-bottom: 0px; margin-top: 12px; } .cf7--inlinegrid input[type=text], .cf7--inlinegrid input[type=number], .cf7--inlinegrid input[type=email], .cf7--inlinegrid input[type=tel], .cf7--inlinegrid input[type=url], .cf7--inlinegrid input[type=password], .cf7--inlinegrid input[type=search], .cf7--inlinegrid textarea, .cf7--inlinegrid .input-text { padding: 0.6180469716em; background-color: transparent; color: var(--detail); border-bottom: 0px solid black; border: 0; -webkit-appearance: none; box-sizing: border-box; font-weight: 400; box-shadow: inset 0 0px 0px rgb(0 0 0 / 0%); } .cf7--inlinegrid input.wpcf7-file, .cf7--inlinegrid .wpcf7-select { margin-bottom: 9px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cf7--inlinegrid-item { grid-template-columns: minmax(0,1fr) ; } } /**** 10.2.4 CF7 Narrative ****/ .narrative-cf7 { display: grid; grid-gap: 40px; } .narrative-cf7 span.wpcf7-form-control-wrap { margin: 0; padding: 0; } .narrative-cf7 input[type=text], .narrative-cf7 input[type=number], .narrative-cf7 input[type=url], .narrative-cf7 input[type=password], .narrative-cf7 input[type=search], .narrative-cf7 textarea, .narrative-cf7 .input-text { padding: 3px 0; background-color: transparent; box-shadow: inset 0 0px 0px rgb(0 0 0 / 13%); border: 0px solid #D0D3D9; border-bottom: 1px solid #ccc; } .narrative-cf7 span input[type=email], .narrative-cf7 span input[type=tel] { font-size: 14px!important; text-align: center; border-radius: 6px; background-color: #fff; box-shadow: none; color: #000; } .narrative-cf7--line > p { display: grid; align-content: start; align-items: start; margin: 0; } .narrative-cf7 input:focus, .narrative-cf7 textarea:focus { border-bottom: 1px solid #222; } span.narrative-cf7--text { color: white; font-size: 32px; top: 10px; position: relative; } .narrative-cf7 input.wpcf7-text { font-size: 26px; color: pink } .narrative-cf7 span.wpcf7-form-control { display: flex; grid-gap: 9px; flex-wrap: wrap; } @media screen and (min-width: 1090px) and (max-width: 1170px) { /* INTERMEDIATE RULES GO HERE */ span.narrative-cf7--text { font-size: 30px; } } @media screen and (min-width: 890px) and (max-width: 1089px) { /* INTERMEDIATE RULES GO HERE */ span.narrative-cf7--text { font-size: 30px; } } @media screen and (min-width: 768px) and (max-width: 889px) { /* INTERMEDIATE RULES GO HERE */ span.narrative-cf7--text { font-size: 20px; } } /** Narrow */ .narrative-cf7--line--narrow > p { grid-template-columns: auto minmax(0,1fr) auto; } .narrative-cf7--line--narrow span.wpcf7-form-control-wrap { display: inline-block; margin: 0 20px; position: relative; top: 0px; } .narrative-cf7--line--narrow input.wpcf7-text { width: 100%; } /** Lozenges */ .narrative-cf7--lozenges > p { grid-template-columns: repeat(2, auto); } .narrative-cf7--lozenges span.wpcf7-list-item-label { background: white; padding: 5px 19px 3px; width: fit-content; border-radius: 18px; color: #222; cursor: pointer; font-size: 14px; } .narrative-cf7--lozenges span.wpcf7-form-control-wrap { position: relative; top: 5px; } .narrative-cf7--lozenges span.wpcf7-list-item { display: inline-block; } .narrative-cf7--lozenges input:checked + span.wpcf7-list-item-label { background: var(--detail); } .narrative-cf7--lozenges input[type="radio"] { position: absolute; left: -20000px; } /** Dots */ .narrative-cf7--dots span.wpcf7-form-control.wpcf7-radio { display: grid; grid-template-columns: auto auto auto auto; position: relative; justify-items: stretch; justify-content: space-between; } .narrative-cf7--dots span.wpcf7-list-item-label { padding: 5px 19px 3px; width: fit-content; cursor: pointer; } .narrative-cf7--dots span.wpcf7-form-control.wpcf7-radio:before { content: ""; width: 100%; height: 2px; background: #fff; display: block; border-radius: 50%; margin: 0 auto; position: absolute; top: 38px; } .narrative-cf7--dots span.wpcf7-list-item-label:before { content: ""; width: 20px; height: 20px; background: #fff; display: block; border-radius: 50%; margin: 0 auto; z-index: 1; position: relative; } .narrative-cf7--dots input:checked + span.wpcf7-list-item-label:before { background: var(--detail); } .narrative-cf7--dots input[type="radio"] { position: absolute; left: -20000px; } .narrative-cf7--dots span.wpcf7-list-item-label { color: #fff; font-size: 20px; } /** Grid */ .narrative-cf7--line.narrative-cf7--grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 150px; grid-gap: 30px; } /** Acceptance */ .narrative-cf7 .wpcf7-acceptance.optional { font-size: 11px; line-height: 1em; cursor: pointer; } .narrative-cf7 .wpcf7-acceptance span.wpcf7-list-item label { display: grid; grid-template-columns: 25px minmax(0,1fr); grid-gap: 5px; /* align-content: center; */ align-items: center; margin: 0; } .narrative-cf7 .wpcf7-acceptance span.wpcf7-form-control-wrap, .narrative-cf7 .wpcf7-acceptance span.wpcf7-list-item { margin: 0; padding: 0; } .narrative-cf7 .wpcf7-acceptance span.wpcf7-list-item-label { width: calc(100%); } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media (max-width: 767px) { /* MOBILE RULES GO HERE */ span.narrative-cf7--text { color: white; font-size: 28px; top: 0px; position: relative; } .narrative-cf7--line--narrow span.wpcf7-form-control-wrap { margin: 10px 0px; } .narrative-cf7 { grid-gap: 10px; } .narrative-cf7--lozenges span.wpcf7-form-control-wrap { top: 5px; } .narrative-cf7--line--narrow span.wpcf7-form-control-wrap { margin: 15px 0px; } .narrative-cf7--dots span.wpcf7-list-item-label { font-size: 14px; padding: 5px 0 5px; } .narrative-cf7--lozenges span.wpcf7-list-item { margin: 10px 15px 0px 0px; } .narrative-cf7--line.narrative-cf7--line--wide { padding: 5px 0 15px; } .narrative-cf7 input.wpcf7-text { font-size: 16px; } .narrative-cf7--line--narrow > p, .narrative-cf7--lozenges > p { grid-template-columns: minmax(0,1fr); } .narrative-cf7--line.narrative-cf7--grid { grid-template-columns: minmax(0,1fr); grid-gap: 20px; } } /**** CF7 ICON ****/ .cf7-icon span.material-icons-outlined { position: absolute; left: 0px; top: 10px; z-index: 1; color: var(--detail); } .cf7-icon input, .cf7-icon textarea.wpcf7-form-control.wpcf7-textarea { padding-left: 43px!important; } .cf7-icon .input-text, .cf7-icon input[type=email], .cf7-icon input[type=number], .cf7-icon input[type=password], .cf7-icon input[type=search], .cf7-icon input[type=tel], .cf7-icon input[type=text], .cf7-icon input[type=url], .cf7-icon textarea { padding: 8px; background-color: transparent; color: #43454b; border: 0; -webkit-appearance: none; box-sizing: border-box; font-weight: 400; box-shadow: inset 0 0px 0px rgb(0 0 0 / 13%); border: 1px solid rgba(0,0,0,.15); border-radius: 25px; } .cf7-icon textarea { border-radius: 10px; } .cf7-icon .input-text:focus, .cf7-icon input[type=email]:focus, .cf7-icon input[type=number]:focus, .cf7-icon input[type=password]:focus, .cf7-icon input[type=search]:focus, .cf7-icon input[type=tel]:focus, .cf7-icon input[type=text]:focus,.cf7-icon input[type=url]:focus,.cf7-icon textarea:focus { border-color: var(--detail); background-color: transparent; } .cf7-icon span.wpcf7-form-control-wrap { display: grid; position: relative; } .cf7-icon span.wpcf7-form-control-wrap[data-name="product"]:before, .cf7-icon span.wpcf7-form-control-wrap[data-name="your-name"]:before, .cf7-icon span.wpcf7-form-control-wrap[data-name="your-email"]:before, .cf7-icon span.wpcf7-form-control-wrap[data-name="your-tel"]:before, .cf7-icon span.wpcf7-form-control-wrap[data-name="your-message"]:before, .cf7-icon span.wpcf7-form-control-wrap[data-name="your-org"]:before, .cf7-icon span.wpcf7-form-control-wrap[data-name="company"]:before { content: ""; display: inline-block; width: 18px; height: 19px; background-color: var(--detail); top: 14px; position: absolute; left: 15px; } .cf7-icon span.wpcf7-form-control-wrap[data-name="product"]:before { mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-arrow-down-right-circle%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1%208a7%207%200%201%200%2014%200A7%207%200%200%200%201%208m15%200A8%208%200%201%201%200%208a8%208%200%200%201%2016%200M5.854%205.146a.5.5%200%201%200-.708.708L9.243%209.95H6.475a.5.5%200%201%200%200%201h3.975a.5.5%200%200%200%20.5-.5V6.475a.5.5%200%201%200-1%200v2.768z%22/%3E%3C/svg%3E') no-repeat center; -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-arrow-down-right-circle%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1%208a7%207%200%201%200%2014%200A7%207%200%200%200%201%208m15%200A8%208%200%201%201%200%208a8%208%200%200%201%2016%200M5.854%205.146a.5.5%200%201%200-.708.708L9.243%209.95H6.475a.5.5%200%201%200%200%201h3.975a.5.5%200%200%200%20.5-.5V6.475a.5.5%200%201%200-1%200v2.768z%22/%3E%3C/svg%3E') no-repeat center; } .cf7-icon span.wpcf7-form-control-wrap[data-name="your-name"]:before { mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-person%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M8%208a3%203%200%201%200%200-6%203%203%200%200%200%200%206m2-3a2%202%200%201%201-4%200%202%202%200%200%201%204%200m4%208c0%201-1%201-1%201H3s-1%200-1-1%201-4%206-4%206%203%206%204m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516%2010.68%2010.289%2010%208%2010s-3.516.68-4.168%201.332c-.678.678-.83%201.418-.832%201.664z%22/%3E%3C/svg%3E') no-repeat center; -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-person%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M8%208a3%203%200%201%200%200-6%203%203%200%200%200%200%206m2-3a2%202%200%201%201-4%200%202%202%200%200%201%204%200m4%208c0%201-1%201-1%201H3s-1%200-1-1%201-4%206-4%206%203%206%204m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516%2010.68%2010.289%2010%208%2010s-3.516.68-4.168%201.332c-.678.678-.83%201.418-.832%201.664z%22/%3E%3C/svg%3E') no-repeat center; } .cf7-icon span.wpcf7-form-control-wrap[data-name="your-email"]:before { mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-envelope%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M0%204a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2zm2-1a1%201%200%200%200-1%201v.217l7%204.2%207-4.2V4a1%201%200%200%200-1-1zm13%202.383-4.708%202.825L15%2011.105zm-.034%206.876-5.64-3.471L8%209.583l-1.326-.795-5.64%203.47A1%201%200%200%200%202%2013h12a1%201%200%200%200%20.966-.741M1%2011.105l4.708-2.897L1%205.383z%22%3E%3C/path%3E%3C/svg%3E') no-repeat center; -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-envelope%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M0%204a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2zm2-1a1%201%200%200%200-1%201v.217l7%204.2%207-4.2V4a1%201%200%200%200-1-1zm13%202.383-4.708%202.825L15%2011.105zm-.034%206.876-5.64-3.471L8%209.583l-1.326-.795-5.64%203.47A1%201%200%200%200%202%2013h12a1%201%200%200%200%20.966-.741M1%2011.105l4.708-2.897L1%205.383z%22%3E%3C/path%3E%3C/svg%3E') no-repeat center; } .cf7-icon span.wpcf7-form-control-wrap[data-name="your-tel"]:before { mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-telephone%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3.654%201.328a.678.678%200%200%200-1.015-.063L1.605%202.3c-.483.484-.661%201.169-.45%201.77a17.6%2017.6%200%200%200%204.168%206.608%2017.6%2017.6%200%200%200%206.608%204.168c.601.211%201.286.033%201.77-.45l1.034-1.034a.678.678%200%200%200-.063-1.015l-2.307-1.794a.68.68%200%200%200-.58-.122l-2.19.547a1.75%201.75%200%200%201-1.657-.459L5.482%208.062a1.75%201.75%200%200%201-.46-1.657l.548-2.19a.68.68%200%200%200-.122-.58zM1.884.511a1.745%201.745%200%200%201%202.612.163L6.29%202.98c.329.423.445.974.315%201.494l-.547%202.19a.68.68%200%200%200.178.643l2.457%202.457a.68.68%200%200%200%20.644.178l2.189-.547a1.75%201.75%200%200%201%201.494.315l2.306%201.794c.829.645.905%201.87.163%202.611l-1.034%201.034c-.74.74-1.846%201.065-2.877.702a18.6%2018.6%200%200%201-7.01-4.42%2018.6%2018.6%200%200%201-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z%22%3E%3C/path%3E%3C/svg%3E') no-repeat center; -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-telephone%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3.654%201.328a.678.678%200%200%200-1.015-.063L1.605%202.3c-.483.484-.661%201.169-.45%201.77a17.6%2017.6%200%200%200%204.168%206.608%2017.6%2017.6%200%200%200%206.608%204.168c.601.211%201.286.033%201.77-.45l1.034-1.034a.678.678%200%200%200-.063-1.015l-2.307-1.794a.68.68%200%200%200-.58-.122l-2.19.547a1.75%201.75%200%200%201-1.657-.459L5.482%208.062a1.75%201.75%200%200%201-.46-1.657l.548-2.19a.68.68%200%200%200-.122-.58zM1.884.511a1.745%201.745%200%200%201%202.612.163L6.29%202.98c.329.423.445.974.315%201.494l-.547%202.19a.68.68%200%200%200.178.643l2.457%202.457a.68.68%200%200%200%20.644.178l2.189-.547a1.75%201.75%200%200%201%201.494.315l2.306%201.794c.829.645.905%201.87.163%202.611l-1.034%201.034c-.74.74-1.846%201.065-2.877.702a18.6%2018.6%200%200%201-7.01-4.42%2018.6%2018.6%200%200%201-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z%22%3E%3C/path%3E%3C/svg%3E') no-repeat center; } .cf7-icon span.wpcf7-form-control-wrap[data-name="your-message"]:before { mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-right" viewBox="0 0 16 16"%3E%3Cpath d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"%3E%3C/path%3E%3C/svg%3E') no-repeat center; -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-right" viewBox="0 0 16 16"%3E%3Cpath d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"%3E%3C/path%3E%3C/svg%3E') no-repeat center; } .cf7-icon span.wpcf7-form-control-wrap[data-name="your-org"]:before { mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-buildings%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M14.763.075A.5.5%200%200%201%2015%20.5v15a.5.5%200%200%201-.5.5h-3a.5.5%200%200%201-.5-.5V14h-1v1.5a.5.5%200%200%201-.5.5h-9a.5.5%200%200%201-.5-.5V10a.5.5%200%200%201%20.342-.474L6%207.64V4.5a.5.5%200%200%201%20.276-.447l8-4a.5.5%200%200%201%20.487.022M6%208.694%201%2010.36V15h5zM7%2015h2v-1.5a.5.5%200%200%201%20.5-.5h2a.5.5%200%200%201%20.5.5V15h2V1.309l-7%203.5z%22%3E%3C/path%3E%3Cpath%20d%3D%22M2%2011h1v1H2zm2%200h1v1H4zm-2%202h1v1H2zm2%200h1v1H4zm4-4h1v1H8zm2%200h1v1h-1zm-2%202h1v1H8zm2%200h1v1h-1zm2-2h1v1h-1zm0%202h1v1h-1zM8%207h1v1H8zm2%200h1v1h-1zm2%200h1v1h-1zM8%205h1v1H8zm2%200h1v1h-1zm2%200h1v1h-1zm0-2h1v1h-1z%22%3E%3C/path%3E%3C/svg%3E') no-repeat center; -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-buildings%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M14.763.075A.5.5%200%200%201%2015%20.5v15a.5.5%200%200%201-.5.5h-3a.5.5%200%200%201-.5-.5V14h-1v1.5a.5.5%200%200%201-.5.5h-9a.5.5%200%200%201-.5-.5V10a.5.5%200%200%201%20.342-.474L6%207.64V4.5a.5.5%200%200%201%20.276-.447l8-4a.5.5%200%200%201%20.487.022M6%208.694%201%2010.36V15h5zM7%2015h2v-1.5a.5.5%200%200%201%20.5-.5h2a.5.5%200%200%201%20.5.5V15h2V1.309l-7%203.5z%22%3E%3C/path%3E%3Cpath%20d%3D%22M2%2011h1v1H2zm2%200h1v1H4zm-2%202h1v1H2zm2%200h1v1H4zm4-4h1v1H8zm2%200h1v1h-1zm-2%202h1v1H8zm2%200h1v1h-1zm2-2h1v1h-1zm0%202h1v1h-1zM8%207h1v1H8zm2%200h1v1h-1zm2%200h1v1h-1zM8%205h1v1H8zm2%200h1v1h-1zm2%200h1v1h-1zm0-2h1v1h-1z%22%3E%3C/path%3E%3C/svg%3E') no-repeat center; } .cf7-icon span.wpcf7-form-control-wrap[data-name="company"]:before { mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-right" viewBox="0 0 16 16"%3E%3Cpath d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"%3E%3C/path%3E%3C/svg%3E') no-repeat center; -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-right" viewBox="0 0 16 16"%3E%3Cpath d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"%3E%3C/path%3E%3C/svg%3E') no-repeat center; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cf7-icon span.wpcf7-form-control-wrap[data-name="product"]:before, .cf7-icon span.wpcf7-form-control-wrap[data-name="your-name"]:before, .cf7-icon span.wpcf7-form-control-wrap[data-name="your-email"]:before, .cf7-icon span.wpcf7-form-control-wrap[data-name="your-tel"]:before, .cf7-icon span.wpcf7-form-control-wrap[data-name="your-message"]:before, .cf7-icon span.wpcf7-form-control-wrap[data-name="your-org"]:before, .cf7-icon span.wpcf7-form-control-wrap[data-name="company"]:before { top: 10px; } } /**** 10.X.X CF7 Minimal ****/ .cf7-minimal-style input[type=text], .cf7-minimal-style input[type=number], .cf7-minimal-style input[type=email], .cf7-minimal-style input[type=tel], .cf7-minimal-style input[type=url], .cf7-minimal-style input[type=password], .cf7-minimal-style input[type=search], .cf7-minimal-style textarea, .cf7-minimal-style .input-text, .cf7-minimal-style .wpcf7-select, .cf7-minimal-style .wpcf7-date { padding: 10px 10px; background-color: var(--background); box-shadow: inset 0 0px 0px rgb(0 0 0 / 13%); border: 0px solid #D0D3D9; transition: 0.5s; background: var(--background); width: 100%; margin: 5px 0 0; box-shadow: none; border-radius: 5px; font-size: 15px; } .cf7-minimal-style input:focus, .cf7-minimal-style textarea:focus { background-color: #ededed } /**** 10.2 Material Design Icons for Contact Details ****/ .md-contact-icons span.material-icons { top: 6px; position: relative; margin-right: 10px; color: black; } .md-contact-icons a, .md-contact-icons a:hover { text-decoration: none!important ; } .md-contact-icons p { margin-bottom: 10px; } /**** 10.3 Larger Letter for Contact Details ****/ span.contact-letter { color: darkgray; font-size: 1.5em; margin-right: 6px; } /**** 10.4 Grid for Opening Hours Contact Details ****/ .opening-hours-table { margin: 15px 0 0 0; } .opening-hours-table td { padding: 0 30px 0 0!important; font-size: 18px!important; } .opening-hours-table th, .opening-hours-table tr, .opening-hours-table td { border-bottom: 0px solid #222!important; } /**** 10.6 Contact Details List SVG ****/ .contact-details--svg a { text-decoration: none; } .contact-details--svg svg { color: var(--detail); margin-right: 8px; position: relative; top: -2px; height: 20px; } /**** 10.7 Gravity Form ****/ .gform-theme--api, .gform-theme--foundation { --gf-form-gap-x: 16px; --gf-form-gap-y: 10px; --gf-field-gap-x: 12px; --gf-field-gap-y: 12px; --gf-label-width: 30%; --gf-label-req-gap: 6px; --gf-form-footer-margin-y-start: 24px; --gf-form-footer-gap: 8px; --gf-field-date-width: 168px; --gf-field-time-width: 110px; --gf-field-list-btns-gap: 8px; --gf-field-list-btns-width: calc(32px + var(--gf-field-list-btns-gap) + var(--gf-field-gap-x)); --gf-field-pg-steps-gap-y: 8px; --gf-field-pg-steps-gap-x: 24px; } .gform_wrapper p.gform_required_legend { display: none; } .gform_wrapper p.sml { margin: 0; } .gform_wrapper input.gform_button { background: var(--button-background) !important; color: var(--button-color) !important; border-color: var(--button-border) !important; } .gform_wrapper input.gform_button:hover { background: var(--button-hover-background) !important; color: var(--button-hover-color) !important; border-color: var(--button-hover-border) !important; } /****************************************/ /****************************************/ /************* END CONTACT *************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /************ 11. START MODALS **********/ /****************************************/ /****************************************/ /**** 11.1 General Modal Rules ****/ /* Weird Rule that stops the screen jumping when modals are opened / closed */ .modal { display: none; position: fixed; z-index: 1100; padding: 0px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); } .modal-content { position: relative; display: flex; flex-direction: column; justify-content: center; margin: auto; padding: 0 0 0 0; width: 100%; max-width: 1200px; grid-template-columns: minmax(0, 1fr); } .slide { display: none; } .image-slide { width: 100%; } .modal-preview { width: 100%; } .dots { display: flex; flex-direction: row; justify-content: space-between; } img.preview, img.modal-preview { opacity: 0.6; } img.active, .preview:hover, .modal-preview:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } /* .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } */ div#Lightbox { z-index: 1000; } /** LIGHTBOX MARKUP **/ .lightbox-content-inner { background: white; padding: 50px 50px 50px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .lightbox-content-inner { padding: 40px 20px 15px; } .lightbox-content { width: calc( 100% - 40px ); } } /**** 11.1.1 Modal Close ****/ .close { color: white; font-size: 35px; font-weight: bold; position: absolute; right: 0px; top: -50px; width: 32px; height: 32px; opacity: 0.3; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } .close:hover { opacity: 1; background: transparent!important; } .close:before, .close:after { position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: white; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } /**** 11.1.1.2 Modal Close Custom ****/ .modal--close { color: black; position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; opacity: 0.3; cursor: pointer; } .modal--close:before, .modal--close:after { position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: black; } .modal--close:before { transform: rotate(45deg); } .modal--close:after { transform: rotate(-45deg); } .modal--close:hover { opacity: 1; background: transparent; } .on-black .modal--close:before, .on-black .modal--close:after { background-color: white; } .on-black .modal--close { color: white; } /**** 11.1.2 Modal Background ****/ /**** 11.2 Fullscreen Modal Rules ****/ .modal-fullscreen { margin: 0!important; padding: 0!important; } .modal-fullscreen .modal-content { max-width: 100%; } .modal-dialog-fullscreen { margin: 0; width: 100vw; max-width: 100vw; } .modal-content--fullwidth { max-width: 100%!important; } .modal-content--fullwidth--content { max-width: 1200px; width: 100%; margin: 0 auto; display: grid; grid-template-rows: 75px minmax(calc(100vh - 175px),auto) 100px; padding: 0 35px; } .modal-header-fullscreen { position: relative; border-color: transparent!important; background: transparent!important; } button.close.modal-fullscreen--close { right: auto; font-size: 50px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 11.3 Subscribe Modal Rules ****/ .modal-dialog.subscribe-modal-dialog { width: 100%; height: 100vh; max-width: 700px; overflow: hidden; display: grid!important; align-content: center; padding: 0; } .close-subscribe-modal-button { top: -40px; opacity: 0.9; } .close-subscribe-modal-button:before, .close-subscribe-modal-button:after { content: none; } .close-subscribe-modal-button span { color: var(--button-background); } button.close.close-subscribe-modal-button { top: 11px; right: 10px; } .subscribe-modal-body { padding: 0; } .popup-subscribe-modal { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); } .popup-subscribe-modal-image { overflow: hidden; position: relative; width: 100%; height: 100%; } .popup-subscribe--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .popup-subscribe-modal-text { padding: 15px 30px; } .popup-subscribe-modal #mc_embed_signup form { padding: 0px 0 0px 0%; } .popup-subscribe-modal #mc_embed_signup input.button { width: 100%!important; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 11.4 Modal Menu Modal Rules ****/ .modal--modalmenu { margin: 0!important; padding: 0!important; } .admin-bar .modal--modalmenu { margin-top: 32px!important; } .modal-dialog--modalmenu { margin: 0; width: 100vw; max-width: 100vw; } .modal-content--modalmenu { max-width: 100%!important; } .modal-content--modalmenu--content { max-width: 1200px; width: 100%; margin: 0 auto; display: grid; grid-template-rows: 75px minmax(calc(100vh - 175px),auto) 100px; padding: 0 35px; } .modal-header--modalmenu { position: relative; border-color: transparent!important; background: transparent!important; } .modal-mobile-menu { text-align: center; } .modal-mobile-menu ul { margin: 0; list-style: none; } .modal-mobile-menu a { font-size: 26px; line-height: 1.6em; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 11.1 Homemade Modal ****/ .homemade-modal { transition: 1s; background: white; position: fixed; z-index: 9999; width: 100vw; height: 100vh; bottom: -100vh; left: 0; padding: 40px 40px 0px; } body:has(.homemade-modal.active) { overflow: hidden!important; } .homemade-modal.active { bottom: 0vh; } .homemade-modal-dialog { display: grid; align-items: center; height: 100%; } .homemade-modal-body { position: relative; max-width: 1200px; margin: 0 auto; } .homemade-modal--close { position: absolute; right: 20px; top: 20px; z-index: 11; cursor: pointer; } .homemade-modal--close svg { color: white; width: 30px; height: 30px; } .homemade-modal--button--open { position: absolute; top: 20px; right: 20px; cursor: pointer; } .homemade-modal--button--open svg { color: white; width: 30px; height: 30px; } .my-slider--with-controller .my-slider--controller .swiper .swiper-wrapper { justify-content: flex-end!important; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .homemade-modal { padding: 40px 20px 0px; } } /**** 11.6 PhotoSwipe ****/ .pswp-custom-caption { position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; color: white; font-size: 16px; background: rgba(0, 0, 0, 0.6); padding: 10px; } .pswp img { max-width: none !important; } .pswp__button--arrow--prev svg, .pswp__button--arrow--next svg { display: none; } .pswp--has_mouse .pswp__button--arrow { display: grid; justify-content: center; align-items: center; opacity: 0.8; } .pswp--has_mouse .pswp__button--arrow:hover { opacity: 1; } .pswp__button--arrow--prev::before { content: ""; display: block; width: 40px; height: 40px; background-color: white; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; opacity: 0.8; } .pswp__button--arrow--next::before { content: ""; display: block; width: 40px; height: 40px; background-color: white; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } /**** 11.7 Fullscreen Video Modal ****/ .modal--video { background-color: rgba(0, 0, 0, 1); } .modal-dialog--video { width: 100vw; margin: 0; max-width: 100vw; overflow: hidden; } .modal-content--video { max-width: 75vw; max-height: 100vh; } .modal-content--video--content { height: 100vh; display: grid; background: black; grid-template-rows: auto minmax(0,1fr); } .modal-header--video { border: none; padding: 0; } .modal-body--video { margin: auto; width: 100%; padding: 0; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .modal-body--video { width: 100%; } .modal-content--video { max-width: 100vw; } } /****************************************/ /****************************************/ /*************** END MODALS ************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /******** 12. START BITS & BOBS *********/ /****************************************/ /****************************************/ /**** 12.1 Table Rules ****/ table th, table tbody td { background:white; } th, tr, td { background: #fff; border-right: none; border-bottom: 1px solid var(--mid-border); vertical-align: middle; } /**** 12.2 Focus States ****/ .added_to_cart:focus, .button:focus, button:focus, input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus, :focus, a:focus { outline:none; } /**** 12.3 Custom Video ****/ .acfpb--video--header { text-align: center; margin: 0px 0 30px; } .custom-video--video-container { position: relative; width: 100%; max-width: 100%; margin: auto; overflow: hidden; border-radius: 20px; } .custom-video--just-omebed-container { overflow: hidden; border-radius: 20px; } .custom-video--overlay { position: absolute; top: -2%!important; left: -2%!important; width: 104%!important; height: 104%!important; display: flex; justify-content: center; align-items: center; background-size: cover!important; background-position: center!important; width: 100%; overflow: hidden; } .custom-video--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .custom-video--overlay iframe { width: 100%; height: 100%; } .custom-video--autoplay { z-index: 1; } .custom-video--click-layer { position: absolute; top: -2%!important; left: -2%!important; width: 104%!important; height: 104%!important; cursor: pointer; z-index: 2; color: var(--detail); display: grid; justify-content: center; align-items: center; } .custom-video--click-layer svg { width: 80px; height: 80px; } /**** 12.4 Display Nones ****/ .hentry.type-post .entry-meta { display: none; } .page-template-template-homepage header.entry-header { display: none; } .site-info { display: none; } /**** 12.5 Remove Visual Composer Link at the Bottom of Page ****/ .edit-link { display: none; } /**** 12.6 Tabs ****/ .vc_tta-panel-title { background: red; } .vc_active .vc_tta-panel-title { background: blue; } .vc_tta-panel-title a { color: white!important; } .wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::after, .wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::before, .wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-controls-icon::after, .wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-controls-icon::before { border-color: white!important; } .wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-body { background-color: white!important; } .wpb-js-composer .vc_tta.vc_tta-style-classic .vc_tta-panel-body, .wpb-js-composer .vc_tta.vc_tta-style-classic .vc_tta-panel-heading { border-width: 0px; } .vc_tta-panel { margin-bottom: 10px; } /**** 12.7 WordPress Search ****/ .widget_search form.search-form label { width: 100%; } form.search-form label { width: calc( 100% - 95px ); } input.search-field { width: 100% } form.search { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-gap: 20px; padding: 0 0 0px; } form.search input[type="search"] { border: 1px solid var(--mid-border); background-color: var(--background); box-shadow: none; border-radius: 3px; } /* 12.7.2 Search Outlined */ form.search--outlined { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-gap: 20px; } .search--outlined-input { border: 1px solid var(--mid-border)!important; background-color: var(--background)!important; box-shadow: none!important; border-radius: 3px; } /* 12.7.2 Search Rounded */ form.search-form.search--rounded { width: 100%; border: 1px solid var(--mid-border); border-radius: 25px; position: relative; } form.search-form.search--rounded label { width: calc(100%); } form.search-form.search--rounded input.search-field { background: transparent; box-shadow: none; padding: 5px 55px 3px 20px; position: relative; } .search--rounded--icon { background: transparent; border: none; position: absolute; top: 0px; right: 20px; width: 25px; border-left: 1px solid var(--mid-border); margin: 8px 0; height: calc(100% - 16px); display: grid; align-items: center; padding: 0 0 0 10px; color: var(--content) !important; box-shadow: none; } .search--rounded--icon:hover { background: transparent!important; border: none!important; border-left: 1px solid var(--mid-border)!important; color: var(--content) !important; } .search--rounded--icon svg { height: 14px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .search--rounded--icon svg { height: 14px; } } /* 12.7.3 Search Underlined */ form.search-form.search--underlined { width: 100%; border-bottom: 1px solid var(--mid-border); border-radius: 0px; position: relative; } form.search-form.search--underlined label { width: calc(100%); } form.search-form.search--underlined input.search-field { background: transparent; box-shadow: none; padding: 5px 55px 3px 0px; position: relative; } .search--underlined--icon { background: transparent; border: none; position: absolute; top: 0px; right: 3px; width: 25px; border-left: 1px solid var(--mid-border); margin: 8px 0; height: calc(100% - 16px); display: grid; align-items: center; padding: 0 0 0 10px; color: var(--content) !important; } .search--underlined--icon:hover { background: transparent!important; border: none!important; border-left: 1px solid var(--mid-border)!important; color: var(--content) !important; } .search--underlined--icon svg { height: 14px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .search--underlined--icon svg { height: 14px; } } /**** 12.8 Download File Icons ****/ .link-icons a[href$=".pdf"]:not(.button) { padding-left: 25px; position: relative; text-decoration: none; } .link-icons a[href$=".pdf"]:not(.button):before { margin-left: 24px; content: ''; display: inline-block; width: 20px; height: 20px; position: absolute; top: 0; left: -26px; background-color: var(--detail); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } .link-icons a[href$=".docx"]:not(.button) { padding-left: 25px; position: relative; text-decoration: none; } .link-icons a[href$=".docx"]:not(.button):before { margin-left: 24px; content: ''; display: inline-block; width: 20px; height: 20px; position: absolute; top: 0; left: -26px; background-color: var(--detail); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } .link-icons a[href$=".pptx"]:not(.button) { padding-left: 25px; position: relative; text-decoration: none; } .link-icons a[href$=".pptx"]:not(.button):before { margin-left: 24px; content: ''; display: inline-block; width: 20px; height: 20px; position: absolute; top: 0; left: -26px; background-color: var(--detail); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } .link-icons a[href$=".xlsx"]:not(.button) { padding-left: 25px; position: relative; text-decoration: none; } .link-icons a[href$=".xlsx"]:not(.button):before { margin-left: 24px; content: ''; display: inline-block; width: 20px; height: 20px; position: absolute; top: 0; left: -26px; background-color: var(--detail); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } /**** 12.9 Cookies Grid ****/ .cookies--grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 2px; background-color: transparent; border-radius: 15px; overflow: clip; padding: 20px 0; } span.cookies--number { font-size: 1.2em; color: var(--detail); } .cookies--line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); grid-gap: 2px; } .cookies--title { font-weight: 700; background-color: var(--background-subtle); padding: 10px 10px; } .cookies--mobile-subtitle { font-weight: 800; } .cookies--item { background-color: var(--background-subtle); padding: 10px 15px; font-size: 14px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cookies--line { grid-template-columns: minmax(0, 1fr); border-radius: 10px; overflow: clip; } .cookies--grid { grid-gap: 20px; } } /**** 12.10 DELETED ****/ /**** 12.11 MailChimp ****/ #mc_embed_signup .mc-field-group { width: 100%!important; } div#mc_embed_signup input#mce-EMAIL { width: 100%!important; } div#mc_embed_signup label { margin-bottom: 0px!important; } div#mc_embed_signup .mc-field-group.size1of2 { width: 100%!important; } #mc_embed_signup input { border: 1px solid #ABB0B2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 0px; } #mc_embed_signup .mc-field-group input { border-radius: 0px!important; } #mc_embed_signup input.button { width: auto!important; height: auto!important; } #mc_embed_signup input.button { padding: 5px 20px!important; display: block; margin: 0 0 10px 0; border-radius: 0px; background: var(--button-background) ; border: 1px solid var(--button-border) ; color: var(--button-color) ; } #mc_embed_signup input.button:hover { background: var(--button-hover-background) ; border: 1px solid var(--button-hover-border) ; color: var(--button-hover-color) ; } #mc_embed_signup form { text-align: left!important; padding: 10px 0 10px 0; } main#main div#mc_embed_signup input#mce-EMAIL { width: calc( 100% - 108px); } #mc_embed_signup input.email { -webkit-border-radius: 0px!important; -moz-border-radius: 0px!important; border-radius: 0px!important; height: 44px!important; padding: 0px 10px; } /* MAILCHIMP INLINE */ .inline-mailchimp form#mc-embedded-subscribe-form { padding: 0!important; } .inline-mailchimp div#mc_embed_signup_scroll { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .inline-mailchimp input#mce-EMAIL, .inline-mailchimp input#mc-embedded-subscribe { width: calc( 100% )!important; margin: 0!important; } /*** MAILCHIMP INLINE TWO ****/ .mailchimp-inline-two-row { background: #F5F7F8; display: grid; /* grid-template-columns: minmax(0,3fr) minmax(0,2fr); */ /* grid-gap: 30px; */ /* border: 0px solid #016959; */ grid-template-columns: minmax(0, 1fr); padding: 15px 20px 15px 20px; margin: 40px 0 20px; background: var(--footer-background); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 1); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 1); -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 1); } .sc-mailchimp-inline .inline-mailchimp { width: min(800px, 100%); max-width: 800px; margin-inline: auto; } .mailchimp-inline-two-left { display: grid; grid-template-columns: auto minmax(0,1fr); grid-gap: 40px; align-items: center; } .mailchimp-inline--imagearea { position: relative; } .mailchimp-inline-two-left img { position: relative; top: 0px; border: 0px solid #016959; width: 120px; height: 120px; transform: rotate(0deg); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 1); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 1); -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 1); } .mailchimp-inline-two-title { margin-bottom: 0px; /*color: white;*/ font-size: 24px; font-weight: 300; } .mailchimp-inline-two-text { margin-bottom: 0px; /* color: white;*/ font-size: 20px; font-weight: 300; line-height: 1.2; padding: 0; } .mailchimp-inline-two-row form#mc-embedded-subscribe-form { margin-bottom: 0; } .mailchimp-inline-two-row #mc_embed_signup input.button { margin: 0 0 0px 0; } .mailchimp-inline-two-row input#mce-EMAIL { padding: 25px!important; border: none!important; background: white!important; } .mailchimp-inline-two-row #mc_embed_signup input.button { padding: 8px 20px!important; border: 1px solid #fff; background: var(--button-background); margin: 0!important; font-weight: 600; } .mailchimp-inline-two-row footer#colophon .button:hover { border: 1px solid #016959!important; } /* .mailchimp-inline-two-row #mc_embed_signup input.button:hover { border: 1px solid #016959!important; } */ .mailchimp-inline-two-container { container-type: inline-size; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @container (max-width: 700px) { /* MOBILE RULES GO HERE */ .mailchimp-inline-two-row { grid-template-columns: minmax(0,1fr); margin-top: 25px; } .mailchimp-inline-two-left { grid-template-columns: minmax(0,1fr); grid-gap: 20px; } .mailchimp-inline-two-left img { top: -40px; position: relative; margin-bottom: -40px; } } /**** 12.12 Scroll to Top ****/ .scroll-to-top { width: fit-content; height: 80px; position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%); pointer-events: none; } .scroll-to-top--item { margin: 0 auto; position: relative; cursor: pointer; display: none; width: fit-content; pointer-events: initial; z-index: 11; } .scroll-to-top--item svg { fill: #f2f2f2; width: 75px; height: 50px; transition: 0.5s; } .scroll-to-top--item:hover svg { width: 80px; height: 55px; } /**** 12.13 Random Crap That Shouldn't Have Been in Storefront Anyway ****/ .page-template-template-homepage:not(.has-post-thumbnail) .site-main { padding-top: 0em; } a:focus, button:focus, input:focus, textarea:focus { outline: 0px solid #96588a; } /**** 12.14 Page Minimum Heigh Rule ****/ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ #content, #primary { /*min-height: calc(100vh - 250px);*/ } .page-template-template-fullwidth-absolute-slider #content, .page-template-template-fullwidth-absolute-slider #primary { min-height: calc(100vh - 250px - 220px ); } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 12.15 DELETED ****/ /**** 12.16 Service Card ****/ .service-block-background { padding-top: 50%; background-position: center!important; background-size: cover!important; } .service-block-text { background: #F1F3F5; padding: 18px 20px 3px; transition: 0.5s; } .service-block a:hover .service-block-text { background: #e6e9ed; } .service-block a:hover, .service-block a { text-decoration: none!important; } .service-block { margin-bottom: 35px } .service-block-title { font-size: 28px; } /**** 12.16.2 Tall / Small Service Cards ****/ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .servicecardtall a { display: grid; grid-template-rows: minmax(0,1fr) auto; min-height: 835px; } .servicecardsmall a { display: grid; grid-template-rows: minmax(0,1fr) auto; min-height: 400px; } .servicecardsmall .service-block-background, .servicecardtall .service-block-background { padding-top: 0%; } .servicecardsmall .service-block-text, .servicecardtall .service-block-text { min-height: 198px; } } /**** 12.17 Smooth Scrolling ****/ /* html { scroll-behavior: smooth; } */ /**** 12.18 Irregular and Regular Siblings Blocks ****/ .regular-irregular-grid { display: grid!important; grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .regular-irregular-grid .vc_col-sm-6 { width: 100%; } .regular-irregular-grid .wpb_wrapper { max-width: 100%; /* min-width: 580px;*/ width: 630px; padding: 25px 25px 5px; } .regular-irregular-grid .vc_col-sm-6:first-of-type .vc_column-inner { justify-content: end; display: grid; z-index: auto; } .regular-irregular-grid .vc_col-sm-6:first-of-type { justify-content: end; } .regular-irregular-grid .vc_column-inner::after, .regular-irregular-grid .vc_column-inner::before { content: none; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (min-width: 768px) and (max-width: 1220px) { /* INTERMEDIATE RULES GO HERE */ .regular-irregular-grid .wpb_wrapper { min-width: 45vw; width: 100%; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .regular-irregular-grid { grid-template-columns: minmax(0,1fr); } .regular-irregular-grid .wpb_wrapper { min-width: 100%; width: 100%; padding: 25px 25px 5px; } .regular-irregular-grid .vc_col-sm-6:first-of-type .vc_column-inner { justify-content: start; } } /** Regular Irregular **/ .regular-irregular-snippet { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); background: #F7FBF5; position: relative; } .regular-irregular-snippet:after { content:""; background: var(--background-subtle); width: 100%; height: 50px; position: absolute; bottom: 0; z-index: 1; } .regular-irregular-snippet * { background-position: center; background-size: cover; background-repeat: no-repeat; } .regular-irregular-snippet-text-area { min-width: 600px; padding: 25px; grid-auto-flow: column; justify-content: end; width: 400px; z-index: 3; margin: 0 30px; } .regular-irregular-snippet-left, .regular-irregular-snippet-right { display: grid; align-items: center; grid-auto-flow: column; min-height: 500px; background: white; background-size: cover; background-position: center; } .regular-irregular-snippet-left { justify-content: end; box-shadow: 15px 15px 30px 0 rgb(19 24 67 / 10%); z-index: 2; width: 100%; overflow: hidden; position: relative; } .regular-irregular-snippet--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .regular-irregular-snippet-right { justify-content: start; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (min-width: 768px) and (max-width: 1220px) { /* INTERMEDIATE RULES GO HERE */ .regular-irregular-snippet-text-area { min-width: 50vw; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .regular-irregular-snippet { grid-template-columns: minmax(0,1fr); } .regular-irregular-snippet-right { min-height: fit-content; } .regular-irregular-snippet-left { min-height: auto; padding-top: 60%; } .regular-irregular-snippet-text-area { min-width: 100%; margin: 0 0px; width: 100%; padding: 25px 20px 15px; } .regular-irregular-snippet:after { display: none; } } /** Custom Regular Irregular Grid **/ .custom-regular-irregular-grid { display: grid!important; grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .custom-regular-irregular-grid .vc_col-sm-6 { width: 100%; } .custom-regular-irregular-grid > .wpb_column > .vc_column-inner > .wpb_wrapper { max-width: 100%; padding: 50px 50px 5px 50px; } .custom-regular-irregular-grid > .wpb_column.vc_col-sm-6:nth-of-type(2) > .vc_column-inner > .wpb_wrapper { padding: 0px 0 5px 50px; } .custom-regular-irregular-grid .vc_col-sm-6:first-of-type .vc_column-inner { justify-content: end; display: grid; z-index: auto; background: white; margin-top: 0; padding-top: 0; box-shadow: 15px 15px 30px 0 rgb(19 24 67 / 10%); } .custom-regular-irregular-grid .vc_col-sm-6:first-of-type { justify-content: end; padding: 50px 50px 50px 0; background: url(/wp-content/uploads/2022/04/texture-demo.png); background-size: cover; background-position: center; background-color: #F8F9FB; margin: 0px; } .custom-regular-irregular-grid .vc_col-sm-6:nth-of-type(2) { position: relative; top: 50px; background: white; z-index: 1; } .custom-regular-irregular-grid .vc_column-inner::after, .custom-regular-irregular-grid .vc_column-inner::before { content: none; } .custom-regular-irregular-grid .vc_col-has-fill { box-shadow: none; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (min-width: 1360px) { /* Custom RULES GO HERE */ .custom-regular-irregular-grid > .wpb_column > .vc_column-inner > .wpb_wrapper { width: 630px; } } @media screen and (min-width: 768px) and (max-width: 1220px) { /* INTERMEDIATE RULES GO HERE */ .custom-regular-irregular-grid .wpb_wrapper { min-width: calc( 50vw - 60px ); width: 100%; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .custom-regular-irregular-grid { grid-template-columns: minmax(0,1fr); display: flex!important; } .custom-regular-irregular-grid .wpb_wrapper { min-width: 100%; width: 100%; padding: 25px 25px 5px; } .custom-regular-irregular-grid .vc_col-sm-6:first-of-type .vc_column-inner { justify-content: start; display: flex; } .custom-regular-irregular-grid > .wpb_column.vc_col-sm-6:nth-of-type(2) > .vc_column-inner > .wpb_wrapper { padding: 40px 20px 5px 20px;; } .custom-regular-irregular-grid > .wpb_column > .vc_column-inner > .wpb_wrapper { padding: 0px 20px 0px 0px; } .custom-regular-irregular-grid .vc_col-sm-6:nth-of-type(2) { top: 0px; } } /**** 12.19 OOOOOO ****/ /**** 12.20 Accordion ****/ .openingbox { display:flex; flex-flow: column; } .openingbox.minamalist-style { margin-bottom: 25px; } .openingbox.minamalist-style button.custom-accordion { background: transparent!important; text-align: left!important; border: 0px solid black!important; border-bottom: 1px solid #6d6d6d!important; color: #6d6d6d!important; padding: 5px 0px 5px!important; } .openingbox.minamalist-style arrow { border-color: #6d6d6d; } .product-single--faqs-accordion { display: grid; grid-template-columns: minmax(0,1fr); grid-gap: 10px; align-items: start; } .accordion-header { margin-bottom: 0; font-size: 22px; color: #222; position: relative; cursor: pointer; } .accordion-item { border: 1px solid #cfd6da!important; padding: 0px 25px 0px; margin: 0 0 15px; border-radius: 5px !important; } .accordion-body { margin: 15px 0 0; } span.feritech--plus { position: absolute; transition: 0.5s; display: block; right: 0; background: var(--detail); border-radius: 50%; width: 32px; height: 32px; color: white; fill: white; top: -3px; text-align: center; top: 0; } span.feritech--plus svg { position: relative; top: -6px; } .accordion-header[aria-expanded=true] svg.bi.bi-plus-lg { display:none; } .accordion-header svg.bi.bi-dash-lg { display:none; position: relative; top: 4px; left: 4px; } .accordion-header[aria-expanded=true] svg.bi.bi-dash-lg { display:block; } /* button.accordion {order:2;} .panel{order:1;} */ /* button.accordion::before { content: "\f067"; font-family: "Font Awesome 5 Free"; font-weight: 900; background: black; color: white; border-radius: 50%; padding: 7px 7px 7px 8px; margin-right: 9px; } button.accordion.active::before { content:"\f068"; } */ /* button.accordion::after { content:" More"; font-weight: 900; } button.accordion.active::after { content:" Less"; font-weight: 900; }*/ .single-products .panel { padding: 0 0px; display: none; background-color: transparent; overflow: hidden; } .single-products .custom-accordion { color: #444; cursor: pointer; padding: 10px 0px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; background-color: transparent; } arrow { border: solid black; border-width: 0 1px 1px 0; display: inline-block; padding: 5px; } .custom-accordion.active .down { transform: rotate(-135deg) 2s; -webkit-transform: rotate(-135deg); } .down { transform: rotate(45deg) 2s; -webkit-transform: rotate(45deg); transition: all 0.8s; } arrow.down { position: relative; margin: 0px 10px; top: -3px; } .custom-accordion.active arrow.down { position: relative; top: 4px; } /**** 12.21 Transparent Background Layer After Background Element ****/ .fadebackground { position: relative!important; overflow: hidden; } .fadebackground:after { content: " "; background: red; background: rgba(0, 0, 0, 0.2); background: rgba(255, 255, 255, 0.2); background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); width: 100%; height: 100%; display: block!important; position: absolute; z-index: 3; left: 0; top: 0; pointer-events: none; } .fadebackground .vc_column-inner > * { z-index: 5; position: relative; } .fadebackground .vc_column-inner .wpb_wrapper { z-index: 5; position: relative; } /**** 12.22 Circles ****/ .circle h2 { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); max-width: 200px; margin: 0 auto; font-size: 32px; line-height: 44px; } .circle-outer { display: inline-block; position: relative; width: 100%; margin-bottom: 30px!important; } .circle-upper { margin-top: 100%; } .circle { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 4px solid red; border-radius: 50%; text-align: center; background: radial-gradient(#BEDA24 , #466D2E); border: 4px solid #6B8F2B; } .circle:hover { background: transparent; } /* Circle Card */ .circle-card-outer { display: inline-block; position: relative; width: 100%; margin-bottom: 30px!important; } .circle-card-upper { margin-top: 100%; } .circle-card { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; text-align: center; } .circle-card-text { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); } .circle-card-title { color: white; font-size: 30px; margin-bottom: -5px; } .circle-card-desc { color: white; font-size: 20px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 12.22 Parralax ****/ .parralax-full-width { position: relative; min-height: 100vh; } .parralax { /* position: relative!important; background-attachment: fixed!important; background-position: left!important; background-repeat: no-repeat!important; background-size: cover!important; transform: translateZ(-0.1px) scale(1.2)!important;*/ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-attachment: fixed; z-index: -3; background-position: center!important; background-size: contain!important; } .srcset--parralax { will-change: transform; object-fit: cover; object-position: 50% 50%; } .object--parralax { will-change: transform; transform-origin: center center; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 12.23 Position Sticky ****/ .site { overflow-x: initial; } .sticky-container { max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px; } .sticky-container * { padding:10px;background:#aaa; border:dashed 5px #000; } .sticky-container * + * { margin-top:20px; } .sticky-header { height:50px; background:#aaa; border-color:red; } .sticky-header { position:-webkit-sticky; position:sticky; top:0; } .sidebar-internal-wrap { position:-webkit-sticky; position:sticky; top:30px; } .sticky-content .wpb_wrapper { position:-webkit-sticky; position:sticky; top:30px; } /**** 12.24 Vimeo Background Video ****/ .vimeo-background-outer, .vimeo-background-overlay, .vimeo-text-background, .vimeo-text-positioning { /*min-height: 400px;*/ position: relative; } .vimeo-background-outer { background-size: cover!important; background-position: center!important; } .vimeo-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; } .vimeo-wrapper iframe { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .vimeo-background-overlay { z-index: 1; } .vimeo-text-background { background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); width: 100%; height: 100%; } .vimeo-text-positioning { display: grid; align-items: normal; align-items: center; align-items: end; } .vimeo-text-inner { max-width: 800px; padding: 20px; } .vimeo-text-inner h1, .vimeo-text-inner h2, .vimeo-text-inner h3, .vimeo-text-inner h4, .vimeo-text-inner p, .vimeo-text-inner li { color: white!important; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 12.25 Hide Google Recaptcha ****/ .grecaptcha-badge { display: none!important; } /**** 12.26 Emergency Message ****/ .header-message-wrapper { padding: 20px; background: #F7C808; text-align: center; } .header-message-wrapper .header-wrapper-content { font-size: 20px; font-weight: 700; color: black; max-width: 1000px; margin: 0 auto; width: 100%; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 12.27 Two Col Text ****/ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .two-col-text { -webkit-column-count: 2!important; -moz-column-count: 2!important; column-count: 2!important; -webkit-column-gap: 30px!important; -moz-column-gap: 30px!important; column-gap: 30px!important; } } /**** 12.28 Social Share Icons ****/ div#share-buttons { display: flex; flex-wrap: wrap; grid-gap: 10px; } div#share-buttons a { background: #656564; padding: 6px; border-radius: 50%; width: 36px; height: 36px; color: white; transition: 0.5s; display: grid; align-items: center; justify-content: center; } div#share-buttons a.whatsapp-share.share-button { background: #11B518; } div#share-buttons a.pinterest-share.share-button { background: #E00019; } div#share-buttons a.twitter-share.share-button { background: #1DA1F2; } div#share-buttons a.linkedin-share.share-button { background: #0077B5; } div#share-buttons a.facebook-share.share-button { background: #4267B2; } div#share-buttons a:hover { background: black!important; } /** SOCIAL LINKS **/ .social-links { display: flex; flex-wrap: wrap; gap: 10px; /* padding: 15px 0 0; */ } .social-links a { margin: 0px; padding: 11px 11px; border-radius: 50%; color: #656564; transition: 0.5s; display: block; } a.social-links--link svg { width: 22px; height: 22px; display: block; } .social-links a.social-links--link:hover { color: black; } .social-links a.social-links--youtube:hover { color: #FF0033; } .social-links a.social-links--whatsapp:hover { color: #11B518; } .social-links a.social-links--pinterest:hover { color: #E00019; } .social-links a.social-links--twitter:hover { color: #1DA1F2; } .social-links a.social-links--linkedin:hover { color: #0077B5; } .social-links a.social-links--instagram:hover { color: #F502C5; } .social-links a.social-links--facebook:hover { color: #4267B2; } .social-links a.social-links--bluesky:hover { color: #0085ff; } /**** 12.29 Lightbox Gallery ****/ /*Pinterest Gallery*/ .gallery--pinterest--grid { position: relative; width: 100%; --cols: 1; --cols-md: 2; --cols-lg: 4; --gap: 24px; } .gallery--pinterest--item { position: absolute; left: 0; top: 0; width: 100%; text-decoration: none; outline: 0; transform: translate3d(0,0,0); will-change: transform, width, height; transition: transform 180ms ease, width 180ms ease, height 180ms ease; } .js-pinterest-item { position: absolute; left: 0; top: 0; width: 100%; transform: translate3d(0, 0, 0); will-change: transform, width, height; transition: transform 180ms ease, width 180ms ease, height 180ms ease; box-sizing: border-box; } .gallery--pinterest--grid { position: relative; width: 100%; --cols: 1; --cols-md: 2; --cols-lg: 4; --gap: 24px; } .gallery--pinterest--item img { display: block; width: 100%; height: auto; border: 0; } .js-pinterest-item { box-sizing: border-box; } .gallery--pinterest-skeleton { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin: 0 auto; width: 100%; z-index: 1; height: 100%; background: var(--background); } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .gallery--pinterest-skeleton { grid-template-columns: repeat(1, minmax(0,1fr)); } } .gallery--pinterest--skeleton-card { background: #eee; border-radius: 0px; height: 100%; animation: gallery--skeleton-pulse 1.2s ease-in-out infinite alternate; } @keyframes gallery--skeleton-pulse { from { background-color: #e0e0e0; } to { background-color: #f5f5f5; } } .js-pinterest-grid.gallery--pinterest-is-ready + .gallery--pinterest-skeleton, .gallery--pinterest-skeleton.gallery--pinterest--is-hidden { display: none !important; } .gallery--pinterest--grid { grid-area: stack; opacity: 0; } .gallery--pinterest--grid.gallery--pinterest-is-ready { opacity: 1; } .gallery--pinterest { display: grid; grid-template-areas: "stack"; } .gallery--pinterest-skeleton { grid-area: stack; } /* Justified Gallery*/ .gallery--justified--grid { position: relative; width: 100%; --row-h: 180px; --row-h-md: 200px; --row-h-lg: 220px; --gap: 12px; --justify-last: 0; } .gallery--justified--item { position: absolute; left: 0; top: 0; width: 100%; transform: translate3d(0,0,0); will-change: transform, width, height; transition: transform 160ms ease, width 160ms ease, height 160ms ease; text-decoration: none; outline: 0; } .gallery--justified--item img { display: block; width: 100%; height: auto; border: 0; } /*END masonry Gallery*/ .square-style-grid { display: grid; grid-gap: 20px; grid-template-columns: repeat(3, minmax(0,1fr));; } .gallery-lightbox .thumbnail { max-width: 100%; width: 100%; } .gallery-lightbox::before, .gallery-lightbox::after { display: none; } .square-grid-thumbs { background-size: cover; background-position: center; padding-top: 100%; width: 100%; aspect-ratio: 1; overflow: hidden; position: relative; } .square-grid--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .square-style-grid a.image-link { width: 100%; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .square-style-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /**** 12.30 Inline CTA ****/ .call-to-action-inline h2, .call-to-action-inline p { margin-bottom: 0px!important; } .call-to-action-inline { background: #F7F7F7; padding: 15px 15px; display: grid; grid-template-columns: minmax(0,1fr) 160px; grid-gap: 20px; align-items: center; } .cta-button { width: 100%; text-align: center; } .call-to-action-inline .svg-inline--fa { vertical-align: -0.25em; } .call-to-action-inline .button svg { position: relative; left: 0px; transition: 0.5s; } .call-to-action-inline .button:hover svg { left: 5px; } .call-to-action-inline-container { container-type: inline-size; } @container (max-width: 700px) { /* MOBILE RULES GO HERE */ .call-to-action-inline { grid-template-columns: minmax(0,1fr); } } /**** 12.31 Line Behind the Title ****/ h2.line-background { position: relative; z-index: 1; text-align: center; margin-top: 15px; } h2.line-background:before { border-top: 2px solid #dfdfdf; content: ""; margin: 0 auto; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; width: 95%; z-index: -1; } h2.line-background span { background: white; padding: 0 9px; } h2.double:before { border-top: none; } h2.double:after { border-bottom: 5px dotted #9aa2a7; content: ""; margin: 0 auto; position: absolute; top: 45%; left: 0; right: 0; width: 100%; z-index: -1; } /**** 12.32 Inline Menu Inside Template ****/ .middle-menu-inner .middle-menu .menu { display: none; } .middle-menu-inner .middle-menu .menu.is-open { display: block; } .middle-menu { background: var(--background-subtle); } .middle-menu .menu { padding: 0!important; margin: 0!important; text-align: center; font-size: 0!important; } .middle-menu .menu-item { list-style: none; display: inline-block; font-size: 0px; } .middle-menu .menu-item a { padding: 15px 30px; text-align: center; color: var(--detail); font-size: 16px; display: inline-block; transition: 0.5s; line-height: 1.2em; } .middle-menu .menu-item a:hover, .middle-menu .current_page_item a { text-decoration: none; background: var(--detail); color: white!important; } p.middle-menu-dropdown-mobile-text { padding: 10px 10px 10px 45px; margin-bottom: 0; position: relative; } p.middle-menu-dropdown-mobile-text:before { content: ""; display: inline-block; width: 24px; height: 24px; background-color: var(--content); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; position: absolute; top: 50%; transform: translateY(-50%); left: 15px; top: 21px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ p.middle-menu-dropdown-mobile-text { display: none; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .middle-menu .menu { display: none; animation: fadeIn .5s; margin-top: 0; } .middle-menu p:hover .menu { display: block; } .middle-menu .menu.block { display: block; } .middle-menu .menu-item { display: block; text-align: left; } .middle-menu .menu-item a { padding: 20px 20px; text-align: left; display: block; width: 100%; } } /**** Wrapper addition ***/ .middle-menu .middle-menu-reveal { padding: 0!important; margin: 0!important; text-align: center; font-size: 0!important; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .middle-menu .middle-menu-reveal { display: none; animation: fadeIn .5s; margin-top: 0; } .middle-menu p:hover .middle-menu-reveal { display: block; } .middle-menu .middle-menu-reveal.block { display: block; } } /**** 12.33 Info Banner VC BLock ****/ /**** 12.34 Process Card VC BLock ****/ /**** 12.35 Change Image On Hover ****/ /**** 12.36 Carosel Anything ****/ /**** 12.37 Back Arrow ****/ .backarrow { background: var(--background-subtle); padding: 10px 15px 10px 50px; } .backarrow a { position: relative; text-decoration: none; color: var(--content); } .backarrow a:before { content: ''; display: inline-block; width: 20px; height: 20px; position: absolute; top: 0; left: -36px; background-color: currentColor; /* Icon color */ -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .backarrow { margin: 0px 0px 0px; } } /**** 12.38 Styled ul Tick List ****/ ul.tick-list { list-style: none; margin-left: 30px; } ul.tick-list li { position: relative; } ul.tick-list li::before { content: ''; display: inline-block; width: 28px; height: 28px; position: absolute; top: 0; left: -40px; background-color: var(--detail); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } /* 12.38.2 Custom PNG Tick List */ ul.custom-png-tick-list { list-style: none; } ul.custom-png-tick-list li { position: relative; } ul.custom-png-tick-list li:before { background: url(/wp-content/uploads/2019/06/new-google-favicon-512.png); background-size: contain; background-repeat: no-repeat; width: 18px; height: 18px; margin: 0 10px 0 -6px; position: absolute; content: " "; left: -20px; top: 3px; } /* 12.38.3 Material Design Tick List */ ul.md-tick-list { list-style: none; margin-left: 40px; } ul.md-tick-list li { position: relative; } ul.md-tick-list li::before { content: ''; display: inline-block; width: 28px; height: 28px; position: absolute; top: 0; left: -40px; background-color: var(--detail); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } /* 12.38.4 Boostrap Icon Tick List */ ul.ul-list-check2 { list-style: none; margin: 0 0 10px 35px; } ul.ul-list-check2 li { position: relative; } ul.ul-list-check2 li::before { content: ''; display: inline-block; width: 28px; height: 28px; position: absolute; top: 0; left: -40px; background-color: var(--detail); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } /**** 12.39 DELETED ****/ /**** 12.40 DELETED ****/ /**** 12.41 DELETED ****/ /**** 12.42 Wysiwyg Partially Overlaid Image ****/ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .list-item-with-custom-image .floating-wider { width: calc( 100% + 200px )!important; left: -200px; } .white-background { background: white; padding: 20px 20px 1px; } .list-item-with-custom-image .col-6.floating-wider { -ms-flex: 0 0 calc( 50% + 200px ); flex: 0 0 calc( 50% + 200px ); max-width: calc( 50% + 200px ); } .floating-wider-pull-right { width: calc( 100% + 150px ); left: -150px; position: relative; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 12.43 List item with custom image ****/ .list-item-with-custom-image { padding: 5px 0px; grid-gap: 15px; grid-template-columns: 50px minmax(0,1fr); display: grid; } .list-item-with-custom-image .right-item { font-size: 20px; } /**** 12.44 Strapline ****/ .strapline-inner { float: right; padding: 5px 0; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .strapline { background: var(--background-subtle); text-align: center; } .strapline-inner { text-align: center; float: none; } } /**** 12.45 Animated Section ****/ .animated-section-top { background-position: center!important; background-size: cover!important; background-repeat: no-repeat!important; padding-top: 0%; position: relative; } .animated-title-block { position: absolute; bottom: -135px; width: 100%; padding: 0 50px; z-index: 5; max-width: 1200px; } .animated-title { -vendor-animation-duration: 3s; -vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite; animation-duration: 2s!important; font-size: 100px; margin-bottom: 0!important; line-height: 0.6em; text-shadow: 1px 1px 5px white; font-weight: 800; } .animated-text-block { background: transparent; padding-top: 50px; padding: 100px 50px 100px; font-size: 30px; max-width: 700px; } .top-animated-title { text-align: left; } .bottom-animated-title { text-align: right; } .animated-title-block-with-top-title { position: absolute; top: -10px; width: 100%; padding: 0 50px; max-width: 1200px; } .animated-section-with-top-title { background: lightgray; margin-top: 40px; position: relative; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .animated-title { font-size: 40px; line-height: 1em; } .animated-title-block { bottom: -80px; } .animated-section-with-top-title { margin-top: 123px; } .animated-text-block { padding: 30px 20px 30px; font-size: 24px; } } /**** 12.46 Zoom Card ****/ /**** 12.47 Video Behind Text ****/ .video-behind-title-block { position: relative; width: 100%; height: 290px; overflow: hidden; margin: 60px 50px; } .video-behind-title-block video { position: absolute; top: 0; left: 0; width: 100%; height: 290px; -o-object-fit: cover; object-fit: cover; } .video-behind-title { font-family: "Roboto", Sans-serif; position: absolute; top: 0; left: 0; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; width: 100%; height: 100%; font-weight: 900; font-size: 8vw; animation: anim-text-color 16s infinite linear; text-transform: uppercase; background-color: #ffffff; mix-blend-mode: screen; line-height: 1em; text-align: left; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .video-behind-title-block { height: 185px; margin: 0px 20px; } .video-behind-title { font-size: 15vw; } } /**** 12.48 DELETED ****/ /**** 12.49.1 Team Member Card ****/ .team-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-gap: 20px; } .team-cards a, .team-cards a:hover { text-decoration: none!important; } .team-member-card { display: grid; grid-template-columns: 150px minmax(0,1fr); grid-gap: 20px; background: #F7F7F7; padding: 20px; margin-bottom: 20px; } .team-member-card-image { padding-top: 100%; background-position: center!important; background-size: cover!important; border-radius: 50%; max-height: 0; } .team-image { padding-top: 120%; background-position: center!important; background-size: cover!important; } .team-text { padding: 20px 0; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .team-member-card { grid-template-columns: minmax(0,1fr); } .team-cards { grid-template-columns: minmax(0,1fr); } } /**** 12.49.2 Team Member Card Two ****/ .team-member-card-two { display: grid; grid-template-columns: 110px minmax(0,1fr); grid-gap: 15px; border: 1px solid #F4F4F4; padding: 15px 15px; } .team-member-card-two-image { padding-top: 100%; background-position: center!important; background-size: cover!important; } .team-member-card-two-name { font-size: 22px; } .team-member-card-two-name a, .team-member-card-two-text-area a, .team-member-card-two-name a:hover, .team-member-card-two-text-area a:hover { color: black!important; } .team-member-card-two-job-title { color: #EC6C24; font-size: 18px; font-weight: 500; margin: 0px 0 5px; } .team-member-card-two-text-area p { margin-bottom: 0!important; } .team-member-card-two-contact-details p { font-size: 14px; margin-bottom: 7px; } .team-member-card-two a { text-decoration: none!important; } .team-member-card-two-contact-details a { border-bottom: 1px solid #CD171E; } /**** 12.50 Floating Social Share ****/ /** Floating social share **/ .floating-social-share-outer { position: fixed; right: 20px; top: 40vh; background: white; padding: 0px; border: 1px solid black; z-index: 15; } .floating-social-share div#share-buttons a { background: white!important; margin-right: 0px; color: black!important; padding: 9px; border-radius: 0%; width: 50px; height: 50px; text-align: center; display: inline-block; color: white; margin-bottom: 0px; transition: 0.5s; margin: 0px; } .floating-social-share div#share-buttons a:hover { background: black!important; color: #E41A73!important; } .floating-social-share span.material-icons { font-size: 28px; } .floating-social-share div#share-buttons { max-width: 50px; margin: 0px auto; border-top: 1px solid black; } .floating-social-share button.accordion { padding: 10px 10px 5px; margin-bottom: 0px; background: white; color: black!important; border: 1px solid white!important; } .floating-social-share button.accordion:hover { background: black!important; color: #E41A73!important; border: 1px solid black!important; } .floating-social-share-outer .svg-inline--fa { font-size: 20px; margin-top: 6px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .floating-social-share-outer { top: auto; bottom: 20px; } } /**** 12.51 Search Form ****/ .vc_wp_search input.search-submit { border: 0!important; clip: auto!important; -webkit-clip-path: initial!important; clip-path: initial!important; height: auto!important; position: absolute!important; width: auto!important; word-wrap: normal !important; top: 1px!important; right: 0!important; left: auto!important; padding: 10px 20px!important; } /**** 12.52 CPT Blocks ****/ /* 12.52.1 CPT Block One */ /**** 12.52.04 TSTM004: Preset Testimonials Four ****/ .tstm004 { width: 100%; overflow: hidden; position: relative; /* background: rgba(0,0,0,0.3); */ isolation: isolate; } /* .tstm004:before { z-index: -2; position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); } */ /* .tstm004:after { z-index: -1; position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(#616060 1px, transparent 2px); background-size: 7px 7px; opacity: 0.5; } */ .tstm004 .col-full { z-index: 3; position: relative; } .tstm004--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; z-index: -3; } .tstm004-card { display: grid; height: 100%; align-items: center; align-content: center; grid-gap: 20px; text-align: center; max-width: 700px; margin: 0 auto; padding: 0px 0 40px; /* min-height: 60vh;*/ position: relative; } .tstm004--image { max-width: min(200px, 50%); margin: 0 auto; position: relative; aspect-ratio: 1; } .tstm004-card--srcset { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; border-radius: 50%; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 12.53 Display Blocks ****/ /* 12.53.1 Display Block One */ /* 12.53.2 Display Block Two */ /* 12.53.3 Display Block Three */ /* 12.53.4 Display Block Four */ /* 12.53.5 Display Block Five */ /* 12.53.6 Display Block Six */ /* 12.53.7 Display Block Seven */ /* 12.53.8 Display Block Eight */ /* 12.53.9 Display Block Nine */ /* 12.53.10 Display Block Ten */ /* 12.53.11 Display Block Eleven */ /* 12.53.12 Display Block Twelve */ /* 12.53.13 Display Block Thirteen */ /* 12.53.14 Display Block Fourteen */ /* 12.53.15 Display Block Fifteen */ /* 12.53.16 Display Block Sixteen */ /* 12.53.17 Display Block Seventeen */ /* 12.53.18 Display Block Eighteen */ /* 12.53.19 Display Block Nineteen */ /* 12.53.20 Display Block Twenty */ /* 12.53.21 Display Block Twenty One */ /* 12.53.22 Display Block Twenty Two */ /* 12.53.23 Display Block Twenty Three */ /* 12.53.24 Display Block Twenty Four */ /* 12.53.24 Display Block Twenty Five */ /* 12.53.26 Display Block Twenty Six */ /* 12.53.27 Display Block Twenty Seven */ /* 12.53.28 Display Block Twenty Eight */ /* 12.53.29 Display Block Twenty Nine */ /* 12.53.30 Display Block Thirty */ /* 12.53.31 Display Block Thirty One */ /* 12.53.32 Display Block Thirty Two */ /**** 12.53.32 Display Block 032 ****/ .db032 { padding: 0px 0 30px; position: relative; background: linear-gradient(to bottom, transparent 90%, var(--background-subtle) 90%); font-size: 18px; color: #222; overflow: clip; } .db032--inner { margin: 0 auto; display: grid; grid-template-columns: calc( 50vw - 628px ) minmax(0px,3fr) minmax(0px, 2fr); grid-gap: 50px; padding: 0 0px; } .db032--left { position: relative; margin-top: 120px; } .db032--foreground-text { z-index: 1; position: relative; margin: 0 auto; padding: 0 20px; } .db032--two-col { padding: 15px 0 0; } span.db032--background-text { font-size: 800%; position: absolute; top: -28px; width: 170%; max-width: 170%!important; margin-bottom: 0; line-height: 0.7em; z-index: 0; left: -50px; font-family: 'Proxima nova',sans-serif; font-weight: 800; color: var(--background-subtle); } .db032--right { display: grid; grid-template-columns: minmax(0px, 2fr) minmax(0px, 1fr); grid-gap: 20px; align-items: start; z-index: 1; } .db032--right-left { display: grid; grid-template-columns: minmax(0px, 1fr); grid-gap: 20px; margin-top: 70px; } .db032--right-right { display: grid; grid-template-columns: minmax(0px, 1fr); grid-gap: 20px; } .db032--image { width: 100%; aspect-ratio: 2; overflow: hidden; position: relative; } .db032--image-one { max-width: 60%; margin: 0 0 0 auto; aspect-ratio: 1; } .db032--image-two { aspect-ratio: 1; margin-left: 0%; } .db032--image-three { aspect-ratio: 0.5; } .db032--image-four { aspect-ratio: 1; } .db032--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .db032 { padding: 0px 0 35px; min-height: 0px; } .db032--inner { grid-template-columns: minmax(0px, 1fr)!important; } .db032--left { margin-top: 0px; } span.db032--background-text { font-size: 600%; left: 0; width: 100%; overflow-x: clip; } .db032--right { padding-left: 20px; } } @media screen and (min-width: 768px) and (max-width: 1300px) { /* INTERMEDIATE RULES GO HERE */ .db032--inset { display: none; } .db032--inner { grid-template-columns: minmax(0px,1fr) minmax(0px, 1fr); } } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .db032--image-left--1 .db032--left { order: 2; } .db032--image-left--1 .db032--inset { order: 3; } .db032--image-left--1 .db032--inner { grid-template-columns: minmax(0px,2fr) minmax(0px, 3fr) calc( 50vw - 628px ) ; } .db032--image-left--1 .db032--right-left { order: 2; } .db032--image-left--1 .db032--right { grid-template-columns: minmax(0px, 1fr) minmax(0px, 2fr); } .db032--image-left--1 .db032--image-one { margin-left: 0%; margin-right: 40%; } } /* 12.53.33 Display Block Thirty Three */ /* 12.53.34 Display Block Thirty Four */ .db034 { padding: 0px 0 30px; position: relative; background: linear-gradient(to bottom, transparent 90%, var(--background-subtle) 90%); overflow: hidden; } .db034--inner { margin: 0 auto; display: grid; grid-template-columns: calc( 50vw - 660px ) minmax(0px,1fr) minmax(0px, 1fr); grid-gap: 50px; padding: 0 0px; } .db034--left { position: relative; margin-top: 50px; } .db034--foreground-text { z-index: 1; position: relative; margin: 0 auto; padding: 0 20px; } span.db034--background-text { font-size: 800%; position: absolute; top: -28px; width: 170%; max-width: 170%!important; margin-bottom: 0; line-height: 0.7em; z-index: 0; left: -50px; font-family: 'Proxima nova',sans-serif; font-weight: 800; color: #fafafa; } .db034--right { display: grid; grid-template-columns: minmax(0px, 1fr); grid-gap: 20px; align-items: start; align-self: start; z-index: 1; } .db034--right-top { display: grid; grid-template-columns: minmax(0px, 3fr) minmax(0px, 1fr); grid-gap: 20px; align-items: end; } .db034--right-bottom { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 2fr); grid-gap: 20px; } .db034--image { width: 100%; overflow: hidden; position: relative; } .db034--image-one { aspect-ratio: 3; } .db034--image-two { aspect-ratio: 0.5; } .db034--image-three { aspect-ratio: 3; } .db034--image-four { aspect-ratio: 3; } .db034--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .db034 { padding: 70px 0 35px; min-height: 0px; } .db034--inner { grid-template-columns: minmax(0px, 1fr)!important; } .db034--inset { display: none; } .db034--left { margin-top: 0px; } span.db034--background-text { font-size: 600%; left: 0; } .db034--right { padding-left: 20px; } .db034--right-top { margin-top: 0px; } } @media screen and (min-width: 768px) and (max-width: 1300px) { /* INTERMEDIATE RULES GO HERE */ .db034--inset { display: none; } .db034--inner { grid-template-columns: minmax(0px,1fr) minmax(0px, 1fr); } } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .db034--image-left--1 .db034--left, .db034--image-left--1 .db034--image-one, .db034--image-left--1 .db034--right-inset { order: 2; } .db034--image-left--1 .db034--inset { order: 3; } .db034--image-left--1 .db034--inner { grid-template-columns: minmax(0px,1fr) minmax(0px, 1fr) calc( 50vw - 660px ); } .db034--image-left--1 .db034--right-top { grid-template-columns: minmax(0px, 1fr) minmax(0px,3fr); } .db034--image-left--1 .db034--right-bottom { grid-template-columns: minmax(0px, 2fr) minmax(0px, 1fr); } } /* 12.53.35 Display Block Thirty Five */ /* 12.53.36 Display Block Thirty Six */ /* 12.53.37 Display Block Thirty Seven */ /* 12.53.38 Display Block Thirty Eight */ /* 12.53.39 Display Block Thirty Nine */ .db049 { margin: 0 auto 0px; padding: 0px 0px 0; position: relative; align-items: center; overflow: clip; } .db049--desc { display: grid; grid-gap: 20px; } label.db049--label { color: var(--content); cursor: pointer; position: relative; transition: 1s; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .db049 { margin: 0 auto 50px } .db049--item { display: grid; grid-template-rows: minmax(0,1fr); } label.db049--label.db049--label-one { order: 2; } .db049--item { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; margin: 0 0 35px; } .db049--input { display: none; } label.db049--label { order: 2; text-align: center; color: var(--detail); margin: 10px 0 0; font-size: 20px; } } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .db049 { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); grid-template-rows: minmax(0,1fr) auto auto auto auto auto minmax(0,2fr); grid-gap: 0 90px; grid-template-areas: "fortyninepane fortyninetitletitle" "fortyninepane ." "fortyninepane fortyninetitleone" "fortyninepane fortyninetitletwo" "fortyninepane fortyninetitlethree" "fortyninepane fortyninetitlefour" "fortyninepane ."; } .db049--pane { grid-area: fortyninepane; background: white; height: 100%; display: grid; align-items: center; isolation: isolate; } .acfpb--background-white .db049--pane, .acfpb--layout--background--White .db049--pane { background: white; } .acfpb--background-subtle .db049--pane, .acfpb--layout--background--Subtle .db049--pane { background: var(--background-subtle); } .acfpb--background-strong .db049--pane, .acfpb--layout--background--Strong .db049--pane { background: var(--background-strong); } .acfpb--background-Black .db049--pane, .acfpb--layout--background--Black .db049--pane { background: #000; } .db049--title { grid-area: fortyninetitletitle; margin: 20px 0 0; } .db049--label-one { grid-area: fortyninetitleone; } .db049--label-two { grid-area: fortyninetitletwo; } .db049--label-three { grid-area: fortyninetitlethree; } .db049--label-four { grid-area: fortyninetitlefour; } .db049--input { position: absolute; left: -4000px; } .db049--item { display: contents; } input:checked + label.db049--label { color: var(--detail); left: -40px; } label.db049--label:hover { color: var(--detail); left: -20px; } input:checked + label.db049--label + .db049--pane { z-index: 5; opacity: 1; } label.db049--label:hover + .db049--pane { z-index: 6; opacity: 1; } label.db049--label { left: 0px; padding: 5px 0; font-size: 24px; margin: 0; } label.db049--label:before { content: ""; background: transparent; transition: 1s; width: 100px; height: 2px; display: block; position: absolute; left: -115px; top: 23px; z-index: 8; } input:checked + label.db049--label:before { background: var(--detail); } label.db049--label:hover:before { background: var(--detail); } } /* 12.53.40 Display Block Forty */ /* 12.53.41 Display Block Forty One */ /* 12.53.42 Display Block Forty Two */ /* 12.53.43 Display Block Forty Three */ .db043 { background-position: center; background-size: cover; position: relative; overflow: hidden; } .db043--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .db043 { margin: 0px 60px 0; } } @media screen and (min-width: 768px) and (max-width: 1450px) { /* INTERMEDIATE RULES GO HERE */ .db043 { margin: 0px 0px 0!important; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ /* .db043 { padding: 0px 0px 0!important; }*/ } .db043--background { background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); background:rgba(0,0,0,0.2); width: 100%; height: 100%; min-height: 300px; display: grid; align-content: end; z-index: 2; position: relative; } .db043--text-width { max-width: var(--col-full); margin: 0 auto; padding: 0 20px; width: 100%; } span.db043--text-title { font-size: 70px; color: white; text-align: left; text-transform: uppercase; bottom: -10px; position: relative; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .db043--background { min-height: 0; aspect-ratio: 2.5; } .db043--text-width { position: relative; } span.db043--text-title { font-size: 30px; bottom: -8px; } } /* 12.53.44 Display Block Forty Four */ /* 12.53.45 Display Block Forty Five */ /* 12.53.51 Display Block Fifty One */ .db051 { overflow: clip; } .db051 svg { color: #fff; } .db051--container { display: grid; place-content: center; position: relative; overflow: hidden; --position: 50%; } .db051--slider-image { width: 100%; height: 100%; object-fit: cover; object-position: left; } .db051--image-before { position: absolute; inset: 0; width: var(--position); } .db051--slider { position: absolute; inset: 0; cursor: pointer; opacity: 0; width: 100%; height: 100%; } .db051--slider:focus-visible ~ .db051--slider-button { outline: 5px solid black; outline-offset: 3px; } .db051--slider-line { position: absolute; inset: 0; width: .2rem; width: 4px; height: 100%; background-color: var(--detail); left: var(--position); transform: translateX(-50%); pointer-events: none; } .db051--slider-button { position: absolute; background-color: var(--detail); color: black; padding: .5rem; border-radius: 100vw; display: grid; place-items: center; top: 50%; left: var(--position); transform: translate(-50%, -50%); pointer-events: none; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 12.53.59 Display Block 059 ****/ .db059 { padding: 0 20px 0; overflow: clip; } .db059--grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; background: var(--background-strong); /* border-radius: 40px; */ overflow: hidden; } .db059--content { padding: 50px; max-width: 700px; margin: 0 auto; } .db059--image { width: 100%; height: 100%; overflow: clip; position: relative; } .db059--srcset{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .db059--grid { min-height: calc(100dvh - 190px); } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .db059--grid { grid-template-columns: minmax(0,1fr); border-radius: 10px; } .db059--image { aspect-ratio: 1.6; } .db059--textarea { order: 2; } .db059--content { padding: 20px; max-width: 100%; } } /**** 12.54.1 Contact Section One ****/ /**** 12.54.2 Contact Section Two ****/ /**** 12.54.3 Contact Section Three ****/ /**** 12.54.4 Contact Section Four ****/ /**** 12.54.5 Contact Section Five ****/ /**** 12.54.6 Contact Section Six ****/ /**** 12.54.7 Contact Section Seven ****/ /**** 12.54.8 Contact Section Eight ****/ /**** 12.54.09 Contact Block Nine ****/ /**** 12.54.10 Contact Block Ten ****/ .cb010--grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-gap: 100px; } .cb010--header { padding: 0 0 20px; } .cb010--textarea { padding: 0 0 30px; } .cb010--right { width: 100%; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cb010--right { max-width: 100%; width: 100%; min-width: 100%; } .cb010--grid { grid-template-columns: minmax(0,1fr); grid-gap: 20px; } } /**** 12.54.11 Contact Block Eleven ****/ .cb0011--header { width: 100%; aspect-ratio: 4; overflow: hidden; position: relative; } .cb011--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .cb0011--grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-gap: 40px; padding: 0 40px; } .cb0011--form { background: var(--background-subtle); padding: 20px 20px 20px; z-index: 1; } .cb0011--cf7 { padding: 20px 0px 0px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .cb0011--textarea { padding: 30px 0 0; } .cb0011--form { margin-top: -200px; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cb0011--grid { grid-template-columns: minmax(0, 1fr); padding: 20px 0px 0; grid-gap: 20px; } .cb0011--textarea { padding: 0 20px; } } /**** 12.55.1 Link Card ****/ /**** 12.56 Info Card ****/ .info-block-background { padding-top: 50%; background-position: center!important; background-size: cover!important; } .info-block-text { background: #F1F3F5; padding: 18px 20px 3px; transition: 0.5s; } .info-block a:hover .info-block-text { background: #e6e9ed; } .info-block a:hover, .info-block a { text-decoration: none!important; } .info-block { margin-bottom: 35px } .info-block-title { font-size: 28px; } /**** 12.57 Smart Side Menu ****/ .smart-menu ul.sub-menu { margin: 0!important; } .smart-menu li { display: none; margin-bottom: 0!important; } .smart-menu li.current-menu-item, .smart-menu .current-menu-item ul li, .smart-menu li.current-menu-ancestor, .smart-menu .current-menu-ancestor ul li { display: block; } .smart-menu a { padding: 7px 10px; display: block; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 12.58 Grid Rules ****/ .grid-one-one { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .grid-one-one-one { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); } .grid-one-one-one-one { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); } .grid-one-one-one-one-one { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);} .grid-one-one-one-one-one-one { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); } .grid-one-two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); } .grid-two-one { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); } .grid-one-three { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,3fr); } .grid-three-one { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,1fr); } .grid-one-four { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,4fr); } .grid-four-one { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,1fr); } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .grid-one-one, .grid-one-one-one, .grid-one-one-one-one, .grid-one-one-one-one-one, .grid-one-one-one-one-one-one, .grid-one-two, .grid-two-one, .grid-one-three, .grid-three-one, .grid-one-four, .grid-four-one { grid-template-columns: minmax(0,1fr); } .grid-mobile-one-one { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } } .grid-gap-0 { grid-gap: 0px; } .grid-gap-10 { grid-gap: 10px; } .grid-gap-15 { grid-gap: 15px; } .grid-gap-20 { grid-gap: 20px; } .grid-gap-30 { grid-gap: 30px; } .grid-gap-35 { grid-gap: 35px; } .grid-gap-40 { grid-gap: 40px; } .grid-gap-50 { grid-gap: 50px; } /**** 12.59 Slanted Cards ****/ /**** 12.60 Side Modals ****/ #myModal2 .related-products-slider { display:none; } .modal-backdrop { z-index: 1!important; } .modal.left .modal-dialog, .modal.right .modal-dialog { position: fixed; margin: auto; width: 425px; height: 100%; -webkit-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } .modal.left .modal-dialog { width: 330px; } .modal.left .modal-content, .modal.right .modal-content { height: 100%; overflow-y: auto; } /*Left*/ .modal.left.fade .modal-dialog{ left: -340px; -webkit-transition: opacity 0.3s linear, left 0.3s ease-out; -moz-transition: opacity 0.3s linear, left 0.3s ease-out; -o-transition: opacity 0.3s linear, left 0.3s ease-out; transition: opacity 0.3s linear, left 0.3s ease-out; } .modal.left.fade.show .modal-dialog { left: 0px!important; } /*Right*/ .modal.right.fade .modal-dialog { right: -340px!important; -webkit-transition: opacity 0.3s linear, right 0.3s ease-out!important; -moz-transition: opacity 0.3s linear, right 0.3s ease-out!important; -o-transition: opacity 0.3s linear, right 0.3s ease-out!important; transition: opacity 0.3s linear, right 0.3s ease-out!important; } .modal.right.fade.show .modal-dialog { right: 0!important; } /* ----- MODAL STYLE ----- */ .modal-content { border-radius: 0!important; } .modal-header { border-bottom-color: #EEEEEE; background-color: #FAFAFA; } .modal-header .close { position: absolute; right: 40px; top: 13px; width: 32px; height: 32px; color: black!important; } .modal-header .close:before, .modal-header .close:after { content: none; } /**** 12.60.1 Woocommerce Sidebar ****/ .progress { height: 20px; background-color: grey; margin-bottom: 10px; } .progress-bar { padding: 6px; } a.cart-customlocation { color: black; } p.free-shipping-not-qualified { margin-bottom: 0; } .woocommerce-rhs-modal .modal-header { border-bottom-color: #EEEEEE; background-color: transparent; } .woocommerce-rhs-modal .modal-content { /* background: url(/wp-content/uploads/2020/07/halfshadow.png);*/ background-position: left; background-size: contain; background-repeat: no-repeat; background-color: white; } .woocommerce-rhs-modal ul.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents { list-style: none; margin: 0; } .woocommerce-rhs-modal li.woocommerce-cart-form__cart-item.cart_item { display: grid; grid-template-columns: 100px minmax(0,1fr); grid-gap: 10px; margin: 20px 0; } .woocommerce-rhs-modal a.remove::before { font-size: 15px; } .woocommerce-rhs-modal .cart-item-details { /* display: grid; */ /* grid-template-columns: minmax(0,1fr) minmax(0,1fr); */ position: relative; } .woocommerce-rhs-modal input.qty { font-size: 18px; padding: 5px; width: 60px!important; } .woocommerce-rhs-modal button.button { font-size: 12px; padding: 5px 10px!important; } .woocommerce-rhs-modal p.product-remove { order: 2; position: absolute; top: -5px; right: 0; margin: 0; } .woocommerce-rhs-modal p.product-price { order: 3; margin-bottom: 0; } .woocommerce-rhs-modal .product-quantity { order: 4; position: absolute; bottom: 0px; right: 0; display: grid; grid-template-columns: 60px minmax(0,1fr); width: 155px; } .woocommerce-rhs-modal .product-quantity p { display: none; } a.button.wide { width: 100%; text-align: center; } span.subtotal-right { float: right; } .woocommerce-rhs-modal-bottom-block-subtotal { width: 100%; padding: 15px 0; } .woocommerce-rhs-modal-bottom-block { position: absolute; border: 0; } .woocommerce-rhs-modal-bottom-block { position: absolute; bottom: 20px; width: 380px; } .related-products-slide-add-to-cart-wrapper p.product.woocommerce.add_to_cart_inline { border: 0px solid #ccc!important; padding: 0!important; margin: 0; } .related-products-slider { border: 3px #f2f2f2; background: #f2f2f2; padding: 15px 0px; } .related-products-slide-text-area * { color: black; } .related-products-slide-inner { display: grid!important; grid-template-columns: 50px minmax(0,1fr) 75px; padding: 0 100px; padding: 0 25px; grid-gap: 10px; } .related-products-slider span.woocommerce-Price-amount.amount { display: block; font-size: 14px; } .related-products-slide-product-price { color: red; margin-bottom: 0!important; } .related-products-slide-add-to-cart-wrapper span.woocommerce-Price-amount.amount { display: none!important; } .related-products-slider p { margin-bottom: 0!important; font-size: 16px; } .related-products-slider a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart { font-size: 12px; padding: 3px 7px; margin: 7px 0; } .related-products-slide-add-to-cart-wrapper span.woocommerce-Price-amount.amount { display: none; } .modal.right .modal-content { height: 100%; overflow-y: inherit; } /**** 12.60.2 Left Modal Menu ****/ .left-modal-menu { display: flex; min-height: 100%; padding-top: 50px; width: 100%; } /**** 12.60.3 Popup Subscribe Modal ****/ /**** 12.61 DELETED ****/ /**** 12.62 DELETED ****/ /**** 12.63 Logo Grid VC ****/ .client-logo-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax(180px, minmax(0,1fr)) ); grid-gap: 20px; align-items: center; } .client-logo-grid img { filter: grayscale(100%); } /**** 12.64 Rotating Circle of Text ****/ .rotating-circle-of-text-div { position: relative; height: 180px; } svg.rotating-circle-of-text { position: absolute; width: 210px; height: 210px; } svg.rotating-circle-of-text textPath { font-size: 43px; text-transform: uppercase; letter-spacing: 20px; fill: var(--detail); } .rotating-circle-of-text-link:after { content: " "; width: 70px; height: 70px; position: absolute; background: var(--detail); top: 50px; left: 50px; opacity: 0; transition: 1s; } .rotating-circle-of-text-div:hover .rotating-circle-of-text-link:after { opacity: 1; } /**** 12.65 Image With Text Ribbon ****/ .image-with-text-ribbon { position: relative; } .image-with-text-ribbon img { margin: 0 auto 25px; padding: 0 0px; } .image-with-text-ribbon-text { display: grid; position: absolute; top: 0; width: 100%; height: 100%; align-content: end; padding-bottom: 25px; } .image-with-text-ribbon-right * { justify-self: end; text-align: right; padding-right: 10%!important; } .image-with-text-ribbon-left * { padding-left: 10%!important; } .image-with-text-ribbon-text * { padding: 20px 35px; margin-bottom: 0; width: fit-content!important; max-width: 70%; } .image-with-text-ribbon-text h2 { font-size: 42px; background: rgba(244, 120, 74, .8); color: white; } .image-with-text-ribbon-text p { font-size: 20px; background: rgba(244, 220, 74, .8); color: white; } /**** 12.66 WYSIWYG Pulled Left ****/ .wysiwyg-partially-pulled-to-the-left { position: relative; background: red; padding: 20px 25px 7px; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .wysiwyg-partially-pulled-to-the-left { width: calc( 100% + 200px ); left: -200px; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 12.67 Speaker Card ****/ /**** 12.68.1 Icon Card One ****/ /**** 12.68.2 Icon Card Two ****/ /**** 12.68.3 Icon Card Three ****/ /**** 12.70 DELETED ****/ /**** 12.71 Floating CTA Lozenge ****/ .floating-cta-lozenge { position: fixed; bottom: 30vh; right: 0px; z-index: 15; transform: rotate(90deg); transform-origin: top right; cursor: pointer; border: 1px solid var(--button-border); color: var(--button-color); padding: 10px 20px 10px; background-color: var(--button-background); font-weight: 100; text-decoration: none; } .floating-cta-lozenge:hover { -webkit-transition: .5s ; -o-transition: .5s; transition: .5s; border-color: var(--button-hover-border); background-color: var(--button-hover-background); color: var(--button-hover-color); } .floating-cta-lozenge svg { margin-right: 10px; position: relative; top: -2px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .floating-cta-lozenge { top: 66vh; position: fixed; bottom: 0px; right: 0px; z-index: 15; transform: none; transform-origin: none; width: 100%; background: var(--detail); top: inherit; text-align: center; border: 0; } .floating-cta-lozenge-button { width: 100%; } .floating-cta-lozenge svg { top: -2px; width: 20px; margin-right: 6px; } #colophon { padding-bottom: 25px!important; } } /**** 12.71.2 Floating Whatsapp Lozenge ****/ .floating-whatsapp-lozenge { position: fixed; bottom: 5vh; right: 0px; z-index: 15; transform: rotate(90deg); transform-origin: top right; cursor: pointer; border: 1px solid #00A884; color: white; padding: 10px 20px 10px; background-color: #00A884; font-weight: 100; } .floating-whatsapp-lozenge:hover { -webkit-transition: .5s ; -o-transition: .5s; transition: .5s; border-color: black; background-color: black; } .floating-whatsapp-lozenge-button { text-decoration: none; color: white; } .floating-whatsapp-lozenge svg { margin-right: 10px; position: relative; top: -2px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .floating-whatsapp-lozenge { top: 66vh; position: fixed; bottom: 0px; right: 0px; z-index: 15; transform: none; transform-origin: none; width: 100%; background: var(--detail); top: inherit; text-align: center; border: 0; } .floating-whatsapp-lozenge-button { width: 100%; } .floating-whatsapp-lozenge svg { top: -2px; width: 20px; margin-right: 6px; } } /**** 12.72 Download Card ****/ .download-card-repater { border-top: 1px solid #E6E7E7; } .download-card { padding: 25px 0 25px; border-bottom: 1px solid #E6E7E7; display: grid; grid-template-columns: 220px minmax(0,1fr) 220px; grid-gap: 40px; align-items: center; margin-bottom: 25px; } .download-card-empty { display: none; } .download-card:has(.download-card-empty) { grid-template-columns: minmax(0,1fr) 220px; } .download-card-meta { padding: 0 0 20px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; } .download-card-meta_wrapper { flex: 1 1 0; display: flex; gap: 8px; align-items: center; } .download-card-desc, .download-card-meta p { color: #858592; } .download-card-meta p { font-size: 14px; padding: 0 0 0; } a.button.download-card-button { background: black; width: 100%; text-align: center; color: #fff; border-color: black!important; } a.button.download-card-button:hover { background: #fff; color: black!important; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .download-card { grid-template-columns: minmax(0,1fr) minmax(0,2fr)!important; grid-template-areas: "downloadimage downloadtext" "downloadimage downloadbutton"; grid-gap: 20px!important; align-items: start!important; } img.download-card-image { grid-area: downloadimage; } .download-card-button { grid-area: downloadbutton; } .download-card-content-text { grid-area: downloadtext; } p.download-card-desc { margin: 0; } /* .download-card-meta { flex-direction: column; align-items: flex-start; } */ .download-card-meta p { font-size: 10px; } .download-card-meta_wrapper svg { width: 14px; } } /**/ .download-card-small { padding: 10px 15px 15px 15px; display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-gap: 15px; align-items: center; max-width: 800px; margin: 20px auto 0; background: var(--background-subtle); } h2.download-card-small-title { font-size: 18px; } span.download-card-small-meta-desc { margin-right: 5px; } .download-card-meta-small span.material-icons { font-size: 13px; position: relative; top: 1px; } img.download-card-small-image { border: 1px solid #858592; } .download-card-small-desc, .download-card-small-meta p { color: #858592; } .download-card-small-meta span.material-icons { font-size: 12px; position: relative; top: 2px; } .download-card-small-meta p { font-size: 10px; margin: 0 0 8px; } a.button.download-card-small-button { background: black; text-align: center; font-size: 14px; padding: 5px 20px 2px; } a.button.download-card-small-button:hover { background: white; color: black!important; border-color: black!important; } /**** 12.73 Prevent Image Copying ****/ /* img { pointer-events: none; }*/ /**** 12.74 Pulled Up On Desktop ****/ @media screen and (min-width: 768px) { .pulled-up.trigger-target { position: relative; top: 0px; transition: 1s; opacity: 0; } .pulled-up.fire { top: -50px; opacity: 1; } } /**** 12.75 Visual Composer Overwrite ****/ /* Makes it so we can overlap elements */ .entry-content .wpb_row { overflow: inherit; } /**** 12.76 Mosaic Gallery ****/ .gallery--mosaic { position: relative; width: calc( 100% + 40px ); left: -20px; } /**** 12.77 Pricing List ****/ /**** 12.78 Google Recapture ****/ .grecaptcha-badge { z-index: 20; } .grecaptcha-badge { display: none !important; } /**** 12.79 Image Zoom ****/ img.wheelzoom { pointer-events: initial; } img.wheelzoom:active { cursor: move; } img.wheelzoom:hover { cursor: zoom-in; } /**** 12.80 Pages Grid ****/ .pages-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-gap: 0 40px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .pages-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /**** 12.81 Tickertape ****/ @-webkit-keyframes ticker { 0% { -webkit-transform: translate3d(50vw, 0, 0); /* Start from the middle */ transform: translate3d(50vw, 0, 0); /* Start from the middle */ visibility: visible; } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes ticker { 0% { -webkit-transform: translate3d(50vw, 0, 0); /* Start from the middle */ transform: translate3d(50vw, 0, 0); /* Start from the middle */ visibility: visible; } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes ticker { 0% { transform: translateX(0%); } 100% { transform: translateX(-200vw); /* Adjust as necessary for your design */ } } /* .ticker-carousel--ticker__item { display: grid; font-size: 80px; font-weight: bold; color: black; margin-left: 0px; line-height: 1em; text-transform: uppercase; grid-template-columns: 45px minmax(0,1fr); grid-gap: 20px; } */ /* .ticker-carousel--ticker__item:before { content: ""; display: inline-block; background: var(--detail); width: 40px; height: 40px; border-radius: 50%; margin: 18px 0px; }*/ img.ticker-carousel--ticker__logo { max-height: 100px !important; min-height: auto !important; max-width: none !important; margin-right: 20px !important; } .acf-page-builder--ticker--Right .ticker { transform: rotate(180deg); } .acf-page-builder--ticker--Right .ticker-carousel--ticker__item { transform: rotate(180deg); } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .ticker-carousel--ticker__item { font-size: 30px; grid-template-columns: 20px minmax(0,1fr); } .ticker-carousel--ticker__item:before { width: 24px; height: 24px; margin: 1px 0px; } } /**** 12.82 Archive Filter Form Rules ****/ select { cursor: pointer; } .archive-filter-form-wrapper { text-align: center; } .archive-filter-form-wrapper select { font-size: 14px; border: 1px solid var(--mid-border); border-radius: 4px; padding: 10px 10px; } .archive-filter-form-wrapper .button { padding: 4px 20px 7px!important; } .archive-filter-form-wrapper input[type="submit"] { top: 0px; position: relative; width: 100%; } /**** 12.83 Read More Expanding Section ****/ .read-more { position: relative; text-decoration: none; line-height: 1.4; cursor: pointer; cursor: text; } .read-more .trigger { display: block; position: absolute; bottom: 0; cursor: pointer; color: #2980b9; font-weight: bold; } .read-more .content { position: relative; overflow: hidden; max-height: 112px; transition: max-height 500ms ease; } .read-more .content::before { content: ""; position: absolute; bottom: 0; width: 100%; height: 48px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ transition: opactiy 500ms ease, visibility 500ms ease; } .read-more.expanded .content::before, .read-more.expanded .trigger { opacity: 0; visibility: hidden; } .read-more.expanded .content { max-height: 600px; } .no-trigger .content { max-height: 89.6px; } .no-trigger .content::before { height: 48px; } /**** 12.84 WordPress Admin Bar ****/ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ li#wp-admin-bar-wpseo-menu, li#wp-admin-bar-comments, li#wp-admin-bar-duplicate-post { display: none !important; } div#wpadminbar { display: none; } html:has(div#wpadminbar) { margin-top: 0 !important; } } /**** 12.85 Cursor Custom ****/ @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .cursor--custom { /* cursor: url(/wp-content/uploads/2021/06/slider-icon.png), auto;*/ /* cursor: none;*/ } /* .custom-cursor { position: fixed; top: 0; left: 0; width: 30px; height: 30px; background-color: var(--detail); border-radius: 50%; display: flex; justify-content: center; align-items: center; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); } .custom-cursor svg { width: 20px; height: 20px; fill: white; } .cursor--custom:hover ~ .custom-cursor { display: flex; }*/ } /**** 12.86 Google Maps ****/ .acf-map { width: 100%; height: 600px; border: #ccc solid 0px; margin: 0px 0; } .acf-map img { max-width: inherit !important; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /****************************************/ /****************************************/ /*********** END BITS & BOBS ***********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /******** 13. Custom Post Types *********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /********* END Custom Post Types ********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /****** 14. Custom Page Templates *******/ /****************************************/ /****************************************/ /**** 14.1 Homepage ****/ .page-template-template-homepage ul.slides li, .page-template-template-homepage .header-text { min-height: calc( 100vh - 298px )!important; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .mobile-only-home-buttons a.button { width: 100%; margin: 20px 0px 0; } } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .mobile-only-home-buttons { display: none; } } /**** 14.2 Absolute Slider Template ****/ .page-template-template-fullwidth-absolute-slider #masthead { background: rgba(255,0,0,0.5); } .page-template-template-fullwidth-absolute-slider div#content { padding-top: 0px; } .absolute-header-text-background { background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); width: 100%; height: 100px; position: absolute; } .absolute-header-text-outer { margin: 0 auto; max-width: 1200px; min-height: 300px; display: grid; align-items: start; align-items: center; align-items: end; } .absolute-header-text-inner { padding: 20px 0; } .page-template-template-fullwidth-absolute-slider ul.slides li, .absolute-header-text-background { min-height: calc( 700px )!important; } .page-template-template-fullwidth-absolute-slider .header-slider { position: absolute; top: 0; width: 101%!important; z-index: -1; left: -2px; } .page-template-template-fullwidth-absolute-slider .header-text-inner { position: relative; } /* Fix for above-header-sidebar-relative height disappearing */ @media (min-width: 768px) { .page-template-template-fullwidth-absolute-slider div#content { margin-top: 50px; } .has-y-scroll .absolute-slider { top: -38px; } } /**** 14.3 Fullwidth ****/ .page-template--fullwidth { padding: var(--height-standard) 0 var(--height-standard); } /**** 14.4 Search Archive ****/ .search-archive { padding: 30px 0 0; } .search-archive--feed { padding: 50px 0; } .search-results--feed a { text-decoration: none; } .search-results--item { border-bottom: 1px solid var(--mid-border); padding: 30px 0 30px; display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 15px; overflow-wrap: break-word; } .search-results--meta { display: flex; grid-gap: 15px; justify-content: space-between; flex-wrap: wrap; align-items: center; } .search-results--cats { display: flex; grid-gap: 10px 25px; flex-wrap: wrap; } .search-result--tax { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .search-result--tax a { background: var(--background-strong); padding: 3px 18px; border-radius: 20px; text-decoration: none; font-size: 0.9em; color: white; } .search-results--type { background: var(--background-subtle); width: fit-content; padding: 5px 20px; } .search-results--title { } p.search-results--excerpt { padding: 0; } /**** 14.5 DELETED ****/ /**** 14.6 Secure Page Login ****/ .page-template-page-template-secure div#primary { width: 100%; margin-right: 0; } .protected-content-outer, .flash-message.flash-message--error { text-align: center; } .protected-content-outer form { margin-top: 25px; } .protected-content-outer input[type="submit"] { top: 0px; position: relative; } .protected-content-outer input[type="text"] { width: 250px; background: white; } .protected-content-inner { background: #F7F7F7; padding: 30px; max-width: 500px; margin: 0 auto; border-radius: 5px; } /**** 14.8 Smart Menu ****/ .page-template-template-smart-menu .content-area { width: calc( 100% ); margin-right: 0px; } .page-template-template-smart-menu div#secondary { display: none; } .page-template-template-smart-menu div#content { padding-top: 0px; } .page-template-template-smart-menu div#primary { padding-top: 20px; } .smart-menu-content { display: grid; grid-gap: 20px; grid-template-columns: minmax(0,3fr) minmax(0,1fr); padding: var(--height-standard) 0 var(--height-standard); } .smart-menu-right { margin-bottom: 20px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .mobile-smart-menu { display: none!important; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .smart-menu-content { grid-template-columns: minmax(0,1fr); } .smart-menu-right { display: none; } } /* Smart Menu Itself */ .smart-menu { padding: 0px; } .smart-menu .menu { margin: 0!important; } .smart-menu ul.sub-menu { margin: 0!important; } .smart-menu li { display: none!important; margin-bottom: 0!important; } .smart-menu li.current-menu-item, .smart-menu .current-menu-item ul li, .smart-menu li.current-menu-ancestor, .smart-menu .current-menu-ancestor ul li { display: block!important; } .smart-menu a { padding: 8px 20px; display: block!important; text-decoration: none!important; color: rgba(0,0,0,.8)!important; } .smart-menu a:hover { text-decoration: underline!important; background: #f5f6f6; color: rgba(0,0,0,1)!important; } .smart-menu li { text-decoration: none!important; } .smart-menu li.menu-item-has-children > a { font-weight: 700; border-left: 5px solid #7DB0AF; padding: 8px 15px; background: #F5F6F6; } .mobile-smart-menu .smart-menu li.menu-item-has-children > a { padding: 15px 15px; } .smart-menu .current-menu-item > a { color: black; } /**** 14.9 Work ****/ /**** 14.10 Side Template ****/ .side-column--grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; grid-gap: 0; } .side-column--content { padding: var(--height-standard) 20px var(--height-standard); } .side-column--right { position: sticky; top: 0; background: var(--background-strong); display: grid; align-items: center; align-content: center; writing-mode: vertical-lr; justify-content: start; align-items: center; } .side-column--title { font-size: 70px; position: relative; color: white; padding: 50px 0; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .side-column--grid { grid-template-columns: minmax(0,1fr) 80px; } .side-column--title { font-size: 20px; } } /**** 14.11 Slider Above Menu Template ****/ .page-template-template-fullwidth-slider-above-menu ul.slides li, .page-template-template-fullwidth-slider-above-menu .header-text { min-height: 600px!important; } @media (min-width: 768px) { .page-template-template-fullwidth-slider-above-menu header#masthead:not(.site-header-reached-top) { position: relative!important; } .page-template-template-fullwidth-slider-above-menu .mastead-height-mirror { display: none!important; } body.admin-bar.has-y-scroll.page-template-template-fullwidth-slider-above-menu header#masthead { top: 0px!important; } /*.page-template-template-fullwidth-slider-above-menu .site-header-reached-top { position: absolute!important; }*/ } /**** 14.12 Service Page Template ****/ .page-template-template-service { background: var(--background-subtle); } .service-template { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); grid-gap: 50px; padding: 30px 0 50px; } .service-template--right-inner { background: white; padding: 20px 20px 20px; position: sticky; top: 165px; border-radius: 0px; box-shadow: 0 4px 4px rgb(0 0 0 / 25%), 0 -1px 2px rgb(0 0 0 / 8%); background-size: cover; background-position: center; } .service-template--form .wpcf7-textarea { height: 80px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .service-template--right { height: calc(100% + 75px); position: relative; top: -75px; z-index: 2; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .service-template { grid-template-columns: minmax(0,1fr); grid-gap: 20px; margin-top: 0px; } } /**** 14.13 Sitemap Page Template ****/ .page-template-template-sitemap ul.children { margin-left: 35px; } /**** 14.14 Static Homepage ****/ .static-homepage-hero { background-position: center; background-size: cover; margin-bottom: 130px; } .static-homepage-hero-text-inner h1 { font-size: 88px; font-weight: 700; letter-spacing: 1px; margin: 0; } .static-homepage-hero-text-inner h2 { font-size: 28px; font-weight: 400; letter-spacing: 1px; } .static-homepage-hero-text-inner p { font-size: 24px; font-weight: 400; letter-spacing: 1px; color: #e9e9e9; } .static-homepage-hero { background-position: center; background-size: cover; } .static-homepage-hero-background { background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); width: 100%; height: 100%; } .static-homepage-hero-text-max-width { max-width: 1600px; margin: 0 auto; height: 100%; display: grid; align-items: normal; align-items: center; align-items: end; min-height: 400px; min-height: calc( 100vh - 220px ); position: relative; bottom: -90px; } .static-homepage-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 35px; position: relative; padding: 0 20px; } .static-homepage-hero-text-inner { width: 100%; display: block; max-width: 800px; padding: 20px; bottom: 0; } .static-homepage-hero-text-inner * { color: white; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .static-homepage-hero { margin-bottom: 30px; } .static-homepage-hero-text-max-width { bottom: 0px; align-items: center; } .static-homepage-hero-grid.desktop-only { display: none; } .static-homepage-hero-grid.mobile-only { padding: 0; } .static-homepage-hero h1 { font-size: 42px;; } .static-homepage-hero-grid { grid-template-columns: minmax(0,1fr); } } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .static-homepage-hero-grid.mobile-only { display: none; } } /**** 14.15 Conversion Page ****/ /**** 14.17 Scrollspy ****/ .flex-product-single--scrollspy-top { position: sticky; top: 126px; background: var(--background); border-top: 1px solid var(--background-subtle); border-bottom: 1px solid var(--background-subtle); z-index: 10; } body.admin-bar .flex-product-single--scrollspy-top { top: 105px; } #scrollspy-controller { display: flex; flex-direction: row; grid-gap: 20px; align-items: center; flex-wrap: wrap; } .flex-product-single--scrollspy-bottom { padding-top: 0px; } a.list-group-item { border: none; border-bottom: 5px solid red; padding: 15px 0px 10px; border-color: transparent; } .floating-nav--link-group--last { margin: 0 0 0 auto; } .list-group-item.active { border-color: var(--detail); background: transparent; color: var(--content); } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .flex-product-single--scrollspy--menu-button { text-align: left; border-radius: 0; width: 100%; } body.admin-bar .flex-product-single--scrollspy-top { top: 0px; } .flex-product-single--scrollspy-top .col-full { display: none; background: white; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } button.flex-product-single--scrollspy--menu-button.active + .col-full { display: block; } #scrollspy-controller { flex-direction: column; grid-gap: 0px; } a.list-group-item { padding: 5px 0px 5px; } .floating-nav--link-group--last { display: none!important; } /*.flex-product-single--scrollspy--menu-button:before { content: "menu"; font-family: 'Material Icons'; font-weight: 100; font-style: inherit; font-size: 24px; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; position: relative; top: 6px; margin-right: 7px; margin-left: 3px; }*/ } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .flex-product-single--scrollspy--menu-button { display: none!important; } } /**** Flex product .1 Product Hero ****/ .flex-product-single--product-hero { min-height: calc(100vh - 234px); background: linear-gradient(to right, var(--background-subtle) 80%, #fff 20%); background: var(--background-subtle); } span.flex-product-single--product-hero--background-title { position: absolute; color: white; font-size: 9vw; font-weight: 800; top: 10%; left: 0%; display: flex; z-index: -1; line-height: 1em;; } .flex-product-single--product-hero--titlearea { padding: 0 0 20px; } .flex-product-single--product-hero--textarea { padding: 0 0 20px; } span.flex-product-single--product-hero--background-title--small { position: relative; font-size: 80px; font-weight: 800; background: linear-gradient(to right, var(--detail), var(--detail-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1em; } .flex-product-single--product-hero--layout { display: grid; position: relative; grid-template-columns: minmax(0,2fr) minmax(0,3fr); align-items: center; grid-gap: 30px; padding: 50px 50px 50px; z-index: 2; max-width: 1700px; margin: 0 auto; } .flex-product-single--product-hero--grid { display: grid; grid-template-areas: "stack"; } .flex-product-single--product-hero--image-layer { grid-area: stack; } .flex-product-single--product-hero--tooltips { min-height: 100%; width: 100%; grid-area: stack; position: relative; } .flex-product-single--product-hero--tooltip { position: absolute; background: var(--detail); border-radius: 50%; cursor: pointer; width: 50px; height: 50px; text-align: center; display: grid; align-content: center; justify-items: center; } .flex-product-single--product-hero--tooltip:after { content: ""; top: 0px; position: relative; transition: 0.5s; display: inline-block; width: 27px; height: 27px; background-color:white; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } .flex-product-single--product-hero--tooltip:hover:after { -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } .flex-product-single--product-hero--tooltip-reference { position: relative; } .flex-product-single--product-hero--tooltip-content { background: white; padding: 0px 0px; border-radius: 15px; position: absolute; width: max-content; left: 50%; bottom: 10px; transform: translate(-50%, 0); display: none; max-width: 300px; z-index: 5; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } img.flex-product-single--product-hero--tooltip-content--img { border-radius: 15px 15px 0 0; } .flex-product-single--product-hero--tooltip-content--text { font-size: 14px; text-align: left; padding: 10px 13px; } .flex-product-single--product-hero--tooltip:hover .flex-product-single--product-hero--tooltip-content { display: block; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (min-width: 768px) and (max-width: 1400px) { /* INTERMEDIATE RULES GO HERE */ span.flex-product-single--product-hero--background-title--small { font-size: 80px; } .flex-product-single--product-hero--layout { grid-template-columns: minmax(0,5fr) minmax(0,4fr); padding: 50px 100px 50px 50px; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .flex-product-single--product-hero--layout { grid-template-columns: minmax(0,1fr); padding: 50px 20px 50px; } span.flex-product-single--product-hero--background-title--small { font-size: 40px; } span.flex-product-single--product-hero--background-title { font-size: 50px; left: 45px; top: 22px; } } /** Papers */ .flex-product-single--product-hero--papers--repeater-item { padding: 0px 0px 0px 20px; } .flex-product-single--product-hero--paper { display: grid; grid-template-columns: auto minmax(0,1fr); } .flex-product-single--product-hero--side-line { height: 100%; width: 3px; background: var(--detail); position: relative; left: 2px; } .flex-product-single--product-hero--side { color: var(--detail) !important; text-transform: uppercase; letter-spacing: 0px; font-size: 12px; writing-mode: vertical-lr; text-align: right; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-gap: 8px; align-items: center; } .flex-product-single--product-hero--papers--quote p { font-style: italic; font-size: 14px; } a.flex-product-single--product-hero--papers--link { margin: 0 15px 0 0; font-size: 14px; font-weight: 100; } .flex-product-single--product-hero--papers--authors { margin: 0 0 0px; font-size: 12px; font-weight: 400; } .flex-product-single--product-hero--papers--paper-name { margin: 0 0 0px; font-size: 14px; font-weight: 700; } .flex-product-single--product-hero--papers--identifiers { margin: 0 0 0px; font-style: italic; font-size: 12px; font-weight: 400; } /**** 14.18 How To Guide (Scrollspy Horizontal) ****/ .page-template-template-how-to-guide header.entry-header { display: none!important; } .scrollspy-horizontal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); grid-gap: 40px; border-top: 1px solid lightgrey; padding: 40px 0 40px; margin: 20px 0 0; } .scrollspy-horizontal--sticky { position: sticky; top: 150px; } .scrollspy-horizontal--navbar { padding: 0; } .scrollspy-horizontal--navbar-group, .scrollspy-horizontal--nav { width: 100%; } .scrollspy-horizontal--nav-link-master { font-size: 20px; padding: 10px 20px; } .scrollspy-horizontal--nav-link { width: 100%; border-left: 5px solid transparent!important; color: var(--content); } .scrollspy-horizontal--nav-link--sub { padding-left: 30px; } .scrollspy-horizontal--nav-link.active+nav .scrollspy-horizontal--nav-link { border-color: lightgrey!important; } a.nav-link.scrollspy-horizontal--nav-link.active+nav { background: #F8F9FA!important; display: block; } a.nav-link.scrollspy-horizontal--nav-link:hover+nav, .scrollspy-horizontal--navbar-group:hover .scrollspy-horizontal--nav { display: block; } a.nav-link.scrollspy-horizontal--nav-link.active { color: var(--content)!important; background-color: var(--background-subtle)!important; border-color: var(--detail)!important; font-weight: 600; } .scrollspy-horizontal--anchor-offset { padding-top: 40px; } .scrollspy-horizontal--content > .scrollspy-horizontal--masternav:first-of-type > .scrollspy-horizontal--anchor-offset:first-of-type { padding-top: 0px; } .scrollspy-horizontal--pane { border-left: 5px solid transparent; padding: 30px 40px 30px; } .scrollspy-content.active .scrollspy-horizontal--pane{ background-color: var(--background-subtle); border-color: var(--detail) ; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ a.nav-link.scrollspy-horizontal--nav-link+nav { display: none; } button.scrollspy-horizontal--menu-button { display: none; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .scrollspy-horizontal { grid-template-columns:minmax(0, 3fr); width: calc(100% + 40px); position: relative; left: -20px; } .scrollspy-horizontal--pane { border-left: 3px solid transparent; padding: 20px 20px 20px; } .scrollspy-horizontal--menu { position: sticky; top: 0px; z-index: 2; } .scrollspy-horizontal--menu-button { text-align: left; border-radius: 0; width: 100%; } .scrollspy-horizontal--sticky { display: none; background: white; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .scrollspy-horizontal--menu-button:before { content: "menu"; font-family: 'Material Icons'; font-weight: 100; font-style: inherit; font-size: 24px; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; position: relative; top: 6px; margin-right: 7px; margin-left: 3px; } .scrollspy-horizontal--menu-button { color: #333; /* This controls the icon color */ } .scrollspy-horizontal--menu-button::before { content: ""; display: inline-block; width: 24px; height: 24px; background-color: white; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; vertical-align: middle; margin-right: 7px; position: relative; } .scrollspy-horizontal--menu-button.active + .scrollspy-horizontal--sticky { display: block; } .scrollspy-horizontal--nav-link { font-size: 14px; } } /**** 14.19 404 ****/ .error-404 { overflow: hidden; display: grid; grid-template-areas: "stack"; } .error-404--background { grid-area: stack; min-height: 100%; width: 100%; display: grid; place-items: center; align-content: center; overflow: hidden; } span.error-404--background-404 { color: var(--background-subtle); font-size: 50vw; text-align: center; width: 100%; line-height: .6em; height: 100%; font-weight: 900; } .error-404--foreground { grid-area: stack; min-height: 100%; width: 100%; display: grid; max-width: 600px; margin: 0 auto; text-align: center; grid-template-rows: minmax(0,1fr) auto; padding: 0 20px; } .error-404--content { display: grid; grid-template-rows: minmax(0,1fr) auto; align-items: center; padding: 0 0 40px; } .error-404--buttonarea { padding: 20px 0 0; } .error-404--search { max-width: 300px; margin: 0 auto; } .error-404--search div { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-gap: 10px 10px; padding: 20px 0 0; } .error-404--search label.screen-reader-text { grid-column: span 2; text-align: left; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ span.error-404--background-404 { font-size: 60vw; } } /****************************************/ /****************************************/ /****** END Custom Page Templates *******/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /******* 15. START ANIMATIONS ***********/ /****************************************/ /****************************************/ /**** 12.1 Animate SVG ****/ /* Animate drawing from left to right */ .animate--left { fill: none; /* No fill, only stroke */ stroke-width: 36; stroke-dasharray: 1500; /* Length of the stroke */ stroke-dashoffset: 1500; /* Initially hide the stroke */ animation: drawLeft 3s ease forwards 1s; /* 2 Seconds Animate, 1 Second Delay */ } /* Keyframes for drawing from left to right */ @keyframes drawLeft { to { stroke-dashoffset: 0; /* Draw in the stroke from left to right */ } } /* Animate drawing from right to left */ .animate--right { fill: none; /* No fill, only stroke */ stroke-width: 36; stroke-dasharray: 1500; /* Length of the stroke */ stroke-dashoffset: -1500; /* Initially hide the stroke and offset it fully to the left */ animation: reverseDrawRight 2s ease forwards 1s; /* 1 Seconds Animate, 1.3 Second Delay */ } /* Keyframes for reversing the direction (right to left) */ @keyframes reverseDrawRight { to { stroke-dashoffset: 0; /* Reveal the stroke by animating from right to left */ } } /**** 15.2 Viewport Animation Fade (viewport-target viewport-animation--fade) ****/ .viewport-animation--fade { opacity: 0; transition: 1.5s; } .viewport-animation--fade.viewport-target--has-fired { opacity: 1; } .viewport-animation--fade.viewport-target--ceasefire { opacity: 1; } #content, body { transition: 0s; } /**** 15.3 Viewport Animation Up (viewport-target viewport-animation--up) ****/ .viewport-animation--up { opacity: 0; transition: opacity 1.5s ease-out, top 1.5s cubic-bezier(0.25, 1, 0.5, 1); position: relative; top: 50px; } .viewport-animation--up.viewport-target--fire { opacity: 1; top: 0px; } /**** 15.4 Viewport Animation Down (viewport-target viewport-animation--down) ****/ .viewport-animation--down { opacity: 0; transition: opacity 1.5s ease-out, top 1.5s cubic-bezier(0.25, 1, 0.5, 1); position: relative; top: -50px; } .viewport-animation--down.viewport-target--fire { opacity: 1; top: 0px; } /**** 15.5 Viewport Animation Left (viewport-target viewport-animation--left) ****/ .viewport-animation--left { opacity: 0; transition: opacity 1.5s ease-out, right 1.5s cubic-bezier(0.25, 1, 0.5, 1); position: relative; right: 50px; } .viewport-animation--left.viewport-target--fire { opacity: 1; right: 0px; } /**** 15.6 Viewport Animation Right (viewport-target viewport-animation--up) ****/ .viewport-animation--right { opacity: 0; transition: opacity 1.5s ease-out, left 1.5s cubic-bezier(0.25, 1, 0.5, 1); position: relative; left: 50px; } .viewport-animation--right.viewport-target--fire { opacity: 1; left: 0px; } /**** 15.7 Viewport Animation Curtains (viewport-target viewport-animation--curtains) ****/ /** SIMPLE VERSION **/ .viewport-animation--curtains { width: 100%; clip-path: inset(0 50% 0 50%); transition: clip-path 1.5s ease-out 1s; } .viewport-animation--curtains.viewport-target--fire { clip-path: inset(0 0 0 0); } /** COMPLEX VERSION **/ .curtain_hero--inner { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; } .curtain_hero--inner { position: relative; height: 100vh; width: 100%; } .curtain_hero--image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .curtain_hero--left, .curtain_hero--right { width: 32.5%; position: absolute; top: 0; bottom: 0; background-color: #fff; z-index: 9; } .curtain_hero--left { left: 0; } .curtain_hero--right { right: 0; } .curtain_hero--content { display: none; position: absolute; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; z-index: 2; } .curtain_hero--textarea { font-size: 1.75em; padding-left: 1em; padding-right: 1em; font-weight: 400; font-style: normal; letter-spacing: normal; line-height: 1.2795em; text-align: center; text-transform: uppercase; position: relative; display: inline-block; overflow: hidden; padding-top: 2em; mix-blend-mode: exclusion; } .acfpb--layout--background--White .curtain_hero--left, .acfpb--layout--background--White .curtain_hero--right { background-color: white; } .acfpb--layout--background--Subtle .curtain_hero--left, .acfpb--layout--background--Subtle .curtain_hero--right { background-color: var(--background-subtle); } .acfpb--layout--background--Strong .curtain_hero--left, .acfpb--layout--background--Strong .curtain_hero--right { background-color: var(--background-strong); } .acfpb--layout--background--Black .curtain_hero--left, .acfpb--layout--background--Black .curtain_hero--right { background-color: #000; } .animation--viewport-translate--left, .animation--viewport-translate--right { will-change: transform; transform: translate3d(0,0,0); } @media (prefers-reduced-motion: reduce) { .animation--viewport-translate--left, .animation--viewport-translate--right { transform: none !important; } } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .curtain_hero--inner { height: inherit; aspect-ratio: 1.5; } } /**** 15.8 Viewport Animation Draw Right / Left (viewport-target viewport-animation--draw-right) ****/ .viewport-animation--draw-right { width: 0%; transition: 3s; } .viewport-animation--draw-right.viewport-target--fire { width: 100%; } .viewport-animation--draw-left { width: 0%; transition: 3s; float: right; } .viewport-animation--draw-left.viewport-target--fire { width: 100%; } /**** 15.9 Animation Sliding Text ****/ .sliding-text-outer { } .sliding-text-container { /* height: 170px; overflow-y: auto;*/ position: relative; /* padding: 170px 0 00px; overflow: hidden;*/ z-index: 0; } .sliding-text-container .sliding-text.right.off-screen { right: -25%; } .sliding-text-container .sliding-text.right { right: 0; } .sliding-text-container .sliding-text { font-size: 136px !important; } .sliding-text-container .sliding-text { position: absolute; bottom: 0; pointer-events: none; font-size: 8vw; opacity: .07; color: var(--content); margin-bottom: 0; line-height: .8; width: max-content; } /**** 15.10 Move Background Vertically ****/ body .animation--move-background { background-size: cover!important; background-repeat: no-repeat!important; animation: moveBackground 60s ease-in-out infinite!important; } @keyframes moveBackground { 0% { background-position: center bottom; } 50% { background-position: center top; } 100% { background-position: center bottom; } } /**** 15.11 Viewport Sliding Text ****/ .animation-viewport-textslider { overflow: hidden; display: grid; } /**** 15.12 Viewport Sliding Images ****/ .animation-viewport-slider--sliding-images { bottom: 0; pointer-events: none; color: var(--content); margin-bottom: 0; width: max-content; display: flex; } .animation-viewport-slider--window { overflow: hidden; display: grid; } .animation-viewport-slider--image { max-height: 300px; } /**** 15.13 Parralax Animation ****/ .animation-parallax { position: relative; overflow: hidden; } body .animation-parallax img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 140%; width: auto; height: auto; will-change: transform; } /**** 15.14 Viewport Animation Fade LTR ****/ @property --viewport-animation--fade-ltr--reveal { syntax: ''; initial-value: 0.0001%; inherits: false; } @property --viewport-animation--fade-ltr--fade { syntax: ''; initial-value: 50%; inherits: false; } .viewport-animation--fade-ltr { opacity: 0; -webkit-mask-image: linear-gradient( to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) calc(var(--viewport-animation--fade-ltr--reveal) - var(--viewport-animation--fade-ltr--fade)), rgba(0,0,0,0) var(--viewport-animation--fade-ltr--reveal), rgba(0,0,0,0) 100% ); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient( to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) calc(var(--viewport-animation--fade-ltr--reveal) - var(--viewport-animation--fade-ltr--fade)), rgba(0,0,0,0) var(--viewport-animation--fade-ltr--reveal), rgba(0,0,0,0) 100% ); mask-repeat: no-repeat; mask-size: 100% 100%; } .viewport-animation--fade-ltr.viewport-target--fire { opacity: 1; animation: viewport-animation--fade-ltr--animate 2s ease-out forwards; } @keyframes viewport-animation--fade-ltr--animate { 0% { --viewport-animation--fade-ltr--reveal: 0.0001%; } 100% { --viewport-animation--fade-ltr--reveal: 151%; } } /**** 15.15 Viewport Animation Letters ****/ :root { --viewport-animation--letter--fade-duration: 0.2s; --viewport-animation--letter--fade-ease: ease-out; --viewport-animation--letter--delay-step: 0.02s; /* per-letter stagger */ } @property --viewport-animation--letter--rh-letter-index { syntax: ''; initial-value: 0; inherits: false; } .viewport-animation--letter .viewport-animation--letter--rh-letter { display: inline-block; opacity: 0; animation-name: none; animation-duration: var(--viewport-animation--letter--fade-duration); animation-timing-function: var(--viewport-animation--letter--fade-ease); animation-fill-mode: forwards; animation-delay: calc(var(--viewport-animation--letter--rh-letter-index) * var(--viewport-animation--letter--delay-step)); } .viewport-animation--letter.viewport-target--fire .viewport-animation--letter--rh-letter { animation-name: viewport-animation--letter--fadein; } @keyframes viewport-animation--letter--fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .viewport-animation--letter .viewport-animation--letter--rh-letter { animation: none; opacity: 1; } } /**** 15.16 Viewport Animation Words ****/ :root { --viewport-animation--word--duration: 1.5s; /* per-word speed */ --viewport-animation--word--delay-step: 0.08s; /* stagger between words */ --viewport-animation--word--distance: 0.3em; /* how far below it starts */ --viewport-animation--word--easing: cubic-bezier(.2,.7,.1,1); } @property --viewport-animation--word--index { syntax: ''; initial-value: 0; inherits: false; } .viewport-animation--word .viewport-animation--word--unit { display: inline-block; opacity: 0; transform: translateY(var(--viewport-animation--word--distance)); will-change: opacity, transform; animation-name: none; animation-duration: var(--viewport-animation--word--duration); animation-timing-function: var(--viewport-animation--word--easing); animation-fill-mode: forwards; animation-delay: calc(var(--viewport-animation--word--index) * var(--viewport-animation--word--delay-step)); overflow: clip; } .viewport-animation--word.viewport-target--fire .viewport-animation--word--unit { animation-name: viewport-animation--word--fade-up; } @keyframes viewport-animation--word--fade-up { 0% { opacity: 0; transform: translateY(var(--viewport-animation--word--distance)); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .viewport-animation--word .viewport-animation--word--unit { animation: none !important; opacity: 1 !important; transform: none !important; } } /**** 15.16 Viewport Animation Lines ****/ :root { --viewport-animation--lines--duration: 0.6s; /* per-line speed */ --viewport-animation--lines--delay-step: 0.12s; /* stagger between lines */ --viewport-animation--lines--distance: 0.75em; /* start offset below */ --viewport-animation--lines--easing: cubic-bezier(.2,.7,.1,1); } @property --viewport-animation--lines--index { syntax: ''; initial-value: 0; inherits: false; } .viewport-animation--lines .viewport-animation--lines--line { display: block; opacity: 0; transform: translateY(var(--viewport-animation--lines--distance)); animation-name: none; animation-duration: var(--viewport-animation--lines--duration); animation-timing-function: var(--viewport-animation--lines--easing); animation-fill-mode: forwards; animation-delay: calc(var(--viewport-animation--lines--index) * var(--viewport-animation--lines--delay-step)); } .viewport-animation--lines.viewport-target--has-fired .viewport-animation--lines--line { animation-name: viewport-animation--lines--fade-up; } @keyframes viewport-animation--lines--fade-up { 0% { opacity: 0; transform: translateY(var(--viewport-animation--lines--distance)); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .viewport-animation--lines .viewport-animation--lines--line { animation: none !important; opacity: 1 !important; transform: none !important; } } /**** 15.17 Viewport Animation Dropdown ****/ :root { --viewport-animation--dropdown--duration: 1s; /* how long the reveal takes */ --viewport-animation--dropdown--delay: 0s; /* wait before starting */ } @property --viewport-animation--dropdown--reveal-y { syntax: ''; initial-value: 0.0001%; inherits: false; } .viewport-animation--dropdown { display: block; -webkit-mask-image: linear-gradient( to bottom,rgba(0,0,0,1) 0%, rgba(0,0,0,1) var(--viewport-animation--dropdown--reveal-y),rgba(0,0,0,0) var(--viewport-animation--dropdown--reveal-y),rgba(0,0,0,0) 100%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,1) var(--viewport-animation--dropdown--reveal-y), rgba(0,0,0,0) var(--viewport-animation--dropdown--reveal-y),rgba(0,0,0,0) 100%); mask-repeat: no-repeat; mask-size: 100% 100%; transition: 1s; opacity: 0; } .viewport-animation--dropdown.viewport-target--fire { animation: viewport-animation--dropdown--animate var(--viewport-animation--dropdown--duration) ease-out var(--viewport-animation--dropdown--delay) forwards; opacity: 1; } @keyframes viewport-animation--dropdown--animate { 0% { --viewport-animation--dropdown--reveal-y: 0.0001%; } 100% { --viewport-animation--dropdown--reveal-y: 101%; } } /****************************************/ /****************************************/ /************ END ANIMATIONS ***********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /******* 16. START DISPLAY BLOCKS *******/ /****************************************/ /****************************************/ /**** 16.1 Display Block 001 ****/ /****************************************/ /****************************************/ /********** END DISPLAY BLOCKS **********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /*********** 17. START CARDS ************/ /****************************************/ /****************************************/ /**** 17.1 Card 001 ****/ .card001 { text-decoration: none !important; } .card001--background { width: 100%; overflow: hidden; position: relative; aspect-ratio: 1.6; } .card001--img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .card001--top-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-gap: 10px; margin: 15px 0 15px; } .card001--title { margin: 0; } .card001--icon { color: var(--detail); } /**** 17.13 Card 013 ****/ a.card013, a.card013:hover { text-decoration: none!important; } .card013 { margin: 0 0 35px; } .card013--image-div { width: 100%; aspect-ratio: 1.6; overflow: hidden; position: relative; } .card013--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; opacity: 1; transition: 1s; } .card013--hover-srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .card013:hover img.card013--srcset { opacity: 0; } .card013--image { padding-top: 120%; display: grid; transition: 1s; position: relative; overflow: hidden; opacity: 1; transition: 1.5s; overflow: hidden; position: relative; } .card013--hover-image { overflow: hidden; position: relative; } .card013:hover .card013--image { opacity: 0 } .card013--text-area { position: absolute; inset: 0; } .card013--text-area-inner { width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,1)); position: relative; transition: 1s; display: grid; align-items: end; padding: 0 10px; } .card013--top-title { color: white; font-size: 38px; bottom: -11px; position: relative; font-family: roman; margin: 0; } .card013--text-div { padding: 10px 0; } .card013--text { margin: 0; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .card013--top-title { font-size: 22px; bottom: -6px; } } /**** 17.02 Card 002 ****/ /**** 17.03 Card 003 ****/ /**** 17.04 Card 004 ****/ /**** 17.05 Card 005 ****/ /**** 17.06 Card 006 ****/ /**** 17.07 Card 007 ****/ /**** 17.08 Card 008 ****/ /**** 17.09 Card 009 ****/ /**** 17.10 Card 010 ****/ /**** 17.11 Card 011 ****/ /**** 17.12 Card 012 ****/ /**** 17.13 Card 013 ****/ /**** 17.14 Card 014 ****/ .card014, .card014:hover { text-decoration: none!important; } .card014--background { display: grid; align-content: end; width: 100%; height: 100%; overflow: hidden; position: relative; min-height: calc( 100vh - 300px ); } .card014--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .card014--text { padding: 20px; z-index: 2; display: grid; grid-gap: 20px; justify-items: start; } .card014--title { text-transform: uppercase; letter-spacing: 1px; } .card014--button { margin-bottom: 0; } /**** 17.15 Card 015 ****/ /**** 17.16 Card 016 ****/ /**** 17.17 Card 017 ****/ .card017--box, .card017--box:hover { text-decoration: none; } .card017 { border-bottom-width: 6px; border-bottom-style: solid; width: 100%; aspect-ratio: 1.6; overflow: hidden; position: relative; } .card017--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .card017--text { padding: 3px 10px 3px 0; max-width: 100px; margin-bottom: 15px; color: white; font-size: 19px; position: relative; bottom: 25px; position: relative; line-height: 1.6; color: #fff; display: inline; white-space: pre-wrap; border: 0 solid #333; border-width: 0.25em 0; left: 5px; } .card017--box { margin-top: 15px; } .card017--inner { max-width: 80%; position: absolute; bottom: 0; width: 80%; } .card017--text:after { content: ""; position: absolute; top: -0.25em; right: 100%; bottom: -0.25em; width: 0.25em; } .card017--text, .card017--text:after { background-color: #333; } .card017--text > span { position: relative; z-index: 1; } /**** 17.18 Card 018 ****/ .card018--box { margin-top: 15px; position: relative; } .card018--box, .card018-box:hover { text-decoration: none!important; } .card018 { position: relative; width: 100%; aspect-ratio: 1.6; overflow: hidden; } .card018--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .card018--text { background: black; padding: 3px 10px 3px 0; max-width: 100px; margin-bottom: 15px; color: white; font-size: 19px; position: relative; line-height: 1.6; color: #fff; display: inline; white-space: pre-wrap; border: 0 solid #333; border-width: 0.25em 0; left: 5px; } .card018--date { background: #333; padding: 3px 10px 3px 10px; max-width: 100px; margin-bottom: 15px; color: white; font-size: 14px; position: relative; line-height: 1.6; color: #fff; display: inline; white-space: pre-wrap; border: 0 solid #333; border-width: 0.25em 0; left: 0px; } .card018--inner { max-width: 80%; display: grid; width: 80%; position: absolute; bottom: 20px; left: 0; } .card018--text:after { content: ""; position: absolute; top: -0.25em; right: 100%; bottom: -0.25em; width: 0.25em; } .card018--text, .card018--text:after { background-color: #333; } .card018--text > span { position: relative; z-index: 1; } /**** 17.19 Card 019 ****/ /**** 17.20 Card 020 ****/ /**** 17.21 Card 021 ****/ /**** 17.22 Card 022 ****/ /**** 17.23 Card 023 ****/ /**** 17.24 Card 024 ****/ /**** 17.25 Card 025 ****/ /**** 17.26 Card 026 ****/ /**** 17.27 Card 027 ****/ .card027 { display: grid; grid-template-columns: 110px minmax(0,3fr); grid-gap: 15px; border: 1px solid #F4F4F4; padding: 15px 15px; background: var(--background); } .card027--image { padding-top: 100%; width: 100%; overflow: hidden; position: relative; } .card027--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .card027--name { font-size: 22px; } .card027--name a, .card027--text-area a, .card027--name a:hover, .card027--text-area a:hover { color: var(--content)!important; } .card027--job-title { color: #EC6C24; font-size: 18px; font-weight: 500; margin: 0px 0 5px; } .card027--text-area p { margin-bottom: 0!important; } .card027--contact-details p { font-size: 14px; margin-bottom: 7px; } .card027 a { text-decoration: none!important; } .card027--contact-details a { border-bottom: 1px solid var(--detail); } /**** 17.28 Card 028 ****/ .card028 { display: grid; grid-template-columns: minmax(0,1fr); grid-gap: 15px; border-bottom: 1px solid #F4F4F4; padding: 0px 0px 15px; } .card028 a { text-decoration: none!important; } .custom-accordion.active .card028--text-area-grid-left arrow { rotate: 180deg; } .card028--image { overflow: hidden; -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: 1s; aspect-ratio: 1; } .card028--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .card028:hover .card028--image, .card028--image:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); } .card028--image-hover { padding-top: 100%; opacity: 0; transform: scale(1.8); transition: 1s; } .card028:hover .card028--image-hover, .card028--image-hover:hover { opacity: 1; transform: scale(1); } .card028--text-area-grid { display: grid; grid-template-columns: minmax(0,1fr) 32px; align-items: center; cursor: pointer; } .card028--name { font-size: 22px; } .card028--name a, .card028--text-area a, .card028--name a:hover, .card028--text-area a:hover { color: black!important; } .card028--job-title { color: var(--detail); font-size: 18px; font-weight: 500; margin: 0px 0 5px; } .card028--text-area p { margin-bottom: 0!important; } .card028--contact-details { margin: 10px 0 0; padding: 15px 0px 10px; border-top: 1px solid #F4F4F4; } .card028--contact-details p { font-size: 14px; } .card028--contact-details-meta { margin: 0 0 15px; } .card028--contact-details-meta p { margin-bottom: 5px; padding: 0 0 5px; } .card028--job-title { color: var(--detail); font-size: 18px; font-weight: 500; margin: 0px 0 5px; padding: 10px 0 0; } .card028--contact-details-meta svg { color: var(--detail); width: 20px; height: 17px; margin-right: 10px; position: relative; top: -2px; } .card028--link-div { margin: 15px 0 0; } /**** 17.29 Card 029 ****/ /**** 17.30 Card 030 ****/ /**** 17.31 Card 031 ****/ /**** 17.32 Card 032 ****/ /**** 17.33 Card 033 ****/ /**** 17.34 Card 034 ****/ /**** 17.35 Card 035 ****/ /**** 17.36 Card 036 ****/ /**** 17.37 Card 037 ****/ /**** 17.38 Card 038 ****/ /**** 17.39 Card 039 ****/ /**** 17.40 Card 040 ****/ /**** 17.41 Card 041 ****/ /**** 17.42 Card 042 ****/ /**** 17.43 Card 043 ****/ .card043 { text-decoration: none; } .card043--imagry { width: 100%; overflow: hidden; position: relative; aspect-ratio: 1.6; } .card043--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .card043--img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; transition: 1s; } .card043:hover .card043--img { opacity: 0; } .card043--textarea { text-align: center; padding: 15px 20px 15px; } .card043--subtitle { padding: 10px 0 0; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .card043--imagry.viewport-target--fire .card043--img { opacity: 0; } } /**** 17.44 Card 044 ****/ /**** 17.45 Card 045 ****/ /**** 17.046 Card 046 ****/ .card046 { text-decoration: none!important; width: 100%; aspect-ratio: 1.4; display: grid; position: relative; overflow: clip; border-radius: 20px; } .card046--grid { display: grid; grid-template-areas: "stack"; overflow: hidden; position: relative; width: 100%; } .card046--img { grid-area: stack; width: 100%; transition: 1s; height: 100%; object-fit: cover; object-position: center; position: absolute; inset: 0; } .card046:hover .card046--img { transform: scale(1.1); } .card046--opacity { grid-area: stack; position: relative; display: grid; align-content: space-between; background: rgba(0,0,0,.3); height: 100%; width: 100%; padding: 20px 20px; } .card046--title { color: white; margin: 0 auto; padding: 0px 0px; } .card046--desc { color: white; } .card046--bottom { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: end; } .card046--lodzenge { background: var(--detail); padding: 5px 25px; border-radius: 20px; color: white; margin: 0; } .card046--icon { text-align: right; } .card046--icon svg { fill: white; } /****************************************/ /****************************************/ /************** END CARDS ***************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /******** 18. START TESTIMONIALS ********/ /****************************************/ /****************************************/ /**** 18.1.1 Testimonial Carousel One ****/ /**** 18.1.2 Testimonial Carousel Two ****/ /**** 18.1.3 Testimonial Carousel Three ****/ /**** 18.1.4 Testimonial Carousel Four ****/ /**** 18.1.5 Testimonial Carousel Five ****/ /**** 18.2.1 Testimonial Card One ****/ /**** 18.2.2 Testimonial Card Two ****/ .testimonial-card-two { position: relative; isolation: isolate; } .testimonial-card-two--testimonial { margin: 35px 0 20px 35px; font-style: italic; } .testimonial-card-two--testimonial::before { content: '\201c'; font-size: 10rem; opacity: 1; font-family: serif; position: absolute; top: -55px; left: -5px; z-index: -1; line-height: 1em; color: transparent; font-weight: bold; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #F4F4F4; } .testimonial-card-two--testimonial::after { content: '\201d'; font-size: 10rem; opacity: 1; font-family: serif; position: absolute; bottom: -20px; right: -5px; z-index: -1; line-height: 1em; color: transparent; font-weight: bold; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #F4F4F4; } .testimonial-card-two--footer { display: grid; justify-items: end; grid-template-columns: minmax(0, 1fr); } .testimonial-card-two--image { width: 50px; border-radius: 50%; aspect-ratio: 1; overflow: hidden; position: relative; } .testimonial-card-two--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .testimonial-card-two--has-image { display: grid; grid-template-columns: auto minmax(0,1fr); grid-gap: 15px; } .testimonial-card-two--person { text-align: right; } .testimonial-card-two--attribution { margin: 0; padding: 0; font-size: 22px; } .testimonial-card-two--employer { margin: 0; padding: 0; color: grey; } img.testimonial-card-two--image--logo { object-fit: contain; max-height: 40px; width: auto; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /**** 18.2.3 Testimonial Card Three ****/ /**** 18.2.4 Testimonial Card Four ****/ /**** 18.2.5 Testimonial Card Five ****/ /**** 18.2.6 Testimonial Card Six ****/ .testimonial-card-six { background: var(--background-strong); padding: 30px 30px 30px; border-radius: 20px; display: grid; min-height: 300px; align-content: space-between; width: 100%; grid-gap: 15px; } .testimonial-card-six--testimonial, .testimonial-card-six--testimonial * { color: white; font-style: italic; } p.testimonial-card-six--attribution { color: var(--detail); margin: 0; font-size: 16px; } .testimonial-card-six--testimonial span { text-decoration: underline; text-decoration-color: var(--detail-secondary)!important; text-decoration-thickness: 2px!important; text-underline-offset: 2px; position: relative; } p.testimonial-card-six---job { padding: 0; color: var(--background-subtle); font-size: 16px; } .testimonial-card-six--bottom { display: grid; grid-template-columns: minmax(0,1fr); } .testimonial-card-six--image { width: 50px; border-radius: 50%; aspect-ratio: 1; overflow: hidden; position: relative; } .testimonial-card-six--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .testimonial-card-six--has-image { display: grid; grid-template-columns: auto minmax(0,1fr); grid-gap: 15px; } /**** 18.2.7 Testimonial Card Seven ****/ /**** 18.2.8 Testimonial Card Eight ****/ /**** 18.2.9 Testimonial Card Nine ****/ /****************************************/ /****************************************/ /*********** END TESTIMONIALS ***********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /**** 19. START THEME SPECIFIC EDITS *****/ /****************************************/ /****************************************/ /**** 12.16.2 Service Card Two ****/ a.service-card-two { /* display: grid; grid-template-rows: auto auto;*/ } .service-card-two-background { background-position: center!important; background-size: cover!important; background-position: center!important; background-size: cover!important; height: calc( 100% ); padding-top: 60%; } .service-card-two-text { background: #fff; padding: 18px 0px 3px; transition: 0.5s; margin: 0 0px; position: relative; } .service-card button.button--arrow { display: block; } a.service-card-two span.material-icons-outlined { color: #CD171E; font-size: 16px; position: relative; top: 3px; left: 5px; } a.service-card-two, a.service-card-two:hover, a.service-card-two a:hover, a.service-card-two a { text-decoration: none!important; } .service-card-two-title { font-size: 28px; } /**** ACF.1 FOO EVENTS FEED ****/ .events-feed--four-block { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 20px; } .acf-page-builder--events-feed { padding: 50px 0; } .acf-page-builder--events-feed--title { text-transform: capitalize; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .events-feed--four-block { grid-template-columns: minmax(0,1fr); } } /* 9.5.4 Post Card Four */ .foo-card_container { container: foocard / inline-size; height: 100%; } .foo-card { border: 1px solid #e2e3e5; height: 100%; /* margin: 0 0 20px; */ display: grid; grid-template-rows: auto 1fr; } .foo-card--image { width: 100%; aspect-ratio: 1; overflow: clip; position: relative; } .foo-card--srcset { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: absolute; inset: 0; } .foo-card_linkOverlay { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; } .foo-card--text { padding: 20px 20px 20px; display: grid; grid-template-rows: 1fr auto; } .foo-card--title { min-height: 100px; } .foo-card--date { color: rgb(205, 23, 30); margin: 0 0 10px; font-size: 16px; } .foo-card--cats span, .foo-card--cats a { background: white; padding: 5px 13px; font-size: 12px; border: 1px solid #999795; color: #999795; border-radius: 0px; width: fit-content; margin-right: 5px; } .foo-card--image { position: relative; } .foo-card--lodzenge { width: fit-content; background: white; padding: 4px 15px; position: absolute; top: 10px; right: 10px; } .foo-card--bottom { display: grid; grid-template-columns: auto auto; grid-gap: 4px; text-align: center; margin: 15px 0 0; padding: 20px 0 0; border-top: 1px solid #e2e3e5; } .foo-card--bottom:not(:has(.foo-card--button-tickets)) { grid-template-columns: minmax(0, 1fr); } .foo-card--bottom a { text-decoration: none!important; } a.foo-card--button { background: red; padding: 5px 9px; font-size: 13px; width: 100%; } a.foo-card--button-tickets { background: var(--button-background); color: var(--button-color); } a.foo-card--button-details { background: #222222; color: white; } @container foocard (min-width: 520px) { .foo-card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: minmax(0, 1fr); } .foo-card--title { min-height: 0px; font-size: 24px; margin: 0 0 5px; } .foo-card--bottom { margin-top: 0px; padding: 10px 0 0; } .foo-card--desc { font-size: 16px } } /* */ .sc--text_coloured { color: var(--detail); } /* */ .subscribe-footer p { text-align: center; font-weight: 500; } /* */ .special--link { background-image: linear-gradient(120deg, var(--detail) 0%, var(--detail) 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 100% 0%; border-bottom: 0px solid var(--detail); transition: background-size .125s ease-in; text-underline-offset: 3px; text-underline-position: auto; text-decoration: underline !important; text-decoration-color: var(--detail) !important; } .special--link:hover { background-size: 100% 100%; color: #000!important; } /* */ .sc--document_cpts > .col-full { max-width: 940px; } .sc--document_cpts h1 { text-align: center; } .sc--document_cpts h1::after { content: none; } .sc--document_cpts .custom-taxonomy-in-button-list { justify-content: center; padding-top: 20px; } /* */ .button--group.button--group--center { justify-content: center; align-items: center; } /* */ .sc_icons { vertical-align: bottom; margin-right: 3px; width: 16px; position: relative; top: -2px; } .sc--highlights { position: relative; overflow: visible; isolation: isolate; } .sc--highlights:after { content: ''; position: absolute; bottom: -4px; left: -8px; right: -8px; height: 12px; z-index: -1; background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; background-size: cover; } h2.card038--button { font-size: 14px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .sc_icons { top: 1px; } } /* */ h2 + .gallery-lightbox-outer { margin-top: 12px; } /****************************************/ /****************************************/ /******** END THEME SPECIFC EDITS *******/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /**** 20. START DESKTOP ONLY STYLING ****/ /****************************************/ /****************************************/ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ h2.card038--button { font-size: 17px; } } /****************************************/ /****************************************/ /****** END DESKTOP ONLY STYLING ********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /***** 21. START MOBILE STYLING *********/ /****************************************/ /****************************************/ @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ } /****************************************/ /****************************************/ /******** END MOBILE STYLING ************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /* 22. START INTERMEDIATE SIZES STYLING */ /****************************************/ /****************************************/ @media screen and (min-width: 768px) and (max-width: 1000px) { /* INTERMEDIATE RULES GO HERE */ } /****************************************/ /****************************************/ /**** END INTERMEDIATE SIZES STYLING ****/ /****************************************/ /****************************************/