/* Theme Name: RC Brown Description: Custom Theme Author: Farrow Creative Author URI: https://www.farrowcreative.co.uk Template: storefront Version: 3.0.0 */ /**** INDEX **************** 1. Fonts 1.1 Font Families 1.2 Link Rules 1.3 General Fonts 1.4 Specific Fonts 1.5 Buttons 1.6 On Black Fonts 1.7 Navigation Fonts 1.8 Footer Fonts 1.9 Fixes for Dumb Selectors 1.10 Mobile Fonts 2. Layout 2.1 Site Widths 2.2 Sidebar Width Rules 2.3 Body Padding 2.4 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 Logo Layout Rules 4.3 Top Menu Rules 4.4 Bottom Menu Rules 4.5 Mobile Menu Rules 4.6 Extended Mobile Menu Rules 4.7 Breadcrumbs 4.8 Social Menu Rules 4.9 WooCommerce Active Menu Rules 4.10 Fixed Heading Positioning 4.11 Above Header Widget Area 4.12 Animated Dropdown Menu 4.13.1 Animated Top Menu Hover States 4.13.2 Animated Bottom Menu Hover States 4.14 Add Pipe Element Between Menu Items 4.15 Position Logo Between Side Menus 4.16 Postion Both Menus Inline with the Logo 4.17 Custom Desktop Mobile Menu 4.18 Secondary Mobile Menu 5. Footer 5.1 Footer Menu 5.2 Below Footer Menu Styling 5.3 Cookie Preferences 5.4 Footer Grid Override 6. Bootstrap 6.1 Bootstrap / Storefront Fixes 6.2 Bootstrap / WooCommerce Fixes 6.3 Bootstrap Tabs 7. Flexslider 7.1 General Flexslider Rules 7.2 Header Slider Rules 8. WooCommerce 8.1 WooCommerce Popup Messages 8.2 Single Product Page Rules 8.3 General / Unsorted WooCommerce Rules 8.4 WooCommerce checkout background colour 8.6 General / Unsorted WooCommerce Rules 8.7 WooCommerce Feed Rules 8.8 WooCommerce Multi Crumbs 8.9 WooCommerce Input Fields 8.10 WooCommerce Account Area 8.11 WooCommerce Custom Product Card 8.12 WooCommerce Custom Category Card 9. Blog 9.1 Display Blog in Grid 9.2 Meta Info Rules 9.3 Single Post Rules 9.4 Post Feed Rules 9.5 Comments 9.6 Post Sidebar 10. Contact 10.1 Contact Form 7 Rules 11. Conversion Page 12. Bits & Bobs 12.1 Table Rules 12.2 Focus States 12.3 Image Display Rules 12.4 Display Nones 12.5 Remove Visual Composer Link at the Bottom of Page 12.6 Tabs 12.7 Search Box 12.8 Download File Icons 12.9 Viewport Animation Rules 12.10 Home Blocks Grid 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 Hide Visual Composer Buttons 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 Squares 12.40 Sidebar Menu 12.41 Material Icon Card 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 Blog Block 12.49 Team Member Card 12.50 Floating Social Share 12.51 Search Form 12.52 Funky Card 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 Carosels 12.62 Testimonial Carosel 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 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 14. Custom Page Templates 14.1 Homepage 14.2 Absolute Slider Template 14.3 Spash Grid Page 14.4 Testimonials 14.5 Empty 14.6 Secure Page Login 14.7 Portfolio 14.8 Smart Menu 14.9 Work 14.10 Side Template 15. Desktop Only Styling 16. Mobile Only Styling 17. Intermediate Stages Styling 18. Theme Specific Edits *****************************/ /****************************************/ /****************************************/ /*********** 1. START FONTS ************/ /****************************************/ /****************************************/ /**** 1.1 Font Families ****/ h1, h2, h3, h4, label { font-family: Garamond; font-family: 'Open Sans', sans-serif; } p, li, body, button, input, textarea, #page #mc_embed_signup input.email, #mc_embed_signup, .shop_table { font-family: Garamond; font-family: 'Open Sans', sans-serif; } .secondary-navigation a, .main-navigation a, .handheld-navigation a { font-family: Garamond; font-family: 'Open Sans', sans-serif; } .beta.site-title a { font-family: Garamond; font-family: 'Open Sans', sans-serif; } /**** 1.2 Link Rules ****/ a, a:hover { color: #e30613; } a.button:hover { text-decoration: none!important; } 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; }*/ /**** 1.3 General Fonts ****/ h1 { color: #222; font-weight: 100; font-size: 60px; line-height: 1.2em; } h1:after { content: " "; width: 60%; height: 1px; background: #81697a; margin: 10px 0px 10px; display: block; } h2 { color: #1d1d1b; font-weight: 500; font-size: 36px; line-height: 1.2em; } h3 { color: #444444; font-weight: 100; font-size: 22px; line-height: 1.2em; text-transform: uppercase; } h4 { color: #444444; font-weight: 700; font-size: 18px; line-height: 1.2em; text-transform: uppercase; letter-spacing: 1px; } p, li { line-height: 1.6em; color: #444444; font-size: 18px; } ol, ul { margin: 0 0 10px 29px; padding: 0; } p { margin-bottom: 18px; } /**** 1.4 Specific Fonts ****/ h2.item-title { font-size: 28px; color: red; } .meta-info { font-size: 20px; } #comments { color: #222; } .header-text h1 { color: #1d1d1b!important; font-size: 74px; } .page-template-template-fullwidth-slider .header-text-inner { padding: 90px 20px; } .page-template-template-fullwidth-slider .header-text h1 { font-size: 36px; } .page-template-template-fullwidth-slider .header-text h1:after { content: none; } .header-text h2 { color: #1d1d1b!important; } .header-text p { color: #1d1d1b!important; } .below-footer p, .below-footer a { font-size: 14px; text-decoration: none!important; } .footer-widgets h3 { text-transform: none!important; font-size: 24px!important; font-weight: 600; margin-top: 0!important; } h3 { margin-top: 0!important; } #colophon p, #colophon a { line-height: 1.3em; } .footer-widget-2 a { color: #E30613!important; text-decoration: none!important; font-weight: 700!important; } h1.videos-block-title, h1.blog-block-two-title, h1.videos-section-title { text-transform: none!important; text-align: center; font-size: 40px; font-weight: 700; width: 100%; } h1.videos-block-title:after, h1.blog-block-two-title:after, h1.videos-section-title:after { content: none!important; } header.page-header h1:after { content: none; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .block.footer-widget-2 { text-align: right; } } /* COMMON / Footer Menu */ .site-footer h1, .site-footer h2, .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: 16px; text-transform: uppercase; /* border-bottom: 1px solid red;*/ margin-bottom: 10px; padding-bottom: 7px; } /* sidebar fonts */ .widget-area .widget a:not(.button) { font-weight: 100; text-decoration: none; font-size: 18px; } .widget .widget-title, .widget .widgettitle { font-size: 23px; letter-spacing: 0; font-weight: 300; } /* slider fonts */ .header-text h1, .header-text h2, .header-text p, .header-text-inner h1, .header-text-inner h2, .header-text-inner p { color: white; /*text-shadow: 1px 1px 5px black;*/ } /* home blocks */ .home-blocks h4 { font-size: 18px; } /**** 1.5 Buttons ****/ /* COMMON / Button Colours */ button, input[type="button"], input[type="reset"], input[type="submit"], .button, .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 { border: 0px solid transparent; color: white!important; padding: 10px 25px 9px; background-color: #E32726; border-radius: 15px; } /* COMMON / Button Hover Colours */ button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button: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: #E32726!important; background-color: transparent!important; color: #E32726!important; } .handheld-navigation button { border: 0px solid transparent; } .button.popupbutton, button.popupbutton { color: #1d1d1b!important; border: 1px solid #1d1d1b!important; background-color: rgba(255, 255, 255, 1)!important; } .button.popupbutton:hover, button.popupbutton:hover { color: white!important; border: 1px solid #1d1d1b!important; background-color: #1d1d1b!important; } .button.white { color: #1d1d1b!important; background-color: rgba(255, 255, 255, 1)!important; } .button.white:hover { color: #1d1d1b!important; background-color: rgba(255, 255, 255, 0.6)!important; } .button.grey { color: white!important; background-color: rgba(0, 0, 0, 0.7)!important; } .button.grey:hover { color: white!important; background-color: rgba(0, 0, 0, 0.9)!important; } .button.red { color: white!important; background-color: #e30613!important; } .button.red:hover { color: white!important; background-color: #b1050f!important; } .button .material-icons { position: relative; top: 4px; font-size: 1em; margin: 0 7px; /*background: lightgrey; padding: 5px; border-radius: 50%;*/ } /* WooCommerce Buttons */ .woocommerce-error .button, .woocommerce-info .button, .woocommerce-message .button, .woocommerce-noreviews .button, p.no-comments .button { background:transparent!important; } #payment .place-order .button { font-size:16px; display:block; } .wc-proceed-to-checkout .button.checkout-button { line-height: 1; padding: 20px; width: auto!important; margin: 0; } .wcppec-checkout-buttons__button { padding-top:0; } /* Arrow Button */ a.button.arrow:after { border-left: 1px solid #ccc; content: "arrow_forward"; content: ""; font-family: 'Material Icons'; font-weight: 100; font-style: inherit; font-size: 24px; display: inline-block; line-height: 1; -moz-osx-font-smoothing: grayscale; position: relative; top: 5px; margin-left: 15px; border-left: 1px solid white; padding-left: 10px; transition: 0.5s; background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhbCIgZGF0YS1pY29uPSJhcnJvdy1yaWdodCIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtYXJyb3ctcmlnaHQgZmEtdy0xNCBmYS0zeCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjE2LjQ2NCAzNi40NjVsLTcuMDcxIDcuMDdjLTQuNjg2IDQuNjg2LTQuNjg2IDEyLjI4NCAwIDE2Ljk3MUwzODcuODg3IDIzOUgxMmMtNi42MjcgMC0xMiA1LjM3My0xMiAxMnYxMGMwIDYuNjI3IDUuMzczIDEyIDEyIDEyaDM3NS44ODdMMjA5LjM5MyA0NTEuNDk0Yy00LjY4NiA0LjY4Ni00LjY4NiAxMi4yODQgMCAxNi45NzFsNy4wNzEgNy4wN2M0LjY4NiA0LjY4NiAxMi4yODQgNC42ODYgMTYuOTcgMGwyMTEuMDUxLTIxMS4wNWM0LjY4Ni00LjY4NiA0LjY4Ni0xMi4yODQgMC0xNi45NzFMMjMzLjQzNCAzNi40NjVjLTQuNjg2LTQuNjg3LTEyLjI4NC00LjY4Ny0xNi45NyAweiIgY2xhc3M9IiI+PC9wYXRoPjwvc3ZnPg=="); background-position: center!important; background-size: contain!important; background-repeat: no-repeat!important; height: 50px; width: 50px; } a.button.arrow:hover:after { border-left: 1px solid #C71585!important; } /**** 1.6 On Black Fonts ****/ .on-black h1, .on-black h2, .on-black h3, .on-black h4, .on-black p, .on-black li, .on-black a { color: white; } /**** 1.7 Navigation Fonts ****/ /* top menu fonts */ .secondary-navigation ul.menu a, .main-navigation ul ul li, .secondary-navigation ul ul li { color: rgba(0, 0, 0, 0.8); font-size: 16px; font-weight: 600; } .handheld-navigation a { font-size: 16px; } /**** 1.8 Footer Fonts ****/ #colophon p, #colophon a { color: white; margin-bottom:0; } .footer-inner { text-align: center; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ /*.block.footer-widget-2 { text-align: right; }*/ } /**** 1.9 Fixes for dumb selectors ****/ .beta+h3, h2+h3 { border-top: 0px solid rgba(0,0,0,.05); padding-top: 0px; } blockquote+h2, blockquote+h3, blockquote+h4, blockquote+header h2, form+h2, form+h3, form+h4, form+header h2, ol+h2, ol+h3, ol+h4, ol+header h2, p+h2, p+h3, p+h4, p+header h2, table+h2, table+h3, table+h4, table+header h2, ul+h2, ul+h3, ul+h4, ul+header h2 { margin-top: 1em; } ul#menu-main-menu-1, ul#menu-main-menu { font-size: 0px; } /**** 1.10 Mobile Fonts ****/ @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ h1 { font-size: 32px; } h2 { font-size: 26px; } h3 { font-size: 22px; } h4 { font-size: 18px; } } /****************************************/ /****************************************/ /************* END FONTS **************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /*********** 2. START LAYOUT ************/ /****************************************/ /****************************************/ /**** 2.1 Site Widths ****/ .col-full { max-width: 1200px; width: 100%; padding-left: 20px; padding-right: 20px; margin: 0 auto!important; -webkit-box-sizing: border-box; box-sizing: border-box; } .narrow { max-width: 1100px; margin: 0 auto; } .narrower { max-width: 900px; margin: 0 auto; } .narrowest { max-width: 600px; margin: 0 auto; } #masthead .col-full { max-width: 1740px; width: 100%; padding: 0; } #colophon > .col-full { max-width: 1640px; } .below-footer .row { max-width: 1640px; margin: 0 auto; } /**** 2.2 Sidebar width rules ***/ .right-sidebar .widget-area { display: none; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .right-sidebar .content-area { width: calc( 100% - 0px ); float: left; margin-right: 0px; } .right-sidebar .widget-area { width: 25%; float: right; margin-right: 0; } /* COMMON / Template Primary Width */ .post-type-archive-product .content-area, .page-template-template-fullwidth-php .content-area, .page-template-template-homepage-php .content-area, .page-template-template-fullwidth-repeater-slider .content-area, .page-template-template-fullwidth-slider .content-area, .page-template-default .content-area, .search-results .content-area, .page-template-template-fullwidth-gallery .content-area, .page-template-template-fullwidth-absolute-slider .content-area, .single-jobvacancies .content-area, .page-template-template-codesnippets .content-area, .single-videos .content-area, .page-template-template-side-column .content-area { width: 100%; margin-right: 0px; } .search-results div#primary { min-height: 0px!important; } } /* COMMON / Template Sidebar Hide */ .search-results div#secondary, .post-type-archive-product div#secondary, .single-jobvacancies div#secondary, .page-template-template-side-column div#secondary { display: none; } /**** 2.3 Body Padding ***/ div#content { padding-top: 0px; } .page-template-template-fullwidth-repeater-slider div#content, .page-template-template-fullwidth-slider div#content { padding-top: 0px; } .page-template-template-fullwidth div#content, .post-type-archive-videos div#content, .blog div#content, .single-post div#content, .single-videos div#content, .team-member-single div#content, .single-team div#content, .post-type-archive-team div#content { padding-top: 200px; } .page-template-template-fullwidth-slider .header-slider, .page-template-template-fullwidth-slider-popup .header-slider { margin-bottom: 50px; } /**** 2.4 Misc Layout ***/ .hentry .entry-header { margin-bottom: 0; border: 0; } .hentry.type-post .entry-content { width:100%; } #primary, .hentry, .site-main { margin-bottom: 0px; } .vc_column-inner, .vc_row { background-size: cover; background-position: center; } /****************************************/ /****************************************/ /************* END LAYOUT **************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /*********** 3. START COLOURS ***********/ /****************************************/ /****************************************/ /**** 3.1 Header Colours ****/ #masthead { background:transparent; } #masthead > .col-full { background:transparent; } .entry-header { color: blue; } /**** 3.2 Top Level Nav Colours ****/ /* COMMON / Top Menu Background Colour */ .secondary-navigation { background: transparent; } /* COMMON / Top Menu Dropdown Background Colour */ .secondary-navigation ul ul, .secondary-navigation ul.menu ul { background-color: #FFA07A; } /* COMMON / Top Font Colour */ .main-navigation ul li a:hover, .main-navigation ul li:hover > a, .site-title a:hover, a.cart-contents:hover, .site-header-cart .widget_shopping_cart a:hover, .site-header-cart:hover > li > a, .site-header ul.menu li.current-menu-item > a, .current-menu-ancestor > a { color: #e30613!important; text-decoration: none; } /* COMMON / Top Dropdown Menu Item Colour */ .secondary-navigation ul li:hover ul.sub-menu li a { color:rgba(0,0,0,0.8); } /* COMMON / Top Dropdown Menu Item Hover Colour */ .secondary-navigation ul li:hover ul.sub-menu li a:hover { color:rgba(0,0,0,1); color: #e30613; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ /* COMMON / Top Menu Drop Down Width */ .primary-navigation ul ul li a, .secondary-navigation ul ul li a { width: 235px; } /* COMMON / Top Menu Hover Colour */ .secondary-navigation ul.menu a:hover { color: #595959; background: transparent; } /* COMMON / Top Menu Drop Down Hover Colour */ .secondary-navigation ul.sub-menu a:hover { background: transparent; color: #E30613; } .secondary-navigation .menu ul a { background: rgba(0, 0, 0, 0.0); } .has-y-scroll .secondary-navigation .menu ul a { background: rgba(255, 255, 255, 1); } .has-y-scroll header#masthead ul.sub-menu { -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%); box-shadow: 0 8px 12px rgb(0 0 0 / 18%); } } /**** 3.3 Bottom Level Nav Colours ****/ /* COMMON / Bottom Dropdown Menu Item Colour */ .primary-navigation ul li:hover ul.sub-menu li a { color:rgba(0,0,0,0.8); } /* COMMON / Bottom Dropdown Menu Item Hover Colour */ .primary-navigation ul li:hover ul.sub-menu li a:hover { color:rgba(0,0,0,1); } /* COMMON / Bottom Menu Background Colour */ .primary-navigation { background: lightgray; } /* COMMON / Bottom Menu Drop Down Background Colour */ .main-navigation ul.menu ul.sub-menu, .main-navigation ul.nav-menu ul.children { background-color: lightgray; } /* COMMON / Bottom Menu Hover Colour */ .primary-navigation .menu-item a:hover { background: orange; } .main-navigation ul.menu ul a:hover, .main-navigation ul.menu ul li.focus, .main-navigation ul.menu ul li:hover>a, .main-navigation ul.nav-menu ul a:hover, .main-navigation ul.nav-menu ul li.focus, .main-navigation ul.nav-menu ul li:hover>a { background-color: pink; } /* COMMON / Shopping Cart Background Colour */ #site-header-cart { background: #87CEFA; } /**** 3.4 Mobile Menu Nav Colours ****/ /* COMMON / Mobile Menu Link Colour */ .main-navigation ul li a, .site-title a, ul.menu li a, .site-branding h1 a, .site-footer .storefront-handheld-footer-bar a:not(.button), button.menu-toggle, button.menu-toggle:hover, .handheld-navigation .dropdown-toggle { color: #333333; } /* COMMON / Mobile Menu Arrow Color */ .handheld-navigation ul.menu li button::after { color: #333333!important; } /* COMMON / Mobile Menu Current Page Background Colour */ .handheld-navigation .current_page_item a { background: #F2F2F2; } /* COMMON / Mobile Menu X Colour */ button.menu-toggle:after, button.menu-toggle:before, button.menu-toggle span:before { background-color: #333333; } .handheld-navigation { border-top: 0px solid #eee; } .handheld-navigation li.social-menu a { display: inline-block!important; float: left; width: 20px; } button.dropdown-toggle:hover { background: transparent!important; } button.menu-toggle, button.menu-toggle:hover { background-color: transparent!important; } .handheld-navigation ul.menu > li.menu-item-has-children > a:after { display: none; } .handheld-navigation ul li a { padding-left: 20px; border-bottom: 1px solid #eee; } .handheld-navigation ul li.social-menu a { border-bottom: 0px solid #eee; } .site-header, .secondary-navigation ul ul, .main-navigation ul.menu > li.menu-item-has-children:after, .secondary-navigation ul.menu ul, .storefront-handheld-footer-bar, .storefront-handheld-footer-bar ul li > a, .storefront-handheld-footer-bar ul li.search .site-search, button.menu-toggle:hover { background-color: transparent; } button.menu-toggle { background-color: transparent; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ /* COMMON / Mobile Menu Background Colour */ #masthead { background:white; } } .handheld-navigation a { background: white; } /**** 3.5 Body Background Colours ****/ /* COMMON / Outer Body Background Colour */ body { background-color: white; } /* COMMON / Inner Body Background Colour */ #content > .col-full { background: white; } /**** 3.6 Footer Colours ****/ /* COMMON / Outer Footer Background Colour */ #colophon { background: #444444; padding-bottom: 0px; } /* COMMON / Inner Footer Background Colour */ #colophon > .col-full { background: #444444; padding: 0 20px; } /* COMMON / Inner Footer Background Colour */ .below-footer { background: #444444; } /****************************************/ /****************************************/ /************* END COLOURS **************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /********** 4. START HEADER *************/ /****************************************/ /****************************************/ /**** 4.1 General Menu Rules ****/ /* COMMON / Hide Bottom Menu */ .primary-navigation, .storefront-primary-navigation ul#site-header-cart { display: none; } /* COMMON / Hide Top Menu */ /*nav.secondary-navigation { display: none; }*/ /* COMMON / Box Shadow on Dropdown Menu */ header#masthead ul.sub-menu { -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.175); background: #EBF0F6; } div#page { position: relative; } #masthead { margin-bottom: 0px; padding-top: 0px; z-index: 10; } #masthead .col-full { padding-left: 0px; padding-right: 0px; } .main-navigation ul.menu > li.menu-item-has-children > a:after, .main-navigation ul.menu > li.page_item_has_children > a:after, .main-navigation ul.nav-menu > li.menu-item-has-children > a:after, .main-navigation ul.nav-menu > li.page_item_has_children > a:after { margin-left: .5em; } .main-navigation ul ul { margin-left: 0; } .site-header { border-bottom: 0px solid transparent; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ #masthead > .col-full { padding: 75px 20px 20px; } } /**** 4.2 Logo Layout Rules ****/ /* Desktop Logo Rules */ @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .site-header .site-branding img { max-width: 100%; width: 100%; } .storefront-secondary-navigation .site-header .site-branding { width: 22%; float: left; margin-right: 20px; margin-bottom: 0px; } .site-header .site-branding { margin-right:2%; width:20%; transition: 0.5s; } } /* Mobile Logo Rules */ @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .site-branding { float: none!important; text-align: center; padding: 0 15px; } .site-branding { width: 75%; display: inline-block; } .site-header .custom-logo-link { float:none; } .site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img { max-width: 200px!important; width: 100%; /*margin: 0 auto;*/ } } /**** 4.3 Top Menu Rules ****/ /* COMMON / Top Menu Position */ .secondary-navigation { top: -4px; position: relative; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .secondary-navigation .menu { width: 100%; float: none; text-align: left; } .main-navigation ul li, .secondary-navigation ul li { margin-bottom: 0px; } .storefront-secondary-navigation .site-header .secondary-navigation { width: calc( 78% - 20px ); float: right; margin-right: 0; margin-bottom: 0; } .secondary-navigation .menu a { padding: 0px 15px 16px; transition: 0.5s; } } ul#menu-main-menu { margin-top: 0px; } .secondary-navigation ul.menu>li.menu-item-has-children>a::after, .secondary-navigation ul.menu>li.page_item_has_children>a::after, .secondary-navigation ul.nav-menu>li.menu-item-has-children>a::after, .secondary-navigation ul.nav-menu>li.page_item_has_children>a::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-style: normal; font-variant: normal; font-weight: 400; line-height: 1; font-family: 'Font Awesome 5 Free'; font-weight: 900; line-height: inherit; vertical-align: baseline; content: "\f107"; margin-left: 1em; } .secondary-navigation ul.menu ul li.menu-item-has-children>a::after, .secondary-navigation ul.menu ul li.page_item_has_children>a::after, .secondary-navigation ul.nav-menu ul li.menu-item-has-children>a::after, .secondary-navigation ul.nav-menu ul li.page_item_has_children>a::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-style: normal; font-variant: normal; font-weight: 400; line-height: 1; font-family: 'Font Awesome 5 Free'; font-weight: 900; line-height: inherit; vertical-align: baseline; content: "\f105"; float: right; line-height: 1.618; } /* Fixes weird issue with the extra pixel of margin above non drop down menus */ @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .main-navigation ul.menu>li.menu-item-has-children>a::after, .main-navigation ul.menu>li.page_item_has_children>a::after, .main-navigation ul.nav-menu>li.menu-item-has-children>a::after, .main-navigation ul.nav-menu>li.page_item_has_children>a::after { font-size: 0.8em; } .secondary-navigation ul.menu>li.menu-item-has-children>a::after, .secondary-navigation ul.menu>li.page_item_has_children>a::after, .secondary-navigation ul.nav-menu>li.menu-item-has-children>a::after, .secondary-navigation ul.nav-menu>li.page_item_has_children>a::after { font-size: 0.8em; display: none; } } /* Fix if you turn on WooCommerce */ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .woocommerce-active .site-header .site-search { display: none; } .storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation { width: calc( 80% - 20px ); float: right; margin-right: 0px; } .storefront-secondary-navigation.woocommerce-active .site-header .site-branding { width: 20%; float: left; margin-right: 20px; margin-bottom: 0px; } .site-header-cart .cart-contents { padding: 24px 0 25px; } } /* COMMON / Top Menu Drop Down Items */ .secondary-navigation .menu ul a { padding: 8px 15px!important; font-weight: 600; font-size: 1em!important; } .secondary-navigation .menu ul ul { margin-top: 0; } /**** 4.4 Bottom Menu Rules ****/ /* COMMON / Bottom Menu First Generation */ .primary-navigation ul.menu>li>a { padding: 22px 15px; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ /*.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a { padding: 25px 15px; }*/ .primary-navigation { padding-left: 30px; } .main-navigation ul.menu ul li a, .main-navigation ul.nav-menu ul li a { padding: 10px 20px; font-weight: 400; font-size: 1em; } } #site-header-cart { padding-left: 30px; padding-right: 30px; } #menu-primary-menu .menu-item-has-children > a:after { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; content: "\f107"; margin-left: 8px; } #menu-primary-menu .sub-menu .menu-item-has-children > a:after { content: "\f105"; } /**** 4.5 Mobile Menu Rules ****/ button.menu-toggle { right: 45px; top: 20px; /* top: calc( 50% - 20px ); */ /*padding-top: 6%;*/ max-width: 30%; /* padding-top: calc( 28% - 23px ); */ } .handheld-navigation ul li a { padding: 16px 30px 16px!important; width: 100%!important; } .handheld-navigation ul.sub-menu li a { padding-left: 45px!important; } .handheld-navigation ul.menu .sub-menu.toggled-on { margin-bottom: 0px; display: block; width: 100%; } .dropdown-toggle::after { display: inline-block; margin-left: 0em; vertical-align: 0em; content: ""; border-top: 0 solid; border-right: 0 solid transparent; border-bottom: 0; border-left: 0 solid transparent; } button.dropdown-toggle { padding: 15px 20px; } .handheld-navigation ul.menu li { display: block; width: 100%; } .handheld-navigation { width: 100%; } .handheld-navigation ul ul { position: inherit; left: 0px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ ul.sub-menu.toggled-on a { padding-top: 18px; padding-bottom: 18px; } li.menu-item { margin-bottom: 0px; } .site-branding { padding-bottom: 20px; padding-top: 20px; } #masthead { padding-top:0px; padding-bottom: 0px; } .main-navigation ul ul li a { padding-left: 40px; } .main-navigation ul.sub-menu ul.sub-menu li a { padding-left: 60px; } } /* Mobile Menu Button Button Rules */ button.menu-toggle { right: 0; max-width: 100%; margin: 0; position: absolute; border: 0; } button.menu-toggle span:before, button.menu-toggle:after, button.menu-toggle:before { height: 3px; width: 35px; } button.menu-toggle:before { -webkit-transform: translateY(-8px); -ms-transform: translateY(-8px); transform: translateY(-8px); } button.menu-toggle: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; } .menu-toggle span { visibility: hidden; } .menu-toggle span:before { visibility: visible; } /***** 4.6 Extended Mobile Menu Rules *****/ @media screen and (min-width: 768px) and (max-width: 1000px) { /* INTERMEDIATE RULES GO HERE */ /* .menu-toggle, .handheld-navigation, .main-navigation.toggled .handheld-navigation, .main-navigation.toggled div.menu { display: inline-block!important; } nav.secondary-navigation, .primary-navigation, ul#site-header-cart { display: none!important; } nav#site-navigation { width: 100%!important; } #masthead > .col-full { padding: 20px 0px; height: 0px; } .site-branding { width: 75%!important; display: inline-block!important; padding-bottom: 20px!important; padding-top: 20px!important; float: none!important; text-align: center!important; padding: 0 15px 10px!important; } .site-header .custom-logo-link { float: none!important; } .site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img { max-width: 100%!important; width: 210px!important; } .main-navigation ul ul.sub-menu--is-touch-device, .secondary-navigation ul ul.sub-menu--is-touch-device { display: block!important; left: 0!important; width: 100%!important; } .handheld-navigation ul.menu .sub-menu.toggled-on { margin-bottom: 17px!important; } .handheld-navigation ul li a { padding: 16px 30px 16px 45px!important; } .handheld-navigation ul.menu ul li.menu-item-has-children > a::after { display: none; } */ } /**** 4.7 Breadcrumbs ****/ .storefront-breadcrumb { display: none; } .woocommerce-breadcrumb { padding: 20px 0; margin: 0; } .storefront-breadcrumb .col-full { background: white; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .storefront-breadcrumb { padding: 0px 0; margin: 0px 0 0px; } } /**** 4.8 Social Menu Rules ****/ /* .social-menu a { top: 0px; position: absolute; left: 0px; opacity: 0; width:100%; height: 100%; } .social-menu { float: right; min-width: 53px; margin-right: 20px; position:relative; top:15px; }*/ @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .social-menu { float: none; display: inline-block; left: 0px; margin: 10px 10px 10px 0; top:0; } } .secondary-navigation .social-menu:before { font-size: 14px; padding: 3px; } .secondary-navigation .social-menu { min-width: 22px; margin-right: 13px; } /**** 4.9 WooCommerce Active Menu Rules ****/ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .woocommerce-active .site-header .site-header-cart, .woocommerce-active .site-header .site-search { width: 20%; } .woocommerce-active .site-header .secondary-navigation { width:56%; margin-right:2%; } .woocommerce-active .site-header .main-navigation { width: 78%; margin-right:2%; } } /*** 4.10 Fixed Heading Positioning ****/ .mastead-height-mirror { height: 0!important; } @media (max-width: 767px) { /* MOBILE RULES GO HERE */ .mastead-height-mirror { height: 0!important; } } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ header#masthead { position: absolute; width: 100%; top: 0; } .has-y-scroll header#masthead { position: fixed; } body.admin-bar.has-y-scroll header#masthead { top: 32px; } .has-y-scroll #masthead > .col-full { padding: 0 20px; } .has-y-scroll.storefront-secondary-navigation .site-header .site-branding, .has-y-scroll img.custom-logo { width: auto!important; max-height: 35px!important; margin-top: 3px; } .has-y-scroll header#masthead { 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); } .has-y-scroll .secondary-navigation { top: 0px; } .has-y-scroll .secondary-navigation .menu a { padding: 10px 15px; } .has-y-scroll .primary-navigation ul.menu>li>a { padding: 10px 15px; } .has-y-scroll .site-header-cart .cart-contents { padding: 10px 0; } .has-y-scroll .secondary-navigation ul li ul.sub-menu { top: 49px; } .has-y-scroll .primary-navigation ul li ul.sub-menu { top: 48px; } .has-y-scroll .above-header-sidebar-relative { display: none; } .has-y-scroll .strapline-inner a { display: inline-block; margin-bottom: 10px; margin-top: 5px; } /*.page-template-template-homepage:not(.has-y-scroll) .site-branding { display: none!important; }*/ } /*** 4.10.2 Fixed Heading Positioning Change on up and down scroll ****/ /* body.has-y-scroll.has-y-scroll-down header#masthead { top: -145px!important; transition: 1s; } body.has-y-scroll.has-y-scroll-up header#masthead { top: 0px!important; transition: 1s; } body.admin-bar.has-y-scroll.has-y-scroll-up header#masthead { top: 32px!important; transition: 1s; }*/ /*** 4.11 Above Header Widget Area ***/ .above-header-sidebar-relative { position: relative; z-index: 1; background: white; } .above-header-sidebar-outer { position: absolute; width: 100%; top: 0; z-index: 6000; } .above-header-sidebar { max-width: 1200px; margin: 0 auto; padding: 0px 20px; } .above-header-sidebar-inner { float: right; padding: 10px 20px; background: white; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .above-header-sidebar-outer { position: initial; } .above-header-sidebar { padding: 0px; } .above-header-sidebar-inner { float: none; } } /**** 4.11.2 Above Header Widget Area Full Width Block Rules ****/ .above-header-sidebar-outer { position: relative; } .above-header-sidebar-inner { width: 100%; float: none; text-align: center; } /*** 4.12 Animated Dropdown Menu ***/ @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .primary-navigation ul ul.sub-menu, .primary-navigation ul ul.sub-menu ul.sub-menu, .secondary-navigation ul ul.sub-menu { display: initial; } } .primary-navigation a, .secondary-navigation a { -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; } .primary-navigation ul li ul.sub-menu, .secondary-navigation ul li ul.sub-menu { float:left; list-style:none; margin:0; padding:0!important; position:absolute; left:0px; top:71px; opacity:0; visibility:hidden; -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; } .secondary-navigation ul li ul.sub-menu { top: 33px; } .primary-navigation ul li ul.sub-menu li, .secondary-navigation ul li ul.sub-menu li { 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; } .primary-navigation ul li:hover ul.sub-menu, .secondary-navigation ul li:hover ul.sub-menu { opacity:1; visibility:visible; } .primary-navigation ul li:hover ul.sub-menu li, .secondary-navigation ul li:hover ul.sub-menu li { margin-top:0; opacity:1; } .primary-navigation ul li:hover ul.sub-menu li a, .secondary-navigation ul li:hover ul.sub-menu li a { -moz-transition:color 0.1s ease-out; -webkit-transition:color 0.1s ease-out; -o-transition:color 0.1s ease-out; transition:color 0.1s ease-out; } .primary-navigation ul li:hover ul.sub-menu li a:hover, .secondary-navigation ul li:hover ul.sub-menu li a:hover { -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; } .primary-navigation ul li ul.sub-menu li ul.sub-menu, .secondary-navigation ul li ul.sub-menu li ul.sub-menu { float:left; list-style:none; margin:0; padding:0; position:absolute; left:61px; 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; } .primary-navigation ul li ul.sub-menu li ul.sub-menu li, .secondary-navigation ul li ul.sub-menu li ul.sub-menu li { clear:both; opacity:1; } .primary-navigation ul li ul.sub-menu li:hover ul.sub-menu, .secondary-navigation ul li ul.sub-menu li:hover ul.sub-menu { opacity:1; left:235px; visibility:visible; } /*** 4.13.1 Animated Top Menu Hover States ***/ ul:not(.sub-menu) > li a { /* background: red;*/ } /* .menu-main-menu-container 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 .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: 2px solid #FFD503; content: ''; padding-bottom: inherit; } nav.secondary-navigation ul 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 .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: 2px solid #FFD503; content: ''; padding-bottom: inherit; } .home nav.secondary-navigation a:before { border-top: 2px solid #FFD503; } nav.secondary-navigation a:hover:before, .site-header ul.menu li.current-menu-item > a:before, .menu-main-menu-container ul:not(.sub-menu) > li a:hover:before { -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } nav.secondary-navigation a:before, nav.secondary-navigation .current_page_item a{ border-color: #FFD503!important; } .home nav.secondary-navigation a:before, .home nav.secondary-navigation .current_page_item a{ border-color: #ffffff!important; } .secondary-navigation ul.menu>li.menu-item-has-children>a::before, .secondary-navigation ul.menu>li.page_item_has_children>a::before, .secondary-navigation ul.nav-menu>li.menu-item-has-children>a::before, .secondary-navigation ul.nav-menu>li.page_item_has_children>a::before { content: " "; margin-left: 0em; } */ /*** 4.13.2 Animated Bottom Menu Hover States ***/ /* .storefront-primary-navigation 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 .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: 2px solid #FFD503; content: ''; padding-bottom: inherit; } .storefront-primary-navigation ul 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 .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: 2px solid #FFD503); content: ''; padding-bottom: inherit; } .home .storefront-primary-navigation a:before { border-top: 2px solid #FFD503; } .storefront-primary-navigation a:hover:before, .site-header ul.menu li.current-menu-item > a:before { -ms-transform: scaleX(1)!important; -webkit-transform: scaleX(1)!important; transform: scaleX(1)!important; } .storefront-primary-navigation a:before, .storefront-primary-navigation .current_page_item a{ border-color: #FFD503!important; } .home .storefront-primary-navigation a:before, .home .storefront-primary-navigation .current_page_item a{ border-color: #ffffff!important; } .storefront-primary-navigation ul.menu>li.menu-item-has-children>a::before, .storefront-primary-navigation ul.menu>li.page_item_has_children>a::before, .storefront-primary-navigation ul.nav-menu>li.menu-item-has-children>a::before, .storefront-primary-navigation ul.nav-menu>li.page_item_has_children>a::before { content: " "; margin-left: 0em; } */ /*** 4.14 Add Pipe Element Between Menu Items ***/ /* Top Menu Pipe */ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ ul#menu-main-menu > li.menu-item:before { right: 0; left: auto; } ul#menu-main-menu > li.menu-item:before { content: "|"; position: absolute; color: #5f5f5f; left: -2px; top: -2px; z-index: 0; width: 2px; } ul#menu-main-menu > li.md:before, ul#menu-main-menu > li:first-of-type:before, ul#menu-main-menu li.social-menu:before { content: none!important; } .has-y-scroll ul#menu-main-menu > li.menu-item:before { top: 9px; } } /* Bottom Menu Pipe */ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .primary-navigation > ul > li.menu-item:before { right: 0; left: auto; } .primary-navigation > ul > li.menu-item:before { content: "|"; position: absolute; color: #5f5f5f; left: -2px; top: 20px; z-index: 0; width: 2px; } .primary-navigation > ul > li.md:before, .primary-navigation > ul > li:first-of-type:before, .primary-navigation li.social-menu:before { content: none!important; } .has-y-scroll .primary-navigation > ul > li.menu-item:before { top: 9px; } } /*** 4.15 Position Logo Between Side Menus ***/ /* @media (min-width: 768px) { .col-full.header-outer { position: relative; } ul#site-header-cart { display: none!important; } .site-branding { width: 100%!important; margin-right: 0!important; position: absolute!important; left: 0!important; } a.custom-logo-link { margin: 0 auto!important; position: relative; width: 160px!important; z-index: 50!important; } nav.secondary-navigation { max-width: calc( 50% - 80px )!important; } .storefront-primary-navigation { max-width: calc( 50% - 100px )!important; } .storefront-primary-navigation { position: absolute; top: 20px; left: 20px; } .secondary-navigation { top: 0px; } .secondary-navigation .social-menu { min-width: 22px; margin-right: 40pxpx; } .primary-navigation { padding-left: 0px; } .secondary-navigation .menu a, .primary-navigation ul.menu>li>a { padding: 16px 15px; } } @media screen and (min-width: 768px) { .main-navigation ul li a, .secondary-navigation ul.menu a { color: rgba(0, 0, 0, 0.9); text-shadow: 1px 1px 5px white; } .page-template-template-homepage:not(.has-y-scroll) .main-navigation ul li a, .page-template-template-homepage:not(.has-y-scroll) .secondary-navigation ul.menu a, .page-template-template-fullwidth-absolute-slider:not(.has-y-scroll) .main-navigation ul li a, .page-template-template-fullwidth-absolute-slider:not(.has-y-scroll) .secondary-navigation ul.menu a, .page-template-template-fullwidth:not(.has-y-scroll) .main-navigation ul li a, .page-template-template-fullwidth:not(.has-y-scroll) .secondary-navigation ul.menu a, .post-type-archive-movements:not(.has-y-scroll) .main-navigation ul li a, .post-type-archive-movements:not(.has-y-scroll) .secondary-navigation ul.menu a { color: rgba(255, 255, 255, 0.9); text-shadow: 1px 1px 5px black; } .page-template-template-homepage:not(.has-y-scroll) .main-navigation ul.sub-menu li a, .page-template-template-homepage:not(.has-y-scroll) .secondary-navigation ul.sub-menu a, .page-template-template-fullwidth-absolute-slider:not(.has-y-scroll) .main-navigation ul.sub-menu li a, .page-template-template-fullwidth-absolute-slider:not(.has-y-scroll) .secondary-navigation ul.sub-menu a, .page-template-template-fullwidth:not(.has-y-scroll) .main-navigation ul.sub-menu li a, .page-template-template-fullwidth:not(.has-y-scroll) .secondary-navigation ul.sub-menu a { color: rgba(0, 0, 0, 0.9); text-shadow: 1px 1px 5px white; } ul.sub-menu li a { color: rgba(0, 0, 0, 0.9)!important; text-shadow: 1px 1px 5px white!important; } body:not(.page-template-template-homepage):not(.has-y-scroll) header#masthead { height: 145px; } body:not(.page-template-template-homepage) div#content { padding-top: 145px; } .page-template-template-fullwidth-absolute-slider div#content { padding-top: 100px!important; } body:not(.page-template-template-homepage):not(.has-y-scroll) .site-branding img { max-height: 98px!important; width: auto!important; margin: 0 auto!important; } body:not(.page-template-template-homepage):not(.has-y-scroll) header#masthead { background-color: white!important; } .page-template-template-fullwidth-absolute-slider:not(.has-y-scroll) .site header#masthead, .page-template-template-fullwidth:not(.has-y-scroll) .site header#masthead, .post-type-archive-movements:not(.has-y-scroll) .site header#masthead { background-color: transparent!important; } .woocommerce-active .site-header .main-navigation { width: 100%!important; margin-right: 0%!important; } .has-y-scroll .storefront-primary-navigation { top: 0px; left: 20px; } .has-y-scroll.storefront-secondary-navigation .site-header .site-branding, .has-y-scroll img.custom-logo { width: 100%!important; } .primary-navigation a, nav.secondary-navigation a { font-size: 18px!important; } .primary-navigation ul.sub-menu a, nav.secondary-navigation ul.sub-menu a { font-size: 16px!important; } } */ /*** 4.16 Postion Both Menus Inline with the Logo ***/ /* @media (min-width: 768px) { .storefront-secondary-navigation .site-header .site-branding { width: 100%!important; margin-right: 0px!important; margin-bottom: 0px!important; } .storefront-secondary-navigation .site-header .secondary-navigation { width: calc( 100% )!important; } .primary-navigation { padding-left: 0px!important; } .col-full.header-outer > .col-full { background: red; display: contents!important; } .col-full.header-outer { display: grid!important; grid-gap: 0px 40px!important; grid-template-areas: "sitebranding secondarynav" "sitebranding primarynav"; grid-template-rows: 1fr; grid-template-columns: 410px 1fr; align-items: center; } .site-branding { grid-area: sitebranding; } nav.secondary-navigation { grid-area: secondarynav; } .storefront-primary-navigation { grid-area: primarynav; } } */ /*** 4.17 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: url(/wp-content/uploads/2021/01/photodune-AjAM9gbp-modern-office-interior-xxl.jpg); 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; } /*** 4.18 Secondary Mobile Menu ***/ button.open-secondary-mobile-menu-button { position: absolute; right: 150px; border: none; background: transparent; padding: 0; } .secondary-mobile-menu button.accordion.active span.material-icons { position: relative; top: 4px; } .secondary-mobile-menu button.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 (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%; } } /****************************************/ /****************************************/ /********** END HEADER *****************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /********** 5. START FOOTER *************/ /****************************************/ /****************************************/ .footer-widgets { padding: 50px 0 35px; border-bottom: 0; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .footer-widgets { padding: 20px 0 1px; } } .widget { margin: 0 0 0 0; } .site-footer { padding-top: 0px; } .footer-widgets.row-1.col-1.fix, .footer-widgets.row-1.col-2.fix, .footer-widgets.row-1.col-3.fix, .footer-widgets.row-1.col-4.fix { width: 100%; max-width: 100%; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } /*** 5.1 Footer Menu Styling ****/ #colophon .widget ul ul { margin-left: 0em; } #colophon .widget_nav_menu ul li { margin-bottom: 0px; } #colophon .menu { padding-bottom: 10px; } #colophon .menu a { text-decoration: none; margin-bottom: 5px; line-height: 1.4em; } #colophon .menu li.social-menu { display: inline-block; width: 30px; } /*** 5.2 Below Footer Menu Styling ****/ .below-footer { padding: 10px 10px 35px; } .below-footer .row { margin: 0 auto; } .below-footer p { margin-bottom: 0px!important; } .social.Links { margin: 20px 0; } .social.Links a { font-size: 30px; margin: 28px 5px; text-decoration: none; } .social.Links a:first-of-type { margin-left: 0px!important; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .below-footer .widget { width: 50%; display: inline-block; } .below-footer .widget:last-of-type { text-align: right; } } /*** 5.3 Cookie Preferences ****/ .cookie-notice-banner { display: grid; padding: 20px; position: fixed; bottom: 0; left: 0; width: 100%; background: #f5f5f5; grid-template-columns: 1fr 340px; z-index: 50; } .manage-cookies-body { display: grid; grid-template-columns: 1fr 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%; right: -64px; 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; } .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; } .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 only screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cookie-notice-banner-buttons { align-content: center; display: grid; grid-template-columns: 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: 40px; } .manage-cookies-inner { position: relative; max-height: 100vh; overflow: auto; } .cookie-notice-banner-buttons { min-width: 0px; width: 100%; } } /*** 5.4 Footer Grid Override ****/ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .footer-widgets { display: grid; grid-gap: 15px; grid-template-columns: 1fr 1fr; } .footer-widgets::before, .footer-widgets::after { content: none; } .footer-widgets .block { width: 100%!important; margin-right: 0%!important; /* display: grid; align-items: start;*/ } } .footer-widgets img { margin-bottom: 35px; } /****************************************/ /****************************************/ /********** END FOOTER *****************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /********* 6. START Bootstrap ***********/ /****************************************/ /****************************************/ /**** 6.1 Bootstrap / Storefront Fixes ****/ @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { -ms-flex: 0 0 100%!important; flex: 0 0 100%!important; max-width: 100%!important; } } .container { width: 100%; padding-right: 0px; padding-left: 0px; margin-right: 0px; margin-left: 0px; max-width: 100%!important; } .handheld-navigation .dropdown-toggle::after { border-top: .0em solid!important; border-bottom: 0!important; } /**** 6.2 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%; padding-left: 0px; padding-right: 0px; } .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.3 Bootstrap Tabs ****/ .nav-tabs { margin: 0; } .nav-link { border-radius: 0; border: none!important; color: white; padding: 5px 15px; } .nav-link.active { background-color: red!important; 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; } /****************************************/ /****************************************/ /********** END Bootstrap **************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /******** 7. START FLEXSLIDER **********/ /****************************************/ /****************************************/ /**** 7.1 General Flexslider Rules ****/ .flexslider { margin: 0 0 0px!important; background: #fff; border: 0px solid #fff!important; position: relative; zoom: 1; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0); -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0); box-shadow: 0 1px 4px rgba(0, 0, 0, 0); } ul.slides { margin: 0; } ul.slides li { background-repeat: no-repeat; background-size: cover; background-position: center; } ol.flex-control-nav.flex-control-paging { display: none!important; } .flex-direction-nav a { height: 40px!important; padding-top: 10px; } .flex-direction-nav a { width:65px !important; height:65px !important; background:url(/wp-content/themes/rcbrown/assets/images/slider-direction-thin-white.png) no-repeat 0 0 !important; top: calc( 50% - 30px ) !important; } .flex-direction-nav .flex-next{background-position:100% 0 !important;right:0px !important;} .flex-direction-nav .flex-prev{left:0px !important;} .flexslider:hover .flex-next{opacity:0.8 !important;right:5px !important;} .flexslider:hover .flex-prev{opacity:0.8 !important;left:5px !important;} .flex-control-nav{bottom:10px !important;line-height:11px !important;} .flex-control-paging li a{height:11px !important;width:11px !important;} .flex-direction-nav a.flex-next:before, .flex-direction-nav a:before { content: ' '!important; } a.flex-next, a.flex-prev { font-size: 0; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .flex-direction-nav a { width: 30px !important; height: 29px !important; background-size: cover!important; margin: -20px 15px 0!important; } } /**** 7.2 Header Slider Rules ****/ .header-slider { position: relative; } .header-text { top: 0px; z-index: 9; width: 100%; left: 0px; height: 100%; display: grid; } ul.slides li, .header-text { min-height: 300px!important; } .header-text-background { background: linear-gradient(to right, rgba(255,255,255,0.6), rgba(0,0,0,0.2), rgba(0,0,0,0.3)); width: 100%; height: 100%; } .home .header-text-background { background: transparent; } .header-text-max-width { max-width: 1200px; margin: 0 auto; height: 100%; display: grid; align-items: normal; /* align-items: center;*/ grid-template-columns: 1fr 360px; grid-gap: 35px; padding-top: 150px; } .header-text-inner { width: 100%; display: block; max-width: 600px; padding: 20px 20px 140px; /*position: absolute;*/ bottom: 0; } /* BELOW IS THE CODE TO MAKE FLEXSLIDER FULL WIDTH BACKGROUND */ /* .header-slider { position: absolute; top: 0; width: 101%!important; z-index: -1; left: -2px; } header#masthead { margin-bottom: 170px; } */ /****************************************/ /****************************************/ /********** END FLEXSLIDER *************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /********* 8. START WOOCOMMERCE *********/ /****************************************/ /****************************************/ /**** 8.1 WooCommerce Popup Messages ****/ .woocommerce-info, .woocommerce-noreviews, p.no-comments { background-color: blue; } /* COMMON / Woocommerce Message */ .site-content > .col-full > .woocommerce > .woocommerce-message:first-child, .site-content > .col-full > .woocommerce > .woocommerce-info:first-child, .site-content > .col-full > .woocommerce > .woocommerce-error:first-child, ul.woocommerce-error, .woocommerce-info, .woocommerce-noreviews, p.no-comments { margin: 0 0 20px; background: black; } ul.woocommerce-error li { color: white; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-noreviews::before, p.no-comments::before { font-weight: 600; } /**** 8.2 Single Product Page Rules ****/ /* .woocommerce-product-gallery__image.flex-active-slide { width: 100%!important; }*/ /** PRODUCT SINGLE GRID / STICKY RULES **/ body.single-product, body.single-product #page, body.single-product .product { overflow: visible!important; } .single-product div.product { display: grid; grid-gap: 30px; grid-template-areas: "productgallery producttextarea" "relatedproducts relatedproducts" "tabswrapper tabswrapper" "upsells upsells"; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; margin-bottom: 25px; } .woocommerce-product-gallery { grid-area: productgallery; } .summary.entry-summary { grid-area: producttextarea; } .related.products { grid-area: relatedproducts; } .woocommerce-tabs.wc-tabs-wrapper { grid-area: tabswrapper; } section.up-sells.upsells.products { grid-area: upsells; } .single-product div.product::before, .single-product div.product::after { content: none; } figure.woocommerce-product-gallery__wrapper { position:-webkit-sticky; position: sticky; top: 0px; } a.woocommerce-product-gallery__trigger { position:-webkit-sticky; position: sticky; top: 150px; right: 50px; } a.woocommerce-product-gallery__trigger { display: none!important; } figure.woocommerce-product-gallery__wrapper:before { -moz-osx-font-smoothing: grayscale; font-family: 'Font Awesome 5 Free'; font-weight: 900; line-height: inherit; content: "\f00e"; position: absolute; right: 10px; top: 10px; background: #eeeeee; z-index: 1; padding: 4px 7px 4px 9px; border-radius: 3px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .single-product div.product { /* display: block;*/ grid-template-areas: "productgallery" "producttextarea" "relatedproducts" "tabswrapper" "upsells"; grid-template-rows: 1fr; grid-template-columns: 1fr; } .single-product div.product .woocommerce-product-gallery { margin-bottom: 0; } } @media (min-width: 768px) { .single-product div.product .woocommerce-product-gallery { width: calc( 100% ); margin-right: 0px; margin-bottom: 0px; } .single-product div.product .summary { width: calc( 100% ); margin-right: 0; margin-left: 0px; } /*.related.products ul.products.columns-3 { width: calc( 100% + 70px ); position: relative; left: -35px; }*/ } /**/ .single-product div.product .woocommerce-product-gallery .flex-control-thumbs::before, .single-product div.product .woocommerce-product-gallery .flex-control-thumbs::after { content: none; } .single-product ol.flex-control-nav.flex-control-thumbs { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li { width: calc( 100% )!important; float: left; margin: 0px!important; } select { padding: 10px 10px; } .single-product .flex-viewport img { width: 100%; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ /*.single-product div.product .woocommerce-product-gallery { width: calc( 50% - 15px ); float: left; margin-right: 15px; margin-bottom: 15px; } .single-product div.product .summary { width: calc( 50% - 15px ); float: right; margin-right: 0; margin-left: 15px; }*/ } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .single-product .content-area { width: 100%; float: left; margin-right: 0%; } } /*.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li { width: calc( 100% / 5 ); float: left; margin-right: 15px; }*/ .single-product div.product .woocommerce-product-gallery .flex-viewport { margin-bottom: 15px; } .single-product div#secondary { display: none; } .single-product table.variations td { border-bottom: 0px solid #222!important; } h2.woocommerce-Reviews-title { background: white; margin-bottom: 0!important; padding-bottom: 20px; } /**** 8.3 WooCommerce Inputs ****/ div#stripe-card-element, div#stripe-exp-element, div#stripe-cvc-element { padding: 10px; } div#customer_details .form-row label { width: 100%; } div#customer_details span.woocommerce-input-wrapper { width: 100%; } p.form-row.woocommerce-SavedPaymentMethods-saveNew.woocommerce-validated { display: grid; grid-template-columns: 30px 1fr; } .woocommerce-checkout .checkbox input { width: 20px; height: 20px; position: relative; top: 5px; left: 4px; margin-right: 13px; } input#wc-stripe-new-payment-method { width: 20px!important; height: 20px; top: 2px; position: relative; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; position: absolute; top: 0px; right: 6px; width: 20px; } #payment .place-order { padding: 0px; margin-top: 0px; } #dift-checkout-checkbox-text_field { display: none; } /*span.select2.select2-container.select2-container--default.select2-container--below.select2-container--open { width: calc( 100% + 2px )!important; }*/ span.select2-selection.select2-selection--single { width: calc( 100% + 1px )!important; } h3#ship-to-different-address { font-size: 18px; } label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme { width: 100%; } .select2-container .select2-selection--single { height: 40px; } span.select2-selection.select2-selection--single { padding: 6px; } .woocommerce th, .woocommerce tr, .woocommerce td, td.product-remove { border-bottom: 1px solid lightgrey!important; } .woocommerce-page input, .woocommerce textarea { border: 1px solid #d9d9d9; border-radius: 4PX; padding: 8px 15px; margin: 0px 0; background: white; box-shadow: none; } input.qty { font-size: 18px; } .order-total span.woocommerce-Price-amount.amount { font-size: 1.6em; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ #ship-to-different-address .woocommerce-form__input-checkbox { width: 20px; left: 0; margin-right: 9px; position: relative; top: 5px; -webkit-transform: inherit; -ms-transform: inherit; transform: inherit; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { padding: 5px; } } @media (max-width: 767px) { /* MOBILE RULES GO HERE */ .woocommerce-shipping-fields label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox { margin-left: -4px; } div#order_review { margin-left: -5px; margin-right: -5px; } } table.shop_table.woocommerce-checkout-review-order-table { color: black; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .shipping td[data-title]::before { width: 100%!important; text-align: left; margin-bottom: 10px; } ul#shipping_method li { text-align: left; } p.woocommerce-shipping-destination { text-align: left; } } .woocommerce-page.woocommerce-edit-address span.woocommerce-input-wrapper { width: 100%; } /**** 8.4 WooCommerce checkout background colour ****/ @media only screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .woocommerce-checkout #main { background: -webkit-gradient(linear,left top,right top,color-stop(50%,#fff),color-stop(50%,#f0f4f5)); background: linear-gradient(90deg,#fff 50%,#f0f4f5 50%); background: -moz-linear-gradient(left,#fff 50%,#f0f4f5 50%); padding-top: 20px; } .woocommerce-checkout.woocommerce-order-received #main { background: -webkit-gradient(linear,left top,right top,color-stop(45%,#fff),color-stop(45%,#f0f4f5)); background: linear-gradient(90deg,#fff 45%,#f0f4f5 45%); background: -moz-linear-gradient(left,#fff 45%,#f0f4f5 45%); padding-top: 20px; } .woocommerce-checkout .woocommerce { margin: 0 20px; } .woocommerce-checkout div#content { padding-top: 0px; } th, tr, td, #payment .payment_methods > li .payment_box, #payment .place-order, #order_review, #payment .payment_methods > li:not(.woocommerce-notice) { background: transparent!important; } } .woocommerce-checkout header.entry-header { display: none; } /* .woocommerce select.orderby { padding: 5px; }*/ /**** 8.6 General / Unsorted WooCommerce Rules ****/ ul#shipping_method label { display: inline-block; width: calc( 100% - 41px ); margin-left: 10px!important; padding-left: 0px; } ul#shipping_method input { float: left; margin-top: 6px!important; } label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme { display: block; width: 100%; } table.shop_table.woocommerce-checkout-review-order-table { margin-bottom: 0px!important; } nav.storefront-product-pagination { display: none; } .wc-proceed-to-checkout .button.checkout-button { text-decoration: none; } a.woocommerce-product-gallery__trigger:hover, a.woocommerce-LoopProduct-link.woocommerce-loop-product__link:hover { text-decoration: none; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .storefront-handheld-footer-bar { display: none; } table.cart td.product-remove a.remove { position: relative; top: 0; left: 0; } } /* Daniel CSS Woocommerce */ .star-rating span:before, .quantity .plus, .quantity .minus, p.stars a:hover:after, p.stars a:after, .star-rating span:before, #payment .payment_methods li input[type=radio]:first-child:checked+label:before { color:#e04145; } table.cart td.product-quantity .qty { margin: 0; } .shop_table { border-top: 1px solid #EEEEEE; } .cart-item-details { padding: 0 5px 0 0; } .cart-collaterals h2 { margin-bottom: 20px; font-weight: normal; } table.cart td.actions, .woocommerce-checkout-review-order-table { border-top:0!important; } .wc-proceed-to-checkout .button.checkout-button, #payment .place-order .button { font-size: 1em; } .woocommerce-page pre { white-space: inherit; font-family: inherit; background:none; } table.cart td, table.cart th { padding: 15px !important; -webkit-box-sizing: border-box; box-sizing: border-box; } table.woocommerce-checkout-review-order-table .product-name { width:auto; } .storefront-full-width-content .woocommerce-products-header, .storefront-full-width-content.woocommerce-account .entry-header, .storefront-full-width-content.woocommerce-cart .entry-header, .storefront-full-width-content.woocommerce-checkout .entry-header { text-align: center; padding: 0 0 40px; } .woocommerce-error, .woocommerce-info, .woocommerce-message, .woocommerce-noreviews, p.no-comments { border-left: 0; padding: 1em 1em 1em 4em; } /**** 8.7 WooCommerce Feed Rules ****/ h2.woocommerce-loop-product__title { margin-top: 15px; } p.woocommerce-result-count { top: 6px; } .storefront-sorting { margin-bottom: 20px; } .post-type-archive-product ul.products.columns-3, section.related.products ul.products.columns-3, .tax-product_cat ul.products.columns-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; margin-bottom: 20px; } .post-type-archive-product li.product.type-product, section.related.products li.product.type-product, .tax-product_cat ul.products.columns-3 li.product { width: 100%!important; margin: 0!important; } .post-type-archive-product div#primary img.attachment-woocommerce_thumbnail, section.related.products img.attachment-woocommerce_thumbnail{ margin: 0 auto!important; } .post-type-archive-product ul.products::before, .post-type-archive-product ul.products::after, section.related.products ul.products::before, section.related.products ul.products::after, .tax-product_cat ul.products::before, .tax-product_cat ul.products::after { content: none!important; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .post-type-archive-product ul.products.columns-3, section.related.products ul.products.columns-3 { grid-template-columns: 1fr 1fr; } } /**** 8.8 WooCommerce Multi Crumbs ****/ .multicrumbs { max-width: 800px; margin: 0 auto; } .multicrumbs ul { list-style: none; text-align: center; margin: 0; font-size: 0; } .multicrumbs ul li { background: yellow; width: auto; display: inline-block; position: relative; } .multicrumbs ul li a { color: red; padding: 5px 15px; font-size: 16px; } .multicrumbs ul li a:hover { text-decoration: none!important; } @media screen and (min-width: 768px) { li.multicrumb-item:not(:first-of-type):before { content: "|"; position: absolute; color: #5f5f5f; left: -2px; top: 0px; z-index: 0; width: 2px; } } /**** 8.9 WooCommerce Input Fields ****/ .wc-forward:after, .woocommerce-Button--next:after { font-size: 0.8em; } @media screen and (min-width: 768px) { a.added_to_cart.wc-forward { margin-left: 10px; } } a.added_to_cart.wc-forward:hover { text-decoration: none; } @media (max-width: 767px) { /* MOBILE RULES GO HERE */ ul.products.columns-3 a.button, a.added_to_cart.wc-forward { width: 100%; } } /**** 8.10 WooCommerce Account Area ****/ .woocommerce-MyAccount-content { margin-bottom: 25px; } span.password-input { width: 100%; } /**** 8.11 WooCommerce Cart In Header ****/ .basket-outer { display: grid; grid-template-columns: 70px 80px 1fr; grid-gap: 15px; align-items: center; } .basket { background: url("/wp-content/themes/rcbrown/assets/images/basket-icon.png"); background-size: contain; background-repeat: no-repeat; height: 50px; position: relative; width: 66px; } span.bag-count { position: absolute; right: 0; top: 0; background: #ee8b26; border-radius: 50%; width: 25px; height: 25px; text-align: center; color: white; } .subtotal { text-align: right; } .subtotal p { margin-bottom: 0px!important; color: white; font-size: 16px; } p.subtotal-total { font-size: 20px; top: -5px; position: relative; } /**** 8.12 WooCommerce Custom Product Card ****/ /* .product-custom-card-main-image, .product-custom-card-hover-image { background-size: cover!important; background-position: center!important; background-repeat: no-repeat!important; } .product:hover .product-custom-card-main-image.has-woo-gallery { opacity: 0; } .product-custom-card-main-image { padding-top: 100%; transition: 1s;; } li.product img.attachment-woocommerce_thumbnail, img.woocommerce-placeholder.wp-post-image { display: none!important; } */ /**** 8.11 WooCommerce Custom Category Card ****/ /* li.product-category.product > a, h2.woocommerce-loop-category__title { display: none; }*/ /**** 8.12.2 WooCommerce Custom Product Card ****/ .product-card-vimeo-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; } .product-card-media { opacity: 0; } .product-card-media:hover { opacity: 1; } .video-product-card { background-size:cover!important; background-position: center!important; position: relative; width: 100%; padding-top: 178%; } /****************************************/ /****************************************/ /*********** END WOOCOMMERCE ***********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /*********** 9. START BLOG *************/ /****************************************/ /****************************************/ /**** 9.1 Display Blog in Grid ****/ .blog .post-feed { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr; } /*.blog .single-feed-item-text { padding: 20px; } .blog article { background: lightblue; } .blog .post-image-background { min-height: 160px; background-position: center; background-size: cover; } .blog img.attachment-large.size-large.wp-post-image { display: none; } .blog .single-feed-item { padding-bottom: 0px; } .post-image-inner { min-height: 160px; background-position: center; background-size: cover; }*/ /**** 9.2 Meta Info Rules ****/ .author-details { padding-bottom: 10px; } .meta-info { padding-bottom: 15px; } .date-in-feed, .pipe-in-feed, .cat-in-feed, .no-of-comments { display: inline-block; } .pipe-in-feed { padding-left: 10px; padding-right: 10px; } /**** 9.3 Single Post Rules ****/ .single-post h1.item-title { padding-top: 20px; } .single-post header.entry-header { display: none; } .single-post img.attachment-.size-.wp-post-image { display: none; } /**** 9.4 Post Feed Rules ****/ .post-image-background { min-height: 400px; background-position: center!important; background-size: cover!important; /*padding: 30px;*/ position: relative; } .single-feed-item-text a:hover { text-decoration: none; } h2.item-title { display: block; } .single-feed-item { padding-bottom: 20px; } /**** 9.5 Comments ****/ #comments { padding-top: 0px; background: #E8E8EE; margin-bottom: 40px; } /**** 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; } /**** 9.7 Author Details ****/ .author-image { max-width: 50px; } .author-name h2 { padding-top: 12px; padding-left: 15px; } .author-image, .author-name { display: inline-block; float: left; } p.author-bio { display: none; } /****************************************/ /****************************************/ /************* END BLOG ****************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /********* 10. START CONTACT ***********/ /****************************************/ /****************************************/ /**** 10.1 Contact Form 7 Rules ****/ .wpcf7 label { width: 100%; } span.wpcf7-form-control-wrap { margin-right: 10px; } .wpcf7 input[type="checkbox"] { width: 20px; } .wpcf7-form input { width: 100%; } .wpcf7-textarea { height: 140px; } .wpcf7 input[type="radio"] { display: inline-block; width: 35px; } span.wpcf7-list-item-label { display: inline-block; width: calc(100% - 35px); } span.wpcf7-list-item { display: block; } .wpcf7-form-control-wrap { padding-bottom: 20px; } .wpcf7-form input { width: 100%; } .wpcf7 input[type="checkbox"], .wpcf7 input[type="radio"] { width: 16px; margin-right: 18px; margin-bottom: 12px; font-size: 39px; height: 16px; top: 2px; position: relative; } .wpcf7-select { width: 100%; } .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; } .wpcf7 form .wpcf7-response-output { margin: 0em 5px 0em; padding: 5px 10px; } /****************************************/ /****************************************/ /************* END CONTACT *************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /******* 11. START CONVERSION PAGE ******/ /****************************************/ /****************************************/ @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .page-template-template-conversionpage .content-area { width: 100%; float: left; margin-right: 0%; } .converstion-form { margin-top: 20px; } .page-template-template-conversionpage main#main .col-8 { padding-top: 220px; padding-right: 80px; } } .converstion-form input[type='text'], .converstion-form input[type='number'], .converstion-form input[type='email'], .converstion-form input[type='tel'], .converstion-form input[type='url'], .converstion-form input[type='password'], .converstion-form input[type='search'], .converstion-form textarea, .converstion-form .input-text { background-color: white; } .converstion-form .wpcf7 { background: #E1DCD7; padding: 18px 20px 5px; } .header-image-inner { /* position: absolute; width: 100%; height: 200px; left: -20px; padding-top: 20px; background-position: center; background-size: cover;*/ display: grid; align-content: center; } .header-image { max-width: calc( 100% + 40px ); width: 1220px; margin: 0 auto; position: relative; left: -20; } .converstion-form p { margin-bottom: 0px!important; } .converstion-form form { margin-bottom: 0em; } .converstion-form .wpcf7-form input { margin-bottom: 10px; } .converstion-form textarea.wpcf7-form-control.wpcf7-textarea { margin-bottom: 20px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .page-template-template-conversionpage .header-image-inner { position: relative; width: 100%; height: 200px; left: -20px; padding-top: 0px; background-position: center; background-size: cover; display: block; } .page-template-template-conversionpage div#content { padding-top: 0px; } .page-template-template-conversionpage main#main .col-8 { padding-top: 20px; } } /****************************************/ /****************************************/ /********* END CONVERSION PAGE *********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /******** 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 #222; 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 Image Display Rules ****/ img { border-radius: 0px; } /**** 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 Search Box ****/ .widget_search form.search-form label { width: 100%; } form.search-form label { width: calc( 100% - 95px ); } input.search-field { width: 100% } /**** 12.8 Download File Icons ****/ /* div#primary div:not(.smart-menu) a[href$=".pdf"] { padding-left: 0px; } div#primary div:not(.smart-menu) a[href$=".pdf"]:before { padding-right: 10px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1c1"; } div#primary a[href$=".docx"] { padding-left: 0px; } div#primary a[href$=".docx"]:before { padding-right: 10px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1c2"; } div#primary a[href$=".pptx"] { padding-left: 0px; } div#primary a[href$=".pptx"]:before { padding-right: 10px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1c4"; } div#primary a[href$=".xlsx"]:before { padding-right: 10px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1c3"; }*/ /**** 12.9 Viewport Animation Rules ****/ .type1, .type2 { transition: 1.5s; } .type1.fire:not(.hold-fire) { color: red!important; } .type2.fire { color: blue!important; } #content > .col-full, body { transition: 1.5s; } .theme-storefront.bg-grey-fire:not(.bg-grey-hold-fire) #content > .col-full, body.theme-storefront.bg-grey-fire:not(.bg-grey-hold-fire) { background-color: #AFB8B3!important; } /**** 12.10 Home Blocks Grid ****/ .home-blocks { background: grey; } .home-blocks:hover { background: green; } .home-blocks h4 { padding: 10px; min-height: 62px; color: white; } a.home-link { text-decoration: none!important; } /**** 12.11 MailChimp ****/ #mc_embed_signup .mc-field-group { width: 100%!important; } div#mc_embed_signup input#mce-EMAIL { width: 100%; } 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: red; border: 1px solid red; color: white; } #mc_embed_signup input.button:hover { background: transparent; border: 1px solid red; color: red; } #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 { background: transparent!important; } .inline-mailchimp input#mce-EMAIL { width: calc( 100% - 100px )!important; display: inline-block!important; margin: 0!important; } .inline-mailchimp input#mc-embedded-subscribe { width: calc( 100px )!important; display: inline-block!important; } .inline-mailchimp div#mc_embed_signup_scroll { font-size: 0!important; margin: 0!important; } div#mc_embed_signup { background: transparent!important; } /*** MAILCHIMP INLINE TWO ****/ .mailchimp-inline-two-row { padding-top: 15px; padding-bottom: 15px; background: #4C71A0; } .mailchimp-inline-two-left { display: grid; grid-template-columns: 90px 1fr; grid-gap: 20px; align-items: center; } .mailchimp-inline-two-title { margin-bottom: 10px; 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; } .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 white; background: #4c71a0; margin: 0!important; } .mailchimp-inline-two-row footer#colophon .button:hover { border: 1px solid white!important; } .mailchimp-inline-two-row #mc_embed_signup input.button:hover { border: 1px solid white!important; } /**** 12.12 Scroll to Top ****/ #scroll { position: fixed; right: 15px; bottom: 15px; cursor: pointer; width: 75px; height: 75px; background-color: #333; text-indent: 0; display: none; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; text-align: center; color:white; padding-top:10px; } #scroll p { font-size: 12px; max-width: 35px; margin: 0 auto; color: white; } #scroll:hover { background-color:#bbb; opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; } /**** 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 ); } } /**** 12.15 Hide Visual Composer Buttons ****/ a#vc_load-inline-editor, a.button.storefront-hero__button-edit { display: none; } /**** 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: 1fr auto; min-height: 835px; } .servicecardsmall a { display: grid; grid-template-rows: 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 Service Block ****/ /* html { scroll-behavior: smooth; } */ /**** 12.18 Irregular and Regular Siblings Blocks ****/ .regular-irregular .vc_column-inner { padding: 40px 30px 10px 30px!important; } .regular-irregular .vc_col-sm-6 .wpb_content_element { float: left; width: 540px; max-width: 100%; } .regular-irregular .vc_col-sm-6:first-of-type .wpb_content_element { float: right; width: 540px; max-width: 100%; } .vc_column-inner { background-position: center; background-size: cover; } .regular-irregular .vc_col-has-fill { min-height: 300px; } /**** 12.19 Lightbox ****/ .modal { display: none; position: fixed; z-index: 100; padding: 0px 62px 0px 62px; 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; } .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); } */ .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } div#Lightbox { z-index: 1000; } .thumbnail { max-width: 40%; } /** LIGHTBOX MARKUP **/ .lightbox { /** Default lightbox to hidden */ display: none; /** Position and style */ position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8); } /*.lightbox img { max-width: 90%; max-height: 80%; margin-top: 2%; }*/ .lightbox:target { /** Remove default browser outline */ outline: none; /** Unhide lightbox **/ display: block; } .lightbox-content { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); margin: 45px auto 0px; display: block; width: 100%; max-width: 600px; } .close { position: absolute; right: 0px; top: -50px; width: 32px; height: 32px; opacity: 0.3; } .close:hover { opacity: 1; } .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); } .lightbox-content-inner { background: white; padding: 50px 50px 15px; } a.lightbox { text-decoration: none; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .modal { padding: 10px 20px 0px 20px; } .lightbox-content-inner { padding: 40px 20px 15px; } } /**** 12.20 Accordion ****/ .openingbox { display:flex; flex-flow: column; } .openingbox.minamalist-style { margin-bottom: 25px; } .openingbox.minamalist-style button.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; } /* 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 .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; } button.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; } button.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; } .fadebackground .vc_column-inner { 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; } /**** 12.22 Parralax ****/ .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; } /**** 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-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; } /**** 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%; } /**** 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 a { background: #656564; margin-right: 7px; padding: 9px; border-radius: 50%; width: 40px; height: 40px; text-align: center; display: inline-block; color: white; margin-bottom: 10px; transition: 0.5s; } 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; } /**** 12.29 Lightbox Gallery ****/ /*.gallery-lightbox-outer .thumbnail img { box-sizing: border-box; border: 1px solid #ddd; padding: 2px; margin: 0 1% 15px 0; width: 32.6667%; display: inline-block; } .gallery-lightbox-outer .thumbnail img:nth-of-type(3n+3) { margin-right: 0; }*/ /*Pinterest Gallery*/ .gallery--pinterest .image-link { margin-bottom: 10px; } .gallery--pinterest .image-link img { min-width: 100%; } .grid-sizer, .image-link { width: 100%; } @media screen and (min-width: 767px) { .grid-sizer, .image-link { width: calc(33.3333% - 7px); } } /*END masonry Gallery*/ /*masonry Gallery*/ .gallery--masonry .image-link { margin-bottom: 10px; } .gallery--masonry .image-link img { min-width: 100%; } .grid-sizer, .image-link { width: 100%; } @media screen and (min-width: 767px) { .grid-sizer, .image-link { width: calc(33.3333% - 7px); } } /*END masonry Gallery*/ .gallery-lightbox { display: grid; grid-gap: 20px; grid-template-columns: 1fr 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%; } .square-style-grid a.image-link { width: 100%; } .pinterest-style .gallery-lightbox { transition: all .5s ease-in-out; display: block; /* grid-gap: 20px; */ column-count: 3; padding-bottom: 10px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .pinterest-style .gallery-lightbox { column-count: 1; } } .pinterest-style .gallery-lightbox img { margin-bottom: 20px; } button.slick-next.slick-arrow, button.slick-prev.slick-arrow { width: 65px !important; height: 65px !important; background: url(/wp-content/themes/rcbrown/assets/images/slider-direction-thin-white.png) no-repeat 0 0 !important; top: 48% !important; position: absolute; } button.slick-next.slick-arrow { background-position: 100% 0 !important; right: 0px !important; } button.slick-prev.slick-arrow { background-position: 100% 0 !important; left: 0px !important; background-position: left!important; z-index: 5; } button.slick-arrow { color: transparent!important; border: none!important; } .slick-lightbox-close { position: absolute; top: 10px!important; right: 55px!important; display: block; height: 32px!important; width: 32px!important; line-height: 0; font-size: 0; cursor: pointer; background: transparent!important; color: transparent!important; padding: 0; border: none; } .slick-prev:before, .slick-next:before { opacity: 0!important; } .slick-lightbox-close:before { font-size: 55px!important; font-weight: 100!important; opacity: 0.55!important; } .slick-lightbox-close:hover:before { opacity: 1!important; } /**** 12.30 Inline CTA ****/ .call-to-action-inline h2, .call-to-action-inline p { margin-bottom: 0px!important; } .cta-desc { margin-left: 15px; } .call-to-action-inline { background: #F7F7F7; padding: 9px 0px; } .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; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ a.btn-lg.button { float: right; margin-right: 12px; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cta-btn { margin: 5px 14px 0px; } .call-to-action-inline { padding: 15px 0px; } } /**** 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 { background: #f5f5f5; } .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: 20px 30px; text-align: center; color: #46545e; font-size: 16px; display: inline-block; transition: 0.5s; } .middle-menu .menu-item a:hover, .middle-menu .current_page_item a { text-decoration: none; background: #ee8b26; color: white!important; } p.middle-menu-dropdown-mobile-text { padding: 10px; margin-bottom: 0; position: relative; } p.middle-menu-dropdown-mobile-text: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 */ 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 (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 ****/ .info-banner { background: #d3e9b6; padding: 20px; margin-bottom: 20px; border-radius: 0px; border: 1px solid #8DC540; position: relative; color: black; } .info-banner p, .woocommerce-form-coupon-toggle a { margin-bottom: 0px!important; color: white!important; } .info-banner .info-icon { display: inline-block; font-family: 'FontAwesome'; font-size: 1em; font-weight: 400; line-height: 100%; width: 1.758em; bottom: -.18em; color: white; content: '\F05A'; font-size: 3.5em; position: absolute; right: -.18em; -webkit-transform: rotate(-20deg); transform: rotate(-20deg); width: auto; zoom: 1; } /**** 12.34 Process Card VC BLock ****/ .process-block-background { padding-top: 50%; background-position: center!important; background-size: cover!important; } .process-block-text { background: #FAFAFA; padding: 18px 20px 3px; } .service-block, .process-block { margin-bottom: 35px } .process-row { margin: 0px 0px; } h3.processno { font-size: 70px; min-width: 60px; margin-bottom: 0px; } h1.processtitle:after { content: none; } h1.processtitle { margin-bottom: 0px; } h2.processsubtitle { margin-left: 1px; } p.process-desc { border-top: 1px solid black; padding-top: 15px; } .processnocol { padding-left: 0px; } /**** 12.35 Change Image On Hover ****/ .change-on-hover-image { background-size: cover!important; background-position: center!important; background-repeat: no-repeat!important; } .change-on-hover-image img { transition: 0.5s; } .change-on-hover-image:hover img { opacity: 0; } /**** 12.36 Carosel Anything ****/ .page #carousel-anything-1 .owl-prev, .page #carousel-anything-1 .owl-next { width: 40px !important; font-size: 0!important; opacity: 0.8; } .page #carousel-anything-1 .owl-prev::before, .page #carousel-anything-1 .owl-next::before { color: transparent !important; font-size: 00px !important; } .owl-next, .owl-prev { padding-top: 10px; width:65px !important; height:65px !important; background:url(/wp-content/themes/rcbrown/assets/images/slider-direction-thin-white.png) no-repeat 0 0 !important; font-size: 0; } .owl-next{background-position:100% 100% !important;} .owl-next:hover, .owl-prev:hover {opacity:1 !important;} .owl-nav, .owl-theme .owl-nav { margin-top: -30px!important; padding-bottom: 30px!important; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .owl-next { right: -70px !important; } .owl-prev { left: -70px!important; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .owl-prev { left: -42px!important; } .owl-next { right: -42px!important; } } /**** 12.37 Back Arrow ****/ .backarrow { background: #f4f4f4; padding: 10px 15px; margin-left: 0px; margin-right: 0px; margin-bottom: 20px; } .backarrow svg { margin-right: 6px; } /**** 12.38 Styled ul Tick List ****/ ul.tick-list { list-style: none; } ul.tick-list li:before { font-family: 'Font Awesome 5 Free'; content: '\f00c'; margin: 0 10px 0 -25px; color: #9d804f; font-weight: 900; } 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; } ul.md-tick-list { list-style: none; margin-left: 0; } ul.md-tick-list li:before { content: "done"; font-family: 'Material Icons'; font-weight: 100; font-style: inherit; font-size: 24px; display: inline-block; 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: 5px; margin-right: 7px; } /**** 12.39 Squares ****/ .square h2 { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); max-width: 200px; margin: 0 auto; font-size: 32px; line-height: 44px; } .square-outer { display: inline-block; position: relative; width: 100%; margin-bottom: 30px!important; } .square-upper { margin-top: 100%; } .square { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; background: url('/wp-content/uploads/2019/06/01_40-scaled.jpg'); background-size: cover; } .square:after { content: " "; background: rgba(0, 0, 0, 0.2); background: rgba(255, 255, 255, 0.2); width: 100%; height: 100%; display: block!important; position: absolute; z-index: 3; left: 0; top: 0; transition: 0.5s; } .square * { z-index: 5; position: relative; transition: 0.5s; } .square:hover * { opacity: 0; } .square:hover:after { background: transparent; } /**** 12.40 Sidebar Menu ****/ .vc_wp_custommenu .sub-menu { display: none; position: absolute; left: 100%; top: 0; min-width: 215px; margin: 0; } .vc_wp_custommenu .menu-item-has-children:hover .sub-menu { display: block; } .vc_wp_custommenu .widget_nav_menu .sub-menu li { width: 100%!important; } .vc_wp_custommenu .widget_nav_menu ul li { width: 50%; } .vc_wp_custommenu li { background: #E4E2E2; margin: 0; width: 99%!important; padding: 10px 15px; } .vc_wp_custommenu ul li { padding-left: 0px; position: relative; font-size: 16px; text-decoration: none; line-height: 15px; margin-bottom: 0; } .vc_wp_custommenu ul.sub-menu { background: white; padding: 10px 10px 0px; z-index: 9; top: -10px; } .vc_wp_custommenu li { background: #E4E2E2; margin: 0; width: 100%!important; padding: 0px; } .vc_wp_custommenu li:hover { background: #B5B5B5; } .vc_wp_custommenu li a { color: #5f5e5e; padding: 12px 12px 10px!important; width: 100%; text-decoration: none!important; padding: 15px; display: block; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .vc_wp_custommenu ul.sub-menu { padding: 10px 0px 0px 0px; } } /**** 12.41 Material Icon Card ****/ .materialdcard { padding: 60px 20px 10px; border-radius: 0px; box-shadow: 0 3px 6px 0 rgba(155,188,232,.29); -webkit-transition: box-shadow .3s ease,-webkit-transform .3s ease; transition: box-shadow .3s ease,-webkit-transform .3s ease; transition: transform .3s ease,box-shadow .3s ease; margin: 30px 0px; } .materialdcard .material-icon { position: absolute; top: -40px; } .materialdcard span.material-icons { background: white; padding: 15px; border-radius: 50%; border: 1px solid #DFDFDF; } .materialdcard span.material-icons { font-size: 50px; color: #0D77BD; } .materialdcard h3 { font-size: 20px; } /**** 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; } } /**** 12.43 List item with custom image ****/ .list-item-with-custom-image { padding: 5px 0px; grid-gap: 15px; grid-template-columns: 50px 1fr; display: grid; } .list-item-with-custom-image .right-item { font-size: 20px; } /**** 12.44 Strapline ****/ .strapline { position: relative; } .strapline-inner { float: right; position: absolute; right: 0; top: -3px; } /**** 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 (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 ****/ .zoom-card a { text-decoration: none!important; } .zoom-card { width: calc( 100% + 30px ); left: -15px; position: relative; border: 0px solid #cccccc; border-left: none; border-bottom: none; } .zoom-block-background-outer { display: block; overflow: hidden; width: 100%; } .zoom-block-background { background-position: center!important; background-size: cover!important; background-repeat: no-repeat!important; transition: all .5s; /* min-height: 100%; */ padding-top: 60%; } .zoom-card:hover .zoom-block-background, .zoom-card:focus .zoom-block-background { transform: scale(1.1); } .zoom-block-text { padding: 20px 25px 5px; } /**** 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 (max-width: 767px) { /* MOBILE RULES GO HERE */ .video-behind-title-block { height: 185px; margin: 0px 20px; } .video-behind-title { font-size: 15vw; } } /**** 12.48 BLOG CARDS ****/ .blog-block-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; margin-bottom: 60px; margin-top: 60px; } .blog-block-card { -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.175); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.175); padding: 15px; background: white; } .blog-block-card-image { padding-top: 100%; background-size: cover; background-position: center; } .blog-block-card-title { margin: 20px 0; font-size: 20px; color: #727171; } .blog-block-card-meta { border-top: 1px solid #9ed7c6; padding-top: 10px; text-align: center; } .blog-block-card-button { text-align: center; } .blog-block-title { text-align: center; color: #878787; } .blog-block-read-more.button { border-radius: 0!important; background: transparent; text-transform: uppercase; border: 1px solid #adadad; color: #adadad!important; } .blog-block-read-more.button:hover { background: rgb(243,243,243)!important; border: 1px solid #adadad!important; color: #000!important; } a.blog-block-view-all { width: 100%; text-align: center; display: block; margin: 0px 0 35px; font-size: 20px; text-decoration: none!important; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .blog-block-cards { grid-template-columns: 1fr; } } /**** 12.48.2 BLOG BLOCK TWO ****/ .blog-block-two-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; margin-bottom: 40px; margin-top: 60px; } .blog-block-two-card { padding: 15px; background: #598287; border-radius: 10px; } .blog-block-two-card-image { padding-top: 70%; background-size: cover; background-position: center; border-radius: 15px; margin-bottom: 20px; } .blog-block-two-read-more.button { border-radius: 0!important; background: #b1050f!important; text-transform: uppercase; border: 0px solid red; color: white!important; border-radius: 10px!important; margin: 15px 0; } .blog-block-two-read-more.button:hover { background: transparent!important; border: 0px solid #E30613!important; color: #000!important; } .blog-block-two-cards *, .blog-block-two-card-text * { color: white!important; overflow-wrap: anywhere; } .blog-block-two-card-text { min-height: 260px; } .blog-block-two-card-meta-day { font-size: 35px; margin-bottom: 0!important; } .blog-block-two-card-meta-month { position: relative; top: -15px; font-size: 18px; font-weight: 700; margin-bottom: 0!important; } .blog-block-two-card-title { font-size: 18px; font-weight: 700; } span.blog-block-two-card-excerpt p { font-size: 16px; } .blog-block-two-card-title a { text-decoration: none!important; } a.blog-block-two-view-all { width: 100%; text-align: center; display: block; margin: 0px 0 35px; font-size: 20px; text-decoration: none!important; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .blog-block-two-cards { grid-template-columns: 1fr; } } /**** 12.49 Team Member Card ****/ .team-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .team-cards a, .team-cards a:hover { text-decoration: none!important; } .team-member-card { display: grid; grid-template-columns: 150px 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: 100%; background-position: center!important; background-size: cover!important; } .team-text { padding: 20px 0; } h2.team-member-card-name { font-size: 18px; text-transform: uppercase; margin-bottom: 0; color: #004e72; font-weight: 600; } h2.team-member-card-surname { font-size: 18px; text-transform: none; margin-bottom: 10px; color: #004e72; font-weight: 600; } h3.team-member-card-job-title { font-size: 18px; text-transform: none; margin-bottom: 0; font-weight: 100; color: #828383; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .team-member-card { grid-template-columns: 1fr; } .team-cards { grid-template-columns: 1fr; } } .team-member-single { display: grid; grid-template-columns: 3fr 2fr 2fr; grid-gap: 25px; margin-bottom: 35px; } .team-member-single-image > img { margin-bottom: 20px; width: 100%; } /**** 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 (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.1 Funky Cards ****/ /* 12.52.1 Funky Card One */ .funky-card { background-position: center!important; background-repeat: no-repeat!important; background-size: cover!important; min-height: 0px; position: relative; padding-top: 60%; position: relative; margin-bottom: 35px; } .funky-card-overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.1); top: 0; } .funky-card:hover .funky-card-box { border: 2px solid #eee; color: #FFF; opacity: 1; } .funky-card:hover .funky-card-box { border: 2px solid #eee; color: #FFF; } .funky-card-box { position: absolute; vertical-align: middle; color: #def1eb; display: inline-block; text-align: center; transition: 0.5s; cursor: pointer; -webkit-transition: 0.5s; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%, -50%); width: calc( 100% - 30px ); box-sizing: border-box; height: calc( 100% - 30px ); } .funky-card-box-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; } .funky-card:hover .funky-card-box::after, .funky-card:hover .funky-card-box::before { -webkit-transform: scale(1); transform: scale(1); } .funky-card:hover .funky-card-overlay { background: rgba(0,0,0,.4)!important; animation: TheFade 1s; } .funky-card:hover .funky-card-box::after, .funky-card:hover .funky-card-box::before { -webkit-transform: scale(1); transform: scale(1); } .funky-card-foo::after { border-top: 2px solid #FFF; border-right: 2px solid #FFF; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; } .funky-card-foo::before { border-bottom: 2px solid #FFF; border-left: 2px solid #FFF; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .funky-card-box::before, .funky-card-box::after { width: 100%; height: 100%; z-index: 3; content: ''; position: absolute; top: 0; left: 0; box-sizing: border-box; -webkit-transform: scale(0); transform: scale(0); transition: 0.5s; } .funky-card-box-inner h2 { font-size: 1.5vw; font-family: 'Montserrat', sans-serif; font-weight: bold; text-transform: uppercase; color: #fff; text-shadow: black 0px 0px 20px; text-align: center; margin-bottom: 0; } @keyframes TheFade { 0% { background: rgba(0,0,0,.2); } 100% { background: rgba(0,0,0,.4); } } .funky-card:hover .funky-card-box { border: 2px solid #eee; color: #FFF; opacity: 1; } .funky-card:hover .funky-card-box { border: 2px solid #eee; color: #FFF; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .funky-card-box-inner h2 { font-size: 22px; } } /* 12.52.2 Funky Card Two */ .funky-card-two { background-position: center!important; background-repeat: no-repeat!important; background-size: cover!important; min-height: 0px; position: relative; padding-top: 60%; position: relative; margin-bottom: 35px; } .funky-card-two-overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.1); top: 0; } a.funky-card-two-box { height: 100%; width: 100%; position: absolute; left: 0; top: 0; } .funky-card-two-box-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; } .funky-card-two:hover .funky-card-two-overlay { background: rgba(0,0,0,.4)!important; animation: TheFade 1s; } .funky-card-two-box-inner h2 { font-size: 1.5vw; font-family: 'Montserrat', sans-serif; font-weight: bold; text-transform: uppercase; color: #fff; text-shadow: black 0px 0px 20px; text-align: center; margin-bottom: 0; } .funky-card-two h2:after { display: block; position: absolute; left: 0; bottom: -10px; width: 0; height: 2px; background-color: #eee; content: ""; transition: width 0.2s; } .funky-card-two:hover h2:after { width: 100%; } @keyframes TheFade { 0% { background: rgba(0,0,0,.2); } 100% { background: rgba(0,0,0,.4); } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .funky-card-two-box-inner h2 { font-size: 22px; } } /**** 12.53 Display Blocks ****/ /* 12.53.1 Display Block One */ .cool-section { background: #262626; margin: 0 30px; position: relative; } .cool-section-line { border: 2px solid #20F6DA!important; margin: 30px; width: 100%; } span.cool-section-title::before { content: " "; width: calc( 100% + 20px); height: 22px; background: #262626; margin: 10px 0px 10px; display: block; padding: 10px; position: absolute; bottom: 55px; right: -12px; z-index: -1; } span.cool-section-title { position: absolute; bottom: -46px; right: 55px; color: white; font-weight: 900; font-size: 100px; text-transform: uppercase; font-family: "Roboto", Sans-serif; letter-spacing: 1px; z-index: 2; } .cool-section-left-text { padding: 50px 40px 40px; } .cool-section-left-text p, .cool-section-left-text li { font-size: 26px; color: white; } .cool-section-left-text li { font-size: 26px; color: white; margin-left: 50px; position: relative; } .cool-section-left-text ul { list-style: none; margin-left: 0; } .cool-section-left-text ul li:before { color: #20F6DA; content: "done"; font-family: 'Material Icons'; font-weight: 100!important; font-style: inherit; font-size: 52px; display: inline-block; 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: absolute; top: -12px; margin-right: 7px; left: -54px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .cool-section { /*width: calc( 100% + 200px ); left: -100px; position: relative;*/ } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cool-section { margin: 0 0px; } .cool-section-left-text { padding: 20px 0px 40px; } .cool-section-left-text p { font-size: 18px; } span.cool-section-title { bottom: -23px; right: 55px; font-size: 50px; } span.cool-section-title::before { height: 52px; bottom: 13px; } .cool-section-line { margin: 15px; } .cool-section-left-text li { font-size: 18px; } .cool-section-left-text ul li:before { font-size: 32px; top: -3px; margin-right: 7px; left: -37px; } .cool-section-left-text li { margin-left: 35px; } } /* 12.53.2 Display Block Two */ .cool-section-two { background: #262626; background-size: cover!important; background-position: center!important; margin: 0 30px; position: relative; } .cool-section-two { position: relative!important; overflow: hidden; } .cool-section-two:after { content: " "; background: red; background: rgba(0, 0, 0, 0.8); 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)); background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; display: block!important; position: absolute; z-index: 3; left: 0; top: 0; } .cool-section-two * { z-index: 5; position: relative; } span.cool-section-two-title { position: absolute; bottom: -46px; right: 55px; color: white; font-weight: 900; font-size: 100px; text-transform: uppercase; font-family: "Roboto", Sans-serif; letter-spacing: 1px; } .cool-section-two-left-text { padding: 50px 50px 20px; } .cool-section-two-left-text p { font-size: 26px; color: white; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .cool-section-two { /*width: calc( 100% + 200px ); left: -100px; position: relative;*/ } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cool-section-two { margin: 0 0px; } .cool-section-two-left-text { padding: 20px 15px 40px; } .cool-section-two-left-text p { font-size: 18px; } span.cool-section-two-title { bottom: -23px; right: 55px; font-size: 50px; } } /* 12.53.3 Display Block Three */ .cool-section-three { background: #262626; /*background-size: contain!important;*/ background-position: right!important; margin: 0 30px; position: relative; background-repeat: no-repeat!important; } .cool-section-three { position: relative!important; overflow: hidden; } .cool-section-three:after { content: " "; background: red; background: rgba(0, 0, 0, 0.8); background: rgba(255, 255, 255, 0.2); background: linear-gradient(105deg, rgba(0,0,0,1), rgba(0,0,0,1), 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; } .cool-section-three * { z-index: 5; position: relative; } span.cool-section-three-title { position: absolute; bottom: -46px; right: 55px; color: white; font-weight: 900; font-size: 100px; text-transform: uppercase; font-family: "Roboto", Sans-serif; letter-spacing: 1px; } .cool-section-three-left-text { padding: 50px 50px 20px; } .cool-section-three-left-text p { font-size: 26px; color: white; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .cool-section-three { /*width: calc( 100% + 200px ); left: -100px; position: relative;*/ } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cool-section-three { margin: 0 0px; } .cool-section-three-left-text { padding: 20px 15px 40px; } .cool-section-three-left-text p { font-size: 18px; } span.cool-section-three-title { bottom: -23px; right: 55px; font-size: 50px; } } /* 12.53.4 Display Block Four */ .cool-section-four { background: #EEEBE4; background-size: cover!important; background-position: center!important; margin: 0 30px; position: relative; } span.cool-section-four-title { position: absolute; bottom: -46px; right: 55px; color: white; font-weight: 900; font-size: 100px; text-transform: uppercase; font-family: "Roboto", Sans-serif; letter-spacing: 1px; } .cool-section-four-left-text { padding: 50px 50px 20px; } .cool-section-four-left-text p { font-size: 26px; color: white; color: #080808; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .cool-section-four { /*width: calc( 100% + 200px ); left: -100px; position: relative;*/ } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cool-section-four { margin: 0 0px; } .cool-section-four-left-text { padding: 20px 15px 40px; } .cool-section-four-left-text p { font-size: 18px; } span.cool-section-four-title { bottom: -23px; right: 55px; font-size: 50px; } } /* 12.53.4 START SLANTED SECTION ONE */ .slanted-section-one { position: relative!important; min-height: 600px!important; } .slanted-section-background { position: absolute!important; height: 0px!important; padding-top: 35%; left: 0!important; top: 0!important; width: 100%!important; background-position: center!important; background-size: cover!important; z-index: 0!important; } .slanted-section-background-mask { width: 100%; background: white; height: 1000px; position: absolute; top: 49%; left: 0; transform: skewY(0deg); transition: 1.5s; transform-origin: top right; } /*.slanted-section-background-mask.fire:not(.hold-fire) { transform: skewY(-10deg); }*/ .slanted-section-background-mask.fire { transform: skewY(-10deg); } .slanted-text-block-outer { z-index: 2!important; display: grid; place-content: end; } .slanted-text-block { background: #fafafa!important; max-width: 750px; padding: 50px 60px; box-shadow: rgba(255,213,3,0.7) 6px 6px 0px; margin: 150px 100px 50px; align-self: end; transform: skewX(0deg); } .slanted-text-inner { transform: skewX(0deg); } .slanted-text-block-outer { z-index: 2!important; position: relative; display: grid; } /* 12.53.5 START SLANTED SECTION TWO */ .slanted-section-two { display: grid; grid-template-columns: 1fr 1fr; } .slanted-section-two-background { background-position: center!important; background-size: cover!important; } .slanted-text-two-block { padding: 80px 40px; max-width: 600px; } .slanted-section-two-background { transform: skewX(0deg); position: relative; overflow: hidden; } .slanted-section-two-background-mask { width: 130%; background: white; height: 100%; position: absolute; top: 0px; transform: skewx(-18deg); transform-origin: top left; transition: 1.5s; left: 0%; } .slanted-section-two-background-mask.fire { left: 100%; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .slanted-section-two { grid-template-columns: 1fr ; } .slanted-section-two-background { min-height: 200px; } .slanted-text-two-block { padding: 20px 20px; } } /* 12.53.6 START SLANTED SECTION THREE */ .slanted-section-three { position: relative!important; min-height: 78%!important; } .slanted-section-three-background { position: absolute!important; height: 78%!important; left: 0!important; top: 0!important; width: 100%!important; background-position: center!important; background-size: cover!important; z-index: 0!important; } h2.slanted-three-text-title { color: white; margin-top: 50px; font-size: 40px; max-width: 800px; margin: 50px auto 30px; text-align: center; text-shadow: 1px 1px 5px black; } .slanted-section-three-background-mask { width: 100%; background: white; height: 1000px; position: absolute; top: 250px; left: 0; transform: skewY(0deg); transition: 1.5s; transform-origin: top right; } /*.slanted-section-background-mask.fire:not(.hold-fire) { transform: skewY(-10deg); }*/ .slanted-section-three-background-mask.fire { transform: skewY(-10deg); } .slanted-three-text-block-outer { z-index: 2!important; display: grid; place-content: center; } .slanted-three-text-block { background: #fafafa!important; max-width: 1300px; padding: 0px 0px; box-shadow: rgba(255,213,3,0.7) 6px 6px 0px; margin: 0px 0px 100px; align-self: end; transform: skewX(0deg); } .slanted-three-text-inner { transform: skewX(0deg); } .slanted-three-text-block-outer { z-index: 2!important; position: relative; display: grid; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ h2.slanted-three-text-title { font-size: 24px; } .slanted-three-text-block-outer { padding: 10px; } .slanted-section-three { min-height: 0px!important; } .slanted-three-text-block { margin: 0px 0px 20px; } } /* 12.53.7 Display Block Five */ .cool-section-five { display: grid; grid-template-columns: 3fr 4fr; background: #4A4A4A; grid-gap: 0px; margin-bottom: 90px; } .cool-section-five-left-image { padding-top: 100%; position: relative; top: 70px; left: -70px; background-size: cover!important; } .cool-section-five-right { padding: 25px 70px 25px 0; } .cool-section-five * { color: white; } .cool-section-five h2, .cool-section-five h4 { margin-bottom: 40px } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cool-section-five { grid-template-columns: 1fr; grid-gap: 0px; margin-bottom: 30px; } .cool-section-five-left-image { top: 20px; left: -20px; } .cool-section-five-right { padding: 45px 20px 25px; } } /* 12.53.8 Display Block Six */ .cool-section-six-outer { background: #fef7e7; margin-bottom: 90px; position: relative; } .cool-section-six-outer:before { content: " "; background: white; position: absolute; top: 0; width: 100%; height: 20px; } .cool-section-six-outer:after { content: " "; background: white; position: absolute; bottom: 0; width: 100%; height: 20px; } .cool-section-six { display: grid; grid-template-columns: 3fr 4fr; grid-gap: 35px; max-width: 1160px; margin: 0 auto; } .cool-section-six-left-image { padding-top: 100%; position: relative; top: 0px; left: 0px; background-size: cover!important; border-radius: 50%; z-index: 1; } .cool-section-six-right { padding: 40px 15px; } .cool-section-six h2, .cool-section-six h4 { margin-bottom: 40px } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cool-section-six-outer { margin-bottom: 50px; margin: 0 20px; } .cool-section-six { grid-template-columns: 1fr; grid-gap: 0px; margin-bottom: 0px; } .cool-section-six-left-image { top: 0px; left: -15px; width: calc( 100% + 30px ); height: calc( 100% + 30px ); } .cool-section-six-right { padding: 50px 20px 25px; } } /* 12.53.9 Display Block Seven */ .cool-section-seven-outer { margin-bottom: 25px; } .cool-section-seven-image { height: 300px; position: relative; display: grid; align-items: end; background-size: cover!important; background-position: center!important; } .cool-section-seven-title-block { background: #05204A; position: relative; bottom: -35px; margin: 0 20px; padding: 15px 22px 1px; } h2.cool-section-seven-title { color: white; } .cool-section-seven-text { background: #F2F2F2; padding: 70px 45px 25px; } .cool-section-seven-text div { display: block; margin-bottom: 25px; color: black; font-size: 18px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cool-section-seven-text { padding: 50px 15px 25px; } .cool-section-seven-title-block { padding: 15px 15px 1px; } } /* 12.53.10 Display Block Eight */ .cool-section-eight-outer { display: grid; grid-template-columns: 100px 1fr; background: #F2F2F2; } .cool-section-eight-left { display: grid; background: #05204A; padding-top: 30px; } .cool-section-eight-right { padding: 30px 20px; } h2.cool-section-eight-title { color: white!important; text-transform: uppercase; margin-bottom: 0; letter-spacing: 6px; transform: rotate( 90deg ); transform-origin: 30px 100%; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cool-section-eight-outer { grid-template-columns: 50px 1fr; } .cool-section-eight-left { padding-top: 15px; } h2.cool-section-eight-title { transform-origin: 8px 100%; } } /* 12.53.11 Display Block Nine */ .cool-section-nine-inner { display: grid; grid-template-columns: 1fr 1fr; max-width: 1160px; margin: 0 auto; grid-gap: 25px; } .cool-section-nine-left { position: relative; top: 0px; left: 0px; background-size: cover!important; z-index: 1; min-height: 300px; } .cool-section-nine { position: relative; padding-bottom: 25px; } .cool-section-nine-right { padding: 100px 0px 0px; } .cool-section-nine-top-background { position: absolute; top: 0; width: 100%; height: 70px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .cool-section-nine-inner { grid-template-columns: 1fr; } .cool-section-nine-left { margin: 25px 25px 0; } .cool-section-nine-right { padding: 0px 25px 0px; } } /* 12.53.12 Display Block Ten */ .display-block-ten { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0px; } .display-block-ten-image-div { background-size: cover!important; background-position: center!important; background-repeat: no-repeat!important; } .display-block-ten-text-div { background: #F2F2F2; margin-top: 50px; margin-bottom: 50px; position: relative; padding-top: 20px; } .display-block-ten-title-div { background: #B51F23; width: calc( 100% + 70px ); max-width: calc( 100% + 70px ); position: relative; left: -30px; padding: 25px 30px 25px 60px; } .display-block-ten-title { color: white; margin-bottom: 0!important; position: relative; } .display-block-ten-title-div:before { content: ""; position: absolute; top: 0; bottom: 0; display: block; width: 3px; background-color: #B51F23; left: -15px; } .display-block-ten-text { padding: 20px 35px 17px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .display-block-ten { grid-template-columns: 1fr; } .display-block-ten-title-div { width: calc( 100% + 25px ); max-width: calc( 100% + 25px ); left: -5px; padding: 25px 30px 25px 30px; } .display-block-ten-image-div { padding-top: 60%; } .display-block-ten-text-div { background: #F2F2F2; margin-top: 0px; margin-bottom: 35px; } } /* 12.53.13 Display Block Eleven */ .display-block-eleven { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0px; } .display-block-eleven-image-div { background-size: cover!important; background-position: center!important; background-repeat: no-repeat!important; } .display-block-eleven-text-div { background: #F2F2F2; margin-top: 50px; margin-bottom: 50px; position: relative; padding-top: 20px; } .display-block-eleven-title-div { background: #B51F23; width: calc( 100% + 70px ); max-width: calc( 100% + 70px ); position: relative; left: -30px; padding: 25px 30px 25px 60px; } .display-block-eleven-title { color: white; margin-bottom: 0!important; position: relative; } .display-block-eleven-title-div:before { content: ""; position: absolute; top: 0; bottom: 0; display: block; width: 3px; background-color: #B51F23; left: -15px; } .display-block-eleven-text { padding: 20px 35px 17px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .display-block-eleven { grid-template-columns: 1fr; } .display-block-eleven-title-div { width: calc( 100% + 25px ); max-width: calc( 100% + 25px ); left: -5px; padding: 25px 30px 25px 30px; } .display-block-eleven-image-div { padding-top: 60%; } .display-block-eleven-text-div { background: #F2F2F2; margin-top: 0px; margin-bottom: 35px; order: 2; } } /* 12.53.14 Display Block Twelve */ .display-block-twelve { position: relative; } .display-block-twelve-inner { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 35px; max-width: 1160px; margin: 0 auto; z-index: 2; position: relative; padding-top: 50px; padding-bottom: 50px; align-items: center; } .display-block-twelve-text { padding: 25px; z-index: 2; position: relative; } .display-block-twelve-bootom-background { position: absolute; width: 100%; bottom: 0; left: 0; z-index: 1; height: 70px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .display-block-twelve-inner { grid-template-columns: 1fr; grid-gap: 35px; } } /* 12.53.15 Display Block Thirteen */ .display-block-thirteen { background: #EEEBE4; grid-gap: 0px; /* margin-bottom: 90px; */ padding: 20px; margin-top: 35px; } .display-block-thirteen-border { border: 2px solid #A48D5F; display: grid; grid-template-columns: 1fr 4fr; padding: 20px; grid-gap: 90px; } .display-block-thirteen-left-image { position: relative; height: 0; padding-top: 100%; } .display-block-thirteen-left-image img { position: absolute; top: -33px; left: -35px; /* width: calc( 100% + 80px ); */ max-width: calc( 100% + 70px ); height: calc( 100% + 70px ); background: white; border-radius: 50%; padding: 10px; } .display-block-thirteen-right { padding: 25px 70px 25px 0; } .display-block-thirteen p { color: #222222; font-size: 28px; /* margin-bottom: 0!important;*/ } .display-block-thirteen p:last-of-type { margin-bottom: 0!important; } .display-block-thirteen h2, .display-block-thirteen h4 { margin-bottom: 40px } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .display-block-thirteen-border { grid-template-columns: 1fr ; padding: 20px; grid-gap: 30px; } .display-block-thirteen-left-image img { top: -52px; left: -16px; width: calc( 100% + 80px ); max-width: calc( 100% + 70px ); height: calc( 100% + 70px ); } .display-block-thirteen { grid-template-columns: 1fr; grid-gap: 0px; margin-bottom: 30px; } .display-block-thirteen p { font-size: 18px; } .display-block-thirteen-left-image { top: 20px; left: -20px; } .display-block-thirteen-right { padding: 45px 20px 25px; } } /**** 12.54 Contact Section ****/ .contact-section { background: #20F7DB; position: relative; max-width: 920px; margin: 0 auto; } .contact-section p { text-align: center; } span.contact-section-title { position: relative; top: -44px; color: #F0F0F0; font-weight: 900; font-size: 100px; text-transform: uppercase; font-family: "Roboto", Sans-serif; letter-spacing: 1px; text-align: center; width: 100%; } .contact-section-left-text p { font-size: 26px; } .contact-section-text { position: relative; top: -34px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ span.contact-section-title { top: -15px; font-size: 35px; } } /**** 12.55.1 Link Card ****/ .link-block-background { padding-top: 50%; background-position: center!important; background-size: cover!important; } .link-block-text { background: #F1F3F5; padding: 18px 20px 3px; transition: 0.5s; } .link-block a:hover .link-block-text { background: #e6e9ed; } .link-block a:hover, .link-block a { text-decoration: none!important; } .link-block { margin-bottom: 35px } .link-block-title { font-size: 28px; } /**** 12.55.2 Link VH Card ****/ a.link-vh-card, a.link-vh-card:hover { text-decoration: none!important; } .link-vh-card-outer { margin-bottom: 35px; } .link-vh-card-background { text-decoration: none!important; background-size: cover!important; background-position: center!important; display: grid; align-content: end; } .link-vh-card-background { min-height: calc( 100vh - 300px ); } .link-vh-card-text { padding: 20px; } h2.link-vh-card-title { text-transform: uppercase; letter-spacing: 1px; } p.button.link-vh-card-button { margin-bottom: 0!important; } /**** 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; } .smart-menu, .professional-advisor-menu, .services-menu, .important-menu { background: #acc0c3; padding: 20px 25px!important; margin-bottom: 0px; } .smart-menu .current-menu-item > a { color: #E30613!important; } .smart-menu > div > ul > li.current-menu-parent > ul.sub-menu > li:first-of-type { display: none!important; } /**** 12.58 Grid Rules ****/ .grid-one-one { display: grid; grid-template-columns: 1fr 1fr; } .grid-one-one-one { display: grid; grid-template-columns: 1fr 1fr 1fr; } .grid-one-one-one-one { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } .grid-one-one-one-one-one { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;} .grid-one-one-one-one-one-one { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } .grid-one-two { display: grid; grid-template-columns: 1fr 2fr; } .grid-two-one { display: grid; grid-template-columns: 2fr 1fr; } .grid-one-three { display: grid; grid-template-columns: 1fr 3fr; } .grid-three-one { display: grid; grid-template-columns: 3fr 1fr; } .grid-one-four { display: grid; grid-template-columns: 1fr 4fr; } .grid-four-one { display: grid; grid-template-columns: 4fr 1fr; } @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: 1fr; } .grid-mobile-one-one { grid-template-columns: 1fr 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 ****/ .slanted-cards-outer { padding-bottom: 40px; max-width: 1400px; margin: 0 auto; width: 100%; } .slanted-card { box-shadow: rgba(255,213,3,0.7) 3px 3px 0px; transition: 0.5s; transform: skewX(-18deg); background-position: center!important; background-repeat: no-repeat!important; background-size: cover!important; min-height: 0px; position: relative; padding-top: 60%; position: relative; margin-bottom: 35px; overflow: hidden; } .slanted-card:hover { box-shadow: rgba(255,213,3,1) 12px 12px 0px; } .slanted-card-inner { width: 130%; height: 100%; position: absolute; top: 0; left: -15%; transform: skewX(18deg); overflow: hidden; background-size: cover; background-position: center; } .slanted-card-overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.1); top: 0; } .slanted-card:hover .slanted-card-overlay { background: rgba(0,0,0,.2)!important; animation: TheFade 1s; } .slanted-card-box { position: absolute; vertical-align: middle; color: #def1eb; display: inline-block; text-align: center; transition: 0.5s; cursor: pointer; -webkit-transition: 0.5s; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%, -50%); width: calc( 100% - 30px ); box-sizing: border-box; height: calc( 100% - 30px ); } .slanted-card-box-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) skewX(18deg); width: 80%; } .slanted-card-box-inner h2 { font-size: 1.5vw; font-family: 'Montserrat', sans-serif; font-weight: bold; text-transform: uppercase; color: #fff; text-shadow: black 0px 0px 20px; text-align: center; margin-bottom: 0; line-height: 1.2em; } .slanted-card:hover h2:after { width: 100%; } .slanted-card h2:after { display: block; position: absolute; left: 0; bottom: -10px; width: 0; height: 2px; background-color: #eee; content: ""; transition: width 0.2s; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .slanted-card-box-inner h2 { font-size: 16px; font-size: 4vw; } .slanted-cards { grid-template-columns: 1fr 1fr!important; } .slanted-cards-outer { width: 110%; left: -5%; position: relative; } .slanted-card { margin-bottom: 0px!important; } } /**** 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(https://www.mandiraskitchen.com/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 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: 1fr 1fr; */ position: relative; } p.product-name { } .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 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 1fr 75px; padding: 0 100px; padding: 0 25px; grid-gap: 10px; } .related-products-slider {} .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; } button.slick-next.slick-arrow, button.slick-prev.slick-arrow { width: 35px !important; height: 35px !important; top: 29% !important; } .related-products-slider button.slick-prev.slick-arrow { left: -15px!important; position: absolute; } .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; } button.slick-next.slick-arrow { right: -13px !important; background-position: 98% -14px !important; } .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 ****/ .cart-side-modal-inner { position: relative; } button.open-deskop-side-modal-menu-button { position: absolute; left: 0px; border: none; background: transparent; padding: 0; } button.close-deskop-side-modal-menu-button { top: 20px; right: 20px; color: blue; } .close-deskop-side-modal-menu-button span { color: green; } .close-deskop-side-modal-menu-button.close:before, .close-deskop-side-modal-menu-button.close:after { background-color: transparent!important; } .left-modal-menu nav#site-navigation { width: 100%; } .left-modal-menu ul#menu-main-menu { max-height: 999px!important; } .left-modal-menu button.menu-toggle { display: none; } .left-modal-menu { display: grid; align-content: center; min-height: 100%; padding-top: 50px; } .left-modal-menu .menu-toggle, .left-modal-menu .handheld-navigation,.left-modal-menu .main-navigation.toggled .handheld-navigation, .left-modal-menu .main-navigation.toggled div.menu { display: block; } .left-modal-menu ul#menu-main-menu > li.menu-item:before { content: none; } .left-modal-menu ul.sub-menu { -webkit-box-shadow: none!important; box-shadow: none!important; } .left-modal-menu .handheld-navigation ul li a { padding: 6px 5px 6px!important; border-bottom: 0px solid #eee; } .left-modal-menu .handheld-navigation ul.sub-menu li a { padding-left: 20px!important; } .left-modal-menu button.dropdown-toggle { padding: 5px 20px; } /**** 12.60.3 Popup Subscribe Modal ****/ .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: red; } button.close.close-subscribe-modal-button { top: 11px; right: 10px; } .subscribe-modal-body { padding: 0; } .popup-subscribe-modal { display: grid; grid-template-columns: 1fr 2fr; } .popup-subscribe-modal-image { background: url(/wp-content/uploads/2021/01/photodune-AjAM9gbp-modern-office-interior-xxl.jpg); background-size: cover; background-position: center; } .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; } /**** 12.61 Carosels ****/ /* the slides */ .slick-slide { margin: 0 15px!important; } /* the parent */ .slick-list { margin: 0 -15px!important; } .slick-list.draggable { padding: 0!important; } /*Left align*/ .slick-slider-carousel>.slick-list> div { margin-left: 0; } .slick-track{ /* transform: none!important; */ } /*End Left align*/ ul.slick-dots { margin-top: 20px; grid-gap: 20px; list-style: none; justify-content: center; display: flex; } ul.slick-dots .slick-active button { background-color: red; } .slick-slider img { margin: 0 auto; } .slick-slider-item-inner { padding: 0 20px; } /****/ /**** 12.62 Tesimonial Carosel ****/ .testimonial-slider .testimonial-slider-inner ul.slides li { min-height: calc( 180px )!important; } .testimonial-slider-text { max-width: 500px; margin: 25px auto; } .testimonial-slider-outer h2 { text-align: center; } .testimonial-slider-outer h2:before { text-align: center; } h2.testimonial-slider-title { font-size: 16px; text-align: center; font-weight: 100; line-height: 1.6em; } p.testimonial-slider-attribution { font-size: 16px; text-align: center; font-weight: 500; } .testimonial-slider .flexslider { background: transparent; } .speach-mark-center { color: #E84F3E; font-size: 50px; margin-bottom: -23px; text-align: center; font-family: 'Lexend Deca', sans-serif; } .testimonial-slider .flex-direction-nav a { top: 30% !important; } p.zoom-desc { text-align: center; } a.zoom-read-more { text-align: center; width: 100%; display: block; } /**** 12.63 Logo Grid VC ****/ .client-logo-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax(180px, 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: red; } .rotating-circle-of-text-link:after { content: " "; width: 70px; height: 70px; position: absolute; background: red; 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; } } /**** 12.67 Speaker Card ****/ .speaker-card-top { display: grid; grid-template-columns: 100px 1fr; grid-gap: 20px; } .speaker-card-image { height: 100px; background-position: center!important; background-size: cover!important; background-repeat: no-repeat!important; } .speaker-card-top-text { display: grid; align-content: end; } .speaker-card-top-text *:last-child { margin-bottom: 0!important; } .speaker-card { display: grid; grid-gap: 20px; } /**** 12.68 Icon Card ****/ .icon-card { text-align: center; } .icon-card-text-top { padding: 10px 0; } .icon-card-background { background-size: contain!important; padding-top: 40%!important; background-position: center!important; background-repeat: no-repeat!important; margin: 30px 0; } .icon-card-text-bottom { padding: 10px 0; } .icon-card-title { margin-bottom: 0; font-size: 17px; } .icon-desc { font-size: 24px; font-weight: 500; max-width: 240px; margin: 0 auto 35px; line-height: 1.2em; } /****************************************/ /****************************************/ /*********** END BITS & BOBS ***********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /******** 13. Custom Post Types *********/ /****************************************/ /****************************************/ .item-thumb { padding-top: 65%; background-position: center; background-size: cover; } .threegrid { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr; } /**** 13.1 Events Feed ****/ .event-text-area { padding: 20px; background: #F7F7F7; } .main-event-text-area { padding: 45px; } .event-side-image { background: black; background-position: center!important; background-size: cover!important; background-repeat: no-repeat!important; } .post-type-archive-events .post-feed, .events-footercol, .tax-events-category .post-feed { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr; } .event-row { margin: 0; } .post-type-archive-events .single-feed-item, .tax-events-category .single-feed-item { padding-bottom: 0px; } h1.upcoming-title { text-align: center; width: 100%; padding: 20px; margin-bottom: 8px; } .event-content { min-height: 300px; } .event-excerpt { min-height: 105px; } span.events-cat { margin-bottom: 20px; display: block; } a.link-streteched-over-empty-background { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .tax-events-category h1.page-title { display: none; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .post-type-archive-events .post-feed, .events-footercol, .tax-events-category .post-feed { grid-template-columns: 1fr; } .event-side-image { padding-top: 60%; } } /**** 13.2 Videos ****/ .videos-block-cards { display: grid; grid-gap: 20px; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); grid-template-columns: 1fr 1fr 1fr; margin-bottom: 20px!important; } .videos-single { display: grid; grid-gap: 20px; grid-template-columns: 1fr 3fr; margin-bottom: 50px!important; } /* .videos-feed-left-inner { position: -webkit-sticky; position: sticky; top: 115px; } */ .videos-feed-right .post-feed { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr; margin-bottom: 20px!important; width: calc( 100% + 20px ); } .videos-feed-right .post-feed .videos { width: calc( ( 100% / 3 ) - ( 20px * 1 ) ); } .videos-feed-filter { display: grid; grid-template-columns: 1fr 1fr 1fr 120px; grid-gap: 20px; margin-bottom: 0; max-width: 80%; margin: 20px auto 40px; align-items: end; } .videos-mian-text-area { margin-top: 20px; } .movement-card-text { padding: 15px; } .movement-card-text h2 { font-size: 18px; } .videos-feed-filter-item * { width: 100%; } .movement-card-image { background-size: cover!important; background-position: center!important; } .post-type-archive-videos .post-feed > article { /* min-width: calc(50% - 40px);*/ } .videos-feed-right .single-feed-item { padding-bottom: 0!important; } .cat-list p { margin-bottom: 5px; } .videos-section { background: #ACC0C3; padding-top: 35px; } .videos-single-left-inner { position: sticky; top: 50px; } a.videos-block-view-all { width: 100%; text-align: center; display: block; margin: 0px 0 35px; font-size: 20px; text-decoration: none!important; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .post-type-archive-videos .content-area, .tax-videos-categories .content-area { width: 100%; margin-right: 0px; } .videos-cards { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr; margin-bottom: 20px!important; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .videos-cards { grid-template-columns: 1fr; } .videos-feed { grid-template-columns: 1fr ; } .videos-feed-right .post-feed { grid-template-columns: 1fr; } } .videos-section .movement-card-text h2 { color: #222; text-align: center; font-size: 18px; } /**** 13.3 Jobs ****/ .job-single-card { background: #f3f3f3; margin-bottom: 20px; padding: 20px; } .vacancies-sidebar-outer { margin-bottom: 20px; } .job-vacancies-sidebar-inner { background: #f4f4f4; padding: 20px 20px 0px; } .job-vacancies-sidebar-inner .wpcf7-text, .job-vacancies-sidebar-inner .wpcf7-textarea { background: white; } .job-vacancies-sidebar-inner .wpcf7 .row { margin-right: -10px; margin-left: -10px; } .archive-filter-form-wrapper label { display: none; } .archive-filter-form-wrapper input[type="submit"] { top: -2px; position: relative; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .job-vacancies-sidebar-inner .wpcf7 .row { margin-right: -15px; margin-left: -15px; } .vacancies-sidebar-outer { margin-left: -5px; padding-right: 5px; } } /**** 13.4 Curriculum ****/ .single-curriculum .content-area { width: calc( 100% ); margin-right: 0px; } .curriculum-image-background { background-position: center!important; background-size: cover!important; background-repeat: no-repeat!important; } .curriculum-cat-tabs .nav-tabs { border-bottom: 0px solid #dee2e6; } .tab-7-11 .nav-link { background-color: #98012E!important; } .tab-a-level .nav-link { background-color: #0079C2!important; } .curriculum-image-inner { max-width: 1200px; margin: 0px auto 30px; padding: 100px 20px; } ul.curricumum-menu-ul { margin: 0; list-style: none; } a.curricumum-menu-item { background: #F2F4F3; width: 100%!important; padding: 5px 15px; display: block; border-left: 5px solid #F2F4F3; transition: 0.5s; color: black; } a.curricumum-menu-item:hover { background: #CCCCCC; width: 100%!important; padding: 5px 15px; display: block; border-left: 5px solid #a6a6a6; color: black; text-decoration: none; } .tab-panel-7-11 ul { border-top: 5px #98012E solid!important; } .tab-panel-a-level ul { border-top: 5px #0079C2 solid!important; } /**** 13.5 Concrete Pumps ****/ .concrete-pumps-feed-grid { display: grid; grid-gap: 20px; grid-template-columns: 1fr 3fr; margin-bottom: 20px!important; } a.concrete-card-link:hover { text-decoration: none; } .concrete-card-image { padding-top: 60%; background-size: cover; position: relative; } .concrete-text { padding: 15px; background: rgb(241,243,245); } .concrete-text-top { display: grid; grid-gap: 15px; grid-template-columns: 1fr 50px; } .concrete-text-bottom { display: grid; grid-gap: 15px; grid-template-columns: 1fr 1fr; } .concrete-text-bottom-distance { position: relative; padding-left: 15px; left: 35px; font-size: 24px; } span.distance-span:before { content: ""; width: 40px; height: 40px; background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxuczp4PSJodHRwOi8vbnMuYWRvYmUuY29tL0V4dGVuc2liaWxpdHkvMS4wLyIgeG1sbnM6aT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIiB4bWxuczpncmFwaD0iaHR0cDovL25zLmFkb2JlLmNvbS9HcmFwaHMvMS4wLyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzd2l0Y2g+PGZvcmVpZ25PYmplY3QgcmVxdWlyZWRFeHRlbnNpb25zPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlSWxsdXN0cmF0b3IvMTAuMC8iIHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvZm9yZWlnbk9iamVjdD48ZyBpOmV4dHJhbmVvdXM9InNlbGYiPjxnIGRpc3BsYXk9Im5vbmUiPjxyZWN0IHg9Ii0xOTIiIGRpc3BsYXk9ImlubGluZSIgd2lkdGg9IjE4NSIgaGVpZ2h0PSI5OSI+PC9yZWN0PjxyZWN0IHk9Ii0zNiIgZGlzcGxheT0iaW5saW5lIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjMwIj48L3JlY3Q+PHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSA2NiAtMTkuNSkiIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IidIZWx2ZXRpY2EnIiBmb250LXNpemU9IjIuNCI+aHR0cDovL3RoZW5vdW5wcm9qZWN0LmNvbTwvdGV4dD48dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDcuMTY2IC0yNC41KSIgZGlzcGxheT0iaW5saW5lIj48dHNwYW4geD0iMCIgeT0iMCIgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IidIZWx2ZXRpY2EtQm9sZCciIGZvbnQtc2l6ZT0iNi4xNTc4Ij5UaGUgTm91biBQcm9qZWN0PC90c3Bhbj48dHNwYW4geD0iMS4xMiIgeT0iNC44IiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iJ0hlbHZldGljYS1Cb2xkJyIgZm9udC1zaXplPSI0Ij5JY29uIFRlbXBsYXRlPC90c3Bhbj48L3RleHQ+PHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSAtMTc4LjUgMTAuNSkiIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IidIZWx2ZXRpY2EtQm9sZCciIGZvbnQtc2l6ZT0iNi4xNTc4Ij5SZW1pbmRlcnM8L3RleHQ+PGxpbmUgZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjMDAwMDAwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjgiIHkxPSItMTQuNSIgeDI9IjE4IiB5Mj0iLTE0LjUiPjwvbGluZT48bGluZSBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9IiMwMDAwMDAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iLTE3OSIgeTE9IjE2LjUiIHgyPSItMTYyIiB5Mj0iMTYuNSI+PC9saW5lPjxnIGRpc3BsYXk9ImlubGluZSI+PGc+PGc+PHJlY3QgeD0iLTE3MC44MDIiIHk9IjMxLjMxOCIgZmlsbD0iIzAwMDAwMCIgd2lkdGg9IjguNzIxIiBoZWlnaHQ9IjguNjQyIj48L3JlY3Q+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTS0xNjQuNDU1LDQyLjMxMmg0Ljc0N3YtNC43MDNoLTQuNzQ3VjQyLjMxMnogTS0xNTkuMjY2LDQyLjc0OWgtNS42M1YzNy4xN2g1LjYzVjQyLjc0OSAgICAgICAgTC0xNTkuMjY2LDQyLjc0OXogTS0xNjYuMjIxLDQ0LjA2Mmg4LjI3OXYtOC4yMDNoLTguMjc5VjQ0LjA2MkwtMTY2LjIyMSw0NC4wNjJ6IE0tMTU3LjUsNDQuNWgtOS4xNjN2LTkuMDc5aDkuMTYzVjQ0LjUgICAgICAgIEwtMTU3LjUsNDQuNXoiPjwvcGF0aD48cG9seWdvbiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9Ii0xNjYuMTQ5LDQ0LjEzMyAtMTY2LjI5Miw0My45OTEgLTE1OC4wMTMsMzUuNzg3IC0xNTcuODcxLDM1LjkyOSAgICAgICAiPjwvcG9seWdvbj48L2c+PC9nPjwvZz48cmVjdCB4PSItMTc5IiB5PSI1OCIgZGlzcGxheT0iaW5saW5lIiBmaWxsPSJub25lIiB3aWR0aD0iMzUiIGhlaWdodD0iMzIuNSI+PC9yZWN0Pjx0ZXh0IHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgLTE3OSA2MC4xMjk5KSIgZGlzcGxheT0iaW5saW5lIj48dHNwYW4geD0iMCIgeT0iMCIgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IidIZWx2ZXRpY2EtQm9sZCciIGZvbnQtc2l6ZT0iMyI+U3Ryb2tlczwvdHNwYW4+PHRzcGFuIHg9IjAiIHk9IjUiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSInSGVsdmV0aWNhJyIgZm9udC1zaXplPSIyLjQiPlRyeSB0byBrZWVwIHN0cm9rZXMgYXQgNHB4PC90c3Bhbj48dHNwYW4geD0iMCIgeT0iMTAiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSInSGVsdmV0aWNhJyIgZm9udC1zaXplPSIyLjQiPk1pbmltdW0gc3Ryb2tlIHdlaWdodCBpcyAycHg8L3RzcGFuPjx0c3BhbiB4PSIwIiB5PSIxNC41IiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iJ0hlbHZldGljYSciIGZvbnQtc2l6ZT0iMi40Ij5Gb3IgdGhpY2tlciBzdHJva2VzIHVzZSBldmVuIDwvdHNwYW4+PHRzcGFuIHg9IjAiIHk9IjE3LjUiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSInSGVsdmV0aWNhJyIgZm9udC1zaXplPSIyLjQiPm51bWJlcnM6IDZweCwgOHB4IGV0Yy48L3RzcGFuPjx0c3BhbiB4PSIwIiB5PSIyMiIgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IidIZWx2ZXRpY2EtQm9sZCciIGZvbnQtc2l6ZT0iMi40Ij5SZW1lbWJlciB0byBleHBhbmQgc3Ryb2tlcyA8L3RzcGFuPjx0c3BhbiB4PSIwIiB5PSIyNSIgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IidIZWx2ZXRpY2EtQm9sZCciIGZvbnQtc2l6ZT0iMi40Ij5iZWZvcmUgc2F2aW5nIGFzIGFuIFNWRyA8L3RzcGFuPjwvdGV4dD48cmVjdCB4PSItMTM2LjUiIHk9IjU4IiBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9Im5vbmUiIHdpZHRoPSIzNSIgaGVpZ2h0PSIzMi41Ij48L3JlY3Q+PHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSAtMTM2LjUgNjAuMTI5OSkiIGRpc3BsYXk9ImlubGluZSI+PHRzcGFuIHg9IjAiIHk9IjAiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSInSGVsdmV0aWNhLUJvbGQnIiBmb250LXNpemU9IjMiPlNpemU8L3RzcGFuPjx0c3BhbiB4PSIwIiB5PSI1IiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iJ0hlbHZldGljYSciIGZvbnQtc2l6ZT0iMi40Ij5DYW5ub3QgYmUgd2lkZXIgb3IgdGFsbGVyIHRoYW4gPC90c3Bhbj48dHNwYW4geD0iMCIgeT0iOC41IiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iJ0hlbHZldGljYSciIGZvbnQtc2l6ZT0iMi40Ij4xMDBweCAoYXJ0Ym9hcmQgc2l6ZSk8L3RzcGFuPjx0c3BhbiB4PSIwIiB5PSIxMy41IiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iJ0hlbHZldGljYSciIGZvbnQtc2l6ZT0iMi40Ij5TY2FsZSB5b3VyIGljb24gdG8gZmlsbCBhcyBtdWNoIG9mIDwvdHNwYW4+PHRzcGFuIHg9IjAiIHk9IjE2LjUiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSInSGVsdmV0aWNhJyIgZm9udC1zaXplPSIyLjQiPnRoZSBhcnRib2FyZCBhcyBwb3NzaWJsZTwvdHNwYW4+PC90ZXh0PjxyZWN0IHg9Ii05NCIgeT0iNTgiIGRpc3BsYXk9ImlubGluZSIgZmlsbD0ibm9uZSIgd2lkdGg9IjM1IiBoZWlnaHQ9IjMyLjUiPjwvcmVjdD48dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIC05NCA2MC4xMjk5KSIgZGlzcGxheT0iaW5saW5lIj48dHNwYW4geD0iMCIgeT0iMCIgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IidIZWx2ZXRpY2EtQm9sZCciIGZvbnQtc2l6ZT0iMyI+VW5ncm91cDwvdHNwYW4+PHRzcGFuIHg9IjAiIHk9IjUiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSInSGVsdmV0aWNhJyIgZm9udC1zaXplPSIyLjQiPklmIHlvdXIgZGVzaWduIGhhcyBtb3JlIHRoYW4gb25lIDwvdHNwYW4+PHRzcGFuIHg9IjAiIHk9IjgiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSInSGVsdmV0aWNhJyIgZm9udC1zaXplPSIyLjQiPnNoYXBlLCBtYWtlIHN1cmUgdG8gdW5ncm91cDwvdHNwYW4+PC90ZXh0PjxyZWN0IHg9Ii01MCIgeT0iNTgiIGRpc3BsYXk9ImlubGluZSIgZmlsbD0ibm9uZSIgd2lkdGg9IjM1IiBoZWlnaHQ9IjMyLjUiPjwvcmVjdD48dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIC01MCA2MC4xMjk5KSIgZGlzcGxheT0iaW5saW5lIj48dHNwYW4geD0iMCIgeT0iMCIgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IidIZWx2ZXRpY2EtQm9sZCciIGZvbnQtc2l6ZT0iMyI+U2F2ZSBhczwvdHNwYW4+PHRzcGFuIHg9IjAiIHk9IjUiIGZpbGw9IiMwMDAwMDAiIGZvbnQtZmFtaWx5PSInSGVsdmV0aWNhJyIgZm9udC1zaXplPSIyLjQiPlNhdmUgYXMgLlNWRyBhbmQgbWFrZSBzdXJlIOKAnFVzZSA8L3RzcGFuPjx0c3BhbiB4PSIwIiB5PSI4IiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iJ0hlbHZldGljYSciIGZvbnQtc2l6ZT0iMi40Ij5BcnRib2FyZHPigJ0gaXMgY2hlY2tlZDwvdHNwYW4+PC90ZXh0Pjx0ZXh0IHRyYW5zZm9ybT0ibWF0cml4KDEuMDA3NCAwIDAgMSAtMTI1LjU0MiAzMC41OTMzKSIgZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iJ0hlbHZldGljYSciIGZvbnQtc2l6ZT0iMi41NzMxIj4xMDBweDwvdGV4dD48dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxLjAwNzQgMCAwIDEgLTQxIDM5KSIgZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjMDAwMDAwIiBmb250LWZhbWlseT0iJ0hlbHZldGljYS1Cb2xkJyIgZm9udC1zaXplPSI1LjE0NjIiPi5TVkc8L3RleHQ+PHJlY3QgeD0iLTEyNi41MTQiIHk9IjM0LjgxNSIgZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iMTAuMjYxIiBoZWlnaHQ9IjEwLjE4NSI+PC9yZWN0PjxyZWN0IHg9Ii0xMjYuNDc3IiB5PSIzMS43NjYiIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iIzAwMDAwMCIgd2lkdGg9IjAuNTIyIiBoZWlnaHQ9IjIuMzM3Ij48L3JlY3Q+PHJlY3QgeD0iLTExNi44MTMiIHk9IjMxLjc2NiIgZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iMC41MjMiIGhlaWdodD0iMi4zMzciPjwvcmVjdD48cmVjdCB4PSItMTI3IiB5PSIzMi4zMzciIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iIzAwMDAwMCIgd2lkdGg9IjExLjIzMyIgaGVpZ2h0PSIwLjU3MiI+PC9yZWN0PjxnIGRpc3BsYXk9ImlubGluZSI+PHJlY3QgeD0iLTgzLjgwNSIgeT0iMzMuODQ0IiBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iMTAuMzA1IiBoZWlnaHQ9IjEwLjE1NiI+PC9yZWN0PjxyZWN0IHg9Ii03Ni44MDkiIHk9IjI4LjcwNyIgZmlsbD0iIzAwMDAwMCIgd2lkdGg9IjMuMzA4IiBoZWlnaHQ9IjMuMjYxIj48L3JlY3Q+PC9nPjxyZWN0IHg9Ii0xNzguNSIgeT0iMjIuNSIgZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjMDAwMDAwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48L3JlY3Q+PHJlY3QgeD0iLTEzNi41IiB5PSIyMi41IiBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9IiMwMDAwMDAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiPjwvcmVjdD48cmVjdCB4PSItOTMuNSIgeT0iMjIuNSIgZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjMDAwMDAwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIj48L3JlY3Q+PHJlY3QgeD0iLTQ5LjUiIHk9IjIyLjUiIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+PC9yZWN0PjwvZz48Zz48cGF0aCBkPSJNMC4wNDIsNzUuMzhsMTMuNjQyLDE1LjY4NWw4Ni42MTEtNzUuMzM3TDg2LjY1NCwwLjA0MkwwLjA0Miw3NS4zOHogTTk2Ljk0NywxNS40OTRsLTgzLjAzLDcyLjIyMkwzLjM5Miw3NS42MTMgICAgIGwwLjg2Ni0wLjc1NEw2LjUsNzcuNDM4bDEuMTk1LTEuMDM5TDUuNDUzLDczLjgybDEuMTU5LTEuMDA5bDIuMjQ0LDIuNTc3bDEuMTkzLTEuMDM4bC0yLjI0Mi0yLjU3OGwxLjE2Mi0xLjAxMWwyLjI0MiwyLjU3OCAgICAgbDEuMTk0LTEuMDM5bC0yLjI0Mi0yLjU3OGwxLjE2MS0xLjAwOWwyLjI0MywyLjU3N2wxLjE5Mi0xLjAzOGwtMi4yNDItMi41NzhsMS4xNjQtMS4wMTFsMi4yNDIsMi41NzhsMS4xOTMtMS4wMzlsLTIuMjQyLTIuNTc4ICAgICBsMS4xNjUtMS4wMTNsMy41NDEsNC4wN2wxLjE5NS0xLjAzOWwtMy41NDEtNC4wNjlsMS4xNTktMS4wMDlsMi4yNDIsMi41NzdsMS4xOTUtMS4wMzhsLTIuMjQzLTIuNTc4bDEuMTYyLTEuMDExbDIuMjQyLDIuNTc4ICAgICBsMS4xOTQtMS4wMzlsLTIuMjQyLTIuNTc4bDEuMTYxLTEuMDFsMi4yNDIsMi41NzhsMS4xOTQtMS4wNGwtMi4yNDItMi41NzZsMS4xNjEtMS4wMWwyLjI0MiwyLjU3N2wxLjE5My0xLjAzOGwtMi4yNDItMi41NzggICAgIGwxLjE2Mi0xLjAxMWwyLjI0MiwyLjU3OWwxLjE5NS0xLjAzOWwtMi4yNDItMi41NzhsMS4xNjItMS4wMTFsNS4yNjMsNi4wNTFsMS4xOTQtMS4wMzlsLTUuMjYzLTYuMDUxbDEuMTYyLTEuMDExbDIuMjQyLDIuNTc3ICAgICBsMS4xOTQtMS4wMzhsLTIuMjQyLTIuNTc4bDEuMTYzLTEuMDExbDIuMjQyLDIuNTc4bDEuMTk0LTEuMDM5bC0yLjI0My0yLjU3N2wxLjE2Mi0xLjAxMWwyLjI0MiwyLjU3OGwxLjE5My0xLjAzOWwtMi4yNDItMi41NzggICAgIGwxLjE2NC0xLjAxMWwyLjI0MiwyLjU3N2wxLjE5My0xLjAzOGwtMi4yNDItMi41NzhsMS4xNjQtMS4wMTFsMi4yNDIsMi41NzdsMS4xOTMtMS4wMzlsLTIuMjQyLTIuNTc3bDEuMTYyLTEuMDEybDMuNTQxLDQuMDcxICAgICBsMS4xOTQtMS4wMzlsLTMuNTQxLTQuMDdsMS4xNjMtMS4wMTFsMi4yNDIsMi41NzhsMS4xOTQtMS4wMzhsLTIuMjQ0LTIuNTc4bDEuMTYzLTEuMDEybDIuMjQyLDIuNTc5bDEuMTk0LTEuMDM5bC0yLjI0My0yLjU3OCAgICAgbDEuMTY0LTEuMDEybDIuMjQxLDIuNTc4bDEuMTkzLTEuMDM4bC0yLjI0Mi0yLjU3OWwxLjE2My0xLjAxMWwyLjI0MSwyLjU3OGwxLjE5NC0xLjAzOWwtMi4yNDItMi41NzdsMS4xNjItMS4wMTJsMi4yNDIsMi41NzggICAgIGwxLjE5NC0xLjAzOWwtMi4yNDEtMi41NzhsMS4xNjEtMS4wMTFsNS4yNjQsNi4wNTJsMS4xOTQtMS4wMzlsLTUuMjYzLTYuMDUybDEuMTYxLTEuMDExbDIuMjQzLDIuNTc4bDEuMTk0LTEuMDM5bC0yLjI0Mi0yLjU3OSAgICAgbDEuMTYxLTEuMDFsMi4yNDMsMi41NzhsMS4xOTQtMS4wMzlsLTIuMjQ0LTIuNTc4bDEuMTY0LTEuMDExbDIuMjQyLDIuNTc3bDEuMTkzLTEuMDM4bC0yLjI0My0yLjU3OGwxLjE2NC0xLjAxMmwyLjI0MywyLjU3OSAgICAgbDEuMTkyLTEuMDM5bC0yLjI0My0yLjU3OGwxLjE2My0xLjAxMWwyLjI0MSwyLjU3N2wxLjE5NS0xLjAzOGwtMi4yNDItMi41NzhsMS4xNjItMS4wMTFsMy41NCw0LjA3bDEuMTk0LTEuMDM5bC0zLjU0LTQuMDcgICAgIGwxLjE2Mi0xLjAxMWwyLjI0MiwyLjU3OGwxLjE5Mi0xLjAzOWwtMi4yNDItMi41NzhsMS4xNjQtMS4wMTFsMi4yNDIsMi41NzdsMS4xOTItMS4wMzhMNzguNDksMTAuMjlsMS4xNjItMS4wMTJsMi4yNDIsMi41NzkgICAgIGwxLjE5My0xLjAzOUw4MC44NDcsOC4yNGwxLjE2MS0xLjAxMmwyLjI0MywyLjU3OGwxLjE5NC0xLjAzOGwtMi4yNDItMi41NzlsMS4xNjEtMS4wMTFsMi4yNDMsMi41NzhsMS4xOTQtMS4wMzlMODUuNTYsNC4xNDEgICAgIGwwLjg2MS0wLjc1TDk2Ljk0NywxNS40OTR6Ij48L3BhdGg+PC9nPjwvZz48L3N3aXRjaD48L3N2Zz4=); display: block; background-size: contain; /* float: left; */ position: absolute; left: -35px; top: -5px; } .concrete-text-top-brand { background-size: contain!important; background-position: center!important; background-repeat: no-repeat!important; } .concrete-text-bottom-volume { position: relative; padding-left: 15px; left: 35px; font-size: 24px; } span.volume-span:before { background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PGc+PHBhdGggZD0iTTkyLjI0OSwyNy42NDVjLTAuMDA0LTAuMTI5LTAuMDMyLTAuMjU0LTAuMDg1LTAuMzdjLTAuMDEtMC4wMjItMC4wMjMtMC4wNDEtMC4wMzUtMC4wNjIgICAgYy0wLjA1NS0wLjEwMi0wLjEyNy0wLjE5My0wLjIxOC0wLjI3MWMtMC4wMTEtMC4wMS0wLjAxNy0wLjAyNS0wLjAyNy0wLjAzNGMtMC4wMDUtMC4wMDQtMC4wMTEtMC4wMDQtMC4wMTYtMC4wMDcgICAgYy0wLjAwNy0wLjAwNi0wLjAxMy0wLjAxMy0wLjAyMS0wLjAxOUw2MS42Myw1LjE4MmMtMC4yMjktMC4xNjYtMC41MjQtMC4yMi0wLjc5OC0wLjE1N0w4LjQ5NSwxNy41NTQgICAgYy0wLjAzNCwwLjAwOC0wLjA2NCwwLjAyNy0wLjA5NywwLjAzOGMtMC4wNDEsMC4wMTQtMC4wODMsMC4wMjMtMC4xMjIsMC4wNDNjLTAuMDA3LDAuMDA0LTAuMDEyLDAuMDEtMC4wMiwwLjAxNCAgICBjLTAuMDM5LDAuMDIxLTAuMDczLDAuMDUtMC4xMDgsMC4wNzZjLTAuMDM4LDAuMDI4LTAuMDc3LDAuMDU0LTAuMTEsMC4wODZjLTAuMDMsMC4wMy0wLjA1NCwwLjA2NC0wLjA4LDAuMDk4ICAgIGMtMC4wMywwLjAzOC0wLjA2LDAuMDc0LTAuMDg0LDAuMTE2Yy0wLjAyMSwwLjAzNi0wLjAzNCwwLjA3NS0wLjA1LDAuMTE0Yy0wLjAxOSwwLjA0Ni0wLjAzNywwLjA5MS0wLjA0OSwwLjEzOSAgICBjLTAuMDAzLDAuMDEzLTAuMDExLDAuMDI1LTAuMDEzLDAuMDM4Yy0wLjAwNiwwLjAzLTAuMDAxLDAuMDYtMC4wMDQsMC4wOWMtMC4wMDMsMC4wMzMtMC4wMTQsMC4wNjUtMC4wMTQsMC4wOThWNzIuMzIgICAgYzAsMC4zMTMsMC4xNTIsMC42MTEsMC40MDgsMC43OTVMMzguMzcsOTQuODE0YzAuMDUxLDAuMDM3LDAuMTA4LDAuMDU4LDAuMTY0LDAuMDgyYzAuMDM0LDAuMDE3LDAuMDY0LDAuMDM5LDAuMDk5LDAuMDQ5ICAgIEMzOC43MzIsOTQuOTgyLDM4LjgzNiw5NSwzOC45NCw5NWMwLjA3NiwwLDAuMTUzLTAuMDA5LDAuMjI3LTAuMDI3bDUyLjMzOC0xMi41MjdjMC40NC0wLjEwNSwwLjc1MS0wLjUsMC43NTEtMC45NTFWMjcuNjc3ICAgIEM5Mi4yNTYsMjcuNjY2LDkyLjI0OSwyNy42NTYsOTIuMjQ5LDI3LjY0NXogTTkuNzI5LDcxLjMyNkw5LjcsNzEuMzMzdi01MC45MmwyOC4yNjEsMjAuMjk1djIzLjg2bC0yLjA1MSwwLjQ5MmwwLjM0MiwxLjQyNiAgICBsMS43MDktMC40MDh2MjYuMDM4TDkuODc4LDcxLjk0N0w5LjcyOSw3MS4zMjZ6IE0zOS4xNDcsMzkuMTVMMTEuMDMxLDE4Ljk1OWw0OS4yOTYtMTEuOHYwLjAzaDAuNzQzbDI3LjksMjAuMDM1TDM5LjE0NywzOS4xNXogICAgIE0zOS45MTgsNDAuOTc3bDIwLjQwOC00Ljg4NXYwLjQ2NGgxLjQ2N1YzNS43NGwyOC41MDYtNi44MjR2NTEuODA1TDM5LjkxOCw5Mi43OFY0MC45Nzd6Ij48L3BhdGg+PHJlY3QgeD0iNTAuODIyIiB5PSI2MC44NDIiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjIzMzQgLTAuOTcyNCAwLjk3MjQgLTAuMjMzNCAzLjI0MTkgMTI2LjY4NjYpIiB3aWR0aD0iMS40NjgiIGhlaWdodD0iMi40NDciPjwvcmVjdD48cmVjdCB4PSI1NS41NzciIHk9IjU5LjcwNSIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMjMyOCAtMC45NzI1IDAuOTcyNSAtMC4yMzI4IDEwLjE2NjkgMTI5Ljg3NzcpIiB3aWR0aD0iMS40NjgiIGhlaWdodD0iMi40NDciPjwvcmVjdD48cmVjdCB4PSI0Ni4wNjIiIHk9IjYxLjk4MiIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMjMyOCAtMC45NzI1IDAuOTcyNSAtMC4yMzI4IC0zLjc3ODYgMTIzLjQzMTQpIiB3aWR0aD0iMS40NjgiIGhlaWdodD0iMi40NDgiPjwvcmVjdD48cmVjdCB4PSIxMi43NCIgeT0iNjkuOTYyIiB0cmFuc2Zvcm09Im1hdHJpeCgtMC4yMzI4IC0wLjk3MjUgMC45NzI1IC0wLjIzMjggLTUyLjYxNzcgMTAwLjg2MjIpIiB3aWR0aD0iMS40NjgiIGhlaWdodD0iMi40NDciPjwvcmVjdD48cmVjdCB4PSIzMS43ODIiIHk9IjY1LjQiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjIzMzEgLTAuOTcyNCAwLjk3MjQgLTAuMjMzMSAtMjQuNjkxNSAxMTMuNzc2NSkiIHdpZHRoPSIxLjQ2OCIgaGVpZ2h0PSIyLjQ0OCI+PC9yZWN0PjxyZWN0IHg9IjE3LjUwMSIgeT0iNjguODIyIiB0cmFuc2Zvcm09Im1hdHJpeCgtMC4yMzI4IC0wLjk3MjUgMC45NzI1IC0wLjIzMjggLTQ1LjY0MDEgMTA0LjA4NjMpIiB3aWR0aD0iMS40NjgiIGhlaWdodD0iMi40NDYiPjwvcmVjdD48cmVjdCB4PSIyNy4wMiIgeT0iNjYuNTQyIiB0cmFuc2Zvcm09Im1hdHJpeCgtMC4yMzI4IC0wLjk3MjUgMC45NzI1IC0wLjIzMjggLTMxLjY4NjggMTEwLjUzMzkpIiB3aWR0aD0iMS40NjgiIGhlaWdodD0iMi40NDciPjwvcmVjdD48cmVjdCB4PSI0MS4zMDMiIHk9IjYzLjEyMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMjMyOCAtMC45NzI1IDAuOTcyNSAtMC4yMzI4IC0xMC43NTI3IDEyMC4yMDcxKSIgd2lkdGg9IjEuNDY4IiBoZWlnaHQ9IjIuNDQ3Ij48L3JlY3Q+PHJlY3QgeD0iMjIuMjYxIiB5PSI2Ny42ODEiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjIzMjggLTAuOTcyNSAwLjk3MjUgLTAuMjMyOCAtMzguNjYyOSAxMDcuMzExKSIgd2lkdGg9IjEuNDY4IiBoZWlnaHQ9IjIuNDQ4Ij48L3JlY3Q+PHJlY3QgeD0iODYuMzE5IiB5PSI3OC4wMjYiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjgxMiAtMC41ODM3IDAuNTgzNyAtMC44MTIgMTEyLjUzNTggMTkzLjc3MDgpIiB3aWR0aD0iMi4zMTkiIGhlaWdodD0iMS40NjYiPjwvcmVjdD48cmVjdCB4PSI3NS4wMTciIHk9IjY5LjkxMyIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuODEyNSAtMC41ODMgMC41ODMgLTAuODEyNSA5Ni44ODU1IDE3Mi40NTQ5KSIgd2lkdGg9IjIuMzE4IiBoZWlnaHQ9IjEuNDY4Ij48L3JlY3Q+PHJlY3QgeD0iNzguNzc3IiB5PSI3Mi42MSIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuODEyMSAtMC41ODM1IDAuNTgzNSAtMC44MTIxIDEwMi4wNTgzIDE3OS41NDk3KSIgd2lkdGg9IjIuMzIiIGhlaWdodD0iMS40NjgiPjwvcmVjdD48cmVjdCB4PSI4Mi41NTEiIHk9Ijc1LjMyMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuODEyNSAtMC41ODMgMC41ODMgLTAuODEyNSAxMDcuMzg4MyAxODYuNjUwMikiIHdpZHRoPSIyLjMxOCIgaGVpZ2h0PSIxLjQ2OSI+PC9yZWN0PjxyZWN0IHg9IjYzLjcxOCIgeT0iNjEuNzk4IiB0cmFuc2Zvcm09Im1hdHJpeCgtMC44MTI0IC0wLjU4MzEgMC41ODMxIC0wLjgxMjQgODEuMTE0MiAxNTEuMTYzOSkiIHdpZHRoPSIyLjMxOCIgaGVpZ2h0PSIxLjQ2OSI+PC9yZWN0PjxyZWN0IHg9IjY3LjQ4MyIgeT0iNjQuNTAyIiB0cmFuc2Zvcm09Im1hdHJpeCgtMC44MTI1IC0wLjU4MyAwLjU4MyAtMC44MTI1IDg2LjM4NTcgMTU4LjI1NjYpIiB3aWR0aD0iMi4zMTgiIGhlaWdodD0iMS40NjkiPjwvcmVjdD48cmVjdCB4PSI3MS4yMzUiIHk9IjY3LjIwOCIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuODEyNSAtMC41ODMgMC41ODMgLTAuODEyNSA5MS42MDg2IDE2NS4zNDg1KSIgd2lkdGg9IjIuMzE4IiBoZWlnaHQ9IjEuNDY5Ij48L3JlY3Q+PHBvbHlnb24gcG9pbnRzPSI2MS43OTQsNTguNTgyIDYwLjMyNiw1OC41ODIgNjAuMzI2LDU5LjIxNSA1OS43MTEsNTkuMzYxIDYwLjA1Myw2MC43ODkgNjAuOTA0LDYwLjU4NSA2MS42MTYsNjEuMDk2ICAgICA2Mi40NzMsNTkuOTA0IDYxLjc5NCw1OS40MTcgICAiPjwvcG9seWdvbj48cmVjdCB4PSI2MC4zMjYiIHk9IjI0LjMyIiB3aWR0aD0iMS40NjciIGhlaWdodD0iMi40NDgiPjwvcmVjdD48cmVjdCB4PSI2MC4zMjYiIHk9IjI5LjIxNCIgd2lkdGg9IjEuNDY3IiBoZWlnaHQ9IjIuNDQ3Ij48L3JlY3Q+PHJlY3QgeD0iNjAuMzI2IiB5PSI0OC43OTMiIHdpZHRoPSIxLjQ2NyIgaGVpZ2h0PSIyLjQ0NyI+PC9yZWN0PjxyZWN0IHg9IjYwLjMyNiIgeT0iNTMuNjg4IiB3aWR0aD0iMS40NjciIGhlaWdodD0iMi40NDciPjwvcmVjdD48cmVjdCB4PSI2MC4zMjYiIHk9IjQzLjg5OCIgd2lkdGg9IjEuNDY3IiBoZWlnaHQ9IjIuNDQ4Ij48L3JlY3Q+PHJlY3QgeD0iNjAuMzI2IiB5PSIzOS4wMDMiIHdpZHRoPSIxLjQ2NyIgaGVpZ2h0PSIyLjQ0OCI+PC9yZWN0PjxyZWN0IHg9IjYwLjMyNiIgeT0iMTkuNDI1IiB3aWR0aD0iMS40NjciIGhlaWdodD0iMi40NDgiPjwvcmVjdD48cmVjdCB4PSI2MC4zMjYiIHk9IjE0LjUzMSIgd2lkdGg9IjEuNDY3IiBoZWlnaHQ9IjIuNDQ3Ij48L3JlY3Q+PHJlY3QgeD0iNjAuMzI2IiB5PSI5LjYzNiIgd2lkdGg9IjEuNDY3IiBoZWlnaHQ9IjIuNDQ3Ij48L3JlY3Q+PC9nPjwvZz48L3N2Zz4=); display: block; background-size: contain; /* float: left; */ position: absolute; left: -35px; top: -5px; content: ""; width: 40px; height: 40px; } .concrete-card-image div { background: white; padding: 3px 9px; width: auto; position: absolute; top: 5px; right: 5px; } .concrete-card { box-shadow: 0 20px 10px -10px rgb(0 0 0 / 23%); } .concrete-pumps-single { display: grid; grid-gap: 20px; grid-template-columns: 1fr 3fr; margin-bottom: 20px!important; } .concrete-pumps-feed-left-inner { position: -webkit-sticky; position: sticky; top: 115px; } .concrete-pumps-feed-right .post-feed { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr; margin-bottom: 20px!important; width: calc( 100% + 20px ); } .concrete-pumps-feed-right .post-feed .concrete-pumps { width: calc( ( 100% / 3 ) - ( 20px * 1 ) ); margin-bottom: 25px; } .concrete-pumps-feed-filter { display: grid; grid-template-columns: 1fr 1fr 1fr 120px; grid-gap: 20px; margin-bottom: 0; max-width: 80%; margin: 20px auto 40px; align-items: end; } .concrete-pumps-mian-text-area { margin-top: 20px; } .movement-card-text { padding: 25px; } .concrete-pumps-feed-filter-item * { width: 100%; } .movement-card-image { background-size: cover!important; background-position: center!important; } .post-type-archive-concrete-pumps .post-feed > article { /* min-width: calc(50% - 40px);*/ } .concrete-pumps-feed-right .single-feed-item { padding-bottom: 0!important; } .cat-list p { margin-bottom: 5px; } .concrete-pumps-section { background: red; padding: 50px 0; } .concrete-pumps-single-left-inner { position: sticky; top: 50px; } .image-and-text-grid-item { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; margin-bottom: 20px; } .image-and-text-grid-item-left { background-size: cover; padding-top: 100%; background-repeat: no-repeat; } img.working-range-visual { margin: 25px 0; } .concrete-pumps-slider { margin-bottom: 25px; } .concrete-pumps-feed-left-inner input[type="radio"] { opacity: 0; position: absolute; left:-9999px; } .concrete-pumps-feed-left-inner label { display: inline-block; } .concrete-pumps-feed-left-inner label span { background: red; padding: 5px 15px; display: inline-block; } .concrete-pumps-feed-left-inner label span:hover { background: green; cursor: pointer; } .concrete-pumps-feed-left-inner :checked + span { text-decoration: underline; background: blue; } ul.isotoe-filter--concrete-pumps { list-style: none; margin: 0; font-size: 0; } .concrete-pumps-feed-grid { display: grid; grid-template-columns: 200px 1fr; grid-gap: 20px; } .concrete-pumps-feed-grid li.active { text-decoration: underline; } ul.isotoe-filter--concrete-pumps li { padding: 5px 15px; background: #D3D3D3; margin-bottom: 9px; margin-right: 9px; cursor: pointer; width: auto; display: inline-block; } ul.isotoe-filter--concrete-pumps li:hover { background: black; color: white; } ul.isotoe-filter--concrete-pumps li.active { background: pink; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .post-type-archive-concrete-pumps .content-area, .tax-concrete-pumps-categories .content-area { width: 100%; margin-right: 0px; } .concrete-pumps-cards { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr; margin-bottom: 20px!important; } } /**** 13.6 Custom Products ****/ @media (min-width: 768px) { .single-concrete-pumps .content-area { width: calc( 100% - 0px ); margin-right: 0px; } } .single-products .content-area { width: calc( 100% )!important; margin-right: 0px!important; } a.products-feed-item-link:hover { text-decoration: none!important; } .products-single { margin-bottom: 20px!important; } /* .products-feed-left-inner { position: -webkit-sticky; position: sticky; top: 115px; } */ .products-feed-right .post-feed { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr; margin-bottom: 20px!important; width: calc( 100% + 20px ); } .products-feed-right .post-feed .products { width: calc( ( 100% / 3 ) - ( 20px * 1 ) ); } .products-feed-filter { display: grid; grid-template-columns: 1fr 1fr 1fr 120px; grid-gap: 20px; margin-bottom: 0; max-width: 80%; margin: 20px auto 40px; align-items: end; } .products-mian-text-area { margin-top: 20px; } .products-card-text { padding: 25px 0; } h2.products-card-title{ font-size: 20px; color: darkgray; margin-bottom: 0!important; } .products-feed-filter-item * { width: 100%; } .products-image-background { background-size: cover!important; background-position: center!important; padding-top: 100%; } .post-type-archive-products .post-feed > article { /* min-width: calc(50% - 40px);*/ } .products-feed-right .single-feed-item { padding-bottom: 0!important; } .cat-list p { margin-bottom: 5px; } .products-section { background: red; } .products-single-left-inner { position: sticky; top: 50px; } .products-single-right-inner { position: sticky; top: 180px; } .products-single .gallery-lightbox { grid-template-columns: 1fr 1fr; } a.button.download-button:before { content: none!important; } .downloads { margin-bottom: 15px; } .download-button span.material-icons-outlined { color: white; position: relative; top: 4px; font-size: 16px; } .download-button:hover span.material-icons-outlined { color: #C71585; } a.button.download-button { padding: 8px 20px 8px 14px!important; margin-right: 10px; } .products-single-cross-market { border-top: 1px solid lightgrey; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .post-type-archive-products .content-area, .tax-products-categories .content-area { width: 100%; margin-right: 0px; } } /**** 13.7 Podcasts ****/ /* Podcast Feed */ /*.podcasts-feed-right .post-feed .podcasts { width: calc( ( 100% / 4 ) - ( 30px * 1 ) ); }*/ .podcasts-feed-right .post-feed, .podcasts-block-cards { display: grid; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); grid-gap: 25px; } @media (min-width: 768px) { .post-type-archive-podcasts .content-area, .tax-podcasts-categories .content-area { width: 100%; margin-right: 0px; } } /* podcast cards */ .podcast-card { background: #f3f3f3; padding: 0px 0px 0px; border-radius: 15px; display: grid; grid-gap: 15px; grid-template-columns: 1fr; margin-bottom: 15px; } .podcast-card-top { display: grid; background: #0075c0; padding: 15px; border-radius: 15px; grid-gap: 15px; grid-template-columns: 1fr; margin: 15px 15px 0; } h2.podcast-author-name { margin-bottom: 0; text-transform: uppercase; font-size: 18px; font-weight: 600; } h3.podcaset-title { text-transform: uppercase; font-size: 16px; font-weight: 100; } .podcast-card-top * { color: white!important; } .podcast-card-top-top { min-height: 135px; } .podcast-card-bottom { display: grid; align-items: end; } .podcast-card-top-bottom { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5px; align-items: end; } .podcast-card-top-bottom-right { background-position: center; background-size: cover; border-radius: 50%; padding-top: 100%; height: 0; } .podcast-card-bottom-text { margin: 0 15px; } .podcast-card-top-bottom-left p, .podcast-card-bottom-text p { margin-bottom: 0!important; } audio.podcast-audio { max-width: 100%; } /**** 13.8 Courses ****/ @media (min-width: 768px) { .post-type-archive-courses .content-area, .tax-course-categories .content-area, .single-courses .content-area { width: 100%!important; margin-right: 0px!important; } } /* Course Single */ .course-intro p { font-size: 20px; } .course-left { border-top: 2px solid red; padding-top: 15px; } .course-right-title { background: green; font-size: 16px; color: white; padding: 7px 15px; } .course-right-inner { position: sticky; top: 50px; margin-bottom: 15px; } .course-right-inner-top { border: 1px solid green; padding: 15px; } .course-right .button { width: 100%; margin-top: 15px; } .course-right .material-icons { font-size: 18px; top: 5px; position: relative; } a.button.course-download { border: 1px solid transparent; color: white!important; background-color: blue; } a.button.course-download:hover { border-color: blue!important; background-color: transparent!important; color: blue!important; } a.button.course-apply { border: 1px solid transparent; color: white!important; background-color: darkcyan; } a.button.course-apply:hover { border-color: darkcyan!important; background-color: transparent!important; color: darkcyan!important; } .courses-section { background: lightgrey; padding: 30px 0 50px; } /* Courses Card */ a.courses-card-link:hover { text-decoration: none; } .courses-card-image { padding-top: 60%; background-size: cover; position: relative; } .courses-card-text { padding: 15px; background: rgb(241,243,245); } .courses-card-text-bottom { display: grid; grid-gap: 15px; grid-template-columns: 1fr 1fr; } .courses-card-image div { background: white; padding: 3px 9px; width: auto; position: absolute; top: 5px; right: 5px; } .courses-card { box-shadow: 0 20px 10px -10px rgb(0 0 0 / 23%); } h3.courses-card-meta { font-size: 14px; } /* Course Feed */ .tax-course-categories .post-feed, .post-type-archive-courses .post-feed { display: grid; grid-template-columns: repeat( auto-fit, minmax(320px, 1fr) ); grid-gap: 35px; margin-bottom: 35px; } .course-archive-meta { padding: 0 0 15px; margin-bottom: 35px; border-bottom: 1px solid blue; } /****************************************/ /****************************************/ /********* 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 )!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: 255px; } .has-y-scroll .absolute-slider { top: -38px; } } /****** 14.3 Spash Grid Page *****/ .page-template-template-grid-splash .staticslider.header-slider { position: absolute; top: 0; width: 100%; } .page-template-template-grid-splash .the-content { z-index: 10; text-align: center; background: red; position: relative; margin: 0 auto; max-width: 800px; } /**** START SIDE NAV RULES ****/ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .page-template-template-grid-splash header#masthead li.menu-item { display: block; } .page-template-template-grid-splash header#masthead { max-width: 300px!important; } .page-template-template-grid-splash nav.secondary-navigation, .page-template-template-grid-splash ul#site-header-cart { display: none; } .page-template-template-grid-splash .site-header .site-branding { width: 100%!important; } .page-template-template-grid-splash header#masthead { position: absolute; top: 0; height: 100%; } .page-template-template-grid-splash ul.slides li { min-height: 100vh!important; } .page-template-template-grid-splash .primary-navigation { display: none; } .page-template-template-grid-splash ul#menu-main-menu-2 { position: absolute; top: 140px; } .page-template-template-grid-splash .handheld-navigation { display: block; } .page-template-template-grid-splash ul.sub-menu.toggled-on { float: initial!important; } .page-template-template-grid-splash ul#menu-main-menu-2 { width: 100%; left: 15px; } .page-template-template-grid-splash .handheld-navigation ul.menu .sub-menu { -webkit-transition: all, ease, 0s; transition: all, ease, 0s; } .page-template-template-grid-splash ul.sub-menu a { color: transparent; } .page-template-template-grid-splash ul.sub-menu.toggled-on a { color: red; transition: all, ease, 2s; } .page-template-template-grid-splash .handheld-navigation ul ul { position: initial; } .page-template-template-grid-splash .main-navigation ul.menu ul li.menu-item-has-children > a::after { content: " "; } .page-template-template-grid-splash .handheld-navigation ul.sub-menu ul.sub-menu li a { padding-left: 60px!important; } } /**** 14.4 Testimonials ****/ .testimonial-content::before { content: '\201c'; font-size: 12rem; color: #F1AD56; opacity: .3; font-family: serif; font-weight: bold; position: absolute; top: -93px; left: -2rem; z-index: 1; pointer-events: none; float: left; text-align: left; height: 108px; } .testimonial-content::after { content: '\201d'; font-size: 12rem; color: #F1AD56; opacity: .3; font-family: serif; font-weight: bold; position: absolute; top: -93px; right: -2rem; z-index: 1; pointer-events: none; float: left; text-align: left; height: 108px; } .testimonial-image-background { padding-top: 100%; background-position: center; background-size: cover; border-radius: 50%; } .testimonial-attribution { text-align: right; } .testimonial-content { font-style: italic; font-size: 1.2em; position: relative; } .testimonial-content p { font-size: 24px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .testimonial-left { max-width: 100px; margin: 0 auto 20px; max-width: 200px!important; } .testimonial-single { text-align: center; } .testimonial-attribution { text-align: center; } } /* Vertical Testimonials */ .testimonial-single-vertical, .testimonial-single-vertical .attribution { text-align: center; } .testimonial-single-vertical .speach-mark-center { color: red; font-size: 50px; margin-bottom: -23px; } .testimonial-single-vertical .testimonial-content::before, .testimonial-single-vertical .testimonial-content::after { content: none!important; } /**** 14.5 Empty ****/ /**** 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.7 Portfolio ****/ @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .post-type-archive-portfolio .content-area, .tax-portfolio-categories .content-area { width: 100%; margin-right: 0px; } } ul.isotoe-filter--portfolio { list-style: none; margin: 0; font-size: 0; } .portfolio-feed-grid { display: grid; grid-template-columns: 200px 1fr; grid-gap: 20px; } .portfolio-feed-grid li.active { text-decoration: underline; } ul.isotoe-filter--portfolio li { padding: 5px 15px; background: #D3D3D3; margin-bottom: 9px; margin-right: 9px; cursor: pointer; width: auto; display: inline-block; } ul.isotoe-filter--portfolio li:hover { background: black; color: white; } ul.isotoe-filter--portfolio li.active { background: pink; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .portfolio-feed-grid { grid-template-columns: 1fr; } } .portfolio-feed-left-inner { display: grid; grid-template-columns: 1fr; grid-gap: 20px; position: sticky; top: 180px; align-items: end; } .portfolio-feed-grid select { width: 100%; } .portfolio-image-background { background-size: cover!important; background-position: center!important; padding-top: 100%; } .post-type-archive-portfolio .post-feed > article { width: calc( ( 100% / 3 ) - ( 40px / 3 ) ); margin-bottom: 20px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .post-type-archive-portfolio .post-feed > article { width: calc( ( 100% / 1 ) ); } .portfolio-feed-left-inner { grid-template-columns: 1fr 1fr; } } .portfolio-feed-right .funky-card { margin-bottom: 0!important; } .green-background { background: #20F7DB; } .testimonial-block { margin: 50px 50px; } .portfolio-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .portfolio-single { display: grid; grid-gap: 20px; grid-template-columns: 1fr 2fr; margin-bottom: 20px; } .portfolio-single-left-inner { position: -webkit-sticky; position: sticky; top: 115px; } .portfolio-slider ul.slides li { min-height: 0px!important; padding-top: 60%; background-repeat: no-repeat; background-size: cover; background-position: center; } .portfolio-section { background: #262626; } span.portfolio-section-title { position: relative; top: -44px; color: red; font-weight: 900; font-size: 100px; text-transform: uppercase; font-family: "Roboto", Sans-serif; letter-spacing: 1px; text-align: center; width: 100%; } .portfolio-slider { margin-bottom: 40px; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .single-portfolio .content-area { width: calc( 100% ); margin-right: 0px; } .portfolio-section-inner { position: relative; top: -20px; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .portfolio-single, .portfolio-cards { grid-template-columns: 1fr; } span.portfolio-section-title { top: -13px; font-size: 30px; } } /**** 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: 3fr 1fr; } .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: 1fr; } .smart-menu-right { display: none; } } /* Smart Menu Itself */ .smart-menu-content-area { margin-top: 25px; } .smart-menu-content-area br { display: none; } .smart-menu-content-area * { font-size: 18px; } .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: 1px 0px; display: block!important; text-decoration: none!important; color: rgba(0,0,0,.8)!important; font-weight: 700; } .smart-menu a:hover { text-decoration: underline!important; /* background: #f5f6f6;*/ color: rgba(0,0,0,1)!important; } .smart-menu ul#menu-main-menu-3 > li > a { text-decoration: underline!important; } .smart-menu ul.sub-menu ul.sub-menu a { margin-left: 0px; } .smart-menu ul.sub-menu a { font-weight: 700; /* text-decoration: underline!important;*/ border-left: 0px solid #7DB0AF; padding: 5px 0px; /* margin-bottom: 25px;*/ } .mobile-smart-menu .smart-menu li.menu-item-has-children > a { padding: 20px 15px; } .smart-menu .current-menu-item > a { color: black; } /***** START SMART MENU UL SUB MENU UNDER PARENT MENU *****/ /* .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: contents!important; } .smart-menu > .menu-main-menu-container > ul > li.current-menu-ancestor > ul.sub-menu { display: grid!important; grid-template-areas: "smart-top-menu" "smart-top-menu" "smart-top-menu" "smart-top-menu" "smart-bottom-menu" "smart-bottom-menu" "smart-bottom-menu" "smart-bottom-menu"; grid-template-columns: 1fr; } .smart-menu .current-menu-ancestor ul li.menu-item-has-children { display: contents!important; } .smart-menu li.current-menu-ancestor { display: contents!important; } .smart-menu * { order: 1; } .smart-menu ul.sub-menu ul.sub-menu { grid-area: smart-bottom-menu!important; margin-top: 25px!important; text-transform: uppercase; } */ /**** 14.9 Work ****/ .work-card { min-height: 100px; background-size: cover; background-position: center; padding-top: 66%; } .work-card.double-height { padding-top: calc( 132% + 20px ); } .item-work-detail { position: absolute; top: 0; height: 100%; width: 100%; } .item-work-detail { position: absolute; top: 0; height: 100%; width: 100%; display: grid; align-items: center; transition: 0.25s; } .item-work-text { text-align: center; transition: 0.25s; opacity: 0; } .work:hover .item-work-detail { background: rgba(46, 57, 73, 0.85); } .work:hover .item-work-text { opacity: 1; } .work-detail-data { padding: 25px 0 10px; } .work-detail-text { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 36px; -moz-column-gap: 36px; column-gap: 36px; padding: 10px 0 25px; } img.half-width-image-block, img.full-width-image-block { margin-bottom: 30px; } .item-work-category, .item-work-date, .item-work-name, .item-work-separator { color: white; text-align: center; display: block; font-size: 15px; line-height: 24px; display: block; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .post-type-archive-work .content-area, .tax-work-categories .content-area { width: 100%; margin-right: 0px; } } .work-feed-grid { display: grid; grid-template-columns: 1fr; grid-gap: 20px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .work-feed-grid { grid-template-columns: 1fr; } } .work-feed-left-inner { display: grid; grid-template-columns: 1fr; position: sticky; top: 180px; align-items: end; } .work-feed-grid select { width: 100%; } .post-type-archive-work .post-feed > article { width: calc( ( 100% / 3 ) - ( 40px / 3 ) ); margin-bottom: 20px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .post-type-archive-work .post-feed > article { width: calc( ( 100% / 1 ) ); } .work-feed-left-inner { grid-template-columns: 1fr; } } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .single-work .content-area { width: calc( 100% ); margin-right: 0px; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .work-single, .work-cards { grid-template-columns: 1fr; } } ul.isotoe-filter--work { list-style: none; margin: 0; display: grid; grid-template-columns: 1fr 1fr; } ul.isotoe-filter--work:before { content: " "; order: 2; } ul.isotoe-filter--work li { color: blue; order: 3; cursor: pointer; } ul.isotoe-filter--work li:hover { color: green; } ul.isotoe-filter--work li:first-of-type { order: 1; } .work-feed-left-item button { display: none; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .work-feed-left:before { content: " "; } } .work-feed-left { display: grid; grid-template-columns: 1fr 1fr; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .work-feed-left { grid-template-columns: 1fr; } } /**** 14.10 Side Template ****/ .side-template-grid { display: grid; grid-template-columns: 1fr 300px; grid-gap: 0; } .right-side-template { background: red; display: grid; align-items: center; align-content: center; height: 100vh; position: sticky; top: 0; } .on-its-side { transform: rotate(90deg); /* Legacy vendor prefixes that you probably don't need... */ /* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* IE */ -ms-transform: rotate(90deg); /* Opera */ -o-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .on-its-side { font-size: 70px; width: 600px; position: relative; left: -142px; top: 0px; } .right-side-template { background: red; display: grid; align-items: center; align-content: center; } .csstransforms aside h3 { position: absolute; top: 0; left: 0; background: none; transform-origin: 0 0; transform: rotate(90deg); } /**** 14.11 Downloads Template ****/ .downloads-template { margin-top: 50px; } .downloads-sub p { margin-bottom: 0!important; margin-left: 15px; } .downloads-template-content { margin-bottom: 35px; } /****************************************/ /****************************************/ /****** END Custom Page Templates *******/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /**** 15. START DESKTOP ONLY STYLING ****/ /****************************************/ /****************************************/ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .wpb_button, .wpb_content_element, ul.wpb_thumbnails-fluid>li { margin-bottom: 60px; } .vc_col-has-fill>.vc_column-inner, .vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner, .vc_row-has-fill+.vc_row>.vc_column_container>.vc_column-inner, .vc_row-has-fill>.vc_column_container>.vc_column-inner { padding-top: 60px; } .left-inset { padding-left: 50px; } .error-404.not-found { padding-top: 215px; padding-bottom: 90px; } } /****************************************/ /****************************************/ /****** END DESKTOP ONLY STYLING ********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /***** 16. START MOBILE STYLING *********/ /****************************************/ /****************************************/ @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ p, li { font-size: 15px; } .strapline { position: fixed; bottom: 108px!important; width: 100%!important; } body:not(.home) .strapline { bottom: 36px!important; } .strapline-inner { float: none; position: absolute; right: 0; top: 0px; width: 100%; } .strapline-inner a { display: block!important; margin-bottom: 0px!important; text-align: center!important; border-radius: 0!important; padding: 5px!important; } .header-text-max-width { grid-template-columns: 1fr!important; padding-top: 0px!important; } .header-text-inner { padding: 20px 20px 20px; } .header-text h1 { font-size: 30px; } img.header-rose { display: none!important; } .footer-widgets h3 { font-size: 16px!important; } .page-template-template-fullwidth-slider .header-text-inner { padding: 20px 20px; } .smart-menu, .professional-advisor-menu { margin-bottom: 25px; } .team-member-single { grid-template-columns: 1fr; } .page-template-template-fullwidth div#content, .post-type-archive-videos div#content, .blog div#content, .single-post div#content, .single-videos div#content, .team-member-single div#content, .single-team div#content, .post-type-archive-team div#content { padding-top: 0px; } .header-text-max-width { align-items: center; } ul.slides li, .header-text { min-height: 140px!important; } div#ModalOpensOnPageLoad .modal-body { padding: 35px 15px 10px; } button.popupbutton { margin-bottom: 15px; } .modal-body p { font-size: 14px; } .modal { padding: 10px 20px 0px 1px; } .videos-block-cards { grid-template-columns: 1fr ; } .videos-feed-right .post-feed .videos { width: calc( ( 100% / 1 ) - ( 20px * 1 ) ); } .videos-single { grid-template-columns: 1fr; } .post-image-background { min-height: 200px; } .blog .post-feed { grid-template-columns: 1fr; } .newsletter-grid { grid-template-columns: 1fr!important; } } /****************************************/ /****************************************/ /******** END MOBILE STYLING ************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /* 17. START INTERMEDIATE SIZES STYLING */ /****************************************/ /****************************************/ @media screen and (min-width: 768px) and (max-width: 1000px) { /* INTERMEDIATE RULES GO HERE */ } /****************************************/ /****************************************/ /**** END INTERMEDIATE SIZES STYLING ****/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /**** 18. START THEME SPECIFC EDITS *****/ /****************************************/ /****************************************/ nav.secondary-navigation ul.sub-menu a::after { content: none!important; } .primary-navigation ul li ul.sub-menu li ul.sub-menu, .secondary-navigation ul li ul.sub-menu li ul.sub-menu, .smart-menu ul li ul.sub-menu li ul.sub-menu { display: none!important; } h1.logo:after { content: none; } .strapline-inner { z-index: 10; } body:not(.home) a.button.grey, body:not(.home) a.button.white { display: none!important; } /*.page-id-1300 .strapline .button.grey, .parent-pageid-1300 .strapline .button.grey { display: block!important; }*/ .page-id-1301 .strapline a.button.white, .parent-pageid-1301 .strapline a.button.white { display: inline-block!important; } .page-id-1302 .strapline .button.grey, .parent-pageid-1302 .strapline .button.grey { display: inline-block!important; } .strapline-inner a { display: block; margin-bottom: 10px; text-align: center; } .header-text-inner { position: relative; } .header-rose { position: absolute; bottom: -150px; max-width: 300px; right: 0; z-index: 2; } .valuation-visual h2:after { margin: 25px auto 0; background: #E32726; content: " "; width: 85%; height: 1px; display: block; } header.entry-header { display: none; } .rose { background: url('/wp-content/uploads/2021/11/ROse.png')!important; background-repeat: no-repeat!important; background-position: left!important; background-size: auto!important; } div#ModalOpensOnPageLoad .modal-body { border: 10px solid #e30613; text-align: center; padding: 35px 35px 10px; } .newsletter-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; } .newsletter-grid .year { font-weight: 600; color: #e32726; } .newsletter-grid a { color: #444; text-decoration: none!important; } /**/ .professional-advisor-menu a, .services-menu a, .important-menu a { font-weight: 700; border-left: 0px solid #7DB0AF; padding: 5px 0px; display: block!important; text-decoration: none!important; color: rgba(0,0,0,.8)!important; } .professional-advisor-menu ul, .services-menu ul, .important-menu ul { list-style: none; margin: 0; text-transform: uppercase; } .professional-advisor-menu p, .important-menu p { margin-bottom: 0!important; text-transform: uppercase; } /**/ tbody tr td { color: green; text-align: center; font-weight: 700; } tbody tr td:first-of-type { color: #222; text-align: left; } tbody tr:first-of-type td { color: #222; font-weight: 700; } span.material-icons.red { background: transparent!important; color: red; font-weight: 700; } table td, table th { padding: 10px 10px 4px!important; } .align-content-center { margin: 0 auto; max-width: 540px; } /****************************************/ /****************************************/ /******** END THEME SPECIFC EDITS *******/ /****************************************/ /****************************************/