/*---- fix issue with top nav ----*/

body.main #main-navigation {
    width: 100%;
}

/*--- widescreen 1170px width changes ---*/

body {
    background-color: #fff;
    /* change background colour to white */
}

.wrapper {
    max-width: none;
    /* remove max-width on wrapper so we can apply max-widths to individual blocks */
}

/*--- general top and bottom padding changes ---*/

.container.all-around-gutters {
    padding: 80px 8% 80px;
    /*change 45px padding to 80px */
}

.container.top-gutter {
    padding: 80px 0px 0px;
    /*change 45px padding to 80px */
}

.container.employee-gutter {
    padding: 80px 8% 0px;
    /*change 30px padding to 80px */
}

.container.small-top-gutter {
    padding: 40px 8% 0px;
    /*change 20px padding to 40px */
}

.container.small-all-around-gutters {
    padding: 20px 8% 0px;
    /*change 15px padding to 20px */
}

/*--- heading styles ---*/

h2 {
    font-family: "pt-serif", sans-serif, sans-serif;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 16px;
    margin-top: 12px;
}

p {
    margin-bottom: 1.25rem;
    font-family: "Open Sans", "open-sans", sans-serif, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    font-size: 1rem;
}

/*-----carousel changes -----*/

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: 70vh !important;
}

.TMHbA,
.gyZxYO, 
.sc-eCImPb {
    height: 100% !important;
}

.sc-gKclnd,
.jGIIbX,
.bPEsdf {
    padding: 0 0 140px !important;
    width: 85% !important;
    margin: 0 auto !important;
}

.eiVAuL h3.quote {
    margin-top: 0px;
    margin-bottom: 20px;
    font-family: pt-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 32px;
    line-height: 44px;
	width: 100%;
    max-width: 720px;
}

.eiVAuL p.attribution {
    font-size: 20px;
    margin-bottom: 50px;
	width: 100%;
    max-width: 720px;
}
/*--- articles cards ---*/

.articles-cards {
    max-width: 1170px;
    /* add max-width for standard desktop */
    margin: 0 auto;
    /* center block */
}

.articles-cards article {
    margin-right: 40px;
    /* increase space between articles to 40px*/
}

.articles-cards article .header {
    overflow: visible;
    aspect-ratio: 5/3;
    /*forcing asepect ration on cards */
    height: auto;
    min-height: inherit !important;
}

.articles-cards article .header img {
    aspect-ratio: 5/3;
    height: auto !important;
}

.articles-cards-description {
    max-width: 1170px;
    /* add max-width for standard desktop */
    margin: 0 auto 30px auto;
    /* center article description */
}

.articles-cards article .content .category-title,
.articles-cards article .content .date-readtime {
    font-style: normal;
    color: #afafaf !important;
    display: inline-block;
    font-family: Open Sans;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .0125em;
    line-height: 20px;
    text-align: left;
    /* change category title to match showcase styling */
}

.articles-cards article .content .article-title {
    margin-top: 0px;
    margin-bottom: 20px;
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    /* update article title to match H3 styling */
}

.articles-cards article .content .article-title a {
    transition: all .2s ease-in-out;
}

.articles-cards article:hover .content .article-title a {
    color: #84bd00;
    /*so that the title changes color on hover */
}

.articles-cards article .content .abstract {
    margin-bottom: 20px;
    /* update bottom margin on p tag */
}

.inline-link {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    text-decoration: none;
    margin: 20px 0;
    position: relative;
    transition: 200ms ease-in ease-out;
    /*update styling on inline link to match chevron button - must add chevron */
}

.articles-cards article .content .btn-container .inline-link {
    color: #666666 !important;
}

.articles-cards article .content .btn-container .inline-link:hover,
.btn-container .inline-link:hover {
    color: #84bd00 !important;
}

.articles-cards article .content .btn-container .inline-link:after,
.btn-container .inline-link:after {
    content: "\203A";
    height: 22px;
    color: #84bd00;
    position: absolute;
    right: -0.9375rem;
    top: 50%;
    margin-top: -12.75px;
    font-size: 20px;
    transition: 200ms;
}

.articles-cards article .content .btn-container .inline-link:hover:after,
.btn-container .inline-link:hover:after {
    right: -1.25rem;
}

/* article cards - one column */

