@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
	--font-body: 'Roboto', sans-serif;

	--black: #545454;
	--light-grey: #d9d9d9;
	--exlight-grey: #F4F4F4;
	--white: #ffffff;
	--mint: #a8c7b8;
	--pitch-black: #000000;
	--pink: #ECC4C6;

	--black-rgb: 84,84,84;
	--light-grey-rgb: 217,217,217;
	--exlight-grey-rgb: 244,244,244;
	--white-rgb: 255,255,255;
	--mint-rgb: 168,199,184;
	--pitch-black-rgb: 0,0,0;
	--pink-rgb: 236,196,198;
}

.the-content {

	*:last-child{
		margin-bottom: 0;
	}

	ul {
		list-style-type: disc;
		list-style-position: inside;
		margin-bottom: 1em;
	}

	ol {
		list-style-type: decimal;
		list-style-position: inside;
		margin-bottom: 1em;
	}

	ul ul, ol ul {
		list-style-type: circle;
		list-style-position: inside;
		margin-left: 15px;
	}

	ol ol, ul ol {
		list-style-type: lower-latin;
		list-style-position: inside;
		margin-left: 15px;
	}

	p{
		margin-bottom: 1em;
	}
}

a {
	@include mobile_appearance(none);
	text-decoration: none;
	color: inherit;

	&:focus, &:active {
		outline: none;
	}
}

input, fieldset, textarea, button {

	&:focus, &:active {
		outline: none;
	}
}

html{
	scroll-behavior: smooth;
	scroll-margin: 100px;
}

html, body{
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3em;
}

.scroll-top{
	position: fixed;
	right: 30px;
	bottom: 70px;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 45px;
	width: 45px;
	background-color: #848484;
	cursor: pointer;
	pointer-events: none;
	opacity: 0;

	&:hover{
		opacity: .8;
	}

	&.active {
		opacity: 1;
		pointer-events: all;
		transition: 100ms ease-in-out;

		&:hover{
			opacity: .8;
		}
	}

	svg{
		display: block;
		height: 32px;
		width: 32px;

		path{
			fill: var(--white);
		}
	}
}

/* #main{
	position: relative;
	overflow-x: hidden;
} */
body.page-template-page-careers,
body.single-career {
	h1 {
		font-size: 2.6em;
		line-height: 1.25em;
		color: var(--black);
		margin: 10px 0 30px 0;
	}

	h2 {
		font-size: 2.6em!important;
		line-height: 1.25em!important;
		color: var(--black)!important;
		margin: 40px 0;
	}

	h3 {
		font-size: 2em;
		line-height: 1.25em;
		color: var(--black);
		margin: 20px 0;
		font-family: var(--font-body);
	}

	h4 {
		font-size: 1.75em;
		line-height: 1.25em;
		color: var(--black);
		margin: 15px 0;
		font-family: var(--font-body);
	}
}

.underline{
	position: relative;

	&:after{
		content: '';
		display: block;
		position: absolute;
		top: calc(100% + 20px);
		left: 0;
		width: 140px;
		height: 2px;
		background-color: var(--black);
	}
}

.wrapper{
	position: relative;
	max-width: 1632px;
	width: 90%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;

	&.main{
		max-width: 1440px;
	}

	&.small{
		max-width: 1170px;
	}
}

