:root {
	--border_width: 2px;
	--teaser_padding: 20px;
}

.cut_outs.co--pathways {
	background-image: url(../_img/pathways/pathways_cut_out.webp);
	width: 420px;
	height: 260px;
}

.main_heading  .content h1 {
	width: 325px;
	height: 70px;
	text-indent: -4500px;
	background-image: url(../_img/pathways/pathways4life-logo.png);
	background-repeat: no-repeat;
	background-position: 0 0 ;
	background-size: contain;
}

.main_heading .content .photo span {
	background-image: url(../_img/pathways/arrow_left_360_pathways.png);
}

@media(max-width: 1410px) {
	.main_heading .content h1,
	.main_heading .content h2 {	
		width: calc((350 / 1410) * 100vw);
		margin-top: -20px;
	}
	.main_heading  .cut_outs {
		left: calc((50 / 1410) * 100vw);
		width: calc((420 / 1410) * 100vw);
		height: calc((260 / 1410) * 100vw);
	}
}
@media(max-width: 740px) {
	.main_heading  .content h1 {
		margin-top: -0;
		height: 25px;
	}
}

.content h2.main {
	font-size: 1.7em;	
}
/* forground colours */
.col--violet {
	color: var(--violet) !important;
}

/* teasers */
#pathway_teasers {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; 
    column-gap: 30px; 
	row-gap: 30px;
}
#pathway_teasers .pw_teaser {
	border: var(--border_width) solid #000; 
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
@media(max-width: 1100px) {
	#pathway_teasers {
		column-gap: 20px; 
		row-gap: 20px;
		max-width: 700px;
		margin: 0 auto;
	}
}
@media(max-width: 1040px) {
	#pathway_teasers {
		grid-template-columns: 1fr 1fr; 
    	column-gap: 30px; 
		row-gap: 30px;
	}
}
@media(max-width: 700px) {
	:root {
		--teaser_padding: 10px;
	}
	#pathway_teasers {

    	column-gap: 10px; 
		row-gap: 10px;
	}
}

@media(max-width: 500px) {
	:root {
		--teaser_padding: 20px;
	}
	#pathway_teasers {
		grid-template-columns: 1fr; 
    	column-gap: 30px; 
		row-gap: 30px;
		max-width: calc(300px + var(--teaser_padding) + var(--teaser_padding));
		margin-left: auto;
		margin-right: auto;
	}
}


#pathway_teasers .pw_teaser > *:last-child {
    margin-top: auto;
}
/* image */
#pathway_teasers .pw_teaser .pw_image {
	padding: var(--teaser_padding);	
}
#pathway_teasers .pw_teaser .pw_image img {
	display: block;
	border-radius: 14px;	
}
/* text (but not buttons) */
#pathway_teasers .pw_teaser .pw_text {
	padding: 0 var(--teaser_padding);
}
#pathway_teasers .pw_teaser h3 {
	font-size: 1.3em;
	padding-top: 5px;
	padding-bottom: 15px;
	line-height: 1.2;
}

/* buttons */
#pathway_teasers .pw_teaser .pw_buttons {
	padding-bottom: var(--teaser_padding);	
	padding: 0 var(--teaser_padding);
}
#pathway_teasers .pw_teaser .pw_buttons p.button {
	display: block;	
	margin-bottom: 10px;
}
#pathway_teasers .pw_teaser   p.button + p.button {
    margin-left: 0px;
	margin-bottom: var(--teaser_padding);
}
#pathway_teasers .pw_teaser .pw_buttons p.button a,
#pathway_teasers .pw_teaser .pw_buttons p.button span {
	display: block;	
	padding: 7px 15px  7px 15px !important;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	font-weight: 500;
	border-radius: 6px;
}
#pathway_teasers .pw_teaser .pw_buttons p.button.button--scroll a {
	border: var(--border_width) solid var(--black);
	background: #fff;	
	color: var(--black);
}
#pathway_teasers .pw_teaser .pw_buttons p.button.button--scroll a:hover {
	background: var(--fortem_blue);
	border-color: var(--fortem_blue);
	color: #fff;
}

#pathway_teasers .pw_teaser .pw_buttons p.button.button--action a,
#pathway_teasers .pw_teaser .pw_buttons p.button.button--action span {
	border: var(--border_width) solid var(--black);
	background: #fff;	
	color: var(--black);
}


/* quote marks */
.wrapper--quote::before {
	content: '';
	display: block;
	background-image: url(../_img/quote_marks_white.png);
	width: 120px;
	height: 120px;
	background-repeat: no-repeat;
	background-size: contain;	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
	opacity: 0.1;
}
.wrapper--quote  {
	padding-top: 60px;
	padding-bottom: 60px;
}

/* school */
#pathway_teasers .pw_teaser#pw_school {
	border-color: 	var(--light_plum);
}
#pathway_teasers .pw_teaser#pw_school h3 {
	color: 	var(--light_plum)
}
#pathway_teasers .pw_teaser#pw_school .pw_buttons p.button.button--action span {
	border-color: 	var(--light_plum);
	background: 	var(--light_plum);
	color: #fff;
}
#pathway_teasers .pw_teaser#pw_school .pw_buttons p.button.button--action span:hover {
	border-color: 	var(--fortem_teal);
	background: 	var(--fortem_teal);
}
#school_engagement .content h2 {
	color: 	var(--light_plum);
}
#school_engagement .content p.button a,
#school_engagement .content p.button span {
	background: 	var(--light_plum);
	color: #fff;
}
#school_engagement .content p.button a:hover,
#school_engagement .content p.button span:hover {
	background: 	var(--fortem_teal);
	color: #fff;
}
.wrapper--bg_schools {
	background: 	var(--light_plum);
	color: #fff;
}	
.content form.school h2 {
	color: 	var(--light_plum);
}