.articles-cards article .content h2.article-title {
    font-size: 60px;
    font-family: "pt-serif", sans-serif, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 3.8rem;
    margin: 1.25rem 0;
}

.articles-cards.one-column article .header {
    max-height: 90%;
    /* remove image height restrictions */
}

.articles-cards.one-column.reversed article,
.articles-cards.one-column article {
    background: transparent !important;
    /*make background transparent for demonstration*/
}


.articles-cards.one-column.reversed article .content {

    height: 95%;
    background: #E7F5F6;
    margin: auto;
    margin-right: -30px;
    padding: 30px;
}

.articles-cards.one-column article .content {

    height: 95%;
    background: #EEF3EE;
    margin: auto;
    margin-left: -30px;
    padding: 30px;
}

/* article cards - two columns */

.articles-cards.two-columns article {
    background-color: transparent !important;
    /*make background transparent for demonstration*/
}

.articles-cards.two-columns article .content {
    width: 95%;
    background: #EBF2D9;
    margin: 0 auto;
    margin-top: -2rem;
    z-index: 2;
    padding: 30px;
    /*example of what this could look like */
}

.articles-cards.two-columns article .content h3.article-title {

    font-family: "pt-serif", sans-serif, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 2rem;
    margin: 0.9375rem 0;
}

/* article cards - three columns */

.articles-cards.three-columns article {
    max-width: 100%;
    background: transparent !important;
}

.articles-cards.three-columns article .content {
    padding: 0.9375rem 0 0 0;
}

/*--- contact cards block ---*/

.contacts {
    padding: 80px 8%;
    /*change padding to match other blocks */
    max-width: 1170px;
    margin: 0 auto;
    /*change width of block to work within max-width on standard desktop */
    background: transparent !important;
    /*make all background of contact cards white or transparent */
    border-top: 1px solid #E1E2E0;
    /*add border similar to projects template */
}

.contacts .row {
    max-width: 1170px;
    margin: 0 auto;
    /*set max-width for standard desktop*/
    justify-content: center;
    /* center contact cards*/
}

.contacts h1,
.contacts h2,
.contacts h3,
.contacts h4,
.contacts h5,
.contacts h6 {
    margin-top: 0px;
    max-width: 1170px;
    margin: 0 auto 30px auto;
    font-size: 20px;
    line-height: 32px;
    /*make headings same size as H3 title*/
}

.contacts .row article .people-block-details .people-block-header {
    margin: 0;
    /*add 0 margins */
}

/* featured block */


.content-block.featured-block {
    max-width: 1170px;
    margin: 0 auto;
    /* add max-width to feature block */
}


.content-block.featured-block .featured-article {
    max-width: 65.5%;
    /*make max-width 2/3 of the full block */
    margin-right: 40px;
    /*change margin to match grid spacing */
    height: 420px;
    /*make height the same as the mini-articles plus spacing requirements */
}

.content-block.featured-block .mini-articles {
    max-width: 31%;
    /*make max-width 1/3 of the full block */
}

.content-block.featured-block .mini-articles .article {
    margin-bottom: 40px;
    /* change spacing between tiles */
    height: 11.85rem;
}

.content-block.featured-block.video-only {
    margin-bottom: -80px;
    /*resolve padding issue */
    min-height: 35vh;
}

.content-block.featured-block.video-only .featured-article {
    justify-content: center;
    /*adjust gap between content */
}

.content-block.featured-block .mini-articles picture img {
    aspect-ratio: 5/3;
    /*forcing aspect ratio */
    height: auto !important;
}

.content-block.featured-block.four-columns .mini-articles .article:nth-child(4) {
    display: none;
    /* turn last article off */
}

.content-block.featured-block.four-columns .mini-articles .article,
.content-block.featured-block.four-columns .mini-articles .article:nth-child(1) {
    margin-right: 40px;
    /* change margin to 40px */
    margin-bottom: 0px;
    height: auto;
    aspect-ratio: 5/3;
    /* forcing aspect ratio */
}

.content-block.featured-block.four-columns .mini-articles .article:nth-child(3) {
    margin-right: 0px;
    /* remove margin on 3rd block */
}

.content-block.featured-block .mini-articles .article:before {
    opacity: 0.2;
}

section.content-block.featured-block.video-only a.inline-link, .column.text-left-column-height a.inline-link {
    margin: 0;
}

/*---full width block ---*/

