/*
 Theme Name:   CPS
 Description:  Custom Theme
 Author:       Square Socket
 Author URI:   https://www.squaresocket.com
 Template:     storefront
 Version:      3.0.0
*/

/**** INDEX ****************


0. Root
    0.1 Root Colours
1. Fonts
    1.1 Font Families
    1.2 Link Rules
    1.3 General Fonts
    1.4 Specific Fonts
    1.5 Buttons
    1.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
    4.19 Custom Contact Menu Item
    4.20 Logged In / Logged Out Menu
5. Footer
    5.1 Footer Menu
    5.2 Below Footer Menu Styling
    5.3 Cookie Preferences
    5.4 Footer Grid Override
    5.5 Custom Footer Area
6. Bootstrap
    6.1 Bootstrap / Storefront Fixes
    6.2 Bootstrap / WooCommerce Fixes
    6.3 Bootstrap Tabs
    6.4 ACF Fixes
7. Flexslider & Slickslider
    7.1 General Flexslider Rules
    7.2 Header Slider Rules
    7.3 Metro Style Flexslider
    7.4 Metro Portfolio Flexslider Rules
    7.5 Slick Slider Metro
    7.6 Swiper JS Slider
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
    10.2 Narrative Contact Form
    10.2 CF7 Styles 
        10.2.1 Contact Form 7 Underline Rules 
        10.2.2 Contact Form 7 Boxed Rules 
        10.2.3 CF7 Inline Grid 
        10.2.4 CF7 Narrative
    10.2 Material Design Icons for Contact Details 
    10.3 Larger Letter for Contact Details 
    10.4 Grid for Opening Hours Contact Details 
11. Modals
    11.1 General Modal Rules
    11.1 Search Modal
    11.2 Full Page Modal

XX.XX Display Blocks

XX.XX Cards

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 Pulled Up on Desktop
    12.75 Visual Composer Overwrite
    12.76 Mosaic Gallery
    12.77 Pricing List
    12.78 Google Recaptcha
    12.79 Image Zoom
    12.80 Pages Grid
    12.81 Tickertape
    12.82 Cursor Custom
13. Custom Post Types
    13.1 Events
    13.2 Videos
    13.3 Jobs 
    13.4 Curriculum 
    13.5 Concrete Pumps
    13.6 Custom Products
    13.7 Podcasts
    13.8 Courses
    13.9 Media Assets 
    13.10 Press Releases
    13.11 Articles
    13.12 Team
    13.13 Offers
    13.14 Properties
    13.15 Webinars
    13.16 Projects
14. Custom Page Templates
    14.1 Homepage
    14.2 Absolute Slider Template
    14.3 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
    14.15 Conversion Page Template
    14.15 ACF Page Builder
15. Desktop Only Styling
16. Mobile Only Styling
17. Intermediate Stages Styling
18. Theme Specific Edits 
19. Swiper Sliders
    19.1 Example slider


*****************************/

/****************************************/
/****************************************/
/************ 0. START ROOT  ************/
/****************************************/
/****************************************/

/**** 0.1 Root Colours ****/

:root {

    --above-header-content:#e40613;
    --above-header-background:#fff;

    --masthead-background: #fff;
    --menu-first-level-background: #fff;
    --menu-dropdown-background: #fff;
    --menu-background-hover: #fff;

    --menu-item: #000;
    --menu-item-hover: #222;
    --menu-item-current: #222;

    --menu-mobile-background: #fff;
    --menu-mobile-item: #222;
    --menu-mobile-line: lightgrey;
    --menu-mobile-toggle: #e40613;
    --menu-mobile-item-active: #000;

    --button-text: #fff;
    --button-background: #e40613;
    --button-border: #e40613;
    --button-hover-text: #fff;
    --button-hover-background: #000;
    --button-hover-border: #000;

    --background: #fff;
    --background-subtle: #F8F8F7;
    --background-strong: #e40613;

    --background-beige: #e4e5dc;

    
  
    --detail:#e40613;
    --detail-secondary:#785964;

    --title: #000;
    --title-secondary: #93B7BE;
    --content: #000;
    --content-slider: #fff;
    --on-black: #fff;

    --footer-background: #e40613;
    --footer-below-background: #e40613;
    --footer-content: #fff;


    --height-half: 25px;
    --height-standard: 50px;
    --height-double: 120px;

    --height-negative: -35px;

    --grid-gap-horizontal: 40px;

    --curved-border: 40px;
}


@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    :root {
        --height-half: 10px;
        --height-standard: 20px;
        --height-double: 40px;
        --grid-gap-horizontal: 40px;
        --curved-border: 20px;
        --height-negative: -15px;
    }
}

/****************************************/
/****************************************/
/**************  END ROOT  **************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/*********** 1. START FONTS  ************/
/****************************************/
/****************************************/

/**** 1.1 Font Families ****/

h1, h2, h3, h4, label {
    font-family: 'neue_haas_grotesk_display45Lt','sans-serif';
}

p, li, body, button, input, textarea, #page #mc_embed_signup input.email, #mc_embed_signup, .shop_table {
    font-family: 'neue_haas_grotesk_display45Lt','sans-serif';
}

.secondary-navigation a, .main-navigation a, .handheld-navigation a {
    font-family: 'neue_haas_grotesk_display45Lt','sans-serif';
}

.beta.site-title a {
    font-family: 'neue_haas_grotesk_display45Lt','sans-serif';
}

/**** 1.2 Link Rules ****/

a, a:hover {
    color: var(--content); 
}

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;

}*/

.thick-underlined-link p a:not(.button) {
    background-image: linear-gradient(120deg, var(--detail) 0%, #baeaff var(--detail-secondary) );
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 40%;
    border-bottom: 0px solid #26BDFF;
    text-decoration: none!important;
    transition: background-size .125s ease-in;
    color: #000;
}

.thick-underlined-link p a:not(.button):hover {
    background-size: 100% 100%;
    text-decoration: none!important;
}

/**** 1.3 General Fonts ****/

h1 {
    color: var(--title);
    font-weight: 700;
    font-size: 60px;
    line-height: 1em;
    padding-top: 15px;
    letter-spacing: 2px;
}

h1:after {
   /* content: " ";
    width: 70px;
    height: 2px;
    background: var(--detail);
    margin: 10px 0px 10px;
    display: block;*/
}

h2 {
    color: var(--title);
    font-weight: 100;
    font-size: 30px;
    line-height: 1.2em;
    letter-spacing: 1px;
}

h3 {
    color: var(--title);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3em;
    letter-spacing: 1px;
}

h4 {
    color: var(--title-secondary);
    font-weight: 700;
    font-size: 50px;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 1px;
    letter-spacing: 1px;
}

p, li {
    line-height: 1.3em;
    color: var(--content);
    font-size: 22px;
    letter-spacing: 1px;
}

ol, ul {
    margin: 0 0 10px 29px;
    padding: 0;
}

p {
    margin-bottom: 18px;
}

/**** 1.4 Specific Fonts ****/

.meta-info {
    font-size: 20px;
}

#comments {
    color: var(--content);
}

.widget .widget-title, .widget .widgettitle {
    color: var(--content);
}


.sml {
    font-size: 0.6em;
}

.med {
    font-size: 1em;
}

.custom-footer-one h2{
    font-size: 50px;
    font-weight: 600;
    letter-spacing: 4px;
    padding-top: 50px;
   
}

.custom-footer-one h3 {
    font-size: 36px;
    
}

.vimeo-text-inner h1 {
    font-weight: 700;
    font-size: 60px;
    line-height: 1em;
    padding-top: 15px;
    letter-spacing: 2px;
}

.vimeo-text-inner p{
 /*   font-size: 36px;*/
    font-weight: 500;
    /* max-width: 654px; */
    line-height: normal;
    letter-spacing: 1px;
    margin: 0 auto;
}

.wpcf7 p {
    margin: 10px 0 0;
}

/* 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 var(--detail);
    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: var(--content-slider);
    /*text-shadow: 1px 1px 5px black;*/
}

/* home blocks */

.home-blocks h4 {
    font-size: 18px;
}

/* Below Footer Fonts */
.below-footer p {
    font-size: 14px;
}

/**** 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 var(--button-border);
    color: var(--button-text) !important;
    padding: 5px 36px 5px;
    background-color: var(--button-background);
    font-weight: 100;
    border-radius: 30px;
}

/* 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: var(--button-hover-border)!important;
    background-color: var(--button-hover-background)!important;
    color: var(--button-hover-text)!important;
}

.on-black .button, .on-black button, .on-black input.wpcf7-submit {
    background: transparent;
    color: var(--on-black)!important;
    border-color: var(--on-black);
}

.on-black .button:hover, .on-black button:hover, .on-black input.wpcf7-submit:hover {
    background: #fff!important;
    border-color: #fff!important;
    color: var(--background-strong)!important;
}

.acf-map button {
    border-radius: 0px;
}

.custom-footer-one .button {
    background: var(--background-strong);
    color: #fff !important;
    border-color: #fff;
    border-width: 2px;
    font-weight: 500;
    font-size: 20px;
    padding: 8px 36px 5px;
}

.custom-footer-one .button:hover {
    background: #fff!important;
    color: var(--detail)!important;
    border-color: #fff!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%;*/
}

.button--md-icon-after .material-icons, .button--md-icon-after .material-icons-outlined {
    margin: 0 0 0 9px;
}

.button--md-icon-before .material-icons, .button--md-icon-before .material-icons-outlined {
    margin: 0 9px 0 0;
}

/* 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 {
    padding: 6px 5px 6px 15px;
}

a.button.arrow:after {
  /*  border-left: 1px solid #ccc;*/
  /*  content: "arrow_forward";*/
    content: "";
   /* font-family: 'Material Icons';*/
   /* font-weight: 100;
    font-style: inherit;*/
    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: 20px;
    width: 40px;
}

a.button.arrow:hover:after {
    border-left: 1px solid var(--detail)!important;
}

/* Another Arrow Button */

.button--arrow {
    border-radius: 33px;
    padding: 5px 20px 9px 25px;
    border: 1px solid #c2c2c2;
    color: black!important;
    background: transparent;
    font-weight: 100;
}

.on-black .button--arrow  {
    color: var(--detail)!important;
    background: transparent;
    border-color: var(--detail);
}

.button--arrow:hover {
    border-color: var(--detail);
    color: var(--detail)!important;
    background: transparent!important;
}

.button--arrow:after {
    content: "\F138";
    display: inline-block;
    position: relative;
    top: 5px;
    margin-left: 15px;
    padding-left: 10px;
    font-family: bootstrap-icons;
    font-size: 21px;
}


/* Corporate Button */

a.button.corporate {
    background: #0a70dc;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    outline: none;
    overflow: hidden;
    padding: 0.75rem 4rem 0.75rem 1.25rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    width: auto;
    border: none!important;
}

a.button.corporate:hover {
    background: #0a70dc!important;
    color: #fff!important;
    border: none!important;
}

a.button.corporate:before {
    background-color: #00deb2;
    bottom: 0;
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    transform: skewX(-18deg) translate(5.375rem);
    transition: all .4s cubic-bezier(.215,.61,.355,1);
    width: 3.875rem;
    z-index: 5;
}

a.button.corporate:hover:before {
    transform: skewX(-18deg) translate(0.8125rem);
    transition: all .4s cubic-bezier(.215,.61,.355,1);
}

a.button.corporate:after {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MC40IDQ2LjUiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Im0yNy4yIDQ1LjYgMjIuMS0yMi4zTDI3LjIgMXY3LjhsMTEuNiAxMS43SDIuM0wuNSAyNi4xaDM4LjNMMjcuMiAzNy44eiIvPjwvc3ZnPg==) no-repeat;
    content: "";
    display: inline-block;
    height: 0.75rem;
    margin-top: -0.375rem;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    width: 0.8125rem;
    z-index: 10;

}

/* Inverted Button */

body a.button.inverted {
    background: var(--button-text)!important;
    color: var(--button-background)!important;
    border-color: var(--button-text)!important;
    text-decoration: underline!important;
}

body a.button.inverted:hover {
    background: var(--button-hover-text)!important;
    color: var(--button-hover-background)!important;
    border-color: var(--button-hover-text)!important; 
}

/* Corporate Finger */

a.button.finger {
   position: relative;
   border: black solid 5px;
   border-radius: 40px;
   background: transparent;
   color: black!important;
   padding: 8px 60px 9px 20px;
}

a.button.finger:before {
    background-color: #fff;
    bottom: -26px;
    right: -30px;
    content: "";
    position: absolute;
    height: 40px;
    width: 59px;
    z-index: 2;
    border-radius: 50%;
}

a.button.finger:after {
    bottom: -30px;
    right: -25px;
    content: "";
    display: inline-block;
    position: absolute;
    background: url(/wp-content/themes/boilerplate/assets/images/finger.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 61px;
    width: 67px;
    z-index: 3;
}

/* Offset Button */

a.button.offset {
    position: relative;
    background: var(--detail);
    color: #fff;
    padding: 8px 20px 8px 20px;
    position: relative;
    z-index: 2;
    isolation: isolate;
    min-width: 300px;
    text-align: center;
    text-transform: uppercase;
    transition: 1s;
 }

 a.button.offset:hover {
    background: var(--detail)!important;
    border-color: var(--detail)!important;
    color: #fff!important;
 }

 a.button.offset:after {
    content: "";
    display: inline-block;
    border: 1px solid var(--detail);
    inset: 0;
    position: absolute;
    left: 7px;
    top: 7px;
    z-index: -1;
    transition: 1s;
    width: 100%;
    height: 100%;
 }

 a.button.offset:hover:after {
    left: 0px;
    top: 0px;
    border-color: var(--detail)!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: var(--on-black); 
}

/**** 1.7 Navigation Fonts ****/

/* top menu fonts */

.secondary-navigation ul.menu a, .main-navigation ul ul li, .secondary-navigation ul ul li {
    color: var(--menu-item);
    font-size: 16px;
}

/* bottom menu fonts */

.primary-navigation ul.menu a {
    font-size: 16px;
}

.handheld-navigation a {
    font-size: 16px;
}


/**** 1.8 Footer Fonts ****/

#colophon p, #colophon a {
    color: var(--footer-content);
    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: 0em;
}

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: 26px;
    }

    .vimeo-text-inner h1 {
        font-size: 26px!important;
    }

    h2, .acf-page-builder--two-text-columns--grid-left h2 {
        font-size: 22px!important;
    }

    h2.acf-page-builder--milestone--milestone-item-desc {
        font-size: 20px!important;
    }

    h2.acf-page-builder--milestone--milestone-item-title {
        font-size: 20px!important;
    }

    .custom-footer-one h2 {
        font-size: 22px!important;
    }

    .testimonial-card-six--testimonial {
        font-size: 18px!important;
        line-height: 22px!important;
    }

    .testimonial-card-six--attribution {
        font-size: 18px!important;
    }

    h3 {
        font-size: 22px;
    }

    .custom-footer-one h3 {
        font-size: 22px;
    }

    .footer--email--link {
        font-size: 20px!important;
    }

    h4 {
        font-size: 18px;
    }

    .acf-page-builder--counter--number {
        font-size: 120px!important;
    }

    p, li {
        font-size: 16px;
    }
}

/****************************************/
/****************************************/
/*************  END FONTS  **************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/*********** 2. START LAYOUT ************/
/****************************************/
/****************************************/

/**** 2.1 Site Widths ****/

.col-full {
    max-width: 1270px;
    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: 1270px;
    width: 100%;
    padding: 0;
}

.below-footer .row {
    max-width: 1270px;
    margin: 0 auto;
}

/**** 2.2 Sidebar width rules ***/

.right-sidebar .widget-area {
    display: none;
}

@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
    .right-sidebar .content-area {
        width: calc( 75% - 30px );
        width: calc( 100% );
        float: left;
        margin-right: 30px;
        margin-right: 0px;
    }

    .right-sidebar .widget-area {
        width: 25%;
        float: right;
        margin-right: 0;
    }

    /* COMMON / Template Primary Width */
    .post-type-archive-product .content-area, .page-template-template-fullwidth-php .content-area, .page-template-template-homepage-php .content-area, .page-template-template-fullwidth-repeater-slider .content-area, .page-template-template-fullwidth-slider .content-area, .page-template-default .content-area, .search-results .content-area, .page-template-template-fullwidth-gallery .content-area, .page-template-template-fullwidth-absolute-slider .content-area, .single-jobvacancies .content-area, .page-template-template-codesnippets .content-area, .single-videos .content-area, .page-template-template-side-column .content-area, .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;
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .mobile--only {
        display: none!important;
    }
}
    
@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .desktop--only {
        display: none!important;
    }
}

/****************************************/
/****************************************/
/*************  END LAYOUT **************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/*********** 3. START COLOURS ***********/
/****************************************/
/****************************************/


/**** 3.1 Header Colours ****/

#masthead {
    background:var(--masthead-background);
}



@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */

/*
    .col-full.header-outer:before {
        content: "";
        background: white;
        width: 100vw;
        height: 100px;
        position: fixed;
        left: 0;
        z-index: -1;
    }
*/
}

#masthead > .col-full {
    background:var(--masthead-background);
}

/**** 3.2 Top Level Nav Colours ****/

/* COMMON / Top Menu Background Colour */
.secondary-navigation {
    background: var(--menu-first-level-background) ;
}

/* COMMON / Top Menu Dropdown Background Colour */
.secondary-navigation ul ul, .secondary-navigation ul.menu ul {
    background-color: var(--menu-dropdown-background) ;
}

/* COMMON / Top Font Colour */
.secondary-navigation ul.menu a, .main-navigation ul ul li, .secondary-navigation ul ul li {
    color: var(--menu-item);
}

/* COMMON / Top Hover 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: var(--menu-item-hover);
    text-decoration: none;
}

/* COMMON / Top Dropdown Menu Item Colour */
.secondary-navigation ul li:hover ul.sub-menu li a {
    color: var(--menu-item);
}

/* COMMON / Top Dropdown Menu Item Hover Colour */
 .secondary-navigation ul li:hover ul.sub-menu li a:hover {	
    color: var(--menu-item-hover);
}

@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: 200px;
    }

    /* COMMON / Top Menu Hover Colour */
    .secondary-navigation ul.menu a:hover {
        color: var(--menu-item-hover);
        background: var(--menu-background-hover) ;
    }

    /* COMMON / Top Menu Drop Down ul Colour */
    .secondary-navigation ul.menu ul {
        background-color: var(--menu-dropdown-background) ;
    }

    /* COMMON / Top Menu Drop Down Hover Colour */
    .secondary-navigation ul.sub-menu a:hover {
        background: var(--menu-background-hover) ;
    }

    .secondary-navigation .menu ul a {
        background: var(--menu-first-level-background);
    }
}

/**** 3.3 Bottom Level Nav Colours ****/

/* COMMON / Bottom Font Colour */
.primary-navigation ul.menu a, .primary-navigation ul li:hover > a {
    color: var(--menu-item) ;
}

/* COMMON / Bottom Dropdown Menu Item Colour */
.primary-navigation ul li:hover ul.sub-menu li a {
	color:var(--menu-item) ;	
}

/* COMMON / Bottom Active Menu Item */
.storefront-primary-navigation nav#site-navigation .primary-navigation ul.menu li.current-menu-item > a {
    color: var(--menu-item-current) ;
}

/* COMMON / Bottom Dropdown Menu Item Hover Colour */
.primary-navigation ul li:hover ul.sub-menu li a:hover {
	color:var(--menu-item-hover);	
}

/* COMMON / Bottom Menu Background Colour */
.primary-navigation {
    background: var(--menu-first-level-background);
}

/* COMMON / Bottom Menu Drop Down Background Colour */
.main-navigation ul.menu ul.sub-menu, .main-navigation ul.nav-menu ul.children {
    background-color: var(--menu-dropdown-background);
}

/* COMMON / Bottom Menu Hover Colour */
.primary-navigation .menu-item a:hover {
    color: var(--menu-item-hover) ;
    background: var(--menu-background-hover);
}

.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: var(--menu-background-hover);
}

/* COMMON / Shopping Cart Background Colour */
#site-header-cart {
    background: #87CEFA;
}

/**** 3.4 Mobile Menu Nav Colours ****/

/* COMMON / Mobile Menu Link Colour */
.main-navigation ul li a, .site-title a, ul.menu li a, .site-branding h1 a, .site-footer .storefront-handheld-footer-bar a:not(.button), button.menu-toggle, button.menu-toggle:hover, .handheld-navigation .dropdown-toggle {
    color: var(--menu-mobile-item);
}

.handheld-navigation ul li a {
    background: var(--menu-mobile-background);
}

/* COMMON / Mobile Menu Arrow Color */
.handheld-navigation ul.menu li button::after {
    color: var(--menu-mobile-item)!important;
}

/* COMMON / Mobile Menu Current Page Background Colour */
.handheld-navigation .current_page_item a {
    background: var(--menu-mobile-background);
}

/* COMMON / Mobile Menu X Colour */
button.menu-toggle:after, button.menu-toggle:before, button.menu-toggle span:before {
    background-color: var(--menu-mobile-item);
}

.handheld-navigation {
    border-top: 0px solid var(--menu-mobile-item);
}

.handheld-navigation  li.social-menu a {
    display: inline-block!important;
    float: left;
    width: 20px;
}

button.dropdown-toggle:hover {
    background: transparent!important;
    box-shadow: none!important;
}

button.menu-toggle, button.menu-toggle:hover {
    background-color: transparent!important;
    box-shadow: none!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 var(--menu-mobile-line);
}

.handheld-navigation ul li.social-menu a {
    border-bottom: 0px solid #eee;
}

.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: var(--menu-mobile-toggle);
}

.site-header, .main-navigation ul.menu > li.menu-item-has-children:after {
 /*   background-color: lightgreen;*/
}

button.menu-toggle {
    background-color: transparent;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */    
    /* COMMON / Mobile Menu Background Colour */
    #masthead {
        background:var(--masthead-background);  
    }
}

.handheld-navigation a {
    background: var(--menu-mobile-item);
}

/**** 3.5 Body Background Colours ****/

/* COMMON / Outer Body Background Colour */
body {
    background-color: var(--background);
}

/* COMMON / Inner Body Background Colour */
#content > .col-full {
    background: var(--background);
}

/**** 3.6 Footer Colours ****/

/* COMMON / Outer Footer Background Colour */
#colophon {
    background: var(--footer-background);
    padding-bottom: 0px;
}

/* COMMON / Inner Footer Background Colour */
#colophon > .col-full {
    background: var(--footer-background);
    padding: 0 20px;
}

/* COMMON / Inner Footer Background Colour */
.below-footer {
    background: var(--footer-below-background);
}

/****************************************/
/****************************************/
/************* 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;
}


@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */

    .header-outer:before, .header-outer:after, .header-outer .col-full::before,  .header-outer .col-full::after {
        content: none;
    }

    #masthead .header-outer > .col-full{
        display: contents;
    }

    #masthead .header-outer {
        display: grid;
        grid-template-columns: 200px 1fr auto;
        grid-gap: 0 15px;
        align-items: center;
        grid-template-areas: "customlogo primarynav customcontactmenuitem";
        grid-template-rows: 1fr;
        justify-content: space-between;
    }


}

/**/

.site-branding {
    display: none!important;
}

/**/

.custom-logo {
    grid-area: customlogo;
}

.open-deskop-mobile-menu-button {
    grid-area: customna;
}

.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; 
}

.custom-header--map-pin {
    grid-area: mappin; 
}

.custom-minimalist-woo-header--basket {
    grid-area: custombasket; 
}

.custom-minimalist-woo-header--search {
    grid-area: customsearch; 
}

ul#site-header-cart {
    grid-area: siteheadercart; 
    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;
}

#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:25px 20px;
    }
}

/**** 4.2 Logo Layout Rules ****/

.site-branding .logo {
    margin: 0;
    padding: 0;
}

.site-branding .logo:after {
    content: none;
}

/* Desktop Logo Rules */
@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .site-header .site-branding img {
        max-width: 100%;
    }

    .storefront-secondary-navigation .site-header .site-branding {
        width: 100%;
        float: none;
        margin: 0px;
        padding: 0px;
    }

    .site-header .site-branding {
        margin-right:0;
        width:100%;
        transition: 0.5s;
    }
}

/* Mobile Logo Rules */
@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */

    nav#site-navigation, #masthead .col-full, .storefront-primary-navigation, #masthead .header-outer > .col-full {
        display: contents!important;
    }

    #masthead .header-outer.col-full {
        display: grid !important;
        grid-template-columns: 120px 1fr auto;
        grid-gap: 0 10px;
        align-items: center;
        grid-template-areas:
        "customlogo customcontactmenuitem menutoggle"
        "mobilemenu mobilemenu mobilemenu";
        grid-template-rows: auto;
        justify-content: space-between;
        padding: 10px 0px 10px;
    }

    .custom-logo {
        margin-left: 20px;
    }


    svg#Layer_3 {
        width: 100%;
    }

    .menu-main-menu-container {
        margin-top: 40px;
    }


    button#site-navigation-menu-toggle {
        position: relative!important;
        padding: 0 35px 0 0;
        grid-area: menutoggle; 
    }

    .handheld-navigation {
        grid-area: mobilemenu; 
    }

    .custom-contact-menu-item-container {
        text-align: right;
    }



    .custom-header--map-pin, .custom-minimalist-woo-header--search, .custom-minimalist-woo-header--basket, .strapline {
        display: none!important;
    }

    .site-branding {
        float: none!important;
        text-align: center;
        padding: 0 15px;
    }

    .site-branding {
        width: 100%;
        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% );
        float: right;
        margin: 0;
    }

    .secondary-navigation .menu a {
        padding: 16px 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% );
        margin-right: 0px;
    }

    .storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 0px;
    }
    .site-header-cart .cart-contents {
        padding: 24px 0 25px;

    }
}