/* #header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 220px;
	margin-bottom: 20px;
	background: var(--white);
	z-index: 100;

	&:after{
		content: '';
		display: block;
		position: absolute;
		top: calc(100%);
		left: -100%;
		height: 1px;
		width: 9999px;
		background-color: var(--light-grey);
	}

	#top-level{
		position: relative;
		padding: 10px 0 15px;
		min-height: 51px;

		&:after{
			content: '';
			display: block;
			position: absolute;
			top: calc(100%);
			left: -100%;
			height: 1px;
			width: 9999px;
			background-color: var(--light-grey);
		}

		a{
			font-size: 14px;
			font-weight: 300;
			color: #8f8f8f;
			line-height: 1em;

			&:hover{
				color: var(--mint);
				text-decoration: underline;
			}
		}

		div{
			display: flex;
			align-items: flex-start;

			a{
				display: flex;
				margin-right: 18px;

				&:first-child{
					text-transform: uppercase;
					position: relative;

					&:after{
						content: '|';
						display: block;
						position: absolute;
						top: 0;
						right: -11px;
						font-size: 14px;
						font-weight: 500;
						color: #8f8f8f;
					}
				}

				&:last-child{
					margin-right: 0;

					svg{
						display: block;
						height: 14px;
						width: 8px;
						margin-right: 4px;

						path{
							fill: #8f8f8f;
						}
					}
				}
			}
		}
	}

	#main-level{
		position: relative;
		padding-bottom: 15px;
		margin-top: 20px;
	}

	.header-left{

		#site-logo{
			display: inline-block;
			width: 215px;
			height: 43px;
			max-width: 270px;
			margin: 30px 0;
		}
	}

	.header-right{
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		width: 100%;
		margin-right: auto;
		padding: 48px 0 35px;
		padding-left: 25px;
		margin-top: 6px;

		nav{
			width: 57%;

			ul{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: flex-end;

				li{
					display: inline-block;
					margin-left: 44px;

					&.has-icon{

						a{
							display: flex;
							align-items: center;
							justify-content: center;
							height: 18px;
							width: 18px;
							padding: 0 0;

							svg{
								display: block;
							}

							span{
								display: none;
								padding: 0 0;
							}
						}
					}

					a{
						position: relative;
						padding: 8px 5px;
						color: var(--pitch-black);
						font-weight: 700;
						font-size: 0.875rem;
						line-height: normal;
						text-transform: uppercase;

						&:hover{
							color: var(--mint);
						}
					}
				}
			}
		}

		#icon-menu{
			width: 14%;
			margin-left: 80px;

			ul{

				li{
					margin-right: 0;
					margin-left: 25px;

					&:first-child{
						margin-left: 0;
					}

					&:last-child{
						margin-right: 0;
					}
				}
			}
		}
	}
}

#mobile-nav{
	display: none;
	flex-direction: column;
	background: rgb(32, 32, 32);
	width: 100%;
	padding: 10px 0 0;

	.mobile-nav-trigger{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 30px;
		width: 100%;
		margin-left: 10px;
		margin-bottom: 10px;

		svg{

			path{
				fill: var(--white);
			}
		}
	}

	&.active{

		> nav{
			display: block !important;

			ul{

				li{
					margin-left: 0 !important;
					padding: 14px;
					width: 100%;
					border-bottom: 1px solid var(--exlight-grey);

					&:last-child{
						border-bottom: 0;
					}

					a{
						text-transform: uppercase;
						color: var(--white);
						font-size: 1rem !important;
						line-height: 1.2rem !important;
						border: 0 0 !important;
						font-weight: 400 !important;
						width: 100% !important;
					}
				}
			}

		}
	}
} */

.btn{
	display: flex!important;
	align-items: center!important;
	justify-content: center!important;
	width: max-content!important;
	text-align: center!important;
	text-transform: uppercase!important;
	padding: 14px 24px!important;
	background: var(--pitch-black)!important;
	color: var(--white)!important;
	font-size: 15px!important;
	font-weight: 700!important;
    border-radius: 0!important;

	&:hover{
		background: var(--mint)!important;
	}

	&.btn-light{
		background: var(--white)!important;
		color: var(--pitch-black)!important;

		&:hover{
			background: var(--mint)!important;
		}
	}
}

.hero{
	position: relative;
	/* min-height: 1000px; */
	height: 100%;
	padding-top: 20px;
	padding-bottom: 80px;

	&:after{
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: -100%;
		height: 1px;
		width: 9999px;
		background-color: #d9d9d9;
	}

	.top {
		position: relative;
		display: flex;
		align-items: center;
		min-height: 580px;
		margin-bottom: 15px;

		.image{
			display: block;
			@include background_image(cover);
			width: 1220px;
			max-width: 100%;
			height: 620px;
			max-height: 100%;
			margin-left: auto;
		}

		/* Ensure inline images fill the fixed container height */
		.image > img,
		.image > picture{
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.text-container {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			padding: 40px;
			background-color: rgba(var(--pink-rgb), .85);
			max-width: 32%;
			width: 100%;
			z-index: 5;

			h1 {
                font-size: 2.6em;
                line-height: 1.25em;
				color: var(--pitch-black);
				margin: 0 0;
				margin-bottom: 50px;

				&.underline{

					&:after{
						background: var(--pitch-black);
					}
				}
			}

			.the-content{
				color: var(--pitch-black);
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				max-width: 400px;
				padding-right: 60px;
			}
		}
	}

	.bottom{
		margin-top: 15px;

		.notice-block{
			position: relative;
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			padding: 30px;
			background-color: var(--pink);
			color: var(--pitch-black);

			h2{
				margin: 0 0 45px;
				color: var(--pitch-black);
				text-transform: uppercase;

				&.underline{

					&:after{
						left: 50%;
						transform: translateX(-50%);
						width: 140px;
						background-color: var(--pitch-black);
					}
				}
			}

			h4{
				margin: 0 0;
				color: var(--pitch-black);
				text-transform: uppercase;
			}

			.the-content{
				margin-top: 15px;
				color: var(--pitch-black);
			}
		}

		.image{
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			height: 100%;
			width: 100%;

			> img, > picture{
				display: block;
				position: relative;
				/* //height: auto;
				//width: auto; */
				margin-left: auto;
				margin-right: auto;
				object-fit: cover;
				height: 100%;
				width: 100%;
			}
		}

		.row{
			margin: 40px auto;
		}
	}
}

#careers{
	position: relative;
	padding-top: 115px;

	h2{
		text-transform: uppercase;
	}

	.pagination{
		position: relative;
		margin: 50px auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		padding: 15px 30px;
		background: var(--exlight-grey);
		margin-left: auto;
		margin-right: auto;

		&.hide {
			background-color: #fff;
		}

		.page-numbers{
			margin: 0 10px;
			font-size: 24px;
			font-weight: 600;
			color: var(--black);

			&:first-child{
				margin-left: 0;
			}

			&:last-child{
				margin-right: 0;
			}

			&.current{
				/*color: var(--mint);*/
			}
		}

		a{

			&:hover{
				color: var(--mint);
			}
		}
	}
}