/* work */
#pathway_teasers .pw_teaser#pw_work {
	border-color: 	var(--green);
}
#pathway_teasers .pw_teaser#pw_work h3 {
	color: 	var(--green)
}
#pathway_teasers .pw_teaser#pw_work .pw_buttons p.button.button--action span {
	border-color: 	var(--green);
	background: 	var(--green);
	color: #fff;
}
#pathway_teasers .pw_teaser#pw_work .pw_buttons p.button.button--action span:hover {
	border-color: 	var(--fortem_teal);
	background: 	var(--fortem_teal);
}
#work_experience .content h2 {
	color: 	var(--green)
}
#work_experience .content p.button a,
#work_experience .content p.button span {
	background: 	var(--green);
	color: #fff;
}
#work_experience .content p.button a:hover,
#work_experience .content p.button span:hover {
	background: 	var(--fortem_teal);
	color: #fff;
}
.wrapper--bg_work {
	background: 	var(--green);
	color: #fff;
}	
.content form.work h2 {
	color: 	var(--green);
}

/* apprentice */
#pathway_teasers .pw_teaser#pw_apprentice {
	border-color: 	var(--sky_blue);
}
#pathway_teasers .pw_teaser#pw_apprentice h3 {
	color: 	var(--sky_blue)
}
#pathway_teasers .pw_teaser#pw_apprentice .pw_buttons p.button.button--action span {
	border-color: 	var(--sky_blue);
	background: 	var(--sky_blue);
	color: #fff;
}
#pathway_teasers .pw_teaser#pw_apprentice .pw_buttons p.button.button--action span:hover {
	border-color: 	var(--fortem_teal);
	background: 	var(--fortem_teal);
}
#apprenticeships .content h2 {
	color: 	var(--sky_blue)
}
#apprenticeships .content p.button a,
#apprenticeships .content p.button span {
	background: 	var(--sky_blue);
	color: #fff;
}
#apprenticeships .content p.button a:hover,
#apprenticeships .content p.button span:hover {
	background: 	var(--fortem_teal);
	color: #fff;
}
.wrapper--bg_apprenticeships {
	background: 	var(--sky_blue);
	color: #fff;
}
.content form.apprenticeships h2 {
	color: 	var(--sky_blue);
}

/* employment */
#pathway_teasers .pw_teaser#pw_employment {
	border-color: 	var(--tangerine);
}
#pathway_teasers .pw_teaser#pw_employment h3 {
	color: 	var(--tangerine)
}
#pathway_teasers .pw_teaser#pw_employment .pw_buttons p.button.button--action a,
#pathway_teasers .pw_teaser#pw_employment .pw_buttons p.button.button--action span {
	border-color: 	var(--tangerine);
	background: 	var(--tangerine);
	color: #fff;
}
#pathway_teasers .pw_teaser#pw_employment .pw_buttons p.button.button--action a:hover,
#pathway_teasers .pw_teaser#pw_employment .pw_buttons p.button.button--action span:hover {
	border-color: 	var(--fortem_teal);
	background: 	var(--fortem_teal);
}
#employment .content h2 {
	color: 	var(--tangerine)
}
#employment .content p.button a,
#employment .content p.button span {
	background: 	var(--tangerine);
	color: #fff;
}
#employment .content p.button a:hover,
#employment .content p.button span:hover {
	background: 	var(--fortem_teal);
	color: #fff;
}
.wrapper--bg_employment {
	background: 	var(--tangerine);
	color: #fff;
}
.content form.employment h2 {
	color: 	var(--tangerine);
}



/* modal forms */
body.modal_open {
	overflow: hidden;
}

#modal_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5000;
	background-color: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(105px) saturate(200%);
	transition: opacity 0.8s ease;

	display: flex;
	align-items: center;
  	justify-content: center;
	
	opacity: 0;
	pointer-events: none;
	
}
#modal_overlay.active  {
	opacity: 1;
	pointer-events: auto;
}
.modal_container  {
	background: #f6f6f6;
	max-width: 500px;
	width: 100%;
	position: relative;
	
}
.modal_close {
	font-size: 40px;
	line-height: 40px;
	position: absolute;
	top: 00px;
	right: 10px;	
	cursor: pointer;
}

.modal_container .content {
	display: flex;
}
.modal_container .content > div {
	flex: 1;
}
.modal_container .content  .modal_inner  {
	padding: 40px;
	text-align: left;
}
.modal_container .content  .modal_inner p {
	text-align: left;
}
/** form inputs and controls **/
.content input, 
.content textarea, 
.content select,  
.content select option {
	font-family: inherit;
	color: var(--black);
	font-size: inherit;
	line-height: inherit;
	border: none;
	width: 100%;
}

.content form input, 
.content form textarea, 
.content form select {
	padding: 8px 5px;	
}

.content input[type="submit"] {
	max-width: 100px;	
	cursor: pointer;
	background-color: var(--black);
	color: #fff;
}
.content .mb_xsmall {
	margin-bottom: 0.5em;
}

/* response after submitting */
.modal_container #response.loading {
	background-image: url(../_shared/_img/preloader_rubiks.gif);
	background-position: center center;
	background-repeat: no-repeat;
}