/* 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: 10px 10px;
}

@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;
        text-align: right;
    }

    .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: 0 10px;
}

#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 ****/

#masthead > .col-full {
    position: relative;
}

button.menu-toggle {
   /* right: 45px;
    top: 48px;
    /* top: calc( 50% - 20px ); */
    /*padding-top: 6%;*/
 /*   max-width: 30%;*/
    /* padding-top: calc( 28% - 23px ); */
}

.handheld-navigation ul li a {
    padding: 16px 30px 16px!important;
    width: 100%!important;
}

.handheld-navigation ul.sub-menu li a {
    padding-left: 45px!important;
}

.handheld-navigation ul.menu .sub-menu.toggled-on {
    margin-bottom: 0px;
    display: block;
    width: 100%;
}


.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0em;
    vertical-align: 0em;
    content: "";
    border-top: 0 solid;
    border-right: 0 solid transparent;
    border-bottom: 0;
    border-left: 0 solid transparent;
}

button.dropdown-toggle {
    padding: 15px 20px;
}

.handheld-navigation ul.menu li {
    display: block;
    width: 100%;
}

.handheld-navigation {
    width: 100%;
}

.handheld-navigation ul ul {
    position: inherit;
    left: 0px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    ul.sub-menu.toggled-on a {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    li.menu-item {
        margin-bottom: 0px;
    }

    .site-branding {
        padding-bottom: 20px;
        padding-top: 20px;
    }
        
    #masthead {
        padding-top:0px;
        padding-bottom: 0px;
    }

    .main-navigation ul ul li a {
        padding-left: 40px;
    }

    .main-navigation ul.sub-menu ul.sub-menu li a {
        padding-left: 60px;
    }

    /* Mobile Menu 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: 2px;
    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 ****/ 

.breadcrumbs {
    padding: 20px 0 0;
}

.storefront-breadcrumb {
    display: none;
}

.woocommerce-breadcrumb {
    padding: 20px 0;
    margin: 0;
}

.storefront-breadcrumb .col-full {
    background: white;
}

@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */    
    .storefront-breadcrumb {
        padding: 0px 0;
        margin: 0px 0 0px;
    }
}

/**** 4.8 Social Menu Rules ****/

/*
.social-menu a {
    top: 0px;
    position: absolute;
    left: 0px;
    opacity: 0;
    width:100%;
    height: 100%;
}

.social-menu {
    float: right;
    min-width: 53px;
    margin-right: 20px;
    position:relative;
    top:15px;
}*/

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .social-menu {
        float: none;
        display: inline-block;
        left: 0px;
        margin: 10px 10px 10px 0;
        top:0;
    }
}

.secondary-navigation .social-menu:before {
    font-size: 14px;
    padding: 3px;
}

.secondary-navigation .social-menu {
    min-width: 22px;
    margin-right: 13px;
}

/**** 4.9 WooCommerce Active Menu Rules ****/

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .woocommerce-active .site-header .site-header-cart, 
    .woocommerce-active .site-header .site-search {
        width: 20%;
    }

    .woocommerce-active #masthead .header-outer > .col-full  .site-header-cart, 
    .woocommerce-active #masthead .header-outer > .col-full  .site-search {
        width: 100%;
    }

    .woocommerce-active .site-header .secondary-navigation {
        width:56%;
        margin-right:2%;
    }

    .woocommerce-active .site-header .main-navigation {
        width: 100%;
        margin-right:0%;
    }    
}

/*** 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;
    }

    .has-y-scroll .col-full.header-outer:before {
        height: 50px;
    }

    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;
    }

    .has-y-scroll .custom-logo-link img {
        width: 100%;
        max-width: 130px;
        margin: 5px 0;
    }

    /*.page-template-template-homepage:not(.has-y-scroll) .site-branding {
        display: none!important;
    }*/

}

/*** 4.10.2 Fixed Heading Positioning Change on up and down scroll ****/ 
/*
body.has-y-scroll.has-y-scroll-down header#masthead {
    top: -145px!important;
    transition: 1s;
}

body.has-y-scroll.has-y-scroll-up header#masthead {
    top: 0px!important;
    transition: 1s;
}

body.admin-bar.has-y-scroll.has-y-scroll-up header#masthead {
    top: 32px!important;
    transition: 1s;
}*/

/*** 4.11 Above Header Widget Area ***/

.above-header-sidebar-relative {
    position: relative;
    z-index: 1;
    background: white;
}

.above-header-sidebar-outer {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 6000;
}

.above-header-sidebar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 20px;
}

.above-header-sidebar-inner {
    float: right;
    padding: 10px 20px;
    background: white;
}

@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */

    .above-header-sidebar-outer {
        position: initial;
    }

    .above-header-sidebar {
        padding: 0px;
    }

    .above-header-sidebar-inner {
        float: none;
    }

}

/**** 4.11.2 Above Header Widget Area Full Width Block Rules ****/

.above-header-sidebar-outer {
    position: relative;
}

.above-header-sidebar-inner {
    width: 100%;
    float: none;
    text-align: center;
}

/*** 4.12 Animated Dropdown Menu ***/

@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */    
    .primary-navigation  ul ul.sub-menu, .primary-navigation  ul ul.sub-menu ul.sub-menu, .secondary-navigation ul ul.sub-menu {
        display: initial;
    }
}

.primary-navigation  a, .secondary-navigation a {
	-moz-transition:color 0.3s ease-out;
	-webkit-transition:color 0.3s ease-out;
	-o-transition:color 0.3s ease-out;
	transition:color 0.3s ease-out;
}

.primary-navigation  ul li ul.sub-menu, .secondary-navigation ul li ul.sub-menu {
	float:left;
	list-style:none;
	margin:0;
	padding:0!important;
	position:absolute;
	left:0px;
	top:71px;
	opacity:0;
	visibility:hidden; 
	-moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; 
	-webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	-o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}

.secondary-navigation ul li ul.sub-menu { 
	top:61px;
}

.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 ***/
@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */

    ul:not(.sub-menu) > li a {
    /* background: red;*/
    }
    /*
    .menu-main-menu-container ul:not(.sub-menu) > li a:before {
        -ms-transition: -webkit-transform .3s ease-out,border-color .3s ease-out;
        -webkit-transition: -webkit-transform .3s ease-out,border-color .3s ease-out;
        transition: transform .3s ease-out,border-color .3s ease-out;
        position: absolute;
        display: block;
        bottom: -6px;
        left: 10px;
        width: calc( 100% - 20px );
        -ms-transform: scaleX(0);
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        border-top: 2px solid #FFD503;
        content: '';
        padding-bottom: inherit;
    }

    nav.secondary-navigation ul li a:before {
        -ms-transition: -webkit-transform .3s ease-out,border-color .3s ease-out;
        -webkit-transition: -webkit-transform .3s ease-out,border-color .3s ease-out;
        transition: transform .3s ease-out,border-color .3s ease-out;
        position: absolute;
        display: block;
        bottom: -6px;
        left: 10px;
        width: calc( 100% - 20px );
        -ms-transform: scaleX(0);
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        border-top: 2px solid #FFD503;
        content: '';
        padding-bottom: inherit;
    }

    .home nav.secondary-navigation a:before {
        border-top: 2px solid #FFD503;
    }

    nav.secondary-navigation a:hover:before, .site-header ul.menu li.current-menu-item > a:before, .menu-main-menu-container ul:not(.sub-menu) > li a:hover:before {
        -ms-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }

    nav.secondary-navigation a:before, nav.secondary-navigation .current_page_item a{
        border-color: #FFD503!important;
    }

    .home nav.secondary-navigation a:before, .home nav.secondary-navigation .current_page_item a{
        border-color: #ffffff!important;
    }

    .secondary-navigation ul.menu>li.menu-item-has-children>a::before, .secondary-navigation ul.menu>li.page_item_has_children>a::before, .secondary-navigation ul.nav-menu>li.menu-item-has-children>a::before, .secondary-navigation ul.nav-menu>li.page_item_has_children>a::before {
        content: " ";
        margin-left: 0em;
    }*/
}

/*** 4.13.2 Animated Bottom Menu Hover States ***/

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    /*
    .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 */
/* Bottom Menu Pipe */
/*** 4.15 Position Logo Between Side Menus ***/
/*** 4.16 Postion Both Menus Inline with the Logo   ***/


/*** 4.17.1 Custom Desktop Mobile Menu ***/

button.open-deskop-mobile-menu-button {
    position: relative;
    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: var(--background-strong);
    background-size: cover;
    background-position: center;
}

.deskop-mobile-menu-modal-content {
    position: relative!important;
    overflow: hidden;
}

.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;
    z-index: -2;
}

/**/

.cps-menu--menu #menu-main-menu a {
    font-size: 40px;
    line-height: 60px;
    color: white;
}



ul#menu-main-menu {
    list-style: none;
    margin: 0;
}

.cps-menu--menu {
    text-align: center;
}


@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .cps-menu--menu #menu-main-menu a {
        font-size: 32px;
        line-height: 50px;
    }
}

/*** 4.17.2 Desktop Contact Fullwidth Modal ***/


.open-contact-modal-fullwidth {
    margin: 0!important;
    padding: 0!important;
}

.contact-modal-fullwidth {
    width: 100%!important;
    max-width: 100%!important;
    margin: 0!important;
    height: 100vh!important;
    background: white;
}

.contact-modal-fullwidth--content {
    max-width: 100%!important;
    min-height: 100%!important;
    background: #f5f1ee;
    display: grid!important;
    justify-content: initial;
    grid-template-rows: auto 1fr auto auto;
}

.contact-modal-fullwidth--content-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-gap: 20px;
    align-items: center;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    border-bottom: 1px solid #535c57;
}

button.close.contact-modal-fullwidth-close-button {
    display: block;
    position: relative;
    color: black!important;
    font-size: 20px;
    width: auto;
    top: 0px;
    box-shadow: none;
    text-transform: uppercase;
}

button.close.contact-modal-fullwidth-close-button:hover {
    background: transparent!important;
}

button.close.contact-modal-fullwidth-close-button:before, button.close.contact-modal-fullwidth-close-button:after {
    content: none!important;
}

.contact-modal-fullwidth--logo img {
    margin: 0 auto;
    max-width: 300px;
}

.contact-modal-fullwidth--content-middle {
    display: grid;
   /* min-height: calc( 100vh - 115px );*/
    align-items: center;
    text-align: center;
    padding: 20px 20px;
}

.contact-modal-fullwidth--content-middle-grid {
    display: grid;
    grid-template-columns: minmax(0,3fr) minmax(0,4fr);
    grid-gap: 50px;
    margin: 0 auto;
    max-width: 1120px;
    text-align: left;
}

.contact-modal-fullwidth--content-middle-grid-left p {
    font-size: 14px;
}

.contact-modal-fullwidth--content-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-gap: 40px;
    max-width: 1160px;
    margin: 0 auto 20px;
    padding: 0 20px;
}

.contact-modal-fullwidth--menu-grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 40px;
}

.contact-modal-fullwidth--content-bottom-grid-left {
    max-width: 200px;
}

.contact-modal-fullwidth--footer {
    background: #4b5e5c;
    align-self: end;
    position: relative;
}

.contact-modal-fullwidth--footer:after {
    content: "";
    display: block;
    background-size: contain!important;
    width: 161px;
    height: 100px;
    background: url(/wp-content/uploads/2023/08/corner.png);
    position: absolute;
    top: -100px;
    right: 0;
}

.contact-modal-fullwidth--footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    color: white;
    padding: 10px 0;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .contact-modal-fullwidth--content-middle-grid {
        grid-template-columns: minmax(0,1fr);
    }   
    .contact-modal-fullwidth--content-bottom-grid {
        grid-template-columns: minmax(0,1fr);
    }
}




/*** 4.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%;
    }
}

/*** 4.19 Custom Contact Menu Item ***/

.custom-contact-menu-item {
    border: 1px solid var(--button-border);
    color: var(--button-text)!important;
    padding: 7px 20px 7px;
    background-color: var(--button-background);
    font-weight: 100;
    border-radius: 20px;
    text-align: center;
    width: 100%;
}

.custom-contact-menu-item:hover {
    border: 1px solid var(--button-hover-border);
    color: var(--button-hover-text)!important;
    background-color: var(--button-hover-background);
}

.custom-contact-menu-item span.material-icons {
    font-size: 16px;
    top: 3px;
    position: relative;
    margin-right: 5px;
}

.custom-contact-menu-item svg.bi.bi-download {
    width: 18px;
    height: 20px;
    margin-left: 5px;
    position: relative;
    top: -1px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .custom-contact-menu-item {
        font-size: 14px;
        padding: 7px 10px 7px;
    }
}

/*** 4.20 Logged In / Logged Out Menu ***/

body.logged-in .loggedout {
    background: red;
    display: none;
}

body:not(.logged-in) .loggedin {
    background: red;
    display: none;
}


/****************************************/
/****************************************/
/**********  END HEADER *****************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/********** 5. START FOOTER *************/
/****************************************/
/****************************************/

.footer-widgets {
    padding: 20px 0 20px;
    border-bottom: 0;
}

@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;
    padding: 0 15px;
}

#colophon .widget_nav_menu ul li:last-child {
    padding-right: 0;
}

#colophon .menu {
    padding-bottom: 10px;
    display: flex;
    justify-content: flex-end;
}

#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: 1580px;
    margin: 0 auto;
} */

.below-footer p {
    margin-bottom: 0px!important;
}

.social.Links {
    margin: 20px 0;
}

.social.Links a {
    font-size: 30px;
    margin: 28px 5px;
    text-decoration: none;
}

.social.Links a:first-of-type  {
    margin-left: 0px!important;
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .below-footer .widget {
        width: 50%;
        display: inline-block;
    }

    .below-footer .widget:last-of-type {
        text-align: right;
    }
}


/*** 5.3 Cookie Preferences ****/ 

.cookie-notice-banner {
    display: grid;
    padding: 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #f5f5f5;
    grid-template-columns: 1fr 340px;
    z-index: 50;
}

.manage-cookies-body {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 20px;
}

.manage-cookies-panel.active {
    display: block;
}

.manage-cookies-panel {
    display: none;
}

.manage-cookies-wrapper {
    display: none;
}

.manage-cookies-wrapper.active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: grid;
    align-content: center;
}

.manage-cookies-inner {
    background: white;
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    max-width: 700px;
    -webkit-box-shadow: 0 0px 40px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0px 40px rgba(0, 0, 0, 1);
    -o-box-shadow: 0 0px 40px rgba(0, 0, 0, 1);
    box-shadow: 0 0px 40px rgba(0, 0, 0, 1);
}

.cookie-options-not-set .manage-cookies-tab {
    display: none;
}

.cookie-options-set .cookie-notice-banner {
    display: none;
}

.manage-cookies-tab {
    position: fixed;
    top: 50%;
    right: -64px;
    transform: rotate(-90deg);
    z-index: 30;
}

.cookie-notice .nav-items {
    padding-bottom: 20px;
}

.cookie-notice .nav-items a {
    display: block;
}

.cookie-notice-banner p {
    margin-bottom: 0;
}

.cookie-notice-banner-buttons {
    align-content: center;
    display: grid;
    grid-template-columns: 190px 130px;
    grid-gap: 20px;
}

button.manage-cookies.open-cookie-options {
    background: transparent;
    text-decoration: underline;
    color: black!important;
}

.manage-cookies-body label {
    font-size: 18px;
    font-weight: 100;
    margin-left: 5px;
    margin-bottom: 15px;
}

.manage-cookies-panel {
    margin-bottom: 25px;
}

.cookie-notice button.close-cookie-options {
    color: black!important;
    font-size: 40px;
    background: none;
    border: none;
    position: absolute;
    top: 0;
    right: 10px;
}

.manage-cookies-inner {
    position: relative;
}

@media only screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .cookie-notice-banner-buttons {
        align-content: center;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }

    .manage-cookies-footer {
        display: grid;
        grid-gap: 20px;
        margin-bottom: 50px;
    }

    .manage-cookies-body {
        display: block;
    }

    .manage-cookies-header h3 {
        margin-top: 50px;
        max-width: calc( 100% - 50px );
    }

    .manage-cookies-header {
        display: block;
    }

    .cookie-notice-banner {
        display: block;
    }

    .cookie-notice-banner-text {
        margin-bottom: 40px;
    }

    .manage-cookies-inner {
        position: relative;
        max-height: 100vh;
        overflow: auto;
    }

    .cookie-notice-banner-buttons {
        min-width: 0px;
        width: 100%;
    }
}

/*** 5.4 Footer Grid Override ****/ 

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .footer-widgets {
        display: grid;
        grid-gap: 15px;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) ;

    }

    .footer-widgets::before, .footer-widgets::after {
        content: none;
    }

    .footer-widgets .block {
        width: 100%!important;
        margin-right: 0%!important;
    /*   display: grid;
        align-items: start;*/
    }
}


/*** 5.4 Custom Footer ***/ 


.custom-footer {
    background-color: var(--background-strong);
    border-radius: 40px 40px 0 0;
    margin-top: -35px;
    z-index: 0;
    position: relative;
}

.custom-footer-one {
    display: grid;
    justify-content: space-between;
    padding: var(--height-standard) 0;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: end;
}

.custom-footer-two {
    padding: 0 0 50px;
}

.custom-footer-three {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    border-top: 1px solid white;
    padding: 35px 0 35px;
    grid-gap: 20px;
}

.custom-footer-three--social {
    display: flex;
    align-items: flex-start;
    grid-gap: 20px;
}

.custom-footer-one .button {
    width: fit-content;
}


@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */

    .custom-footer-two {
        padding: 10px 0 20px;
    }

    .custom-footer-three {
        grid-template-columns: minmax(0,1fr);
    }


    .custom-footer-one {
        grid-template-columns: minmax(0,1fr);
    }

    #colophon .menu {
        display: grid;
        justify-content: start;
        padding: 20px 5px;
    }

    section#text-2 {
        padding: 0px 5px;
    }

    #colophon .widget_nav_menu ul li {
        margin-bottom: 0px;
        padding: 0 0px;
        font-size: 20px;
    }
}


/****************************************/
/****************************************/
/**********  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;
}

.page-template-template-homepage .entry-content, .page-template-template-homepage .entry-header {
    max-width: 100%;
}

/**** 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%;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
}

.u-column1.col-1, .u-column2.col-2 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 0px;
    padding-right: 0px;
}

.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -4px;
}

.stripe-card-group, div#stripe-exp-element, div#stripe-cvc-element {
    width: 100%;
}


/**** 6.3 Bootstrap Tabs ****/

.nav-tabs {
    margin: 0;
}

.nav-link {
    border-radius: 0;
    border: none!important;
    color: white;
    padding: 5px 15px;
}

.nav-link.active {
    background-color: var(--detail);
    border-radius: 0;
    color: white!important;
}

.nav-tabs .nav-item {
    margin-bottom: -1px;
    background: pink;
    border: none!important;
    margin-right: 5px;
}

.nav-tabs .nav-item:hover {
    background: orange;
}

.nav-tabs {
    border-bottom: 5px solid #dee2e6;
}


/**** 6.4 ACF Fixes ****/

.acf-map {
    margin: 0px 0!important;
}

.gmnoprint button {
    color: black!important;
}

/****************************************/
/****************************************/
/**********  END Bootstrap **************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/**  7. START Flexslider & Slickslider **/
/****************************************/
/****************************************/

/**** 7.1 General Flexslider Rules ****/

.flexslider {
    margin: 0 0 0px!important;
    background: var(--background) ;
    border: 0px solid var(--background) !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/boilerplate/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:5px !important;}

.flexslider:hover .flex-prev{opacity:0.8 !important;left:5px !important;}

.flex-control-nav{bottom:10px !important;line-height:11px !important;}

.flex-control-paging li a{height:11px !important;width:11px !important;}

.flex-direction-nav a.flex-next:before, .flex-direction-nav a:before {
    content: ' '!important;
}

a.flex-next, a.flex-prev {
    font-size: 0;
}

ul.flex-direction-nav {
    inset: 0;
    display: grid;
    grid-template-columns: auto auto;
    z-index: 2;
    align-content: center;
    justify-content: space-evenly;
    justify-items: stretch;
}


@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,1), rgba(0,0,0,0), rgba(0,0,0,0));
    width: 100%;
    height: 100%;
}

.header-text-max-width {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: grid;
    align-items: normal;
    align-items: center;
    align-items: end;
}

.header-text-inner {
    width: 100%;
    display: block;
    max-width: 800px;
    padding: 20px;
    /*position: absolute;*/
    bottom: 0;
}

/* 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;
    }
}

/**** 7.5 Metro Portfolio Flexslider Rules ****/


.carosel--metro .slick-slide, .carosel--metro .slick-slider-item-inner {
    margin: 0px!important;
    padding: 0px!important;
}

.carosel--metro ul.slick-dots {
    display: none!important;
}

.carosel--metro .slick-slider-metro {
    display: grid;
    grid-template-columns: calc( 50vw - 580px ) 50px 50px minmax(0,1fr) calc( 50vw - 580px );
    grid-template-rows: auto auto;
    grid-gap: 10px 0px;
    grid-template-areas:
        ".  slickprevbutton slicknextbutton . ."
        "slicklist slicklist slicklist slicklist slicklist";
}

.carosel--metro .slick-list.draggable {
    grid-area: slicklist;
}

.carosel--metro button.slick-prev.slick-arrow {
    grid-area: slickprevbutton;
}

.carosel--metro button.slick-next.slick-arrow {
    grid-area: slicknextbutton;
}

.carosel--metro button.slick-prev.slick-arrow, .carosel--metro button.slick-next.slick-arrow {
    top: 0!important;
    position: relative;
    background: transparent!important;
    width: 40px!important;
    height: 40px!important;
}

.carosel--metro button.slick-next.slick-arrow:before, .carosel--metro button.slick-prev.slick-arrow:before {
    font-family: 'Material Icons';
    font-weight: 100;
    font-style: inherit;
    font-size: 40px;
    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;
    opacity: 1!important;
    left: 5px;
    top: 20px;
}

.carosel--metro button.slick-next.slick-arrow:before {
    content: "arrow_forward"!important;
} 

.carosel--metro button.slick-prev.slick-arrow:before {
    content: "arrow_back"!important;
}

.carosel--metro a, .carosel--metro img {
    max-height: 300px;
    width: auto!important;
}

@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */  
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
}

/**** 7.6 Swiper JS Slider ****/

swiper-container {
    width: 100%;
  /*  height: 300px;*/
}

swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

swiper-slide {
   /* width: auto!important; this breaks 3 items */
}

.my-slider {
    position: relative;
}

/*** CUSTOMIZATION */

.carousel--single--full-height swiper-container {
    height: 100%;
}

.mySwiper--buttons {
    height: fit-content;
    display: grid;
    grid-template-columns: auto 1fr auto;
    width: calc(100% + 100px);
    left: -50px;
    position: relative;
}

.mySwiper--buttons--lodzenge {
    background: #000;
    width: fit-content;
    border-radius: 16px;
    height: fit-content;
    display: grid;
    grid-template-columns: auto 5px auto;
}

.mySwiper--meta {
    display: grid;
    grid-template-columns: auto auto;
    justify-items: end;
    padding: 10px 0;
    min-height: 70px;
}

.mySwiper--arrow {
    background: transparent;
    padding: 0px 4px 2px 4px;
    border: none;
    color: var(--content)!important;
    font-size: 19px;
    z-index: 2;
    position: relative;
}

.mySwiper--arrow:hover {
    background: transparent!important;
    border: none!important;
    color: var(--content)!important;
}

.swiper-pagination-fraction {
    color: black;
    font-size: 20px;
    align-self: end;
}

.carousel--square .carousel--single--slide {
    padding-top: 100%;
}

.carousel--square  swiper-container {
    height: auto;
}

.swiper-pagination-horizontal {
    display: flex;
    justify-content: flex-end;
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 16px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 16px));
    display: inline-block;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--detail);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 1);
}

.swiper-pagination-bullet-active {
    border: 1px solid var(--detail);
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--detail);
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */

    .mySwiper--meta.mySwiper--meta--overlay {
        position: relative!important;
    }

    .my-slider.testimonial-carousel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .mySwiper--buttons {
        grid-template-columns: minmax(0, 1fr) 10px auto;
        width: calc(100%);
        left: 0px;
        justify-items: end;
    }

}


/**** 7.6.1 Swiper Carousel ****/


.carousel--ribbon, .carousel--single--slide {
    position: relative;
}

.mySwiper--meta.mySwiper--meta--overlay {
    position: absolute;
    inset: 0;
    max-width: 1800px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    justify-items: stretch;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: 1fr;
}

.mySwiper--meta.mySwiper--meta--overlay--small {
    position: absolute;
    inset: 0;
    width: calc( 100% + 80px )!important;
    left: -40px;
    margin: 0 auto;
    display: grid;
    justify-items: stretch;
    justify-content: space-evenly;
    align-items: center;
    grid-template-columns: 1fr;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .mySwiper--meta.mySwiper--meta--overlay--small {
        width: calc( 100% + 0px )!important;
        left: -0px;
    }
}

.mySwiper--arrow--round {
    background: var(--detail)!important;
    border-radius: 50%;
    height: 33px;
    width: 32px;
    padding: 3px 0px 4px 0px!important;
    display: grid;
    align-content: center;
    text-align: center;
    justify-content: center;
    z-index: 1;
}

.mySwiper--arrow.mySwiper--arrow--round:hover {
    background: #222!important;
}


