/* Show the menu button on all pages */
body .jumbo-buttons-wrapper,
body.site-3 .jumbo-buttons-wrapper,
body.site-2 .jumbo-buttons-wrapper {
    display: block;
    height: 54px;
}
body .jumbo-menu-button {
    padding: 16px 13px 16px 13px;
}
/* Cart button */
.jumbo-cart-wrapper,
.jumbo-cart-wrapper a,
.jumbo-account-wrapper,
.jumbo-account-wrapper a{
    width: 42px;
    height: 54px;
    cursor: pointer;
    float: left;
    padding: 0;
    background: #fff;
    position: relative;
}
.jumbo-account-wrapper,
.jumbo-account-wrapper a{
    background: #f2f2f2;
}
/* Hamburger lines */
body .jumbo-menu-button::before,
body .jumbo-menu-button::after,
body .jumbo-menu-button div.jumbo-menu-button-middle {
    height: 2px;
    margin: 4px 0;
    width: 16px;
}
.jumbo-cart-wrapper .cart-logo, 
.jumbo-account-wrapper .account-icon {
    margin: 35% 25% 25% 25%;
}
.jumbo-cart-wrapper .cart-item-count {
    position: absolute;
    top: 16px;
    left: 0px;
    display: block;
    width: 100%;
    text-align: center;
    color: #000;
    font-weight: 700;
    line-height: 18pt;
    font-size: 8pt;
}
.jumbo-cart-wrapper:hover .cart-logo {
    opacity: .6;
}
.jumbo-cart-wrapper .cart-logo {
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}
@media screen and (min-width: 1080px) {
    body .jumbo-buttons-wrapper,
    body.site-3 .jumbo-buttons-wrapper,
    body.site-2 .jumbo-buttons-wrapper {
        height: 62px;
    }
    body .jumbo-menu-button {
        padding: 20px 14px;
    }
    .jumbo-cart-wrapper,
    .jumbo-cart-wrapper a,
    .jumbo-account-wrapper,
    .jumbo-account-wrapper a {
        height: 62px;
    }
    .jumbo-cart-wrapper .cart-logo, 
    .jumbo-account-wrapper .account-icon {
        margin: 45% 25% 15% 25%;
    }
    .jumbo-cart-wrapper .cart-item-count {
        top: 20px;
    }
}


/* Header */
body.et_header_style_centered #main-header {
    height: 54px;
    z-index: 1;
    padding: 10px 0 10px 20px;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
@media (max-width: 980px) {
    body #main-header {
        padding-top: 10px!important;
    }
}
body.et_header_style_centered #main-header .container {
    width: 60%;
    text-align: left;
    padding-left: 0;
    margin: 0;
}
@media screen and (min-width: 390px) {
    body.et_header_style_centered header#main-header .logo_container {
        height: auto;
        padding-right: 108px;
    }
    body.et_header_style_centered #main-header .container {
        width: 100%;
        margin: 0 auto;
    }
}
body.et_pb_svg_logo.et_header_style_centered #logo {
    height: 34px;
}
/* Header on Desktop */
@media screen and (min-width: 1080px) {
    body.et_header_style_centered #main-header {
        height: 62px;
        padding: 10px 0 10px 30px;
    }
    .et_header_style_centered header#main-header .logo_container {
        padding-right: 124px;
    }
    body.et_pb_svg_logo.et_header_style_centered #logo {
        height: 42px;
    }
}


/* Footer */
/* Fix languages widget wrapping to right of terms widget */
.footer-widget .et_pb_widget {
    clear: both;
}
/* Make spacing below constant contact widget same as the other widgets */
#text-12 {
    padding-bottom: 8px;
}


/* Attempt to fix the scrollup button */
/*#scrollup-master.scrollup-button {
    right: 7px;
    line-height: 36px;
    display: block;
    width: 36px;
    height: 36px;
    padding: 12px 8px;
}
#scrollup-master.scrollup-button {
    display: block;
    right: 7px;
    line-height: 20px;
}
#scrollup-master.scrollup-button .scrollup-svg-icon {
    width: 20px;
    vertical-align: middle;
    margin-top: -5px;
}*/

/* Make footer go to bottom of page on pages with short content */
html, body {
    height: 100%;
}
#page-container,
#et-main-area {
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    display: flex;
    flex-direction: column;
}
#et-main-area,
#main-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}




/* Scroll up icon */
#scrollup-master.scrollup-button {
    right: 7px;
    line-height: 20px;
}
#scrollup-master.scrollup-button .scrollup-svg-icon {
    display: inline-block;
    width: 20px;
    vertical-align: middle;
    margin-top: -5px;
}
/* Zendesk icon */
.zendesk-widget-icon {
    display: none;
    padding: 8px;
    margin: 12px 8px;
    position: fixed;
    border: 0px none;
    z-index: 30;
    right: 0px;
    border-radius: 100%;
    background-color: #c00a27;
    color: #fff;
    fill: #fff;
    /* opacity and bottom position are animated when the icon is added to page (by js adding the zwi-loaded class) */
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-property: opacity, bottom;
    opacity: 0;
    bottom: 100px;
}
.loaded-delayed .zendesk-widget-icon {
    display: block;
}
.zendesk-widget-icon svg {
    display: block;
}
iframe#launcher {
    opacity: 0 !important;
    border-radius: 100%;
    width: 36px !important;
    height: 36px !important;
    margin: 12px 8px !important;
    z-index: 35 !important; /* For some reason the default z-index value of 999998 blocks clicking on links positioned under and to the left of the iframe (in Chrome at least). Using a more normal z-index value fixes this. */
}
.zendesk-widget-icon.zwi-loaded {
    bottom: 0px;
    opacity: 1;
}
/* Adjust cookie-notice z-index to stop it overlaying our customised icon (otherwise the invisible real zendesk icon would still be positioned above the cookie notice's close button and attempting to close the cookie notice would bring up the zendesk chat box) */
#cookie-notice {
    z-index: 25;
}


/* Review pages */
.single .type-project.et_pb_post {
    margin-bottom: 0;
    height: 100%;
}
.single-project #main-content {
    background-color: #f2f2f2;
}




/* 
 * 'Request test ride' side tab
 * @see 2021-02-general.js that adds the loaded-delayed and loaded-more-delayed classes to the body being used to show / hide the tab here
 */
body.post-name-webstore #rum_sst_tab,
body.home #rum_sst_tab {
    display: none!important;
}
body.post-name-webstore.loaded-delayed #rum_sst_tab,
body.home.loaded-delayed #rum_sst_tab {
    display: block!important;
}
body.post-name-webstore.loaded-more-delayed #rum_sst_tab,
body.home.loaded-more-delayed #rum_sst_tab {
    display: none!important;
}
/* Fix issue with tab overlapping dot nav on homepage on small height desktop screen */
@media screen and (min-width: 1080px) and (max-height: 840px) {
    body.home #rum_sst_tab {
        bottom: 200px!important;
    }
}
/* On EU store it should be shown on all pages with no delay */
body.site-2 #rum_sst_tab,
body.site-2.post-name-webstore #rum_sst_tab,
body.site-2.home #rum_sst_tab,
body.site-2.post-name-webstore.loaded-more-delayed #rum_sst_tab,
body.site-2.home.loaded-more-delayed #rum_sst_tab {
    display: block!important;
}


/* Remove arrow and rounded borders from hotspot tooltips */
.tippy-arrow {
    display: none;
}
.tippy-tooltip {
    border-radius: 0;
}