/*

Theme Name: X – Child Theme
Theme URI: https://theme.co/x/
Author: Themeco
Author URI: https://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/

:root {
    --color-blue: #31405a;
    --color-red: #cd1719;
    --green: #387b4d;
    --max-width: 1200px;
    --padding: 44px;
    --transition: all 360ms ease;
}

.max-width {
    width: 100%;
    padding: 0 var(--padding);
}

@media screen and (min-width: 1288px) {
    .max-width {
        padding: 0;
        max-width: 1200px;
        margin: 0 auto !important;
    }
}

#content .pad-top {
    padding-top: var(--padding);
}

#content .pad-bottom {
    padding-bottom: var(--padding);
}

.no-inner-pad .vc_column-inner {
    padding-top: 0px !important;
}

/* Competition Page */

#content .terms-btn > a {
    background-color: transparent;
    color: var(--color-blue);
    font-weight: 600;
    border-radius: 3px;
    border: 1px solid var(--color-blue);
    transition: var(--transition);
}

#content .terms-btn > a:hover {
    background-color: var(--color-blue);
    color: white;
}

#content .terms-btn > a:after,
.fm-form-container .wdform-field .button-submit:after {
    background-image: url(/app/themes/stewartmilne/assets/img/icon/icn_arrow-cta-red.svg);
    width: 16px;
    height: 16px;
    content: "";
    display: inline-block;
    margin-left: 10px;
    position: relative;
    bottom: -2px;
    transition: var(--transition);
    background-position: 50%;
    background-size: 16px 16px;
}

#content .terms-btn > a:hover:after,
.fm-form-container .wdform-field .button-submit:hover:after {
    margin-left: 13px;
}

.fm-form-container div[wdid="2"] > .wdform-field {
    margin-top: 0;
}

.fm-form-container .wdform-field .button-submit {
    background-color: transparent;
    color: var(--color-blue);
    border: 1px solid var(--color-blue);
    font-weight: 600;
    padding: 14px 20px 14px 20px;
    box-shadow: none;
    text-shadow: none;
    border-radius: 3px;
    transition: var(--transition);
}

.fm-form-container .wdform-field .button-submit:hover {
    background-color: var(--color-blue);
    color: white;
}

.fm-form-container .wdform-label-section label {
    font-weight: 600;
}

.fm-form-container div[type="type_gdpr_compliance_checkbox"] a {
    color: var(--color-red);
}

.fm-form-container div[type="type_gdpr_compliance_checkbox"] a:hover {
    color: var(--color-red);
    text-decoration: underline;
}

.fm-form-container .fm-message {
    border: 1px solid var(--color-blue);
    border-radius: 3px;
    margin-bottom: 0;
    padding: 14px 20px 14px 20px;
}

.fm-form-container .fm-message p {
    color: var(--color-blue);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

/* Sept Campaign */

.campaign-cta-cont {
    padding: 10px 20px;
}

.campaign-cta-cont h4 {
    color: white;
}

.campaign-cta-cont .btn.btn-sm.btn-outline-light::after {
    background-image: url("https://www.donaldsontimbersystems.com/app/uploads/2022/09/DTS_Campaign-Web-Asset_DTS-Arrow-Icon_Right-White-1.svg");
}
.campaign-cta-cont .btn.btn-sm.btn-outline-light:hover:after {
    background-image: url("https://www.donaldsontimbersystems.com/app/uploads/2022/09/DTS_Campaign-Web-Asset_DTS-Arrow-Icon_Right-Blue.svg");
}

.above-fold .vc_single_image-wrapper,
.above-fold .vc_figure {
    width: 100%;
}

.above-fold .vc_single_image-wrapper img {
    max-width: none;
    width: 100%;
    height: auto;
}

.above-fold .vc_column_container > .vc_column-inner {
    padding-right: 0;
}

/*New Varaibles*/

:root {
    --blue: #31405a;
    --red: #cd1719;
    --font-gray: #3d4852;
    --dark-gray: #606f7b;
    --font-hover: #ccc;
    --transition-curve: cubic-bezier(0.46, 0.3, 0.42, 0.91);
    --padding: 48px;
    --banner-overlay: linear-gradient(90deg, #31405a, rgba(0, 59, 92, 0));
    --box-shadow: 0 10px 8px rgb(0 59 92 / 5%), 0 5px 5px rgb(0 59 92 / 2%),
        0 1px 5px rgb(0 59 92 / 1%);
}

/*Header*/
#x-root .x-navbar {
    background-color: var(--blue);
    border-bottom: 1px solid white;
}

#x-root .x-navbar .menu-item.current-menu-item span {
    color: var(--font-hover);
}

#x-root .x-navbar .menu-item span {
    border-radius: 0px;
    border: none;
    transition: 200ms color var(--transition-curve);
}

#x-root .x-navbar .menu-item:hover span {
    border: none;
    color: var(--font-hover);
}

#x-root i.x-icon.x-framework-icon.x-framework-icon-menu::before {
    display: none;
}

#x-root .x-navbar .sub-menu {
    position: absolute;
    left: 1rem;
    margin-top: -1.5rem;
    font-family: Arial, sans-serif;
    font-size: 1rem;
}

#x-root .x-navbar .sub-menu ul {
    margin: 0;
    padding: 0.25rem 1rem;
    border: 0;
    box-shadow: 0 3px 21px rgb(0 59 92 / 5%), 0 2px 22px rgb(0 59 92 / 2%),
        0 1px 25px rgb(0 59 92 / 1%), 0 5px 20px rgb(0 59 92 / 5%);
    border-radius: 2px;
    background-color: #fff;
}

#x-root .x-navbar .sub-menu a {
    padding: 1rem 0 0.75rem;
    border-bottom: 1px solid #f2f5f8 !important;
}

#x-root .menu-item-has-children span::after {
    content: "";
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 1px solid rgba(255, 255, 255, 0.8);
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-left: 8px;
    transform: rotate(-45deg) translate(2px, -2px);
}

#x-root .x-navbar .header-button span {
    border: 1px solid white;
    border-radius: 3px;
    transition: 200ms all var(--transition-curve);
    padding: 8px 12px;
}

#x-root .x-navbar .header-button:hover span {
    border: 1px solid white;
    border-radius: 3px;
    background-color: white;
    color: var(--blue);
}

@media screen and (max-width: 978px) {
    #x-root .x-nav-wrap.desktop {
        display: block;
    }

    #x-root .x-topbar {
        display: none;
    }

    #x-root .x-nav-wrap.desktop #menu-main-menu {
        margin-right: 70px;
    }
    #x-root .x-nav-wrap.desktop #menu-main-menu {
        display: none;
    }
}

/*Topbar*/
#x-root .x-topbar {
    background-color: var(--color-blue);
    border: none;
}

#x-root .x-topbar .p-info {
    float: right;
}

#x-root .x-topbar .p-info a.header-button {
    border: 1px solid white;
    border-radius: 3px;
    transition: 200ms all var(--transition-curve);
    padding: 12px 12px;
    color: white;
}

#x-root .x-topbar .p-info a.header-button:hover {
    color: var(--color-blue);
    background-color: white;
}

#x-root .x-topbar .p-info a.mobile-link {
    color: white;
    margin-left: 5px;
}
#x-root .x-topbar .p-info a.mobile-link:hover {
    color: white;
    text-decoration: underline;
}

/*Sub-Menu*/

#x-root #menu-main-menu .sub-menu {
    top: 100px;
    border: none;
    transition: 220ms all var(--transition-curve);
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    padding: 0 8px;
    border-radius: 3px;
    width: fit-content;
}

#x-root #menu-main-menu .sub-menu:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;
    top: -10px;
    left: calc(50% - 54px);
    transform: rotate(45deg);
}

#x-root #menu-main-menu .menu-item:hover .sub-menu {
    display: inline-block;
    visibility: visible;
    opacity: 1;
}

#x-root #menu-main-menu .sub-menu .menu-item a span {
    color: var(--blue);
    transition: 200ms all var(--transition-curve);
    font-size: 16px;
}

#x-root #menu-main-menu .sub-menu .menu-item a:hover span {
    color: var(--dark-gray);
}

#x-root #menu-main-menu .sub-menu .menu-item.current-menu-item a span {
    color: var(--dark-gray);
}

/*sub-sub menu*/

#x-root #menu-main-menu .sub-menu .menu-item > .sub-menu {
    top: 0px;
    right: 0px !important;
    position: absolute;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
}

#x-root #menu-main-menu .sub-menu .menu-item:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

#x-root #menu-main-menu .sub-menu .sub-menu:before {
    left: -4%;
    top: calc(15% - 10px);
}

/*mobile header*/

@media screen and (max-width: 979px) {
    #x-root .x-navbar-wrap .x-navbar.x-navbar-fixed-top {
        position: fixed;
    }
}

#x-root #x-btn-navbar {
    display: none;
    visibility: hidden;
}

#mob_menu_toggle path {
    fill: white;
}

#mob_menu_toggle {
    width: 48px;
    display: inline-block;
    position: absolute;
    top: 20px;
    right: 8px;
    cursor: pointer;
    padding: 8px;
}

@media screen and (min-width: 979px) {
    #mob_menu_toggle {
        display: none;
    }
}

@media screen and (max-width: 1200px) and (min-width: 979px) {
    #x-root .x-brand.img {
        margin-left: 12px;
    }
}

@media screen and (max-width: 978px) {
    #x-root .x-brand.img {
        margin-left: 8px;
    }
    #x-root .x-brand.img img {
        width: 120px;
        height: auto;
    }
}

@media screen and (min-width: 979px) and (max-width: 1200px) {
    #x-root .x-nav .menu-item a > span,
    #x-root .x-nav .sub-menu .menu-item a > span {
        font-size: 14px !important;
        padding-left: 8px;
        padding-right: 8px;
    }
}

#sfm-sidebar .sfm-menu .sfm-menu-item-7766,
#sfm-sidebar .sfm-menu .sfm-menu-item-7931 {
    display: none;
}

#sfm-sidebar .sfm-widget {
    margin-top: 22px;
    margin-bottom: 0px;
}

/*Footer*/

#x-root .x-colophon.top {
    border-top: 4px solid var(--red);
    padding: 4rem 0 0 0;
}

#x-root .x-colophon.bottom {
    border-top: none;
    text-align: left;
    padding: 1rem 0 2rem 0;
}

#x-root .x-colophon.bottom p {
    color: var(--font-gray);
    text-transform: none;
    font-size: 14px;
    font-weight: 400;
}

.logo-row {
    padding-bottom: 24px;
}

.logo-row-home img {
    margin: 10px 0;
}

#footer-nav .footer-menu {
    margin-left: 0;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

#footer-nav .footer-menu .list-header a {
    color: var(--font-gray);
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}

#footer-nav .sub-nav {
    margin-left: 0;
    list-style-type: none;
}

#footer-nav .sub-nav a {
    color: var(--font-gray);
    font-size: 14px;
    text-transform: none;
    font-weight: 100;
    margin-bottom: 12px;
    transition: 200ms color var(--transition-curve);
}

#footer-nav .sub-nav a:hover {
    color: var(--font-hover);
}

#footer-nav .menu-item.inline {
    display: inline-block;
    margin-left: 4px;
}

#footer-nav .menu-item.inline a {
    font-size: 30px;
}

#footer-nav .menu-item.inline i,
#footer-nav .menu-item.inline i:before {
    transition: none;
}

@media screen and (max-width: 1230px) {
    #x-root footer .x-container.max.width {
        padding: 0 15px;
    }
}