/**** 7.6.2 Swiper Single ****/

.carousel-single swiper-slide {
    display: block;
}

.carousel--single {
    margin: 0 auto;
    position: relative;
}

.carousel--single swiper-slide {
    width: 100%!important;
}

.carousel--single--slide {
    width: 100%!important;
    height: 100%;
    background-position: center!important;
    background-size: cover!important;
    border-radius: 15px;
}

.swiper-single-item--pane {
    padding-top: 60%;
    background-position: center!important;
    background-size: cover!important;
}


/**** 7.6.3 Swiper Ribbon ****/

img.swiper-ribbon-item--image {
    max-height: 120px;
    width: auto;
}

.image-ribbon-carousel swiper-slide {
    display: block;
    width: fit-content;
}


/****************************************/
/****************************************/
/*************  END SLIDERS *************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/********* 8. START WOOCOMMERCE *********/
/****************************************/
/****************************************/

/**** 8.1 WooCommerce Popup Messages ****/

.woocommerce-info, .woocommerce-noreviews, p.no-comments {
    background-color: blue;
}

/* COMMON / Woocommerce Message */
.site-content > .col-full > .woocommerce > .woocommerce-message:first-child, .site-content > .col-full > .woocommerce > .woocommerce-info:first-child, .site-content > .col-full > .woocommerce > .woocommerce-error:first-child, ul.woocommerce-error, .woocommerce-info, .woocommerce-noreviews, p.no-comments {
    margin: 0 0 20px;
    background: black;
}

ul.woocommerce-error li {
    color: white;
}

.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-noreviews::before, p.no-comments::before {
    font-weight: 600;
}


/**** 8.2 Single Product Page Rules ****/

/*
.woocommerce-product-gallery__image.flex-active-slide {
    width: 100%!important;

}*/

/** PRODUCT SINGLE GRID / STICKY RULES **/

body.single-product,
body.single-product #page,
body.single-product .product {
    overflow: visible!important;
}

.single-product div.product {
    display: grid;
    grid-gap: 30px;
    grid-template-areas: 
    "productgallery producttextarea"
    "relatedproducts relatedproducts"
    "tabswrapper tabswrapper"
    "upsells upsells";
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 25px;
}

.woocommerce-product-gallery {
	grid-area: productgallery;   
}

.summary.entry-summary {
	grid-area: producttextarea;   
}

.related.products {
    grid-area: relatedproducts; 
}

.woocommerce-tabs.wc-tabs-wrapper {
	grid-area: tabswrapper;       
}

section.up-sells.upsells.products {
    grid-area: upsells;
}

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: 0px;
}

a.woocommerce-product-gallery__trigger {
    position:-webkit-sticky;
    position: sticky;
    top: 150px;
    right: 50px;
}

a.woocommerce-product-gallery__trigger {
    display: none!important;
}

figure.woocommerce-product-gallery__wrapper:before {
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    line-height: inherit;
    content: "\f00e";
    position: absolute;
    right: 10px;
    top: 10px;
    background: #eeeeee;
    z-index: 1;
    padding: 4px 7px 4px 9px;
    border-radius: 3px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .single-product div.product {
    /* display: block;*/
        grid-template-areas:
            "productgallery"
            "producttextarea"
            "relatedproducts"
            "tabswrapper"
            "upsells";
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
    }

    .single-product div.product .woocommerce-product-gallery {
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
.single-product div.product .woocommerce-product-gallery {
    width: calc( 100% );
    margin-right: 0px;
    margin-bottom: 0px;
}

.single-product div.product .summary {
    width: calc( 100% );
    margin-right: 0;
    margin-left: 0px;
}

/*.related.products ul.products.columns-3 {
    width: calc( 100% + 70px );
    position: relative;
    left: -35px;   
}*/

}

/**/

.single-product div.product 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 50%,#f0f4f5 50%);
        background: -moz-linear-gradient(left,#fff 50%,#f0f4f5 50%);
        padding-top: 20px;
    }
    
    .woocommerce-checkout.woocommerce-order-received #main {
        background: -webkit-gradient(linear,left top,right top,color-stop(45%,#fff),color-stop(45%,#f0f4f5));
        background: linear-gradient(90deg,#fff 45%,#f0f4f5 45%);
        background: -moz-linear-gradient(left,#fff 45%,#f0f4f5 45%);
        padding-top: 20px;
    }

    .woocommerce-checkout .woocommerce {
        margin: 0 20px;
    }

    .woocommerce-checkout div#content {
        padding-top: 0px;
    }

    th, tr, td, #payment .payment_methods > li .payment_box, #payment .place-order, #order_review, #payment .payment_methods > li:not(.woocommerce-notice) {
        background: transparent!important;
    }
}

.woocommerce-checkout header.entry-header {
    display: none;
}    

/*
.woocommerce select.orderby {
    padding: 5px;
}*/


/**** 8.6 General / Unsorted WooCommerce Rules ****/

ul#shipping_method label {
    display: inline-block;
    width: calc( 100% - 41px );
    margin-left: 10px!important;
    padding-left: 0px;
}

ul#shipping_method input {
    float: left;
    margin-top: 6px!important;
}

label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme {
    display: block;
    width: 100%;
}

table.shop_table.woocommerce-checkout-review-order-table {
    margin-bottom: 0px!important;
}

nav.storefront-product-pagination {
    display: none;
}

.wc-proceed-to-checkout .button.checkout-button {
    text-decoration: none;
}

a.woocommerce-product-gallery__trigger:hover, a.woocommerce-LoopProduct-link.woocommerce-loop-product__link:hover  {
    text-decoration: none;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .storefront-handheld-footer-bar {
        display: none;
    }

    table.cart td.product-remove a.remove {
        position: relative;
        top: 0;
        left: 0;
    }
}

/* Daniel CSS Woocommerce */

.star-rating span:before, .quantity .plus, .quantity .minus, p.stars a:hover:after, p.stars a:after, .star-rating span:before, #payment .payment_methods li input[type=radio]:first-child:checked+label:before {
    color:#e04145;  
}

table.cart td.product-quantity .qty {
    margin: 0;
}

.shop_table {
    border-top: 1px solid #EEEEEE;
}

.cart-item-details {
    padding: 0 5px 0 0;
}

.cart-collaterals h2 {
    margin-bottom: 20px;
    font-weight: normal;
}

table.cart td.actions, .woocommerce-checkout-review-order-table {
    border-top:0!important;
}

.wc-proceed-to-checkout .button.checkout-button, #payment .place-order .button {
    font-size: 1em;
}

.woocommerce-page pre {
    white-space: inherit;
    font-family: inherit;
    background:none;
}

table.cart td, table.cart th {
    padding: 15px !important;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

table.woocommerce-checkout-review-order-table .product-name {
    width:auto; 
}

.storefront-full-width-content .woocommerce-products-header, .storefront-full-width-content.woocommerce-account .entry-header, .storefront-full-width-content.woocommerce-cart .entry-header, .storefront-full-width-content.woocommerce-checkout .entry-header {
    text-align: center;
    padding: 0 0 40px;
}

.woocommerce-error, .woocommerce-info, .woocommerce-message, .woocommerce-noreviews, p.no-comments {
    border-left: 0;
    padding: 1em 1em 1em 4em;
}


/**** 8.7 WooCommerce Feed Rules ****/

h2.woocommerce-loop-product__title {
    margin-top: 15px;
}

p.woocommerce-result-count {
    top: 6px;
}
.storefront-sorting {
    margin-bottom: 20px;
}

.post-type-archive-product ul.products.columns-3, section.related.products ul.products.columns-3, .tax-product_cat ul.products.columns-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    margin-bottom: 20px;
}

.post-type-archive-product li.product.type-product, section.related.products li.product.type-product, .tax-product_cat ul.products.columns-3 li.product {
    width: 100%!important;
    margin: 0!important;
}

.post-type-archive-product div#primary img.attachment-woocommerce_thumbnail, section.related.products img.attachment-woocommerce_thumbnail{
    margin: 0 auto!important;
}

.post-type-archive-product ul.products::before, .post-type-archive-product  ul.products::after, section.related.products ul.products::before, section.related.products  ul.products::after, .tax-product_cat ul.products::before, .tax-product_cat ul.products::after {
    content: none!important;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .post-type-archive-product ul.products.columns-3, section.related.products ul.products.columns-3 {
        grid-template-columns: 1fr 1fr;
    }
}


/**** 8.8 WooCommerce Multi Crumbs ****/

.multicrumbs {
    max-width: 800px;
    margin: 0 auto;
}

.multicrumbs ul {
    list-style: none;
    text-align: center;
    margin: 0;
    font-size: 0;
}

.multicrumbs ul li {
    background: yellow;
    width: auto;
    display: inline-block;
    position: relative;
}

.multicrumbs ul li a {
    color: red;
    padding: 5px 15px;
    font-size: 16px;
}

.multicrumbs ul li a:hover {
    text-decoration: none!important;
}

@media screen and (min-width: 768px) {
    li.multicrumb-item:not(:first-of-type):before {
        content: "|";
        position: absolute;
        color: #5f5f5f;
        left: -2px;
        top: 0px;
        z-index: 0;
        width: 2px;
    }
}


/**** 8.9 WooCommerce Input Fields ****/

.wc-forward:after, .woocommerce-Button--next:after {
    font-size: 0.8em;
}

@media screen and (min-width: 768px) {
    a.added_to_cart.wc-forward {
        margin-left: 10px;
    }
}

a.added_to_cart.wc-forward:hover {
    text-decoration: none;
}

@media (max-width: 767px) {
    /* MOBILE RULES GO HERE */

    ul.products.columns-3 a.button, a.added_to_cart.wc-forward {
        width: 100%;
    }

}

/**** 8.10 WooCommerce Account Area ****/

.woocommerce-MyAccount-content {
    margin-bottom: 25px;
}

span.password-input {
    width: 100%;
}

td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions {
    display: flex;
}

/**** 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/boilerplate/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 Layout Rules ****/

/* Display Blog in Grid */
.post-feed {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    margin: 0 auto;
    grid-gap: 70px 25px;
    padding: var(--height-double) 0 var(--height-double);
}

@media screen and (max-width: 767px) {
    .post-feed {
        grid-template-columns: minmax(0,1fr);
    }
}

/* @media (min-width: 768px) {
    .blog .content-area, .category .content-area, .author .content-area {
        width: calc( 75% - 30px );
        margin-right: 30px;
    }
}

.blog div#secondary, .category div#secondary, .author div#secondary {
   display: block;
} */

/**** 9.2 Meta Info Rules ****/

.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 ****/

.post-image-background {
    padding-top: 33%;
    background-position: center;
    background-size: cover;
}

.post-single-content-container {
    max-width: 800px;
    margin: 0 auto;

    padding: var(--height-double) 0 var(--height-double);
    display: grid;
    text-align: center;
    justify-content: center;
    align-content: center;
}

.post-single-content {
 /*   border-top: 1px solid #eeeeee;
    padding-top: 20px;
    margin-top: 20px;*/
}

.other-blog-posts-feed {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}

.other-blog-posts-feed .post-card-style-one-text {
    margin: 10px 20px 40px;
}

@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .post-single-content figure.alignnone {
        max-width: calc( 100% + 140px )!important;
        width: calc( 100% + 140px )!important;
        position: relative;
        left: -70px;
    }
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .other-blog-posts-feed {
        grid-template-columns: 1fr;
    }
}

/*
.single-post h1.item-title {
    padding-top: 20px;
}

.single-post header.entry-header {
    display: none;
}

.single-post img.attachment-.size-.wp-post-image {
    display: none;
}*/

/**** 9.4 Post Feed Rules ****/
/*
.post-image-background {
    min-height: 400px;
    background-position: center!important;
    background-size: cover!important;
    position: relative;
}

.single-feed-item-text a:hover {
    text-decoration: none;
}

h2.item-title {
    display: block;
}

.single-feed-item {
    padding-bottom: 20px;
}
*/

/**** 9.5 Post Card Rules ****/

/* 9.5.1 Post Card One */ 

.post-card-style-one {
    display: grid;
    grid-template-columns: auto;
    border-bottom: 1px solid #EEEEEE;
    margin: 0 0 30px;
    align-content: flex-start;
}

.post-card-style-one-image-background {
    padding-top: 50%;
    background-size: cover;
    background-position: center;
}

.post-card-style-one-text {
    margin: 10px 50px 40px;
}

@media screen and (max-width: 767px) {
    .post-card-style-one-text {
        margin: 10px 10px 40px;
    }
}

/* 9.5.2 Post Card Two */ 

.post-card-style-two {
    border-bottom: 1px solid #eeeeee;
}

/* 9.5.3 Post Card Three */ 

.post-card-style-three {
    border-bottom: 1px solid #eeeeee;
    margin: 0 0 20px;
    padding: 0 0 20px;
}

.post-card-style-three-grid {
    display: grid;
    grid-template-columns: 1fr 140px;
    grid-gap: 20px;
}

.post-card-style-three-item-title {
    margin: 0;
    padding: 0;
}

.post-card-style-three-excerpt-block * {
    margin: 0;
}

.post-card-style-three-image-background {
    padding-top: 100%;
    background-position: center;
    background-size: cover;
}



/* 9.5.4 Post Card Four */ 

.post-card-style-four {
    border: 1px solid #e2e3e5;
    margin: 0 0 20px;
    display: grid;
    grid-template-rows: auto 1fr;
}

.post-card-style-four--image {
    padding-top: 60%;
    background-position: center!important;
    background-size: cover!important;
}

.post-card-style-four--text {
    padding: 20px 20px 20px;
    display: grid;
    grid-template-rows: 1fr auto;
}

.post-card-style-four--title {
    min-height: 100px;
}

.post-card-style-four--date {
    color: rgb(205, 23, 30);
    margin: 0 0 10px;
    font-size: 16px;
}

.post-card-style-four--cats span, .post-card-style-four--cats a {
    background: white;
    padding: 5px 13px;
    font-size: 12px;
    border: 1px solid #999795;
    color: #999795;
    border-radius: 0px;
    width: fit-content;
    margin-right: 5px;
}

/**** 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;
}

.widget_recent_entries ul li {
    border-bottom: 1px solid #eeeeee;
    padding: 0px 0 12px;
}

/**** 9.7 Author Details  ****/


.author-details {
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-gap: 20px;
    padding-bottom: 10px;
    align-items: center;
}

.author-details * {
    margin: 0;
}


/*.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-textarea {
    height: 110px;
}

.wpcf7 input[type="radio"] {
    display: inline-block;
    width: 35px;
}

span.wpcf7-list-item-label {
    display: inline-block;
    width: calc(100% - 35px);
}

.wpcf7-list-item {
    display: block;
    display: inline-block;
    margin: 0 0 0 0em;
    width: 100%;
    cursor: pointer;
}

.wpcf7-form-control-wrap {
    padding-bottom: 20px;
}

input.wpcf7-submit {
    padding: 0px 40px;
    font-size: 17px;
    margin: 20px 0 0;
}

.wpcf7 input[type="checkbox"], .wpcf7 input[type="radio"] {
    width: 16px;
    margin-right: 18px;
    margin-bottom: 12px;
    font-size: 39px;
    height: 16px;
    top: 15px;
    position: relative;
}


input[type="checkbox"] {
    height: 0 !important;
}

input[type="checkbox"]:after {
    content: " ";
    background: transparent;
    display: block;
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid white;

    opacity: 1;

    position: absolute;
    top: -30px;
    left: 0;
}


input[type="checkbox"]:checked:after {
    background: white;
    border-color: white;
}



.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: 0em 5px 0em;
    padding: 5px 10px;
}


.wpcf7-not-valid-tip {
    color: white;
    font-size: 0.6em;
}

button.disabled, button:disabled, input[type=button].disabled, input[type=button]:disabled, input[type=reset].disabled, input[type=reset]:disabled, input[type=submit].disabled, input[type=submit]:disabled, .button.disabled, .button:disabled, .wc-block-grid__products .wc-block-grid__product .wp-block-button__link.disabled, .wc-block-grid__products .wc-block-grid__product .wp-block-button__link:disabled, .added_to_cart.disabled, .added_to_cart:disabled {
    opacity: .8 !important;
    cursor: not-allowed;
}

/**** 10.2 CF7 Styles ****/

/**** 10.2.1 Contact Form 7 Underline Rules ****/

.cf7-underline-style input[type=text], .cf7-underline-style input[type=number], .cf7-underline-style input[type=email], .cf7-underline-style input[type=tel], .cf7-underline-style input[type=url], .cf7-underline-style input[type=password], .cf7-underline-style input[type=search], .cf7-underline-style textarea, .cf7-underline-style .input-text {
    margin: 0 0 15px;
    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 #fff;
    color: white;
    width: 100%;
}

.cf7-underline-style  input:focus, .cf7-underline-style textarea:focus {
    border-bottom: 1px solid #fff;
}

/**** 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: #fff;
    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 #1A05F3;
}

/**** 10.2.3 CF7 Inline Grid ****/

.cf7--inlinegrid {

}

.cf7--inlinegrid-item {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 0px;
    border-bottom: 1px solid #B0B0B0;
    /* align-content: center; */
    align-items: center;
}

.cf7--inlinegrid {
    display: grid;
    grid-gap: 10px;
}

.cf7--inlinegrid p {
    margin-bottom: 0px;
    margin-top: 12px;
}

.cf7--inlinegrid input[type=text], .cf7--inlinegrid input[type=number], .cf7--inlinegrid input[type=email], .cf7--inlinegrid input[type=tel], .cf7--inlinegrid input[type=url], .cf7--inlinegrid input[type=password], .cf7--inlinegrid input[type=search], .cf7--inlinegrid textarea, .cf7--inlinegrid .input-text {
    padding: 0.6180469716em;
    background-color: transparent;
    color: #b0b0b0;
    border-bottom: 0px solid black;
    border: 0;
    -webkit-appearance: none;
    box-sizing: border-box;
    font-weight: 400;
    box-shadow: inset 0 0px 0px rgb(0 0 0 / 0%);
}

.cf7--inlinegrid input.wpcf7-file, .cf7--inlinegrid .wpcf7-select {
    margin-bottom: 9px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .cf7--inlinegrid-item {
        grid-template-columns: 1fr ;
    }
}

/**** 10.2.4 CF7 Narrative ****/



/**** CF7 ICON ****/

.cf7-icon span.material-icons-outlined {
    position: absolute;
    left: 0px;
    top: 10px;
    z-index: 1;
    color: var(--detail);
}

.cf7-icon input, .cf7-icon textarea.wpcf7-form-control.wpcf7-textarea {
    padding-left: 32px!important;
}

.cf7-icon .input-text, .cf7-icon input[type=email], .cf7-icon input[type=number], .cf7-icon input[type=password], .cf7-icon input[type=search], .cf7-icon input[type=tel], .cf7-icon input[type=text], .cf7-icon input[type=url], .cf7-icon textarea {
    padding: .6180469716em;
    background-color: transparent;
    color: #43454b;
    border: 0;
    -webkit-appearance: none;
    box-sizing: border-box;
    font-weight: 400;
    box-shadow: inset 0 0px 0px rgb(0 0 0 / 13%);
    border-bottom: 1px solid rgba(0,0,0,.15);
}

.cf7-icon .input-text:focus, .cf7-icon input[type=email]:focus, .cf7-icon input[type=number]:focus, .cf7-icon input[type=password]:focus, .cf7-icon input[type=search]:focus, .cf7-icon input[type=tel]:focus, .cf7-icon input[type=text]:focus,.cf7-icon  input[type=url]:focus,.cf7-icon  textarea:focus {
    border-bottom: 1px solid var(--detail);
    background-color: transparent;
}

.cf7-icon span.wpcf7-form-control-wrap {
    display: grid;
    position: relative;
}

.cf7-icon span.wpcf7-form-control-wrap:before {
    display: inline-block;
    position: absolute;
    top: 12px;
    font-family: bootstrap-icons;
    font-size: 21px;
    left: 0px;
    color: var(--detail);
}

.cf7-icon span.wpcf7-form-control-wrap[data-name="your-name"]:before {
    content: "\f4ba";
}

.cf7-icon span.wpcf7-form-control-wrap[data-name="your-email"]:before {
    content: "\f30f";
}

.cf7-icon span.wpcf7-form-control-wrap[data-name="your-tel"]:before {
    content: "\f590";
}

.cf7-icon span.wpcf7-form-control-wrap[data-name="your-message"]:before {
    content: "\F25D";
}

/**** 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;
}



/**** 10.6 CF7 Narrative Form ****/



/****************************************/
/****************************************/
/*************  END CONTACT *************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/************ 11. START MODALS **********/
/****************************************/
/****************************************/

/**** 11.1 General Modal Rules ****/


body.modal-open {
    overflow: auto!important;
    padding-right: 0 !important;
}


.modal {
    margin-right: 17px!important;
}


.modal {
    display: none;
    position: fixed;
    z-index: 100;
    padding: 0px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    padding: 0 0 0 0;
    width: 100%;
    max-width: 1200px;
}
  
.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-content-inner {
    background: white;
    padding: 50px 50px 15px;
}

@media screen and (max-width: 767px) { 
    /* MOBILE RULES GO HERE */

    .lightbox-content-inner {
        padding: 40px 20px 15px;
    }

    .lightbox-content {
        width: calc( 100% - 40px );
    }
}

/**** 11.1.1 Modal Close ****/

.close {
    position: absolute;
    right: 0px;
    top: -50px;
    width: 32px;
    height: 32px;
    opacity: 0.3;
}

.close:hover {
    opacity: 1;
    background: transparent!important;
}

.close:before, .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: white;
}

.close:before {
    transform: rotate(45deg);
}

.close:after {
    transform: rotate(-45deg);
}

/**** 11.1.2 Modal Background ****/



/**** 11.1 Fullscreen Modal Rules ****/

.modal--fullscreen {
    margin: 0!important;
    padding: 0!important;
}

.admin-bar .modal--fullscreen {
    margin-top: 32px!important;
}

.modal-dialog--fullscreen {
    margin: 0;
    width: 100vw;
    max-width: 100vw;
}

.modal-content--fullwidth {
    max-width: 100%!important;
}

.modal-content--fullwidth--content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-rows: 75px minmax(calc(100vh - 175px),auto) 100px;
    padding: 0 35px;
}

.modal-header--fullscreen {
    position: relative;
    border-color: transparent!important;
    background: transparent!important;
}

button.close.modal--fullscreen--close {
    right: auto;
    font-size: 50px;
}

/**** 11.1 Subscribe Modal Rules ****/

.modal-dialog.subscribe-modal-dialog {
    width: 100%; 
    height: 100vh;
    max-width: 700px;
    overflow: hidden;
    display: grid!important;
    align-content: center;
    padding: 0;
}

.close-subscribe-modal-button {
    top: -40px;
    opacity: 0.9;
}

.close-subscribe-modal-button:before, .close-subscribe-modal-button:after {
    content: none;
}

.close-subscribe-modal-button span {
    color: var(--button-background);
}

button.close.close-subscribe-modal-button {
    top: 11px;
    right: 10px;
}

.subscribe-modal-body {
    padding: 0;
}

.popup-subscribe-modal {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.popup-subscribe-modal-image {
    background: url(/wp-content/uploads/2021/01/photodune-AjAM9gbp-modern-office-interior-xxl.jpg);
    background-size: cover;
    background-position: center;
}

.popup-subscribe-modal-text {
    padding: 15px 30px;
}

.popup-subscribe-modal #mc_embed_signup form {
    padding: 0px 0 0px 0%;
}

.popup-subscribe-modal #mc_embed_signup input.button {
    width: 100%!important;
}

/**** 11.1 Modal Menu Modal Rules ****/

.modal--modalmenu {
    margin: 0!important;
    padding: 0!important;
}

.admin-bar .modal--modalmenu {
    margin-top: 32px!important;
}

.modal-dialog--modalmenu {
    margin: 0;
    width: 100vw;
    max-width: 100vw;
}

.modal-content--modalmenu {
    max-width: 100%!important;
}

.modal-content--modalmenu--content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-rows: 75px minmax(calc(100vh - 175px),auto) 100px;
    padding: 0 35px;
}

.modal-header--modalmenu {
    position: relative;
    border-color: transparent!important;
    background: transparent!important;
}

.modal-mobile-menu {
    text-align: center;
}

.modal-mobile-menu ul {
    margin: 0;
    list-style: none;
}

.modal-mobile-menu a {
    font-size: 26px;
    line-height: 1.6em;
}


/****************************************/
/****************************************/
/***************  END MODALS ************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/******** 12. START BITS & BOBS *********/
/****************************************/
/****************************************/

/**** 12.1 Table Rules ****/

table th, table tbody td {
    background:white;   
}

th, tr, td {
    background: #fff;
    border-right: none;
    border-bottom: 1px solid #222;
    vertical-align: middle;
}

/**** 12.2 Focus States ****/

.added_to_cart:focus, .button:focus, button:focus, input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus, :focus, a:focus {
    outline:none;
}

/**** 12.3 Image Display Rules ****/

img {
    border-radius: 0px;
}

/**** 12.4 Display Nones ****/ 

.hentry.type-post .entry-meta {
    display: none;
}

.page-template-template-homepage header.entry-header {
    display: none;
}

.site-info {
    display: none;
}

/**** 12.5 Remove Visual Composer Link at the Bottom of Page ****/

.edit-link {
    display: none;
}

/**** 12.6 Tabs ****/

.vc_tta-panel-title {
    background: red;
}

.vc_active .vc_tta-panel-title {
    background: blue;
}

.vc_tta-panel-title a {
    color: white!important;
}

.wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::after, .wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::before, .wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-controls-icon::after, .wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-controls-icon::before {
    border-color: white!important;
}

.wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-body {
    background-color: white!important;
}

.wpb-js-composer .vc_tta.vc_tta-style-classic .vc_tta-panel-body, .wpb-js-composer .vc_tta.vc_tta-style-classic .vc_tta-panel-heading {
    border-width: 0px;
}

.vc_tta-panel {
    margin-bottom: 10px;
}

/**** 12.7 Search Box ****/

.widget_search form.search-form label {
    width: 100%;
}

form.search-form label {
    width: calc( 100% - 95px );
}

input.search-field {
    width: 100%
}


/**** 12.8 Download File Icons ****/

div#primary 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%!important;
}

div#mc_embed_signup label {
    margin-bottom: 0px!important;
}

div#mc_embed_signup .mc-field-group.size1of2 {
    width: 100%!important;
}

#mc_embed_signup input {
    border: 1px solid #ABB0B2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 0px;
}

#mc_embed_signup .mc-field-group input {
    border-radius: 0px!important;
}

#mc_embed_signup input.button {
    width: auto!important;
    height: auto!important;
}

#mc_embed_signup input.button {
    padding: 5px 20px!important;
    display: block;
    margin: 0 0 10px 0;
    border-radius: 0px;
    background: var(--button-background) ;
    border: 1px solid var(--button-border) ;
    color: var(--button-text) ;
}

#mc_embed_signup input.button:hover {
    background: var(--button-hover-background) ;
    border: 1px solid var(--button-hover-border) ;
    color: var(--button-hover-text) ;

}

#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: #F5F7F8;
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: 30px;
    padding: 15px 40px 15px 15px;
    margin: 40px 0 20px;
    border: 0px solid #016959;

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
    -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
}

.mailchimp-inline-two-left {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-gap: 40px;
    align-items: center;
}

.mailchimp-inline-two-left img {
    position: absolute;
    top: 20px;
    border: 0px solid #016959;
    width: 120px;
    height: 120px;

    transform: rotate(0deg);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
    -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
}

.mailchimp-inline-two-title {
    margin-bottom: 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 #016959;
    background: #016959;
    margin: 0!important;
}

.mailchimp-inline-two-row footer#colophon .button:hover {
    border: 1px solid #016959!important;
}

.mailchimp-inline-two-row #mc_embed_signup input.button:hover {
    border: 1px solid #016959!important;
}

.mailchimp-inline-two-container {
    container-type: inline-size;
}

@container (max-width: 700px) {
    /* MOBILE RULES GO HERE */
    .mailchimp-inline-two-row {
        grid-template-columns: 1fr;
        margin-top: 25px;
    }

    .mailchimp-inline-two-left {
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }

    .mailchimp-inline-two-left img {
        top: -40px;
        position: relative;
        margin-bottom: -40px;
    }
}

/**** 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;
}


/** Service Card One ***/

.service-card-one {
    height: 100%;
}

.acf-page-builder--service-cards--repeater .service-card-one--bottom {
    max-width: 305px;
    margin: 0 auto;
    display: grid;
    align-content: space-between;
    height: 100%;
}

.service-card-one--textarea {

}

.service-card-one--titlearea {
    align-self: start;
}

.service-card-one--descarea {
    align-self: start;
}

.service-card-one--buttonarea {
    align-self: end;
}

/**** 12.16.2 Service Card Two ****/

a.service-card-two {
    display: grid;
    grid-template-rows: 176px auto;
}

.service-card-two-background {
    background-position: center!important;
    background-size: cover!important;
    background-position: center!important;
    background-size: cover!important;
    height: calc( 100% + 50px );
}

.service-card-two-text {
    background: #fff;
    padding: 18px 20px 3px;
    transition: 0.5s;
    margin: 0 15px;
    position: relative;
    border: 1px solid #F4F4F4;
}

a.service-card-two span.material-icons-outlined {
    color: #CD171E;
    font-size: 16px;
    position: relative;
    top: 3px;
    left: 5px;
}

a.service-card-two, a.service-card-two:hover, a.service-card-two a:hover, a.service-card-two a {
    text-decoration: none!important;
}

.service-card-two-title {
    font-size: 28px;
}




/**** 12.16.8 Service Card Eight ****/


a.service-card-eight, a.service-card-eight:hover {
    text-decoration: none!important;
    width: 100%;
}

.service-card-eight {
    background-size: cover!important;
    background-position: center!important;
    padding: 0px;
    min-height: 230px;
    display: grid;
    margin: 0 0 35px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.service-card-eight--grid {
    display: grid;
    grid-template-areas: "stack";
}

.service-card-eight--img {
    grid-area: stack;
    min-height: 100%;
    width: 100%;
    background-size: cover!important;
    background-position: center!important;
    transition: 1s;
}

.service-card-eight:hover .service-card-eight--img {
    transform: scale(1.1);
}

.service-card-eight--opacity {
    grid-area: stack;
    position: relative;
    display: grid;
    align-content: space-between!important;
    align-content: center;
    background: rgba(0,0,0,.3);
    height: 100%;
    width: 100%;
    padding: 20px 20px;
}

.service-card-eight--title {
    font-size: 24px;
    color: white;
    margin: 0 auto;
    padding: 0px 0px;
}

.service-card-eight--desc {
    color: white;
}

.service-card-eight--bottom {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: end;
}

.service-card-eight--lodzenge {
    background: var(--detail);
    padding: 5px 25px;
    border-radius: 20px;
    color: white;
    margin: 0;
}

.service-card-eight--icon {
    text-align: right;
}

.service-card-eight--icon svg {
    fill: white;
}

/**** 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: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;
    position: relative;
}

.regular-irregular-snippet:after {
    content:"";
    background: #F8F9FB;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0; 
    z-index: 1;

}

.regular-irregular-snippet * {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.regular-irregular-snippet-text-area {
    min-width: 600px;
    padding: 25px;
    grid-auto-flow: column;
    justify-content: end;
    width: 400px;
    z-index: 3;
    margin: 0 30px;
}

.regular-irregular-snippet-left, .regular-irregular-snippet-right {
    display: grid;
    align-items: center;
    grid-auto-flow: column;
    min-height: 500px;
    background: white;
    background-size: cover;
    background-position: center;
}

.regular-irregular-snippet-left {
    justify-content: end;
    box-shadow: 15px 15px 30px 0 rgb(19 24 67 / 10%);
    z-index: 2;
}

.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;
        padding-top: 60%;
    }

    .regular-irregular-snippet-text-area {
        min-width: 100vw;
        margin: 0 0px;
    }

    .regular-irregular-snippet:after {
        display: none;
    }
}

/** Custom Regular Irregular Grid **/ 

.custom-regular-irregular-grid {
    display: grid!important;
    grid-template-columns: 1fr 1fr;
}

.custom-regular-irregular-grid .vc_col-sm-6 {
    width: 100%;
}

.custom-regular-irregular-grid > .wpb_column > .vc_column-inner > .wpb_wrapper {
    max-width: 100%;
    padding: 50px 50px 5px 50px;
}

.custom-regular-irregular-grid > .wpb_column.vc_col-sm-6:nth-of-type(2) > .vc_column-inner > .wpb_wrapper {
    padding: 0px 0 5px 50px;
}

.custom-regular-irregular-grid .vc_col-sm-6:first-of-type .vc_column-inner {
    justify-content: end;
    display: grid;
    z-index: auto;
    background: white;
    margin-top: 0;
    padding-top: 0;
    box-shadow: 15px 15px 30px 0 rgb(19 24 67 / 10%);
}

.custom-regular-irregular-grid .vc_col-sm-6:first-of-type {
    justify-content: end;
    padding: 50px 50px 50px 0;
    background: url(/wp-content/uploads/2022/04/texture-demo.png);
    background-size: cover;
    background-position: center;
    background-color: #F8F9FB;
    margin: 0px;
}

.custom-regular-irregular-grid .vc_col-sm-6:nth-of-type(2) {
    position: relative;
    top: 50px;
    background: white;
    z-index: 1;
}

.custom-regular-irregular-grid .vc_column-inner::after, .custom-regular-irregular-grid  .vc_column-inner::before {
    content: none;
}

.custom-regular-irregular-grid .vc_col-has-fill {
    box-shadow: none;
}

@media screen and (min-width: 1360px) {
    /* Custom RULES GO HERE */
    .custom-regular-irregular-grid > .wpb_column > .vc_column-inner > .wpb_wrapper {
        width: 630px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1220px) {
/* INTERMEDIATE RULES GO HERE */
    .custom-regular-irregular-grid .wpb_wrapper  {
        min-width: calc( 50vw - 60px );   
        width: 100%;
    } 
}

@media screen and (max-width: 767px) { 
/* MOBILE RULES GO HERE */ 
    .custom-regular-irregular-grid {
        grid-template-columns: 1fr;
        display: flex!important;
    }
    .custom-regular-irregular-grid .wpb_wrapper {
        min-width: 100%;
        width: 100%;
        padding: 25px 25px 5px;
    }
    .custom-regular-irregular-grid .vc_col-sm-6:first-of-type .vc_column-inner {
        justify-content: start;
        display: flex;
    }  

    .custom-regular-irregular-grid > .wpb_column.vc_col-sm-6:nth-of-type(2) > .vc_column-inner > .wpb_wrapper {
        padding: 40px 20px 5px 20px;;
    }

    .custom-regular-irregular-grid > .wpb_column > .vc_column-inner > .wpb_wrapper {
        padding: 0px 20px 0px 0px;
    }

    .custom-regular-irregular-grid .vc_col-sm-6:nth-of-type(2) {
        top: 0px;
    }
}

/**** 12.19  ****/


/**** 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;
}

.product-single--faqs-accordion {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    align-items: start;
}

.accordion-header {
    margin-bottom: 0;
    font-size: 22px;
    color: #222;
    position: relative;
    cursor: pointer;
}

.accordion-item {
    border: 1px solid #cfd6da!important;
    padding: 0px 25px 0px;
    margin: 0 0 15px;
    border-radius: 5px !important;
}

.accordion-body {
    margin: 15px 0 0;
}


span.feritech--plus {
    position: absolute;
    transition: 0.5s;
    display: block;
    right: 0;
    background: var(--detail);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: white;
    fill: white;
    top: -3px;
    text-align: center;
    top: 0;
}
span.feritech--plus svg {
    position: relative;
    top: -6px;
}

.accordion-header[aria-expanded=true] svg.bi.bi-plus-lg {
    display:none;
}

.accordion-header svg.bi.bi-dash-lg {
    display:none;
    position: relative;
    top: 4px;
    left: 4px;
}

.accordion-header[aria-expanded=true] svg.bi.bi-dash-lg {
    display:block;
}



/* button.accordion {order:2;} .panel{order:1;} */
/*
button.accordion::before {
    content: "\f067";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    background: black;
    color: white;
    border-radius: 50%;
    padding: 7px 7px 7px 8px;
    margin-right: 9px;
}

button.accordion.active::before {
    content:"\f068";
}
*/
/*
button.accordion::after {
    content:" More";
    font-weight: 900; 
}

button.accordion.active::after {
    content:" Less";
    font-weight: 900; 
}*/

.single-products .panel {
    padding: 0 0px;
    display: none;
    background-color: transparent;
    overflow: hidden;
}

.single-products .accordion {
    color: #444;
    cursor: pointer;
    padding: 10px 0px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    background-color: transparent;
}

arrow {
    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 5px;
}
  
button.accordion.active .down {
    transform: rotate(-135deg) 2s;
    -webkit-transform: rotate(-135deg);
}
  
.down {
    transform: rotate(45deg) 2s;
    -webkit-transform: rotate(45deg);
    transition: all 0.8s;
}

arrow.down {
    position: relative;
    margin: 0px 10px;
    top: -3px;
}

button.accordion.active arrow.down {
    position: relative;
    top: 4px;
}


/**** 12.21 Transparent Background Layer After Background Element ****/

.fadebackground {
    position: relative!important;
    overflow: hidden;
}

.fadebackground:after {
    content: " ";
    background: red;
    background: rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.2);
    background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
    width: 100%;
    height: 100%;
    display: block!important;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    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-full-width {
    position: relative;
    min-height: 100vh;
}

.parralax {
 /*   position: relative!important;
    background-attachment: fixed!important;
    background-position: left!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    transform: translateZ(-0.1px) scale(1.2)!important;*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-attachment: fixed;
    z-index: -3;
    background-position: center!important;
    background-size: contain!important;
}

/**** 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: calc(100vh - 182px);
    position: relative;
}

.vimeo-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 0 0 var(--curved-border) var(--curved-border);
}

.vimeo-wrapper iframe {
    width: 100vw;
    height: 60.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: center; */
}

.vimeo-text-inner {
    max-width: 900px;
    margin: 0 auto;
}  


@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */

    .vimeo-text-inner {
        padding: 20px;
    }
 
}


@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .vimeo-text-inner {
        max-width: 900px;
        margin: 0 auto;
    }      
}






/**** 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;
}

div#share-buttons .twitter-share svg {
    position: relative;
    top: -2px;
}

/**** 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: 100%;
}

.square-style-grid a.image-link {
    width: 100%;
}

.pinterest-style .gallery-lightbox {
    transition: all .5s ease-in-out;
    display: block;
    /* grid-gap: 20px; */
    column-count: 3;
    padding-bottom: 10px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .pinterest-style .gallery-lightbox {
        column-count: 1;
    }
}

.pinterest-style .gallery-lightbox img {
    margin-bottom: 20px;
}

button.slick-next.slick-arrow, button.slick-prev.slick-arrow {
    width: 65px !important;
    height: 65px !important;
    background: url(/wp-content/themes/boilerplate/assets/images/slider-direction-thin-white.png) no-repeat 0 0 !important;
    top: 48% !important;
    position: absolute;
}

button.slick-next.slick-arrow {
    background-position: 100% 0 !important;
    right: 0px !important;
}

button.slick-prev.slick-arrow {
    background-position: 100% 0 !important;
    left: 0px !important;
    background-position: left!important;
    z-index: 5;
}

button.slick-arrow {
    color: transparent!important;
    border: none!important;
}

.slick-lightbox-close {
    position: absolute;
    top: 10px!important;
    right: 55px!important;
    display: block;
    height: 32px!important;
    width: 32px!important;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    background: transparent!important;
    color: transparent!important;
    padding: 0;
    border: none;
}

.slick-prev:before, .slick-next:before {
    opacity: 0!important;
}

.slick-lightbox-close:before {
    font-size: 55px!important;
    font-weight: 100!important;
    opacity: 0.55!important;
}

.slick-lightbox-close:hover:before {
    opacity: 1!important;
}

/**** 12.30 Inline CTA  ****/

.call-to-action-inline h2, .call-to-action-inline p {
    margin-bottom: 0px!important;
}

.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;
}

.call-to-action-inline-container {
    container-type: inline-size;
}

@container (max-width: 700px) {
    /* 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;
    line-height: 1.2em;
}

.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/boilerplate/assets/images/slider-direction-thin-white.png) 
    no-repeat 0 0 !important;
    font-size: 0;
}

.owl-next{background-position:100% 100% !important;}

.owl-next:hover, .owl-prev:hover {opacity:1 !important;}

.owl-nav, .owl-theme .owl-nav {
    margin-top: -30px!important;
    padding-bottom: 30px!important;
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .owl-next {
        right: -70px !important;
    }
    .owl-prev {
        left: -70px!important;
    }
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .owl-prev {
        left: -42px!important;
    }
    .owl-next {
        right: -42px!important;
    }
}

/**** 12.37 Back Arrow ****/

.backarrow {
    background: #f4f4f4;
    padding: 10px 15px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
}

.backarrow svg {
    margin-right: 6px;
}

/**** 12.38 Styled ul Tick List ****/

ul.tick-list {
    list-style: none;
}

ul.tick-list li:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f00c';
    margin: 0 10px 0 -25px;
    color: #9d804f;
    font-weight: 900;
}


/* 12.38.2 Custom PNG Tick List */

ul.custom-png-tick-list {
    list-style: none;
}

ul.custom-png-tick-list li {
    position: relative;
}

ul.custom-png-tick-list li:before {
    background: url(/wp-content/uploads/2019/06/new-google-favicon-512.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    margin: 0 10px 0 -6px;
    position: absolute;
    content: " ";
    left: -20px;
    top: 3px;
}

/* 12.38.3 Material Design Tick List */

ul.md-tick-list {
    list-style: none;
    margin-left: 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: #48A942;
}

/* 12.38.4 Boostrap Icon Tick List */

ul.ul-list-check2 {
    list-style: none;
    margin: 0 0 10px 35px;
}

ul.ul-list-check2 li {
    position: relative;
}

ul.ul-list-check2 li:before {
    content: "\F270";
    font-family: "Bootstrap-icons";
    font-weight: 200;
    font-size: 20px;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 0px;
    left: -28px;
    color: #79e25c;
}

/**** 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: 30px 0px;
}

.materialdcard .material-icon {
    position: absolute;
    top: -40px;
}

.materialdcard span.material-icons {
    background: white;
    padding: 15px;
    border-radius: 50%;
    border: 1px solid #DFDFDF;
}

.materialdcard span.material-icons {
    font-size: 50px;
    color: #0D77BD;
}

.materialdcard h3 {
    font-size: 20px;
}


/**** 12.42 Wysiwyg Partially Overlaid Image ****/

@media screen and (min-width: 768px) { 
    /* DESKTOP RULES GO HERE */    
    .list-item-with-custom-image .floating-wider {
        width: calc( 100% + 200px )!important;
        left: -200px;
    }

    .white-background {
        background: white;
        padding: 20px 20px 1px;
    }

    .list-item-with-custom-image  .col-6.floating-wider {
        -ms-flex: 0 0 calc( 50% + 200px );
        flex: 0 0 calc( 50% + 200px );
        max-width: calc( 50% + 200px );
    }

    .floating-wider-pull-right {
        width: calc( 100% + 150px );
        left: -150px;
        position: relative;
    }   
}

/**** 12.43 List item with custom image ****/

.list-item-with-custom-image {
    padding: 5px 0px;
    grid-gap: 15px;
    grid-template-columns: 50px 1fr;
    display: grid;
}

.list-item-with-custom-image .right-item {
    font-size: 20px;
}

/**** 12.44 Strapline ****/

.strapline-inner {
    float: right;
    padding: 5px 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.1 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.49.2 Team Member Card Two ****/

.team-member-card-two {
    display: grid;
    grid-template-columns: 110px 3fr;
    grid-gap: 15px;
    border: 1px solid #F4F4F4;
    padding: 15px 15px;
}

.team-member-card-two-image {
    padding-top: 100%;
    background-position: center!important;
    background-size: cover!important;
}

.team-member-card-two-name {
    font-size: 22px;
}

.team-member-card-two-name a, .team-member-card-two-text-area a, .team-member-card-two-name a:hover, .team-member-card-two-text-area a:hover {
    color: black!important;
}

.team-member-card-two-job-title {
    color: #EC6C24;
    font-size: 18px;
    font-weight: 500;
    margin: 0px 0 5px;
}

.team-member-card-two-text-area p {
    margin-bottom: 0!important;
}

.team-member-card-two-contact-details p {
    font-size: 14px;
    margin-bottom: 7px;
}

.team-member-card-two a {
    text-decoration: none!important;
}

.team-member-card-two-contact-details a {
    border-bottom: 1px solid #CD171E;
}


/**** 12.50 Floating Social Share ****/


/** Floating social share **/

.floating-social-share-outer {
    position: fixed;
    right: 20px;
    top: 40vh;
    background: white;
    padding: 0px;
    border: 1px solid black;
    z-index: 15;
}

.floating-social-share div#share-buttons a {
    background: white!important;
    margin-right: 0px;
    color: black!important;
    padding: 9px;
    border-radius: 0%;
    width: 50px;
    height: 50px;
    text-align: center;
    display: inline-block;
    color: white;
    margin-bottom: 0px;
    transition: 0.5s;
    margin: 0px;
}

.floating-social-share div#share-buttons a:hover {
    background: black!important;
    color: #E41A73!important;
}

.floating-social-share span.material-icons {
    font-size: 28px;
}

.floating-social-share div#share-buttons {
    max-width: 50px;
    margin: 0px auto;
    border-top: 1px solid black;
}

.floating-social-share button.accordion {
    padding: 10px 10px 5px;
    margin-bottom: 0px;
    background: white;
    color: black!important;
    border: 1px solid white!important;
}

.floating-social-share button.accordion:hover {
    background: black!important;
    color: #E41A73!important;
    border: 1px solid black!important;
}

.floating-social-share-outer .svg-inline--fa {
    font-size: 20px;
    margin-top: 6px;
}

@media screen and (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 */ 

.funky-card-four-box {
    position: relative;
}

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;
}

.display-block-sixteen-inner {
    display: grid;
    align-items: center;
    justify-content: end;
}

.display-block-sixteen-text {
    max-width: 500px;
    background: white;
    padding: 20px;
}

.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.18 Display Block Seventeen */

.display-block-seventeen {
    display: grid;
    align-items: center;
    justify-content: end;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 35px;
    width: calc( 100% + 60px );
    position: relative;
    left: -30px;
}

.display-block-seventeen-left {
    padding: 20px 35px 15px;
}

.display-block-seventeen-left * {
    color: white;
}

.display-block-seventeen-right {
    background-size: cover!important;
    height: 100%;
    background-position: center!important;
    position: relative;
    overflow: hidden;
}

.display-block-seventeen-left-slant {
    width: 500px;
    height: 100%;
    position: absolute;
    top: 0px;
    transform: skewx(-18deg);
    transform-origin: bottom right;
    left: -500px;
}

.display-block-seventeen-right-slant {
    width: 500px;
    height: 100%;
    position: absolute;
    top: 0px;
    transform: skewx(-18deg);
    transform-origin: top left;
    right: -500px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-seventeen {  
        grid-template-columns: 1fr;
        width: calc( 100% + 40px );
        left: -20px;
    }

    .display-block-seventeen-left {
        padding: 10px 20px 5px;
        order: 2;
    }

    .display-block-seventeen-right {
        padding-top: 60%;
    }

    .display-block-seventeen-right-slant, .display-block-seventeen-left-slant {
        display: none;
    }
}

/* 12.53.19 Display Block Eighteen */

.display-block-eighteen {
    display: grid;
    align-items: center;
    justify-content: end;
    grid-template-columns: 1fr;
    margin-bottom: 35px;
    width: calc( 100% + 60px );
    position: relative;
    left: -30px;
}

.display-block-eighteen-upsell {
    background: #FEE942;
    z-index: 1;
    max-width: 200px;
    position: absolute;
    right: 0;
    top: 50px;
    padding: 15px 15px 15px 5px;
}

.display-block-eighteen-upsell * {
    margin-bottom: 0;
    line-height: 1.2em;
}

.display-block-eighteen-upsell:after  {
    background: inherit;
    bottom: 0;
    content: "";
    height: 100%;
    position: absolute;
    right: -1.25rem;
    top: 0;
    -webkit-transform: skew(-18deg);
    transform: skew(-18deg);
    width: 3.75rem;
    z-index: -1;
    left: -1.25rem; 
     -webkit-transform: skew(18deg); 
     transform: skew(18deg);
}

.display-block-eighteen-bottom {
    background: #071D49;
    margin: -40px 35px 0;
    width: fit-content;
    padding: 20px 25px;
    z-index: 1;
    min-width: 460px;
}

.display-block-eighteen-title {
    color: white;
    margin: 0;
    padding: 0;
}

.display-block-eighteen-title:after {
    content: none;
}

.display-block-eighteen-image {
    background-size: cover!important;
    height: 0;
    min-height: 0px;
    background-position: center!important;
    position: relative;
    overflow: hidden;
    padding-top: 30%;
}

.display-block-eighteen-left-slant {
    width: 500px;
    height: 100%;
    position: absolute;
    top: 0px;
    transform: skewx(13deg);
    transform-origin: top right;
    left: -500px;
    background-color: #00DEB2;
}

.display-block-eighteen-right-slant {
    width: 500px;
    height: 100%;
    position: absolute;
    top: 0px;
    transform: skewx(13deg);
    transform-origin: bottom left;
    right: -500px;
    background-color: #00DEB2;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-eighteen {  
        width: calc( 100% + 40px );
        left: -20px;
    }

    .display-block-eighteen-bottom {
        margin: 0px 0px 0;
        padding: 15px 20px;
        min-width: 100%;
    }

    .display-block-eighteen-upsell {
        left: 0;
        top: 0;
        padding: 15px 0px 15px 15px;
        max-width: 150px;
    }

    .display-block-eighteen-upsell * {
        font-size: 14px;
    }

    .display-block-eighteen-upsell:after {
        left: initial;
        right: -1.25rem;
    }
}


/* 12.53.20 Display Block Nineteen */

.display-block-nineteen {
    display: grid;
    background-repeat: no-repeat, no-repeat;
    background-size: 45% 100%;
    background-position: left top, right top;
    min-height: 100vh;
}

.display-block-nineteen-inner {
    display: grid;
    grid-template-columns: 3fr 3fr 2fr;
    grid-gap: 40px;
    max-width: 1160px;
    margin: 0 auto;
    align-items: center;
    padding: 80px 0;
}


@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */

    .display-block-nineteen {
        background-size: 65% auto;
    }
    .display-block-nineteen-inner {
        grid-template-columns: 3fr 2fr 0fr;
        grid-gap: 0px;
        padding: 0px 0;
        align-items: start;
    }

    .display-block-nineteen-text {
        padding: 20px 40px 20px 20px;
        background: white;
    }

    .display-block-nineteen-foreground {
        position: relative;
        left: -20px;
        margin-top: 240px;
    }

}

/* 12.53.21 Display Block Twenty */