/*we need to make the inner content relative, and the background iamge absolute - they swap positions */

.experience-aurecon picture {
    position: absolute;
    /*note change here*/
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.experience-aurecon .inner-content {
    position: relative;
    /*note change here*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 85%;
    padding: 80px 0;
    max-width: 1170px;
    margin: 0 auto;
    /*centre content within standard width*/
    min-height: 50vh;
    /*add min-height */
}

/*--- left content adjustment ----*/

.experience-aurecon .inner-content.left .body {
    width: 32%;
}

/*update video backgrounds as well*/

.experience-aurecon video {
    display: block;
    vertical-align: baseline;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    object-fit: cover;
}

/*fix inlien buttons inside full width blocks */

.experience-aurecon a.inline-link {
    margin: 0;
}

/*---- full width rich content text block ----*/

section.rich-content

/* full width rich content block needs a section wrapper to work */
    {
    max-width: 1170px;
    margin: 0 auto;
}

/*---- full width rich content text block ----*/

.content-block.employee-spotlight {
    max-width: 1170px;
    margin: 0 auto;
    /* apply max-width and centering */
}


/*---- image block ---*/

.garden {
    background-repeat: no-repeat;
    background-position: left top;
    /*alter position*/
    margin: -4.6875rem 0px 0px;
    height: 100%;
    width: 100%;
    min-height: 410px;
    /*add min-height for widescreen desktop */
    display: flex;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    background-size: cover;
    /*add background-size*/
}

/*---- Two column text video ----*/

.content-block.text-blocks {
    max-width: 1170px;
    margin: 0 auto;
    /* apply max-width and centering */
}

.content-block.text-blocks .row.reversed .column:first-child {
    margin: 0px 0px 0px 40px;
	justify-content: center;
	flex: 1 0 48%;
}

/*---- social contribution block ----*/
.content-block.social-contribution {
    margin: 0 auto;
    /*  centering block */
}

/*---- story block ----*/

.content-block.story-blocks {
    background-size: cover;
    /* change background from contain to cover so bg image stretches full width of the screen */
}

.content-block.story-blocks .description {
    max-width: 760px;
    text-align: center;
    margin: 30px auto 30px auto;
    /*position description */
    padding: 0px;
    /*remove padding around description text */
}

.content-block.story-blocks .stories .story-container {
    max-width: 1170px;
    margin: 0 auto;
    /* apply max-width and centering */
}

.content-block.story-blocks .stars {
    width: 100%;
    /* make stars appear 100% across width of block */
}

.content-block.story-blocks .stories {
    background-size: 120%, 100% 100%;
    /*make arched background SVG appear full width */
}

.content-block.story-blocks .stories .stories-footer {
    padding: 80px 0;
    /* applying spacing requirements to footer section */
}

.content-block.story-blocks .stories .stories-footer .vacancy-browser-wrapper .vacancy-browser p {
    max-width: 100%;
    /*change width requirements on footer text */
}

.content-block.story-blocks .description h1,
.content-block.story-blocks .description h2,
.content-block.story-blocks .description h3,
.content-block.story-blocks .description h4 {
    margin: 0px 0px 1.25rem;
    padding: 0rem;
    font-size: 60px;
    line-height: 3.8rem;
}

/* one section / two section banner - this parallax banner will need a lot of work */

.vacancy-browser-wrapper {
    max-width: 1170px;
    /* add max-width to banner */
}

.vacancy-browser-wrapper .vacancy-browser h1,
.vacancy-browser-wrapper .vacancy-browser h2,
.vacancy-browser-wrapper .vacancy-browser h3,
.vacancy-browser-wrapper .vacancy-browser h4,
.vacancy-browser-wrapper .vacancy-browser h5,
.vacancy-browser-wrapper .vacancy-browser h6 {
    margin: 0px 0px 0.9375rem;
    font-size: 40px;
    line-height: 3.2rem;
}

.vacancy-browser-wrapper .vacancy-browser p {
    max-width: 100% !important;
}

/*--- all buttons ---*/

a.button.social-button,
#greenol,
#greenol2,
#greenol3 {
    height: 40px !important;
    min-height: 40px;
    max-height: 40px;
    font-size: 16px;
    background: linear-gradient(45deg, transparent, transparent, transparent) !important;
    border: 1px solid #84bd00;
    color: #84bd00 !important;
    border-radius: 20px;
    max-width: none;
    min-width: 10rem;
    padding: 0 1.25rem;
    transition: all .3s ease-in-out;
}