/*Typography*/

.white-text *,
.white {
    color: white;
}

.blue {
    color: var(--blue);
}

#x-root .button,
#sfm-sidebar .sfm-widget .button,
#x-root #News .esg-navigationbutton.esg-loadmore,
#x-root #CaseStudies .esg-navigationbutton.esg-loadmore,
.pum-container .form17 .fm-message .button {
    padding: 12px 22px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    text-shadow: none;
    transition: 220ms all var(--transition-curve);
}

#x-root .button:after,
#x-root .header-button span:after,
#x-root .x-topbar .p-info a.header-button::after,
#x-root .fm-form button:after,
#x-root .eg-vacancies-element-3:after,
#sfm-sidebar .sfm-widget .button:after,
#x-root #News .esg-navigationbutton.esg-loadmore:after,
#x-root #CaseStudies .esg-navigationbutton.esg-loadmore:after,
.pum-theme-9601 .fm-form-container .wdform-field .button-submit:after,
.pum-container .form17 .fm-message .button:after {
    content: "";
    width: 16px;
    height: 16px;
    margin-left: 10px;
    display: inline-block;
    position: relative;
    bottom: -2px;
    transition: 200ms all var(--transition-curve);
    background-position: center center;
    background-image: url("/wp-content/uploads/2022/09/icn_arrow-cta-red.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

#x-root .button:hover:after,
#x-root .button:hover span:after,
#x-root .fm-form button:hover:after,
#x-root .eg-vacancies-element-3:hover:after,
#x-root #News .esg-navigationbutton.esg-loadmore:hover:after,
#x-root #CaseStudies .esg-navigationbutton.esg-loadmore:hover:after,
.pum-theme-9601 .fm-form-container .wdform-field .button-submit:hover:after,
.pum-container .form17 .fm-message .button:hover:after {
    margin-left: 16px;
}

#x-root .button:hover,
.pum-container .form17 .fm-message .button:hover {
    text-shadow: none;
    box-shadow: none;
}

#x-root .button.button-blue-fill,
#sfm-sidebar .sfm-widget .button,
#x-root #News .esg-navigationbutton.esg-loadmore,
#x-root #CaseStudies .esg-navigationbutton.esg-loadmore {
    background-color: var(--blue);
    color: white;
    border-color: var(--blue);
}

#x-root .button.button-blue-fill:hover,
#sfm-sidebar .sfm-widget .button:hover,
#x-root #News .esg-navigationbutton.esg-loadmore:hover,
#x-root #CaseStudies .esg-navigationbutton.esg-loadmore:hover {
    background-color: var(--dark-gray);
    color: white;
    border-color: var(--dark-gray);
}

#sfm-sidebar .sfm-widget .button {
    width: 80%;
}

#x-root .button.inverse {
    border-color: white;
    color: white;
}

#x-root .button.inverse:hover {
    background-color: white;
    color: var(--blue);
}

#x-root .button.white-fill {
    background-color: white;
}

#x-root .button.white-fill:hover {
    background-color: var(--blue);
    border-color: white;
}

#x-root .button.red-fill {
    background-color: var(--color-red);
    border-color: var(--color-red);
    color: white;
    &:after {
        background-image: url("/wp-content/uploads/2022/09/DTS_Campaign-Web-Asset_DTS-Arrow-Icon_Right-White-1.svg");
    }
    &:hover {
        background-color: var(--blue);
        border-color: var(--color-blue);
        color: white;
    }
}

@media screen and (max-width: 500px) {
    #x-root h1,
    #x-root .banner h1 {
        font-size: 40px;
    }

    #x-root h2 {
        font-size: 34px;
        margin-top: 8px !important;
    }

    #x-root h3 {
        font-size: 30px;
        margin-top: 8px !important;
    }

    #x-root h4 {
        font-size: 26px;
    }

    #x-root h5 {
        font-size: 22px;
    }

    #x-root h6 {
        font-size: 18px;
    }

    #x-root .full-quote blockquote p {
        font-size: 28px;
    }
}

@media screen and (max-width: 1000px) and (min-width: 501px) {
    #x-root h1,
    #x-root .banner h1 {
        font-size: 45px;
    }

    #x-root h2 {
        font-size: 38px;
    }

    #x-root h3 {
        font-size: 34px;
    }

    #x-root h4 {
        font-size: 30px;
    }

    #x-root h5 {
        font-size: 26px;
    }

    #x-root h6 {
        font-size: 22px;
    }

    #x-root .full-quote blockquote p {
        font-size: 30px;
    }
}

/*Backgrounds*/

.bg-blue {
    background-color: var(--blue);
}

.bg-red {
    background-color: var(--red);
}

.bg-white {
    background-color: white;
}

.bg-green {
    background-color: var(--green);
}

.bg-grey {
    background-color: #eee;
}

.blue-border-top-20 {
    border-top: 20px solid var(--blue);
}

.blue-border-bottom-20 {
    border-bottom: 20px solid var(--blue);
}

.bg-blue-transparent-08 {
    background-color: rgba(49, 64, 90, 0.85);
}

/*Margins*/

.margin-left-right-10 {
    margin-left: 10% !important;
    margin-right: 10% !important;
}

@media screen and (min-width: 768px) {
    .margin-left-10 {
        margin-left: 10% !important;
    }
}

.margin-column-5 {
    margin-left: 5%;
}

/*Paddings*/

.pad-top {
    padding-top: var(--padding);
}

.pad-bottom {
    padding-bottom: var(--padding);
}

.pad-left {
    padding-left: var(--padding);
}

.pad-right {
    padding-right: var(--padding);
}

.mar-top {
    margin-top: var(--padding);
}

.mar-bottom {
    margin-bottom: var(--padding);
}

#x-root .wpb-container {
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    #x-root .wpb-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 1499px) and (min-width: 1232px) {
    #x-root .wpb-container {
        padding-left: 0;
        padding-right: 0;
        max-width: 1200px;
    }
}

@media screen and (min-width: 1500px) {
    #x-root .wpb-container {
        max-width: 1440px;
    }
}

/*Homepage*/

.banner {
    position: relative;
    box-sizing: border-box;
    height: max-content;
    overflow: hidden;
}

.banner .wpb_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner .wpb_raw_code {
    margin-bottom: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

.banner video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
}

.vc_row.wpb_row.vc_inner.vc_row-fluid.banner-inner {
    padding: 20px;
    margin: 0 auto;
    max-width: calc(100% - 20px);
	@media screen and (min-width: 1200px) {
		max-width: 1200px;
	}
}

.banner .banner-text {
    margin-bottom: 0;
    padding: 98px 0;
}

@media screen and (max-width: 767px) {
    .banner .banner-text {
        padding: 28px 0;
    }
}

.banner .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--banner-overlay);
    z-index: 0;
}

.banner h1 {
    margin-top: 0px;
    font-size: 60px;
}

.banner p {
    margin-bottom: 0px;
    font-size: 20px;
}

.banner .sub-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: white;
    line-height: 1.3;
    padding-bottom: 0.5rem;
}

.sub-title {
    color: var(--dark-gray);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.logo-block-text {
    color: var(--dark-gray);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1.3;
}

#x-root .pagination-cont .esg-navigationbutton {
    display: inline-block !important;
    background-color: transparent !important;
    border: none !important;
}

#x-root .pagination-cont .esg-navigationbutton:hover {
    box-shadow: none;
    text-shadow: none;
}

#x-root .pagination-cont .esg-navigationbutton i.eg-icon-right-open:after {
    content: "";
    background-image: url("/wp-content/uploads/2022/09/DTS_Campaign-Web-Asset_DTS-Arrow-Icon_Right-White-1.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: inline-block;
    width: 42px;
    height: 42px;
    transition: 220ms all var(--transition-curve);
    opacity: 0.6;
    position: relative;
    bottom: -10px;
}

#x-root .pagination-cont .esg-navigationbutton i.eg-icon-left-open:after {
    content: "";
    background-image: url("/wp-content/uploads/2022/09/DTS_Campaign-Web-Asset_DTS-Arrow-Icon_Left-White.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: inline-block;
    width: 42px;
    height: 42px;
    transition: 220ms all var(--transition-curve);
    opacity: 0.6;
    position: relative;
    bottom: -10px;
}

#x-root .pagination-cont .esg-navigationbutton i.eg-icon-left-open:before,
#x-root .pagination-cont .esg-navigationbutton i.eg-icon-right-open:before {
    display: none;
    content: "";
}

#x-root .pagination-cont.blue .esg-navigationbutton i.eg-icon-left-open:after {
    background-image: url("/wp-content/uploads/2022/09/DTS_Campaign-Web-Asset_DTS-Arrow-Icon_Left-Blue.svg");
}

#x-root .pagination-cont.blue .esg-navigationbutton i.eg-icon-right-open:after {
    background-image: url("/wp-content/uploads/2022/09/DTS_Campaign-Web-Asset_DTS-Arrow-Icon_Right-Blue.svg");
}

#x-root .pagination-cont .esg-navigationbutton:hover i:after {
    opacity: 1;
}

.latest-cta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.why-us svg path {
    fill: var(--red);
}

.why-us svg {
    width: 40px;
    height: 40px;
}

.why-us .wpb_raw_html,
.why-us h6 {
    margin: 0;
}

.why-us.row-svg .wpb_raw_code .wpb_wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.why-us.row-svg .wpb_raw_code .wpb_wrapper > div {
    width: calc(100% - 40px);
    padding-left: 18px;
}

.why-us.row-svg .wpb_raw_code .wpb_wrapper h5 {
    margin-top: 0;
}

.float-text-box .vc_col-sm-12 .wpb_row {
    position: relative;
    min-height: 600px;
    height: auto;
}

.float-text-box .vc_col-sm-8 {
    z-index: 0;
    min-height: 300px;
}

.our-systems {
    background-color: white;
    padding: 18px 24px;
    width: auto;
    z-index: 1;
    margin-bottom: var(--padding) !important;
}

.our-systems .wpb_wrapper {
    padding: 40px 30px;
}

@media screen and (min-width: 768px) {
    .our-systems {
        width: 500px;
        position: absolute;
        top: 15%;
        left: 40px;
    }

    .our-systems.right-align {
        left: auto;
        right: 40px;
    }
}

.sector-cta .wpb_column > .vc_column-inner {
    padding: 0 !important;
}

.sector-cta .wpb_raw_html {
    margin: 0;
}

.sector-cta .wpb_raw_html > .wpb_wrapper {
    height: 335px;
    position: relative;
}

@media screen and (min-width: 768px) {
    .sector-cta .wpb_raw_html > .wpb_wrapper {
        height: 670px;
    }
}

.sector-cta .wpb_raw_html a h4 {
    color: white;
}

.sector-cta .wpb_raw_html a {
    transition: 250ms all var(--transition-curve);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(49, 64, 90, 0.9);
}

.sector-cta .wpb_raw_html a:hover {
    width: 90%;
    transform: translateX(calc(-15px + 10%));
}

.sector-cta a img {
    opacity: 0;
    transition: 250ms all var(--transition-curve);
    transition-delay: 0ms;
}

.sector-cta a:hover img {
    opacity: 1;
    transition-delay: 200ms;
}

#HomeCaseStudies ul.mainul li > .esg-media-cover-wrapper,
#News .mainul li > .esg-media-cover-wrapper,
#InsightsBig .mainul li > .esg-media-cover-wrapper,
#NewsBig .mainul li > .esg-media-cover-wrapper,
#CaseStudies .mainul li > .esg-media-cover-wrapper {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.quote-float svg {
    position: absolute;
    top: 105px;
    left: 0;
}

