/* Theme Name: Heathrow VIP Description: Custom Theme Author: Square Socket Author URI: https://www.squaresocket.com 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 7.3 Metro Style Flexslider 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 12.68 Icon Card 12.69 Testimonial Slider Style Three 12.70 Inline Carousel 12.71 Floating CTA Lozenge 12.72 Download Card 12.73 Prevent Image Copying 12.74 Heathrow Booking Form 13. Custom Post Types 13.1 Events 13.2 Videos 13.3 Jobs 13.4 Curriculum 13.5 Concrete Pumps 13.6 Custom Products 13.7 Podcasts 13.8 Courses 13.9 Media Assets 13.10 Press Releases 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 14.11 Slider Above Menu Template 14.12 Service Page Template 14.13 Sitemap Page Template 14.14 Static Homepage Template 15. Desktop Only Styling 16. Mobile Only Styling 17. Intermediate Stages Styling 18. Theme Specific Edits 19. Swiper Sliders 19.1 Example slider *****************************/ /****************************************/ /****************************************/ /*********** 1. START FONTS ************/ /****************************************/ /****************************************/ /**** 1.1 Font Families ****/ h1, h2, h3, h4, label { font-family: Garamond; font-family: proxima-nova, sans-serif; } p, li, body, button, input, textarea, #page #mc_embed_signup input.email, #mc_embed_signup, .shop_table { font-family: Garamond; font-family: proxima-nova, sans-serif; } .secondary-navigation a, .main-navigation a, .handheld-navigation a { font-family: Garamond; font-family: proxima-nova, sans-serif; } .beta.site-title a { font-family: Garamond; font-family: proxima-nova, sans-serif; } /**** 1.2 Link Rules ****/ a, a:hover { color: #009CDE; } 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: #052438; font-weight: 600; font-size: 40px; line-height: 1.2em; padding-top: 0px; margin-bottom: 12px; } /*h1:after { content: " "; width: 70px; height: 2px; background: #104C97; margin: 10px 0px 10px; display: block; }*/ h2 { color: #052438; font-weight: 600; font-size: 30px; line-height: 1.2em; } h3 { color: #052438; font-weight: 100; font-size: 22px; line-height: 1.2em; } h4 { color: #009CDE; font-weight: 700; font-size: 18px; line-height: 1.2em; text-transform: uppercase; letter-spacing: 1px; } p, li { line-height: 1.6em; color: rgb(18, 18, 18); font-size: 20px; } ol, ul { margin: 0 0 10px 29px; padding: 0; } p { margin-bottom: 18px; } /**** 1.4 Specific Fonts ****/ .item-title { font-size: 22px; margin: 15px 0 10px; } .meta-info { font-size: 14px; } .other-blog-posts-feed .excerpt-block { font-size: 16px; } #comments { color: #222; } .woocommerce-account p, .woocommerce-account li { font-size: 16px; } /* 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 #104C97; 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;*/ } /* Below Footer Fonts */ .below-footer p { font-size: 14px; } /* 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: 1px solid #104c97; color: white!important; padding: 8px 20px 9px; background-color:#104c97; border-radius: 5px; font-weight: 100; } /* 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: #0a3971!important; background-color: #0a3971!important; color: #fff!important; } .btn-secondary { background-color: #0a3971!important; border-color: #0a3971!important; color: #fff!important; } .btn-secondary:hover { /* border-color: #0a3971!important; background-color: #0a3971!important; color: #fff!important;*/ } .btn-outline-secondary { color: #0a3971 !important; background-color: #fff !important; border: 2px solid #0a3971 !important; } .btn-outline-secondary:hover { color: #000 !important; background-color: #fff !important; border: 2px solid #000 !important; } .handheld-navigation button { border: 0px solid transparent; } .button .material-icons, .button .material-icons-outlined { 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 #104c97!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; } p, li { font-size: 16px; } } /****************************************/ /****************************************/ /************* 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: 1000px; margin: 0 auto; } .narrower { max-width: 800px; margin: 0 auto; } .narrowest { max-width: 600px; margin: 0 auto; } #masthead .col-full { max-width: 1200px; width: 100%; padding: 0; } .below-footer .row { max-width: 1200px; margin: 0 auto; } /**** 2.2 Sidebar width rules ***/ @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .right-sidebar .content-area { width: calc( 75% - 30px ); float: left; margin-right: 30px; } .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, .single-jobs .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; } /**** 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:#fff; } #masthead > .col-full { background:transparent; position: relative } .entry-header { color: blue; } /**** 3.2 Top Level Nav Colours ****/ /* COMMON / Top Menu Background Colour */ .secondary-navigation { background: #fff; } /* 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 { color: #104c97; 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); } @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: 225px; } /* COMMON / Top Menu Hover Colour */ .secondary-navigation ul.menu a:hover { color: rgba(0, 0, 0, 1); background: white; } /* COMMON / Top Menu Drop Down Hover Colour */ .secondary-navigation ul.sub-menu a:hover { background: white; } .secondary-navigation .menu ul a { background: rgba(0, 0, 0, 0); } } /**** 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: #fff; } /**** 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: #fff; } 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 { border-top: 1px solid #333333; background: #B3E1F5; background: #fff; padding-bottom: 0px; } /* COMMON / Inner Footer Background Colour */ #colophon > .col-full { background: #B3E1F5; background: #fff; padding: 0 20px; } /* COMMON / Inner Footer Background Colour */ .below-footer { background: #B3E1F5; background: #fff; } /****************************************/ /****************************************/ /************* 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; }*/ #masthead .header-outer > .col-full { display: grid; grid-template-columns: 275px 1fr 100px; grid-gap: 0 15px; align-items: center; grid-template-areas: "sitebranding secondarynav siteheadercart"; grid-template-rows: 1fr; } .site-branding { grid-area: sitebranding; } nav.secondary-navigation { grid-area: secondarynav; } .storefront-primary-navigation { grid-area: primarynav; } .strapline { grid-area: strapline; } .custom-contact-menu-item-container { grid-area: customcontactmenuitem; } ul#site-header-cart { grid-area: siteheadercart; text-align: right; width: 100%; } li.woocommerce-mini-cart-item.mini_cart_item, li.woocommerce-mini-cart-item.mini_cart_item * { color: #222; font-size: 12px; } .site-header-cart .widget_shopping_cart .buttons, .site-header-cart .widget_shopping_cart .total { background: #fff; } .widget.woocommerce.widget_shopping_cart img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail, .widget.woocommerce.widget_shopping_cart img.woocommerce-placeholder.wp-post-image { display: none; } #masthead span.count { display: none!important; } .site-header-cart .cart-contents::after { 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); } div#page { position: relative; } #masthead { margin-bottom: 0px; padding-top: 0px; z-index: 10; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.175); } #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: 16px 20px 10px; } } /**** 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: 290px; 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: 0px; position: relative; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .secondary-navigation .menu { width: 100%; float: none; text-align: right; } .main-navigation ul li, .secondary-navigation ul li { margin-bottom: 0px; } .storefront-secondary-navigation .site-header .secondary-navigation { width: calc( 100% - 310px ); float: right; margin-right: 0; margin-bottom: 0; } .secondary-navigation .menu a { padding: 7px 15px; 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; } } /* 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( 100% - 0px ); float: right; margin-right: 0px; } .storefront-secondary-navigation.woocommerce-active .site-header .site-branding { width: 100%; float: left; margin-right: 0px; margin-bottom: 0px; } .site-header-cart .cart-contents { padding: 0px 0 0px; font-size: 14px; } } /* COMMON / Top Menu Drop Down Items */ .secondary-navigation .menu ul a { padding: 7px 15px!important; font-weight: 400; 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: 11px; /* 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-top: 20px; padding-bottom: 10px; } #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 Grid layout */ /*.col-full.header-outer > .col-full { display: grid; grid-template-columns: 0 2fr 1fr 100px; align-items: center; text-align: center; } .site-branding { width: 100%; padding-bottom: 0px; padding-top: 0px; }*/ } /* 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 ****/ .md-icon-menu span { position: relative; top: 5px; } .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 ****/ @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: 50px!important; } .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; } /*.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: #978571; background: #052438; background: #5C88C3; } .above-header-sidebar-relative p, .above-header-sidebar-relative a { color: white; } .above-header-sidebar-outer { position: absolute; width: 100%; top: 0; z-index: 6000; color: white; } .above-header-sidebar { max-width: 1200px; margin: 0 auto; padding: 0px 20px; } .above-header-sidebar-inner { float: right; padding: 6px 20px; } @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:57px; } .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:200px; 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 #104C97; 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 #104C97; content: ''; padding-bottom: inherit; } .home nav.secondary-navigation a:before { border-top: 2px solid #104C97; } 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: #104C97!important; } .home nav.secondary-navigation a:before, .home nav.secondary-navigation .current_page_item a{ border-color: #104C97!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: 15px; 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: 20px 0 20px; 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; font-size: 14px; } #colophon .menu li.social-menu { display: inline-block; width: 30px; } /*** 5.2 Below Footer Menu Styling ****/ .below-footer { padding: 10px; } .below-footer .row { max-width: 1200px; 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: 35px; grid-template-columns: 1fr 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 p { font-size: 14px; } /****************************************/ /****************************************/ /********** 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 span.material-icons { display: block; text-align: center; font-size: 26px; } a.nav-link { text-decoration: none!important; } .nav-tabs { margin: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; } a.nav-link { text-align: center; font-size: 16px; } .nav-link { border-radius: 0; border: none!important; color: grey; padding: 0px 0px; } .nav-tabs .nav-link { border-bottom: 3px solid #DEE2E6!important; } .nav-tabs .nav-link.active { background-color: transparent!important; border-radius: 0; color: #104C97!important; border-bottom: 3px solid #104C97!important; } .nav-tabs .nav-link:hover { background: transparent; border-bottom: 3px solid #104C97!important; } .nav-tabs .nav-item { margin-bottom: -1px; background: transparent; border: none!important; margin-right: 0px; } .nav-tabs .nav-item:hover { background: transparent; } .nav-tabs { border-bottom: 0px solid #dee2e6; } .tab-content { padding: 20px 0 0; } /**** FORM ***/ .vip-form-question-group.flight-type { margin-top: 10px; } .about-img img { display: none; } .radio-image-label input[type=radio]+div { background: #E7E3DD!important; padding: 3px; text-align: center; color: #052438; } .radio-image-label input[type=radio]:checked+div { border-bottom: 0px solid #c9d6ff!important; background: #104C97!important; color: white!important; } .services-list { grid-gap: 0px!important; } /****************************************/ /****************************************/ /********** END Bootstrap **************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /******** 7. START FLEXSLIDER **********/ /****************************************/ /****************************************/ /**** 7.1 General Flexslider Rules ****/ .flexslider { margin: 0 0 0px!important; background: transparent; 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 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/heathrowvip/assets/images/slider-direction-thin-white.png) no-repeat 0 0 !important; top: calc( 50% - 30px ) !important; z-index: 9; } .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:0px !important;} .flexslider:hover .flex-prev{opacity:0.8 !important;left:0px !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(0, 0, 0, .2), rgba(0, 0, 0, .2)); width: 100%; height: 100%; background-blend-mode: normal; background-color: #00000017; } .header-text-max-width { max-width: 1200px; margin: 0 auto; height: 100%; display: grid; align-items: normal; align-items: center; align-items: end; } .header-text-inner { width: 100%; display: block; max-width: 800px; padding: 20px; /*position: absolute;*/ bottom: 0; } /* 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; } */ /**** 7.3 Metro Flexslider Rules ****/ .metro-slider ul.flex-direction-nav { position: absolute; right: 0px; bottom: 30px; width: 100px; } .metro-slider ul.flex-direction-nav a { display: grid; text-align: center; padding-top: 0px; grid-template-rows: 1fr 0; align-items: center; } .metro-slider .flex-direction-nav a { width: 50px !important; height: 50px !important; top:auto!important; } .metro-slider.flexslider .flex-prev { opacity: 1!important; left: -50px!important; } .metro-slider.flexslider .flex-prev:hover { opacity: 1 !important; } .metro-slider.flexslider .flex-next { opacity: 1!important; left: 0px!important; border-left: 1px solid #cfd6da; } .metro-slider.flexslider .flex-next:hover { opacity: 1!important; } .metro-slider .flex-direction-nav a.flex-next:before, .metro-slider .flex-direction-nav a.flex-prev:before { font-family: 'Material Icons'; font-weight: 100; font-style: inherit; font-size: 45px; 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; color: #76757a; } .metro-slider .flex-direction-nav a.flex-next:before { content: "chevron_right"!important; } .metro-slider .flex-direction-nav a.flex-prev:before { content: "chevron_left"!important; } .metro-slider.flexslider a.flex-prev, .metro-slider.flexslider a.flex-next { background: #EBECEB!important; } .metro-slider.flexslider a.flex-prev:hover, .metro-slider.flexslider a.flex-next:hover { background: pink!important; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .metro-slider.flexslider .header-text-inner { padding-bottom: 50px!important; } } /***/ /**** 7.4 Metro Portfolio Flexslider Rules ****/ .metro-portfolio-slider ul.slides li, .metro-portfolio-slider .header-text { min-height: 70vh!important; } .metro-portfolio-slider ul.flex-direction-nav { position: inherit; left: 50px; bottom: 100px; width: 100%; max-width: 1220px!important; margin: 0 auto; } .metro-portfolio-slider ul.flex-direction-nav a { display: grid; text-align: center; padding-top: 0px; grid-template-rows: 1fr 0; align-items: center; } .metro-portfolio-slider .flex-direction-nav a { width: 40px !important; height: 40px !important; top:auto!important; } .metro-portfolio-slider.flexslider .flex-prev { opacity: 1!important; left: -40px!important; } .metro-portfolio-slider.flexslider .flex-prev:hover { opacity: 1 !important; } .metro-portfolio-slider.flexslider .flex-next { opacity: 1!important; left: 0px!important; border-left: 1px solid #cfd6da; } .metro-portfolio-slider.flexslider .flex-next:hover { opacity: 1!important; } .metro-portfolio-slider .flex-direction-nav a.flex-next:before, .metro-portfolio-slider .flex-direction-nav a.flex-prev:before { font-family: 'Material Icons'; font-weight: 100; font-style: inherit; font-size: 36px; 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; color: #76757a; } .metro-portfolio-slider .flex-direction-nav a.flex-next:before { content: "chevron_right"!important; } .metro-portfolio-slider .flex-direction-nav a.flex-prev:before { content: "chevron_left"!important; } .metro-portfolio-slider.flexslider a.flex-prev, .metro-portfolio-slider.flexslider a.flex-next { background: #EBECEB!important; } .metro-portfolio-slider.flexslider a.flex-prev:hover, .metro-portfolio-slider.flexslider a.flex-next:hover { background: pink!important; } .metro-portfolio-slider-meta-block { background: white; display: grid; width: 60%; align-items: center; align-content: center; grid-template-columns: 1fr 80px; } .metro-portfolio-slider-meta-block-inner { padding: 15px 20px; } .metro-portfolio-slider-meta-block * { color: black!important; margin-bottom: 0!important; } a.metro-portfolio-slider-meta-block-link { background: lightgray; height: 100%; text-align: center; display: grid; align-content: center; width: 80px; } a.metro-portfolio-slider-meta-block-link:hover { background: grey; text-decoration: none; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .metro-portfolio-slider.flexslider .header-text-inner { padding-bottom: 50px!important; } .metro-portfolio-slider-meta-block { width: 90%; } .metro-portfolio-slider ul.flex-direction-nav { left: 25px; } } /****************************************/ /****************************************/ /********** END FLEXSLIDER *************/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /********* 8. START WOOCOMMERCE *********/ /****************************************/ /****************************************/ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments { background-color: #94b1d8; } .woocommerce-message a:hover, .woocommerce-info a:hover, .woocommerce-error a:hover, .woocommerce-noreviews a:hover, p.no-comments a:hover { color: #000; } .woocommerce-message a, .woocommerce-info a, .woocommerce-error a, .woocommerce-noreviews a, p.no-comments a { color: #222; } .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message { margin: 1.41575em; font-size: 14px; } .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger, figure.woocommerce-product-gallery__wrapper:before { display: none; } /**/ #masthead span.count { display: none!important; } .site-header-cart .cart-contents::after { display: none; } ul#site-header-cart { grid-area: siteheadercart; text-align: right; } li.woocommerce-mini-cart-item.mini_cart_item, li.woocommerce-mini-cart-item.mini_cart_item * { color: #222; } .site-header-cart .widget_shopping_cart .buttons, .site-header-cart .widget_shopping_cart .total { background: #fff; } /**** 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: 25px 0 25px; background: #fff; border: 1px solid rgba(0,0,0,.125)!important; color: #222; } ul.woocommerce-error * { color: #222!important; font-size: 16px; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-noreviews::before, p.no-comments::before { font-weight: 600; color: #222; } /**** 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 .woocommerce-product-gallery { display: none!important; } .single-product div#content div.product { max-width: 800px!important; } .single-product div.product { display: grid; grid-gap: 0 30px; grid-template-areas: "productgallery productgallery" "producttextarea producttextarea" "relatedproducts relatedproducts" "tabswrapper tabswrapper" "upsells upsells"; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; margin-bottom: 25px; margin: 40px auto 0; } .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; } span.onsale { grid-area: onsale; display: none; } .single-product div.product::before, .single-product div.product::after { content: none; } figure.woocommerce-product-gallery__wrapper { position:-webkit-sticky; position: sticky; top: 80px; } 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 table.variations .value { margin-bottom: 5px; } .single-product div.product form.cart { padding: 0em 0; } .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; } table.variations { border-bottom: none!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 55%,#f0f4f5 55%); background: -moz-linear-gradient(left,#fff 55%,#f0f4f5 55%); 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; } form.checkout.woocommerce-checkout h3 { color: #222; } /* .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%; } .woocommerce-account .woocommerce { padding: 20px 0; } .woocommerce-account li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--downloads.is-active { display: none; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions { display: flex; justify-content: space-between; } } /**** 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/airportassist/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 ****/ div#secondary { display: none; } div#primary { width: 100%; margin-right: 0; } .post-feed { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr; margin: 30px 0; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .post-feed { grid-template-columns: 1fr; } } .blog .single-feed-item-text { padding: 0px; text-align: center; padding-bottom: 35px; } /*.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: 0px; background-position: center; background-size: cover; padding-top: 60%; } .single-post .post-image-inner { padding-top: 0%; } /**** 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 .post-image-background { margin-top: 40px; } .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; } .single-post main#main { max-width: 800px; margin: 0 auto; } /**** 9.4 Post Feed Rules ****/ @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ article:nth-of-type( 3n + 2 ) { padding-top: 30px; } .other-blog-posts-feed { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; } } .post-image-background { min-height: 0px!important; background-position: center!important; background-size: cover!important; /*padding: 30px;*/ position: relative; padding-top: 60%; } .single-feed-item-text a:hover { text-decoration: none; } /*.single-feed-item { padding-bottom: 20px; display: grid; grid-gap: 30px; }*/ /**** 9.5 Comments ****/ #comments { padding-top: 0px; background: #F5F5F6; margin-bottom: 40px; padding: 35px 35px 30px; } /**** 9.5 Comments ****/ #comments .comment-body { grid-template-areas: "commentphoto commentname" "commentphoto commentdate" "commentphoto commentcontent" "commentrespond commentrespond"; display: grid; grid-gap: 0px 20px; grid-template-columns: 64px 1fr; padding: 0px 0px 20px; } #comments .summary.entry-summary { grid-area: producttextarea; } #comments img.avatar { grid-area: commentphoto; float: none; } #comments cite.fn { grid-area: commentname; background: white; padding: 25px 25px 0; text-align: left; } #comments a.comment-date { grid-area: commentdate; text-align: left; background: white; padding: 0px 25px 25px; } #comments .comment-content { grid-area: commentcontent; } #comments .comment-list .comment-content { padding: 0; margin: 0; } #comments .comment-meta.commentmetadata, #comments .comment-author.vcard { display: contents; } #comments .comment-text { background: white!important; padding: 0 25px 20px!important; } #comments .comment-list .comment-body::before, #comments .comment-list .comment-body::after { content: none; } #comments .comment-body, #comments .comment-meta.commentmetadata, #comments .comment-list .comment-content, #comments .comment-list #respond { width: 100%; } #comments textarea#comment, #comments input#author, #comments input#email, #comments input#url { background: white; border: 1px solid #D9D9D9; box-shadow: none; } #comments div#respond { padding: 0em; background: transparent; grid-area: commentrespond; padding: 0px; box-shadow: none; } a#cancel-comment-reply-link { color: #222; } a#cancel-comment-reply-link, a#cancel-comment-reply-link:hover { text-decoration: none!important; } #respond #cancel-comment-reply-link { height: 25px; width: 25px; font-size: 24px; } @media (min-width: 768px) { #respond .comment-form-author { width: calc( 50% - 17px ); margin-right: 34px; } #respond .comment-form-email { width: calc( 50% - 17px ); margin-right: 0%; } } /* #comments { padding-top: 0px; background: transparent; margin-bottom: 40px; } ol.commentlist > li { background: white; padding: 25px; } .description *:last-of-type { margin-bottom: 0!important; } .comment_container { display: grid; grid-template-columns: 100px 1fr; grid-gap: 25px; } #reviews .commentlist li .avatar, #reviews .commentlist li .comment_container .comment-text { width: 100%!important; } #reviews .commentlist li .comment_container::before, #reviews .commentlist li .comment_container::after { content: none; } .woocommerce .ratings .star-rating span:before, .woocommerce .woocommerce-product-rating .star-rating span:before, .woocommerce-page .ratings .star-rating span:before, .woocommerce-page .woocommerce-product-rating .star-rating span:before, .star-rating span:before { color: #706B98; content: '\f0ec\f0ec\f0ec\f0ec\f0ec'; font-size: 16px; letter-spacing: 0px; font-family: 'Material Icons'; } .star-rating::before { opacity: 0; } div#respond { padding: 0em; background: transparent; } */ /**** 9.6 Post Sidebar ****/ .widget .widget-title, .widget .widgettitle { border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 0 0 10px; margin-bottom: 15px; } .widget_recent_entries ul li::before, .widget_pages ul li::before, .widget_categories ul li::before, .widget_archive ul li::before, .widget_recent_comments ul li::before, .widget_nav_menu ul li::before, .widget_links ul li::before, .widget_product_categories ul li::before, .widget_layered_nav ul li::before, .widget_layered_nav_filters ul li::before { content: none; } .widget_recent_entries ul li, .widget_pages ul li, .widget_categories ul li, .widget_archive ul li, .widget_recent_comments ul li, .widget_nav_menu ul li, .widget_links ul li, .widget_product_categories ul li, .widget_layered_nav ul li, .widget_layered_nav_filters ul li { padding-left: 0px; } .widget-area .widget a:not(.button) { text-decoration: none; } .widget_categories ul li.current-cat::before { content: none; } .widget_recent_entries ul li, .widget_pages ul li, .widget_categories ul li, .widget_archive ul li, .widget_recent_comments ul li, .widget_nav_menu ul li, .widget_links ul li, .widget_product_categories ul li, .widget_layered_nav ul li, .widget_layered_nav_filters ul li { list-style: none; margin-bottom: 15px; line-height: 1.3em; } /**** 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; margin: 0; cursor: pointer; } .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; } .wpb_text_column .wpcf7 .row { margin-right: -15px; margin-left: -15px; } .wpcf7 form .wpcf7-response-output { margin: 10px 5px 0em; padding: 5px 10px; } .wpcf7 p { font-size: 13px; margin: 5px 0 0!important; } input.wpcf7-form-control.has-spinner.wpcf7-submit { margin-top: 10px; } select#cat { width: 100%; margin-bottom: 10px; } /**** 10.2.1 Contact Form 7 Underline Rules ****/ .cf7-underline-style input[type=text], .cf7-underline-style input[type=number], .cf7-underline-style input[type=email], .cf7-underline-style input[type=tel], .cf7-underline-style input[type=url], .cf7-underline-style input[type=password], .cf7-underline-style input[type=search], .cf7-underline-style textarea, .cf7-underline-style .input-text { padding: 3px 0; background-color: transparent; box-shadow: inset 0 0px 0px rgb(0 0 0 / 13%); border: 0px solid #D0D3D9; border-bottom: 1px solid #ccc; } .cf7-underline-style input:focus, .cf7-underline-style textarea:focus { border-bottom: 1px solid #222; } /**** 10.2.2 Contact Form 7 Boxed Rules ****/ .cf7-boxed-style input[type=text], .cf7-boxed-style input[type=number], .cf7-boxed-style input[type=email], .cf7-boxed-style input[type=tel], .cf7-boxed-style input[type=url], .cf7-boxed-style input[type=password], .cf7-boxed-style input[type=search], .cf7-boxed-style textarea, .cf7-boxed-style .input-text { padding: 3px 8px; background-color: transparent; box-shadow: inset 0 0px 0px rgb(0 0 0 / 13%); border: 1px solid #D0D3D9; transition: 0.5s; } .cf7-boxed-style input:focus, .cf7-boxed-style textarea:focus { border-left: 5px solid #009CDE; } /**** 10.2 Material Design Icons for Contact Details ****/ .md-contact-icons span.material-icons { top: 6px; position: relative; margin-right: 10px; color: black; } .md-contact-icons a, .md-contact-icons a:hover { text-decoration: none!important ; } .md-contact-icons p { margin-bottom: 10px; } /**** 10.3 Larger Letter for Contact Details ****/ span.contact-letter { color: darkgray; font-size: 1.5em; margin-right: 6px; } /**** 10.4 Grid for Opening Hours Contact Details ****/ .opening-hours-table td { padding: 0!important; font-size: 18px!important; } .opening-hours-table th, .opening-hours-table tr, .opening-hours-table td { border-bottom: 0px solid #222!important; } /****************************************/ /****************************************/ /************* 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; } .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: #E7E3DD; color: #052438!important; } .vc_active .vc_tta-panel-title { background: #104C97; color: white; } .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 a[href$=".pdf"]:not(.button) { padding-left: 0px; } div#primary a[href$=".pdf"]:before:not(.button) { padding-right: 10px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1c1"; } div#primary a[href$=".docx"]:not(.button) { padding-left: 0px; } div#primary a[href$=".docx"]:before:not(.button) { padding-right: 10px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1c2"; } div#primary a[href$=".pptx"]:not(.button) { padding-left: 0px; } div#primary a[href$=".pptx"]:before:not(.button) { padding-right: 10px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1c4"; } div#primary a[href$=".xlsx"]:before:not(.button) { 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 div#mc_embed_signup_scroll { display: grid; grid-template-columns: 1fr 99px; } .inline-mailchimp input#mce-EMAIL, .inline-mailchimp input#mc-embedded-subscribe { width: calc( 100% )!important; margin: 0!important; } /*** MAILCHIMP INLINE TWO ****/ .mailchimp-inline-two-row { background: #4C71A0; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; padding: 15px 40px 15px 15px; } .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; } footer#colophon #text-5 img { max-width: 260px; margin-bottom: 20px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .mailchimp-inline-two-row { grid-template-rows: 1fr; } } /**** 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 > .wpb_column > .vc_column-inner { padding: 40px 30px 10px 30px!important; z-index: auto!important; } .regular-irregular .vc_col-sm-6 .wpb_content_element { float: left; width: 540px; max-width: 100%; } .regular-irregular .vc_col-sm-6 .vc_tta-container { 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; } /***/ .regular-irregular-grid { display: grid!important; grid-template-columns: 1fr 1fr; } .regular-irregular-grid .vc_col-sm-6 { width: 100%; } .regular-irregular-grid .wpb_wrapper { max-width: 100%; /* min-width: 580px;*/ width: 630px; padding: 25px 25px 5px; } .regular-irregular-grid .vc_col-sm-6:first-of-type .vc_column-inner { justify-content: end; display: grid; z-index: auto; } .regular-irregular-grid .vc_col-sm-6:first-of-type { justify-content: end; } .regular-irregular-grid .vc_column-inner::after, .regular-irregular-grid .vc_column-inner::before { content: none; } @media screen and (min-width: 768px) and (max-width: 1220px) { /* INTERMEDIATE RULES GO HERE */ .regular-irregular-grid .wpb_wrapper { min-width: 45vw; width: 100%; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .regular-irregular-grid { grid-template-columns: 1fr; } .regular-irregular-grid .wpb_wrapper { min-width: 100%; width: 100%; padding: 25px 25px 5px; } .regular-irregular-grid .vc_col-sm-6:first-of-type .vc_column-inner { justify-content: start; } } /** Regular Irregular HTML **/ .regular-irregular-snippet { display: grid; grid-template-columns: 1fr 1fr; background: #F7FBF5; } .regular-irregular-snippet * { background-position: center; background-size: cover; background-repeat: no-repeat; } .regular-irregular-snippet-text-area { min-width: 600px; background: red; padding: 25px; grid-auto-flow: column; justify-content: end; } .regular-irregular-snippet-left, .regular-irregular-snippet-right { display: grid; align-items: center; grid-auto-flow: column; min-height: 500px; } .regular-irregular-snippet-left { justify-content: end; } .regular-irregular-snippet-right { justify-content: start; } @media screen and (min-width: 768px) and (max-width: 1220px) { /* INTERMEDIATE RULES GO HERE */ .regular-irregular-snippet-text-area { min-width: 50vw; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .regular-irregular-snippet { grid-template-columns: 1fr; } .regular-irregular-snippet-right { min-height: 300px; } .regular-irregular-snippet-left { min-height: auto; } .regular-irregular-snippet-text-area { min-width: 100vw; } } /**** 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 0px 0px 0px; } .lightbox-content-inner { padding: 40px 20px 15px; } .lightbox-content { width: calc( 100% - 40px ); } } /**** 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(0, 0, 0, 0.2); /* background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));*/ width: 100%; height: 100%; display: block!important; position: absolute; z-index: 3; left: 0; top: 0; pointer-events: none; } .fadebackground .vc_column-inner > * { z-index: 5; position: relative; } .fadebackground .vc_column-inner .wpb_wrapper { z-index: 5; position: relative; } /**** 12.22 Circles ****/ .circle h2 { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); max-width: 200px; margin: 0 auto; font-size: 32px; line-height: 44px; } .circle-outer { display: inline-block; position: relative; width: 100%; margin-bottom: 30px!important; } .circle-upper { margin-top: 100%; } .circle { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 4px solid red; border-radius: 50%; text-align: center; background: radial-gradient(#BEDA24 , #466D2E); border: 4px solid #6B8F2B; } .circle:hover { background: transparent; } /* Circle Card */ .circle-card-outer { display: inline-block; position: relative; width: 100%; margin-bottom: 30px!important; } .circle-card-upper { margin-top: 100%; } .circle-card { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; text-align: center; } .circle-card-text { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); } .circle-card-title { color: white; font-size: 30px; margin-bottom: -5px; } .circle-card-desc { color: white; font-size: 20px; } /**** 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 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: 140%; /*border: 1px solid blue; border-bottom: 1px solid green; border-bottom: 2px solid #978571; -webkit-box-shadow: 0 1px 4px rgb(0 0 0 / 20%); -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 rgb(0 0 0 / 20%);*/ } a.slick-slide, a.slick-slide:hover { text-decoration: none!important; } .slick-slider-item-inner h2 { font-size: 16px; padding: 15px 0; text-align: center; } .slick-slider-item-inner { border-bottom: 2px solid #978571; -webkit-box-shadow: 0 1px 4px rgb(0 0 0 / 50%); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 4px rgb(0 0 0 / 50%); } .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/heathrowvip/assets/images/slider-direction-thin-white.png) no-repeat 0 0 !important; top: 40% !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; } .call-to-action-inline { background: #F7F7F7; padding: 15px 15px; display: grid; grid-template-columns: 1fr 160px; grid-gap: 20px; align-items: center; } .cta-button { width: 100%; text-align: center; } .call-to-action-inline .svg-inline--fa { vertical-align: -0.25em; } .call-to-action-inline .button svg { position: relative; left: 0px; transition: 0.5s; } .call-to-action-inline .button:hover svg { left: 5px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .call-to-action-inline { grid-template-columns: 1fr; } } /**** 12.31 Line Behind the Title ****/ h2.line-background { position: relative; z-index: 1; text-align: center; margin-top: 15px; } h2.line-background:before { border-top: 2px solid #dfdfdf; content: ""; margin: 0 auto; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; width: 95%; z-index: -1; } h2.line-background span { background: white; padding: 0 9px; } h2.double:before { border-top: none; } h2.double:after { border-bottom: 5px dotted #9aa2a7; content: ""; margin: 0 auto; position: absolute; top: 45%; left: 0; right: 0; width: 100%; z-index: -1; } /**** 12.32 Inline Menu Inside Template ****/ .middle-menu { 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/heathrowvip/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: transparent; padding: 10px 0px 0; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; } .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: 30px; } ul.md-tick-list li { position: relative; } 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: absolute; top: 4px; margin-right: 7px; left: -32px; color: #009CDE; } /**** 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-size: cover!important; background-position: center!important; } .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: 70px 0px 30px; } .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; } .bronze .materialdcard span.material-icons { color: #917042; } .silver .materialdcard span.material-icons { color: #B9B9B9; } .gold .materialdcard span.material-icons { color: #F7C93E; } .tarmac .materialdcard span.material-icons { color: #000; } .materialdcard h3 { font-size: 20px; } .materialdcard p, .materialdcard li { font-size: 16px; } .materialdcard ul.md-tick-list { margin-left: 20px; } .materialdcard ul.md-tick-list li:before { font-size: 16px; top: 5px; margin-right: 7px; left: -22px; } .materialdcard h4 { border-bottom: 1px solid #DFDFDF; padding-bottom: 15px; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .materialdcard { min-height: 377px; } } /**** 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 )!important; left: -150px; position: relative; background: white; padding: 35px 35px 10px; } } /**** 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; } /**** 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: lightseagreen; 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: red; text-transform: uppercase; border: 1px solid red; color: white!important; border-radius: 10px!important; margin: 15px 0; } .blog-block-two-read-more.button:hover { background: transparent!important; border: 1px solid red!important; color: #000!important; } .blog-block-two-cards * { color: white!important; } .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 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: 120%; background-position: center!important; background-size: cover!important; } .team-text { padding: 20px 0; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .team-member-card { grid-template-columns: 1fr; } .team-cards { grid-template-columns: 1fr; } } /**** 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.52.2 Funky Card Three */ a.funky-card-three-box, a.funky-card-three-box:hover { text-decoration: none; } .funky-card-three { padding-top: 60%; padding-top: 50%; background-position: center!important; background-size: cover!important; border-top-width: 0px; border-top-style: solid; border-bottom-width: 6px; border-bottom-style: solid; margin-top: 30px; } span.funky-card-three-text { background: black; padding: 3px 10px 3px 0; max-width: 100px; margin-bottom: 15px; color: white; font-size: 19px; position: relative; bottom: 25px; position: relative; line-height: 1.6; color: #fff; display: inline; white-space: pre-wrap; border: 0 solid #333; border-width: 0.25em 0; left: 5px; } a.funky-card-three-box { margin-top: 15px; } .funky-card-three-inner { max-width: 80%; position: absolute; bottom: 0; width: 80%; } span.funky-card-three-text:after { content: ""; position: absolute; top: -0.25em; right: 100%; bottom: -0.25em; width: 0.25em; } span.funky-card-three-text, span.funky-card-three-text:after { background-color: #333; } span.funky-card-three-text > span { position: relative; z-index: 1; } /* 12.52.2 Funky Card four */ a.funky-card-four-box, a.funky-card-four-box:hover { text-decoration: none!important; } .funky-card-four { padding-top: 60%; padding-top: 50%; background-position: center!important; background-size: cover!important; border-top-width: 0px; border-top-style: solid; border-bottom-width: 0px; border-bottom-style: solid; margin-top: 30px; padding-bottom: 20px; position: relative; } span.funky-card-four-text { background: black; padding: 3px 10px 3px 0; max-width: 100px; margin-bottom: 15px; color: white; font-size: 19px; position: relative; line-height: 1.6; color: #fff; display: inline; white-space: pre-wrap; border: 0 solid #333; border-width: 0.25em 0; left: 5px; } span.funky-card-four-date { background: #333; padding: 3px 10px 3px 10px; max-width: 100px; margin-bottom: 15px; color: white; font-size: 14px; position: relative; line-height: 1.6; color: #fff; display: inline; white-space: pre-wrap; border: 0 solid #333; border-width: 0.25em 0; left: 0px; } a.funky-card-four-box { margin-top: 15px; } .funky-card-four-inner { max-width: 80%; display: grid; width: 80%; position: absolute; bottom: 20px; left: 0; } span.funky-card-four-text:after { content: ""; position: absolute; top: -0.25em; right: 100%; bottom: -0.25em; width: 0.25em; } span.funky-card-four-text, span.funky-card-four-text:after { background-color: #333; } span.funky-card-four-text > span { position: relative; z-index: 1; } /**** 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.53.16 Display Block Fourteen */ .display-block-fourteen { display: grid; grid-template-columns: 2fr 3fr; padding: 70px 0; grid-gap: 20px; align-items: start; position: relative; min-height: 385px; } .display-block-fourteen-left { position: relative; } .display-block-fourteen-foreground-text, .display-block-fourteen-right { z-index: 1; position: relative; } span.display-block-fourteen-background-text { font-weight: 900; font-family: roman; color: transparent; font-size: 1000%; position: absolute; top: -28px; width: 120%; max-width: 120%; margin-bottom: 0; line-height: 0.7em; -webkit-text-stroke: 1px #cfd6da; z-index: 0; } .display-block-fourteen-right p { font-size: 24px; margin-bottom: 0; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .display-block-fourteen { grid-template-columns: 1fr; padding: 70px 0 35px; min-height: 0px; } span.display-block-fourteen-background-text { font-size: 600%; } } /* 12.53.16 Display Block Fifteen */ .display-block-fifteen { display: grid; grid-template-rows: auto auto; grid-gap: 0; background: #222; position: relative; padding: 50px 0; } .display-block-fifteen-top { display: grid; grid-template-columns: 1fr 4fr; grid-gap: 0; position: relative; margin: 0 auto; max-width: 1200px; padding: 0 20px; } .display-block-fifteen-top-left * { color: white; } .display-block-fifteen-top-right { text-align: center; } .display-block-fifteen-bottom { display: grid; grid-template-columns: 2fr 5fr; grid-gap: 0; position: relative; top: -20px; z-index: 1; } .display-block-fifteen-bottom-left { text-align: right; display: grid; margin-bottom: 55px; position: relative; } .display-block-fifteen-bottom-left svg { width: 90px; height: 90px; position: absolute; right: 45px; bottom: 0px; animation: bounce 2s infinite; } .display-block-fifteen-bottom-left path { fill: red!important; } .display-block-fifteen-bottom-right { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } .display-block-fifteen-image { height: 0px; background-position: center!important; background-repeat: repeat!important; background-size: cover!important; padding-top: 58%; } .display-block-fifteen-bottom-color { background: white; width: 100%; height: 100px; position: absolute; bottom: 0; z-index: 0; } span.display-block-fifteen-background-text { font-weight: 900; font-family: roman; color: transparent; font-size: 1000%; position: relative; bottom: 0px; width: 120%; max-width: 120%; margin-bottom: 0; line-height: 0.7em; -webkit-text-stroke: 1px #cfd6da; z-index: 0; text-align: center; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .display-block-fifteen { padding: 50px 0 0; } .display-block-fifteen-top { grid-template-columns: 1fr; } .display-block-fifteen-top-right { text-align: left; } span.display-block-fifteen-background-text { font-size: 600%; width: 100%; max-width: 100%; text-align: left; } .display-block-fifteen-top { grid-template-columns: 1fr; width: 100%; } .display-block-fifteen-bottom-left, .display-block-fifteen-image-two { display: none; } .display-block-fifteen-bottom-right { grid-template-columns: 1fr; grid-gap: 20px; width: 100%; } .display-block-fifteen-image { width: calc( 100vw - 20px ); margin-left: 20px; } } /* 12.53.17 Display Block Sixteen */ .display-block-sixteen { background-size: cover!important; background-position: center!important; /* padding: 35px 0;*/ padding: 130px 0; margin-bottom: 35px; } .display-block-sixteen-inner { display: grid; align-items: center; justify-content: end; } .display-block-sixteen-text { max-width: 500px; background: white; padding: 35px 35px 15px; } .display-block-sixteen a.button { width: 100%; text-align: center; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .display-block-sixteen-mobile-image { display: none; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .display-block-sixteen { padding: 0!important; } .display-block-sixteen-text { max-width: 100%; } .display-block-sixteen-inner { margin: 0!important; padding: 0!important; } } /* 12.53.17 Display Block Heathrow */ .display-block-heathrow { background-size: cover!important; background-position: center!important; padding: 50px 0; } .display-block-heathrow-inner { display: grid; align-items: center; justify-content: end; max-width: 1160px; margin: 0 auto; grid-template-columns: 1fr 1fr; grid-gap: 50px; z-index: 6; position: relative; } .display-block-heathrow-booking-form { /*max-width: 500px;*/ background: white; padding: 20px; } .display-block-heathrow-text { /*max-width: 500px;*/ /*background: white; padding: 20px;*/ } .display-block-heathrow-text * { color: white!important; } .display-block-heathrow a.button { width: 100%; text-align: center; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .display-block-heathrow-mobile-image { display: none; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .display-block-heathrow { padding: 0!important; } .display-block-heathrow-text { max-width: 100%; padding: 20px; } .display-block-heathrow-inner { margin: 0!important; padding: 0!important; grid-template-columns: 1fr; } } /**** 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.54.2 Contact Section Two ****/ .contact-section-two { display: grid; grid-gap: 0; background: #222; position: relative; padding: 100px 0 0; } .contact-section-two-top { display: grid; grid-template-columns: calc( 50vw - 614px ) 1fr 2fr; grid-gap: 0px; position: relative; margin: 0 auto; padding: 0 0px; width: 100%; } .contact-section-two-top:before { content: " "; } .contact-section-two-top-left * { color: white; } .contact-section-two-top-left { padding: 80px 35px 20px 20px; } .contact-section-two-bottom { display: grid; grid-template-columns: calc( 50vw - 593px ) 1fr; grid-gap: 0; position: relative; z-index: 1; } .contact-section-two-bottom-right { -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: grayscale(75%); } .contact-section-two-top-right { min-height: 140px; background-position: center!important; background-repeat: repeat!important; background-size: cover!important; padding-top: 0%; } .contact-section-two-top-color { background: red; width: 100%; height: 100px; position: absolute; top: 0; z-index: 0; } .contact-section-two-bottom-color { background: white; width: 100%; height: 225px; position: absolute; bottom: 0; z-index: 0; } .contact-section-two-title { color: white; z-index: 1; position: absolute; top: -70px; font-size: 100px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .contact-section-two { padding: 50px 0 0; } .contact-section-two-top-color { height: 45px; } .contact-section-two-title { top: -27px; font-size: 33px; } .contact-section-two-top-left { padding: 25px 20px 20px 20px; } .contact-section-two-top { grid-template-columns: 1fr; } .contact-section-two-bottom-right { grid-template-columns: 1fr; grid-gap: 20px; width: 100%; } } /**** 12.54.3 Contact Section Three ****/ .contact-section-three { display: grid; grid-gap: 0px; grid-template-columns: 3fr 475px; } .contact-section-three-left { -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: grayscale(75%); } .contact-section-three-right { background: lightgrey; padding: 20px 35px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .contact-section-three { grid-template-columns: 1fr; } .contact-section-three-left { order: 1; } } /**** 12.54.4 Contact Section Four ****/ .contact-section-four { margin-bottom: 35px; } .contact-section-four-map { margin-bottom: -150px; min-height: 350px; background-position: center!important; background-size: cover!important; } .contact-section-four-map iframe { height: 350px; } .contact-section-four-text-grid { display: grid; grid-template-columns: 2fr 1fr; max-width: 1160px; margin: 0 auto; grid-gap: 30px; } .contact-section-four-left { background: white; padding: 25px 25px 25px; z-index: 2; box-shadow: 0 4px 4px rgb(0 0 0 / 25%), 0 -1px 2px rgb(0 0 0 / 8%); } .contact-section-four-right { background: white; padding: 25px 25px 5px; z-index: 2; box-shadow: 0 4px 4px rgb(0 0 0 / 25%), 0 -1px 2px rgb(0 0 0 / 8%); } .contact-section-four h1 { padding-top: 0; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .contact-section-four-text-grid { grid-template-columns: 1fr; margin: 0 15px; } .contact-section-four-map { margin-bottom: -75px; } } /**** 12.54.5 Contact Section Five ****/ .contact-section-five { margin-bottom: 70px; } .contact-section-five-map { margin-bottom: -100px; min-height: 350px; background-position: center!important; background-size: cover!important; } .contact-section-five-map iframe { height: 350px; } .contact-section-five-text-grid { display: grid; grid-template-columns: 2fr 1fr; max-width: 1160px; margin: 0 auto; grid-gap: 0px; } .contact-section-five-left { background: white; padding: 25px 25px 5px; z-index: 2; box-shadow: 0 4px 4px rgb(0 0 0 / 25%), 0 -1px 2px rgb(0 0 0 / 8%); } .contact-section-five-right { position: relative; background: #222222; padding: 25px 25px 5px; z-index: 2; box-shadow: 0 4px 4px rgb(0 0 0 / 25%), 0 -1px 2px rgb(0 0 0 / 8%); } .contact-section-five-right * { color: white; } .contact-section-five h1 { padding-top: 0; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .contact-section-five-left { padding-right: 70px; margin-top: -35px; } .contact-section-five-right { top: 35px; left: -35px; } } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .contact-section-five-text-grid { grid-template-columns: 1fr; margin: 0 15px; } .contact-section-five-map { margin-bottom: -75px; } .contact-section-five-text-grid { grid-gap: 30px; } } /**** 12.54.6 Contact Section Six ****/ .contact-section-six { background: linear-gradient(to right, #292e32 50%, #d8d8d8 50%); } .contact-section-six-inner { display: grid; grid-template-columns: 3fr 2fr 2fr; max-width: 1200px; margin: 35px auto; grid-gap: 0px; padding: 50px 25px; } .contact-section-six-form { padding: 25px; background: #292e32; } .contact-section-six-form h1, .contact-section-six-form label { color: white; } .contact-section-six-text-grid { padding: 25px; background: #fff; } .contact-section-six-map { background-position: center!important; background-size: cover!important; } .contact-section-six-map iframe { height: 100%; width: 100%; } /**** 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.4 Link Three Card ****/ .link-card--three-image-div { position: relative; cursor: pointer; } .link-card--three-image-div .link-card--three-image-image { padding: 0 15px 30px 30px; position: relative; z-index: 5; } .link-card--three-image-div .link-card--three-image-image:before { content: ''; position: absolute; top: 30px; left: 0; right: 45px; bottom: 0; border: 1px solid #000; transition: 0.5s; } .link-card--three-image-div:hover .link-card--three-image-image:before { border: 4px solid #c9d6ff; } .link-card--three-image-div:hover .img:before { /* border: 4px solid #c9d6ff;*/ } .link-card-three img { /* border-radius: 20px; */ overflow: hidden; } .link-card--three-title { width: 210px !important; position: absolute; bottom: 0px; right: 45px; z-index: 3; padding: 20px 15px; color: #fff; text-transform: uppercase; font-family: 'Oswald', sans-serif; font-weight: 300; letter-spacing: 5px; font-size: 13px; line-height: 1.5em; text-align: center; background: black; z-index: 5; } .link-card-three img { /*overflow: hidden;*/ } /**** 12.55.5 Link Four Card ****/ a.link-card--four-link { text-decoration: none!important; } .link-card--four { overflow: hidden; } .link-card--four-image { background-size: cover!important; background-position: center!important; min-height: 250px!important; display: grid; transition: 1s; position: relative; overflow: hidden; } .link-card--four-image:after { content: " "; background: red; background: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; display: block!important; position: absolute; z-index: 0; left: 0; top: 0; pointer-events: none; } .link-card--four-image > * { z-index: 1; position: relative; } .link-card--four:hover .link-card--four-image { transform: scale(1.1); } .link-card--four-text-area { width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,1)); position: relative; bottom: -45px; transition: 1s; display: grid; align-items: end; text-align: center; } .link-card--four:hover .link-card--four-text-area { background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.1), rgba(0,0,0,0.3), rgba(0,0,0,1)); } .link-card--four-text-area-inner { padding: 20px 40px; } .link-card--four:hover .link-card--four-text-area { bottom: 0px } h4.link-card--four-top-title { color: #C9D6FF; font-size: 12px; text-transform: uppercase; } h2.link-card--four-bottom-title { color: white; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; } .link-card--four-arrow { text-align: center; color: white; } .link-card--four-arrow span.material-icons { font-size: 14px; } .link-card--four-line { text-align: center; height: 1px; width: 60px; background-color: rgba(255, 255, 255, 0.2); transition-property: all; transition-duration: 0.3s; transition-timing-function: ease-in-out; margin: 5px auto 15px; } .link-card--four:hover .link-card--four-line { width: 100%; transition-property: all; transition-duration: 0.8s; transition-timing-function: ease-in-out; } /**** 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.55.3 Link Two Card ****/ .link-card-two-grid-outer { margin-bottom: 35px; height: 100% } a.link-card-two, a.link-card-two:hover { text-decoration: none!important; } .link-card-two-grid { display: grid; /* grid-template-rows: 1fr 70px;*/ border-bottom: 2px solid #978571; -webkit-box-shadow: 0 1px 4px rgb(0 0 0 / 20%); -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 rgb(0 0 0 / 20%); } .link-card-two-text { padding: 15px 15px 15px 15px; background: white; } h2.link-card-two-title { margin-bottom: 8px; font-size: 21px; } p.link-card-two-p { font-size: 14px; text-transform: uppercase; color: #009CDE; margin-bottom: 0px; } .link-card-two-arrow-icon { width: 30px; height: 30px; background: #978571; border-radius: 50%; text-align: center; display: grid; align-content: center; position: absolute; bottom: -14px; right: 40px; } .link-card-two-grid span.material-icons { color: white; } .link-card-two-background { background-size: cover!important; background-position: center!important; padding-top: 60%; position: relative; } /**** 12.56 Info Card ****/ a.info-block-link, a.info-block-link:hover { text-decoration: none!important; } .info-block { margin-bottom: 35px; border-bottom: 2px solid #009CDE; -webkit-box-shadow: 0 1px 4px rgb(0 0 0 / 20%); -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 rgb(0 0 0 / 20%); } .info-block-background { padding-top: 50%; background-position: center!important; background-size: cover!important; } .info-block-text { background: #fff; 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-title { font-size: 21px; } /**** 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; } /**** 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(/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: 40% !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/2022/09/man-wants-to-open-a-gasoline-tank-2021-08-28-03-45-00-utc.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; padding-top: 3px; } /* 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; display: none!important; } ul.slick-dots .slick-active button { background-color: red; } .slick-slider img { margin: 0 auto; } .slick-slider-item-inner { padding: 0 0px; } /****/ /**** 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( 6, auto ); grid-gap: 50px; align-items: center; } .client-logo-grid img { /* filter: grayscale(100%);*/ max-height: 42px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .client-logo-grid { grid-template-columns: repeat( 3, auto ); grid-gap: 20px; } .client-logo-grid img { margin: 0 auto; } } /**** 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.1 Icon Card One ****/ .icon-card { text-align: center; background: lightgrey; } .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; } .icon-card-text-bottom { padding: 10px 0; } .icon-card-title { margin-bottom: 0; } .icon-desc { margin-bottom: 0; } /**** 12.68.2 Icon Card Two ****/ a.icon-card-two-link, a.icon-card-two-link:hover { text-decoration: none!important; } .icon-card-two { background: transparent; padding: 25px; margin-bottom: 35px; } .icon-card-two:hover { background: #F2F3F3; } .icon-card-two-top { display: grid; grid-template-columns: 1fr 80px; grid-gap: 20px; margin-bottom: 10px; } .icon-card-two-top-icon-background { background: #DB5771; border-radius: 50%; height: 80px; display: grid; align-items: center; } img.icon-card-two-top-icon-image { max-width: 50px; max-height: 50px; margin: 0 auto; } .icon-card-two-bottom-text { margin-bottom: 10px; } .icon-card-two-bottom-link span.material-icons-outlined { top: 7px; position: relative; margin-right: 7px; } /**** 12.69 Testimonial Slider Style Three ****/ .testimonial-slider-three { padding-top: 100px; position: relative; } .testimonial-slide-three-left-grid { display: grid; grid-template-columns: 1fr 1fr; } .testimonial-slider-three ul.slides li { min-height: 500px!important; height: auto!important; } .testimonial-slider-text-three { min-height: 275px; } span.testimonial-slider-three-background-text { font-weight: 900; font-family: roman; color: transparent; font-size: 1000%; position: absolute; top: -5px; width: 120%; max-width: 120%; margin-bottom: 0; line-height: 0.7em; -webkit-text-stroke: 1px #cfd6da; z-index: 0; text-align: center; } .testimonial-slide-three-left { background: #EA2929; padding: 50px; } .testimonial-slide-three-left * { color: white!important; } .testimonial-slide-three-left-top::before { content: '\201c'; font-size: 12rem; color: transparent; opacity: .3; font-family: serif; font-weight: bold; position: absolute; top: 5px; left: -2rem; z-index: 1; pointer-events: none; float: left; text-align: left; height: 108px; -webkit-text-stroke: 1px #cfd6da; } .testimonial-slide-three-right, .testimonial-slide-three { background-size: cover!important; background-repeat: no-repeat!important; background-position: center!important; } .testimonial-slide-three-left-bottom { display: grid; grid-template-columns: 100px 1fr; grid-gap: 20px; align-items: center; } .testimonial-slide-three-left-bottom-right * { margin-bottom: 0!important; } .testimonial-slide-three { height: 100px; } .testimonial-slide-three { border-radius: 50%; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .testimonial-slide-three-right { display: none!important; } .testimonial-slide-three-left-grid { grid-template-columns: 1fr; } span.testimonial-slider-three-background-text { font-size: 800%; top: 16px; width: 100%; max-width: 100%; text-align: right; } } /**** 12.70 Inline Carousel ****/ .carosel-inline { position: relative; } .carosel-inline-text { display: inline-block; width: 250px; margin-right: 30px; float: left; } .carosel-inline .slick-slider-carousel--generic.slick-initialized.slick-slider.slick-dotted { display: inline-block; width: calc( 100% - 250px - 30px ); } .carosel-inline ul.slick-dots { display: none!important; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .carosel-inline-text { display: block; width: 100%; margin-right: 0px; } .carosel-inline .slick-slider-carousel--generic.slick-initialized.slick-slider.slick-dotted { display: block; width: calc( 100% ); } .carosel-inline button.slick-next.slick-arrow, .carosel-inline button.slick-prev.slick-arrow { top: 56% !important; } } /**** 12.71 Floating CTA Lozenge ****/ /* .floating-cta-lozenge { position: fixed; top: 60vh; right: 0px; z-index: 15; transform: rotate(90deg ); transform-origin: top right; } */ .floating-cta-lozenge { position: fixed; top: 50%; right: 0px; z-index: 15; transform: translateY(-50%); display: grid; grid-gap: 5px 0; } .floating-cta-lozenge .button { writing-mode: vertical-lr; display: flex; grid-gap: 10px; align-items: center; padding: 20px 8px 20px; } .floating-cta-lozenge .button .material-icons-outlined, .floating-cta-lozenge .button svg { margin: 0; } a.whatsapp-button { background: #00A884; border-color: #00A884; } /* .whatsapp-button svg { margin-right: 10px; } */ @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ /* .floating-cta-lozenge { top: 50vh; } */ .floating-cta-lozenge .button:not(.whatsapp-button) { background: red; display: none; } a.button.floating-cta-lozenge-button.whatsapp-button { /* width: 100%; */ /* border-radius: 0; */ } } /**** 12.72 Download Card ****/ .download-card-repater { border-top: 1px solid #E6E7E7; } .download-card { padding: 25px 0 5px; border-bottom: 1px solid #E6E7E7; display: grid; grid-template-columns: 1fr 220px; grid-gap: 40px; align-items: center; margin-bottom: 25px; } span.download-card-meta-desc { margin-right: 45px; } .download-card-meta span.material-icons { font-size: 13px; position: relative; top: 1px; } .download-card-desc, .download-card-meta p { color: #858592; } .download-card-meta p { font-size: 14px; } a.button.download-card-button { background: black; width: 100%; text-align: center; box-shadow: 0 2px 10px 0 rgb(33 37 41 / 30%); } a.button.download-card-button:hover { background: white; color: black!important; border-color: black!important; } /**** 12.73 Prevent Image Copying ****/ img { pointer-events: none; } /**** 12.74 Heathrow Booking Form ****/ /* Booking Form Fonts */ section.booking-form h2 { font-size: 18px; } section.booking-form p { line-height: 1.2em; font-size: 16px; margin-bottom: 6px!important; } section.booking-form h3 { margin: 0!important; } /* Form Inputs */ .radio-image-label input[type=radio]:checked+div { border-bottom: 4px solid #c9d6ff; } .services-list input[type="radio"] { position: absolute; left: -23000px; } .services-list .radio-image-label { padding: 0px; cursor: pointer; } .service-tier .radio-image-label:hover { background: #323232; } /**** 12.77 Pricing List ****/ a.price-list--one-link { text-decoration: none!important; } .price-list--one span.material-icons { font-size: 50px; color: #0D77BD; } .price-list--one span.material-icons { background: white; padding: 15px; border-radius: 50%; border: 1px solid #DFDFDF; } .price-list--one .material-icon { position: absolute; top: -40px; } .price-list--one { background: #fff; padding: 55px 30px 30px; margin-bottom: 30px; position: relative; background-size: cover!important; background-repeat: no-repeat!important; background-position: center!important; border-bottom: 2px solid #978571; box-shadow: 0 3px 6px 0 rgb(155 188 232 / 29%); -webkit-transition: box-shadow .3s ease,-webkit-transform .3s ease; border: 1px solid rgba(0,0,0,.125); margin-top: 40px; } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .price-list--one { min-height: 420px; } .price-list--one-description { min-height: 185px; } } .price-list--one.price-list--one--Bronze span.material-icons { color: #B46D43; } .price-list--one.price-list--one--Silver span.material-icons { color: silver; } .price-list--one.price-list--one--Gold span.material-icons { color: gold; } .price-list--one.price-list--one--Private.VIP.Suite span.material-icons { color: #000; } .price-list--one.price-list--one--Private span.material-icons { color: #000; } h1.flow-selector-grid-title-centre { text-align: center; margin-bottom: 30px; } h2.flow-selector-grid-title-centre { text-align: center; margin-bottom: 30px; } .price-list--one:hover { background: lightgray; background-image: url('/wp-content/uploads/2023/01/shutterstock_1025425645-Converted.png') } .price-list--one img { width: 60px; margin-bottom: 20px; display: none; } h5.price-list--one-name { font-size: 20px; margin-bottom: 15px; color: #222; margin-top: 0; } .price-list--one-description p { color: rgb(153,153,153); font-size: 16px; line-height: 1.3em; } .price-list--one-description ul { list-style: none; margin-left: 20px; } .price-list--one-description li { color: #222; position: relative; font-size: 14px; padding-left: 0px; margin-bottom: 5px; line-height: 1.3em; } .price-list--one-description li:before { content: "done"; font-family: 'Material Icons'; font-weight: 100; font-style: inherit; font-size: 18px; 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: 0px; margin-right: 7px; left: -23px; color: #009CDE; } .price-list--one-small-print { font-size: 14px; color: #222; line-height: 1.2em; } .price-list--one-numb { margin: 0px 0 20px; font-weight: 700; color: #009CDE; line-height: 1em; text-transform: uppercase; display: block; position: relative; padding: 0px 0px; font-size: 20px; z-index: 1; border-bottom: 1px solid #DFDFDF; padding-bottom: 15px; } .price-list--one:hover .price-list--one-numb { /*-webkit-text-stroke: 1px rgba(201, 214, 255, 0.5);*/ } @media (min-width: 768px) { /* DESKTOP RULES GO HERE */ .price-list--one-description ul { min-height: 167px; } } /** Stripe Inputs */ .p-PaymentMethodSelector, .p-GridCell.p-GridCell--12.p-GridCell--md6, .p-GridCell.p-GridCell--6.p-GridCell--md3 { margin: 0!important; } button#submit { width: 100%; margin-top: 15px; } div#google_pay-panel { margin-top: 10px; } /**/ .quanity-buttons-wrapper { display: grid; grid-template-columns: 20px 1fr 20px; } .quanity-buttons-wrapper button.decrement, .quanity-buttons-wrapper button.increment { background: transparent; color: #009CDE!important; border: none; padding: 0px; width: 20px; height: 38px; } .quanity-buttons-wrapper button.decrement:hover, .quanity-buttons-wrapper button.increment:hover { color: #104C97!important; background: #F1F3F5!important; } .quanity-buttons-wrapper input[type="number"] { margin: 0; padding: 0px 15px; height: 39px; } .vip-form-footer { display: flex; justify-content: space-between; } /* Service Tier */ .vip-form-footer button { padding: 5px 17px 5px; } button.vip-form-navigation.vip-form-navigation--previous { background: grey; border-color: grey; } .service-tier input[type="radio"] { position: absolute; left: -23000px; } .choose-a-tier-service label { width: 100%; } .service-tier .item, .about-img { cursor: pointer; } .service-tier .item:hover { background: #def5ff; border: 1px solid #c9d6ff; } .service-tier .item { padding: 3px 10px 3px; position: relative; text-align: center; border: 1px solid transparent; width: 100%; } .service-tier .item .line { width: 100%; display: inline-block; position: relative; margin-bottom: 5px; display: none; } .service-tier .item .line:after { position: absolute; left: 0; bottom: 10px; width: 50px; height: 1px; background-color: rgba(255, 255, 255, 0.1); content: ''; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease-in-out; } .service-tier .item:hover .line:after { width: 100%; background-color: rgba(201, 214, 255, 0.5); transition-property: all; transition-duration: 0.8s; transition-timing-function: ease-in-out; } .service-tier .item h5 { font-size: 14px; font-weight: 300; margin-bottom: 5px; color: #222; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; } .service-tier .item img { width: 44px; margin: 5px auto 0px; } .pricing-card-list { text-align: left; margin-left: auto; margin-right: auto; margin-bottom: 40px; } .list-unstyled { padding-left: 0; list-style: none; } .pricing-card-list li { position: relative; font-size: 14px; padding-left: 0px; margin-bottom: 5px; } ul.pricing-card-list { list-style: none; margin-left: 20px; } .pricing-card-list li:before { content: "done"; font-family: 'Material Icons'; font-weight: 100; font-style: inherit; font-size: 18px; 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: 0px; margin-right: 7px; left: -23px; color: #009CDE; } ul.list-unstyled.pricing-card-list.md-tick-list, .numb, .service-tier-price, .item p, .service-tier-price { display: none; } .service-tier .item .numb { font-size: 40px; font-weight: 600; font-family: 'Oswald', sans-serif; position: absolute; bottom: 30px; right: 30px; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1); line-height: 1em; } .hidden { display: none; } .choose-a-tier-service { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px 20px; max-width: 500px; } .choose-a-tier-service :first-child { grid-column: span 2; } .service-tier input[type=radio]:checked+div { border: 1px solid #c9d6ff; background: #def5ff; } @media screen and (max-width: 767px) { .choose-a-tier-service { grid-template-columns: 1fr 1fr; } .choose-a-tier-service :first-child { grid-column: span 2; } } /***/ .environment-notice { display: none; } .flight-info-time-and-date { grid-template-columns: 1fr 1fr; grid-gap: 10px; display: grid!important; } .flight-info-wrapper label:first-of-type { /* display: grid!important; flex-direction: column; grid-template-columns: 1fr 1fr; grid-gap: 3px 10px;*/ } .flight-info-wrapper > label:first-of-type span { /* background: red;*/ grid-column: span 2; /* grid-area: textone; */ } .flight-info-wrapper > label:last-of-type span { /* background: blue;*/ grid-column: span 2; /* grid-area: texttwo; */ } input#inbound-flight-date { /* grid-area: date; */ } input#inbound-flight-time { /* grid-area: time; */ } input#inbound-flight-number { /* background: yellow;*/ /* grid-area: number; */ } /*input#inbound-flight-number { background: pink; grid-column: span 2; }*/ /* .col-full.header-outer { display: grid!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; }*/ /***/ .flight-info-wrapper { display: flex; flex-direction: column; } form#create-reservation { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 18px; margin-bottom: 0; } .create-reservation-item:nth-of-type(1), .create-reservation-item:nth-of-type(2), .create-reservation-item:nth-of-type(3), .create-reservation-item:nth-of-type(4) { grid-column: span 3; } .create-reservation-item:nth-of-type(5), .create-reservation-item:nth-of-type(6), .create-reservation-item:nth-of-type(7) { grid-column: span 2; } form#create-reservation input, form#create-reservation label { margin: 0; } .vip-form-question-time-date-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } .vip-form-header-timer-area { padding: 5px!important; background: #F1F3F5; border: 1px solid #009CDE!important; margin: 10px 0 20px; color: black; } .vip-form-header-errors-area { /* BACKGROUND: #fff2fb;*/ /* MARGIN: 0 0 10px;*/ /* padding: 5px 15px;*/ } ul.error-message-list { BACKGROUND: #fff2fb; MARGIN: 0 0 10px; LIST-STYLE: none; padding: 5px 15px; } ul.error-message-list li { font-size: 10px; } .booking-summary-box { background: transparent; padding: 0 0 30px; width: 100%; font-size: 16px; line-height: 1.4em; } .cancel-reservation { flex-direction: column; background: rgba(0, 0, 0, 1); margin-bottom: 10px; height: 98%; } .vip-form-part a { color: #009CDE!important; } /* Flow Selector Card Two */ select { cursor: pointer; } .flow-selector-grid input, .flow-selector-grid label { cursor: pointer; } .flow-selector-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-gap: 30px 20px; } .flow-selector-grid input { left: -5000px; } input:checked + label .link-card--three-image-image:before { border: 4px solid rgba(33,33,33,1); } input:checked + label .link-card--three-image-image:before { border: 4px solid rgba(33,33,33,1); background: rgba( 255,255,255,0.5); } input:checked + label .link-card--three-title:before { background: rgba(33,33,33,1); } .flow-selector-grid-input-departure, .flow-selector-grid-input-arrival, .flow-selector-grid-input-transit { display: none; } input#departure:checked ~ div .flow-selector-grid-input-departure { display: block; } input#arrival:checked ~ div .flow-selector-grid-input-arrival { display: block; } input#transit:checked ~ div .flow-selector-grid-input-transit { display: block; } .flow-selector-grid-inputs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-gap: 20px; } .flow-selector-grid-inputs { grid-column: span 3; } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ } @media screen and (min-width: 768px) and (max-width: 1200px) { /* INTERMEDIATE RULES GO HERE */ } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .flow-selector-grid-inputs-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-gap: 10px; } .link-card-two-text { padding: 20px 5px 10px 10px; } .price-list--one { height: calc( 100% - 70px ); padding: 40px 15px 20px; } .price-list--one span.material-icons { font-size: 30px; } h2.link-card-two-title { font-size: 12px!important; margin: 5px 0 0; } h5.price-list--one-name { font-size: 12px; margin-bottom: 15px; color: #222; margin-top: 0; } .pricing-card-list li:before { font-size: 12px; } .pricing-card-list { margin-bottom: 20px; } .price-list--one-description li, .price-list--one-description li { font-size: 12px; } .price-list--one { height: calc( 100% - 70px ); } .flow-selector-grid { grid-template-columns: minmax(0, 1fr); /*display: block;*/ } .link-card--three-image-div .link-card--three-image-image { padding: 0 0px 0px 0px; } .link-card--three-title { width: 100% !important; bottom: 0px; right: 0px; padding: 7px 0px; letter-spacing: 1px; font-size: 12px; position: relative; } .link-card--three-image-div .link-card--three-image-image:before { top: 0px; left: 0; right: 0px; bottom: 0; } .flow-selector-grid { grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px 10px; } .flow-selector-grid input[type=checkbox]+label, .flow-selector-grid input[type=radio]+label { margin: 0 0 0 0; } } /****************************************/ /****************************************/ /*********** 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: 30px; 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) ); margin-bottom: 20px!important; } .videos-single { display: grid; grid-gap: 20px; grid-template-columns: 1fr 3fr; margin-bottom: 20px!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: 25px; } .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: red; } .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: white; text-align: center; } /**** 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; position: sticky; top: 160px; } .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; } } /* Jobs Single */ .post-type-archive-jobs .post-feed, .tax-location .post-feed, .tax-speciality .post-feed, .tax-type .post-feed { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } .jobs-container { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 20px; } .single-jobs div#secondary { display: none; } .listing-col { padding: 0 20px 25px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .post-type-archive-jobs .post-feed, .tax-location .post-feed, .tax-speciality .post-feed, .tax-type .post-feed, .jobs-container { grid-template-columns: 1fr; } .archive-filter-form-wrapper select { width: 100%; margin-bottom: 10px; } } /**** 13.4 Curriculum ****/ /* 13.4.1 Curriculum Archive */ .post-type-archive-curriculum div#primary { margin-right: 0; width: 100%; } .post-type-archive-curriculum .post-feed, .curriculum-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; margin-bottom: 35px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .post-type-archive-curriculum .post-feed, .curriculum-grid { grid-template-columns: 1fr 1fr; } } /* 13.4.2 Curriculum Card */ a.curriculum-card, a.curriculum-card:hover { text-decoration: none!important; } .curriculum-card-image { min-height: 250px; background-position: center!important; background-size: cover!important; display: grid; align-items: end; } .curriculum-card-text { background: rgba(47,115,217,0.7); padding: 10px 15px; } h2.curriculum-card-title { margin-bottom: 0; text-align: center; color: white; } /* 13.4.3 Curriculum Single */ .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; 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; } /******/ /**** 13.9 Media Assets ****/ @media (min-width: 768px) { .post-type-archive-media-assets .content-area, .tax-media-asset-categories .content-area, .single-media-assets .content-area { width: 100%!important; margin-right: 0px!important; } } /* Media Asset Single */ .media-asset-intro p { font-size: 20px; } .media-assets-single-grid { margin-bottom: 35px; } .media-asset-left { border-top: 2px solid red; padding-top: 15px; } img.media-asset-preview { pointer-events: none; } .media-asset-right-title { background: green; font-size: 16px; color: white; padding: 7px 15px; } .media-asset-right-inner { position: sticky; top: 50px; margin-bottom: 15px; } .media-asset-right-inner-top { border: 1px solid green; padding: 15px; } .media-asset-right-terms input#checkbox { width: 18px; height: 18px; position: relative; top: 4px; cursor: pointer; } .media-asset-right .button { width: 100%; margin-top: 15px; } a.media-asset-download-button, a.media-asset-download-button:hover { text-decoration: none!important; } .media-asset-download { display: grid; grid-template-columns: 50px 1fr; grid-gap: 15px; align-items: center; border: 1px solid grey; padding: 10px; margin-top: 15px; } .media-asset-download-icon { border: 1px solid grey; text-align: center; height: 100%; display: grid; align-items: center; justify-content: center; } .media-asset-download-icon span.material-icons { text-align: center; font-size: 34px!important; color: #222; } .media-asset-download-meta * { margin-bottom: 0; } .media-asset-right-title .material-icons { position: relative; top: 5px; } .media-asset-right .material-icons { font-size: 20px; } p.media-asset-download-title { font-size: 15px; } p.media-asset-download-meta-meta { font-size: 14px; display: grid; grid-template-columns: auto auto auto auto; justify-content: start; align-items: center; grid-gap: 6px; } a.button.media-asset-download { border: 1px solid transparent; color: white!important; background-color: blue; } a.button.media-asset-download:hover { border-color: blue!important; background-color: transparent!important; color: blue!important; } a.button.media-asset-apply { border: 1px solid transparent; color: white!important; background-color: darkcyan; } a.button.media-asset-apply:hover { border-color: darkcyan!important; background-color: transparent!important; color: darkcyan!important; } .media-assets-section { background: lightgrey; padding: 30px 0 50px; } /* Media Assets Card */ a.media-assets-card-link:hover { text-decoration: none; } .media-assets-card-image { padding-top: 60%; background-size: cover; position: relative; } .media-assets-card-text { padding: 15px; background: rgb(241,243,245); } .media-assets-card-text-bottom { display: grid; grid-gap: 15px; grid-template-columns: 1fr 1fr; } .media-assets-card-image div { background: white; padding: 3px 9px; width: auto; position: absolute; top: 5px; right: 5px; } .media-assets-card { box-shadow: 0 20px 10px -10px rgb(0 0 0 / 23%); } h3.media-assets-card-meta { font-size: 14px; } /* Media Asset Feed */ .tax-media-asset-categories .post-feed, .post-type-archive-media-assets .post-feed { display: grid; grid-template-columns: repeat( auto-fit, minmax(320px, 1fr) ); grid-gap: 35px; margin-bottom: 35px; } .media-asset-archive-meta { padding: 0 0 15px; margin-bottom: 35px; border-bottom: 1px solid blue; } .tax-media-asset-categories .justified-gallery, .post-type-archive-media-assets .justified-gallery { width: calc( 100% + 40px ); left: -20px; } /**** 13.10 Press Releases ****/ @media (min-width: 768px) { .post-type-archive-press-releases .content-area, .tax-press-releases-categories .content-area, .single-press-releases .content-area { width: 100%!important; margin-right: 0px!important; } } /* Press Releases Single */ .press-release-image-background { padding-top: 25%; background-size: cover!important; background-position: center!important; } .press-release-content { margin: 30px auto; max-width: 700px; } a.press-release-download-button, a.press-release-download-button:hover { text-decoration: none!important; } .press-release-download { display: grid; grid-template-columns: 50px 1fr; grid-gap: 15px; align-items: center; border: 1px solid grey; padding: 10px; margin-top: 15px; margin-bottom: 15px; } .press-release-download-icon { border: 1px solid grey; text-align: center; height: 100%; display: grid; align-items: center; justify-content: center; } .press-release-download-icon span.material-icons { text-align: center; font-size: 34px!important; color: #222; } .press-release-download-meta * { margin-bottom: 0; } .press-release-right .material-icons { font-size: 20px; } p.press-release-download-title { font-size: 15px; } p.press-release-download-meta-meta { font-size: 14px; display: grid; grid-template-columns: auto auto auto auto; justify-content: start; align-items: center; grid-gap: 6px; } a.button.press-release-download { border: 1px solid transparent; color: white!important; background-color: blue; } /* Press Releases Card */ a.press-releases-card-link, a.press-releases-card-link:hover { text-decoration: none!important; } .press-releases-card { background: #F9F8FB; padding: 25px 25px 15px; margin: 0 0 25px; } .press-releases-card-text-top-title h3 { margin-bottom: 0; } .press-release-date-in-feed { padding: 0 0 5px; } /* Press Releases Feed */ .tax-press-release-categories div#primary { width: 100%; } .press-release-tax-button-list { margin-bottom: 35px; } a.button.custom-taxonomy-in-button-list-button { margin-right: 15px; border-radius: 30px; } /**** 13.10 Press Releases ****/ @media (min-width: 768px) { .post-type-archive-locations .content-area, .tax-countries .content-area, .single-locations .content-area { width: 100%!important; margin-right: 0px!important; } } /* Locations Single */ .locations-single-inner { max-width: 800px; margin: 0 auto; padding: 10px 20px; } /* Locations Card */ .airports-card .link-card-two-background { padding-top: 0%; } .airports-card .link-card-two-arrow-icon { bottom: -56px; right: 26px; } a.link-card-two.airports-card * { overflow-wrap: anywhere; } img.flag { display: inline-block; width: 50px; margin-right: 7px; position: relative; top: -3px; } /* Locations Feed */ .locations-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; margin: 30px 0 0; border-top: 1px solid #104C97; padding: 30px 0; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .locations-grid { grid-template-columns: 1fr; } } /****************************************/ /****************************************/ /********* END Custom Post Types ********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /****** 14. Custom Page Templates *******/ /****************************************/ /****************************************/ /**** 14.1 Homepage ****/ /* .page-template-template-homepage ul.slides li, .page-template-template-homepage .header-text { min-height: calc( 100vh - 298px )!important; }*/ @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .mobile-only-home-buttons a.button { width: 100%; margin: 20px 0px 0; } } @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .mobile-only-home-buttons { display: none; } } /**** 14.2 Absolute Slider Template ****/ .page-template-template-fullwidth-absolute-slider #masthead { background: rgba(255,0,0,0.5); } .page-template-template-fullwidth-absolute-slider div#content { padding-top: 0px; } .absolute-header-text-background { background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); width: 100%; height: 100px; position: absolute; } .absolute-header-text-outer { margin: 0 auto; max-width: 1200px; min-height: 300px; display: grid; align-items: start; align-items: center; align-items: end; } .absolute-header-text-inner { padding: 20px 0; } .page-template-template-fullwidth-absolute-slider ul.slides li, .absolute-header-text-background { min-height: calc( 700px )!important; } .page-template-template-fullwidth-absolute-slider .header-slider { position: absolute; top: 0; width: 101%!important; z-index: -1; left: -2px; } .page-template-template-fullwidth-absolute-slider .header-text-inner { position: relative; } /* Fix for above-header-sidebar-relative height disappearing */ @media (min-width: 768px) { .page-template-template-fullwidth-absolute-slider div#content { margin-top: 50px; } .has-y-scroll .absolute-slider { top: -38px; } } /****** 14.3 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: 8rem; color: #009CDE; opacity: .3; font-family: serif; font-weight: bold; position: absolute; top: -30px; left: calc( 50% - 50px ); right: 0; z-index: 1; pointer-events: none; float: left; text-align: left; height: 108px; } .testimonial-single { max-width: 800px; margin: 50px auto 0; } /*.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: 16px; line-height: 1.4em; text-align: center; } p.attribution { text-align: center; font-size: 16px; font-weight: 600; } @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; width: 70%; } .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 { padding: 0px; } .smart-menu .menu { margin: 0!important; } .smart-menu ul.sub-menu { margin: 0!important; } .smart-menu li { display: none!important; margin-bottom: 0!important; } .smart-menu li.current-menu-item, .smart-menu .current-menu-item ul li, .smart-menu li.current-menu-ancestor, .smart-menu .current-menu-ancestor ul li { display: block!important; } .smart-menu a { padding: 8px 20px; display: block!important; text-decoration: none!important; color: rgba(0,0,0,.8)!important; } .smart-menu a:hover { text-decoration: underline!important; background: #f5f6f6; color: rgba(0,0,0,1)!important; } .smart-menu li { text-decoration: none!important; } .smart-menu li.menu-item-has-children > a { font-weight: 700; border-left: 5px solid #7DB0AF; padding: 8px 15px; background: #F5F6F6; } .mobile-smart-menu .smart-menu li.menu-item-has-children > a { padding: 20px 15px; } .smart-menu .current-menu-item > a { color: black; } /**** 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 Slider Above Menu Template ****/ .page-template-template-fullwidth-slider-above-menu ul.slides li, .page-template-template-fullwidth-slider-above-menu .header-text { min-height: 600px!important; } @media (min-width: 768px) { .page-template-template-fullwidth-slider-above-menu header#masthead:not(.site-header-reached-top) { position: relative!important; } .page-template-template-fullwidth-slider-above-menu .mastead-height-mirror { display: none!important; } body.admin-bar.has-y-scroll.page-template-template-fullwidth-slider-above-menu header#masthead { top: 0px!important; } /*.page-template-template-fullwidth-slider-above-menu .site-header-reached-top { position: absolute!important; }*/ } /**** 14.12 Service Page Template ****/ .service-body { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 25px; margin-top: 25px; margin-bottom: 25px; } .service-body-right-inner { background: #006BB7; padding: 20px 20px 0px; position: sticky; top: 155px; border-radius: 25px; box-shadow: 0 4px 4px rgb(0 0 0 / 25%), 0 -1px 2px rgb(0 0 0 / 8%); background: url(/wp-content/uploads/2022/02/form-bg.png); background-size: cover; background-position: center; } .service-body-right-inner * { color: white!important; } .service-body-right-inner .wpcf7-submit { background: #F6F7F9!important; color: #222!important; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .service-body { grid-template-columns: 1fr; } } /**** 14.13 Sitemap Page Template ****/ .page-template-template-sitemap ul.children { margin-left: 35px; } /***/ hr { margin: 8px 0 12px; } /**** 14.14 Repeater Slider Page Template ****/ .page-template-template-fullwidth-repeater-slider .header-text-inner { max-width: 600px; margin: 0 auto; text-align: center; } .page-template-template-fullwidth-repeater-slider .header-text-background { background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.2)); } .page-template-template-fullwidth-repeater-slider .header-text h1, .page-template-template-fullwidth-repeater-slider .header-text p { text-shadow: 1px 1px 5px black; } .page-template-template-fullwidth-repeater-slider ul.slides li, .header-text { /* min-height: 420px!important;*/ min-height: 650px !important; } .page-template-template-fullwidth-repeater-slider .header-text-max-width { align-items: center; } /**** 14.15 Static Homepage Template ****/ .static-homepage-hero { text-align: center; background-repeat: no-repeat!important; background-size: cover!important; background-position: center!important; } .header-text-background { background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.2)); width: 100%; height: 100%; } .static-homepage-hero .header-text-inner { margin: 0 auto; } .static-homepage-hero .header-text-max-width { align-items: center; } .static-homepage-hero h1, .static-homepage-hero p { text-shadow: 1px 1px 5px black; } /****************************************/ /****************************************/ /****** END Custom Page Templates *******/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /**** 15. START DESKTOP ONLY STYLING ****/ /****************************************/ /****************************************/ @media screen and (min-width: 768px) { /* DESKTOP RULES GO HERE */ .min-height-desktop { min-height: 1360px!important; } .widget.woocommerce.widget_shopping_cart { width: calc( 100% + 160px ); left: -160px; top: 50px; } .widget.woocommerce.widget_shopping_cart, .site-header-cart .widget_shopping_cart { display: none; } span.show-password-input { padding: 4px 20px; } .woocommerce-form-login .form-row-first { width: 51.058824%; } .woocommerce-form-login .form-row-last { width: 41.058824%; } } li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--downloads { display: none; } .widget.woocommerce.widget_shopping_cart { display: none; } /****************************************/ /****************************************/ /****** END DESKTOP ONLY STYLING ********/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /***** 16. START MOBILE STYLING *********/ /****************************************/ /****************************************/ @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ footer#colophon { margin-bottom: 60px; } .display-block-heathrow-booking-form { max-width: 100vw; } a.nav-link { height: 100%; } .vip-form-question-time-date-grid { grid-template-columns: 1fr; } .create-reservation-item:nth-of-type(5), .create-reservation-item:nth-of-type(6), .create-reservation-item:nth-of-type(7) { grid-column: span 6; } /*** MOBILE SMALLER **/ h1 { font-size: 26px; } h2.link-card-two-title, h2 { font-size: 18px; } h4 { font-size: 16px; } p, li { font-size: 14px; } a.nav-link { font-size: 8px!important; } .container.below-footer { padding-bottom: 65px; } /* .floating-cta-lozenge { position: fixed; bottom: -2px; right: 0px; z-index: 15; transform: none; transform-origin: none; width: 100vw; background: #3b3b3b; top: inherit!important; text-align: center; } */ .above-header-sidebar-inner { font-size: 10px; } } /****************************************/ /****************************************/ /******** 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 *****/ /****************************************/ /****************************************/ .booking-block { background-size: cover!important; background-repeat: no-repeat!important; background-position: center!important; } .booking-block-inner { max-width: 1160px; margin: 0 auto; padding: 25px 0; } .booking-block-inputs { background: white; padding: 25px; max-width: 500px; margin: 25px 0; } header.entry-header { display: none; } .custom-footer { border-top: 1px solid rgba(0,0,0,.125); padding: 50px 0 50px; text-align: center; margin-top: 40px; } @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ .booking-block-inputs { background: white; padding: 25px; max-width: 100%; margin: 185px 20px 20px; } } .site-title { text-align: left; padding: 0; } /***/ ul.vc_tta-tabs-list { display: grid!important; grid-template-columns: 1fr 1fr 1fr; text-align: center; } .vc_tta-style-classic .vc_tta-tab.vc_active>a { border-color: #f0f0f0; background-color: #104C97!important; color: white!important; } .vc_tta-style-classic .vc_tta-tab>a { border-color: #e3e3e3; background-color: #E7E3DD!important; color: #052438!important; border-radius: 0!important; font-size: 16px!important; border: none!important; padding: 1px 20px!important; } .vc_tta.vc_tta-spacing-1 .vc_tta-tab { margin-top: 0px!important; margin-bottom: 0!important; margin-left: 0px!important; margin-right: 0!important; } /**/ .postid-3562 .car-caption--duration { display: none; } /**/ a#chauffeur-add-to-cart-btn { text-align: center; } p.return-to-shop { display: none; } small.woocommerce-price-suffix:before { content: "plus "; } .wc-pao-subtotal-line span.amount:after { content: " plus "; } /****************************************/ /****************************************/ /******** END THEME SPECIFC EDITS *******/ /****************************************/ /****************************************/ /****************************************/ /****************************************/ /**** 18. SWIPER JS SLIDER **************/ /****************************************/ /****************************************/ .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; max-height: 600px; } .swiper { width: 100%; height: 300px; margin-left: auto; margin-right: auto; } .swiper-slide { background-size: cover; background-position: center; /* max-height: 50vh; */ } .mySwiper2 { height: 80%; width: 100%; } .mySwiper { height: 20%; box-sizing: border-box; padding: 10px 0; } .mySwiper .swiper-slide { width: 25%; height: 100%; opacity: 0.4; } .mySwiper .swiper-slide-thumb-active { opacity: 1; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } /****************************************/ /****************************************/ /******** END SWIPER JS SLIDER *********/ /****************************************/ /****************************************/ /**** 12.76 Mosaic Gallery ****/ .gallery--mosaic { position: relative; width: calc( 100% + 40px ); left: -20px; } /***/ .airport-text { max-width: 800px; margin: 50px auto 50px; } /**** DEC COLOUR CHANGES ***/ /* #masthead, .secondary-navigation, .display-block-heathrow-booking-form, body, .link-card-two-text, .display-block-sixteen-text, .card, .materialdcard span.material-icons, .has-y-scroll header#masthead, .info-block-text, #content > .col-full, .contact-section-four-left, .contact-section-four-right, .lightbox-content-inner, .handheld-navigation a, ul:not(.sub-menu) > li a { background: #111111; } .display-block-heathrow-text * { color: #111111!important; } #colophon, #colophon > .col-full, .below-footer, .booking-block-inputs { background: #000000; } /****/ /* .above-header-sidebar-relative p, .above-header-sidebar-relative a, .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, .wpcf7 label { color: white; } /**/ /* .secondary-navigation ul.menu a, .main-navigation ul ul li, .secondary-navigation ul ul li { color: rgba(255,255, 255, 0.8); } .secondary-navigation ul.menu a:hover { color: rgba(255,255, 255, 1); background: transparent; } /**/ /* .site-footer a:not(.button):not(.components-button), .below-footer, .info-block-text, .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, .handheld-navigation a { color: white; } h1, h2, h3, li, p, .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: white; } /** GREY */ /* 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: 1px solid #3b3b3b; color: white!important; background-color: #3b3b3b; } .above-header-sidebar-relative { background: #3b3b3b; } /* GOLD **/ /* .link-card-two-arrow-icon { background: #D9B77B; } .link-card-two-grid, .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, .info-block { border-color: #D9B77B; } h4, .h4, p.link-card-two-p, ul.md-tick-list li:before, .md-contact-icons span.material-icons, a, a:hover { color: #d9b77b; } .nav-tabs .nav-link.active { color: #D9B77B!important; border-bottom: 3px solid #D9B77B!important; } h1:after { content: " "; width: 70px; height: 2px; background: #D9B77B; margin: 10px 0px 10px; display: block; } nav.secondary-navigation a:before, nav.secondary-navigation .current_page_item a, .home nav.secondary-navigation a:before, .home nav.secondary-navigation .current_page_item a { border-color: #D9B77B!important; } */ .narrowest { max-width: 600px; margin: 0 auto 59px; padding: 50px 0 50px; } .narrowest p { line-height: 1.6em; color: rgb(18, 18, 18); font-size: 16px; } /**** Booking Fields ***/ /***/ /* .summary.entry-summary { width: 100%!important; }*/ /* form.cart { display: grid; grid-gap: 0px 15px; grid-template-areas: "numberofadults numberofadults numberofadults numberofadults numberofchildren numberofchildren numberofchildren numberofchildren numberofinfants numberofinfants numberofinfants numberofinfants" "datepicker datepicker datepicker datepicker datepicker datepicker datepicker datepicker datepicker datepicker datepicker datepicker" "datepickerform datepickerform datepickerform datepickerform datepickerform datepickerform datepickerform datepickerform datepickerform datepickerform datepickerform datepickerform" "bookingprice bookingprice bookingprice bookingprice bookingprice bookingprice bookingprice bookingprice bookingprice bookingprice bookingprice bookingprice" "airportofdeparture airportofdeparture airportofdeparture airportofdeparture airportofdeparture airportofdeparture inboundflightnumber inboundflightnumber inboundflightnumber inboundflightnumber inboundflightnumber inboundflightnumber" "destinationairport destinationairport destinationairport destinationairport flighttime flighttime flighttime flighttime outboundflightnumber outboundflightnumber outboundflightnumber outboundflightnumber" "firstname firstname firstname lastname lastname lastname emailaddress emailaddress emailaddress phonenumber phonenumber phonenumber" "dropoffaddress dropoffaddress dropoffaddress dropoffaddress dropoffaddress dropoffaddress dropoffaddress dropoffaddress dropoffaddress dropoffaddress dropoffaddress dropoffaddress" "pickupaddress pickupaddress pickupaddress pickupaddress pickupaddress pickupaddress pickupaddress pickupaddress pickupaddress pickupaddress pickupaddress pickupaddress" "numberofbags numberofbags numberofbags numberofbags numberofbags numberofbags specialneeds specialneeds specialneeds specialneeds specialneeds specialneeds" "numberofporters numberofporters numberofporters numberofporters numberofporters numberofporters numberofporters numberofporters numberofporters numberofporters numberofporters numberofporters" "addonstotal addonstotal addonstotal addonstotal addonstotal addonstotal addonstotal addonstotal addonstotal addonstotal addonstotal addonstotal" "addtocart addtocart addtocart addtocart addtocart addtocart addtocart addtocart addtocart addtocart addtocart addtocart" "addtocartbutton addtocartbutton addtocartbutton addtocartbutton addtocartbutton addtocartbutton addtocartbutton addtocartbutton addtocartbutton addtocartbutton addtocartbutton addtocartbutton"; grid-template-rows: 1fr; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 25px; } */ /* .wc-pao-addons-container { display: grid; grid-gap: 0px 30px; grid-template-areas: "inboundflightnumber inboundflightnumber inboundflightnumber inboundflightnumber" "outboundflightnumber outboundflightnumber outboundflightnumber outboundflightnumber " "firstname lastname emailaddress phonenumber" "dropoffaddress dropoffaddress dropoffaddress dropoffaddress" "pickupaddress pickupaddress pickupaddress pickupaddress" "numberofbags numberofbags numberofchildren numberofchildren" "numberofporters numberofporters numberofporters numberofporters" "addonstotal addonstotal addonstotal addonstotal"; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; margin-bottom: 25px; } .product.product_cat-inbound-flight.product_cat-outbound-flight .wc-pao-addons-container { grid-template-areas: "inboundflightnumber inboundflightnumber outboundflightnumber outboundflightnumber" "firstname lastname emailaddress phonenumber" "dropoffaddress dropoffaddress dropoffaddress dropoffaddress" "pickupaddress pickupaddress pickupaddress pickupaddress" "numberofbags numberofbags numberofchildren numberofchildren" "numberofporters numberofporters numberofporters numberofporters" "addonstotal addonstotal addonstotal addonstotal"; }*/ @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ /* .wc-pao-addons-container { grid-template-areas: "inboundflightnumber inboundflightnumber " "outboundflightnumber outboundflightnumber " "firstname lastname" "emailaddress phonenumber" "dropoffaddress dropoffaddress" "pickupaddress pickupaddress" "numberofbags numberofbags" "numberofchildren numberofchildren" "numberofporters numberofporters" "addonstotal addonstotal"; grid-template-columns: 1fr 1fr; } .product.product_cat-inbound-flight.product_cat-outbound-flight .wc-pao-addons-container { grid-template-areas: "inboundflightnumber inboundflightnumber " "outboundflightnumber outboundflightnumber " "firstname lastname" "emailaddress phonenumber" "dropoffaddress dropoffaddress" "pickupaddress pickupaddress" "numberofbags numberofbags" "numberofchildren numberofchildren" "numberofporters numberofporters" "addonstotal addonstotal"; } div#wc-bookings-booking-form > p.form-field { max-width: 100%; }*/ } /* .single_add_to_cart_button { grid-area: addtocartbutton; } input.wc-booking-product-id { grid-area: addtocart; } .wc-bookings-booking-cost.price { grid-area: bookingprice; } fieldset.wc-bookings-date-picker { grid-area: datepicker; }*/ /* .wc-bookings-booking-form .form-field { grid-area: datepickerform; }*/ /* .form-field.form-field-wide:has(.block-picker.wc-bookings-time-block-picker) { grid-area: datepickerform; } .wc-pao-addon-drop-off-address { grid-area: dropoffaddress ; } .wc-pao-addon-pickup-address { grid-area: pickupaddress ; } div#wc-bookings-booking-form { grid-area: bookingform ; } .wc-pao-addon-add-ons { grid-area: addons; } .wc-pao-addon-airport-of-departure { grid-area: airportofdeparture; } .wc-pao-addon-inbound-flight-number { grid-area: inboundflightnumber; } .wc-pao-addon-destination-airport { grid-area: destinationairport; } .wc-pao-addon-flight-time { grid-area: flighttime; } .wc-pao-addon.wc-pao-addon-outbound-flight-number { grid-area: outboundflightnumber; } .wc-pao-addon-first-name { grid-area: firstname; } .wc-pao-addon-last-name { grid-area: lastname; } .wc-pao-addon-email-address { grid-area: emailaddress; } .wc-pao-addon-phone-number { grid-area: phonenumber; } .wc-pao-addon-number-of-bags { grid-area: numberofbags; } .wc-pao-addon-special-needs { grid-area: specialneeds; } .wc-pao-addon-infants-below-3y-o { grid-area: numberofinfants; } */ .wc-pao-addon-number-of-children { /* grid-area: numberofchildren; */ } /* */ /* .wc_bookings_field_persons_2939 { grid-area: numberofadults; } .wc_bookings_field_persons_3050 { grid-area: numberofchildren; } **/ /* .wc-bookings-booking-form .form-field input[type=number] { width: 100%; } .wc-pao-addon .wc-pao-addon-wrap { margin: 0 0 0 0; } input[type="color"], input[type="date"], input[type="datetime-local"], input[type="datetime"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="range"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], textarea, select { font-size: 12px; } .wc-pao-addon .wc-pao-addon-wrap select { width: auto; min-width: 100%; border-color: #d9d9d9; } .wc-pao-addon-container.wc-pao-addon.wc-pao-addon-special-needs p { font-size: 14px; cursor: pointer!important; } .product-addon-totals *, .block-picker.wc-bookings-time-block-picker p { font-size: 14px; } label.wc-pao-addon-name, p.form-field { font-size: 12px; color: #6d6d6d; } h1.product_title.entry-title { text-align: center; } .cross-reference-buttons { text-align: center; } .wc-pao-addon label.wc-pao-addon-name { font-weight: 300; letter-spacing: 1px; } .product_meta, section.related.products { display: none; } */ /* .wc-bookings-end-time-container { display: none; }*/ /***/ ul#menu-main-menu-3, ul#menu-footer-menu-1 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 20px; } #colophon .widget_nav_menu ul li { margin-bottom: 0px; display: contents; } #colophon .widget ul ul { /* margin-left: 0em; */ display: contents; } .icon-card-three { display: grid; grid-template-columns: 26px 1fr; grid-gap: 10px; margin-bottom: 10px; } .icon-card-three-right { margin-top: 2px; } .icon-card-three a, .icon-card-three a:hover { text-decoration: none!important; } .icon-card-three .material-icons { font-size: 20px; } .icon-card-three, .icon-card-three * { color: black; } /*********************************************************************************************************************************/ /**** Booking Fields ***/ /*** Calendar **/ /* .wc-pao-addon-number-of-children { background: url(/wp-content/uploads/2022/11/child.jpg); background-position: center!important; background-size: cover!important; padding: 40% 20px 0; content: " "; width: 100%; display: grid; grid-template-columns: 2fr 1fr; align-items: center; margin-bottom: 40px; } .wc-pao-addon-number-of-children label.wc-pao-addon-name { background: #323232; position: relative; top: 20px; padding: 12px 20px; } .wc-pao-addon-number-of-children p.form-row.form-row-wide.wc-pao-addon-wrap { background: #323232; padding: 11px; margin: 0; top: 20px; position: relative; } .wc-pao-addon-number-of-children input { padding: 0px 5px; }*/ /**/ /* .wc-pao-addon-number-of-bags { background: url(/wp-content/uploads/2022/11/bags.jpg); background-position: center!important; background-size: cover!important; padding: 40% 20px 0; content: " "; width: 100%; display: grid; grid-template-columns: 2fr 1fr; align-items: center; margin-bottom: 40px; } .wc-pao-addon-number-of-bags label.wc-pao-addon-name { background: #323232; position: relative; top: 20px; padding: 12px 20px; } .wc-pao-addon-number-of-bags p.form-row.form-row-wide.wc-pao-addon-wrap { background: #323232; padding: 11px; margin: 0; top: 20px; position: relative; } .wc-pao-addon-number-of-bags input { padding: 0px 5px; } */ /**/ /* .wc-pao-addon-number-of-porters { background: url(/wp-content/uploads/2022/11/airport_porter.jpg); background-position: center!important; background-size: cover!important; padding: 23% 20px 0; content: " "; width: 50%; display: grid; grid-template-columns: 2fr 1fr; align-items: center; margin-bottom: 40px; margin: 0 auto 40px; } .wc-pao-addon-number-of-porters label.wc-pao-addon-name { background: #323232; position: relative; top: 20px; padding: 12px 20px; } .wc-pao-addon-number-of-porters p.form-row.form-row-wide.wc-pao-addon-wrap { background: #323232; padding: 11px; margin: 0; top: 20px; position: relative; } .wc-pao-addon-number-of-porters input { padding: 0px 5px; }*/ /**/ /* div#wc-bookings-booking-form > p.form-field:before { content: ""; width: 100%; height: 200px; display: block; background: url(/wp-content/uploads/2022/11/passangers.jpg); background-position: center!important; background-size: cover!important; position: absolute; top: -185px; left: 0; } div#wc-bookings-booking-form > p.form-field:after { content: ""; width: calc( 100% - 40px ); height: 45px; display: block; background: #323232; position: absolute; bottom: 6px; left: 20px; z-index: 0; } div#wc-bookings-booking-form > p.form-field { max-width: 50%; margin: 200px auto 15px!important; content: " "; width: 100%; display: grid; grid-template-columns: 2fr 1fr; align-items: center; position: relative; padding: 0 20px; } div#wc-bookings-booking-form > p.form-field label { background: #323232; position: relative; top: -10px; padding: 12px 20px; margin: 0; z-index: 2; } div#wc-bookings-booking-form > p.form-field input { padding: 11px; margin: 0 0 5px 0; top: -5px; position: relative; width: 90%!important; z-index: 2; padding: 0px 5px; }*/ /**/ /** booking cart */ /* button#place_order { color: #222!important; border-color: #222!important; }*/ /* button#place_order:hover { color: #fff!important; background: #222!important; border-color: #222!important; }*/ /* div#order_review * { color: #222; } .woocommerce-order * { color: #222; }*/ /* table:not( .has-background ) tbody tr:nth-child(2n) td, fieldset, fieldset legend { background-color: transparent; }*/ @media screen and (max-width: 767px) { /* MOBILE RULES GO HERE */ /* div#wc-bookings-booking-form > p.form-field { max-width: 100%; } .wc-pao-addon-number-of-porters { padding: 40% 20px 0; width: 100%; } .btn.btn-sm { padding: .5rem 1rem; font-size: 0.54rem; } */ } /***** START CHAUFFER LAYOUT RULES *******/ /***** END CHAUFFER LAYOUT RULES *******/ /***** START IMPORTED STYLE ***/ /**** Booking Fields ***/ /*** Calendar **/ /***/ /****/ .product_cat-meet-and-greet .summary p.price { display: none; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current { color: #000!important; } /**/ .error-404.not-found { padding-top: 60px; } .error-404 form.search-form label { width: calc(100% - 105px); } .error-404 input.search-field { padding: 14px; } /* .error-404 form.search-form { display: none; }*/ /* Date 26-06-2024 */ input.wpcf7-form-control.has-spinner.wpcf7-submit + .wpcf7-spinner{ display: none; margin: 5px auto; background-color: #104c97; opacity: 1; } form.submitting input.wpcf7-form-control.has-spinner.wpcf7-submit + .wpcf7-spinner{ display: block; } .wpcf7-not-valid-tip + .wpcf7-not-valid-tip { display: none; } /* Thank you page */ :has(.woocommerceThankyouOrder) .site-content { margin-top: 80px; } :has(.woocommerceThankyouOrder) .site-content .site-main { background: #eee !important; padding: 30px 20px; border-radius: 5px; } .woocommerceThankyouOrder .woocommerce-notice, .woocommerceThankyouOrder .woocommerce-thankyou-order-details + p { font-size: 18px; font-weight: 600; margin-bottom: 10px; line-height: 1.2; color: #009CDE; } .woocommerceThankyouOrder .woocommerce-thankyou-order-details { margin: 35px 0 50px; } .woocommerceThankyouOrder th, .woocommerceThankyouOrder td { font-size: 18px; padding: 10px 20px; background-color: #f8f8f8 !important; } .woocommerceThankyouOrder td .wc-item-meta li { font-size: 18px; line-height: 1.2; } .woocommerceThankyouOrder td .wc-item-meta li:not(:last-child) { margin-bottom: 5px; } .woocommerceThankyouOrder td .wc-item-meta li p { font-size: 18px; } .woocommerceThankyouOrder .wc-booking-summary-list { margin-top: 10px; } .woocommerceThankyouOrder .wc-booking-summary-list li { font-size: 18px; margin-bottom: 0; line-height: 1.3; } .woocommerceThankyouOrder .wc-booking-summary-list li:not(:last-child) { margin-bottom: 8px; } .woocommerceThankyouOrder .status-unpaid { background-color: #0a3971 !important; } .woocommerceThankyouOrder address, .woocommerceThankyouOrder address p { font-size: 18px; line-height: 1.4; margin: 0; } .woocommerceThankyouOrder .woocommerce-order-details__title, .woocommerceThankyouOrder .woocommerce-column__title { font-size: 26px; margin-bottom: 12px; } .woocommerceThankyouOrder .woocommerce-order-overview li strong { font-size: 18px; } .woocommerceThankyouOrder .woocommerce-order-overview li { font-size: 16px; } @media (max-width:767px){ :has(.woocommerceThankyouOrder) .site-content .site-main { padding: 20px 12px; } .woocommerceThankyouOrder .woocommerce-order-details { overflow: auto; } .woocommerceThankyouOrder .woocommerce-order-details table{ min-width: 400px; } .woocommerceThankyouOrder .woocommerce-order-details__title{ position: sticky; left: 0; } .woocommerceThankyouOrder .woocommerce-thankyou-order-details { margin: 20px 0 30px; } .woocommerceThankyouOrder .woocommerce-order-details__title, .woocommerceThankyouOrder .woocommerce-column__title { font-size: 22px; } .woocommerceThankyouOrder td .wc-item-meta li { font-size: 16px; } .woocommerceThankyouOrder th, .woocommerceThankyouOrder td { font-size: 16px; padding: 10px; } .woocommerceThankyouOrder address, .woocommerceThankyouOrder address p, .woocommerceThankyouOrder td .wc-item-meta li p, .woocommerceThankyouOrder .wc-booking-summary-list li{ font-size: 16px; } .woocommerceThankyouOrder .woocommerce-order-overview li strong { font-size: 16px; } .woocommerceThankyouOrder .woocommerce-order-overview li { font-size: 14px; } } /* Fixed Header */ .has-y-scroll header#masthead { position: fixed; top: 0; width: 100%; z-index: 99999; } @media (max-width:767px){ .main-navigation.toggled .handheld-navigation { height: 100vh; overflow: auto; padding-bottom: 80px; } :has(.main-navigation.toggled) body { overflow: hidden; } .handheld-navigation ul li a { padding: 10px 30px 10px!important; } } .woocommerce-cart .actions { display: none; border: none; } .woocommerce-cart table.cart td.product-quantity, .woocommerce-cart table.cart th.product-quantity { display: none; } td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions { display: flex; flex-wrap: wrap; grid-gap: 4px; } @media (max-width:991px){ .woocommerce-button.button.cancel { padding: 6px 19px; } } @media (max-width:767px){ td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions { align-items: baseline; justify-content: flex-start; grid-gap: 29px; } .new-chauffeur { grid-template-columns: 1fr 1fr !important; } } @media (max-width:575px){ td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions { grid-gap: 15px; } .lusa-css { grid-template-columns: 1fr; } .new-chauffeur { grid-template-columns: 1fr !important; } } /*Date 03-07-2024*/ #ui-id-1.ui-widget-content, #ui-id-2.ui-widget-content, #ui-id-3.ui-widget-content { height: 225px; overflow: auto; } .locations-grid .link-card-two-grid { position: relative; } .locations-grid .link-card-two-grid .link-card-two-background { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); } .locations-grid .link-card-two-grid .link-card-two-arrow-icon { position: unset; } .locations-grid .link-card-two-grid .link-card-two-text { padding: 15px 40px 15px 15px; word-break: break-all; } .locations-grid .link-card-two-p img[src=""] { display: none; } .woocommerce-NoticeGroup-checkout { width: 52%; } .woocommerce-NoticeGroup-checkout .woocommerce-error { width: 100%; } @media (max-width:991px){ .testimonial-slider .flex-direction-nav{ display: flex; grid-gap: 30px; justify-content: center; margin-top: 20px; } .testimonial-slider .flex-direction-nav .flex-nav-prev .flex-prev, .testimonial-slider .flex-direction-nav .flex-nav-next .flex-next{ position: unset !important; width: 50px !important; height: 50px !important; background-size: cover !important; } .testimonial-slider .flex-direction-nav .flex-nav-prev .flex-prev{ background-position: right 100% center !important; } .testimonial-slider .flex-direction-nav .flex-nav-next .flex-next{ background-position: left 100% center !important; } } @media (max-width:767px){ .woocommerce-NoticeGroup-checkout { width: 100%; } } span.loader:before { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: "Font Awesome 5 Free"; font-weight: 900; line-height: inherit; vertical-align: baseline; content: ""; animation: fa-spin .75s linear infinite; height: 30px; width: 30px; line-height: 30px; font-size: 30px; position: absolute; top: 50%; left: 50%; margin-left: -15px; margin-top: -15px; } span.loader { z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background: 0% 0% / 16px 16px rgb(255, 255, 255); opacity: 0.6; cursor: wait; position: absolute; } .social.Links a img { height: 25px; width: auto; } .social.Links { display: flex; align-items: center; gap: 6px; } span#checkoutLoader:before { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: "Font Awesome 5 Free"; font-weight: 900; line-height: inherit; vertical-align: baseline; content: ""; animation: fa-spin .75s linear infinite; height: 30px; width: 30px; line-height: 30px; font-size: 30px; position: absolute; top: 50%; left: 50%; margin-left: -15px; margin-top: -15px; } span#checkoutLoader { z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background: 0% 0% / 16px 16px rgb(255, 255, 255); opacity: 0.6; cursor: wait; position: absolute; } div#custom_cod_field p { display: flex; flex-direction: column; padding-top: 18px; } #payment .payment_methods li .payment_box { padding: 0 20px !important; } .lightbox-content-inner input.wpcf7-form-control.wpcf7-submit.has-spinner { background-color: #104c97; } .payment_box.payment_method_stripe > p { display: none !important; }