.button.social-button#MainCTA {
    background: linear-gradient(45deg, #84bd00, #84bd00) !important;
    border: 1px solid #84bd00;
    transition: all .3s ease-in-out;
    color: #ffffff !important;
}

a.button.social-button:hover,
#greenol:hover,
#greenol2:hover,
#greenol3:hover,
.button.social-button#MainCTA:hover {
    color: #fff !important;
    background: linear-gradient(45deg, #84bd00, #84bd00, #fed141) !important;
    text-decoration: none;
    border: transparent;
    transition: all .3s ease-in-out;
}

.content-block.featured-block .featured-article .btn-container .button,
.experience-aurecon .btn-container .button.social-button {
    height: 40px !important;
    min-height: 40px;
    max-height: 40px;
    font-size: 16px;
    background: linear-gradient(45deg, transparent, transparent, transparent) !important;
    border: 1px solid #ffffff;
    color: #ffffff !important;
    border-radius: 20px;
    max-width: none;
    min-width: 10rem;
    padding: 0 1.25rem;
}

.content-block.featured-block .featured-article .btn-container .button:hover,
.experience-aurecon .btn-container .button.social-button:hover,
.button.social-button#MainCTA:hover {
    color: #fff !important;
    background: linear-gradient(45deg, #84bd00, #84bd00, #fed141) !important;
    text-decoration: none;
    border: transparent;
}


.btn-container .play-video-button svg,
#greenol2 svg,
.content-block.featured-block .featured-article .btn-container .button svg,
.content-block.employee-spotlight .about .btn-container .button svg {
    fill: none;
    display: none;
    /*remove SVGs on buttons */
}

.content-block.employee-spotlight .employee .about .icon-link {
    justify-content: center;
    /*make sure text is centered on play buttons */
}

/* Turning buttons in the story block to match new outline button */

.story .btn-container.stacked.center a,
.hero.alt-hero a.button,
.swiper-slide a.button {
    height: 40px !important;
    min-height: 40px;
    max-height: 40px;
    font-size: 16px;
    background: transparent !important;
    border: 1px solid #ffffff;
    color: #ffffff !important;
    border-radius: 20px;
    max-width: none;
    min-width: 10rem;
    padding: 0 1.25rem;
}