.full-quote .wpb_raw_html {
    margin: 0;
}

.full-quote blockquote p {
    color: white;
    font-size: 36px;
    margin-bottom: 0;
}

.full-quote.white-bg blockquote p {
    color: var(--blue);
}

.full-quote blockquote cite {
    font-size: 16px;
    line-height: 1.3;
}

.full-quote blockquote {
    margin-top: 44px;
    padding: 60px 36px;
    background-position: bottom right;
    background-image: url("https://dtstestsite-dev.10web.me/wp-content/uploads/2022/09/bg_quote.svg");
    background-repeat: no-repeat;
    background-size: 70% 70%;
    border: none;
}

@media screen and (max-width: 767px) {
    .full-quote blockquote {
        padding: 42px 18px;
    }
}

.full-quote svg {
    position: absolute;
}

.full-quote svg path {
    fill: white !important;
}

.full-quote.white-bg svg path {
    fill: var(--blue) !important;
}

#x-root .white-overlay {
    position: relative;
}

#x-root .white-overlay:before {
    content: "";
    display: inline-block !important;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, white, transparent);
}

.image-height-section {
    min-height: 345px !important;
}

#x-root .image-careers {
    min-height: 670px !important;
}
@media (min-width: 1200px) {
    .image-height-section {
        min-height: 690px !important;
    }
}

@media screen and (min-width: 768px) {
    .image-height-section.min-height {
        min-height: 500px !important;
    }
}
@media screen and (max-width: 768px) {
    .imageRight16 {
        right: 0px;
    }
}

.imageRight16 {
    right: 16px;
}

.blueTag {
    overflow-wrap: break-word;
}

#x-root .above-fold {
    position: relative;
    height: auto;
}

#x-root .banner-overlay:before {
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    background: var(--banner-overlay);
    width: 100%;
    height: 100%;
}

#x-root .anim-bg-to-top {
    animation-name: above-fold-to-top;
    animation-duration: 30s;
    animation-timing-function: var(--transition-curve);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    background-size: 110% auto;
    background-repeat: no-repeat;
}

@keyframes above-fold-to-top {
    0% {
        background-position: 50% 80%;
    }

    100% {
        background-position: 50% 20%;
    }
}

@media screen and (max-width: 767px) {
    #x-root .anim-bg-to-top {
        background-size: auto 200%;
    }
}

/*Footer CTA*/

.footer-cta .wpb_column .vc_column-inner {
    padding: 30px 25px;
}

.footer-cta .wpb_column .vc_column-inner {
    padding: 30px 25px;
    height: 300px;
    position: relative;
}

.footer-cta .wpb_column.vc_col-has-fill .vc_column-inner:before {
    width: 220px;
    height: 100%;
    content: "";
    position: absolute;
    display: block;
    opacity: 0.9;
    background-color: #31405a;
    z-index: 1;
    top: 0;
    left: 0px;
}

.footer-cta .wpb_column.vc_col-has-fill .vc_column-inner:after {
    width: calc(100% - 220px);
    height: 100%;
    position: absolute;
    display: block;
    right: 0px;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(49, 64, 90, 0.9),
        rgba(0, 59, 92, 0.5) 99.58%
    );
    z-index: 0;
}

.footer-cta .wpb_text_column > .wpb_wrapper *:not(.button) {
    color: white;
}

.footer-cta h3 {
    margin: 0;
}

.footer-cta .wpb_text_column {
    margin-bottom: 0;
    z-index: 1;
    position: relative;
}

@media screen and (max-width: 767px) {
    #x-root .bg-grey.footer-cta > .wpb_column > .vc_column-inner {
        display: contents;
    }

    #x-root .footer-cta .button {
        margin-top: 8px;
    }
    #x-root .footer-cta .vc_column_container {
        justify-content: center;
    }
}

/* Misc Classes
    * Used for declarations throughout the site*/

#x-root .no-mar-text .wpb_text_column {
    margin-bottom: 0;
}

#x-root .min-height-img-mob {
    min-height: 400px;
}

@media screen and (min-width: 768px) {
    #x-root .min-height-img-mob {
        min-height: auto;
    }
}

#x-root .reverse-col-mob {
    flex-direction: column-reverse;
}

@media screen and (min-width: 768px) {
    #x-root .reverse-col-mob {
        flex-direction: row;
    }
}

@media screen and (min-width: 768px) {
    .border-right-black {
        border-right: 1px solid black;
    }
}

.box-shadow {
    box-shadow: var(--box-shadow);
}

#x-root .wpb_single_image {
    margin-bottom: 0;
}

#x-root .no-col-gap > .vc_column-inner {
    padding-left: 0;
    padding-right: 0;
}

#x-root .blue-overlay {
    position: relative;
}

#x-root .blue-overlay:before {
    content: "";
    display: inline-block !important;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--blue);
    opacity: 0.8;
}

/*Careers*/

.careers-grid {
    position: relative;
}

#x-root .eg-vacancies-element-3 {
    transition: all 200ms var(--transition-curve);
}

#x-root #Vacancies .esg-entry-media-wrapper,
#x-root #News .esg-entry-media-wrapper,
#x-root #CaseStudies .esg-entry-media-wrapper {
    box-shadow: var(--box-shadow);
}

/* Careers Filter */

#x-root #Vacancies .esg-filterbutton:not(.esg-pagination-button),
#x-root #News .esg-filterbutton:not(.esg-pagination-button),
#x-root #CaseStudies .esg-filterbutton:not(.esg-pagination-button) {
    border: none;
    border-radius: 0px;
    box-shadow: none;
    margin: 0;
}

#x-root #Vacancies .esg-filterbutton:not(.esg-pagination-button)::before,
#x-root #News .esg-filterbutton:not(.esg-pagination-button)::before,
#x-root #CaseStudies .esg-filterbutton:not(.esg-pagination-button)::before {
    content: "";
    width: 0.8em;
    height: 0.8em;
    display: inline-block;
    border-radius: 0px;
    box-sizing: border-box;
    border: 1px solid var(--blue);
    background-color: transparent;
    margin-right: 1em;
    margin-bottom: -3px;
    font-size: 2em;
}

#x-root
    #Vacancies
    .esg-filterbutton:not(.esg-pagination-button).selected::before,
#x-root #News .esg-filterbutton:not(.esg-pagination-button).selected::before,
#x-root
    #CaseStudies
    .esg-filterbutton:not(.esg-pagination-button).selected::before,
#x-root #Vacancies .esg-filterbutton:not(.esg-pagination-button):hover:before,
#x-root #News .esg-filterbutton:not(.esg-pagination-button):hover:before,
#x-root
    #CaseStudies
    .esg-filterbutton:not(.esg-pagination-button):hover:before {
    background-color: var(--blue);
}

#x-root
    #Vacancies
    .esg-filterbutton:not(.esg-pagination-button)
    > span:not(.esg-filter-checked),
#x-root
    #News
    .esg-filterbutton:not(.esg-pagination-button)
    > span:not(.esg-filter-checked),
#x-root
    #CaseStudies
    .esg-filterbutton:not(.esg-pagination-button)
    > span:not(.esg-filter-checked) {
    font-size: initial;
    font-family: "neue-haas-grotesk-text", sans-serif;
    font-weight: 500;
    color: var(--blue);
}

#x-root
    #Vacancies
    .esg-filterbutton:not(.esg-pagination-button)
    > span.esg-filter-checked,
#x-root
    #News
    .esg-filterbutton:not(.esg-pagination-button)
    > span.esg-filter-checked,
#x-root
    #CaseStudies
    .esg-filterbutton:not(.esg-pagination-button)
    > span.esg-filter-checked {
    display: none;
}

#x-root #Vacancies .esg-pagination-button,
#x-root #News .esg-pagination-button,
#x-root #CaseStudies .esg-pagination-button {
    border: 1px solid var(--blue);
    border-radius: 3px;
    box-shadow: none;
    text-shadow: none;
    font-size: 18px;
    font-family: arial, sans-serif;
    font-weight: 600;
    color: var(--blue);
    transition: all 200ms var(--transition-curve);
}

#x-root #Vacancies .esg-pagination-button.selected,
#x-root #News .esg-pagination-button.selected,
#x-root #CaseStudies .esg-pagination-button.selected {
    background-color: var(--red);
    border-color: var(--red);
    color: white;
}

#x-root #Vacancies .esg-pagination-button:hover,
#x-root #News .esg-pagination-button:hover,
#x-root #CaseStudies .esg-pagination-button:hover {
    color: white;
    background-color: var(--blue);
}

/*Technical Support*/

.support-grid svg {
    width: 40px;
    height: 40px;
    margin-left: auto;
    display: block;
}

.support-grid svg path {
    fill: var(--red);
}

@media screen and (max-width: 767px) {
    .support-grid svg {
        margin-right: auto;
        margin-left: 0;
    }
}

.support-grid h5 {
    margin-top: 0;
}

.key-facts h3 {
    font-size: 50px;
    color: var(--red);
    margin-top: 0;
    margin-bottom: 25px;
}

.key-facts p {
    font-size: 25px;
    margin-bottom: 0;
}

@media screen and (min-width: 768px) {
    .key-facts .vc_col-sm-4:not(:last-child) {
        border-right: 1px solid black;
    }
}

/*Post styles*/

.single-post .x-root {
    flex-direction: column;
}

.single-post #x-root .entry-wrap {
    padding-bottom: 0;
}

#x-root #postContent .entry-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 1em 0;
}

#x-root #postContent .entry-title {
    font-size: 34px;
    color: white;
    font-weight: 500;
    text-align: left;
    margin: 0;
    width: 100%;
    padding: 0;
}

#x-root .postHeader .featuredImg {
    width: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
}

#x-root .category-board-member .postHeader .featuredImg {
    background-size: auto 100%;
}

#x-root #postContent p.excerpt {
    color: white;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

#x-root #postContent span.dateText {
    color: white;
    font-weight: 300;
    font-size: 0.75em;
}

#x-root .category-case-study #postContent span.dateText,
#x-root .category-employee-stories #postContent span.dateText {
    display: none;
}

#x-root #postContent span.boardRole {
    color: white;
}

#x-root #postContent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

#x-root #postContent .postHeader {
    width: 100%;
    min-height: 350px;
    background-color: var(--blue);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
}

#x-root #postContent .postText {
    margin: 68px auto;
    max-width: 1000px;
}

#x-root #postContent .sub-title {
    font-weight: 700;
    color: #b8c2cc;
    font-size: 13px;
}

#x-root #postContent .postHeader .headerText {
    padding: 1em;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#x-root #postContent .postHeader img {
    width: 50%;
}

#x-root #postContent .postText img {
    margin: 0 auto;
    max-height: 80vh;
}

#x-root #postContent .postText ul li::marker {
    color: var(--brandRed);
}

#x-root #postContent p {
    font-weight: 500;
}

@media screen and (min-width: 768px) {
    #x-root #postContent .entry-header {
        padding: 0;
    }

    #x-root #postContent .entry-title {
        font-size: 50px;
    }

    #x-root #postContent .postHeader .headerText {
        padding: 0.5em 4%;
    }
}

@media screen and (max-width: 999px) {
    #x-root #postContent .postText {
        padding: 0 1em;
    }
}