.display-block-twenty {
    display: grid;
    grid-template-columns: 2fr 3fr 1fr;
    min-height: 100vh;
}

.display-block-twenty-image {
    background-size: cover!important;
    background-position: center!important;
    height: 100vh;
    position: sticky;
    top: 0;
}

.display-block-twenty-content {
    padding: 50px;
}


@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-twenty {
        grid-template-columns: 2fr 3fr;
    }

    .display-block-twenty-content {
        padding: 20px;
    }

}


/* 12.53.18 Display Block Twenty One */

.display-block-twenty-one {
    display: grid;
    align-items: center;
    justify-content: end;
    grid-template-columns: 1fr 2fr 2fr;
    margin-bottom: 35px;
    position: relative;
    left: -7%;
    transform: skewX(-18deg);
    background: black;
}

.display-block-twenty-one-left {
    min-height: calc( 100vh - 300px );
    position: relative;
    display: grid;
    align-content: end;
}

.display-block-twenty-one-text {
    background: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc( 100vw - 600px );
    z-index: 1;
    padding: 10px 10px 0;
    transform: skewX(18deg);
}

.display-block-twenty-one-text:after {
    content:" ";
    width: 500px;
    height: 100%;
    position: absolute;
    top: 0px;
    transform: skewx(-18deg);
    transform-origin: bottom right;
    right: -30px;
    background: #000;
    z-index: -1;
}

.display-block-twenty-one-text h1 {
    font-weight: 900;
    font-family: roman;
    color: transparent;
    font-size: 6vw;
    position: relative;
    bottom: 0px;
    margin-bottom: 0;
    line-height: 0.7em;
    -webkit-text-stroke: 1px #FFD503;
    z-index: 0;
    text-align: right;
}

.display-block-twenty-one-middle, .display-block-twenty-one-right {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.display-block-twenty-one-middle-unskew {
    height: 100%;
    background-position: center!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    transform: skewX(18deg);
    width: 130%;
    left: -10%;
    position: relative;
}

.display-block-twenty-one-right-unskew {
    height: 100%;
    background-position: center!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    transform: skewX(18deg);
    width: 130%;
    left: -10%;
    position: relative;
}

.display-block-twenty-one-left * {
    color: white;
}

.display-block-twenty-one-right {
    background-size: cover!important;
    background-position: center!important;
    position: relative;
}

.display-block-twenty-one-left-slant {
    width: 500px;
    height: 100%;
    position: absolute;
    top: 0px;
    transform: skewx(-18deg);
    transform-origin: bottom right;
    left: -500px;
}

.display-block-twenty-one-right-slant {
    width: 500px;
    height: 100%;
    position: absolute;
    top: 0px;
    transform: skewx(-18deg);
    transform-origin: top left;
    right: -500px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-twenty-one-text {
        width: 100vw;
    }

    .display-block-twenty-one {
        left: -20%;
    }

    .display-block-twenty-one-right-slant, .display-block-twenty-one-left-slant {
        display: none;
    }

    .display-block-twenty-one-right-unskew, .display-block-twenty-one-middle-unskew {
        width: 100vw;
        left: -100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1500px) {
    /* INTERMEDIATE RULES GO HERE */
    .display-block-twenty-one-right-unskew, .display-block-twenty-one-middle-unskew {
        width: 100vw;
        left: -100%;
    }

    .display-block-twenty-one-text {
        width: calc( 100vw - 220px );
    }

    .display-block-twenty-one {
        left: -11%;
    }
}


/* 12.53.22 Display Block Twenty Two */

.display-block-twenty-two {
    display: grid;
    grid-template-columns: 150px 1fr;
}

.display-block-twenty-two-line {
    background: #c0392b;
    width: 4px;
    height: 100%;
    position: relative;
    left: 100px;
}

.display-block-twenty-two-line:after {
    background: white;
    opacity: 0;
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    top: 136px;
    left: -10px;
    content: " ";
    border: #c0392b 4px solid;
    transition: 2s;
}

.display-block-twenty-two-line.fire:after {
    opacity: 1;
}

.display-block-twenty-two-year-div {
    margin-top: -50px;
}

span.display-block-twenty-two-year {
    font-size: 80px;
    position: relative;
    bottom: -85px;
    color: rgba(0,0,0,0.1);
    font-weight: 700;
    z-index: 1;
    font-size: 120px;
    color: rgba(0,0,0,0.1);
    font-family: serif;
    letter-spacing: 3px;
}

.display-block-twenty-two-title-div {
    z-index: 2;
    position: relative;
}

.display-block-twenty-two-content {
    border-left: 1px solid black;
    padding-left: 20px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-twenty-two {
        grid-template-columns: 50px 1fr;
    }

    .display-block-twenty-two-line {
        left: 10px;
    }

    .display-block-twenty-two-right {
        max-width: calc( 100vw - 40px - 50px - 0px );
    }

    span.display-block-twenty-two-year {
        font-size: 80px;
        bottom: -61px;
    }
}


/* 12.53.23 Display Block Twenty Three */

.display-block-twenty-three {
    background: linear-gradient(to right, #ffffff 50%, #F8F8F7 50%);
}

.display-block-twenty-three:after {
    content: "";
    position: absolute;
    bottom: 0rem;
    left: 0;
    right: 0;
    height: 4rem;
    width: 2px;
    background-color: #ffa800;
    z-index: 3;
    margin: 0 auto;
}

.display-block-twenty-three-inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 35px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 100px 20px;
}

img.display-block-twenty-three-logo {
    display: block;
    width: calc( 140% );
    max-width: calc( 140% );
    z-index: 2;
    position: relative;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */

    .display-block-twenty-three-inner {
        grid-template-columns: 1fr;
        padding: 20px 20px;
    }

    img.display-block-twenty-three-logo {
        width: calc( 100% );
        max-width: calc( 100% );
    }

}

/* 12.53.24 Display Block Twenty Four */

.display-block-twenty-four {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.display-block-twenty-four:before {
    content: "";
    position: absolute;
    top: 0rem;
    left: 0;
    right: 0;
    height: 8rem;
    width: 2px;
    background-color: #ffa800;
    z-index: 3;
    margin: 0 auto;
}

.display-block-twenty-four:after {
    content: "";
    position: absolute;
    bottom: 0rem;
    left: 0;
    right: 0;
    height: 4rem;
    width: 2px;
    background-color: #ffa800;
    z-index: 3;
    margin: 0 auto;
}

.display-block-twenty-four-text {
    background: #F8F8F7;
    padding: 80px 50px 50px 150px;
    position: relative;
    left: -130px;
    width: calc( 100% + 150px );
    min-height: 60%;
}

.display-block-twenty-four-image-div {
    padding-top: 60%;
    background-size: cover!important;
    margin-top: 50px;
    z-index: 2;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-twenty-four {
        grid-template-columns: 1fr;
    }

    .display-block-twenty-four-text {
        padding: 20px 20px 1px 20px;
        left: 0px;
        width: calc( 100% - 50px );
        min-height: 60%;
        margin-left: 50px;
        z-index: 3;
    }

    .display-block-twenty-four-image-div {
        margin-right: 0px;
        order: 2;
        margin-top: 0;
    }
}

/* 12.53.24 Display Block Twenty Five */

.display-block-twenty-five {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 50px 0;
}

.display-block-twenty-five-text {
    background: #F8F8F7;
    padding: 80px 180px 50px 50px;
    position: relative;
    right: 0px;
    width: calc( 100% + 150px );
    min-height: 60%;
}

.display-block-twenty-five:before {
    content: "";
    position: absolute;
    top: 0rem;
    left: 0;
    right: 0;
    height: 8rem;
    width: 2px;
    background-color: #ffa800;
    z-index: 3;
    margin: 0 auto;
}

.display-block-twenty-five:after {
    content: "";
    position: absolute;
    bottom: 0rem;
    left: 0;
    right: 0;
    height: 4rem;
    width: 2px;
    background-color: #ffa800;
    z-index: 3;
    margin: 0 auto;
}

.display-block-twenty-five-image-div {
    padding-top: 60%;
    background-size: cover!important;
    margin-top: 50px;
    z-index: 2;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-twenty-five {
        grid-template-columns: 1fr;
    }

    .display-block-twenty-five-text {
        padding: 20px 20px 1px 20px;
        right: 0px;
        width: calc( 100% - 50px );
        min-height: 60%;
        margin-right: 50px;
        z-index: 3;
    }

    .display-block-twenty-five-image-div {
        margin-left: 0px;
        order: 2;
        margin-top: 0;
    }
}


/* 12.53.26 Display Block Twenty Six */

.display-block-twenty-six {
    background: linear-gradient(to right, #F0ECE9 55%, #fff 50%);
    padding: 120px 0;
}

.display-block-twenty-six-inner {
    position: relative;
    max-width: 1370px;
    margin: 0px auto;
    padding: 0 35px 0 100px;
}

.display-block-twenty-six-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    grid-gap: 100px
}

.display-block-twenty-six-sidetext-div {
    text-transform: uppercase;
    color: black;
    display: inline-block;
    transform: rotate(90deg);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 110px;
    text-align: right;
    letter-spacing: inherit;
    font-size: 12px;
}

span.display-block-twenty-six-sidetext {
    transform: rotate(-180deg);
    position: relative;
    display: inline-block;
}

.display-block-twenty-six-sidetext-div:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 121px;
    bottom: -98px;
    display: block;
    border-bottom: 1px dashed #979797;
    width: 53vh;
    height: 12px;
}

.display-block-twenty-six-image-div {
    background-size: cover!important;
    right: -50px;
    position: relative;
    transition: 3s;
    opacity: 0.1;
}

.display-block-twenty-six.fire .display-block-twenty-six-image-div {
    background-size: cover!important;
    right: 0;
    opacity: 1;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-twenty-six-grid {
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }

    .display-block-twenty-six {
        background: linear-gradient(to bottom, #F0ECE9 80%, #fff 50%);
        padding: 70px 0;
    }

    .display-block-twenty-six-inner {
        padding: 0 20px 0 60px;
    }

    .display-block-twenty-six-sidetext-div {
        left: -25px;
    }
}


/* 12.53.27 Display Block Twenty Seven */


.display-block-twenty-seven {
    padding: 120px 0;
}

.display-block-twenty-seven-inner {
    position: relative;
    max-width: 1370px;
    margin: 0px auto;
    padding: 0 100px 0 100px;
}

.display-block-twenty-seven-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    grid-gap: 100px
}

.display-block-twenty-seven-image-div {
    position: relative;
    top: -25px;
}

/*.display-block-twenty-seven-image-div {
    background-size: cover!important;
    right: -50px;
    position: relative;
    transition: 3s;
    opacity: 0.1;
}*/

.display-block-twenty-seven-image-div:before {
    content: "";
    background: #F0ECE9;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: -150px;
    bottom: -65px;
}

img.display-block-twenty-seven-image {
    z-index: 3;
    position: relative;
    transition: 3s;
    opacity: 0.1;
    left: -40px;
}

.display-block-twenty-seven.fire  img.display-block-twenty-seven-image {
    left: 0;
    opacity: 1;
}

.display-block-twenty-seven-text:before {
    content: "";
    display: block;
    width: 50px;
    height: 1px;
    background: #979797;
    position: absolute;
    left: -65px;
    top: 13px;
    z-index: 41;
}

.display-block-twenty-seven-text {
    margin-left: 65px;
    position: relative;
}

.display-block-twenty-seven-sidetext-div {
    text-transform: uppercase;
    color: black;
    display: inline-block;
    transform: rotate(90deg);
    position: absolute;
    top: 0px;
    right: 0px;
    width: 110px;
    text-align: right;
    letter-spacing: inherit;
    font-size: 12px;
    z-index: 2;
}

.display-block-twenty-seven-sidetext-div:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 121px;
    bottom: -98px;
    display: block;
    border-bottom: 1px dashed #979797;
    width: 53vh;
    height: 9px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-twenty-seven-grid {
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }

    .display-block-twenty-seven {
        padding: 70px 0;
    }

    .display-block-twenty-seven-inner {
        padding: 0 20px 0 60px;
    }

    .display-block-twenty-seven-sidetext-div {
        left: -25px;
    }
}



/* 12.53.28 Display Block Twenty Eight */


.display-block-twenty-eight {
    padding: 120px 0;
}

.display-block-twenty-eight-inner {
    position: relative;
    max-width: 1370px;
    margin: 0px auto;
    padding: 0 100px 0 100px;
}

.display-block-twenty-eight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    grid-gap: 100px
}

.display-block-twenty-eight-image-div {
    position: relative;
    top: -25px;
}

.display-block-twenty-eight-image-div:before {
    content: "";
    background: #F0ECE9;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    right: -150px;
    bottom: -65px;
}

img.display-block-twenty-eight-image {
    z-index: 3;
    position: relative;
    transition: 3s;
    opacity: 0.1;
    right: -35px;
}

.display-block-twenty-eight.fire img.display-block-twenty-eight-image {
    opacity: 1;
    right: 0;
}

.display-block-twenty-eight-sidetext-div {
    text-transform: uppercase;
    color: black;
    display: inline-block;
    transform: rotate(90deg);
    position: absolute;
    top: 0px;
    right: 0px;
    width: 110px;
    text-align: right;
    letter-spacing: inherit;
    font-size: 12px;
}

.display-block-twenty-eight-text:before {
    content: "";
    display: block;
    width: 50px;
    height: 1px;
    background: #979797;
    position: absolute;
    left: -65px;
    top: 13px;
    z-index: 41;
}
.display-block-twenty-eight-text {
    margin-left: 65px;
    position: relative;
}

.display-block-twenty-eight-sidetext-div:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 121px;
    bottom: -98px;
    display: block;
    border-bottom: 1px dashed #979797;
    width: 53vh;
    height: 12px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-twenty-eight-grid {
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }

    .display-block-twenty-eight {
        padding: 70px 0;
    }

    .display-block-twenty-eight-inner {
        padding: 0 20px 0 20px;
    }

    .display-block-twenty-eight-sidetext-div {
        left: -25px;
    }
}

/* 12.53.29 Display Block Twenty Nine */


.display-block-twenty-nine {
    padding: 0px 0;
    margin: 120px 0;
    background: linear-gradient(to right, #F0ECE9 30%, #fff 30%);
    transition: 3s;
}

.display-block-twenty-nine-inner {
    position: relative;
    max-width: 1370px;
    margin: 0px auto;
    padding: 0 100px 0 100px;
}

.display-block-twenty-nine-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: center;
    grid-gap: 40px
}

.display-block-twenty-nine-image-div {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 125%;
    left: -35%;
    transition: 3s;
    opacity: 0.1;
}

.display-block-twenty-nine.fire .display-block-twenty-nine-image-div {
    left: -25%;
    opacity: 1;
}

.display-block-twenty-nine-image-one {
    padding-top: 85%;
    left: 40%;
    position: relative;
    top: -25%;
    background-position: center!important;
    background-size: cover!important;
}

.display-block-twenty-nine-image-two {
    padding-top: 85%;
    position: relative;
    top: 25%;
    left: 0%;
    z-index: 2;
    background-position: center!important;
    background-size: cover!important;
}

.display-block-twenty-nine-text:before {
    content: "";
    display: block;
    width: 50px;
    height: 1px;
    background: #E8E9EA;
    position: absolute;
    left: -65px;
    top: 13px;
    z-index: 41;
}

.display-block-twenty-nine-text {
    margin-left: 65px;
    position: relative;
}

.display-block-twenty-nine-sidetext-div {
    text-transform: uppercase;
    color: black;
    display: inline-block;
    transform: rotate(90deg);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 110px;
    text-align: right;
    letter-spacing: inherit;
    font-size: 12px;
    z-index: 2;
}

span.display-block-twenty-nine-sidetext {
    transform: rotate(-180deg);
    position: relative;
    display: inline-block;
}

.display-block-twenty-nine-sidetext-div:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 121px;
    bottom: -98px;
    display: block;
    border-bottom: 1px dashed #979797;
    width: 53vh;
    height: 12px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */

    .display-block-twenty-nine {
        padding: 0px 0;
        margin: 85px 0 20px;
        background: linear-gradient(to bottom, #F0ECE9 30%, #fff 30%);
    }

    .display-block-twenty-nine-grid {
        grid-template-columns: 1fr;
        grid-gap: 80px;
    }

    .display-block-twenty-nine-image-one {
        left: 40%;   
    }

    .display-block-twenty-nine-inner {
        padding: 0 20px 0 60px;
    }

    .display-block-twenty-nine-sidetext-div {
        left: -25px;
    }
}

/* 12.53.30 Display Block Thirty */

.display-block-thirty {
    background-size: cover!important;
    background-position: center!important;
    padding: 35px 0;
    position: relative;
}

.display-block-thirty-parralax {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-attachment: fixed!important;
    z-index: 0;
    background-position: center!important;
    background-size: cover!important;
    background-repeat: no-repeat!important
}

.display-block-thirty-inner {
    display: grid;
    align-items: center;
    justify-content: end;
}

.display-block-thirty-text {
    max-width: 500px;
    background: white;
    padding: 20px;
    z-index: 1;
}

.display-block-thirty a.button {
    width: 100%;
    text-align: center;
}

@media (min-width: 768px) {
/* DESKTOP RULES GO HERE */
    .display-block-thirty-mobile-image {
        display: none;
    }
}

@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
    .display-block-thirty {
        padding: 0!important;
    }

    .display-block-thirty-text {
        max-width: 100%;
    }

    .display-block-thirty-inner {
        margin: 0!important;
        padding: 0!important;
    }
}


/* 12.53.31 Display Block Thirty One */

.display-block-thirty-one {
    padding: 0px 0 30px;
    position: relative;
    background: linear-gradient(to bottom, #ffffff 90%, #F8F8F7 90%);
}

.display-block-thirty-one-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
    grid-gap: 50px;
    align-items: center;
    padding: 0 20px;
}

.display-block-thirty-one-left {
    position: relative;
    margin-top: 50px;
}

.display-block-thirty-one-foreground-text, .display-block-thirty-one-right {
    z-index: 1;
    position: relative;
}

span.display-block-thirty-one-background-text {
    font-size: 800%;
    position: absolute;
    top: -28px;
    width: 170%;
    max-width: 170%!important;
    margin-bottom: 0;
    line-height: 0.7em;
    z-index: 0;
    left: -50px;
    font-family: 'Proxima nova',sans-serif;
    font-weight: 800;
    color: #fafafa;
}

.display-block-thirty-one-right-top {
    max-width: 50%;
    margin: 0 auto 20px;
}

.display-block-thirty-one-right-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-thirty-one {
        padding: 70px 0 35px;
        min-height: 0px;
    }

    .display-block-thirty-one-inner {
        grid-template-columns: minmax(0px, 1fr);
    }

    span.display-block-thirty-one-background-text {
        font-size: 600%;
        left: 0;
    }
}

@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .display-block-thirty-one-image-left--true .display-block-thirty-one-left {
        order: 2;
    }
}

/* 12.53.32 Display Block Thirty Two */

.display-block-thirty-two {
    padding: 0px 0 30px;
    position: relative;
    background: linear-gradient(to bottom, #ffffff 90%, #F8F8F7 90%);
    font-size: 18px;
    color: #222;
}

.display-block-thirty-two-inner {
    margin: 0 auto;
    display: grid;
    grid-template-columns: calc( 50vw - 628px ) minmax(0px,3fr) minmax(0px, 2fr);
    grid-gap: 50px;
    padding: 0 0px;
}

.display-block-thirty-two-left {
    position: relative;
    margin-top: 120px;
}

.display-block-thirty-two-foreground-text {
    z-index: 1;
    position: relative;
   /* max-width: 500px;*/
    margin: 0 auto;
    padding: 0 20px;
}

span.display-block-thirty-two-background-text {
    font-size: 800%;
    position: absolute;
    top: -28px;
    width: 170%;
    max-width: 170%!important;
    margin-bottom: 0;
    line-height: 0.7em;
    z-index: 0;
    left: -50px;
    font-family: 'Proxima nova',sans-serif;
    font-weight: 800;
    color: #fafafa;
}

.display-block-thirty-two-right {
    display: grid;
    grid-template-columns: minmax(0px, 2fr) minmax(0px, 1fr);
    grid-gap: 20px;
    align-items: start;
    z-index: 1;
}

.display-block-thirty-two-right-left {
    display: grid;
    grid-template-columns: minmax(0px, 1fr);
    grid-gap: 20px;
    margin-top: 70px;
}

.display-block-thirty-two-right-right {
    display: grid;
    grid-template-columns: minmax(0px, 1fr);
    grid-gap: 20px;
}

.display-block-thirty-two-image {
    background-size: cover!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
    padding-top: 50%;
    height: 0;
}

.display-block-thirty-two-image-one {
    padding-top: 60%;
    margin-left: 40%;
}

.display-block-thirty-two-image-two {
    padding-top: 100%;
    margin-left: 0%;
}

.display-block-thirty-two-image-three {
    padding-top: 200%;
}

.display-block-thirty-two-image-four {
    padding-top: 100%;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-thirty-two {
        padding: 70px 0 35px;
        min-height: 0px;
    }

    .display-block-thirty-two-inner {
        grid-template-columns: minmax(0px, 1fr)!important;
    }

    .display-block-thirty-two-left {
        margin-top: 0px;
    }


    span.display-block-thirty-two-background-text {
        font-size: 600%;
        left: 0;
    }

    .display-block-thirty-two-right {
        padding-left: 20px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1300px) {
/* INTERMEDIATE RULES GO HERE */
    .display-block-thirty-two-inset {
        display: none;
    }

    .display-block-thirty-two-inner {
        grid-template-columns: minmax(0px,1fr) minmax(0px, 1fr);
    }
}

@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .display-block-thirty-two-image-left--true .display-block-thirty-two-left {
        order: 2;
    }

    .display-block-thirty-two-image-left--true .display-block-thirty-two-inset {
        order: 3;
    }

    .display-block-thirty-two-image-left--true .display-block-thirty-two-inner {
        grid-template-columns: minmax(0px,2fr) minmax(0px, 3fr) calc( 50vw - 628px ) ;
    }

    .display-block-thirty-two-image-left--true .display-block-thirty-two-right-left {
        order: 2;
    }

    .display-block-thirty-two-image-left--true .display-block-thirty-two-right {
        grid-template-columns: minmax(0px, 1fr) minmax(0px, 2fr);
    }

    .display-block-thirty-two-image-left--true .display-block-thirty-two-image-one {
        margin-left: 0%;
        margin-right: 40%;
    }
}

/* 12.53.33 Display Block Thirty Three */

.display-block-thirty-three {
    padding: 0px 0 30px;
    position: relative;
    background: linear-gradient(to bottom, #ffffff 90%, #F8F8F7 90%);
}

.display-block-thirty-three-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
    grid-gap: 40px;
    align-items: center;
    padding: 0 20px;
}

.display-block-thirty-three-left {
    position: relative;
    margin-top: 50px;
    display: grid;
    grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
    grid-gap: 20px;
    z-index: 2;
}

.display-block-thirty-three-left-right {
    display: grid;
    grid-template-columns: minmax(0px, 1fr);
    grid-gap: 20px;
}

.display-block-thirty-three-foreground-text, .display-block-thirty-three-right {
    z-index: 1;
    position: relative;
}

span.display-block-thirty-three-background-text {
    font-size: 800%;
    position: absolute;
    top: -28px;
    width: 170%;
    max-width: 170%!important;
    margin-bottom: 0;
    line-height: 0.7em;
    z-index: 0;
    left: -50px;
    font-family: 'Proxima nova',sans-serif;
    font-weight: 800;
    color: #fafafa;
}

.display-block-thirty-three-right-left {
    max-width: 50%;
    margin: 0 auto 20px;
}

.display-block-thirty-three-right-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-thirty-three {
        padding: 70px 0 35px;
        min-height: 0px;
    }

    .display-block-thirty-three-inner {
        grid-template-columns: minmax(0px, 1fr);
    }

    .display-block-thirty-three-left {
        order: 2;
        margin-top: 0px;
    }

    span.display-block-thirty-three-background-text {
        font-size: 600%;
        left: 0;
    }
}

@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .display-block-thirty-three-image-right--true .display-block-thirty-three-left, .display-block-thirty-three-image-right--true .display-block-thirty-three-left-left {
        order: 2;
    } 
}

/* 12.53.34 Display Block Thirty Four */

.display-block-thirty-four {
    padding: 0px 0 30px;
    position: relative;
    background: linear-gradient(to bottom, #ffffff 90%, #F8F8F7 90%);
}

.display-block-thirty-four-inner {
    margin: 0 auto;
    display: grid;
    grid-template-columns: calc( 50vw - 660px ) minmax(0px,1fr) minmax(0px, 1fr);
    grid-gap: 50px;
    padding: 0 0px;
}

.display-block-thirty-four-left {
    position: relative;
    margin-top: 50px;
}

.display-block-thirty-four-foreground-text {
    z-index: 1;
    position: relative;
    margin: 0 auto;
    padding: 0 20px;
}

span.display-block-thirty-four-background-text {
    font-size: 800%;
    position: absolute;
    top: -28px;
    width: 170%;
    max-width: 170%!important;
    margin-bottom: 0;
    line-height: 0.7em;
    z-index: 0;
    left: -50px;
    font-family: 'Proxima nova',sans-serif;
    font-weight: 800;
    color: #fafafa;
}

.display-block-thirty-four-right {
    display: grid;
    grid-template-columns: minmax(0px, 1fr);
    grid-gap: 20px;
    align-items: start;
    align-self: start;
    z-index: 1;
}

.display-block-thirty-four-right-top {
    display: grid;
    grid-template-columns: minmax(0px, 3fr) minmax(0px, 1fr);
    grid-gap: 20px;
    align-items: end;
}

.display-block-thirty-four-right-bottom {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) minmax(0px, 2fr);
    grid-gap: 20px;
}