.highlight{

	.title-block{
		position: relative;
		width: 100%;
		background-color: var(--mint);
		padding: 12px 20px;

		h3{
			font-size: 24px;
			font-weight: 700;
			color: var(--pitch-black);
			text-align: center;
			margin: 0 0;
			text-transform: uppercase;

            a {
                &:hover {
                    color: var(--pitch-black);
                }
            }
		}
	}

	.meta-container{
		background-color: var(--pitch-black);

		.image{
			display: block;
			@include background_image(cover);
			max-width: 170px;
			width: 100%;
			height: auto;
			max-height: 100%;
		}

		.meta{
			padding: 18px 30px;
			display: block;
			width: 100%;
			padding-left: 60px;

			.meta-block{
				position: relative;
				color: var(--white);
				margin-bottom: 20px;

				&:last-child{
					margin-bottom: 0;
				}

				&:before{
					content: '';
					position: absolute;
					top: 50%;
					left: -36px;
					transform: translateY(-50%);
					height: 16px;
					width: 16px;
					background-image: url('images/angle-right-solid.svg');
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
				}

				h4{
					font-size: 16px;
					font-weight: 700;
					margin: 0 0;
					text-transform: uppercase;
					margin-bottom: 8px;
					color: var(--white);
				}

				p{
					font-size: 16px;
					font-weight: 400;
                    line-height: 1.5;
					margin: 0 0;
					color: var(--white);
				}
			}
		}
	}
}

.grid{
	position: relative;
	padding: 120px 0;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;

	.career{
		position: relative;
		padding: 30px 40px;
		background: var(--exlight-grey);

		&:nth-child(even){
			background: var(--white);
		}

		h3{
			font-size: 19px;
			font-weight: 700;
			text-transform: uppercase;
			margin: 0 0;
			max-width: 260px;
			text-transform: uppercase;
			width: 100%;

			a{

				&:hover{
					color: var(--mint);
				}
			}
		}

		.meta-block{
			position: relative;

			&:before {
				content: '';
				position: absolute;
				/* //top: 50%; */
				top: 0;
				left: -36px;
				/* //transform: translateY(-50%); */
				height: 16px;
				width: 16px;
				background-image: url('images/angle-right-solid.svg');
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}

			h4{
				font-size: 16px;
				font-weight: 700;
				margin: 0 0;
				text-transform: uppercase;
				margin-bottom: 8px;
			}

			p{
				font-size: 16px;
				font-weight: 400;
				margin: 0 0;
				color: var(--black);

				&.active{
					font-weight: 900;
				}
			}
		}

        &.is-last-visible {
            margin-bottom: 50px;
        }
	}
}