@media screen and (max-width: 590px) {
    #x-root #postContent .postHeader {
        flex-direction: column;
    }

    #x-root #postContent .postHeader .headerText,
    #x-root .postHeader .featuredImg {
        width: 100%;
        background-position: center bottom;
    }

    #x-root .postHeader .featuredImg {
        min-height: 40vh;
    }
}

#x-root #postContainer .fm-form-container.fm-theme1 {
    max-width: 800px;
    margin: 0 auto;
    margin: 2em auto;
    border-top: 4px solid var(--blue);
    background-color: var(--dark-gray);
}

#x-root .postFooter {
    padding: 36px 0;
    background-color: #eee;
    border-top: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
}

@media screen and (max-width: 1500px) {
    #x-root .postFooter {
        padding: 68px 1em;
        flex-wrap: nowrap;
    }
}

#x-root .postFooter > div:not(.footer-col) {
    width: 600px;
    height: 300px;
    background-color: var(--blue);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
}

@media screen and (min-width: 768px) and (max-width: 1240px) {
    #x-root .postFooter > div:not(.footer-col) {
        width: 400px;
        height: 200px;
    }
}

@media screen and (min-width: 768px) and (max-width: 868px) {
    #x-root .category-news .postFooter .colRight {
        margin-left: 24px;
    }
}

@media screen and (max-width: 767px) {
    #x-root .postFooter {
        flex-wrap: wrap;
    }

    #x-root .category-news .postFooter .colRight {
        margin-top: 24px;
    }

    #x-root .postFooter .colLeft {
        margin-bottom: 24px;
    }
}

#x-root .postFooter > div:not(.footer-col):before {
    width: 220px;
    height: 100%;
    content: "";
    position: absolute;
    display: block;
    opacity: 0.9;
    background-color: #31405a;
    z-index: 0;
    top: 0;
    left: 0px;
}

#x-root .postFooter > div:not(.footer-col):after {
    content: "";
    width: calc(100% - 220px);
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(49, 64, 90, 0.9),
        rgba(0, 59, 92, 0.5) 99.58%
    );
    z-index: 0;
}

#x-root .postFooter h3 {
    margin-top: 0;
    color: white;
    z-index: 1;
    position: relative;
}

#x-root .postFooter .button {
    z-index: 1;
}

#x-root .postFooter .colLeft {
    background-image: url("/wp-content/uploads/2022/10/Barry-Waterfront.jpg");
}

#x-root .postFooter .colRight {
    background-image: url("/wp-content/uploads/2022/10/Witney_20.12.19_04-scaled-1410x1200-1.jpg");
}

#x-root .postFooter.bg-blue h3 {
    font-size: 3.5rem;
}

#x-root .postFooter.bg-blue {
    background-color: var(--blue);
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 28px;
    margin-bottom: 3rem;
    padding: 28px;
}

@media screen and (max-width: 600px) {
    #x-root .postFooter.bg-blue {
        grid-template-columns: 1fr;
    }
    #x-root .postFooter.bg-blue h3 {
        font-size: 2rem;
    }
}

/*Contact Forms*/

#x-root .fm-form-container {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    width: 90%;
    max-width: 630px;
    padding: 32px;
    box-shadow: var(--box-shadow);
}

@media screen and (max-width: 630px) {
    #x-root .fm-form-container,
    .pum-theme-9601 .fm-form-container {
        width: 100%;
        padding: 32px 12px 32px 12px;
    }
}

#x-root .fm-form .fm-header-title,
.pum-theme-9601 .fm-form .fm-header-title {
    font-size: 45px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--blue);
}

@media screen and (max-width: 767px) {
    #x-root .fm-form .fm-header-title,
    .pum-theme-9601 .fm-form .fm-header-title {
        font-size: 36px;
    }
}

#x-root .fm-form label,
.pum-theme-9601 .fm-form label {
    font-size: 18px;
    color: var(--blue);
    margin-bottom: 8px;
    min-width: fit-content;
}

#x-root .fm-form input,
#x-root .fm-form textarea,
#x-root .fm-form select {
    width: 100%;
    color: var(--blue);
    background-color: #f2f5f8;
    border: 1px solid #b8c2cc;
    border-radius: 2px;
}

input[type="checkbox"],
input#wdform_10_element70 {
    position: relative;
    width: 1rem !important;
    height: 1rem;
    border: 1px solid #b8c2cc !important;
    overflow: hidden;
    border-radius: 1px !important;
    cursor: pointer;
}

#x-root .fm-form input[type="checkbox"] {
    width: auto;
    position: relative;
}

#x-root .checkbox-div label {
    display: inline;
}

#x-root .fm-form div[type="type_gdpr_compliance_checkbox"] input {
    width: auto;
}

#x-root .fm-form button {
    border: 1px solid var(--blue);
    border-radius: 3px;
    padding: 10px 20px;
    font-size: 16px;
    font-family: arial, sans-serif;
    font-weight: 600;
    color: white;
    background-color: var(--blue);
    transition: all 200ms var(--transition-curve);
}

#x-root .fm-form button:hover {
    background-color: var(--font-gray);
    border-color: var(--blue);
}

/* Contact Us */

#x-root .contact-tabs .vc_tta-tabs-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

#x-root .contact-tabs .vc_tta-tab a {
    background-color: white;
    box-shadow: var(--box-shadow);
    min-height: 200px;
    width: 200px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 250ms var(--transition-curve);
}

#x-root .contact-tabs .vc_tta-tab a span,
#x-root .contact-tabs .vc_tta-panel-heading .vc_tta-panel-title a span {
    color: var(--blue);
    font-size: 24px;
    font-weight: 700;
    transition: all 250ms var(--transition-curve);
}

#x-root .contact-tabs .vc_tta-tab a > .vc_tta-icon:before,
#x-root .contact-tabs .vc_tta-panel-heading .vc_tta-panel-title a i:before {
    transition: all 250ms var(--transition-curve);
    content: "";
    display: inline-block;
    width: 38px;
    height: 38px;
    background-image: url("/wp-content/uploads/2022/09/icn_arrow-cta-red.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

#x-root .contact-tabs .vc_tta-tab.vc_active a,
#x-root .contact-tabs .vc_active .vc_tta-panel-heading .vc_tta-panel-title a {
    background-color: var(--blue);
}

#x-root .contact-tabs .vc_tta-tab a:hover,
#x-root .contact-tabs .vc_tta-panel-heading .vc_tta-panel-title a:hover {
    background-color: var(--font-gray);
}

#x-root .contact-tabs .vc_tta-tab a:hover span,
#x-root .contact-tabs .vc_tta-tab.vc_active a span,
#x-root
    .contact-tabs
    .vc_active
    .vc_tta-panel-heading
    .vc_tta-panel-title
    a
    span,
#x-root .contact-tabs .vc_tta-panel-heading .vc_tta-panel-title a:hover span {
    color: white;
}

#x-root .contact-tabs .vc_tta-tab a:hover > .vc_tta-icon:before,
#x-root .contact-tabs .vc_tta-tab.vc_active a > .vc_tta-icon:before,
#x-root
    .contact-tabs
    .vc_tta-panel-heading
    .vc_tta-panel-title
    a:hover
    i:before,
#x-root
    .contact-tabs
    .vc_active
    .vc_tta-panel-heading
    .vc_tta-panel-title
    a
    i:before {
    background-image: url("/wp-content/uploads/2022/09/DTS_Campaign-Web-Asset_DTS-Arrow-Icon_Right-White-1.svg");
}

#x-root
.contact-tabs {
	& .vc_tta-panel-body .wpb_raw_code {
		max-width: 630px;
		margin: 1rem auto 0 auto;
	}
}

/* Mobile Contact Tabs */

#x-root .contact-tabs .vc_tta-panel-heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 768px) {
    #x-root .contact-tabs .vc_tta-panel-heading {
        display: none;
    }
}

#x-root .contact-tabs .vc_tta-panel-title {
    min-width: 100%;
}

#x-root .contact-tabs .vc_tta-panel-title a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

#x-root .contact-tabs .vc_tta-panel-heading .vc_tta-panel-title a {
    padding: 38px 20px;
}

#x-root .wpb_map_heading {
    color: white;
    font-size: 34px;
    margin-bottom: 26px;
    margin-top: 0px;
}

@media screen and (min-width: 865px) and (max-width: 1499px) {
    #x-root .wpb_map_heading {
        min-height: 80px;
    }
}

@media screen and (max-width: 767px) {
    .get-in-touch-details .link {
        word-break: break-all;
        font-size: 16px;
    }
}

/* News Insights */

.news-cta > .wpb_column > .vc_column-inner {
    padding-left: 0;
    padding-right: 0;
    box-shadow: var(--box-shadow);
}

.news-cta .wpb_text_column {
    padding-left: 18px;
    padding-right: 18px;
}

/*Search Results*/

.search-results #x-root .x-content-band {
    max-width: 1200px;
    margin: 0 auto;
}

@media screen and (max-width: 1300px) {
    .search-results #x-root .x-content-band {
        padding-left: var(--padding);
        padding-right: var(--padding);
    }
}

.search-results .search-title {
    padding-top: var(--padding);
}

.search-results .search-title h1 {
    font-size: 38px;
    line-height: 1.2;
}

.search-results .search-subtitle {
    font-size: 32px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.search-results .search-result .search-header {
    margin: 0;
}

.search-results article .entry-wrap {
    padding-top: var(--padding);
    padding-bottom: var(--padding);
}

.search-results article .entry-wrap:last-child {
    border-bottom: none;
}

/* 404 page */

.entry-404 p {
    padding-left: 8px;
    padding-right: 8px;
}

.entry-404 #searchform {
    padding-left: 8px;
    padding-right: 8px;
}

.entry-404 #searchform:before {
    color: var(--blue);
}

.entry-404 #searchform input {
    width: 100%;
    color: var(--blue);
    background-color: #f2f5f8;
    border: 1px solid #b8c2cc;
    border-radius: 2px;
}

.entry-404 #searchform input::placeholder {
    color: var(--blue);
}

/* Video Embeds */

#x-root .video-player {
    position: relative;
}

#x-root .video-player .video-cover {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#x-root .video-player .video-cover:before {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    background-color: var(--blue);
    opacity: 0.8;
}

#x-root .play-btn {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    background: none;
}

#x-root .play-btn {
    transition: all 200ms var(--transition-curve);
}

#x-root .play-btn svg {
    width: 98px;
    height: 98px;
    transition: all 200ms var(--transition-curve);
}

#x-root .play-btn:hover {
    width: 115px;
    height: 115px;
    cursor: pointer;
}

#x-root .play-btn:hover svg {
    width: 115px;
    height: 115px;
    margin-bottom: 1px;
    margin-left: 5px;
}

#x-root .video-player .embed-responsive,
#x-root .video-cover.active .play-btn {
    display: none;
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Media */
#Videos .esg-center .eg-icon-right-open {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

#Videos .esg-center .eg-icon-right-open:before {
    content: "";
    width: 25px;
    background-size: contain;
    height: 25px;
    background-repeat: no-repeat;
    background-image: url("/wp-content/uploads/2022/09/DTS_Campaign-Web-Asset_DTS-Arrow-Icon_Right-White-1.svg");
    background-position: center center;
    transition: 200ms all var(--transition-curve);
}

#Videos .esg-center:hover .eg-icon-right-open:before {
    transform: scale(1.25);
}

/*Search Overlay*/

#popmake-8543 {
    background: linear-gradient(
        180deg,
        #31405a 60.61%,
        rgba(0, 59, 92, 0.4) 90%,
        hsla(0, 0%, 100%, 0)
    );
}