.story .btn-container.stacked.center a:hover,
.hero.alt-hero a.button:hover,
.swiper-slide a.button:hover {
    color: #fff !important;
    background: linear-gradient(45deg, #84bd00, #84bd00, #fed141) !important;
    text-decoration: none;
    border: transparent;
}

/* Updating styles of main green CTA in certain blocks */

.vacancy-browser-wrapper .vacancy-browser .btn-container .button,
.content-block.employee-spotlight .about .btn-container .button,
.hero a.button {
    height: 40px !important;
    min-height: 40px;
    max-height: 40px;
    font-size: 16px;
    border-radius: 20px;
    max-width: none;
    min-width: 10rem;
    padding: 0 1.25rem;
    background: #84bd00 !important;
    color: #ffffff !important;
    border: none;
}

.vacancy-browser-wrapper .vacancy-browser .btn-container .button:hover,
.content-block.employee-spotlight .about .btn-container .button:hover,
.hero a.button:hover {
    color: #fff !important;
    background: linear-gradient(45deg, #84bd00, #84bd00, #fed141) !important;
    text-decoration: none;
    border: transparent;
}

.hero a.scroll.button.icon-link

/* fixing scroll */
    {
    cursor: default;
    height: 60px !important;
    justify-content: space-between;
    background: transparent !important;
    border: none;
    font-size: 20px;
    min-height: 60px;
    max-width: 60px;
    padding: 0;
    color: #000000 !important;
}

.hero.alt-hero a.scroll.button.icon-link

/* fixing scroll */
    {
    color: #ffffff !important;
}

.hero.alt-hero .clouds {
    width: 40%;
    /*adjust width of animation to be relational */
}

/*hyperlinks */

.rich-content a:not(.inline-link),
.column.text-left-column-height a:not(.inline-link) {
    text-decoration: none;
    color: inherit;
    background-image: linear-gradient(#A8D04C 0%, #A8D04C 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.125rem;
    background-position: 0 100%;
    transition: all 125ms ease-in;
}

.rich-content a:hover:not(.inline-link),
.column.text-left-column-height a:hover:not(.inline-link) {
    background-image: linear-gradient(#c4e58e 0%, #c4e58e 100%);
    background-size: 100% 100%;
    color: #333;
}

/* tweaks for Sustainability page example */

.icon-container .icon a {
    text-decoration: none;
    background: none;
}


/*--- back to top button ----*/

.cd-top.cd-is-visible {
    align-items: center;
    background: #84bd00;
    border: none;
    border-radius: 10px !important;
    border-radius: 5px !important;
    display: flex;
    justify-content: center;
    min-width: 0 !important;
    opacity: .5;
    padding: 0 !important;
    width: 40px;
}

a.careers-cd-top img {
    display: none;
}

.careers-cd-top:before {
    content: "\2039";
    font-size: 40px;
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -2px;
    color: white;
    text-decoration: none;
    transform: rotate(90deg);
    transition: all .3s ease-in-out;
}

.careers-cd-top:hover:before {
    top: -14px;
}

@media only screen and (max-width: 64em) {
	
	.eiVAuL h3.quote, .eiVAuL p.attribution {
		max-width: 500px;
	}
	
/*---- Two column text video ----*/
	
	.content-block.text-blocks .row.reversed {
    flex-direction: column;
}
	
	.content-block.text-blocks .row.reversed .column:first-child {
    margin: 0px 0px 40px 0px;
	justify-content: center;
	flex: 1 0 100%;
}
	
	.content-block.text-blocks .row .column.video-block {
    padding-bottom: 50%;
}


    /* --- article cards for mobile */

    .articles-cards.three-columns {
        flex-wrap: wrap;
    }

    .articles-cards.three-columns article {
        margin-bottom: 40px;
        margin-right: 0;
    }

    .articles-cards.three-columns article .header {
        height: 100%;
        min-height: inherit;
        max-height: inherit;
        width: 100%;
        overflow: visible;
    }

    .articles-cards.three-columns article .header img {
        aspect-ratio: 5/3;
        height: auto !important;
        min-height: inherit;
    }

    .articles-cards.three-columns article:last-child {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        margin-right: 0px;
        margin-bottom: 0px;
    }

    .articles-cards.three-columns article:last-child.transparent .header {
        max-width: inherit;
        height: 100%;
        max-height: inherit;
        min-height: inherit;
    }

    .articles-cards.three-columns article:last-child .header img {
        min-height: inherit;
    }

    .articles-cards.three-columns article:last-child.transparent .content {
        padding: 0.9375rem 5px 0.9375rem 0px;
    }

    /* full width blocks */

    .experience-aurecon .inner-content.left .body {
        width: 55%;
    }

    /* featured blocks - project banner */

    .content-block.featured-block.video-only .featured-article {
        height: auto !important;
        padding: 40px 1.25rem;
    }

    .content-block.featured-block .featured-article picture img {
        width: 100%;
        object-fit: cover;
        aspect-ratio: 5/3;
        height: 100%;
        min-height: inherit;
    }

    /* featured blocks - project tiles */

    .content-block.featured-block.four-columns .mini-articles {
        flex-direction: column;
    }

    .content-block.featured-block.four-columns .mini-articles .article,
    .content-block.featured-block.four-columns .mini-articles .article:nth-child(1) {
        margin: 0 0 40px 0;
        height: auto;
        aspect-ratio: 5/3;
    }

    .content-block.featured-block .mini-articles picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 5/3;
        height: 100% !important;
    }

    .content-block.featured-block.four-columns .mini-articles .article:nth-child(3) {
        margin-bottom: 0;
    }

    .content-block.featured-block .mini-articles .article:before {
        opacity: 0.3;
    }
}

@media only screen and (max-width: 32em) {
	
	.eiVAuL h3.quote {
		font-size: 24px;
		line-height: 34px;
	}
	
	.eiVAuL p.attribution {
		font-size: 16px;
		line-height: 24px;
	}

    /* top carousel */

    .jGIIbX,
    .bPEsdf {
		padding: 0px 0px 80px !important;
        word-break: break-word;
    }
    
    .swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: 85vh !important;
}

    /*full width block */

    .experience-aurecon .inner-content.left .body {
        width: 100%;
    }


}