.display-block-thirty-four-image {
    background-size: cover!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
    padding-top: 50%;
    height: 0;
}

.display-block-thirty-four-image-one {
    padding-top: 34%;
    margin-left: 0%;
}

.display-block-thirty-four-image-two {
    padding-top: 150%;
    margin-left: 0%;
}

.display-block-thirty-four-image-three {
    padding-top: 34%;
}

.display-block-thirty-four-image-four {
    padding-top: 34%;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-block-thirty-four {
        padding: 70px 0 35px;
        min-height: 0px;
    }

    .display-block-thirty-four-inner {
        grid-template-columns: minmax(0px, 1fr)!important;
    }

    .display-block-thirty-four-left {
        margin-top: 0px;
    }

    span.display-block-thirty-four-background-text {
        font-size: 600%;
        left: 0;
    }

    .display-block-thirty-four-right {
        padding-left: 20px;
    }

    .display-block-thirty-four-right-top {
        margin-top: 0px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1300px) {
/* INTERMEDIATE RULES GO HERE */
    .display-block-thirty-four-inset {
        display: none;
    }

    .display-block-thirty-four-inner {
        grid-template-columns: minmax(0px,1fr) minmax(0px, 1fr);
    }
}

@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .display-block-thirty-four-image-left--true .display-block-thirty-four-left, .display-block-thirty-four-image-left--true .display-block-thirty-four-image.display-block-thirty-four-image-one, .display-block-thirty-four-image-left--true  .display-block-thirty-four-right-inset {
        order: 2;
    }

    .display-block-thirty-four-image-left--true .display-block-thirty-four-inset {
        order: 3;
    }

    .display-block-thirty-four-image-left--true .display-block-thirty-four-inner {
        grid-template-columns: minmax(0px,1fr) minmax(0px, 1fr) calc( 50vw - 660px );
    }

    .display-block-thirty-four-image-left--true  .display-block-thirty-four-right-top {
        grid-template-columns: minmax(0px, 1fr) minmax(0px,3fr);
    }

    .display-block-thirty-four-image-left--true  .display-block-thirty-four-right-bottom {
        grid-template-columns: minmax(0px, 2fr) minmax(0px, 1fr);
    }
}

/* 12.53.35 Display Block Thirty Five */
/* 12.53.36 Display Block Thirty Six */
/* 12.53.37 Display Block Thirty Seven */
/* 12.53.38 Display Block Thirty Eight */
/* 12.53.39 Display Block Thirty Nine */



.display-block-forty-nine {
    margin: 0 auto 135px;
    padding: 0px 0px 0;
    position: relative;
    align-items: center;
}

label.display-block-forty-nine--label {
    color: #909b92;
    cursor: pointer;
    position: relative;
    transition: 1s; 
}

.display-block-forty-nine .flexslider li {
    padding-top: 66%;
    min-height: 0!important;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */

    .display-block-forty-nine {
        margin: 0 auto 50px
    }

    .display-block-forty-nine--item {
        display: grid;
        grid-template-rows: 1fr;
    }

    label.display-block-forty-nine--label.display-block-forty-nine--label-one {
        order: 2;
    }

    .display-block-forty-nine--item {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        margin: 0 0 35px;
    }

    .display-block-forty-nine--input {
        display: none;
    }

    label.display-block-forty-nine--label {
        order: 2;
        text-align: center;
        color: #826d5c;
        margin: 10px 0 0;
        font-size: 20px;
    }
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */

    .display-block-forty-nine {
        display: grid;
        grid-template-columns: minmax(0,3fr) minmax(0,2fr);
        grid-template-rows: auto 1fr auto auto auto auto 2fr;
        grid-gap: 0 90px;
        grid-template-areas:
        "fortyninepane fortyninetitletitle"
        "fortyninepane ."
        "fortyninepane fortyninetitleone"
        "fortyninepane fortyninetitletwo"
        "fortyninepane fortyninetitlethree"
        "fortyninepane fortyninetitlefour"
        "fortyninepane .";
    }

    .display-block-forty-nine--pane {
        grid-area: fortyninepane; 
        background: white;
        height: 100%;
        display: grid;
        align-items: center;
        isolation: isolate;
    }

    .display-block-forty-nine--title {
        grid-area: fortyninetitletitle;
        margin: 20px 0 0;   
    }

    .display-block-forty-nine--label-one {
        grid-area: fortyninetitleone;   
    }

    .display-block-forty-nine--label-two {
        grid-area: fortyninetitletwo;   
    }

    .display-block-forty-nine--label-three {
        grid-area: fortyninetitlethree;   
    }

    .display-block-forty-nine--label-four {
        grid-area: fortyninetitlefour;   
    }

    .display-block-forty-nine--input {
        position: absolute;
        left: -4000px;
    }

    .display-block-forty-nine--item {
        display: contents;
    }

    input:checked + label.display-block-forty-nine--label {
        color: #826d5c;
        left: -40px;
    }

    label.display-block-forty-nine--label:hover {
        color: #826d5c;
        left: -20px;
    }

    input:checked + label.display-block-forty-nine--label + .display-block-forty-nine--pane {
        z-index: 5;
        opacity: 1;
    }

    label.display-block-forty-nine--label:hover + .display-block-forty-nine--pane {
        z-index: 6;
        opacity: 1;
    }

    label.display-block-forty-nine--label {
        left: 0px;
        padding: 5px 0;
        font-size: 24px;
        margin: 0;
    }

    label.display-block-forty-nine--label:before {
        content: "";
        background: transparent;
        transition: 1s;
        width: 100px;
        height: 2px;
        display: block;
        position: absolute;
        left: -115px;
        top: 23px;
        z-index: 8;
    }

    input:checked + label.display-block-forty-nine--label:before {
        background: #62716e;
    }

    label.display-block-forty-nine--label:hover:before {
        background: #62716e;
    }
}




/* 12.53.40 Display Block Forty */
/* 12.53.41 Display Block Forty One */
/* 12.53.42 Display Block Forty Two */


/* 12.53.43 Display Block Forty Three */

.display-block-forty-three {
	background-position: center;
	background-size: cover;
/*	margin: 0 60px;*/
}

@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */   
    .display-block-forty-three {
        margin: 0px 60px 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 1450px) {
    /* INTERMEDIATE RULES GO HERE */
    .display-block-forty-three {
        margin: 0px 0px 0!important;
    }
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
   /* .display-block-forty-three {
        padding: 0px 0px 0!important;
    }*/
}

.display-block-forty-three--background {
	background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
	background:rgba(0,0,0,0.1);
    width: 100%;
	height: 100%;
	min-height: 300px;
	display: grid;
	align-content: end;
}

.display-block-forty-three--text-width {
    width: 1330px;
    margin: 0 auto;
}

span.display-block-forty-three--text-title {
    font-size: 70px;
	color: white;
	text-align: left;
	text-transform: uppercase;
	top: 37px;
    position: relative;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    span.display-block-forty-three--text-title {
        font-size: 30px;
        top: 14px;
    }
}


/* 12.53.44 Display Block Forty Four */
/* 12.53.45 Display Block Forty Five */



/**** 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 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-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.54.7 Contact Section Seven ****/

/**** 12.54.8 Contact Section Eight ****/


.contact-section-eight {
}

.contact-section-eight--top {
    padding: 0px 0 120px;
}

.contact-section-eight--top-text {
    max-width: 820px;
}



.contact-section-eight--middle-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-gap: 40px;
  
}

.acf-page-builder--contact--map {
    margin: 0 0 40px;
}

.acf-map {
    margin:0 0 40px;
    border-radius: 20px;
}

@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */

    .contact-section-eight--top {
        padding: 0px 0 40px;
    }

    .contact-section-eight--middle-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .acf-map {
        height: 260px!important;
    }

}



/**** 12.55.1 Link Card ****/

.link-block-background {
    padding-top: 50%;
    background-position: center!important;
    background-size: cover!important;
}

.link-block-text {
    background: #F1F3F5;
    padding: 18px 20px 3px;
    transition: 0.5s;
}

.link-block a:hover .link-block-text {
    background: #e6e9ed;
}

.link-block a:hover, .link-block a {
    text-decoration: none!important;
}

.link-block {
    margin-bottom: 35px
}

.link-block-title {
    font-size: 28px;
}


/**** 12.55.2 Link VH Card ****/

a.link-vh-card, a.link-vh-card:hover {
    text-decoration: none!important;
}

.link-vh-card-outer {
    margin-bottom: 35px;
}

.link-vh-card-background {
    text-decoration: none!important;
    background-size: cover!important;
    background-position: center!important;
    display: grid;
    align-content: end;
}

.link-vh-card-background {
    min-height: calc( 100vh - 300px );
}

.link-vh-card-text {
    padding: 20px;
}

h2.link-vh-card-title {
    text-transform: uppercase;
    letter-spacing: 1px;
}

p.button.link-vh-card-button {
    margin-bottom: 0!important;
}

/**** 12.55.3 Link Two Card ****/


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-top: 2px solid rgb(0,222,178);
    -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;
    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: #00DEB2;
    margin-bottom: 0px;
}

.link-card-two-arrow-icon {
    width: 30px;
    height: 30px;
    background: #00DEB2;
    border-radius: 50%;
    text-align: center;
    display: grid;
    align-content: center;
    position: absolute;
    bottom: 55px;
    right: 40px;
}

.link-card-two-grid span.material-icons {
    color: white;
}

.link-card-two-background {
    background-size: cover!important;
    background-position: center!important;
}

/**** 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.6 Link Five Card ****/


a.link-card--five-link, a.link-card--five-link:hover {
    text-decoration: none!important;
}

.link-card--five {
    margin: 0 0 35px;
}

.link-card--five-image-div {
    position: relative;
}

.link-card--five-image {
    background-size: cover!important;
    background-position: center!important;
    min-height: 100px!important;
    padding-top: 120%;
    display: grid;
    transition: 1s;
    position: relative;
    overflow: hidden;
    opacity: 1;
    transition: 1.5s;
}

.link-card--five-hover-image {
    background-size: cover!important;
    background-position: center!important;
}

.link-card--five:hover .link-card--five-image {
    opacity: 0
}

.link-card--five-text-area {
    position: absolute;
    inset: 0;
}

.link-card--five-text-area-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,1));
    position: relative;
    transition: 1s;
    display: grid;
    align-items: end;
    padding: 0 10px;
}

.link-card--five-top-title {
    color: white;
    font-size: 38px;
    bottom: -11px;
    position: relative;
    font-family: roman;
    margin: 0;
}

.link-card--five-text-div {
    padding: 10px 0;
}

.link-card--five-text {
    margin: 0;
}


@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .link-card--five-top-title {
        font-size: 22px;
        bottom: -6px;
    }
}

/**** 12.56 Info Card ****/

.info-block-background {
    padding-top: 50%;
    background-position: center!important;
    background-size: cover!important;
}

.info-block-text {
    background: #F1F3F5;
    padding: 18px 20px 3px;
    transition: 0.5s;
}

.info-block a:hover .info-block-text {
    background: #e6e9ed;
}

.info-block a:hover, .info-block a {
    text-decoration: none!important;
}

.info-block {
    margin-bottom: 35px
}

.info-block-title {
    font-size: 28px;
}


/**** 12.57 Smart Side Menu ****/

.smart-menu ul.sub-menu {
    margin: 0!important;
}

.smart-menu li {
    display: none;
    margin-bottom: 0!important;
}

.smart-menu li.current-menu-item, .smart-menu .current-menu-item ul li, .smart-menu li.current-menu-ancestor, .smart-menu .current-menu-ancestor ul li {
    display: block;
}

.smart-menu a {
    padding: 7px 10px;
    display: block;
}

/**** 12.58 Grid Rules ****/

.grid-one-one { display: grid; grid-template-columns: 1fr 1fr; }
.grid-one-one-one { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.grid-one-one-one-one { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.grid-one-one-one-one-one { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;} 
.grid-one-one-one-one-one-one { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.grid-one-two { display: grid; grid-template-columns: 1fr 2fr; }
.grid-two-one { display: grid; grid-template-columns: 2fr 1fr; }
.grid-one-three { display: grid; grid-template-columns: 1fr 3fr; }
.grid-three-one { display: grid; grid-template-columns: 3fr 1fr; }
.grid-one-four { display: grid; grid-template-columns: 1fr 4fr; }
.grid-four-one { display: grid; grid-template-columns: 4fr 1fr; }

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .grid-one-one, .grid-one-one-one, .grid-one-one-one-one, .grid-one-one-one-one-one, .grid-one-one-one-one-one-one, .grid-one-two, .grid-two-one, .grid-one-three, .grid-three-one, .grid-one-four, .grid-four-one {
        grid-template-columns: 1fr;
    }
    .grid-mobile-one-one { grid-template-columns: 1fr 1fr; }
}

.grid-gap-0 { grid-gap: 0px; }
.grid-gap-10 { grid-gap: 10px; }
.grid-gap-15 { grid-gap: 15px; }
.grid-gap-20 { grid-gap: 20px; }
.grid-gap-30 { grid-gap: 30px; }
.grid-gap-35 { grid-gap: 35px; }
.grid-gap-40 { grid-gap: 40px; }
.grid-gap-50 { grid-gap: 50px; }


/**** 12.59 Slanted Cards ****/


.slanted-cards-outer {
    padding-bottom: 40px;
    max-width: 1400px;
    margin: 0 auto; 
    width: 100%;
}

.slanted-card {
    box-shadow: rgba(255,213,3,0.7) 3px 3px 0px;
    transition: 0.5s;   
    transform: skewX(-18deg);
    background-position: center!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    min-height: 0px;
    position: relative;
    padding-top: 60%;
    position: relative;
    margin-bottom: 35px;
    overflow: hidden;
}

.slanted-card:hover {
    box-shadow: rgba(255,213,3,1) 12px 12px 0px;
}

.slanted-card-inner {
    width: 130%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -15%;
    transform: skewX(18deg);
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.slanted-card-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.1);
    top: 0;
}

.slanted-card:hover .slanted-card-overlay {
    background: rgba(0,0,0,.2)!important;
    animation: TheFade 1s;
}

.slanted-card-box {
    position: absolute;
    vertical-align: middle;
    color: #def1eb;
    display: inline-block;
    text-align: center;
    transition: 0.5s;
    cursor: pointer;
    -webkit-transition: 0.5s;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%, -50%);
    width: calc( 100% - 30px );
    box-sizing: border-box;
    height: calc( 100% - 30px );
}

.slanted-card-box-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skewX(18deg);
    width: 80%;
}

.slanted-card-box-inner h2 {
    font-size: 1.5vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    text-shadow: black 0px 0px 20px;
    text-align: center;
    margin-bottom: 0;
    line-height: 1.2em;
}

.slanted-card:hover h2:after {
    width: 100%;
}

.slanted-card h2:after  {
    display: block;
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    background-color: #eee;
    content: "";
    transition: width 0.2s;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .slanted-card-box-inner h2 {
        font-size: 16px;
        font-size: 4vw;
    }

    .slanted-cards {
        grid-template-columns: 1fr 1fr!important;
    }

    .slanted-cards-outer {
        width: 110%;
        left: -5%;
        position: relative;
    }

    .slanted-card {
        margin-bottom: 0px!important;
    }
}

/**** 12.60 Side Modals ****/

#myModal2 .related-products-slider {
    display:none;
}

.modal-backdrop {
    z-index: 1!important;
}

.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 425px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
         -o-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0);
}

.modal.left .modal-dialog {
    width: 330px;
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}

/*Left*/
.modal.left.fade .modal-dialog{
    left: -340px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
       -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
         -o-transition: opacity 0.3s linear, left 0.3s ease-out;
            transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.show .modal-dialog {
    left: 0px!important;
}
    
/*Right*/
.modal.right.fade .modal-dialog {
    right: -340px!important;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out!important;
       -moz-transition: opacity 0.3s linear, right 0.3s ease-out!important;
         -o-transition: opacity 0.3s linear, right 0.3s ease-out!important;
            transition: opacity 0.3s linear, right 0.3s ease-out!important;
}

.modal.right.fade.show .modal-dialog {
    right: 0!important;
}

/* ----- MODAL STYLE ----- */
.modal-content {
    border-radius: 0!important;
}

.modal-header {
    border-bottom-color: #EEEEEE;
    background-color: #FAFAFA;
}

.modal-header .close {
    position: absolute;
    right: 40px;
    top: 13px;
    width: 32px;
    height: 32px;
    color: black!important;
}

.modal-header .close:before, .modal-header .close:after {
    content: none;
}


/**** 12.60.1 Woocommerce Sidebar ****/

.progress {
    height: 20px;
    background-color: grey;
    margin-bottom: 10px;
}

.progress-bar {
    padding: 6px;
}

a.cart-customlocation {
    color: black;

}

p.free-shipping-not-qualified {
    margin-bottom: 0;
}

.woocommerce-rhs-modal .modal-header {
    border-bottom-color: #EEEEEE;
    background-color: transparent;
   
}

.woocommerce-rhs-modal  .modal-content {
    background: url(https://www.mandiraskitchen.com/wp-content/uploads/2020/07/halfshadow.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;
}

.woocommerce-rhs-modal ul.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents {
    list-style: none;
    margin: 0;
}



.woocommerce-rhs-modal li.woocommerce-cart-form__cart-item.cart_item {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-gap: 10px;
    margin: 20px 0;
}

.woocommerce-rhs-modal a.remove::before {
    font-size: 15px;
}

.woocommerce-rhs-modal .cart-item-details {
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
    position: relative;
}

p.product-name {

}

.woocommerce-rhs-modal input.qty {
    font-size: 18px;
    padding: 5px;
    width: 60px!important;
}

.woocommerce-rhs-modal button.button {
    font-size: 12px;
    padding: 5px 10px!important;
}

.woocommerce-rhs-modal p.product-remove {
    order: 2;
    position: absolute;
    top: -5px;
    right: 0;
    margin: 0;
}

.woocommerce-rhs-modal p.product-price {
    order: 3;
    margin-bottom: 0;
}

.woocommerce-rhs-modal .product-quantity {
    order: 4;
    position: absolute;
    bottom: 0px;
    right: 0;
    display: grid;
    grid-template-columns: 60px 1fr;
    width: 155px;
}

.woocommerce-rhs-modal .product-quantity p {
    display: none;
}

a.button.wide {
    width: 100%;
    text-align: center;
}

span.subtotal-right {
    float: right;
}

.woocommerce-rhs-modal-bottom-block-subtotal {
    width: 100%;
    padding: 15px 0;
}

.woocommerce-rhs-modal-bottom-block {
    position: absolute;
    border: 0;
}

.woocommerce-rhs-modal-bottom-block {
    position: absolute;
    bottom: 20px;
    width: 380px;
}

.related-products-slide-add-to-cart-wrapper p.product.woocommerce.add_to_cart_inline  {
    border: 0px solid #ccc!important;
    padding: 0!important;
    margin: 0;
}

.related-products-slider {
    border: 3px #f2f2f2;
    background: #f2f2f2;
    padding: 15px 0px;
}

.related-products-slide-text-area * {
    color: black;
}

.related-products-slide-inner {
    display: grid!important;
    grid-template-columns: 50px 1fr 75px;
    padding: 0 100px;
    padding: 0 25px;
    grid-gap: 10px;
}

.related-products-slider  span.woocommerce-Price-amount.amount {
    display: block;
    font-size: 14px;
}

.related-products-slide-product-price {
    color: red;
    margin-bottom: 0!important;
}

.related-products-slide-add-to-cart-wrapper span.woocommerce-Price-amount.amount {
    display: none!important;
}

.related-products-slider p {
    margin-bottom: 0!important;
    font-size: 16px;
}

.related-products-slider  button.slick-next.slick-arrow, .related-products-slider button.slick-prev.slick-arrow {
    width: 35px !important;
    height: 35px !important;
    top: 29% !important;
}

.related-products-slider button.slick-prev.slick-arrow {
    left: -15px!important;
    position: absolute;
}

.related-products-slider a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    font-size: 12px;
    padding: 3px 7px;
    margin: 7px 0;
}

.related-products-slider button.slick-next.slick-arrow {
    right: -13px !important;
    background-position: 98% 0px !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;
}

button.close-deskop-side-modal-menu-button svg {
    fill: black;
}

.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-body {
    display: grid;
    grid-template-rows: auto 1fr;
}

.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 ****/



/**** 12.61 Carosels ****/

/* the slides */
.slick-slide {
    margin: 0 15px!important;
}
/* the parent */
.slick-list {
    margin: 0 -15px!important;
}

.slick-list.draggable {
    padding: 0!important;
}


/*Left align*/
.slick-slider-carousel>.slick-list> div {
    margin-left: 0;
}
.slick-track{ 
    /* transform: none!important; */
}
/*End Left align*/

ul.slick-dots {
    margin-top: 20px;
    grid-gap: 20px;
    list-style: none;
    justify-content: center;
    display: flex;
}

ul.slick-dots .slick-active button {
    background-color: red;
}

.slick-slider {
    margin: 0;
}

.slick-slider img {
    margin: 0 auto;
}

.slick-slider-item-inner {
    padding: 0 20px;
}

/****/


/**** 12.62 Tesimonial Carosel ****/

.testimonial-slider .testimonial-slider-inner ul.slides li {
    min-height: calc( 180px )!important;
}

.testimonial-slider-text {
    max-width: 500px;
    margin: 25px auto;
}

.testimonial-slider-outer h2 {
    text-align: center;
}

.testimonial-slider-outer h2:before {
    text-align: center;
}

h2.testimonial-slider-title {
    font-size: 16px;
    text-align: center;
    font-weight: 100;
    line-height: 1.6em;
}

p.testimonial-slider-attribution {
    font-size: 16px;
    text-align: center;
    font-weight: 500;
}

.testimonial-slider .flexslider {
    background: transparent;
}

.speach-mark-center {
    color: #E84F3E;
    font-size: 50px;
    margin-bottom: -23px;
    text-align: center;
    font-family: 'Lexend Deca', sans-serif;
}

.testimonial-slider .flex-direction-nav a {
    top: 30% !important;
}

p.zoom-desc {
    text-align: center;
}

a.zoom-read-more {
    text-align: center;
    width: 100%;
    display: block;
}

/**** 12.62 Tesimonial Carosel ACF ****/





/**** 12.62.5 Tesimonial Carosel Five ****/

.carousel--textimonials swiper-container {
    width: 100%;
    height: 100%;
}

.carousel--textimonials swiper-slide {
    align-items: start;
}

.carousel--testiminial--slide swiper-slide {
    width: calc(100% / 3) !important;
}

.testimonial-slide-five {
    text-align: left;
    padding: 15px;
    min-height: 170px;
}

.testimonial-slide-five--testimonial--stars {
    margin-bottom: 12px;
}

.testimonial-slide-five--testimonial--starblock {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    width: fit-content;
    grid-gap: 5px;
}

.testimonial-slide-five--testimonial--star {
    background: #00B67A;
    width: fit-content;
    padding: 0px 6px 0px;
    color: white;
    height: 24px;
}

.testimonial-slide-five--testimonial--star svg {
    height: 12px;
    width: 12px;
    position: relative;
    top: -5px;
}

.testimonial-slide-five--testimonial--title p {
    font-size: 14px;
    font-weight: 600;
    color: rgb(25, 25, 25);
    margin: 0 0 5px;
}

.testimonial-slide-five--testimonial--body p {
    font-size: 14px;
    margin: 0;
    color: rgb(25, 25, 25);
    opacity: 0.7;
    line-height: 1.4em;
}

.testimonial-slide-five--testimonial--attribution p {
    font-size: 12px;
    margin: 0;
    color: rgba(0,0,0,.6);
    font-weight: 700;
}

@media screen and (min-width: 768px) { 
    /* DESKTOP RULES GO HERE */
}

@media screen and (max-width: 767px) { 
    /* MOBILE RULES GO HERE */

    .carousel--textimonials swiper-slide {
        max-height: 200px !important;
    }

    .carousel--textimonials swiper-slide.swiper-slide-active {
        width: 100% !important;
        height: 100% !important;
    }

}



/**** 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.62 Tesimonial Card Six ****/

.testimonial-slider {
    max-width: 1000px;
    margin: 0 auto 35px;
}

.testimonial-card-six {
    background: transparent;
    padding: 30px 30px 20px;
    border-radius: 20px;
    display: grid;
    min-height: 300px;
    align-content: center;
    width: 100%;
}

.testimonial-card-six--testimonial {
    text-align: center;
    color: var(--content);
    font-size: 36px;
    line-height: 50px;
}

.testimonial-card-six--attribution {
    color: var(--detail);
    font-size: 28px;
    text-align: center;
    margin: 30px 0 0;
    font-weight: 900;
}

p.testimonial-card-six---job {
    color: var(--detail);
    font-size: 28px;
    text-align: center;
    margin: 0px 0 0;
    font-weight: 900;
}

.testimonial-card-six--testimonial span {
    text-decoration: underline;
    text-decoration-color: var(--detail-secondary)!important;
    text-decoration-thickness: 2px!important;
    text-underline-offset: 2px;
    position: relative;
}

/*
p.testimonial-card-six---job {
    margin: 0;
    color: var(--background-subtle);
    font-size: 16px;
}*/

.testimonial-card-six--bottom {
    display: grid;
    grid-template-columns: 1fr;
}

.testimonial-card-six--image {
    width: 50px;
    padding-top: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}

.testimonial-card-six--has-image {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 15px;
}

@media screen and (max-width: 767px) { 
    /* MOBILE RULES GO HERE */
    .testimonial-slider {
        padding-bottom: 35px;
    }

    p.testimonial-card-six---job {
        font-size: 16px;
    }
}


/**** 12.62.5 Tesimonial Carosel Five ****/

.carousel--textimonials swiper-container {
    width: 100%;
    height: 100%;
}

.carousel--textimonials swiper-slide {
    align-items: start;
}

.carousel--testiminial--slide swiper-slide {
    width: calc(100% / 3) !important;
}

.testimonial-slide-five {
    text-align: left;
    padding: 15px;
    min-height: 170px;
}

.testimonial-slide-five--testimonial--stars {
    margin-bottom: 12px;
}

.testimonial-slide-five--testimonial--starblock {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    width: fit-content;
    grid-gap: 5px;
}

.testimonial-slide-five--testimonial--star {
    background: #00B67A;
    width: fit-content;
    padding: 0px 6px 0px;
    color: white;
    height: 24px;
}

.testimonial-slide-five--testimonial--star svg {
    height: 12px;
    width: 12px;
    position: relative;
    top: -5px;
}

.testimonial-slide-five--testimonial--title p {
    font-size: 14px;
    font-weight: 600;
    color: rgb(25, 25, 25);
    margin: 0 0 5px;
}

.testimonial-slide-five--testimonial--body p {
    font-size: 14px;
    margin: 0;
    color: rgb(25, 25, 25);
    opacity: 0.7;
    line-height: 1.4em;
}

.testimonial-slide-five--testimonial--attribution p {
    font-size: 12px;
    margin: 0;
    color: rgba(0,0,0,.6);
    font-weight: 700;
}

@media screen and (min-width: 768px) { 
    /* DESKTOP RULES GO HERE */
}

@media screen and (max-width: 767px) { 
    /* MOBILE RULES GO HERE */

    .carousel--textimonials swiper-slide {
        max-height: 200px !important;
    }

    .carousel--textimonials swiper-slide.swiper-slide-active {
        width: 100% !important;
        height: 100% !important;
    }

}



/**** 12.63 Logo Grid VC ****/

.client-logo-grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) );
    grid-gap: 20px;
    align-items: center;
}