#popmake-8543 input,
#popmake-8543 p {
    color: white !important;
    text-transform: none;
    font-size: 20px;
    line-height: 1.3;
}

#popmake-8543 .form-search:before {
    color: white;
    font-size: 20px;
    left: 5px;
}

#popmake-8543 .form-search input {
    color: white;
    background-color: transparent;
    border-radius: 0;
    border: none;
    box-sizing: border-box;
    border-bottom: 1px solid #797979;
}

#popmake-8543 .form-search input::placeholder {
    color: white;
}

#popmake-8543 .pum-close.popmake-close {
    top: 50%;
}

#popmake-8543 #searchform {
    max-width: 80%;
    margin: 0 auto;
    min-width: 300px;
}

/*New Careers page*/
#x-root .white-text {
    color: white;
}
#x-root .red-text {
    color: var(--red);
}

#x-root .border-top-white {
    box-sizing: border-box;
    border-top: 2px solid white;
}

/* Xmas notifier bar fix*/
body .pum-overlay {
    z-index: 1 !important;
}
body #popmake-8662 {
    z-index: 0;
}

#x-root header.masthead.masthead-inline {
    position: relative;
}

/*SFM Fix for submenu*/
#sfm-sidebar .sfm-sm-indicator {
    margin-right: 12px !important;
}

/*Form Maker Fix*/
#x-root .fm-hide {
    display: none !important;
}

.cky-always-active {
    color: #3d4852 !important;
}

/*House range*/
#x-root .range-colored-box .wpb_text_column {
    padding: 12px 16px 70px 16px;
}

#x-root .range-colored-box .wpb_text_column h4 {
    margin-top: 0;
}

#x-root .range-colored-box .wpb_text_column p,
#x-root .range-colored-box .wpb_text_column h4 {
    color: white;
}
#x-root .range-colored-box img {
    width: 25%;
    height: auto;
    position: absolute;
    bottom: 24px;
    right: 24px;
}

@media screen and (max-width: 767px) {
    #x-root .range-colored-box img {
        width: 64px;
    }
}

#x-root .no-pad-top .vc_column-inner {
    padding-top: 0;
}

#x-root .enquiry-cta {
    padding: 4rem 2rem;
}
#x-root .house-range-title {
    border: 2px solid white;
}
#x-root .house-range-title > .vc_column-inner {
    padding-left: 0;
}
#x-root .house-range-title .wpb_text_column {
    padding: 98px 2rem;
    margin: 1.5rem 1.5rem 1.5rem 0;
    background-image: url("/wp-content/uploads/2023/07/Top-Banner-Blue-Box.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
@media screen and (max-width: 767px) {
    #x-root .house-range-title .wpb_text_column {
        width: 50%;
        min-width: 320px;
    }
}
#x-root .house-range-title h1.white {
    font-size: 2rem;
    margin: 0;
}

/*#expandSection,
#expandPublic,
#expandCommercial
{
	display: none; 
}

#expandAlpha,
#expandDelta,
#expandSigma{
	display: none; 
}*/

.collapse,
.collapse1,
.collapse2,
.collapse3,
.collapse4,
.collapse5 {
    display: inline-block;
}

/* Sector Menu */
#x-root .SectorMenu {
    text-align: center;
    margin-bottom: 0;
}

#x-root .mini-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#x-root .mini-menu li {
    display: inline;
}

#x-root .mini-menu li a {
    padding: 15px;
    color: var(--color-blue);
}
#x-root .mini-menu li a:hover {
    color: var(--color-red);
}

#expandAlpha,
#expandDelta,
#expandSigma {
    border: solid;
}

#expandSection,
#expandPublic,
#expandCommercial {
    border: solid;
}

#x-root .borderSide {
    border-right: solid;
    border-left: solid;
    padding: 0 20px;
}

/* New Tab Sections for Sectors and  Systems */

#x-root .sectors-systems-tabs .vc_tta.vc_general .vc_tta-tabs-container {
	z-index: 1;
}

#x-root .sectors-systems-tabs .vc_tta-tabs-list {
    text-align: center;
}

#x-root .sectors-systems-tabs .vc_tta-tab {
    margin-left: 6px;
}

#x-root .sectors-systems-tabs .vc_tta-tab a {
    background-color: var(--font-hover);
    color: var(--blue);
    border-radius: 5px 5px 0 0;
    transition: var(--transition);
    font-size: 140%;
}

#x-root .sectors-systems-tabs .vc_tta-tab a:hover {
    background-color: var(--color-blue);
    color: white;
}

#x-root .sectors-systems-tabs .vc_tta-tab.vc_active a {
    background-color: var(--color-red);
    color: white;
}

#x-root .sectors-systems-tabs .vc_tta-panel-body {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #ffffff;
}

#x-root .sectors-systems-tabs .wpb_row {
    position: relative;
}

#x-root .max-height-tabs .vc_column-inner,
#x-root .max-height-row {
    max-height: 550px;
}

#x-root .sectors-systems-tabs .wpb_row .wpb_column:not(.image-height-section) {
    z-index: 1;
}

#x-root .sectors-systems-tabs .wpb_row .wpb_column.image-height-section {
    z-index: 0;
}

@media screen and (min-width: 768px) {
    #x-root .pad-left {
        padding-left: 10%;
        padding-right: 1rem;
    }
}
#x-root .x-framework-icon-menu {
    display: none;
}

#x-root .pad-in-10 {
    padding-left: 10%;
    padding-right: 10%;
}

#x-root .pad-in-5 {
    padding-left: 5%;
    padding-right: 5%;
}

/*New case-study*/

.blue-column {
    padding-left: 1% !important;
    padding-right: 1% !important;
    margin-left: 5%;
    margin-right: 3%;
    width: 20% !important;
    margin-top: -35px;
}

.top-white-band {
    border-top: solid 2px white;
    padding-top: 10px;
}

.top-blue-band {
    border-top: solid 2px var(--blue);
    padding-top: 4px;
    margin-top: 4px;
}

.banner-case {
    position: relative;
    width: 100%;
    height: 70vh;
    margin-left: 0px !important;
}

@media screen and (min-width: 1200px) {
    #x-root .mob-display-only {
        display: none;
    }
}
@media screen and (max-width: 1200px) {
    #x-root .mob-display-hide {
        display: none;
    }
    .mob-pad-10 {
        padding: 25px !important;
        width: 100% !important;
    }
}

#x-root .container-mob {
    display: flex;
    flex-wrap: wrap;
}

#x-root .container-mob .vc_column_container {
    padding: 10px;
    box-sizing: border-box;
}

@media (min-width: 300px) and (max-width: 1200px) {
    .container-mob .vc_column_container {
        flex: 0 0 50%; /* Two columns */
    }
}

#x-root .banner-side {
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 99;
}

#x-root .banner-side-top {
    margin-top: -76vh;
}

#x-root .red-points li::marker {
    color: var(--color-red);
}

#x-root .pad-training {
    padding: 2em 5%;
}

@media (max-width: 767px) {
    #x-root .pad-training {
        padding: 5% 5%;
    }
}

#x-root .full-width-100 {
    width: 100%;
}

.pum-theme-9601 .fm-form-container .wdform-field .button-submit {
    border: 1px solid var(--blue);
    border-radius: 3px;
    padding: 10px 20px;
    font-size: 16px;
    font-family: arial, sans-serif;
    font-weight: 600;
    color: white;
    background-color: var(--blue);
    transition: all 200ms var(--transition-curve);
}

.pum-theme-9601 .fm-form-container .wdform-field .button-submit:hover {
    background-color: var(--font-gray);
    border-color: var(--blue);
}

@media only screen and (min-width: 1024px) {
    .pum-container.pum-responsive.pum-responsive-medium {
        margin-left: -23% !important;
        width: 50% !important;
    }
}

#x-root .left-margin-case .vc_column-inner {
    padding-right: 0 !important;
    padding-left: 4em;
}

#x-root .case-float .our-systems {
    top: 33%;
}

#x-root .blue-icon {
    filter: invert(23%) sepia(36%) saturate(518%) hue-rotate(178deg)
        brightness(96%) contrast(95%);
}

#x-root .case-block {
    color: var(--color-red);
    font-size: 12px;
    font-weight: 700;
    display: inline-grid;
    width: 25%;
    padding-right: 10px;
}

@media only screen and (max-width: 1199px) {
    #x-root .case-float .our-systems {
        top: 14%;
        width: 475px;
    }
    .case-float .our-systems .wpb_wrapper {
        padding: 20px 15px;
    }
}

@media only screen and (max-width: 1047px) {
    #x-root .case-float .our-systems {
        top: 10%;
    }
    .case-float .our-systems .wpb_wrapper {
        padding: 10px 7px;
    }
}

@media only screen and (max-width: 933px) {
    #x-root .case-float .our-systems {
        top: 8%;
        width: 400px;
    }
    .case-float .our-systems .wpb_wrapper {
        padding: 5px 3px;
    }
    #x-root .case-block {
        font-size: 11px;
        font-weight: 700;
        width: 30%;
        padding-right: 10px;
    }
}

@media only screen and (max-width: 767px) {
    #x-root .case-float .our-systems {
        top: 8%;
        width: 100%;
    }
    .case-float .our-systems .wpb_wrapper {
        padding: 15px 9px;
    }
    #x-root .case-block {
        font-size: 12px;
        font-weight: 700;
        width: 30%;
        padding-right: 10px;
    }
    #x-root .left-margin-case .vc_column-inner {
        padding: 1em !important;
    }
}

#x-root .menu-item-3 .menu-item {
    padding-bottom: 10px;
}

#x-root #post-8157 .dateText,
#x-root #post-8161 .dateText,
#x-root #post-8165 .dateText {
    display: none;
}

/* Case study pages*/
.case-study-boxes .vc_column-inner .wpb_wrapper {
    background-color: #f9f9f9;

    & h4 {
        padding: 0 12px;
        margin: 12px 0;
        min-height: 86px;
    }

    & ul {
        list-style: none;
        padding-left: 12px;
        padding-right: 12px;
        & li {
            position: relative;
            padding: 0 0 12px 12px;
            &:before {
                content: "";
                width: 30px;
                height: 30px;
                display: inline-block;
                position: absolute;
                top: 0;
                left: -32px;
                background-size: contain;
                background-position: center center;
                background-repeat: no-repeat;
            }
            &:nth-child(1):before {
                background-image: url("/wp-content/uploads/2024/09/g6.svg");
            }
            &:nth-child(2):before {
                background-image: url("/wp-content/uploads/2024/09/g7.svg");
            }
            &:nth-child(3):before {
                background-image: url("/wp-content/uploads/2024/09/g9.svg");
            }
            &:nth-child(4):before {
                background-image: url("/wp-content/uploads/2024/09/g1.svg");
            }
        }
    }
}

@media screen and (max-width: 767px) {
    #x-root .case-study-boxes.pad-bottom {
        padding-bottom: 0 !important;
    }
}

/* ---------------------- */

/*Case study 3*/

#x-root .case-3 .our-systems {
    top: 17%;
}

@media only screen and (max-width: 1200px) {
    #x-root .case-3 .our-systems {
        top: 7% !important;
    }
    #x-root .case-image-3 {
        min-height: 450px;
        width: auto;
    }
}

#x-root .case-fix-box .our-systems {
    width: 700px;
    top: 7%;
}
@media screen and (max-width: 768px) {
    #x-root .case-fix-box .our-systems {
        width: 100%;
    }
}