.spontaneous{
	position: relative;
	background-color: var(--pink);
	padding: 30px 40px;
	max-width: 1440px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;

	h3, h4, p{
		color: var(--pitch-black)
	}

	h3{
		font-size: 24px;
		line-height: 30px;
		text-transform: uppercase;
		margin: 0 0;
	}

	h4{
		font-size: 16px;
		font-weight: 500;
		line-height: 24px;
		text-transform: uppercase;
		margin: 0 0;
	}

	p{
		margin-bottom: 20px;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
	}

	a{
		margin-top: 10px;
	}

	.content-block{
		position: relative;

		&:last-child{

			&:after{
				content: none;
				display: none;
			}
		}

		&:after{
			content: '';
			position: absolute;
			top: 50%;
			right: -36px;
			transform: translateY(-50%);
			height: 16px;
			width: 16px;
			background-image: url('images/angle-right-solid-black.svg');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
	}
}

/* #footer{
	position: relative;
	color: var(--white);

	.top{
		padding: 50px 0 0;
		background: var(--pitch-black);

		img{
			display: block;
			width: 100%;
			max-width: 135px;
			height: 25px;
			margin-bottom: 4px;
		}

		.text-container{
			margin-top: 5px;

			.the-content{
				position: relative;
				margin-right: 125px;
				line-height: 1.5;

				&:after{
					content: '';
					display: block;
					position: absolute;
					top: 0;
					right: -100px;
					height: 100%;
					width: 2px;
					background: var(--white);
				}

				&:last-child{
					margin-right: 0;

					&:after{
						content: none;
					}
				}
			}
		}

		nav{

			ul{

				li{
					margin-bottom: 4px;

					&:last-child{
						margin-bottom: 0;
					}

					a{
						text-transform: uppercase;
						color: #e8e8e8;
						font-size: 16px;
						font-weight: 300;

						&:hover{
							color: var(--mint);
						}
					}
				}
			}
		}

		.copyright{
			padding: 30px 0 20px;
			text-align: center;

			.the-content{

				a{
					color: #8f8f8f;

					&:hover{
						text-decoration: underline;
						color: var(--mint);
					}
				}
			}
		}

		.social-block{
			display: flex;
			align-items: flex-end;
			flex-wrap: wrap;
			margin-top: 10px;
			margin-bottom: 5px;

			p{
				font-size: 18px;
				font-weight: 700;
				text-transform: uppercase;
			}

			img{
				height: 21px !important;
				width: 21px !important;
				margin: 0 2px !important;
			}
		}

		.newsletter-block{
			display: block;
			margin-top: 5px;

			.btn{
				padding: 8px 16px;
				font-size: 14px;
			}
		}
	}

	.bottom{
		background: var(--white);
		color: var(--black);
	}

} */

#single-post-details{
	position: relative;
	margin-top: 70px;
	padding-bottom: 140px;

	&:after{
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: -100%;
		height: 1px;
		width: 9999px;
		background-color: #d9d9d9;
	}

	.image{
		display: block;
		@include responsive_shape(100%);
		@include background_image(cover);
		max-width: 520px;
		width: 100%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	h1{
		font-size: 40px;
		margin-top: 0;
		text-transform: uppercase;
	}

	.brief{
		position: relative;
		padding-top: 55px;

		h4{
			position: relative;
			font-size: 16px;
			line-height: 24px;
			font-weight: 700;
			padding-left: 30px;
			margin-top: 0;
			margin-bottom: 20px;

			&:last-child{
				margin-bottom: 0;
			}

			&:before{
				content: '';
				display: block;
				position: absolute;
				top: 4px;
				left: 0;
				height: 16px;
				width: 16px;
				background-image: url('images/angle-right-solid.svg');
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}

			span{
				position: relative;
				font-weight: 400;

				&:last-child{

					&:after{
						content: none;
					}
				}

				&:after{
					content: ', ';
					position: relative;
					display: inline-block;
					font-weight: 400;
				}
			}
		}

		.the-content{
			display: block;
			font-size: 16px;
			font-weight: 500;
			margin-top: 65px;
			color: var(--black);

			p{
				margin-bottom: 25px;

				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
}

.details{
	position: relative;
	margin-top: 65px;

	.the-content{
		font-size: 16px;
		font-weight: 400;
		color: var(--black);

		p{
			margin-bottom: 25px;

			&:last-child{
				margin-bottom: 0;
			}
		}

		ul, ol{

			li{
				position: relative;
				display: flex;
				align-items: center;
				list-style: none;
				padding-left: 15px;
				margin-bottom: 16px;

				&:before{
					content: '';
					display: block;
					position: absolute;
					top: 8px;
					left: 0;
					height: 1px;
					width: 4px;
					background-color: var(--mint);
				}
			}
		}
	}

	h3, h4, h5, h6 {
		display: block;
		font-size: 19px;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--mint);
		margin-top: 0;
		margin-bottom: 25px;
	}

	.detail-block{
		margin-bottom: 85px;

		&:last-child{
			margin-bottom: 0;
		}
	}
}

#apply, .s-form{
	position: relative;
	padding: 65px 30px;
	background-color: var(--mint);

	h3{
		font-size: 35px;
		font-weight: 700;
		line-height: 46px;
		text-align: center;
		color: var(--pitch-black);
		display: block;
		margin-top: 0;
		text-transform: uppercase;

		&.underline{

			&:after{
				left: 50%;
				transform: translateX(-50%);
				width: 40px;
				background-color: var(--pitch-black);
			}
		}
	}

	form{
		margin-top: 60px;
	}

	.gform_wrapper {

		&.gform_validation_error {

			form {
				margin-top: 35px;
			}
		}
	}
}

.gutter-m-6{
	margin-left: -6px;
	margin-right: -6px;
}

.gutter-p-6{
	padding-left: 6px;
	padding-right: 6px;
}

form {

	.gform_body{

		.gform_fields{
			/* @extend .row, .gutter-m-6; */
            row-gap: 5px;

			fieldset{
				outline: none;
				border: 0;
				border-radius: 0;
			}

			.gfield{
				position: relative;

				&:last-child{

					.ginput_container{
						margin-bottom: 0;
					}
				}

				&.gform_hidden{
					display: none;
					visibility: hidden;
				}

				/* &.gfield--width-half {
					@extend .col-12, .col-xl-6, .gutter-p-6;
				} */

				/* &.gfield--width-full {
					@extend .col-12, .gutter-p-6;
				} */

				.gfield_label{
					display: block;
					text-align: left;
					font-size: 16px;
					font-weight: 700;
					color: var(--black);

					.gfield_required{
						display: none;
					}
				}

				&.hidden_label{

					label{
						display: none;
					}
				}

				.gfield_description{
					display: block;
					text-align: left;
					font-size: 16px;
					font-weight: 700;
					color: var(--black);
				}

				&.gfield_error {

					.gfield_description {
						display: block;
						color: red;
						font-size: 12px;
						margin-top: -8px;

						.validation_message {
							color: red;
							display: block;
							font-size: 12px;
							margin-top: -8px;
						}
					}

					.instruction {
						display: none;
					}
				}

				&.gform_validation_container {
					display: none;
					content: none;
					padding: 0 0;
					margin: 0 0;
				}

				.ginput_container{
					position: relative;
					margin-bottom: 12px;

					input{
						/* @include mobile_appearance(none); */

						position: relative;
						box-shadow: none;
						outline: none;
						border-radius: 0;
						border: 0;
						width: 100%;
						height: 100%;
						max-height: 38px;
						background: var(--white);
						color: var(--black);
						font-size: 14px;
						font-weight: 400;
						padding: 14px 16px;

						&::placeholder{
							color: var(--black) !important;
							opacity: 1 !important;
						}
					}

					textarea{
						/* @include mobile_appearance(none); */

						position: relative;
						box-shadow: none;
						outline: none;
						border-radius: 0;
						border: 0;
						width: 100%;
						height: 100%;
						max-height: 150px;
						resize: none;
						background: var(--white);
						color: var(--black);
						font-size: 14px;
						font-weight: 400;
						font-family: var(--font-body);
						padding: 14px 16px;

						&::placeholder{
							color: var(--black) !important;
							opacity: 1 !important;
						}
					}

                    &.ginput_container_fileupload {
                        input {
                            padding: 0!important;
                            background: transparent!important;
                        }
                    }

					/* &.ginput_container_fileupload{
						position: relative;
						cursor: pointer;
						//background: var(--white);
						padding: 14px 16px;
						margin-bottom: 30px;
						//height: 38px;

						
						&:before{
							content: 'Joindre des fichiers';
							position: absolute;
							display: block;
							top: 0;
							left: 0;
							color: var(--black);
							font-size: 14px;
							font-weight: 400;
							padding: 10px 16px;
							width: 100%;
						}

						&:after{
							content: '';
							display: block;
							position: absolute;
							top: 50%;
							right: 16px;
							transform: translateY(-50%);
							height: 20px;
							width: 20px;
                            background-image: url('assets/images/plus-circle-solid-mint.svg');
                            background-size: cover;
                            background-position: center;
                            background-repeat: no-repeat;
						}

						.gform_fileupload_multifile{
							position: absolute;
							top: 0;
							left: 0;
							height: 100%;
							width: 100%;

							.gform_drop_area{
								height: 100%;
								width: 100%;

							}

							button{
								position: relative;
								z-index: 1;
								height: 100%;
								width: 100%;
								background: transparent;
								color: transparent;
								outline: none;
								border: 0;
								cursor: pointer;
							}
						}

						.screen-reader-text,
						.gform_drop_instructions{
							display: none;
						}

						.gform_fileupload_rules{
							display: block;
							position: absolute;
							bottom: -24px;
							left: 2px;
							font-size: 11px;
							line-height: 1.125em;
							font-weight: 300;
						}

						input{
							position: relative;
							top: -2px;
							text-transform: uppercase;
							background: none;
							border: 0;
							border-radius: 0;
							-webkit-appearance: none;
							cursor: pointer;
							padding: 0;
						}

						.validation_message{

							> ul{

								> li{
									display: block;
									margin: 2px 0;
								}
							}
						}
					} */

					&.ginput_recaptcha{
						margin: 15px 0;
					}
				}

				.ginput_preview{

					strong{
						font-size: 14px;
						font-weight: 700;
						color: var(--black);
					}

					button{
						background: transparent;
						outline: none;
						border: none;
						font-size: 16px;

						.dashicons{

							&:before{
								content: "\f335";
							}
						}
					}
				}
			}
		}
	}

	.gform_footer{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15px;

		.gform_ajax_spinner {
			display: inline-block;
			vertical-align: middle;
			width: 25px;
			height: 25px;
			margin: 10px 10px 10px 30px;
		}

		button, .button{
			display: flex!important;
            align-items: center!important;
            justify-content: center!important;
            width: max-content!important;
            text-align: center!important;
            text-transform: uppercase!important;
            padding: 14px 24px!important;
            background: var(--pitch-black)!important;
            color: var(--white)!important;
            font-size: 15px!important;
            font-weight: 700!important;
            border-radius: 0!important;

            &:hover{
                background: #ffffff!important;
                color: #545454!important;
            }

			outline: none;
			border: 0;
			cursor: pointer;

			&:hover{
				background: var(--white);
				color: var(--black);
			}
		}
	}

	.gfield_checkbox{
		display: flex;
		flex-direction: column;

		.gchoice{
			display: flex;
			align-items: center;
			margin: 8px 0;
			label{
				margin-left: 10px;
				margin-top: 0;
			}
			input[type=checkbox] {
				position: relative;
				cursor: pointer;
				margin: 0;
				width: 20px!important;
				background: transparent!important;
			}
			input[type=checkbox]:before {
				content: "";
				display: block;
				position: absolute;
				width: 26px;
				height: 26px;
				top: 0;
				left: 0;
				border: 2px solid black;
				border-radius: 0;
				background-color: transparent;
			}
			input[type=checkbox]:checked:after {
				content: "";
				display: block;
				width: 14px;
				height: 14px;
				border: none;
				position: absolute;
				top: 6px;
				left: 6px;
				background-color: black;
			}
		}
	}
}

.fancybox-content .gform_wrapper{
	cursor: default;
}

.gform_wrapper {

	&.gform_validation_error{

		form{
			margin-top: 35px;
		}
	}

	.gform_validation_errors {
		position: relative;
		text-align: center;
		display: block;
		padding-top: 35px;
		margin: 15px auto;

		h2 {
			font-size: 20px;
			line-height: 24px;
			color: var(--black);
			font-weight: 600;
			margin: 0 0;
		}
	}
}

.gform_confirmation_wrapper {
	position: relative;
	text-align: center;
	display: block;
	padding-top: 35px;
	margin: 15px auto;

	.gform_confirmation_message {

		p {
			font-size: 20px;
			line-height: 24px;
			color: var(--black);
			font-weight: 600;
			margin: 0 0;
		}
	}
}

#single-related-posts{
	position: relative;
	padding: 140px 0;

	.grid{
		padding-bottom: 65px;
	}

	h2{
		display: block;
		text-align: center;
		margin: 0 auto;
		text-transform: uppercase;

		&.underline{

			&:after{
				left: 50%;
				transform: translateX(-50%);
				width: 140px;
				background-color: var(--black);
			}
		}
	}

	.buttons{
		margin-top: 0px;
	}
}

.s-pop{
	display: none;

	&.fancybox-content{
		width: 100%;
		height: 100%;
		background-color: rgba(var(--mint-rgb), .95) !important;
		padding: 0 0;
		margin: 0 0;
		overflow-x: hidden;

		> button{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 30px;
			width: 30px;
			margin: 15px;
			background-image: url('images/plus-circle-solid-black.svg');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			transform: rotate(45deg);

			svg{
				display: none;
			}

			&:hover{
				/* background: {
					image: url('../images/plus-circle-solid-white.svg');
				} */
			}
		}
	}

	.s-form{
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		background: transparent;
	}
}

#advantages{
	position: relative;
	padding: 115px 0 105px;

	&:after{
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: -100%;
		height: 1px;
		width: 9999px;
		background-color: #d9d9d9;
	}

	h2{
		display: block;
		text-align: center;
		margin: 0 auto;
		text-transform: uppercase;

		&.underline{

			&:after{
				left: 50%;
				transform: translateX(-50%);
				width: 140px;
				background-color: var(--black);
			}
		}
	}
}