.client-logo-grid img {
    filter: grayscale(100%);
}

/**** 12.64 Rotating Circle of Text ****/

.rotating-circle-of-text-div {
    position: relative;
    height: 180px;
}

svg.rotating-circle-of-text {
    position: absolute;
    width: 210px;
    height: 210px;
}

svg.rotating-circle-of-text textPath {
    font-size: 43px;
    text-transform: uppercase;
    letter-spacing: 20px;
    fill: red;
}


.rotating-circle-of-text-link:after {
    content: " ";
    width: 70px;
    height: 70px;
    position: absolute;
    background: red;
    top: 50px;
    left: 50px;
    opacity: 0;
    transition: 1s;
}

.rotating-circle-of-text-div:hover .rotating-circle-of-text-link:after {
    opacity: 1;
}

/**** 12.65 Image With Text Ribbon ****/


.image-with-text-ribbon {
    position: relative;
}
    
.image-with-text-ribbon img {
    margin: 0 auto 25px;
    padding: 0 0px;
}
    
.image-with-text-ribbon-text {
    display: grid;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    align-content: end;
    padding-bottom: 25px;
}
    
.image-with-text-ribbon-right * {
    justify-self: end;
    text-align: right;
    padding-right: 10%!important;
}
    
.image-with-text-ribbon-left * {
    padding-left: 10%!important;
}
    
.image-with-text-ribbon-text * {
    padding: 20px 35px;
    margin-bottom: 0;
    width: fit-content!important; 
    max-width: 70%;  
}
    
.image-with-text-ribbon-text h2 {
    font-size: 42px;
    background: rgba(244, 120, 74, .8);
    color: white;
}
    
.image-with-text-ribbon-text p {
    font-size: 20px;
    background: rgba(244, 220, 74, .8);
    color: white;
}

/**** 12.66 WYSIWYG Pulled Left ****/

.wysiwyg-partially-pulled-to-the-left {
    position: relative;
    background: red;
    padding: 20px 25px 7px;
}

@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .wysiwyg-partially-pulled-to-the-left {
        width: calc( 100% + 200px );
        left: -200px;
    }
}

/**** 12.67 Speaker Card ****/

.speaker-card-top {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-gap: 20px;
}

.speaker-card-image {
    height: 100px;
    background-position: center!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
}

.speaker-card-top-text {
    display: grid;
    align-content: end;
}

.speaker-card-top-text *:last-child {
    margin-bottom: 0!important;
}

.speaker-card {
    display: grid;
    grid-gap: 20px;
}


/**** 12.68.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.68.3 Icon Card Three ****/

a.icon-card-three-link {
    text-decoration: none!important;
}

.icon-card-three {
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-gap: 30px;
    margin-bottom: 30px;
}

a.icon-card-three-link:hover h3.icon-card-three-title, a.icon-card-three-link:hover p {
    color: #1D1D1D;
}

.icon-card-three-image-background {
    background: #F3F4F5;
    padding: 10px;
    border-radius: 50%;
}

@media screen and (max-width: 767px) { 
    /* MOBILE RULES GO HERE */
    .icon-card-three {
    /* display: flex;*/
        grid-gap: 20px;
    }
}

/**** 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;
    display: grid;
    grid-template-columns: 1fr minmax(0, 4fr);
    grid-gap: 40px;
    align-items: center;
    align-content: center;
}

.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: 38vh;
    right: 0px;
    z-index: 15;
    transform: rotate(90deg );
    transform-origin: top right;
}

@media screen and (max-width: 767px) { 
    /* MOBILE RULES GO HERE */
    .floating-cta-lozenge {
        top: 66vh;
        position: fixed;
        bottom: -2px;
        right: 0px;
        z-index: 15;
        transform: none;
        transform-origin: none;
        width: 100vw;
        background: #354A9F;
        top: inherit!important;
        text-align: center;
    }

    a.button.floating-cta-lozenge-button {
        width: 100%;
    }

    .below-footer {
        margin-bottom: 0px!important;
    }
}

/**** 12.72 Download Card ****/



/**** 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: 220px 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;
}

a.button.download-card-button:hover {
    background: white;
    color: black!important;
    border-color: black!important;
}

@media screen and (max-width: 767px) { 
    /* MOBILE RULES GO HERE */
    .download-card {
        grid-template-columns: minmax(0,1fr) minmax(0,2fr)!important;
        grid-template-areas: 
            "downloadimage downloadtext"
            "downloadimage downloadbutton";
        grid-gap: 20px!important;
        align-items: start!important;
    }

    img.download-card-image {
        grid-area: downloadimage;
    }

    .download-card-button {
        grid-area: downloadbutton;
    }

    .download-card-content-text {
        grid-area: downloadtext;
    }

    p.download-card-desc {
        margin: 0;
    }



}

/**/

.download-card-small {
    padding: 10px 15px 15px 15px;
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-gap: 15px;
    align-items: center;
    max-width: 800px;
    margin: 20px auto 0;
    background: var(--background-subtle);
}

h2.download-card-small-title {
    font-size: 18px;
}

span.download-card-small-meta-desc {
    margin-right: 5px;
}

.download-card-meta-small span.material-icons {
    font-size: 13px;
    position: relative;
    top: 1px;
}

img.download-card-small-image {
    border: 1px solid #858592;
}

.download-card-small-desc, .download-card-small-meta p {
    color: #858592;
}

.download-card-small-meta span.material-icons {
    font-size: 12px;
    position: relative;
    top: 2px;
}

.download-card-small-meta p {
    font-size: 10px;
    margin: 0 0 8px;
}

a.button.download-card-small-button {
    background: black;
    text-align: center;
    font-size: 14px;
    padding: 5px 20px 2px;
}

a.button.download-card-small-button:hover {
    background: white;
    color: black!important;
    border-color: black!important;
}

/**** 12.73 Prevent Image Copying ****/
/*
img {
    pointer-events: none;
}*/

/**** 12.74 Pulled Up On Desktop ****/

@media screen and (min-width: 768px) {
    .pulled-up.trigger-target {
        position: relative;
        top: 0px;
        transition: 1s;
        opacity: 0;
    }

    .pulled-up.fire {
        top: -50px;
        opacity: 1;
    }
}

/****  12.75 Visual Composer Overwrite ****/

/* Makes it so we can overlap elements */
.entry-content .wpb_row {
    overflow: inherit;
}

/****  12.76 Mosaic Gallery ****/

.gallery--mosaic {
    position: relative;
    width: calc( 100% + 40px );
    left: -20px;
}

/****  12.77 Pricing List ****/

a.price-list--one-link {
   text-decoration: none!important;
}


.price-list--one {
    background: #272727;
    padding: 30px 30px 90px;
    margin-bottom: 30px;
    position: relative;
}

.price-list--one:hover {
    background: #323232;
}

.price-list--one img {
    width: 60px;
    margin-bottom: 20px;
}

h5.price-list--one-name {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 15px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-top: 0;
}

.price-list--one-expanding-hover-line {
    width: 100%;
    display: inline-block;
    position: relative;
    margin-bottom: 5px;
}

.price-list--one-expanding-hover-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;
}

.price-list--one:hover .price-list--one-expanding-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;
}

.price-list--one-description p {
    color: white;
    font-size: 16px;
    line-height: 1.3em;
}

.price-list--one-description ul {
    list-style: none;
    margin-left: 30px;
}

.price-list--one-description li {
    color: white;
    position: relative;
    font-size: 16px;
    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: 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: 0px;
    margin-right: 7px;
    left: -32px;
    color: #c9d6ff;
} 

.price-list--one-small-print {
    font-size: 14px;
    color: white;
    line-height: 1.2em;
}

.price-list--one-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;
}


@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .price-list--one-description ul {
        min-height: 167px;
    }
}

/****  12.78 Google Recapture ****/

.grecaptcha-badge {
    z-index: 20;
}

/****  12.79 Image Zoom ****/

img.zoom {
    pointer-events: initial;
}

img.zoom:active {
    cursor: move;
}

img.zoom:hover {
    cursor: zoom-in;
}

/**** 12.81 Tickertape ****/

.pages-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    grid-gap: 0 40px; 
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .pages-grid {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    }
}


/**/



@-webkit-keyframes ticker {
    0% {
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
        visibility: visible;
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}


@keyframes ticker {
    0% {
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
        visibility: visible;
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.ticker-tape--ticker-wrap {
    width: 100%;
    overflow: hidden;
    padding: 0;
    box-sizing: content-box;
}

.ticker-tape--ticker-wrap .ticker {
    display: inline-block;
    white-space: nowrap;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    -webkit-animation-duration: 360s;
    animation-duration: 360s;
}

.ticker-tape--ticker-wrap .ticker-tape--ticker__item {
    display: inline-block;
    padding-right: 50px;
}


.footer--email--link {
    font-size: 90px;
    font-weight: 600;
}

.footer--email {
    font-size: 30px;
    font-weight: 100;
}

.custom-footer-one--buttonarea {
    text-align: right;
}



@media screen and (max-width: 767px) {
    .custom-footer-one--buttonarea {
        text-align: left;
    }
    
}

/**** 12.82 Cursor Custom ****/


@media (min-width: 768px) {
    /* DESKTOP RULES GO HERE */

    .cursor--custom {
        /*  cursor: url(https://www.squaresocket.com/wp-content/uploads/2021/06/slider-icon.png), auto;*/
        cursor: none;
    }

    .custom-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        background-color: var(--detail);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
    }

    .custom-cursor svg {
        width: 20px;
        height: 20px;
        fill: white;
    }

    .cursor--custom:hover ~ .custom-cursor {
        display: flex;
    }

}


/****************************************/
/****************************************/
/***********  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 ****/

/* Events Single */

.event-single--grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.event-single--grid-left {
    background-position: center!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
}

.event-single--grid-right {
    padding: 30px 40px;
    min-height: 50vh;
    display: grid;
}

.event-single--grid-right-bottom {
    align-self: start;
    display: grid;
}

.event-single--grid-right-bottom {
    align-self: end;
    display: grid;
}

.event-single--other-events {
    margin: 20px 0;
}

.event-single--other-events-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

h1.event-single--upcoming-title {
    text-align: center;
}

h1.event-single--upcoming-title:after {
    margin: 10px auto 10px;
}

@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
    .event-single--other-events-grid, .event-single--grid {
        grid-template-columns: 1fr;
    }

    .event-single--grid-left {
        padding-top: 45%;
    }

    .event-single--grid-right {
        padding: 20px 10px;
    }
}

/* Events Card */

.event-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin: 0 0 20px;
}

.event-card--left {
    background: black;
    background-position: center!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
}

.event-card--right {
    padding: 30px 30px 30px;
    background: #F7F7F7;
    min-height: 300px;
    position: relative;
    display: grid;
}

.event-card--right-bottom {
    align-self: start;
    display: grid;
}

.event-card--right-bottom {
    align-self: end;
    display: grid;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    
}

/* Events Feed */

.events-feed {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .events-feed {
        grid-template-columns: minmax(0, 1fr);
    }
}

/**** 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 {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px!important;
    width: calc( 100% + 20px );
} 

.videos-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;
}

.videos-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-section .movement-card-text h2 {
    color: white;
    text-align: center;
}

/**** 13.3 Jobs ****/

/**** 13.3 Job Card ****/

.job-card {
    background: #fff;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 0px;
    box-shadow: inset 0 0 0 1px;
    border: 1px solid #E0E0E0;
    box-shadow: .25rem .25rem 0 #D8D8D8;
}

.job-card--meta {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 0 25px;
    justify-content: start;
    margin: 0 0 15px;
    border-bottom: 1px solid rgb(212, 212, 212);
}

.job-card--meta * {
    margin: 0;
}

.jobs-single--right {
    margin-bottom: 20px;
}

.jobs-single--right-inner {
    background: #fff;
    padding: 20px 20px 20px;
    position: sticky;
    top: 160px;
    border: 1px solid #E0E0E0;
    box-shadow: 0.25rem 0.25rem 0 #D8D8D8;
}

.jobs-single--right-inner .wpcf7-text, .jobs-single--right-inner .wpcf7-textarea {
    background: white;
}

.jobs-single--right-inner .wpcf7 .row {
    margin-right: -10px;
    margin-left: -10px;
}

.jobs-single--right-inner .wpcf7 p {
    margin: 0;
}

@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
    .jobs-single--right-inner .wpcf7 .row {
        margin-right: -15px;
        margin-left: -15px;
    }
    .jobs-single--right {
        margin-left: -5px;
        padding-right: 5px;
    }
}

/* Jobs Feed */

.jobs-archive--filter-form {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 10px;
    justify-content: center;
}

.jobs-archive--filter-form label {
    display: none;
}

.jobs-feed {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    max-width: 600px;
    margin: 0 auto 25px;
}

/* Jobs Single */

.jobs-single {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-gap: 20px;
    margin: 50px 0;
}

.job-single--meta {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 0 25px;
    justify-content: start;
    margin: 0 0 15px;
    border-bottom: 1px solid rgb(212, 212, 212);
}

.job-single--meta * {
    margin: 0;
}

.jobs-single--listing {
    padding: 0 20px 25px;
}

@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
    .jobs-feed, .jobs-single {
        grid-template-columns:  minmax(0, 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%;
}

.curriculum-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 */
.curriculum-feed-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 Single */

.concrete-pumps-single {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 3fr;
    margin-bottom: 20px!important;
}

.concrete-pumps-main-text-area {
    margin-top: 20px;
}

.other-concrete-pumps-section {
    background: red;
    padding: 50px 0;
}

img.working-range-visual {
    margin: 25px 0;
}

/* Concrete Pumps Card */

a.concrete-card-link:hover {
    text-decoration: none;
}

.concrete-card-image {
    padding-top: 60%;
    background-size: cover;
    position: relative;
}

.concrete-card {
    box-shadow: 0 20px 10px -10px rgb(0 0 0 / 23%);
}

.concrete-card-text {
    padding: 15px;
    background: rgb(241,243,245);
}

.concrete-card-text-top {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 50px;
}

.concrete-card-text-bottom {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr;
}

.concrete-card-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;
    position: absolute;
    left: -35px;
    top: -5px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgMTZ2LThoLTI0djhoMjR6bS0yMi02aDJ2Mmgxdi0yaDJ2M2gxdi0zaDJ2Mmgxdi0yaDJ2Mmgxdi0yaDJ2M2gxdi0zaDJ2Mmgxdi0yaDJ2NGgtMjB2LTR6Ii8+PC9zdmc+);
}

.concrete-card-text-top-brand {
    background-size: contain!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
    height: 30px;
}

.concrete-card-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;
    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 Pumps Feed */

.concrete-pumps-feed-grid {
    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 {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px!important;
    width: calc( 100% + 20px );
} 

.concrete-pumps-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-feed-filter-item * {
    width: 100%;
}

.concrete-pumps-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-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;
}


/**/
/*
.movement-card-text {
    padding: 25px;
}

.movement-card-image {
    background-size: cover!important;
    background-position: center!important;
}

*/

.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;
}

.concrete-pumps-slider {
    margin-bottom: 25px;
}

@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 .products-feed {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px!important;
    width: calc( 100% + 20px );
} 

.products-feed-right .products-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%;
}

.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, .podcasts-block-cards {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
    grid-gap: 25px;
    margin: 0 0 35px;
}

.podcast-archive--grid {
    display: grid;
    grid-template-columns:  1fr 1fr 1fr;
    grid-gap: 25px;
    margin: 0 auto 35px;
    width: 600px;
}

@media (min-width: 768px) {
    .post-type-archive-podcasts .content-area, .tax-podcasts-categories .content-area {
        width: 100%;
        margin-right: 0px;
    }
}

/* Podcast Cards */


.podcast-card {
    border-radius: 15px!important;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 0;
    border-bottom: 3px solid var(--detail);    
    background: #f3f3f3;
}

.podcast-card--left {
    position: relative;
    background-size: cover!important;
    background-position: center!important;
    min-height: 190px;
    border-radius: 0 15px 15px 0;
    width: 150px
}

.podcast-card--lozenge {
    margin: 0 0 15px;
}

.podcast-card--lozenge span, .podcast-card--lozenge a {
    background: white;
    padding: 5px 13px;
    font-size: 12px;
    border: 1px solid #222;
    color: #222;
    border-radius: 20px;
    width: fit-content;

}

.podcast-card--right {
    padding: 20px 20px 20px;
}

.podcast-card--media-area-links {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    grid-gap: 10px;
}

.podcast-card--audio {
    max-width: 100%;
    width: 100%;
}

p.podcast-card--desc {
    font-size: 14px;
    margin: 0;
}

a.podcast-card--button {
    background: grey;
    background: #f3f3f3;
    padding: 7px 10px 7px 30px ;
    border-radius: 15px;
    text-decoration: none!important;
    color: white;
    color: #222;
}

a.podcast-card--button:hover {
    background: #e9e9e9;
}

a.podcast-card--button span.material-icons {
    font-size: 16px;
    top: 3px;
    position: relative;
}

.podcast-card--media-area-links-title {
    border-bottom: 1px solid lightgrey;
    margin: 0 0 20px;
}

.podcast-card--media-area-links-title p {
    font-size: 12px;
    color: grey;
    margin: 0;
}

.podcast-card--links-spotify {
    position: relative;
}

.podcast-card--links-spotify svg {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 5px;
    top: 4px;
}

/*
.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: var(--detail);
}

a.button.course-download:hover {
    border-color: var(--detail)!important;
    background-color: transparent!important;
    color: var(--detail)!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 */

.courses-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 var(--detail);
}

/**** 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: var(--detail);
}

a.button.media-asset-download:hover {
    border-color: var(--detail)!important;
    background-color: transparent!important;
    color: var(--detail)!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 */

.media-assets-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 var(--detail);
}

.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: var(--detail);
}



/* 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.11 Articles ****/
    
/* Article Single */

.article-single-meta-info {
    padding: 5px 0 20px;
}

h1.article-single-title {
    font-weight: 900;
    letter-spacing: 1px;
    padding-top: 0;
}

.article-single-meta-info a, .article-category-button, .article-card-meta-info a {
    border: 1px solid lightgray;
    padding: 5px 18px;
    border-radius: 18px;
    margin-right: 10px;
    color: #222;
}

.article-single-meta-info a:hover, .article-category-button:hover, a.article-card-meta-info:hover {
    border: 1px solid black;
    text-decoration: none!important;
}

.article-single-desc {
    max-width: 800px;
}

.article-single-desc p {
    font-weight: 900;
    font-size: 24px;
}

.article-single-header {
    border-bottom: 1px solid lightgray;
    margin-bottom: 25px;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 20px;
    align-items: end;
}

a.article-button {
    border-top: 1px solid lightgray;
    width: 100%;
    display: block;
    padding: 15px 0;
    color: gray;
}

a.article-button:hover {
    color: black;
    border-top: 1px solid black;
    text-decoration: none!important;
}

.article-button span.material-icons-outlined {
    top: 3px;
    font-size: 15px;
    position: relative;
    left: 5px;
}

.article-single-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 50px;
}

.article-single-content-left-sticky {
    position: sticky;
    top: 200px;
}

.article-single-content-left-sticky .lawyers-card {
    margin-bottom: 20px;
}

.article-single-other-articles {
    margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .article-single-header, .article-single-content {
        grid-template-columns: 1fr;
    }

    .article-single-content-left {
        order: 2;
    }
}

/* Article Card */

.article-card {
    border-top: 1px solid lightgray;
    margin-top: 30px;
    padding-top: 30px;
}

.archive article:first-of-type .article-card {
    border-top: 0px solid lightgray;
    margin-top: 0px;
}

.article-card-excerpt {
    padding: 10px 0 0;
    margin: 10px 0 10px;
}

.article-card-excerpt p {
    font-size: 24px;
}

/* Article Feed */

.article-archive-header-title {
    max-width: 800px;
}

.article-archive-header {
    border-bottom: 1px solid lightgray;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 20px;
    align-items: end;
}

.article-archive-categories-single {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-content: center;
    align-items: center;
    margin: 0 0 10px;
    grid-gap: 20px;
}

.article-archive-header-dropdown select {
    width: 100%!important;
    margin: 0 0 15px!important;
}

h5.article-archive-categories-title {
    margin: 0;
    text-transform: uppercase;
    font-size: 16px;
}

@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
    .article-archive-categories {
        display: none;
    }

    .article-archive-header {
        grid-template-columns: 1fr;
    }
}
    
@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
    
    .article-archive-header-dropdown {
        display: none;
    }
}

/* Article Slider */

.article-slider {
    padding: 100px 0;
}

.article-slider a:hover {
    text-decoration: none!important;
}

.article-slider-text { 
    max-width: 800px;
    margin-bottom: 100px;
}


.article-slider button.slick-arrow {
    color: black!important;
    font-size: 12px;
}

.article-slider button.slick-next.slick-arrow {
    top: -96px!important;
    left: unset!important;
    border: 1px solid black!important;
    border-radius: 26px;
    background: white!important;
    width: 100px!important;
    height: 35px!important;
    padding-right: 30px;
}

.article-slider button.slick-next.slick-arrow:after {
    content: "arrow_forward";
    font-family: 'Material Icons';
    -moz-osx-font-smoothing: grayscale;
    transition: 0.5s;
    display: block;
    height: 15px;
    position: absolute;
    top: 1px;
    right: 14px;
    padding: 5px;
    color: black;
    font-size: 13px;
    font-weight: 100;
}

.article-slider button.slick-prev.slick-arrow {
    top: -96px!important;
    right: 110px;
    left: unset!important;
    border: 1px solid black!important;
    border-radius: 26px;
    background: white!important;
    width: 120px!important;
    height: 35px!important;
    padding-left: 30px;
}

.article-slider button.slick-prev.slick-arrow:after {
    content: "arrow_backward";
    font-family: 'Material Icons';
    -moz-osx-font-smoothing: grayscale;
    transition: 0.5s;
    display: block;
    height: 15px;
    position: absolute;
    top: 1px;
    left: 16px;
    padding: 5px;
    color: black;
    font-size: 13px;
    font-weight: 100;
}

.article-slider button.slick-next.slick-arrow:hover, .article-slider button.slick-prev.slick-arrow:hover {
    background: black!important;
    color: white!important;
}

.article-slider button.slick-prev.slick-arrow:hover:after, .article-slider button.slick-next.slick-arrow:hover:after {
    color: white!important;
}

.article-slider ul.slick-dots {
    display: none!important;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .article-slider {
        padding: 20px 0;
    }
    .article-slider button.slick-prev.slick-arrow {
        left: 0!important;
        right: unset!important;
        top: -75px!important;
    }
    .article-slider  button.slick-next.slick-arrow {
        left: 140px!important;
        right: unset!important;
        top: -75px!important;
    }
}

/**** 13.12 Team ****/

/* Team Single */


/*** Team SINGLE **/

.team-single-top-background {
    background: #F5EBE6;
}

.team-single-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
	padding: 30px 0
}

.team-single-title {
    margin-bottom: 0;
}

.team-single-job-title {
    color: #EC6C24;
    font-size: 30px;
    font-weight: 500;
    margin-top: 10px;
}


.team-single-cats a {
    border: 1px solid lightgray;
    padding: 5px 18px;
    border-radius: 18px;
    margin-right: 10px;
    color: #222;
}

.team-single-cats a:hover {
    border: 1px solid black;
    text-decoration: none!important;
}

.team-single-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: 50px;
    margin-bottom: 50px;
}

.team-single-contact-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 20px 0;
    border-top: 1px solid #F4F4F4;
    border-bottom: 1px solid #F4F4F4;
    margin: 20px 0;
    padding: 20px 0;
}

