/* Override Folder Name: predoc
Override Home Logo: home-logo.svg
Override Home Logo White: home-logo-white.svg
Override Main Color: #035C67 */

/* Override Icons Needed in predoc */
/* 
newWindow.svg
arrowLong.svgs
download.svg
video.svg
audio.svg
photo-gallery.svg
data-visualization.svg
events.svg
papers.svg
bullet.svg
home-logo.svg
home-logo-white.svg
infomation.svg
play-icon.svg
toggleLeft.svg
toggleRight.svg 
*/


/* BUNDLE START  */
/**** Main CSS*****/
/*
========================================================

BREAKPOINTS MOBILE / DESKTOP

========================================================
Desktop: 1920, 1440, 1366, 1280, 1024
Mobile: <1024, 768, 375, 320
........................................................

1.General Page Styles
2.Header/ Back to Top Arrow/ Main Navigation/ Search/ Mobile Hamburger
3.Breadcrumb
4.Hero Module
5.Accordions
6.Footer
7.Body Copy
8.Page Title Module
9.Persistent Module
10.Component
11.Background Colors
12.Single Column
13.Extra Classes
14.Breakpoints
15.CTA Modude
16.PodCast
17.Story Hub

*/

/*
========================================================

7.Body Copy

========================================================
*/
.brackets .bodyCopy-container .visual-element {
    height: 0 !important;
}

.brackets .bodyCopy-container {
    position: relative;
}

    .brackets .bodyCopy-container::before {
        background-image: url("../../img/rustandy/Rustandy-Brackets-BlueTop.svg");
        background-repeat: no-repeat;
        position: absolute;
        top: -18px;
        left: 0px;
        content: "";
        width: 70px;
        height: 70px;
        display: block;
        transform: translateX(100%);
    }


    .brackets .bodyCopy-container::after {
        background-image: url("../../img/rustandy/Rustandy-Brackets-YellowBottom.svg");
        background-repeat: no-repeat;
        position: absolute;
        bottom: -8px;
        right: 0px;
        content: "";
        width: 70px;
        height: 70px;
        display: block;
        transform: translateX(-100%);
    }

@media screen and (max-width: 767px) {
    .brackets .bodyCopy-container::before,
    .brackets .bodyCopy-container::after {
        transform: none;
    }

    .brackets .bodyCopy-container {
        padding-left: 45px;
        padding-right: 45px;
    }
}

/*
========================================================

11.Background colors

========================================================
*/
/* Dark Background color set up  */
.visual-element,
.cta-visual-element {
    --main-highlight-color: #437E3A;
}

.rustandy-green {
	--component-background-color: #437E3A;
	--button-color: var(--main-highlight-color);
	--button-inverse: var(--component-background-color);
	--button-font-color: var(--component-background-color);
	--button-font-inverse: var(--main-highlight-color);
}

.rustandy-green a.btn {
	--external-icon-maroon: url("../img/newWindowWhite.svg");
	--download-icon-maroon: url("../img/downloadWhite.svg");
	--external-icon-white: url("../../img/cbr/rustandy-green-newWindow.svg");
	--download-icon-white: url("../../img/cbr/rustandy-green-download.svg");
}

.rustandy-green-banner .persistent-banner {
	--component-background-color: #437E3A;
	--font-color: var(--white);
	--close-icon: var(--close-icon-white);
    --main-highlight-color: var(--white);
}

@media screen  and (min-width: 1023px) {
    .hero-module .visual-element {
        --main-highlight-color: var(--white);
    }
}

.rustandy-green-banner .persistent-banner .visual-element,
.dark-bg .visual-element {
    --main-highlight-color: var(--white);
}

/*
========================================================

13.Extra Classes

========================================================
*/

.brackets.quote {
    position: relative;
}

    .brackets.quote .quotebody {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .brackets.quote::before {
        background-image: url("../../img/rustandy/Rustandy-Brackets-BlueTop.svg");
        background-repeat: no-repeat;
        position: absolute;
        top: 20px;
        left: 10.5%;
        content: "";
        width: 70px;
        height: 70px;
        display: block;
        transform: translateX(100%);
    }

    .brackets.quote::after {
        background-image: url("../../img/rustandy/Rustandy-Brackets-YellowBottom.svg");
        background-repeat: no-repeat;
        position: absolute;
        bottom: 20px;
        right: 10.5%;
        content: "";
        width: 70px;
        height: 70px;
        display: block;
        transform: translateX(-100%);
    }

@media screen and (max-width: 1025px) {
    .brackets.quote {
        padding-left: 45px;
        padding-right: 45px;
    }

        .brackets.quote::before {
            left: 20px;
        }

        .brackets.quote::after {
            right: 20px;
        }
}

@media screen and (max-width: 767px) {
    .brackets.quote::before,
    .brackets.quote::after {
        transform: none;
    }

    .brackets.quote .quotebody {
        padding-left: 45px;
        padding-right: 45px;
    }
}

/* VISUAL ELEMENTS */
/* .video-transcript .visual-element,
.visual-element {
    background-color: #437E3A;
} */

/* .pageHeader.hero-module .hero-content.text-overlay-off .visual-element,
.hero-module .hero-content.hide-hero-image .visual-element {
    background-color: #437E3A;
} */

/* .cta-visual-element {
    background-color: #437E3A;
} */


/* @media screen and (max-width: 1023px) {
    .hero-module .visual-element {
        background-color: #437E3A;
    }
} */

/* @media screen and (max-width: 767px) {
    .no-visual-element .body-copy h1:first-of-type::after,
    .no-visual-element .body-copy h2:first-of-type::after,
    .body-copy h2.tag::after,
    .hero-module .body-copy .copy-container h2:first-of-type::after {
        border-bottom: 0px solid #437E3A;
    }
}

.hero-module .section-container {
    padding-bottom: 30px;
} */

/* @media screen and (min-width: 1024px) {
    .hero-module-container {
        display: grid;
    }

    .hero-module .hero-image,
    .hero-module .hero-content {
        grid-area: 1 / -1;
    }

    .hero-module .hero-image video,
    .hero-module .hero-image img {
        object-fit: cover;
        min-height: 100%;
    }

    .hero-module .hero-content {
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: flex-end;
        padding-top: 140px;
    }
}  */