.advantages-row{
	position: relative;
	padding: 60px 0;

	.block{

		h4{
			font-size: 16px;
			font-weight: 700;
			text-align: center;
			color: var(--black);
			margin: 0 0;
		}

		.icon{
			position: relative;
			margin-bottom: 40px;

			&:after{
				content: '';
				display: block;
				position: absolute;
				top: calc(100% + 20px);
				left: 50%;
				transform: translateX(-50%);
				height: 1px;
				width: 140px;
				background: var(--exlight-grey);
			}

			svg{
				display: block;
				height: 65px;
				width: 65px;

				path{
					fill: var(--mint);
				}
			}
		}
	}
}

.a-pop{
	display: none;

	&.fancybox-content{
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0, 1) !important;
		padding: 0 0;
		margin: 0 0;
		overflow-x: hidden;

		> button{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 30px;
			width: 30px;
			margin: 15px;
            background-image: url('images/plus-circle-solid-mint.svg');
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
			transform: rotate(45deg);

			svg{
				display: none;
			}

			&:hover{
				/* background: {
					image: url('../images/plus-circle-solid-white.svg');
				} */
			}
		}
	}

	.text-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
		position: relative;
		max-width: 768px;
		height: 100%;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding: 15px;

		h2{
			text-align: left;
			color: var(--mint)!important;

			&.underline{

				&:after{
					background-color: var(--white);
				}
			}
		}

		.the-content{
			font-size: 16px;
			font-weight: 400;
			color: var(--white);
			padding-top: 30px;

			p{
				margin-bottom: 25px;

				&:last-child{
					margin-bottom: 0;
				}
			}

			ul, ol{

				li{
					position: relative;
					display: flex;
					align-items: center;
					list-style: none;
					padding-left: 35px;
					margin-bottom: 10px;

					&:before{
						content: '';
						display: block;
						position: absolute;
						top: 4px;
						left: 0;
						height: 16px;
						width: 16px;
						background-image: url('images/angle-right-solid.svg');
						background-size: cover;
						background-position: center;
						background-repeat: no-repeat;
					}
				}
			}
		}
	}
}