.team-single-contact-details p {
    font-size: 16px;
    margin-bottom: 5px;
}

.team-single-content p {
    font-size: 18px;
}

.team-single-bottom-grid-right-inner {
    position: sticky;
    top: 150px;
}

/*.team-single-image {
    padding-top: 100%;
    background-position: center!important;
    background-size: cover!important;
    position: sticky;
    top: 105px;
}*/

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
	.team-single-bottom-grid-right {
		height: calc( 100% + 265px );
		top: -265px;
		position: relative;
	}
	.team-single-hide-on-desktop {
		display: none;
	}
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
	.team-single-top-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-gap: 20px;
	}

	.team-single-bottom-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-gap: 0px;
	}

	.team-single-bottom-grid-left {
		order: 2;
	}

    .team-member-service-grid {
        grid-template-columns: minmax(0, 1fr);
    } 
	.team-single-hide-on-mobile {
		display: none;
	}

	.team-single-top-background {
		background: linear-gradient(to bottom, #F5EBE6 80%, #fff 80%);
	}
}


/* Team Card */

.accordion.active .team-member-card-three-text-area-grid-left arrow {
    rotate: 180deg;
}

.team-member-card-three {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 15px;
    border-bottom: 1px solid #F4F4F4;
    padding: 0px 0px 15px;
}

.team-member-card-three-image {
    background-position: center!important;
    background-size: cover!important;
    overflow: hidden;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    transition: 1s;
}

.team-member-card-three:hover .team-member-card-three-image, .team-member-card-three-image:hover {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

.team-member-card-three-image-hover {
    padding-top: 100%;
    background-position: center!important;
    background-size: cover!important;
    opacity: 0;
    transform: scale(1.8);
    transition: 1s;
}

.team-member-card-three:hover .team-member-card-three-image-hover, .team-member-card-three-image-hover:hover {
    opacity: 1;
    transform: scale(1);
}

.team-member-card-three-text-area-grid {
    display: grid;
    grid-template-columns: 1fr 32px;
    align-items: center;
    cursor: pointer;
}

.team-member-card-three-name {
    font-size: 22px;
}

.team-member-card-three-name a, .team-member-card-three-text-area a, .team-member-card-three-name a:hover, .team-member-card-three-text-area a:hover {
    color: black!important;
}

.team-member-card-three-job-title {
    color: #EC6C24;
    font-size: 18px;
    font-weight: 500;
    margin: 0px 0 5px;
}

.team-member-card-three-text-area p {
    margin-bottom: 0!important;
}

.team-member-card-three-contact-details {
    margin: 10px 0 0;
    padding: 15px 0px 10px;
    border-top: 1px solid #F4F4F4;
}

.team-member-card-three-contact-details p {
    font-size: 14px;
}

.team-member-card-three-contact-details-meta {
    margin: 0 0 15px;
}

.team-member-card-three-contact-details-meta p {
    margin-bottom: 5px;
}

.team-member-card-three-contact-details span.material-icons {
    font-size: 12px;
    color: #00AEEE;
    margin-right: 10px;
    top: 1px;
    position: relative;
}

.team-member-card-three-contact-details  svg.fa-linkedin-in {
    font-size: 12px;
    color: #00AEEE;
    margin-right: 10px;
    top: -1px;
    position: relative;
}

.team-member-card-three-link-div {
    margin: 15px 0 0;
}

.team-member-card-three a {
    text-decoration: none!important;
}

/* Team Feed */

.team-feed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: 20px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .team-feed {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Display Team Two */

.display-team-two {
    margin: 0 auto 25px;
    padding: 0px 0px 0;
    position: relative;
    align-items: center;
}

label.display-team-two--label {
    color: var(--detail);
    cursor: pointer;
    position: relative;
    transition: 1s;
    width: 100%;
    margin: 0!important;
}

.display-team-two--row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    font-size: 22px;
}

.display-team-two--name {
    font-weight: 600;
    color: #4a5c5b;
}

.display-team-two--job-title {
    color: #4a5c5b;
}

.display-team-two--pane {
    position: relative;
}

.display-team-two--image {
    padding-top: 100%;
    background-position: center!important;
    background-size: cover!important;
    position: relative;
}

.display-team-two--image:after {
    content: "";
    background: #8f9c93;
    position: absolute;
    left: 25px;
    bottom: -25px;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.display-team-two--input {
    position: absolute;
    left: -4000px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .display-team-two--item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 92px;
        grid-gap: 15px;
        align-items: center;
        border-bottom: 1px solid #64726f;
        padding: 10px 0px;
    }

    .display-team-two--item:first-of-type {
        border-top: 1px solid #64726f;
    }

    .display-team-two--row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .display-team-two {
        display: grid;
        grid-template-columns: minmax(0,3fr) minmax(0,2fr);
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
        grid-gap: 0 20px;
        grid-template-areas:
        "teamtwoitemone teamtwoimage"
        "teamtwoitemtwo teamtwoimage"
        "teamtwoitemthree teamtwoimage"
        "teamtwoitemfour teamtwoimage"
        "teamtwoitemfive teamtwoimage"
        "teamtwoitemsix teamtwoimage"
        "teamtwoitemseven teamtwoimage"
        "teamtwoitemeight teamtwoimage"
        "teamtwoitemnine teamtwoimage";
    }

    .display-team-two--pane {
        grid-area: teamtwoimage; 
        background: white;
        height: 100%;
        display: grid;
        align-items: center;
        isolation: isolate;
    }

    .display-team-two--item:nth-of-type(1) .display-team-two--label {
        grid-area: teamtwoitemone; 
    }

    .display-team-two--item:nth-of-type(2) .display-team-two--label {
        grid-area: teamtwoitemtwo; 
    }

    .display-team-two--item:nth-of-type(3) .display-team-two--label {
        grid-area: teamtwoitemthree; 
    }

    .display-team-two--item:nth-of-type(4) .display-team-two--label {
        grid-area: teamtwoitemfour; 
    }

    .display-team-two--item:nth-of-type(5) .display-team-two--label {
        grid-area: teamtwoitemfive; 
    }

    .display-team-two--item:nth-of-type(6) .display-team-two--label {
        grid-area: teamtwoitemsix; 
    }

    .display-team-two--item:nth-of-type(7) .display-team-two--label {
        grid-area: teamtwoitemseven; 
    }

    .display-team-two--item:nth-of-type(8) .display-team-two--label {
        grid-area: teamtwoitemeight; 
    }

    .display-team-two--item:nth-of-type(9) .display-team-two--label {
        grid-area: teamtwoitemnight; 
    }

    .display-team-two--item:nth-of-type(1) .display-team-two--row {
        border-top: 1px solid #64726f;
    }

    .display-team-two--row {
        border-bottom: 1px solid #64726f;
        padding: 10px;
    }

    .display-team-two--item {
        display: contents;
    }

    input:checked + label.display-team-two--label {
        background: #f5f4f2;
    }

    label.display-team-two--label:hover {
        background: #fefdfd;
    }

    input:checked + label.display-team-two--label + .display-team-two--pane {
        z-index: 5;
        opacity: 1;
    }

    label.display-team-two--label:hover + .display-team-two--pane {
        z-index: 6;
        opacity: 1;
    }
}

/**** 13.13 Offers ****/

/* Offers Single */

.offers-feed {
   
}

@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
.offers-feed {
      
    } 
}

/* Offers Card */

.offer-card {
    border-radius: 10px;
    box-shadow: rgb(0 0 0 / 15%) 0px 10px 51px 3px;

}

img.offer-card-image {
    min-width: 100%;
    height: auto;
}

.offer-card-text-area {
    background: white;
    padding: 30px;
    margin-bottom: 0px;
}



/* Offers Feed */

.offers-feed {
    margin: 40px 0;
}




/**** 13.15 Webinars ****/

/* Webinar Single */

.webinar-single--grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 45px;
    padding: 0 0 40px;
}

.webinar-single--grid-left-sticky {
    position: sticky;
    top: 225px;
}

.webinars-single--meta {
    background: #002140;
    padding: 30px 30px 10px;
    margin: 20px 0;
}

.webinars-single--meta * {
    color: white!important;
}

.webinars-single--speakers {
    margin: 20px 0 20px;
    background: #F4F4F4;
    padding: 30px 30px 10px;
}

h2.webinars-single--speakers-title {
    border-bottom: 1px solid lightgray;
    padding: 0 0 20px;
    margin: 0 0 25px;
}

.webinar-single--display-block {
    display: grid;
    background: red;
    grid-template-columns: 1fr 2fr;
    grid-gap: 45px;
}

.webinar-single--display-block * {
    color: white!important;
}

.webinar-single--display-block {
    display: grid;
    background: #002140;
    grid-template-columns: 1fr 2fr;
    grid-gap: 5px;
    margin: 40px 40px 0 0;
}

.webinar-single--display-block-left {
    padding: 40px;
    color: white;
}

img.webinar-single--display-block-right-image {
    position: relative;
    top: -40px;
    right: -40px;
}

.webinar-single--other-webinars {
    padding: 40px 0 20px;
}

.webinar-single--other-webinars-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 45px;
    padding: 0 0 40px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */

    .webinar-single--grid {
        grid-template-columns: 1fr;
    }

    .webinar-single--display-block {
        grid-template-columns: 1fr;
        grid-gap: 5px;
        margin: 40px 40px 0 0;
    }

    .webinar-single--other-webinars-grid {
        grid-template-columns: 1fr ;
        /*grid-gap: 45px;
        padding: 0 0 40px;*/
    }

}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
}

/* Webinar Card */

a.webinar-card-link, a.webinar-card-link:hover {
    text-decoration: none;
}

.webinars-card-top {
    padding-top: 66%;
    background-size: cover;
    background-position: center;
}

.webinars-card-bottom {
    background: #fff;
    margin-left: 60px;
    margin-top: -40px;
    padding: 30px 30px 20px;
    position: relative;
}

.webinars-card-date {
    background: black;
    position: absolute;
    top: -46px;
    right: 0;
    padding: 10px 20px;
    color: white;
}

.webinars-card-meta {
    font-size: 14px;
}

.webinars-card-title {
    transition: 1.5s;
    width: fit-content;
}

a.webinar-card-link:hover .webinars-card-title {
    -webkit-box-shadow: 0 2px 0 #222;
    box-shadow: 0 2px 0 #222;
    width: fit-content;
}

.webinars-card-excerpt p {
    font-size: 16px;
    line-height: 1.3em;
    color: grey;
}

.webinars-card-bottom-arrow {
    position: absolute;
    left: -60px;
    top: 40px;
    background: #E22F24;
    width: 60px;
    min-height: 60px;
    display: grid;
    align-content: center;
    text-align: center;
    color: white;
    transition: 1.5s;
}

.webinars-card:hover .webinars-card-bottom-arrow {
    background: #222;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
}

/* Webinar Feed */

.webinar-feed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .webinar-feed {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
}


/**** 13.16 Projects ****/

/* Projects Single */

.projects-single-header-image {
    background-size: cover!important;
    padding-top: 20%;
    background-repeat: no-repeat!important;
    background-position: center!important;
}

.projects-single-header-text {
    max-width: 600px;
    margin: 0 auto 60px;
    text-align: center;
}

h1.projects-single-header-text-header:after {
    margin: 15px auto 10px;
}

.projects-single-grid {
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    padding: 40px 0 40px;
    margin: 0 0 40px;
    display: grid;
    grid-template-columns: 2fr 5fr;
    grid-gap: 20px;
}

.projects-single-grid-left-sticky {
    position: sticky;
    top: 250px;
    background: #F1F3F5;
    z-index: 1;
    padding: 20px;
}

.projects-single-grid div#share-buttons {
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    padding: 10px 0 5px;
    margin: 0px 0 20px;
}

.projects-single-grid-left-sticky .button {
    width: 100%;
    text-align: center;
}

.projects-guide-master {
    margin-top: -150px;
    padding-top: 150px;
}

.project-single-donations-footer {
    background: #F1F3F5;
    margin: 0 0 40px;
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.project-single-donations-footer-left {
    background-size: cover;
    background-position: center;
}

.project-single-donations-footer-right {
    padding: 40px;
}

.project-single-donations-popup {
    background: #F1F3F5;
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.project-single-donations-popup-left {
    background-size: cover;
    background-position: center;
}

.project-single-donations-popup-right {
    padding: 40px;
}


/**** 13.17 Past Events ****/


/* Past Events Single */

.past-events-single--grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 45px;
    padding: 0 0 40px;
}

.past-events-single--grid-left-sticky {
    position: sticky;
    top: 225px;
}

.past-events-single--meta {
    background: #002140;
    padding: 30px 30px 10px;
    margin: 20px 0;
}

.past-events-single--meta * {
    color: white!important;
}

.past-events-single--speakers {
    margin: 20px 0 20px;
    background: #F4F4F4;
    padding: 30px 30px 10px;
}

h2.past-events-single--speakers-title {
    border-bottom: 1px solid lightgray;
    padding: 0 0 20px;
    margin: 0 0 25px;
}

.past-events-single--display-block {
    display: grid;
    background: red;
    grid-template-columns: 1fr 2fr;
    grid-gap: 45px;
}

.past-events-single--display-block * {
    color: white!important;
}

.past-events-single--display-block {
    display: grid;
    background: #002140;
    grid-template-columns: 1fr 2fr;
    grid-gap: 5px;
    margin: 40px 40px 0 0;
}

.past-events-single--display-block-left {
    padding: 40px;
    color: white;
}

img.past-events-single--display-block-right-image {
    position: relative;
    top: -40px;
    right: -40px;
}

.past-event-single--other-past-events {
    padding: 40px 0 20px;
}

.past-events-single--other-past-events-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 45px;
    padding: 0 0 40px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */

    .past-events-single--grid {
        grid-template-columns: 1fr;
    }

    .past-events-single--display-block {
        grid-template-columns: 1fr;
        grid-gap: 5px;
        margin: 40px 40px 0 0;
    }

    .past-events-single--other-past-events-grid {
        grid-template-columns: 1fr ;
        /*grid-gap: 45px;
        padding: 0 0 40px;*/
    }
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
}

/* Past Event Card */

a.past-event-card-link, a.past-event-card-link:hover {
    text-decoration: none;
}

.past-events-card-top {
    padding-top: 66%;
    background-size: cover;
    background-position: center;
}

.past-events-card-bottom {
    background: #fff;
    margin-left: 60px;
    margin-top: -40px;
    padding: 30px 30px 20px;
    position: relative;
}

.past-events-card-date {
    background: black;
    position: absolute;
    top: -46px;
    right: 0;
    padding: 10px 20px;
    color: white;
}

.past-events-card-meta {
    font-size: 14px;
}

.past-events-card-title {
    transition: 1.5s;
    width: fit-content;
}

a.past-event-card-link:hover .past-events-card-title {
    -webkit-box-shadow: 0 2px 0 #222;
    box-shadow: 0 2px 0 #222;
    width: fit-content;
}

.past-events-card-excerpt p {
    font-size: 16px;
    line-height: 1.3em;
    color: grey;
}

.past-events-card-bottom-arrow {
    position: absolute;
    left: -60px;
    top: 40px;
    background: #E22F24;
    width: 60px;
    min-height: 60px;
    display: grid;
    align-content: center;
    text-align: center;
    color: white;
    transition: 1.5s;
}

.past-events-card:hover .past-events-card-bottom-arrow {
    background: #222;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
}

/* Past Event Feed */

.past-events-feed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .past-events-feed {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
}





/*** VC BLOCK OVERWRITES **/

.projects-single-grid .display-block-thirty-four-inset, .projects-single-grid .display-block-thirty-two-inset {
    display: none;
}

.projects-single-grid .display-block-thirty-four-inner, .projects-single-grid .display-block-thirty-two-inner {
    grid-template-columns: minmax(0px,1fr) minmax(0px, 1fr);
}

.projects-single-grid  .display-block-thirty-one, .projects-single-grid  .display-block-thirty-two, .projects-single-grid  .display-block-thirty-three, .projects-single-grid  .display-block-thirty-four {
    background: none;
}

.projects-single-grid .display-block-thirty-two-left {
    margin-top: 0px;
}

/***/

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */

    .projects-single-grid {
        grid-template-columns: 1fr;
    }

    .project-single-donations-footer, .project-single-donations-popup {
        grid-template-columns: 1fr;
    }

    .project-single-donations-footer-left, .project-single-donations-popup-left {
        padding-top: 40%;
    }

}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
}

/* Projects Card */


@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
}

/* Projects Feed */

.projects-feed {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    margin: 0 0 40px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .projects-feed {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
}

/****************************************/
/****************************************/
/********* 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: 12rem;
    color: #F1AD56;
    opacity: .3;
    font-family: serif;
    font-weight: bold;
    position: absolute;
    top: -93px;
    left: -2rem;
    z-index: 1;
    pointer-events: none;
    float: left;
    text-align: left;
    height: 108px;
}

.testimonial-content::after {
    content: '\201d';
    font-size: 12rem;
    color: #F1AD56;
    opacity: .3;
    font-family: serif;
    font-weight: bold;
    position: absolute;
    top: -93px;
    right: -2rem;
    z-index: 1;
    pointer-events: none;
    float: left;
    text-align: left;
    height: 108px;
}

.testimonial-image-background {
    padding-top: 100%;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
}

.testimonial-attribution {
    text-align: right;
}

.testimonial-content {
    font-style: italic;
    font-size: 1.2em;
    position: relative;
}

.testimonial-content p {
    font-size: 24px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .testimonial-left {
        max-width: 100px;
        margin: 0 auto 20px;
        max-width: 200px!important;
    }

    .testimonial-single {
        text-align: center;
    }

    .testimonial-attribution {
        text-align: center;
    }
}

/* Vertical Testimonials */

.testimonial-single-vertical, .testimonial-single-vertical .attribution  {
    text-align: center;
}

.testimonial-single-vertical .speach-mark-center {
    color: red;
    font-size: 50px;
    margin-bottom: -23px;
}

.testimonial-single-vertical .testimonial-content::before, .testimonial-single-vertical .testimonial-content::after {
    content: none!important;
}

/**** 14.5 Empty ****/

/**** 14.6 Secure Page Login ****/

.page-template-page-template-secure div#primary {
    width: 100%;
    margin-right: 0;
}

.protected-content-outer, .flash-message.flash-message--error {
    text-align: center;
}

.protected-content-outer form {
    margin-top: 25px;
}

.protected-content-outer  input[type="submit"] {
    top: 0px;
    position: relative;
}

.protected-content-outer input[type="text"] {
    width: 250px;
    background: white;
}

.protected-content-inner {
    background: #F7F7F7;
    padding: 30px;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 5px;
}


/**** 14.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;
}

.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%;
}

.work-feed > article {
    width: calc( ( 100% / 3 ) - ( 40px / 3 ) );
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .work-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: var(--detail);
    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 ****/

.page-template-template-service  div#content {
    padding-top: 0px;
}

.page-template-template-service #content > .col-full, .page-template-template-service {
    background: #F8F9FB;
}

.service-body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 25px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.service-body-right-inner {
    background: #4A4A4A;
    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-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;
}


/**** 14.14 Static Homepage ****/

.static-homepage-hero {
    background-position: center;
    background-size: cover;
    margin-bottom: 130px;
}

.static-homepage-hero-text-inner h1 {
    font-size: 88px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
}

.static-homepage-hero-text-inner h2 {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 1px;
}

.static-homepage-hero-text-inner p {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #e9e9e9;
}

.static-homepage-hero {
    background-position: center;
    background-size: cover;
}

.static-homepage-hero-background {
    background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
    width: 100%;
    height: 100%;
}

.static-homepage-hero-text-max-width {
    max-width: 1600px;
    margin: 0 auto;
    height: 100%;
    display: grid;
    align-items: normal;
    align-items: center;
    align-items: end;
    min-height: 400px;
    min-height: calc( 100vh - 220px );
    position: relative;
    bottom: -90px;
}

.static-homepage-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 35px;
    position: relative;
    padding: 0 20px;
}

.static-homepage-hero-text-inner {
    width: 100%;
    display: block;
    max-width: 800px;
    padding: 20px;
    bottom: 0;
}

.static-homepage-hero-text-inner * {
    color: white;
}



@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */ 
    .static-homepage-hero {
        margin-bottom: 30px;
    }

    .static-homepage-hero-text-max-width {
       bottom: 0px;
       align-items: center;
    }

    .static-homepage-hero-grid.desktop-only {
        display: none;
    }

    .static-homepage-hero-grid.mobile-only {
        padding: 0;
    }

    .static-homepage-hero h1 {
        font-size: 42px;;
    }

    .static-homepage-hero-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
    .static-homepage-hero-grid.mobile-only {
        display: none;
    }
}


/**** 14.15 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 Custom Page Templates *******/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/**** 15. START DESKTOP ONLY STYLING ****/
/****************************************/
/****************************************/

@media screen and (min-width: 768px) {
/* DESKTOP RULES GO HERE */
}

/****************************************/
/****************************************/
/****** END DESKTOP ONLY STYLING ********/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/***** 16. START MOBILE STYLING *********/
/****************************************/
/****************************************/

@media screen and (max-width: 767px) {
/* MOBILE RULES GO HERE */
    .scroll-down-button {
        display: none !important;
    }
}

/****************************************/
/****************************************/
/******** END MOBILE STYLING ************/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/* 17. START INTERMEDIATE SIZES STYLING */
/****************************************/
/****************************************/

@media screen and (min-width: 768px) and (max-width: 1000px) {
/* INTERMEDIATE RULES GO HERE */
}

/****************************************/
/****************************************/
/**** END INTERMEDIATE SIZES STYLING ****/
/****************************************/
/****************************************/

/****************************************/
/****************************************/
/**** 18. START THEME SPECIFC EDITS *****/
/****************************************/
/****************************************/


.custom-menu {
    display: grid;
    grid-gap: 5px;
    border: 1px solid var(--background-strong);
    padding: 8px 16px;
    border-radius: 22px;
    background: var(--background-strong);
}

.custom-menu--line {
    height: 1px;
    width: 26px;
    background: white;
}

.open-deskop-mobile-menu-button:hover .custom-menu--line {
    background: white;
}

.open-deskop-mobile-menu-button:hover .custom-menu, .button.button--modal:hover .custom-menu  {
    border-color: #000;
    background: #000;
}

/**/

.fade-target {
    opacity: 0;
    transition: 1.5s;
}

.fade-target--active {
    opacity: 1;
}

body.modal-open {
    padding-right: 0 !important;
}

/**/

li#wp-admin-bar-wpseo-menu {
    display: none !important;
}

/**/

.svg-drawing {
    width: 100%; /* Adjust the size as needed */
    height: auto;
}

/* Animation for the path */
#Shape_1 {
    stroke-dasharray: 35000; /* Adjust based on the actual length of the path */
    stroke-dashoffset: 35000;
    animation: drawPath 60s linear 7s forwards; /* No delay, takes 5 seconds */
}

@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
    }
}

/* Animation for the line */
#Shape_2 {
    stroke-dasharray: 343; /* Length of the line */
    stroke-dashoffset: 343;
    animation: drawLine 1s linear 10.3s forwards; /* 2s delay, takes 1 second */
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

.svg-animation {
    overflow: hidden;
    display: grid;
    grid-template-areas: "stack";
}

.svg-animation--background {
    grid-area: stack;
    background-position: center!important;
    background-size: cover!important;
}

.svg-animation--overlaid {
    min-height: 100%;
    width: 100%;
    object-fit: cover;
    grid-area: stack;
    display: grid;
    max-width: 900px;
    padding-top: 0px;
    margin: 0px auto 0;
    align-items: center;
}

.vimeo-text-positioning {
    display: grid;
    align-items: center;
}

.svg-animation--div {
    position: relative;
    display: block;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .svg-animation--overlaid {
        align-items: center;
        padding: 20px;
    }
}

/** edits 0.09.24 **/

.svg-animation--overlaid {
    z-index: 2;
}

.svg-animation--background {
    position: relative;
    min-height: calc(100vh - 182px);
}

.svg-animation--div {
    position: relative;
    display: block;
    position: absolute;
    /*top: -33%;*/
    left: 0;
    right: 0;
    bottom: 0;
}

/**** Sitemap ****/

.sitemap--header {
    text-align: center;
    padding: 50px 0 0;
}

.sitemap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 50px 0;
}

@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
    .sitemap-grid {
        grid-template-columns: 1fr;
    }  
}

/**/

h3.case-studies-single--subtitle, h3.case-studies-single--subtitle {
    margin: 0;
}

h2.case-studies-single--header-text-header, h2.post-single-title {
    margin: 0 0 10px;
}


.case-studies-single--header-text, .post-single--header-text {
    margin: 0 0 var(--height-standard);    
}

.position--relative {
    position: relative;
}



.service-card-one {
    text-align: center;
}

.service-card-one--image {
    margin: 0 0 20px;
    padding-top: 32%;
    border-radius: 20px;
    background-size: cover !important;
    background-position: center!important;
}

.service-card-one--titlearea {
    font-style: italic;
  /*  margin-top: 1em;*/
}

.service-card-one--bottom {
    max-width: 500px;
    margin: 0 auto;
}

.service-card-one--button {
  /*  background-color: white !important;
    color: var(--background-strong) !important;*/
    margin-top: 20px;
    
}

.service-card-one--button:hover {
 /*   background-color: transparent !important;
    border-color: white;*/
}


@media screen and (max-width: 767px) {
    /* MOBILE RULES GO HERE */
}

@media screen and (min-width: 768px) {
    /* DESKTOP RULES GO HERE */
}


/****************************************/
/****************************************/
/******** END THEME SPECIFC EDITS *******/
/****************************************/
/****************************************/