#x-root .case-fix-box .case-block {
    width: 30%;
    font-size: 12px;
    line-height: 1;
}

.image-height-section-2 {
    min-height: 725px !important;
}

@media (min-width: 1200px) {
    .image-height-section-2 {
        min-height: 800px !important;
    }
}

#x-root .case-grid .case-row {
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px;
}

#x-root .case-grid .case-row img {
    margin: 0 !important;
    width: 35px;
}
@media screen and (max-width: 450px) {
    #x-root .case-grid .case-row {
        flex-direction: column;
    }
    #x-root .case-fix-box .case-block {
        margin-bottom: 20px;
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .case-image-height .image-height-section.min-height {
        min-height: 600px !important;
    }
}

/*Case study 4*/
#x-root .case-4 .our-systems {
    top: 14% !important;
    width: 700px !important;
}

#x-root .case-4 .case-block {
    width: 19%;
}

#x-root .case-image {
    min-height: 650px;
    width: auto;
}

#x-root .blue-case-border {
    border-color: var(--blue);
    border-style: solid;
    border-width: 30px 0px 30px 30px;
}

@media only screen and (max-width: 768px) {
    #x-root .blue-case-border {
        border-color: var(--blue);
        border-style: solid;
        border-width: 30px 30px 30px 30px;
    }
    #x-root .case-4 .our-systems {
        width: 100% !important;
    }
}

@media only screen and (max-width: 1500px) {
    #x-root .box-small-mob .our-systems .wpb_wrapper {
        padding: 0;
    }
}

#x-root .case-block .wp-image-9624 {
    height: 60px;
}

/* Case study set 3 */

#x-root .blue-section .case-block {
    color: #ffffff !important;
    width: 40%;
}

#x-root .blue-section {
    background-color: transparent !important;
}

#x-root .blue-section .wpb_wrapper {
    text-align: center;
}

#x-root .remove-top-pad .vc_column-inner {
    padding-top: 0;
}

#x-root .bg-blue-gradient {
    background: rgb(0, 0, 0);
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(49, 64, 90, 1) 50%
    );
}

#x-root .bg-blue-text-box {
    width: 50%;
    padding: 2em;
    margin: 2em;
    background-color: rgba(49, 64, 90, 0.85);
    position: absolute;
    bottom: 0;
}

#x-root .blue-section .wpb_wrapper {
    display: flex;
    flex-direction: row-reverse;
    margin-right: 35px;
}

@media only screen and (max-width: 900px) {
    #x-root .mob-banner {
        height: 100% !important;
    }
    #x-root .bg-blue-text-box {
        position: relative;
        width: 100%;
        margin: 15px 0;
    }
    #x-root .mob-display-hide-2 {
        display: none;
    }
}
@media screen and (min-width: 900px) {
    #x-root .mob-display-only-2 {
        display: none;
    }
}

#x-root .bg-blue-text-box-2 {
    bottom: 50% !important;
}

#x-root .webinar-registration-header h3,
#x-root .gotowebinar-required {
    color: var(--red);
}

#x-root .gotowebinar-field {
    font-family: serif !important;
}

/*** New GTW Forms ***/

#x-root .gtw-cont form {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 630px;
    padding: 32px;
    box-shadow: var(--box-shadow);
    & table {
        margin: 0;
        table-layout: fixed;
        & colgroup {
            display: none;
        }
        & tr td {
            display: block;
            border: none;
            padding: 0;
            & label {
                font-size: 18px;
                line-height: 1.1;
                font-weight: 700;
                color: var(--blue);
                margin-bottom: 8px;
                margin-top: 12px;
                min-width: fit-content;
            }
            & input:not(.gotowebinar_registration_submit),
            & textarea {
                width: 100%;
                font-size: 13px;
                color: var(--blue);
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
                background-color: #f2f5f8;
                border: 1px solid #b8c2cc;
                border-radius: 2px;
                &:focus {
                    border-color: var(--blue);
                }
            }
            & input.gotowebinar_registration_submit {
                text-shadow: none;
                border: 1px solid var(--blue);
                border-radius: 3px;
                padding: 10px 20px;
                font-size: 16px;
                font-family: arial, sans-serif;
                font-weight: 600;
                color: white;
                background-color: var(--blue);
                transition: all 200ms var(--transition-curve);
                &:after {
                    content: "";
                    width: 16px;
                    height: 16px;
                    margin-left: 10px;
                    display: inline-block;
                    position: relative;
                    bottom: -2px;
                    transition: 200ms all var(--transition-curve);
                    background-position: center center;
                    background-image: url("/wp-content/uploads/2022/09/icn_arrow-cta-red.svg");
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                &:hover {
                    background-color: var(--font-gray);
                    border-color: var(--blue);
                    &:after {
                        margin-left: 16px;
                    }
                }
            }
            & input.email-service-opt-in {
                margin-bottom: 12px;
            }
        }
    }
}

@media screen and (max-width: 461px) {
    #x-root .gtw-cont form {
        padding: 16px;
    }
}

.gtw-cont .wpb_raw_code {
    container-name: gtw-two-col;
    container-type: inline-size;
}

.gtw-cont .wpb_raw_code > .wpb_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
}

@container gtw-two-col (width >= 570px) {
    .gtw-cont .wpb_raw_code > .wpb_wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

@container gtw-two-col (width <= 650px) {
    .gtw-cont .wpb_wrapper > div {
        & h3 {
            font-size: 1.45em;
        }
    }
}
/*x-theme update to hide icon */
#postContainer i.x-framework-icon.x-entry-title-icon {
    display: none;
}

@media screen and (min-width: 768px) {
    .career-box {
        top: 7%;
        width: 520px;
    }
}
#x-root .eg-vacancies-element-3 {
    display: inline-flex;
}
#x-root .eg-vacancies-element-3 p {
    margin-bottom: 0;
}
#x-root .eg-vacancies-element-3::after {
    bottom: -4px;
}

.esg-grid .mainul li.eg-news-wrapper .esg-media-poster {
    background-position: top !important;
}

#x-root .section-size {
    min-height: 380px;
}

/* New site sections 20-03-25 */

#x-root .box-cta-row {
    @media screen and (min-width: 768px) {
        & .vc_col-sm-4 {
            margin: 0 0.5rem;
            width: calc(33.33333% - 1rem);
        }
    }
    & .vc_col-sm-4:nth-child(1) {
        background-color: var(--blue);
    }
    & .vc_col-sm-4:nth-child(2) {
        background-color: var(--red);
    }
    & .vc_col-sm-4:nth-child(3) {
        background-color: var(--green);
    }
    & .button {
        border-color: white;
        color: white;
        &:after {
            background-image: url("/wp-content/uploads/2022/09/DTS_Campaign-Web-Asset_DTS-Arrow-Icon_Right-White-1.svg");
        }
        &:hover {
            background-color: var(--blue);
            color: white;
            border-color: white;
        }
    }
    & .wpb_row .vc_column-inner {
        padding: 1rem;
        & > .wpb_wrapper {
            display: flex;
            flex: 1;
            & .wpb_text_column {
                margin: 0;
                flex: 1;
                display: flex;
                & .wpb_wrapper {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
            }
        }
    }
}

#x-root .tech-support-acc .vc_tta-panel-heading {
    background-color: var(--blue);
}

#x-root .tech-support-acc .vc_tta-title-text {
    color: white;
}
#x-root .tech-support-acc .vc_tta-controls-icon::before {
    border-color: white;
}

#x-root .eg-esg-files-element-2 span::after {
    content: "";
    width: 7%;
    height: 38%;
    display: inline-block;
    position: absolute;
    bottom: 40%;
    right: -6px;
    background-image: url("/wp-content/uploads/2022/09/DTS_Campaign-Web-Asset_DTS-Arrow-Icon_Right-White-1.svg");
    background-position: center center;
    background-repeat: no-repeat;
}
.form17 .fm-message h5 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
}
.form17 .fm-message p {
    text-align: left;
    font-weight: 300;
}

.hide-link {
    display: none;
}

.map-image .vc_figure-caption {
    color: white;
}

/*Landing Pages*/

#x-root .landing-page-second-banner {
    height: 500px;
}

#x-root .pad-remove {
    padding: 0;
}

@media screen and (max-width: 768px) {
    #x-root .center-button {
        display: flex !important;
        justify-content: center !important;
    }
    #x-root .reverse-col-mob-landing {
        display: flex;
        flex-direction: column-reverse;
    }
}

/*Landing Pages Updated*/

#x-root .landing-header {
    margin: 0 5%;
    padding-top: 25px;
}

#x-root .call-link {
    color: white;
}

#x-root .call-link:hover {
    color: var(--color-red);
}

#x-root .landing-banner {
    margin: 0 10%;
}

#x-root .landing-hero-banner {
    height: 1000px;
    margin-top: -26em;
}

@media screen and (max-width: 975px) {
    #x-root .landing-hero-banner.recruitment-banner {
        height: 50vw;
        margin-top: -4em;
    }
    #x-root .bg-blue.recruit-banner-text {
        background-color: white;
        & .wpb_text_column.white {
            & h1.white,
            & p {
                color: var(--blue) !important;
            }
        }
    }
}

@media screen and (min-width: 976px) {
    #x-root .landing-hero-banner.recruitment-banner {
        height: 800px;
        margin-top: -17em;
    }
}

#x-root .landing-hero-banner-first-time {
    height: 750px;
    margin-top: -13em;
}

@media screen and (min-width: 2000px) {
    #x-root .landing-hero-banner-first-time {
        height: 900px;
        margin-top: -14em;
    }
}

#x-root .landing-hero-banner-sq {
    height: 750px;
    margin-top: -12em;
}
@media screen and (min-width: 2200px) {
    #x-root .landing-hero-banner-sq {
        margin-top: -9em;
    }
}

#x-root .landing-hero-banner-sigma {
    min-height: 1100px;
    margin-top: -17em;
}

#x-root .landing-hero-banner-learn {
    height: 1000px;
    margin-top: -15em;
}

#x-root .landing-hero-banner.supply {
	margin-top: -22em;
	background-color: var(--blue);
}

@media screen and (min-width: 767px) {
    #x-root .landing-hero-banner-learn-mobile {
        display: none;
    }
}
@media screen and (max-width: 767px) {
    #x-root .landing-hero-banner-learn-mobile {
        height: 750px;
    }
    #x-root .landing-hero-banner-learn {
        display: none;
    }
}

#x-root .landing-hero-banner-full {
    height: 700px;
}

#x-root .bullet-points ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#x-root .bullet-points li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
    line-height: 1.25rem;
}

#x-root .landing-icon {
    flex-shrink: 1;
}

#x-root .landing-icon svg {
    height: 40px;
    width: 40px;
    margin-right: 15px !important;
}

#x-root .landing-icon svg path {
    fill: var(--color-red);
}

#x-root .logo-con {
    position: relative;
    overflow: visible;
    width: 750px;
    height: 500px;
}

#x-root .big-logo-landing {
    position: absolute;
    left: 18%;
    width: 750px;
    height: 890px;
    top: 50%;
    transform: translate(-50%, -27%);
}

@media screen and (max-width: 1200px) and (min-width: 768px) {
    #x-root .big-logo-landing {
        top: 160%;
    }
}

#x-root .banner-para {
    background-attachment: fixed;
}

@media screen and (max-width: 992px) {
    #x-root .banner-para {
        background-attachment: unset;
        background-position: top !important;
        background-size: contain !important;
    }
}