.select-container{
	position: relative;
	margin: 0 20px;

	&:first-child{
		margin-left: 0;
	}

	&:last-child{
		margin-right: 0;
	}

	svg{
		position: absolute;
		top: calc(50% - 1px);
		right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 16px;
		width: 16px;
		transform: translateY(-50%) rotate(90deg);
		z-index: 1;
	}
}
select{
	@include mobile_appearance(none);

	position: relative!important;
	width: 270px!important;
	height: 30px!important;
	font-size: 15px!important;
	font-weight: 400!important;
	color: var(--white)!important;
	background-color: var(--pitch-black)!important;
	padding: 4px 20px!important;
	text-transform: uppercase!important;
	cursor: pointer!important;
	outline: none!important;
	border: 0!important;

	option{
		background-color: var(--white)!important;
		color: var(--pitch-black)!important;
		padding: 15px!important;
	}
}

/* Remove native dropdown arrow; */
#careers select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: none !important;
	padding-right: 36px !important;
}

/* Hide IE/Edge legacy arrow */
#careers select::-ms-expand {
	display: none;
}

#careers .grid {
	padding-bottom: 0;
}

/* Gravity Forms checkboxes in popup: render custom box via label */
.s-pop .gfield_checkbox .gchoice{
	position: relative;
}
.s-pop .gfield_checkbox .gchoice .gfield-choice-input{
	position: absolute;
    padding: 0!important;
	left: 0;
	top: 2px;
	margin: 0;
	width: 26px !important;
	height: 26px !important;
	opacity: 0;
}
.s-pop .gfield_checkbox .gchoice label{
	position: relative;
    padding-top: 4px;
    padding-left: 10px;
}
.s-pop .gfield_checkbox .gchoice label:before{
	content: '';
	position: absolute;
	left: -30px;
	top: 0;
	width: 26px;
	height: 26px;
	border: 2px solid var(--pitch-black);
	background: transparent;
}
.s-pop .gfield_checkbox .gchoice .gfield-choice-input:checked + label:after{
	content: '';
	position: absolute;
	left: -24px;
	top: 6px;
	width: 14px;
	height: 14px;
	background: var(--pitch-black);
}

