:root {
	--green: #C5D41E;
	--light-green: #d1dd4b;
	--content-width: 1366px;
	--inner-width: 900px;
	--section-gap: 50px;
	--box-shadow: 0px 0px 6px rgb(0,0,0,0.3);
	--box-shadow-hover: 0px 0px 15px rgb(0,0,0,0.3);
	--image-shadow: 2px 2px 5px rgb(0,0,0,0.2);
	--grey: #EDEDED;
	--grey-dark: #677181;
	--white: #FFFFFF;
	--black: #000000;
}

/* Hubspot forms */
.hbspt-form{text-align: left; padding: 30px 0 0 !important}
.hbspt-form label{color: var(--primary); font-weight:500}
.hbspt-form input[type=text], .hbspt-form input[type=email]{margin: 0 auto; width:100%; max-width: 100%; border-radius:100px}
.hbspt-form input[type=submit]{background-color: var(--secondary); color: #000; font-weight:700; border-radius:100px; border:0; padding-left: 30px; padding-right:30px; margin-top: 15px; cursor:pointer}
.hs-form-booleancheckbox{text-align: left}
.hs-form-required{color: var(--secondary); padding-left: 4px}
.hbspt-form .input{box-sizing: border-box; position: relative; padding: 5px 0 15px}
.hbspt-form .input input{max-width: 100%; box-sizing: border-box; border-radius:100px}

img.aligncenter{margin: 0 auto; display: block}

/* Buttons */
.button{cursor: pointer; background-color: var(--primary); color:#fff; padding: 10px 15px; border-radius:4px; box-shadow:1px 1px 3px rgb(0,0,0,0.5); text-transform: uppercase; font-size:1.2rem; font-weight:700}
.button:hover{background-color: var(--light-green)}

.button{padding: 15px 25px; text-align: center; display: inline-block; transition:all 300ms ease; cursor:pointer; background-color: var(--primary); color: #fff}
.button:hover{background-color:var(--lighter)}
.view-all-news-button{color: #fff !important; margin-bottom: 30px}

.button-grey{background-color: var(--grey) !important; color: var(--primary) !important}
.button-grey:hover{background-color: var(--primary) !important; color: #ffffff !important}

.button-plum{background-color: var(--primary) !important; color: #ffffff !important}
.button-plum:hover{background-color: var(--grey) !important; color: var(--primary) !important}

.breadcrumbs{list-style: none; padding: 0; margin: 50px auto 15px; max-width: var(--content-width); display: flex; justify-content: flex-start; align-items: center; font-size:0.9rem}
.breadcrumbs > li{padding: 0; margin: 0}
.breadcrumbs a{display: block; padding: 0 15px 0 0; color: #666}
.breadcrumbs a:hover{color:var(--links)}
.breadcrumbs a::after{content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: 1rem;}
.breadcrumbs > li:last-of-type a::after{content:""}


/* Full width image block */
.acf-fullwidthimage-block{text-align: center; margin: 30px auto}
.acf-fullwidthimage-block > div{text-align: center; width:var(--content-width); padding: 0; margin: 0 auto}
.acf-fullwidthimage-block img{object-fit: contain; width:100%; height: 100%}
@media only screen and (max-width: 1000px) {
	.sub-footer{padding: 30px}
	.sub-footer-flex{flex-direction: column; grid-gap: 15px}
	.sub-footer-flex > div{max-width: 100%; text-align: center}
	.sub-footer-nav{justify-content: center}
}
@media only screen and (max-width: 600px) {
	.acf-fullwidthimage-block > div{max-width:100% !important}
}

/* H1 with text beneath */
.acf-h1withtext-block{margin: var(--section-gap) auto; max-width: calc(var(--content-width) + 60px); padding: 0 30px; }
.acf-h1withtext-block h1{margin: 0; color: var(--primary)}


/* General content*/
.general-content-block{padding:50px 30px; overflow: hidden}
.general-content-block > div{margin: 0 auto; padding: 0; max-width: var(--content-width)}
.general-content-block iframe{margin: 0 auto; display: block; width:600px}
.general-content-block .alignleft{float:left; margin: 0 30px 30px 0}
.general-content-block h2, .general-content-block h3{clear: left}
.general-content-block h2{margin: 50px 0 15px}
.general-content-block h2:first-of-type{margin: 0 0 15px}

/* CTA grid */
.acf-ctagrid-block-wrap{padding: 30px; position: relative}
.acf-ctagrid-block-wrap > h2{text-align: center; margin: 15px auto 50px}
.acf-ctagrid-block-wrap > h2 span{color:var(--secondary)}
.acf-ctagrid-block{display: flex; justify-content: center; align-items: stretch; grid-gap: 30px; flex-wrap: wrap; margin: 30px auto; max-width: var(--content-width)}
.acf-ctagrid-block > div{width:100%; max-width: 435px; text-align: center; font-size:1.2rem; position: relative}
.acf-ctagrid-block h2{color:var(--primary); line-height: 1; padding: 0; margin: 0 0 15px}
.acf-ctagrid-block .cta-button a{background: var(--secondary); color: #fff; padding: 10px 25px; border-radius:5px; cursor: pointer; display: inline-block; font-size:1.2rem; transition:all 300ms ease}
.acf-ctagrid-block .cta-button a:hover{transform:scale(1.1); box-shadow:1px 1px 10px rgb(0,0,0,0.5)}
.acf-ctagrid-block .cta-content{min-height: 250px}
.acf-ctagrid-block .cta-icon{aspect-ratio:16/7;}
.acf-ctagrid-block .cta-icon img{object-fit: contain; object-position: center; width:100%; height: 100%}

.acf-ctagrid-block .cta-icon-video{
    display: flex;
    justify-content: center;
    align-items: center;
    /* optional: control size */
    width: 100%;
    aspect-ratio:16/7;
	overflow: hidden;
}

.acf-ctagrid-block .cta-icon-video video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ctagrid-grid-mobile{display: none; position: relative}
.ctagrid-grid-mobile .cta-arrow{display: block; position: absolute; top:160px; color: #fff; font-size:2rem; font-weight:400; z-index: 2; cursor:pointer; transition:all 300ms ease}
.ctagrid-grid-mobile .cta-arrow:hover{opacity: 0.6}
.ctagrid-grid-mobile .cta-arrow-prev{left:-20px}
.ctagrid-grid-mobile .cta-arrow-next{right: -20px}
.cta-carousel{max-width: 300px; height:420px; margin: 0 auto; position: relative}
.cta-carousel > div{text-align: center; position: absolute; top:0; left:0; opacity: 0}
.cta-carousel > div:first-of-type{opacity: 1}
.cta-carousel .cta-icon{max-width: 150px; margin: 0 auto 15px}
.cta-carousel .cta-content{width:300px}

@media only screen and (max-width: 600px) {
	.acf-ctagrid-block{flex-direction: column}
	.acf-ctagrid-block > div{margin: 0 auto}
	.acf-ctagrid-block{display: none}
	.ctagrid-grid-mobile{display: block; z-index: 1}
}



/* Hero with colour bg */
.hero-block-colour{margin: 0 auto; color: #fff !important; padding: 50px 30px}
.hero-block-colour h1{color: #fff !important; line-height: 1}
.hero-block-colour .hero-flex{display: flex; justify-content: space-between; align-items: center; max-width: var(--content-width); margin: 0 auto; grid-gap: 50px}
.hero-block-colour .hero-flex > div{width:100%; text-align: center; box-sizing: border-box}
.hero-block-colour .hero-flex > div:last-of-type img{object-fit: contain; object-position: center; width:100%; height: 100%}
.hero-block-colour .hero-image-cell{max-width:648px}
.hero-block-colour .hero-icon-cell{text-align: center}
.hero-block-colour .button{background-color: #fff !important; color: var(--primary) !important}

@media only screen and (max-width: 1000px) {
	.hero-block-colour .hero-flex{flex-direction: column}
	.hero-block-colour .hero-flex > div{max-width: 100%}
}
@media only screen and (max-width: 600px) {
	.hero-block-colour h1{font-size:2.6rem}
}


/* Hero with photo bg and CTA */
.hero-block-photo{background-size: cover; background-position: center; background-color: var(--primary); color: #fff; padding: 20px 30px; display: flex; justify-content: center; align-items: center; aspect-ratio:16/4.5; position: relative}
.hero-block-photo .hero-photo-inner{max-width: var(--content-width); text-align: center; margin: 0 auto; position: relative; z-index: 2}
.hero-block-photo h1{color: #fff; text-align: center; margin: 0; padding: 0; font-family: Arial; font-size: 2.5rem; font-weight:500}
.hero-block-photo .hero-photo-inner > p{padding: 0 0 15px}
.hero-block-photo h1 > p{padding: 0; margin: 0; line-height: 1.2}
.hero-block-photo .button{background-color: rgb(0,0,0,0.2); border:3px solid #fff; color: #fff !important; letter-spacing: 5px; font-size:1rem; text-transform: none; padding: 10px 20px}
.hero-block-photo img{object-fit: cover; object-position: center; width:100%; height: 100%; position: absolute; top:0; left: 0; z-index: 1; opacity: 0.5}


/* Two column - content and photo */
.two-col-block{margin: 0; padding: 30px}
.two-col-block .two-col-inner{display: flex; justify-content: space-between; align-items: center; grid-gap: 60px; margin: 0 auto; max-width:var(--content-width)}
.two-col-block .two-col-inner > div{max-width:50%; width:100%}
.two-col-block .two-col-inner h2{color: var(--primary); padding: 0; margin: 0 0 15px; font-size:2rem}


.two-col-block .two-col-inner.flip{flex-direction: row-reverse}

.two-col-block .twocol-photo{}
.two-col-block .twocol-photo{width:100%; height: 100%}

.two-col-block.fit-cover .twocol-photo{aspect-ratio:16/10; padding: 0}
.two-col-block.fit-cover .twocol-photo img{object-fit: cover; width:100%; height: 100%}
.two-col-block.fit-contain .twocol-photo{}
.two-col-block.fit-contain .twocol-photo img{box-shadow:0 0 15px rgb(0,0,0,0.2)}

.twocol-buttons .button{margin-bottom: 10px; margin-right: 10px}

@media only screen and (max-width: 1000px) {
	.two-col-block .two-col-inner{flex-direction: column !important}
	.two-col-block .two-col-inner > div{max-width: 100%}
}

/* Get started */
.get-started-block{text-align:center; color: #FFFFFF; padding: 60px 30px 60px; margin: 0 auto; display: block}
.get-started-block .button{background-color: #fff; font-size:0.9rem; transition:all 100ms ease-in-out}
.get-started-block .button:hover{background-color: var(--secondary) !important; box-shadow: var(--box-shadow-hover)}

/* Solution builder tool block */
.solution-builder-block{display: block; padding: 30px 30px 60px}
.solution-builder-inner{text-align:center; max-width: var(--content-width); margin: 0 auto}


/* Curves divide */
.curve-divide{}
.curve-divide.flip{transform: scaleX(-1)}
.curve-divide.same{max-height:100px; overflow: hidden}
.curve-divide.same .curve-flex-2{max-width: calc(100% - 100px); transform: translate(0, -100px) scaleY(-1); max-height: 100px}
.curve-divide .curve-flex-1{display: flex; justify-content: space-between; align-items: stretch}
.curve-divide .curve-flex-1 > div{width:100%;  height: 100px; overflow: hidden}
.curve-divide .curve-flex-1 > div:first-of-type{}
.curve-divide .curve-flex-1 > div:last-of-type{max-width: 100px}

.curve-divide .curve-flex-2{display: flex; justify-content: space-between; align-items: stretch}
.curve-divide .curve-flex-2 > div{width:100%; height: 100px; overflow: hidden}
.curve-divide .curve-flex-2 > div:first-of-type{max-width: 100px}
.curve-divide .curve-flex-2 > div:first-of-type svg{transform:rotate(180deg)}

@media only screen and (max-width: 600px) {
	.curve-divide.same{max-height:50px}
	.curve-divide.same .curve-flex-2{max-width: calc(100% - 50px); transform: translate(0, -50px) scaleY(-1); max-height: 50px}
	.curve-divide .curve-flex-1 > div{height: 50px}
	.curve-divide .curve-flex-1 > div:last-of-type{max-width: 50px}
	.curve-divide .curve-flex-2 > div{height: 50px}
	.curve-divide .curve-flex-2 > div:first-of-type{max-width: 50px}
	.curve-divide svg{object-fit:cover; width:100%; height: 100%; object-position: top center}
}


/* CTA */
.cta-block{padding:30px 30px 60px}
.cta-block h2{color: var(--primary); font-size:2.4rem; padding: 0; margin: 0 0 15px}
.cta-block .button{text-transform: none; color: #fff !important; font-size:1rem}
.cta-block .cta-block-inner{max-width:800px; margin:0 auto; text-align:center}

.cta-block .button:hover{transform:scale(1.1); box-shadow:2px 2px 10px rgb(0,0,0,0.3)}
.cta-block .cta-button-wrap{padding:30px 10px 0}

/* 4 column information grid */
.acf-fourcolgrid-block{padding:60px 30px}
.acf-fourcolgrid-block .fourcolgrid-flex{display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; grid-gap: 30px; max-width: var(--content-width); margin: 0 auto}
.acf-fourcolgrid-block .fourcolgrid-flex > div{width:100%; max-width:319px; text-align: center}
.acf-fourcolgrid-block h3{padding:0; margin:0 0 15px; font-size:1.8rem; line-height: 1}
.fourcolgrid-icon{aspect-ratio:4/2.3; margin: 0 auto 15px; z-index: 2; overflow: hidden}
.fourcolgrid-icon img{object-fit: contain; object-position: center; width:100%; height: 100%}
.fourcolgrid-video-icon{transform:scale(1.6); z-index: 1; position: relative}
.fourcolgrid-content{z-index: 2; position: relative}

.fourcolgrid-mob-wrap{display: none; position: relative}
.fourcolgrid-mob{height: 440px}
.fourcolgrid-mob-wrap .cta-arrow{display: block; position: absolute; top:190px; font-size:2rem; font-weight:400; z-index: 2; cursor:pointer; transition:all 300ms ease; color: var(--primary)}
.fourcolgrid-mob-wrap .cta-arrow:hover{opacity: 0.6}
.fourcolgrid-mob-wrap .cta-arrow-prev{left:-20px}
.fourcolgrid-mob-wrap .cta-arrow-next{right: -20px}
.fourcolgrid-mob{position: relative}
.fourcolgrid-mob > div{width:100%; max-width: 300px; height: 450px; position: absolute; top:0; left:0; opacity: 0; text-align: center}
.fourcolgrid-mob > div:first-of-type{opacity: 1}
.fourcolgrid-mob .fourcolgrid-video-icon{transform:none}

@media only screen and (max-width: 600px) {
    .fourcolgrid-flex{display: none !important}
    .fourcolgrid-mob-wrap{display: block !important}
}



/* Recent insights */
.recent-insights-block{padding: 50px 30px 60px; text-align: center; display: block}
.recent-insights-block h2{color: var(--primary); margin: 0 auto 15px; text-align: left}
.recent-insights-block-content{max-width: var(--content-width); text-align: left; margin: 0 auto}

.recent-insights-flex{max-width:var(--content-width); display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; grid-gap: 30px; margin: 30px auto}
.recent-insights-flex > div{width:100%; max-width: 319px; text-align: left}
.recent-insights-flex > div a{color: var(--primary)}

.recent-insights-flex > div:nth-of-type(4n + 1) .sash {background-color: var(--tangerine)}
.recent-insights-flex > div:nth-of-type(4n + 2) .sash {background-color: var(--blue)}
.recent-insights-flex > div:nth-of-type(4n + 3) .sash {background-color: var(--coral); color: #fff;}
.recent-insights-flex > div:nth-of-type(4n) .sash {background-color: var(--primary); color: #fff;}

.recent-insights-flex h3{padding: 0; margin: 0 0 5px}
.recent-insights-flex h3 a{color: var(--primary) !important}
.recent-insights-flex .entry-excerpt{padding: 10px 0 15px 0; line-height: 1.4rem}
.read-more{color: var(--links); font-weight:700}
.recent-insights-cta{text-align: center; padding:0 0 50px}
.recent-insights-cta .button{text-transform: none; font-size:1.1rem}
.recent-insights-cta .button:hover{transform:scale(1.1); box-shadow:2px 2px 10px rgb(0,0,0,0.3)}

.recent-insights-flex .news-thumb{aspect-ratio:16/9; background:#f8f8f8; margin: 0 auto 15px; position: relative; border-top-right-radius:40px; overflow: hidden}
.recent-insights-flex .news-thumb img{object-fit: cover; object-position: center; width:100%; height: 100%; z-index: 1; transition:all 300ms ease}
.recent-insights-flex .news-thumb .sash{background: var(--secondary); color: var(--primary); text-align: center; z-index: 2; position: absolute; top:10px; left:0; width:60%; padding: 6px 2px 4px; border-top-right-radius:10px; font-size:0.8rem}
.recent-insights-flex .news-thumb:hover img{transform:scale(1.1)}
.recent-insights-loop{margin-bottom: 100px}

.insights-content{max-width: var(--content-width); margin: 0 auto; text-align: left}

@media only screen and (max-width: 1000px) {
	.recent-insights-flex{justify-content: center}
}
@media only screen and (max-width: 600px) {
	.recent-insights-flex > div{max-width: 300px; margin-bottom: 30px}
	.recent-insights-flex h3{font-size:1.8rem}
	.recent-insights-flex-tease > div{display:none}
	.recent-insights-flex-tease > div:first-child {display: block}
}


/* Contact */
.contact-block{padding:30px}
.contact-block-flex{max-width:var(--content-width); margin: 0 auto; display:flex; justify-content: space-between; align-items: stretch; grid-gap: 30px}
.contact-block-flex > div{width:100%; max-width: 50%; min-height: 200px}
.contact-block .contact-map{aspect-ratio:16/9; margin-bottom: 50px}
.contact-block .contact-map iframe{width:100%; height: 100%}
.contact-details i{font-size:1.6rem; color: var(--primary); margin-right: 10px; transform:translate(0, 4px)}
.contact-field-item{padding: 0; margin: 0 0 15px; font-weight:700}
.contact-field-item i{margin-right: 6px}
.contact-email{}
.contact-tel{}
.contact-address{margin: 15px 0}
.contact-content{}

.contact-socials{display: flex; justify-content: center; align-items: center; grid-gap: 10px; margin: 50px auto}
.contact-socials > div{}
.contact-socials i{font-size:2.2rem}
.contact-cta-button-wrap{text-align: center}
@media only screen and (max-width: 900px) {
	.contact-block-flex{flex-direction: column}
	.contact-block-flex > div{max-width: 100%}
}

/* Two cols, one with border*/
.two-column-border-block{padding:30px}
.two-column-border-block-flex{max-width:var(--content-width); display:flex; justify-content: center; align-items: stretch; margin: 30px auto; grid-gap: 50px}
.two-column-border-block-flex.flip{flex-direction: row-reverse}
.two-column-border-block-flex > div{width:100%}
.two-column-border-block-flex > div:first-of-type{max-width: 40%}
.two-column-border-block-flex > div:first-of-type h1{padding:0; margin: 0 0 15px}
.two-column-border-block-flex > div:last-of-type{border:4px solid #efefef; border-radius:30px; padding: 15px 30px}
.two-column-border-block-flex > div:last-of-type h2:first-of-type{margin-top: 0; padding-top: 0}



@media only screen and (max-width: 1000px) {
	.two-column-border-block-flex{flex-direction: column; grid-gap: 30px}
	.two-column-border-block-flex > div{width:100%; min-width:100%; max-width: 100% !important}	
}


/* 3 box grid */
.acf-threecolgrid-block{text-align:center; padding: 90px 30px; position: relative}
.acf-threecolgrid-block h2{font-size:2rem; text-align: left; max-width: var(--content-width); margin: 0 auto}
.threecolgrid-flex{display: flex; justify-content: center; align-items: stretch; flex-wrap:wrap; grid-gap: 50px; max-width:var(--content-width); margin: 30px auto}
.threecolgrid-flex > div{width:100%; max-width:421px; background: #fff}
.acf-threecolgrid-content{max-width: var(--content-width); margin: 0 auto 50px; text-align: left}


.threecolgrid-icon{aspect-ratio:16/4; margin: 0 auto 10px}
.threecolgrid-icon img{object-position: center; width:100%; height: 100%}
.acf-threecolgrid-block .imgpos-cover img{object-fit: cover}
.acf-threecolgrid-block .imgpos-contain img{object-fit: contain}
.acf-threecolgrid-block .img-above{margin: 0 0 15px}
.acf-threecolgrid-block h3{padding: 0; margin: 0; color: var(--primary)}

.threecolgrid-mobile-wrap{position: relative}
.threecolgrid-mobile{position: relative; height: 400px; display: none; z-index: 1}
.threecolgrid-mobile > div{position: absolute; top:0; left: 0; width:100%; max-width: 300px; opacity: 0}
.threecolgrid-mobile > div:first-of-type{opacity: 1}

.threecolgrid-mobile .imgpos-contain{max-width: 150px; margin: 0 auto 15px}

.ctagrid-grid-mobile{display: none; position: relative}

.threecolgrid-mobile-wrap .cta-arrow{display: none; position: absolute; top:190px; font-size:2rem; font-weight:400; z-index: 2; cursor:pointer; transition:all 300ms ease; color: var(--primary)}

.threecolgrid-mobile-wrap .cta-arrow:hover{opacity: 0.6}
.threecolgrid-mobile-wrap .cta-arrow-prev{left:-20px}
.threecolgrid-mobile-wrap .cta-arrow-next{right: -20px}

@media only screen and (max-width: 600px) {
	.threecolgrid-mobile-wrap .cta-arrow{display: block}
    .acf-threecolgrid-block{padding: 30px}
    .threecolgrid-flex{display: none}
    .threecolgrid-mobile{display: block}
}


/* CTA strip */
.cta-strip{background-color: var(--primary)}
.cta-strip-inner{display: flex; justify-content: space-between; align-items: center; color: #fff; max-width: var(--content-width); margin: 0 auto}
.cta-strip-inner > div{width:100%; overflow:hidden}
.cta-strip-inner > div:first-of-type{aspect-ratio:16/7}
.cta-strip-inner > div:first-of-type img{object-fit: cover; object-position: center; width:100%; height: 100%}
.cta-strip-inner > div:last-of-type{text-align: right; padding: 30px; max-width: 400px; display: flex; justify-content: center; align-items: center}
.cta-strip-inner h2{padding:0; margin:0}

.cta-strip-inner .button{background-color:var(--links) !important; color: #fff !important; transition:all 100ms ease}
.cta-strip-inner .button:hover{box-shadow: var(--box-shadow-hover); transform:scale(1.05)}
@media only screen and (max-width: 700px) {
	.cta-strip-inner{flex-direction: column}
	.cta-strip-inner > div{max-width:100% !important}
}


/* System block */
.system-block{padding: 80px 30px}
.system-block h2{color: var(--primary)}
.system-block-flex{display: flex; justify-content: space-between; align-items: stretch; grid-gap: 30px; margin: 0 auto; max-width:var(--content-width)}
.system-block-flex > div{width:100%}
.system-block-flex > div:first-of-type{max-width: 270px}
.system-block-flex-inner{display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; grid-gap: 30px}
.system-block-flex-inner > div{width:100%; max-width: 280px}
.system-block-flex-inner h3{margin: 0; font-size:1.2rem; color: var(--primary)}

.systems-box{display: flex; justify-content: space-between; align-items: stretch; column-gap: 15px}
.systems-box > div{width:100%}
.systems-box > div:first-of-type{padding-top: 15px}

.systems-box .systems-icon{max-width:40px}
.systems-box .systems-icon img{object-fit: contain; object-position: top; width:100%; height: 100%}

@media only screen and (max-width: 840px) {
	.system-block-flex{flex-direction: column}
	.system-block-flex > div{max-width:100% !important}
	.system-block-flex-inner{justify-content: center}
}
@media only screen and (max-width: 600px) {
	.system-block-flex-inner > div{max-width: 100%}
}


/* Solutions two columns */
.solution-twocol-block{padding:30px}
.solution-twocol-inner{display: flex; justify-content: space-between; align-items: flex-start; grid-gap: 100px; max-width:var(--content-width); margin: 0 auto}
.solution-twocol-inner > div{ width:100%; text-align: center}
.solution-twocol-inner > div img{max-width: 100% !important}
.solution-twocol-inner > div:first-of-type h2{color:var(--primary)}
.solution-twocol-inner > div:last-of-type{max-width:400px; background: var(--primary); padding: 10px 30px; color: #ffffff !important}
.solution-twocol-inner > div:last-of-type .button{background-color: #fff !important; color: var(--primary) !important}
.solution-twocol-inner > div:last-of-type img{max-width: 100%}
.solution-twocol-inner > div:last-of-type h2{color: #fff}
.solution-twocol-block #solutions-output{color: var(--primary)}
.solution-twocol-block #solutions-output h2{color: var(--primary); margin: 30px}
.solution-twocol-block #solutions-output h3{color:var(--primary)}
.solution-twocol-block #solutions-output a{color:var(--links)}
.solution-twocol-block .answer{border-left:3px solid var(--primary)}
.solution-twocol-block .solution-limiter{max-width: 500px; margin: 0 auto}
@media only screen and (max-width: 900px) {
	.solution-twocol-inner{flex-direction: column; max-width: 600px}
	.solution-twocol-inner > div{max-width: 100% !important}
}


/* Book a meeting */
.book-meeting-block{padding:30px}
.book-meeting-inner{max-width: 720px; text-align: left; margin: 60px auto}
.book-meeting-inner h2{color: var(--primary)}
.book-meeting-iframe-wrap{width:100%}
.book-meeting-iframe-wrap iframe{border:0px; width:100%; min-height: 690px; margin: 10px auto}


/* Concertina */
.concertina-block{padding: 30px}
.concertina-list{max-width:var(--content-width); margin: 0 auto}
.concertina-item{margin: 0 0 15px; background-color: #efefef}
.concertina-heading{padding: 0 30px; position: relative; cursor: pointer}
.concertina-heading i{color: var(--primary); position: absolute; top:12px; right:-20px}
.concertina-heading h3{color:var(--primary); font-size:1.2rem; display: block; padding: 8px 0}
.concertina-content{padding:0 30px; display: none}


/* Button bar */
.buttonbar-block{padding:30px}
.buttonbar-list{max-width:var(--content-width); margin: 0 auto; text-align: center}
.buttonbar-button{margin: 0 10px}


/* Aspen content */
.aspen-content-block{max-width:var(--content-width); margin: 0 auto -90px}
.aspen-content-head{background-color: var(--primary); background-image: url("../../themes/bcarm-aspen/img/aspen-bg-pathways.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; text-align: center; padding: 30px 30px 120px}
.aspen-content-head h1{color: #fff; text-align: left}
.aspen-content{; max-width: 90%; margin: 0 auto; background-color: var(--grey); padding: 30px; transform:translate(0, -90px)}


/* Aspen home */
.aspen-homepage h2{font-size:1.2rem}
.aspen-hp-grid{display: flex; justify-content: center; align-items: center; grid-gap: 30px; flex-wrap: wrap; margin: 30px auto}
.aspen-hp-grid > div{width:100%; max-width: 232px; text-align: center}
.aspen-hp-grid h3{font-size:1rem}
.faspen-hp-grid-icon{aspect-ratio:16/4; margin: 0 auto 40px}
.faspen-hp-grid-icon img{object-fit:contain; object-position: center; width:100%; height: 100%}
.faspen-hp-grid-icon{fill: var(--primary)}
.faspen-hp-grid-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.aspen-content-head-wrap{padding: 60px}
.aspen-content-head-text{color: #FFDC0B; text-align: left; font-weight:700; font-size:1.4rem}

.aspen-hp-content-buttons{display: flex; justify-content: flex-start; align-items: center; grid-gap: 10px}
.aspen-hp-content-buttons > div{flex-grow:1}
.aspen-hp-content-buttons > div a{display: block; background: #fff; color:var(--primary); padding: 15px; font-size:1.2rem; font-weight:700}
.aspen-hp-content-buttons > div a:hover{opacity: 0.6}
.aspen-hp-content-buttons > div:nth-of-type(3) a{background-color: transparent; color: #fff; text-align: left}
.aspen-hp-content-buttons > div:nth-of-type(3) a i{transform:translate(5px, 2px)}

.aspen-hp-content-buttons > div:nth-of-type(5) a{background-color: #FFDC0B}
.aspen-hp-content-buttons > div:nth-of-type(5) a i{transform:translate(5px, 2px)}


@media only screen and (max-width: 1000px) {
	.aspen-hp-content-buttons{flex-wrap: wrap}
	.aspen-hp-content-buttons > div:nth-of-type(4){display: none}
	.aspen-hp-content-buttons > div{flex-grow: none; width:100%; max-width: 40%}
}
@media only screen and (max-width: 700px) {
	.aspen-hp-content-buttons > div{max-width: 100%}
}

/* Aspen 2 cols colour bg */
.aspentwocolumns-block{padding: 30px}
.aspentwocolumns-block h2, .aspentwocolumns-block h3{font-size:1.4rem}
.aspentwocolumns-pad{max-width: var(--content-width); margin: 0 auto}
.aspentwocolumns-inner{max-width:90%; margin: 0 auto; display: flex; justify-content: center; align-items: stretch; grid-gap: 40px}
.aspentwocolumns-inner > div{width:100%; max-width:50%; padding: 30px}
.aspentwocolumns-inner .button{background-color: var(--secondary)}
.aspentwocolumns-block .aspen-button-wrap{text-align: right; padding: 12px 0 0}
@media only screen and (max-width: 700px) {
	.aspentwocolumns-inner{flex-direction: column; max-width: 100%}
	.aspentwocolumns-inner > div{max-width: 100% !important}
}

/* Aspen 2 col with CTA button*/
.aspen-two-col-block{padding:60px 30px}
.aspen-two-col-inner{display: flex; justify-content: space-between; align-items: stretch; grid-gap: 30px; max-width:var(--content-width); margin: 0 auto}
.aspen-two-col-inner > div{width:100%; position: relative}
.aspen-two-col-inner > div:last-of-type{max-width:400px; background-color: #ecebe9; padding: 30px}
.aspen-cta-button-wrap{text-align: right; position: absolute; width:calc(100% - 60px); bottom:30px; left:30px}
.aspen-cta-button-wrap .button{background-color: var(--secondary)}
@media only screen and (max-width: 900px) {
	.aspen-two-col-inner{flex-direction: column}
	.aspen-two-col-inner > div{max-width:100% !important}
	.aspen-cta-button-wrap{position: relative; bottom:inherit; left: inherit; width:100%; text-align: center}
}


/* Aspen contact */
.aspen-contact-block{padding: 30px}
.aspen-contact-block h2{font-size:1.4rem}
.aspen-contact-block .contact-field-item{padding: 10px 0; color: #666666 !important}

.aspen-contact-cta-button-wrap{text-align: left; padding: 30px 0 0}
.aspen-contact-cta-button-wrap .button{background-color: var(--secondary)}
.aspen-contact-block-flex{display: flex; justify-content: center; align-items: flex-start; grid-gap: 50px; max-width:var(--content-width); margin: 0 auto}
.aspen-contact-block-flex > div{width:100%}
.aspen-contact-block-flex > div:last-of-type{max-width:400px}
.aspen-contact-block-flex > div:last-of-type > div{background-color: #ecebe9; padding: 30px; margin: 0 auto 50px}
@media only screen and (max-width: 900px) {
	.aspen-contact-block-flex{flex-direction: column}
	.aspen-contact-block-flex > div{max-width: 100%}
}

/* Clear indented text box */
.clear-indent-block-wrap{padding: 30px}
.clear-indent-block{max-width: 900px; margin: 0 auto}
.clear-indent-block h2{color:var(--primary)}
.clear-indent-block blockquote{border-left: 3px solid var(--primary); padding-left: 15px}
.clear-indent-block.reverse h2{text-align: right}
.clear-indent-block.reverse blockquote{border-left:0; border-right: 3px solid var(--primary); padding-left: 0; padding-right: 15px}
@media only screen and (max-width: 600px) {
	.clear-indent-block blockquote{padding-left: 15px; margin: 0}
	.clear-indent-block.reverse blockquote{padding-right: 15px}
	.clear-indent-block-wrap h2{font-size:2rem}
}

/* Clear homepage splash */
.clear-home-block{padding-bottom: var(--section-gap)}
.clear-home-inner{max-width: var(--content-width); margin: 0 auto; background-color: var(--primary)}
.clear-home-splash{text-align: center; aspect-ratio:16/7}
.clear-home-splash img{object-fit: cover; width:100%; height: 100%; object-position: center}
.clear-home-flex{display: flex; justify-content: space-around; align-items: center; grid-gap: 30px;}
.clear-home-flex > div{width:100%}
.clear-home-flex > div:first-of-type{color: #fff; padding: 15px 0 15px 60px}
.clear-home-flex > div:first-of-type h1{font-size:1.8rem; padding: 0; margin: 0 0 10px; color: #fff !important}
.clear-home-flex > div:first-of-type p{line-height: 1.2; padding: 0; margin: 0 0 10px;}
.clear-home-flex > div:last-of-type{text-align: right; max-width: 260px; padding-right: 60px}
.clear-home-flex .button{border-radius:0; border:2px solid #fff; margin: 0 0 10px; background-color: rgb(255,255,255,0.1); box-shadow: none; font-size:1rem; padding: 9px}
.clear-home-flex .button:hover{color:#fff !important}
@media only screen and (max-width: 900px) {
	.clear-home-flex{flex-direction: column; grid-gap: 15px !important}
	.clear-home-flex > div{max-width:100% !important; padding: 30px !important; text-align: center !important}
}

/* Clear - 2 col CTA */
.clear2col-block{padding: 30px}
.clear2col-inner{max-width:var(--content-width); margin: 0 auto; display: flex; justify-content: center; align-items: stretch; grid-gap: 50px}
.clear2col-inner > div{background-color: var(--secondary); color: #fff; width:100%; max-width: 50%; position: relative}
.clear2col-img{aspect-ratio:16/9}
.clear2col-img img{object-fit: cover; object-position: center; width:100%; height: 100%}
.clear2col-content{padding:30px}
.clear2col-content .fa-square{font-size: 0.5rem; margin-right: 4px; transform:translate(0, -3px)}
.clear2col-inner a{color: #fff !important}
.clear2col-inner a:hover{opacity: 0.6}
.clear2col-inner > div:first-of-type .color-slash > div{background: #0B7377}
.color-slash{aspect-ratio:16/1.3; position:absolute; bottom:0; left:0; width:100%}
.color-slash > div{background: #044398; clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%); height: 100%; width:70%; margin: 0 0 0 30%}
@media only screen and (max-width: 900px) {
	.clear2col-inner{flex-direction: column}
	.clear2col-inner > div{max-width: 100%}
}


/* Team */ 
.team-block{background-color:var(--grey); color: var(--primary); padding: 0 30px 30px}
.team-grid{display:flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; grid-gap: 50px; max-width:var(--content-width); margin: 0 auto}
.team-grid  > div{width:100%; max-width:304px}
.team-photo{aspect-ratio:1/1; background-color: rgb(255,255,255,0.3); border-top-right-radius:30px}
.team-photo img{object-fit: cover; object-position: center; width:100%; height: 100%; border-top-right-radius:30px}
.team-grid h2{font-size:1.2rem; color: var(--primary); margin: 30px 0 10px}
.team-grid h3{font-size:1rem; font-weight:700; color: var(--primary)}
.team-job-title{margin:10px 0 30px}
.team-email{margin:40px 0 15px}
.team-email a{color: var(--primary); font-weight:700}
.team-linkedin a{color:var(--primary)}
.team-header-content{max-width: var(--content-width); margin: 0 auto}
.team-header-content h2{color: var(--primary); font-size:3rem; padding: 0; margin: 0 0 60px}
.team-header-desc{padding: 0 0 50px}
@media only screen and (max-width: 900px) {
	.team-grid{display:flex; justify-content: center}
}

/* Clear icon grid */
.clear-icon-block{padding: 50px 30px}
.clear-icon-header-content{max-width: var(--content-width); margin: 0 auto}
.clear-icon-header-content h2{color: var(--secondary); font-size:2rem; padding:0; margin: 0}
.clear-icon-header-desc{padding: 0 0 15px}
.clear-icon-grid{display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; grid-gap: 15px; max-width: 1000px; margin: 0 auto}
.clear-icon-grid > div{background:#fff; width:100%; max-width: 125px; text-align: center}
.clear-icon-grid h3{font-size:0.8rem; font-weight:400; margin: 5px 0 0}


/* Armplus hero */
.armplus-hero-block{background-color: var(--secondary); background-size: cover; background-position: left center}
.armplus-hero-block .button{background-color: #fff; color: var(--primary); margin-right: 15px}
.armplus-hero-block h1{color: #fff}
.armplus-hero-flex{display:flex; justify-content:space-between; align-items: center; padding: 60px 30px 90px; max-width:var(--content-width); margin: 0 auto}
.armplus-hero-flex > div{color: #fff}
.armplus-hero-flex > div:first-of-type{background-color: var(--primary); padding: 60px 90px; max-width: 760px}
.armplus-hero-block .button{margin-bottom: 15px}
@media only screen and (max-width: 900px) {
	.armplus-hero-flex{flex-direction: column}
	.armplus-hero-flex > div{max-width: 100%}
}
@media only screen and (max-width: 600px) {
	.armplus-hero-flex > div:first-of-type{padding: 30px}
}



/* BCarm hero */
.herobcarm-block{
    padding:30px;
    background-color: var(--primary);
    min-height: 500px;
    text-align: center;
    position: relative;
    overflow: hidden;
	display: flex; justify-content: center; align-items: center
}
.herobcarm-block h1{color: #FFFFFF; font-weight:700}
.herobcarm-block h1 span{color: var(--secondary)}
.herobcarm-inner{width:100%; display: flex; position:relative; justify-content: space-between; align-items: stretch; grid-gap: 160px; max-width: var(--content-width); margin: 0 auto; z-index: 4}
.herobcarm-inner > div{width:100%; position: relative}
.herobcarm-inner > div:first-of-type{text-align: left; max-width: 500px; color: #fff !important}
.herobcarm-inner > div:last-of-type{max-width: 400px; color: var(--primary)}
.herobcarm-inner > div:last-of-type h2{color: var(--primary)}
.herobcarm-inner > div:first-of-type .button{margin-right: 14px; font-size:1.1rem}
.bcarm-hero-bg, .herobcarm-fade{width:100%; height: 100%; position: absolute; top:0; left:0}
.herobcarm-fade{z-index: 3; background-color: var(--primary); opacity: 0.6}
.bcarm-hero-bg{z-index: 1}
.bcarm-hero-bg img{object-fit: cover; object-position: center; width:100%; height: 100%}


.bcarm-hero-video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 2;
}

.bcarm-hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* Default: fill height */
    width: 177.78vh; /* 16:9 ratio */
    height: 100vh;

    transform: translate(-50%, -50%);
}

/* If container is wider than 16:9, switch strategy */
@media (min-aspect-ratio: 16/9) {
    .bcarm-hero-video iframe {
        width: 100vw;
        height: 56.25vw; /* 9/16 ratio */
    }
}

#get-in-touch-button{position: absolute; bottom:0; right:0}
#bcarm-hero-contact-form{display:none; background-color: var(--grey); border-radius:50px; text-align: center; padding: 15px 30px 0; min-height: 100%}
#bcarm-hero-contact-form h2{padding: 0; margin: 0}
#bcarm-hero-contact-form > i{font-size:1.6rem; position: absolute; top:30px; right:30px; cursor: pointer; color: var(--primary); transition:all 300ms ease-in-out}
#bcarm-hero-contact-form > i:hover{color: var(--secondary); transform:rotate(90deg)}

@media only screen and (max-width: 1200px) {
	.herobcarm-inner{grid-gap: 50px}
	.herobcarm-inner > div{max-width: 100% !important}
}
@media only screen and (max-width: 1000px) {
	.herobcarm-block{padding: 90px 0}
	.bcarm-hero-video{display: none}
	.herobcarm-inner{flex-direction: column; justify-content: center !important}
	.herobcarm-inner > div{max-width: 500px !important; margin: 0 auto}
	.herobcarm-inner > div:first-of-type{padding:0 30px}
}
@media only screen and (max-width: 800px) {
	#get-in-touch-button{bottom:inherit; right:inherit; position: relative; margin: 0 auto}
	.herobcarm-inner{grid-gap: 0}
	.herobcarm-inner .button{margin-bottom: 10px; width:calc(100% - 50px)}
	.herobcarm-block h1{font-size:3rem}
}


/* hero simple block */
.hero-simple-block{padding: 90px 30px; text-align: center; background-size: cover; background-position: center; overflow: hidden; position: relative}
.hero-simple-block > h1{color: #fff !important; text-shadow: 1px 1px 5px rgb(0,0,0,0.7); z-index: 2; position: relative}
.hero-simple-block > div{background: #000; opacity: 0.4; position: absolute; top:0; left:0; width:100%; height: 100%; z-index: 1}


/* BCarm 2 col content box with CTA floater */
.bcarm-text-and-floater{padding: 30px}
.bcarm-text-and-floater-flex{max-width:var(--content-width); margin: 0 auto; display: flex; justify-content: space-around; align-items: stretch; grid-gap: 50px}
.bcarm-text-and-floater-flex > div{width:100%; position: relative}
.bcarm-text-and-floater-flex > div:last-of-type{max-width: 240px}
.bcarm-floater{border-radius:20px; background-color: var(--secondary); text-align: center; padding: 15px; color: var(--primary); position:sticky; top:150px}
.bcarm-text-and-floater-flex > div:last-of-type h2{color: var(--primary); margin-bottom: 50px}
.bcarm-floater h3{font-size:1.4rem; color: var(--primary);}
.bcarm-floater .button{margin-top: 1px}

.bcarm-text-and-floater-flex > div:first-of-type h2{margin:50px 0 0}
.bcarm-text-and-floater-flex > div:first-of-type > h2:first-of-type{margin-top:0}
.bcarm-text-and-floater-flex > div:first-of-type > p img{margin-top:30px; margin-bottom:30px}


.bcarm-text-and-floater-flex img.alignright{float: right; margin: 0 0 15px 30px; max-width: 45%}
.bcarm-text-and-floater-flex img.alignleft{float: left; margin: 0 30px 15px 0; max-width: 45%}



@media only screen and (max-width: 600px) {
	.bcarm-text-and-floater-flex{flex-direction: column}
	.bcarm-text-and-floater-flex > div{max-width: 100% !important}
}


/* BCarm CTA strip with photo */
.cta-strip-bcarm{padding:30px}
.cta-strip-bcarm-pad{background: teal; border-radius:100px; max-width:var(--content-width); padding: 40px 120px; margin: 0 auto}
.cta-strip-inner-bcarm .button{font-size:1.2rem}
.cta-strip-inner-bcarm{display:flex; justify-content: center; align-items: center; grid-gap: 50px; margin: 0 auto}
.cta-strip-inner-bcarm > div{width:100%}
.cta-strip-inner-bcarm > div:first-of-type{aspect-ratio:4/3; max-width: 300px}
.cta-strip-inner-bcarm > div:first-of-type img{object-fit: cover; object-position: center; width:100%; height: 100%; border-radius:70px}
.cta-strip-inner-bcarm > div:last-of-type{}
@media only screen and (max-width: 900px) {
	.cta-strip-inner-bcarm{flex-direction: column}
	.cta-strip-inner-bcarm > div{max-width: 100%}
	.cta-strip-bcarm-pad{padding: 90px 30px}
}
@media only screen and (max-width: 600px) {
	.cta-strip-bcarm{padding:0}
	.cta-strip-bcarm-pad{border-radius:0}
}


/* BCarm Build your Solution */
.solution-builder-bcarm{padding:30px}
.solution-builder-bcarm-pad{border-radius:100px; max-width:var(--content-width); padding: 40px 120px; margin: 0 auto}
.solution-builder-inner-bcarm{display:flex; justify-content: center; align-items: stretch; grid-gap: 50px; margin: 0 auto}
.solution-builder-inner-bcarm > div{width:100%}
.solution-builder-inner-bcarm > div:first-of-type{max-width: 400px}
.solution-builder-inner-bcarm > div:last-of-type{}
.solution-builder-bcarm .tool-button{border-radius:100px; text-align: center; color: var(--primary) !important}
.solution-builder-bcarm .add-problem{background-color: #fff !important; color: var(--primary) !important}

@media only screen and (max-width: 900px) {
	.solution-builder-inner-bcarm{flex-direction: column}
	.solution-builder-inner-bcarm > div{max-width: 100%}
	.solution-builder-bcarm-pad{padding: 90px 30px}
}
@media only screen and (max-width: 600px) {
	.solution-builder-bcarm{padding:0}
	.solution-builder-bcarm-pad{border-radius:0}
}


/* menu tabs */
.menu-tabs-block{padding:30px; background: #fff}
.menu-tabs{display:flex; justify-content: center; align-items: stretch; gap: 2px; max-width: var(--content-width); margin: 0 auto 30px}
.menu-tabs > div{flex: 1; color: var(--primary); position: relative}
.menu-tabs > div h3{display: block; font-weight:500; font-size:1.3rem; padding: 50px 30px 15px; margin:0; color: var(--primary); background-color: var(--grey); cursor:pointer; transition:all 100ms ease; position: relative}
.menu-tabs > div h3:hover{font-weight:700}
.menu-tabs > div h3::after{content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; position:absolute; right:30px; bottom:17px}
.menu-tabs > div.active h3{font-weight:700}
.menu-tabs > div.active h3::after{transform: rotate(90deg)}
.menu-tabs > div:nth-of-type(1) h3:hover{background-color:var(--coral)}
.menu-tabs > div:nth-of-type(2) h3:hover{background-color:var(--tangerine)}
.menu-tabs > div:nth-of-type(3) h3:hover{background-color:var(--secondary)}
.menu-tabs .menutab-slider{display: none}
.menu-tabs > div.active .menutab-slider{display: block}
.menu-tabs > div:nth-of-type(1).active h3{background-color:var(--coral)}
.menu-tabs > div:nth-of-type(2).active h3{background-color:var(--tangerine)}
.menu-tabs > div:nth-of-type(3).active h3{background-color:var(--secondary)}
.menu-tabs > div:nth-of-type(1).active{background-color:var(--coral)}
.menu-tabs > div:nth-of-type(2).active{background-color:var(--tangerine)}
.menu-tabs > div:nth-of-type(3).active{background-color:var(--secondary)}
.menutab-content-wrap{min-height: 100px; line-height: 2rem}
.menutab-content{padding: 0 30px 30px; display: block; position: relative}
.menutab-image{aspect-ratio:16/8 ;display: block; background: #fff}
.menutab-image img{object-fit: cover; object-position: center; width:100%; height: 100%; border-bottom-right-radius:100px}
@media only screen and (max-width: 900px) {
	.menu-tabs{flex-direction: column; max-width: 400px}
	.menu-tabs > div{max-width: 100%}
}


/* 3 col news post list */
.three-card-news-list-block{padding:30px}
.three-card-news-list-block > h2{text-align: center; color:var(--primary); margin: 0 0 50px}
.three-cardnews-list{max-width: var(--content-width); margin: 0 auto; display: flex; justify-content: center; align-items: stretch; gap:60px; flex-wrap:wrap}
.three-cardnews-list > div{width:100%; max-width: 360px}
.three-cardnews-list > div .button{min-width: 100px}
.three-cardnews-list h2{font-size:1.4rem; font-weight: 700}
.three-cardnews-list h2 a{color: var(--primary)}
.news-card-image{position: relative; aspect-ratio:16/9; border-top-right-radius:15px; margin-bottom: 15px}
.news-card-image a{padding: 0; z-index: 1; display: block; aspect-ratio:16/9; border-top-right-radius:15px}
.news-card-image img{object-fit: cover; object-position: center; width:100%; height: 100%; border-top-right-radius:15px; z-index: 1}
.news-card-image .sash{background: var(--blue); color: var(--primary); z-index: 2; position: absolute; top:20px; left:0; padding: 4px 15px; border-top-right-radius:100px; border-bottom-right-radius:100px}
@media only screen and (max-width: 900px) {
	.three-cardnews-list{flex-direction: column; max-width: 400px}
	.three-cardnews-list > div{max-width: 100%}
}


/* Academy welcome */
.academy-welcome{padding: 90px 30px; background-color: var(--grey); margin: 0 0 60px}
.academy-welcome-flex{display: flex; justify-content: center; align-items: stretch; column-gap: 90px; grid-row-gap: 50px; max-width: var(--content-width); margin: 0 auto}
.academy-welcome-flex > div{width:100%}
.academy-welcome-flex > div:first-of-type{max-width: 35%}
.academy-welcome-flex h1{color: var(--primary); font-size:2.5rem}
.academy-faq-item.active .answer{display:block}
.academy-faq-item.active h3{text-decoration: underline}
.academy-faq-item.active h3::after{transform: rotate(90deg)}
.academy-faqs{width:100%}
.academy-faq-item{border-bottom:1px solid var(--primary); width:100%}
.academy-faq-item h3{color: var(--primary); position: relative; cursor: pointer; font-size: 1.6rem; font-weight:500; padding:25px 0 15px; display: block}
.academy-faq-item h3:hover{color: var(--secondary)}
.academy-faq-item h3::after{content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 700; position:absolute; right:30px; bottom:16px}
.academy-faq-item .answer{display: none; color: var(--primary)}
.academy-subheader{max-width: var(--content-width); margin: 0 auto}
@media only screen and (max-width: 1200px) {
	.academy-subheader{padding:0 30px}
}
@media only screen and (max-width: 900px) {
	.academy-welcome-flex{flex-direction: column}
	.academy-welcome-flex > div{max-width: 100% !important}
}

/* FAQs */
.academy-faqs-block{padding: 90px 30px}
.academy-faqs-inner{max-width: var(--content-width); margin: 0 auto; color: var(--primary)}
.academy-faqs-inner h2{color: var(--primary)}


/* Testimonials */
.testimonials-block{padding:40px 30px 60px; background-color: var(--grey); overflow: hidden}
.testimonials-block h2{color: var(--primary); text-align: center; margin: 0}
.testimonaials{max-width: var(--content-width); margin: 0 auto; position: relative; min-height: 200px}
.testimonial-arrow{position:absolute; top:110px; color: var(--primary); font-weight:500; font-size:1.6rem; cursor: pointer; z-index: 3}
.testimonial-arrow:hover{color:var(--secondary)}
.arrowl{left:0}
.arrowr{right: 0}

.testimonial-item{display: none; justify-content: center; align-items: center; column-gap: 50px; padding: 0 200px; position: absolute; top:0; left:0; min-height: 220px; z-index: 1; transition:all 300ms ease-out}
.testimonial-item > div{width:100%; color:var(--primary)}
.testimonial-item h3{padding: 0; margin: 0}
.testimonial-item.left{opacity: 0; transform: translate(-400px, 0)}
.testimonial-item.right{opacity: 0; transform: translate(400px, 0)}
.testimonial-thumb{width:120px; min-width:120px; max-width:120px; aspect-ratio:1/1}
.testimonial-thumb img{object-fit: cover; object-position: center; width:100%; height: 100%; border-radius:100px}
.testimonial-content{padding: 0 0 10px; line-height: 1; font-family: "Co Headline", sans-serif; font-weight:700; font-size:1.4rem}
.testimonial-content p{line-height: 1.2}
.person-company{font-size:0.9rem}

@media only screen and (max-width: 900px) {
	.testimonials-block{min-height: 450px}
	.testimonial-item{padding: 0 60px; flex-direction: column; min-height: 450px;}
	.testimonial-item > div{}
	.testimonial-item > div:first-of-type{}
}


/* BCarm 2 cols CTA with buttons */
.cta-two-cols{padding: 40px 30px}
.cta-two-cols-flex{display: flex; justify-content: center; align-items: center; max-width: var(--content-width); margin: 0 auto}
.cta-two-cols-flex > div{width:100%; max-width: 50%}
.cta-two-cols-flex > div:first-of-type{padding-right: 90px; text-align: right}
.cta-two-cols-flex > div:last-of-type{padding-left:90px; border-left:1px solid var(--primary)}
.cta-two-cols-flex h2{color: var(--primary); margin-bottom: 40px; font-size:2rem}
.cta-buttons-wrap{display: flex; align-content: center; align-items: center; grid-gap: 10px}
.cta-two-cols-flex > div:first-of-type .cta-buttons-wrap{justify-content: flex-end}
@media only screen and (max-width: 900px) {
	.cta-two-cols{padding: 60px 30px}
	.cta-two-cols-flex{flex-direction: column; grid-gap: 60px;}
	.cta-two-cols-flex > div{max-width: 100%; text-align: center !important; border:0 !important; padding: 0 !important}
	.cta-buttons-wrap{justify-content: center !important}
}
@media only screen and (max-width: 600px) {
	.cta-buttons-wrap{flex-direction: column}
	.cta-buttons-wrap a{min-width: 80%}
}


/* Systems diagram */
.systems-diagram-wrap{padding:30px}
.systems-diagram-wrap > div{max-width:var(--content-width); margin: 0 auto}

/* Solution builder */
#solution-builder-tool{max-width: 700px; margin: 0 auto}
#solution-builder-tool select{width:100%; background: #e4e4e4; font-size:1.1rem; color: var(--primary); cursor: pointer; margin-bottom: 5px}
#solution-builder-tool .hubspot-form{display:none}

.cat-selector-wrap{margin: 0 0 15px}
.tool-button{box-shadow:var(--box-shadow); background-color: var(--secondary); padding: 10px; margin: 5px 0; cursor: pointer; transition:all 100ms ease-in-out; font-weight:700; font-size:1.1rem; display: none}
.tool-button:hover{box-shadow: var(--box-shadow-hover); transform:scale(1.01)}

#solutions-output{color: #fff; text-align: left; padding: 0}
#solutions-output h2{color: #c6d431; font-size:1.8rem; font-weight:500; padding: 0; margin: 0 0 15px} 
#solutions-output h3{color: #c6d431; font-size:1.8rem; padding: 0; margin: 0}
#solutions-output a{color: #c6d431}
.solution-item .answer{padding: 0 0 30px}
.solutions-form {position: relative; min-height: 300px; max-width: 600px; width: 100%; margin: 30px auto; padding: 30px; background-color: #2e2e2e}
.solutions-form::before,
.solutions-form::after {z-index: 0}

.solutions-form > * {position: relative;
    z-index: 1; /* ensures content appears above waves */
}
.solutions-form > div{max-width: 300px; margin: 0 auto; text-align: center}

#start-again{color: #fff !important; display: block; width:100%}
#start-again:hover{background-color: var(--secondary)}

/* Breadcrumbs */
.breadcrumbs-block{padding: 0 30px}

/* Hubspot */
.hubspot-block{padding:30px !important; position: relative}
.hubspot-block > div{max-width:var(--content-width); margin:0 auto; position: relative}

.hubspot-block-flex{display: flex; justify-content: center; align-items: stretch; grid-gap: 60px}
.hubspot-block-flex > div{width:100%}
.hubspot-block-flex > div:last-of-type{max-width: 400px}
.hubspot-stack-content{padding: 0 0 60px}
@media only screen and (max-width: 800px) {
	.hubspot-block-flex{flex-direction: column}
	..hubspot-block-flex > div{max-width:100%}
}