#x-root .box-position-landing {
    top: 22em;
}

#x-root .box-position-landing .wpb_text_column {
    margin: 5%;
}

#x-root .box-position-landing.two-col {
    position: relative;
    top: 14em;
}

#x-root .pad-left-10 {
    padding-left: 10%;
}

#x-root .icon-arrows {
    right: -60px;
    position: relative;
}
#x-root .icon-red-box {
    position: absolute;
    bottom: -3rem;
    left: -9rem;
}

#x-root .margin-bottom-four {
    margin-bottom: 4rem;
}

#x-root .no-pad-sides {
    padding-left: 0;
    padding-right: 0;
    & > .wpb_column > .vc_column-inner {
        padding-left: 0;
        padding-right: 0;
    }
}

body.landing-page-cv header.masthead.masthead-inline {
    display: none;
}

@media screen and (max-width: 1200px) {
    #x-root .logo-con {
        width: 560px;
        height: 350px;
    }
    #x-root .pad-left-10 {
        padding-left: 6%;
    }
}
@media screen and (max-width: 767px) {
    #x-root .logo-con {
        width: auto;
        height: 100px;
    }
    #x-root .big-logo-landing {
        left: 55%;
        width: 200px;
        height: auto;
        top: 0;
        transform: none;
        &.recruit-logo {
            left: 32%;
            width: 228px;
            top: -66%;
        }
    }
    #x-root .pad-left-10 {
        padding-left: 10%;
        padding-right: 10%;
    }

    #x-root .bullet-points .wpb_wrapper {
        justify-content: center;
        display: flex;
    }
    #x-root .bullet-points.recruit-btn-shrink .wpb_wrapper {
        flex-direction: column;
    }
    #x-root .bullet-points .center-button {
        margin-left: 0 !important;
    }

    #x-root .heading-wrapper {
        margin-bottom: -4rem;
    }
}

@media screen and (max-width: 978px) {
    #x-root .landing-hero-banner {
        height: 650px;
        margin-top: -18em;
    }

    body.landing-page-cv header.masthead.masthead-inline {
        display: block;
    }
    body.landing-page-cv header.masthead.masthead-inline li.menu-item {
        display: none;
    }

    body.landing-page-cv header.masthead.masthead-inline .x-navbar {
        border-bottom: none !important;
    }

    body.landing-page-cv header.masthead.masthead-inline .x-brand.img img {
        width: 200px !important;
    }

    #x-root .banner-hide-mob {
        display: none;
    }
}

#x-root .reduce-text-size {
    height: 22rem;
}

#x-root .reduce-text-size-easy {
    height: 16rem;
}

@media screen and (max-width: 2000px) {
}
#x-root .reduce-text-size-easy {
    height: 21rem;
}

@media screen and (max-width: 1600px) {
    #x-root .reduce-text-size {
        height: 18rem;
    }
    #x-root .reduce-text-size-easy {
        height: 15rem;
    }
}

@media screen and (max-width: 1300px) {
    #x-root .reduce-text-size {
        height: 14rem;
    }
    #x-root .reduce-text-size-easy {
        height: 12rem;
    }
}

@media screen and (max-width: 1050px) {
    #x-root .reduce-text-size {
        height: 10rem;
    }
    #x-root .reduce-text-size-easy {
        height: 10rem !important;
    }
}
@media screen and (max-width: 900px) {
    #x-root .reduce-text-size {
        height: 8em !important;
    }
    #x-root .reduce-text-size-easy {
        height: 7rem !important;
    }
}

@media screen and (max-width: 650px) {
    #x-root .reduce-text-size {
        height: 6em !important;
    }
    #x-root .reduce-text-size-easy {
        height: 5rem !important;
    }
}

#x-root .text-show-mobile {
    display: none;
}

@media screen and (max-width: 540px) {
    #x-root .text-show-mobile {
        display: block;
    }
    #x-root .hide-mob-text {
        display: none;
    }
}

#x-root .hide-mob-para {
    display: block;
}

#x-root .para-show-mobile {
    display: none;
}

@media screen and (max-width: 767px) {
    #x-root .para-show-mobile {
        display: block;
    }
    #x-root .hide-mob-para {
        display: none;
    }
    #x-root .box-position-landing {
        top: 0em;
    }
    #x-root .logo-move {
        z-index: 2;
        position: relative;
    }
    #x-root .para-show-mobile .wpb_column.vc_column_container.vc_col-sm-6 {
        padding-bottom: 0;
    }

    #x-root .landing-hero-banner-first-time {
        margin-top: 0;
        height: 400px;
    }

    #x-root .mobile-pad-bottom-removed {
        padding-bottom: 0;
    }
}

#post-10625 .dateText,
#post-10769 .dateText,
#post-10795 .dateText {
    display: none;
}

#x-root .logo-index {
    position: relative;
    z-index: 2;
}

#x-root h1.big-text {
    font-size: max(4em, 8vw);
    line-height: 1em;
    & strong {
        color: var(--color-red);
    }
}

#x-root .working-with-us {
    background-image: url("/wp-content/uploads/2025/05/Workingwithus.svg");
    background-size: auto 80% !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

#x-root .anchor-nav-link .wpb_text_column {
    margin-bottom: 0;
}

@media screen and (min-width: 768px) {
    #x-root .anchor-nav-link {
        height: 0px;
    }
}

@media screen and (max-width: 767px) {
    #x-root .working-with-us:not(.show-mob) {
        display: none;
    }
    #x-root .working-with-us.show-mob {
        height: min(100px, 28vw);
    }
}

#x-root .recruit-btn-shrink .button {
    &:after {
        will-change: transform;
        transition: transform 345ms ease-out;
        transform: rotate(90deg);
    }
    &:hover:after {
        transition: transform 125ms ease-in;
        margin-left: 10px;
        transform: translateY(3px) rotate(90deg);
    }
}

@media screen and (max-width: 395px) {
    #x-root .recruit-btn-shrink {
        & .button {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 6px 10px;
            height: 75px;
        }
    }
}

#x-root .job-card-header {
    background-image: url("/wp-content/uploads/2025/05/Donaldson-Timber-Systems-logo-banner-light-background.svg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    padding-top: 135px;
    &.box-position-landing .wpb_text_column {
        margin-top: 0;
    }
    &.whiteout {
        background-image: url("/wp-content/uploads/2025/05/white-Donaldson-Timber-Systems-logo-banner.svg");
    }
}

@media screen and (max-width: 767px) {
    #x-root .job-card-header {
        background-position: left top;
        background-size: auto 4rem;
        padding-top: 4rem;
    }
}

/*Recruitment popup theme */
body.landing-page-cv .revised-roles-feed  .wpb_text_column a:not(.button) {
    color: var(--color-blue);
    text-decoration: underline;
    font-weight: 700;
    font-size: 1.1em;
    &:hover {
        text-decoration: underline;
        color: var(--red);
    }
}
body > .pum {
    backdrop-filter: blur(8px);
    & > .theme-10853 {
        background-color: transparent;
        & .fm-form {
            background-color: white;
            padding: 2em;
            & .fm-header {
                & .fm-header-title {
                    color: var(--red);
                    text-transform: uppercase;
                    font-size: 2em;
                    font-weight: 700;
                }
                & .fm-header-description {
                    color: var(--blue);
                    font-size: 3.5em;
                    font-weight: 700;
                    text-align: left;
                }
            }
            & .fm-form-builder {
                & .wdform-label-section {
                    & .wdform-required {
                        color: var(--color-red);
                        font-size: 1.35em;
                    }
                }
                & input:not([type="file"]),
                & textarea {
                    border: 2px solid var(--blue);
                    border-radius: 3px;
                    transition: var(--transition);
                    &:focus {
                        border-color: var(--red);
                    }
                }
                & .fm-type_submit_reset > div {
                    justify-content: flex-end;
                    & .button-submit {
                        padding: 4px 12px;
                        &:after {
                            background-image: url("/wp-content/uploads/2022/09/icn_arrow-cta-red.svg");
                        }
                    }
                }
                & div[type="type_editor"] a {
                    color: var(--blue);
                    text-decoration: underline;
                    &:hover {
                        color: var(--red);
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 560px) {
    body > .pum {
        & > .theme-10853 {
            & .fm-form {
				padding: 0;
                & .fm-header {
                    & .fm-header-title {
                        font-size: 1.17em;
                    }
                    & .fm-header-description {
                        font-size: 2em;
                    }
                }
            }
        }
    }
}

.banner-text.white a:not(.button) {
    color: white;
    text-decoration: underline;
    opacity: 0.9;
    font-weight: 300;
}

.role-cont {
        position: relative;
        margin: 10% 10% !important;
        z-index: 1;
        &.role-page {
            margin: 10% 0 !important;
        }
    & > .wpb_wrapper { 
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
        gap: 1rem;
        & .role-box {
            &.hide {
                visibility: hidden;
                display: none;
            }
            display: inline-block;
            padding: 0.5rem;
            & > div {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                height: 200px;
                &.jus-cent {
                    justify-content: center;
                    align-items: center;
                }
                & h4 {
                    color: var(--color-red);
                    font-size: 2em;
                }
            }
            & * {
                color: var(--blue);
                margin: 0;
            }
            & p:last-child {
                width: 100%;
                text-align: right;
                position: relative;
                padding-right: 20px;
                &:after {
                    content: "";
                    display: inline-block;
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 16px;
                    height: 31px;
                    background-image: url("/wp-content/uploads/2022/09/icn_arrow-cta-red.svg");
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center center;
                    will-change: transform;
                    transition: transform 125ms ease-out;
                }
            }
            &:hover p:last-child:after {
                transform: translateX(5px);
            }
        }
    }
    &.revised > .wpb_wrapper .role-box {
        padding: 1.5rem;
        box-shadow: 0px 4px 4px 0px rgba(26, 27, 29, 0.15);
        & > div {
            height: 130px;
        }
    }
}

@media screen and (min-width: 768px) {
    .role-cont {
        padding-bottom: 150px;
        margin: 2% 10% !important;
        &.role-page {
            margin: 2% 0 !important;
        }
        &.revised {
            width: 50%;
            margin: 2% 5% 0 auto !important;
            & > .wpb_wrapper {
                grid-template-columns: 1fr 1fr;
                gap: 1.5rem;
            }
        }
    }
    #x-root .grad-overlay-right {
        position: relative;
        &::before {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.46) 53%, rgba(255, 255, 255, 1) 80%);
        }
    }
}

@media screen and (max-width: 768px) {
    #x-root .mov-img-mob {
        position: absolute;
        height: 150px;
        right: -2%;
        top: -65px;
    }
}
#x-root .role-btn-row {
    margin: 1rem 10%;
    & .wpb_text_column {
        margin: 0;
        & p {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
    }
}

#x-root .revised-roles-feed {
    background-attachment: fixed;
    & .job-card-header {
        & .wpb_text_column {
            & {
                padding: 0 2em;
            }
            & img {
                width: 100%;
                height: auto;
            }
            & .apply-cta strong {
                margin-right: 1rem;
            }
        }
    }
}

@media screen and (max-width: 767px) {
    #x-root .revised-roles-feed {
        & .job-card-header {
            margin: 6em 0 0 0 !important;
        }
    }
}

@media screen and (min-width: 768px) {
    #x-root .revised-roles-feed {
        & .job-card-header {
            margin-top: 14em !important;
            & .wpb_text_column {
                & img {
                    width: 50%;
                }
            }
        }
    }
}