/* Gravity Forms select-all button styling inside popup */
.s-pop .ginput_container_checkbox .gfield_choice_all_toggle{
	display: block!important;
	width: 100%!important;
	background: var(--pitch-black)!important;
	color: var(--white)!important;
	border: 0!important;
	border-radius: 0!important;
	padding: 12px 16px!important;
	text-align: center!important;
	cursor: pointer!important;
}

.s-pop .ginput_container_checkbox .gfield_choice_all_toggle:hover{
	background: var(--pitch-black)!important;
}

.page-template-page-careers .fusion-row,
.page-template-page-careers .fusion-builder-row {
	max-width: 1920px !important;
    margin-left: auto;
    margin-right: auto;
}

.single-career .fusion-row,
.single-career .fusion-builder-row {
	max-width: 1920px !important;
    margin-left: auto;
    margin-right: auto;
}

.single-career #apply .gform_wrapper {
    --form_bg_color: var(--white);
}

#spontaneous-apply {
    padding-bottom: 120px;
    
    h3 {
        font-size: 24px;
        font-weight: 700;
        color: #000;
    }
    
    h4 {
        font-size: 16px;
        font-weight: 500;
        color: #000;
    }
    
    p {
        font-size: 16px;
        color: #000;
    }
}

/* Bootstrap 5 no-gutters for legacy markup */
#spontaneous-apply .spontaneous.row.no-gutters {
	--bs-gutter-x: 0;
	--bs-gutter-y: 0;
}