@media screen and (min-width: 1001px) and (max-width: 1270px) {
    #x-root .recruit-strapline {
        font-size: 60px;
    }
}

.select-width {
    width: auto;
    flex: 1;
}

.role-title {
    & .title-cont {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2em;
        & .bg-white {
            padding: 1em;
            & h4 {
                color: var(--color-red);
            }
        }
    }
}

@media screen and (min-width: 768px) {
    .role-title {
        width: 50%;
        margin: 2% 5% 0 auto !important;
        & .title-cont {
            justify-content: flex-start;
            & div {
                text-align: left !important;
            }
    
        }
    }
}


@media screen and (max-width: 1140px) and (min-width: 501px) {
   
	.font-size-small h2{
		font-size:2rem !important;
	}
}

@media screen and (max-width: 1499px) and (min-width: 936px) {
	.font-box .wpb_wrapper h2{
		font-size:2rem !important;
	}
}

@media screen and (max-width: 935px) and (min-width: 767px) {
	.font-box .wpb_wrapper h2{
		font-size:1.5rem !important;
	}
}

#x-root #menu-main-menu .sub-menu .menu-item > .sub-menu {
    transform: translate(180px, 0px);
	&::before {
		top: calc(1.5rem - 10px);
	}
}

#x-root .landing-hero-banner.no-margin {
	height: 50vh;
	min-height: 200px;
	max-height: 550px;
	margin-top: 0;
}

/* site updates aug 25 */
#x-root .box-cta-row.update-cta {
	& .vc_col-sm-4 {
    background: transparent;
		& > .vc_column-inner {
			position: relative;
			overflow: hidden;
			&::after {
				content: '';
				background: var(--blue);
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				position: absolute;
				opacity: 0.58;
			}
		}
	}
}
#x-root .cert-logo {
	height: 120px;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	& img {
		max-height: 120px;
		height: auto;
		max-width: 200px;
		width: auto;
	}
}
#x-root .box-cta-row.update-home {
	& .vc_col-sm-4  {
		background-color: var(--blue) !important;
		padding: 0;
		& .wpb_row {
				.vc_column-inner {
				 padding: 0;
				& > .wpb_wrapper {
					flex-direction: column;
						& .wpb_text_column {
							padding: 1rem;
							& .button.inverse::after {
								background-image: url("/wp-content/uploads/2022/09/icn_arrow-cta-red.svg");
							}
						}
						& .vc_single_image-wrapper {
							aspect-ratio: 7/4;
							overflow: hidden;
						}
				}
			}
		}
}
}
@media screen and (max-width: 767px) {
	#x-root .box-cta-row.update-home {
		& .vc_col-sm-4:not(:first-child) {
			margin-top: 3rem;
		}
	}
}
#x-root .match-pad-grid > .wpb_column > .vc_column-inner {
    padding-left: 9px;
    padding-right: 9px;
}

@media screen and (min-width: 768px) {
	#x-root .cta-max-width {
		max-width: 700px;
	}
}

#x-root .webinar-cont {
	& .jd-arrow-list {
		& li {
			position: relative;
			list-style-type: none;
			&::before {
				content: '';
				display: inline-block;
				position: absolute;
				left: -2rem;
				top: 0.5rem;
				width: 1rem;
				height: 1rem;
				background-image: url('https://www.donaldsontimbersystems.com/wp-content/uploads/2022/09/icn_arrow-cta-red.svg');
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center center;
			}
		}
	}
}
@media screen and (max-width: 767px) {
	#x-root .webinar-cont {
		& .mar-bottom {
			margin-bottom: 0;
			& > .bg-blue-transparent-08 {
				width: 100%;
				height: 100%;
				margin: 0;
			}
		}
	}
}

#x-root .webinar-cont:nth-child(odd) .bg-blue {
	background-color: var(--dark-gray);
}

#nf-form-4-cont {
	background: white;
	padding: 1rem;
	& .nf-response-msg {
		border: 2px solid var(--red);
		padding: 1rem;
		text-align: center;
		font-weight: bold;
	}
	& .nf-form-fields-required {
		display: none;
	}
	& .nf-form-content {
		margin-top: 1rem;
		& .nf-field {
			& .html-wrap {
				& h5 {
					color: var(--red);
					text-transform: uppercase;
					font-size: 2em;
					font-weight: 700;
					margin: 0;
				}
				& h3 {
					color: var(--blue);
					font-size: 3.5em;
					font-weight: 700;
					text-align: left;
					margin: 0;
				}
			}
		}
		& #nf-label-field-27 {
			display: none;
		}
	}
	& .nf-after-form-content {
		& .nf-form-errors {
			color: var(--red);
		}
		& #nf-label-field-hp-4 {
			visibility: hidden;
			opacity: 0;
		}
	}
	& .nf-field-element > input {
		&:not([type="submit"]) {
			width: 100%;
		}
		font-size: 1.5rem;
		color: var(--color-blue);
		padding: .25rem 1rem;
		border-color: var(--color-blue);
		border-width: 2px;
		&:focus {
			border-color: var(--color-red);
		}
		&[type="submit"] {
			border: 1px solid var(--blue);
			border-radius: 3px;
			padding: 10px 20px;
			font-size: 16px;
			font-family: arial, sans-serif;
			font-weight: 600;
			color: white;
			text-shadow: none;
			background-color: var(--blue);
			transition: all 200ms var(--transition-curve);
			&:hover {
				background-color: var(--font-gray);
				border-color: var(--blue);
			}
		}
	}
}

#x-root .new-footer-cta .wpb_row {
	display: flex;
	flex-direction: column-reverse;
	flex-wrap: wrap;
	& .vc_col-has-fill {
		min-height: 250px;
	}
	& .bg-red {
		background-image: url('https://www.donaldsontimbersystems.com/wp-content/uploads/2025/04/brand-highlight-for-on-dark.svg');
		background-size: auto 200%;
		background-position: 25%;
		background-repeat: no-repeat;
	}
}

@media screen and (min-width: 768px) {
	#x-root .new-footer-cta .wpb_row {
		flex-direction: row;
	}
}

/*** Learning Hub ***/
#x-root {
	& .border-bottom-white {
		border-bottom: 1px solid white;
	}
	& .centre-vid-fix video {
		max-width: 100%;
	}
	& .wpb_text_column.wpb_content_element.video-cta {
		margin: 0;
		aspect-ratio: 16/9;
		padding: 4rem 10%;
		& > .wpb_wrapper {
			display: flex;
			align-items: flex-end;
			justify-content: center;
		}
	}
	& .grassp-text .wpb_wrapper {
		max-width: 450px;
		margin: 0 auto;
	}
}
/* 
@media screen and (max-width: 530px) {
	#x-root .learn-img-mob img {
    	padding: 0 10%;
	}
} */

@media screen and (max-width: 767px) {
	#x-root .learn-img-size {
		text-align: center;
		& img {
    		width: 436px;
			max-width: 100%;
		}
	}
}

#x-root .featured-news {
	& .image-height-section {
		z-index: 0;
		display: none;
	}
	&  a.button.news-feat {
    	border: none;
    	font-weight: 700;
	}

}

@media screen and (min-width: 768px) {
	#x-root .featured-news .image-height-section {
		display: flex;
	}
}

/*** Ninja Forms ***/
.category-job-vacancy .nf-form-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	& .nf-form-layout {
		display: inline-block;
		position: relative;
		margin: 0 auto;
		width: 90%;
		max-width: 630px;
		padding: 32px;
		box-shadow: var(--box-shadow);
		& h3 {
			margin: 0;
		}
		& .nf-form-fields-required {
			display: none;
		}
		& .nf-field-element {
			& ul {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 1rem;
				justify-content: flex-start;
				align-items: center;
				margin: 0;
				& li {
					    display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: center;
						align-items: center;
						margin: 0;
						gap: 5px;
					& > * {
						margin: 0;
					}
				}
			}
		}
		& input[type="text"],
		& input[type="email"],
		input[type="tel"] {
			font-size: 1rem;
			line-height: 1.24;
			height: 2.65em;
			color: var(--blue);
			background-color: #f2f5f8;
			border: 1px solid #b8c2cc;
			border-radius: 2px;
			width: 100%;
		}
		& textarea {
			width: 100%;
			height: 20ch;
		}
		& input[type="submit"] {
			border: 1px solid var(--blue);
			border-radius: 3px;
			padding: 10px 20px;
			font-size: 16px;
			font-family: arial, sans-serif;
			font-weight: 600;
			color: white;
			text-shadow: none;
			background-color: var(--blue);
			transition: all 200ms var(--transition-curve);
			&::after {
				content: "";
				width: 16px;
				height: 16px;
				margin-left: 10px;
				display: inline-block;
				position: relative;
				bottom: -2px;
				transition: 200ms all var(--transition-curve);
				background-position: center center;
				background-image: url("/wp-content/uploads/2022/09/icn_arrow-cta-red.svg");
				background-size: contain;
				background-repeat: no-repeat;
			}
			&:hover {
				background-color: var(--font-gray);
				border-color: var(--blue);
			}
		}
		& .field-wrap.html-wrap label {
			display: none;
		}
		& .gdpr-check {
			& .checkbox-wrap {
				display: flex;
				flex-wrap: wrap;
				gap: 5px;
				& .nf-field-element {
					width: auto;
				}
				& label {
					text-align: left;
				}
				& .nf-field-description {
					margin-left: 0;
				}
			}
		}
	}
	& .nf-response-msg {
    	background: var(--blue);
		border-radius: 3px;
		& p {
			padding: 1rem 3rem;
			color: white;
			margin: 0;
		}
	}
	& .nf-form-hp {
		display: none;
		visibility: hidden;
	}
}

#x-root .landing-banner.revised-banner {
	margin: 0;
	& div.vc_col-sm-6:not(.vc_col-has-fill) {
		padding: 0 2rem 2rem 10%;
		& h4 {
			margin: 0;
			color: white;
		}
		& .fm-form-container {
			margin: 0;
			padding: 0;
			& .fm-header-text,
			& .fm-header-bg {
				display: none;
			}
			& .wdform-field {
				padding-left: 0;
				padding-right: 0;
				& label {
					color: white;
				}
				& .wdform-required {
					color: var(--red);
				}
			}
			& .fm-form button {
				background-color: var(--green);
				&:hover {
					background-color: var(--font-gray);
					border-color: var(--blue);
				}
			}
		}
	}
	& div.vc_col-has-fill > .vc_column-inner {
		aspect-ratio: 16/9;
	}
}
@media screen and (min-width: 768px) {
	#x-root .landing-banner.revised-banner {
		& div.vc_col-has-fill > .vc_column-inner {
			aspect-ratio: auto;
			background-position: center bottom !important;
		}
	}
}

#x-root .ebook-form {
	& h4 {
		margin: 0;
	}
	& .fm-form-container {
		margin: 0;
		padding: 0;
		box-shadow: none;
		& .fm-header-bg {
			display: none;
			
		}
		& .wdform-field {
			padding-left: 0;
			padding-right: 0;
		}
	}
}

#x-root #Vacancies {
	& .esg-filter-wrapper.roles {
	&::before {
		font-weight: bold;
		font-size: 1rem;
		color: var(--blue);
	}
	&.departments::before {
		content: 'Department';
	}
	&.locations::before { 
		content: 'Location';
	}
	}
	& li .eg-vacancies-container {
		transition: background-color ease-out 200ms;
	}
	& .esg-hovered .eg-vacancies-container {
		background-color: rgba(49,64,90,0.45);
	}
}