/* Mobile fixes for careers page */
@media (max-width: 767.98px) {
	/* Hero adjustments */
	.hero .top {
		min-height: auto;
		margin-bottom: 20px;
		flex-direction: column-reverse;
	}
	.hero .top .text-container {
		position: relative;
		top: 0;
		transform: none;
		padding: 20px;
		max-width: 100%;
		background-color: rgba(var(--pink-rgb), .6);
	}
	.hero .top .image {
		width: 100%;
		height: auto;
		max-height: none;
		margin-left: 0;
	}
	.hero .top .image > img,
	.hero .top .image > picture {
		height: auto;
	}
	
	.bottom {
	    .col-lg-4 {
	        margin-bottom: 20px;
	    }
	}

	/* Filters spacing */
	#careers .filters .select-container {
		margin: 10px 0;
	}

	/* Careers grid spacing */
	#careers .grid {
		padding-top: 60px;
		padding-bottom: 0;
	}

	/* Ensure sections stack above preceding content and are visible */
	#advantages,
	#careers {
		position: relative;
		z-index: 2;
	}
	#advantages h2,
	#advantages .the-content,
	#careers h2,
	#careers .the-content {
		color: var(--pitch-black);
	}

	/* Spontaneous section blocks stack nicely */
	#spontaneous-apply .spontaneous .content-block {
		margin-bottom: 15px;
	}
	
	#spontaneous-apply {
	   .col-sm-6::after {
	       content: none;
	   }
	   
	   .row {
	       margin-left: 0;
	       margin-right: 0;
	   }
	   
	   .wrapper {
	       width: 100%;
	   }
	}

	/* Smaller buttons on mobile */
	.btn,
	.gform_footer button,
	.gform_footer .button {
		padding: 10px 20px !important;
		font-size: 14px !important;
	}

	/* Spontaneous section typography */
	#spontaneous-apply .spontaneous h3 {
		font-size: 18px !important;
		line-height: 1.25;
		text-align: center;
	}
	#spontaneous-apply .spontaneous h4 {
		font-size: 15px !important;
		line-height: 1.4;
		text-align: center;
	}
	#spontaneous-apply .spontaneous p {
		font-size: 16px !important;
		line-height: 1.4;
		text-align: center;
	}
	#spontaneous-apply .spontaneous .btn {
		font-size: 11px !important;
	}

	/* Make hero bottom content wider by trimming padding/margins */
	.hero .wrapper { width: 100%; }
	.hero .bottom { 
        padding-left: 0; 
        padding-right: 0; 
    }
	.hero .bottom .notice-block { 
        padding: 16px; 
    }
	.hero .bottom .row { 
        margin-left: -8px; 
        margin-right: -8px; 
    }
	.hero .bottom [class^="col-"],
	.hero .bottom [class*=" col-"] { 
        padding-left: 8px; 
        padding-right: 8px; 
    }
    
    #apply {
        margin-top: 30px;
    }
    
    .brief {
        padding-bottom: 55px;
    }
}

/* Tablet and small desktop fixes to prevent oversized hero */
@media (max-width: 991.98px) {
	.hero{
		height: auto !important;
	}
	.hero .top{
		min-height: auto;
		overflow: hidden;
	}
	.hero .top .text-container{
		position: relative;
		top: 0;
		transform: none;
		max-width: 100%;
	}
	.hero .top .image{
		height: auto;
		max-height: 60vh;
		margin-left: 0;
	}
	.hero .top .image > img,
	.hero .top .image > picture{
		height: auto;
		max-height: 60vh;
	}
}

@media (min-width: 1200px) {
	#single-post-details #sidebar {
		position: sticky;
		top: 20px;
		align-self: flex-start;
	}
}

/* Ensure Bootstrap column widths win inside spontaneous section */
@media (min-width: 1200px) {
	#spontaneous-apply .spontaneous > .col-xl-3 {
		flex: 0 0 auto;
		width: 25% !important;
	}
}