/*
Theme Name: webmix
Author: webmix
Author URI: https://www.webmix.nl
Description: Webmix Custom Theme
*/

* {
	font-family: abadi,sans-serif;
	font-style: normal;
}

:root {
  --primary: #003f29;
  --secondary: #50bcbd;
  --tertiary: #006f56;
  --quaternary: #4dae3c;
  --black: #000;
  --white: #FFF;
  /* --sm: 540px;
  --md: 768px;
  --lg: 992px;
  --xl: 1140px;
  --xxl: 1320px; */
}

#wpadminbar {
	opacity: .5;
}

img {
	width: 100%;
}

html {
	margin-top: 0px !important;
}

body {
	font-family: sans-serif;
	margin: 0px;
	height: 100%;
	font-size: 18px !important;
	font-weight: 300 !important;
}
  
h1, h2, h3, h4, h5, h6 {
	color: var(--primary);
	transition: .3s all ease;
	font-weight: 600;
	margin-bottom: 1rem;
	
	h5 {
		font-weight: 300;
	}
}

p {
	@media(max-width: 768px) {
		font-size: 1rem;
	}
}


h3 {
	font-size: 1.5rem !important;
}

header {
	display: block;
	position: fixed;
	top: 0;
	width: 100%;
	background: white;
	z-index: 5;
	
	.wx-menu {
		background: var(--white);
		width: 100%;
		height: 0;
		opacity: 0;
		transition: .4s all ease;
		overflow: hidden;
		
		&.open {
			opacity: 1;
			height: auto;
			
			@media(max-width: 992px) {
				height: 100vh;
			}
		}
		
		.container {
			padding: 1rem;
			
			ul {
				list-style-type: none;
				padding-left: 0;
				
				li {
					padding: 1rem 0;
					
					a {
						color: var(--primary);
						font-weight: 700;
						font-size: 1.2rem;
						
						&:hover {
							color: var(--tertiary);
						}
					}
				}
			}
			
			.dropdown-menu {
				border: none;
				
				.dropdown-item {
					font-size: 1rem !important;
					
					&:hover {
						background: transparent;
					}
				}
				
				&.open { 
					display: block;
				}
			}
		
			.menu-item-has-children {
				cursor: pointer;
				display: block;
				
				&.dropdown-menu {
					position: relative;
					
					&:after {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 1px;
						height: 100%;
						background: var(--primary);
					}
				}
				
				.nav-link {		
					width: fit-content;
												
					&:after {
						content: none;
					}
				}
				
				.arrow {
					position: absolute;
					right: 16px;
					top: 35px;
					transform: translate(0, -50%);
					
					&:after {
						content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='15' height='15' x='0' y='0' viewBox='0 0 451.847 451.847' style='enable-background:new 0 0 512 512' xml:space='preserve' class=''%3E%3Cg%3E%3Cpath d='M225.923 354.706c-8.098 0-16.195-3.092-22.369-9.263L9.27 151.157c-12.359-12.359-12.359-32.397 0-44.751 12.354-12.354 32.388-12.354 44.748 0l171.905 171.915 171.906-171.909c12.359-12.354 32.391-12.354 44.744 0 12.365 12.354 12.365 32.392 0 44.751L248.292 345.449c-6.177 6.172-14.274 9.257-22.369 9.257z' fill='%23003f29' opacity='1' data-original='%23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
						position: absolute;
						top: 50%;
						left: 0;
						transform: translate(0%, -50%);
					}
				}
				
				.sub-menu {
					margin-left: 1.2rem;		
					height: 0;
					overflow: hidden;		
					
					&.open {
						height: auto;
						overflow: visible;
					}
					
					.menu-item {
						a {
							font-size: 1.05rem;
						}
					}
				}
			}
		}
	}
}

a {
	text-decoration: none !important;
	transition: .3s all ease;
	color: var(--secondary);
}

.nav {
	ul {
		display: flex;
		gap: 2rem;
		margin-bottom: 0;
	}
	
	li {
		display: block;
	}
}

.sub-header {
	padding: .7rem 0 0;
	transition: .1s all ease;
	
	@media(max-width: 992px) {
		display: none;
	}
	
	.row {
		justify-content: end;
		
		a {
			color: var(--primary);
			font-weight: 200;
			font-size: 1rem;
		}
	}
}

.main-header {
	transition: .1s all ease;
	transition-delay: .1s;
	
	@media(max-width: 1200px) {
		padding: 1.2rem 0;
	}
	
	.logo {
		img {
			max-width: 180px;	
			transition: .15s all ease;
			
			@media(max-width: 768px) {
				max-width: 100px;
			}
		}
	}
	
	#menu-main-menu {
		height: 80px;
		align-items: center;
	}
	
	/* .menu-item {
		&:last-child,
		&:nth-last-child(2) {
			.dropdown-menu {
				right: 0;
				left: auto;
			}
		}
	} */
	
	
	.nav-item {
		position: relative;
		padding: 0;
		margin: .5rem 0;
		
		&:after {
			content: '';
			position: absolute;
			bottom: -10px;
			left: 0;
			width: 100%;
			height: 2px;
			background: var(--primary);
			transition: .3s all ease;
			opacity: 0;
		}
		
		&:hover {
			color: var(--tertiary);
			
			&:after {
				bottom: -2px;
				opacity: 1;
			}
		}
		
		.nav-link {
			color: var(--primary);
			font-weight: 700;
			font-size: 1rem;
			padding: 0;
			
			&:active, &:focus {
				color: var(--tertiary);
			}
		}
	}
	
	.navbar {
		.dropdown-menu {
			display: none;
			border-radius: 0;
			left: 0;
			box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
			border: none;
			top: 100%;
			padding: 1.5rem 1rem;
			
			.nav-item {				
				&:after {
					content: none;
				}
				
				a {
					font-weight: 700;
					
					&:hover {
						color: var(--tertiary);
						background: transparent;
						
						&:after {
							content: none;
						}
					}
				}
			}
			
			&.open {
				display: block;
				
				&:has(.menu-item-has-children) {
					box-shadow: none;
				}
				
				.sub-menu {
					box-shadow: none;
					right: 0;
					top: 30%;
					left: 100%;
					margin-left: 1rem;
				}
				
				.menu-item-has-children {
					display: block;
					box-shadow: none;
					padding: 0;
				}
			}
		}
	}
	
	.hamburger {
		.hamburger-wrapper {
			cursor: pointer;
			position: relative;
			height: 40px;
			width: 25px;
			
			&:hover {
				.inner-hamburger  {
					background: var(--secondary);
					
					&:before,
					&:after {
						background: var(--secondary);
					}
				}
			}
			
			&.hamburger-open {
				.inner-hamburger {
					background: transparent !important;
					
					&:after {
						animation: moveBottom .3s forwards;
					}
					&:before {
						animation: moveTop .3s forwards;
					}
				}
			}
			
			&.hamburger-closed {
				.inner-hamburger {
					
					&:after {
						animation: moveBottomExit .3s forwards;
					}
					&:before {
						animation: moveTopExit .3s forwards;
					}
				}
			}
			
			.inner-hamburger {
				width: 25px;
				height: 3px;
				background: var(--primary);
				position: absolute;
				top: 50%;
				left: 0%;
				transform: translate(0%, -50%);
				transition: .2s all ease;
				
				&:before,
				&:after {
					content: '';
					width: 25px;
					height: 3px;
					background: var(--primary);
					position: absolute;
					transition: .2s all ease;
				
				}
				
				&:after {
					bottom: 8px;
				}
				&:before {
					top: 8px;
				}
			}
		}
	}
}

@keyframes moveBottom {
	from {
		bottom: 8px;
	}
	to {
		bottom: 0px;
		transform: rotate(45deg);
	}
}

@keyframes moveTop {
	from {
		top: 8px;
	}
	to {
		top: 0px;
		transform: rotate(-45deg);
	}
}

@keyframes moveBottomExit {
  from {
	bottom: 0px;
	transform: rotate(45deg);
  }
  to {
	bottom: 8px;
  }
}

@keyframes moveTopExit {
  from {
	top: 0px;
	transform: rotate(-45deg);
  }
  to {
	top: 8px;
  }
}

.on-scroll {
	.main-header {
		box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
		
		/* .logo {
			img {
				width: 70%;	
			}
		} */
	}
	
	.sub-header {
		padding: .4rem 0 0;
	}
}

main {
	section {
		padding: 3rem 0;
		
		&:first-child {
			margin-top: var(--header-height);
		}
	}
}

.main {
	padding: 4rem 0;
}

.btn {
	border-radius: 0 !important;
	padding: .5rem 1.5rem !important;
	font-weight: 600 !important;
	color: var(--white) !important;
	width: fit-content;
	
	&.btn-primary {
		background: var(--primary);
		border: 1px solid var(--primary);
		
		&:hover {
			background: var(--tertiary);
			border: 1px solid var(--tertiary);
		}
	}
	
	&.btn-secondary {
		background: var(--secondary);
		border: 1px solid var(--secondary);
		
		&:hover {
			background: var(--tertiary);
			border: 1px solid var(--tertiary);
		}
	}
	
	&.btn-tertiary {
		background: var(--tertiary);
		border: 1px solid var(--tertiary);
		
		&:hover {
			background: var(--secondary);
			border: 1px solid var(--secondary);
			color: var(--white);		
		}
	}
}

footer {
	height: fit-content;
	position: relative;
	padding: 6rem 0 0 0;
	overflow: hidden;
	z-index: 0;
	
	&::before {
		content: '';
		background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='736px' height='431px' viewBox='0 0 736 431' version='1.1'%3E%3Ctitle%3EPath 3%3C/title%3E%3Cdefs%3E%3Cpolygon id='path-1' points='271.5 571.5 271.5 -152.5 690.5 -152.5 690.5 379.710628'%3E%3C/polygon%3E%3Cfilter x='-2.4%25' y='-1.1%25' width='104.8%25' height='102.8%25' filterUnits='objectBoundingBox' id='filter-2'%3E%3CfeOffset dx='0' dy='2' in='SourceAlpha' result='shadowOffsetOuter1'%3E%3C/feOffset%3E%3CfeGaussianBlur stdDeviation='3' in='shadowOffsetOuter1' result='shadowBlurOuter1'%3E%3C/feGaussianBlur%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.048353502 0' type='matrix' in='shadowBlurOuter1'%3E%3C/feColorMatrix%3E%3C/filter%3E%3C/defs%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Footer-Bg' transform='translate(-115.000000, 6.000000)'%3E%3Cg id='Path-3' transform='translate(481.000000, 209.500000) rotate(-90.000000) translate(-481.000000, -209.500000) '%3E%3Cuse fill='black' fill-opacity='1' filter='url(%23filter-2)' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill='%23F0F0F0' fill-rule='evenodd' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E ");
		background-repeat: no-repeat;
		background-size: 60% 100%;
		position: absolute;
		background-position: -40%;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		
		@media(max-width: 1200px) {
			content: none;
		}
	}
	
	.swirl {
		width: 15px;
	}
	
	a {
		padding: 0;
	}
	
	.container {
		position: relative;
		z-index: 3;
		
		.row {
			align-items: start;
			
			.eu-logos {
				text-align: right;
				
				@media(max-width: 768px) {
					text-align: left;
				}
				
				img {
					width: 200px;
					
					&:last-child {
						margin-top: 2rem;
					}
				}
			}
			
			.footer-logo {
				img {
					width: 80%;
					
					@media(max-width: 768px) {
						width: 230px;
					}
				}
			}
			
			.details {
				display: flex;
				flex-direction: column;
				
				p {
					margin-bottom: 0;
					color: var(--primary);
				}
				
				a {
					color: var(--secondary);
					font-weight: 700;
					
					&:hover {
						color: var(--tertiary);
					}
				}
			}
		}
	}
	
	.section-overlay {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 93%;
		background: #f8f8f8;
		z-index: -1;
	}
	
	.sub-footer {
		padding: 6rem 0 2rem 0;
		font-size: 13px;
		
		.legal {
			a {
				padding-right: 1rem;
			}
		}
				
		a {
			color: var(--primary);
			
			&:hover {
				color: var(--tertiary);
			}
		}
	}
}

.banner-section {
	position: relative;
	height: 450px;
	padding: 0;
	margin-top: var(--header-height);
	/* overflow: hidden; */
	
	&:has(.event-details) {
		height: 525px;
	}
	
	.banner-title {
		position: absolute;
		left: 0;
		bottom: 0;
		clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
		background: var(--tertiary);
		width: 60vw;
		height: 100%;
		
		@media(max-width: 991px) {
			transform: translateY(2rem);
		}
		
		@media(max-width: 768px) {
			width: 95%;
			transform: translateY(2rem);
			height: 35%;
		}
		
		&:has(.event-details) {
			min-height: 80%;
			
			@media(max-width: 768px) {
				width: 95%;
				transform: translateY(2rem);
			}
			@media(max-width: 540px) {
				width: 100%;
			}
		}
		
		.inner {
			position: absolute;
			top: 50%;
			left: 20%;
			width: 63%;
			
			@media(max-width: 768px) {
				left: 10%;
				top: 50%;
				transform: translate(0, -50%);
			}
			
			&:has(.event-details) {
				top: 50%;
				transform: translate(0, -50%);
				width: 53%;
				
				@media(max-width: 768px) {
					width: 70%;
				}
			}
			
			h1 {
				color: var(--white);
				font-weight: 700 !important;
			}
			
			.event-details {
				width: fit-content;
				display: flex;
				flex-direction: column;
				color: white;
				
				span {
					color: var(--white);
					position: relative;
					
					@media(max-width: 768px) {
						font-size: 1rem;
					}
				}
			}
		}
	}
	
	.banner-image {
		background-position: right center;
		background-repeat: no-repeat;
		background-size: cover;
		width: 70%;
		height: 90%;
		left: auto;
		position: absolute;
		z-index: -1;
		right: 0;
		top: 5%;
		
		@media(max-width: 992px) {
			width: 100%;
			height: 100%;
			top: 0;
		}
	}
}

.filter-grid {
	.grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
		
		@media(max-width: 1140px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}

.post-card {
	cursor: pointer;
	
	&.alumni {
		cursor: default;
		
		.img-wrapper {
			position: relative;
			
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 111, 86, 0.5);
				opacity: 0;
				transition: .2s ease all;
			}
			
			&:hover {
				cursor: pointer;
				
				&:after {
					opacity: 1;
				}
			}
		}
		
		img {
			max-height: 250px !important;
			object-fit: cover;
			
			@media(max-width: 992px) {
				height: 200px !important;
			}
			@media(max-width: 540px) {
				height: 150px !important;
			}
		}
	}
	
	&.blog {
		position: relative;
		
		.img-wrapper {
			overflow: hidden;
			margin-bottom: .5rem;
			height: 215px;
			position: relative;
			
			span {
				position: absolute;
				z-index: 1;
				color: #525252;
				font-weight: 500;
				font-size: 13px;
				padding: .5rem .8rem;
				top: 10px;
				right: 10px;
				background: rgba(242, 242, 242, 0.75);
			}
			
			@media(max-width: 540px) {
				height: 140px;
			}
			
			img {
				height: 100%;
				object-fit: cover;
			}
		}
		
		h5 {
			color: var(--black);
			font-weight: 400 !important;
			margin-top: .5rem;
		}
		
		.date {
			font-size: 14px;
			font-weight: 300;
			color: rgb(95, 95, 95);
		}
		
		&:hover {
			img {
				transform: scale(1.2);
			}
		}
	}
	
	img {
		width: 100%;
		min-height: 275px;
		transition: .3s all ease;
		object-fit: contain;
		
		@media(max-width: 540px) {
			max-height: 140px;
			min-height: 140px;
		}
	}
	
	h5 {
		color: var(--primary);
		margin-top: 1rem;
	}
	
	p {
		font-weight: 300;
	}
	
	a {
		svg {
			width: 20px;
			height: 20px;
		}
	}
}

.alumni-modal {
	.modal-header {
		border: none;
		padding: 1.5rem;
	}
	
	.modal-content {
		border-radius: 0;
		
		.modal-body {
			padding: 0 1.5rem 1.5rem;
			
			.alumni-details {
				font-size: .95rem;
				
				span {
					font-weight: 700;
					display: flex;
					flex-direction: column;
					gap: .2rem;
					
					p {
						font-weight: 300;
						margin-bottom: .8rem;
					}
					
					ul {
						padding-left: 1.3rem;
						font-weight: 300;
					}
				}
			}
			
			.alumni-links {
				margin-top: 1.5rem;
				display: flex;
				flex-wrap: wrap;
				gap: 1rem;
				
				a {
					svg {
						width: 23px;
					}
				}
			}
		}
	}
}

.singlebanner-section {
	.container {
		position: relative;
		padding-bottom: 3rem;
		
		h1 {
			font-weight: 700 !important;
			color: var(--primary) !important;
			font-size: 33px !important;
			margin-bottom: 1.5rem;
			width: 85%;
			
			@media(max-width: 990px) {
				width: 100%;
			}
		}
		
		.date {
			font-size: 18px;
			color: rgb(95, 95, 95);
			
			time {
				font-weight: 300 !important;
			}
			
			span {
				font-weight: 700;
			}
			
			.category {
				padding: 0.5em 1.3em;
				background: rgba(77, 174, 60, 0.12);
				border-color: transparent;
				color: #4DAE3C;
			}
		}
	}
}

.single-post {
	position: relative;
	padding-bottom: 3rem;
	
	&.job {
		.content {
			&:before {
				content: none;
			}
		}
	}
	
	.content {
		position: relative;
		padding-top: 3rem;
		
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 12px;
			width: calc(100% - 12px);
			height: 1px;
			background: rgb(230, 230, 230);
		}
	}
	
	.latest-news {
		position: sticky;
		top: var(--header-height);
		height: 100%;
		border-left: 1px solid rgb(230, 230, 230);
		padding-left: 24px;
		
		@media (max-width: 1200px) {
			border-left: none;
			padding-left: 12px;
		}
		@media (max-width: 992px) {
			padding-top: 3rem;
		}
		
		
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 12px;
			width: calc(100% - 12px);
			height: 1px;
			background: rgb(230, 230, 230);
			display: none;
			
			@media (max-width: 992px) {
				display: block;
			}
		}
		
		h2 {
			color: var(--primary);
			font-weight: 600;
			margin-bottom: 2rem;
			font-size: 1.8rem;
		}
		
		.related-news-wrapper {
			display: flex;
			flex-direction: column;
			gap: 1.5rem;
			
			@media(max-width: 1200px) {
				flex-direction: row;
			}
			@media(max-width: 600px) {
				flex-direction: column;
			}
			
			.related-card {
				width: 100%;
				display: flex;
				gap: .5rem;
				justify-content: center;
				flex-direction: column;
				position: relative;
				
				&:hover {
					h4 {
						color: var(--tertiary) !important;
					}
				}
				
				.img-wrapper {
					width: 100%;
					height: 100%;
					
					img {
						object-fit: cover;
						object-position: center;
						width: 100%;
						height: 100%;
					}
				}
				
				.content-wrapper {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: .5rem;
					
					h4 {
						font-weight: 300;
						color: var(--black);
						font-size: 1.3rem;
					}
					
					.date {
						font-size: 13px;
					}
				}
			}
		}
	}
}

.comment-section {
	#comments {	
		.comment-form-comment {
			display: flex;
			flex-direction: column;
			
			textarea {
				font-size: 14px !important;
				border: 1px solid #cccccc !important;
				box-shadow: none !important;
				border-radius: 2px !important;
				margin: 10px 0 !important;
				width: 100% !important;
			}
		}
		
		.logged-in-as {
			font-size: 1rem;
			
			a {
				color: var(--tertiary);
			}
		}
		
		.children {
			list-style-type: none;
			position: relative;
			padding-left: 0;
			
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 1px;
				height: 100%;
				background: #4dae3c;
			}
			
			.comment {
				padding: 0 3rem !important;
				margin-top: 3rem;
			}
			
			.comment-respond {
				margin-left: 3rem;
			}
		}
		
		#submit {
			background: var(--secondary);
			color: var(--white);
			border: none;
			padding: 0.8em 1.8em;
			transition: .3s all ease;
			
			&:hover {
				background: var(--tertiary);
			}
		}
		
		.comments-title {
			font-size: 1.2rem;
		}
		
		#cancel-comment-reply-link {
			color: var(--secondary) !important;
			text-decoration: underline !important;
			margin-left: 1rem;
		}
		
		.comment-list {
			list-style: none;
			padding-left: 0;
			
			.comment {
				padding: 3rem;
				background: #ebf2f0;
				margin-bottom: 1.5rem;
				
				.reply {
					a {
						color: var(--tertiary);
						font-size: 1rem;
						font-weight: 500;
						text-decoration: underline !important;
					}
				}
				
				.comment-body {
					p {
						margin: 2rem 0;
					}
					
					.comment-author,
					.comment-meta {
						span, .fn a {
							color: var(--primary);
							font-size: 1rem;
						}
						a {
							color: rgb(95, 95, 95);
							font-size: 1rem;
						}
						img {
							object-fit: cover;
							width: 50px;
							height: 50px;
						}
					}
				}
			}
		}
	}
}

.gform_wrapper {
	display: flex;
	align-items: center;
	flex-direction: column;
	
	h2 {
		color: var(--primary);
		font-weight: 700;
	}

	form {
		width: 50%;
		
		input, textarea {
			font-size: 14px !important;
			border: 1px solid #cccccc !important;
			box-shadow: none !important;
			border-radius: 2px !important;
			margin: 10px 0 !important;
		}
		
		label {
			font-weight: 300 !important;
			color: var(--primary) !important;
			font-size: 14px !important;
		}
		
		.gform_button {
			background: var(--secondary) !important;
			border-color: transparent !important;
			border-radius: 0 !important;
		}
	}
}

.custom-login-page {
	display: flex;
	align-items: center;
	flex-direction: column;
	
	.inner {
		background: var(--tertiary);
		padding: 2rem;
		
		h2 {
			color: var(--white);
			font-weight: 700;
		}
		
		form {
			width: 70%;
			
			input {
				border: transparent;
			}
			
			label {
				color: var(--white);
				font-size: 15px;
				font-weight: 700;
			}
			
			.login-remember {
				label {
					font-size: 13px;
					font-weight: 300;
				}
			}
			
			.button {
				background: var(--secondary) !important;
				border-color: transparent !important;
				border-radius: 0 !important;
				color: var(--white);
				padding: 0.5em 1.5rem;
				font-size: 1rem;
				font-weight: 700;
			}
		}	
	}
}

.flickity-button {
	background: transparent !important;
	transition: .3s ease all;
	
	&:hover {
		background: var(--tertiary) !important;
	}
	
	.flickity-button-icon {
		fill: white;
	}
}

.hero-slider {
	height: 55vh;
	position: relative;
	z-index: 0;
	padding: 0;
	
	.hero-slide {
		margin-right: 0;
		position: relative;
		height: 100%;
		width: 100%;
		
		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.35);
		}
		
		img {
			object-fit: cover;
			height: 100%;
			width: 100%;
		}
		
		.hero-title {
			position: absolute;
			z-index: 1;
			top: 50%;
			left: 35%;
			transform: translate(-50%, -50%);
			width: 45%;
			
			@media(max-width: 1200px) {
				width: 70%;
				left: 50%;
			}
					
			p {
				color: var(--white);
			}
			
			h1 {
				color: var(--white);
				font-weight: 700;
			}
		}
	}
}

.jobs-grid {
	.job-card {
		display: flex;
		justify-content: space-between;
		column-gap: 2rem;
		padding: 3rem 0;
		position: relative;
		
		@media(max-width: 540px) {
			flex-direction: column;
		}
		
		&:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background: rgb(230, 230, 230);
		}
		
		.content-wrapper {
			width: 60%;
			font-size: 1rem;
			
			@media(max-width: 540px) {
				width: 100%;
			}
			
			a {
				h4 {
					font-weight: 700;
					color: var(--black) !important;
				}
			}
			
			.details {
				margin-top: 1rem;
				display: flex;
				flex-wrap: flex;
				gap: 2rem;
				
				@media(max-width: 540px) {
					margin: 1rem 0;
				}
				
				span {
					color: var(--primary);
				}
			}
		}
		
		.button-wrapper {
			width: 30%;
			
			@media(max-width: 540px) {
				width: 100%;
			}
			
			a {
				width: 100%;
			}
		}
		
		.event-details {
			width: fit-content;
			display: flex;
			flex-wrap: flex;
			
			span {
				color: var(--black);
				position: relative;
				
				@media(max-width: 768px) {
					font-size: 1rem;
				}
			}
		}
	}
}

.sticky-header {
	background: #f8f8f8;
	padding: 2rem 0;
	position: sticky;
	top: var(--header-height);
	z-index: 1;
	
	ul {
		list-style-type: none;
	}
	
	a {
		color: var(--secondary);
		font-weight: 700;
		
		&:hover {
			color: var(--tertiary);
		}
		
		&.current-page {
			color: var(--primary);
		}
	}
	
	.container {
		display: flex;
		list-style-type: none;
		flex-wrap: wrap;
		justify-content: space-evenly;
		margin-bottom: 0;
		gap: 2rem;
		
		li {
			text-align: center;
			
			a {
				color: var(--secondary);
				font-weight: 700;
				
				&:hover {
					color: var(--tertiary);
				}
				
				&.current-page {
					color: var(--primary);
				}
			}
		}
	}
}

.featured-slider {
	.slider-wrapper {
		.slider-title {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 1px;
				background: lightgray;
			}
		}
		
		.arrow-wrapper {
			display: flex;
			gap: 1rem;
			
			.slick-arrow {
				position: relative;
				height: 20px;
				width: 20px;
				cursor: pointer;
			}	
				
			.next-btn {
				&:after {
					content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 512 248' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M506.134 109.843L506.116 109.824L401.612 5.82394C393.783 -1.96706 381.12 -1.93807 373.327 5.89193C365.535 13.7209 365.565 26.3839 373.394 34.1759L443.558 104H20C8.954 104 0 112.954 0 124C0 135.046 8.954 144 20 144H443.557L373.395 213.824C365.566 221.616 365.536 234.279 373.328 242.108C381.121 249.939 393.785 249.966 401.613 242.176L506.117 138.176L506.135 138.157C513.968 130.339 513.943 117.635 506.134 109.843Z' fill='%23BBBBBB'/%3E%3C/svg%3E%0A");
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
			.prev-btn {
				&:after {
					content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 512 248' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M506.134 109.843L506.116 109.824L401.612 5.82394C393.783 -1.96706 381.12 -1.93807 373.327 5.89193C365.535 13.7209 365.565 26.3839 373.394 34.1759L443.558 104H20C8.954 104 0 112.954 0 124C0 135.046 8.954 144 20 144H443.557L373.395 213.824C365.566 221.616 365.536 234.279 373.328 242.108C381.121 249.939 393.785 249.966 401.613 242.176L506.117 138.176L506.135 138.157C513.968 130.339 513.943 117.635 506.134 109.843Z' fill='%23BBBBBB'/%3E%3C/svg%3E%0A");				
					transform: rotate(180deg);
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.main-slider {		
			margin-top: 2rem;
			
			.slick-slide {
				margin-right: 1rem;
				height: auto;
				
				.img-wrapper {
					height: 225px;
					
					@media(max-width: 768px) {
						height: auto;
					}
					
					img {
						height: 100%;
						width: 100%;
						object-fit: cover;
					}
				}
			}
		}
	}
}

.content-layout {
	
	&.no-banner {
		margin-top: 5rem;
	}
	/* 
	@media(max-width: 540px) {
		padding: 0rem 0;
	} */
	
	.container {
		padding: 3rem 12px;
		
		@media(max-width: 992px) {
			padding: 2rem 12px;
		}
		
		.row {
			&:has(.center-text) {
				justify-content: center;
			}		
			&:has(.col-lg-6) {
				justify-content: space-between;
			}
			&:has(.col-lg-5, .col-lg-7) {
				justify-content: space-between;
			}
			
			.col {
				@media(max-width: 992px) {
					width: 100% !important;
				}
				&.col-lg-5 {
					width: 38%;
				}
				&.col-lg-7 {
					width: 58%;
				}
				/* &.text-and-image {
					width: 49%;
				} */
				
				.col-title {
					/* position: relative;
					padding-bottom: 1rem;
					margin-bottom: 2rem; */
					/* 
					&:after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 1px;
						background: #c7d9c3;
					} */
				}
				
				&.bg {
					padding: 4rem;
					
					@media(max-width: 992px) {
						/* margin: auto 12px; */
						width: calc(100% - 24px) !important;
					}
					@media(max-width: 540px) {
						padding: 1.5rem !important;
					}
					
					&.secondary {
						background: var(--secondary);
						
						* {
							color: var(--white);
						}
					}
					&.primary {
						background: var(--primary);
						
						* {
							color: var(--white);
						}
					}
					&.tertiary {
						background: var(--tertiary);
						
						* {
							color: var(--white);
						}
					}
					&.very-light {
						background: #ebf2f0;
						
						* {
							color: var(--tertiary);
						}
					}
				}
			}
			
			img {
				height: 100%;
				object-fit: cover;
			}
			
			.btn-wrapper {
				display: flex;
				gap: 1rem;
				flex-wrap: wrap;
			}
			
			.image-gallery {
				display: flex;
				flex-wrap: wrap;
				row-gap: 2rem;
				
				.gallery-item {					
					img {
						object-fit: cover;
					}
				}
			}
		}
	}
}

.slider {
	.slider-banner {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: center;
		position: relative;
		padding-bottom: 1rem;
		margin-bottom: 2rem;
		
		h2 {
			margin-bottom: 0;
		}
		
		&:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background: #c7d9c3;
		}
		
		.slider-status {
			color: rgb(191, 191, 191);
			font-weight: 500;
			font-size: 1rem;
		}
	}
	
	.general-slider {
		max-height: 500px;
		
		@media(max-width: 540px) {
			max-height: 100%;
		}
		
		.post-card {
			margin-right: 1rem;
			width: 50%;
			
			@media(max-width: 540px) {
				width: 100%;
			}
			
			.img-wrapper {
				@media(max-width: 540px) {
					height: 225px;
				}
			}
			
			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
				
				@media(max-width: 540px) {
					max-height: 100%;
					min-height: 100%;
				}
			}
		}
	}
}

.image-slider {
	height: 500px;
	display: flex;
	
	&.slider-active {
		display: block;
	}
	
	@media(max-width: 540px) {
		min-height: 275px;
	}
	
	.gallery-item {
		margin-right: 1.5rem;
		height: 100%;
		
		img {
			object-fit: cover;
			object-position: center;
			height: 100%;
		}
	}
}

.alumni-map {
	position: relative;
	height: 750px;
	margin-top: 0 !important;
	
	@media(max-width: 991px) {
		height: 900px;
	}
	@media(max-width: 540px) {
		height: 750px;
	}
	
	.search-container {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
		margin: 2rem;
		
		input {
			padding: .7rem;
			width: 375px;
			border: none;
			
			@media(max-width: 540px) {
				width: 250px;
			}
		}
	}
	
	.alumni-container {
		background: #ebf2f0;
		width: 300px;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 1rem 2rem 1.5rem;
		
		@media(max-width: 1200px) {
			width: 250px;
		}
		@media(max-width: 991px) {
			top: 60%;
			height: 40%;
			width: 100%;
			overflow: scroll;
		}
		
		.alumni-item {
			cursor: pointer;
			position: relative;
			padding: 1rem;
			
			* {
				color: var(--primary) !important;
			}
			
			&:has(.selected) {
				background: var(--tertiary);
				
				* {
					color: var(--white) !important;
				}
			}
			
			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 1px;
				background: var(--tertiary);
			}
			
			hr {
				color: white;
			}
			
			strong {
				color: var(--white);
			}
		}
	}
	
	#map {
		width: 100%;
		height: 100%;
		
		.wx-infoWindow {
			h5 {
				margin-bottom: .5rem;
			}
			
			p, strong {
				font-size: 1rem;
			}
			
			.location {
				font-weight: 600;
				color: var(--tertiary);
			}
			
			span {
				font-weight: 600;
			}
			
			img {
				width: 110px;
				height: 110px;
				object-fit: cover;
				
				@media(max-width: 540px) {
					width: 80px;
					height: 80px;
				}
			}
		}
	}
}

.gform_wrapper {
	form {
		@media(max-width: 992px) {
			width: 80%;
		}
		@media(max-width: 540px) {
			width: 100%;
		}
		
		.gform_button {
			font-size: 1rem !important;
			font-weight: 500 !important;
			
			&:hover {
				background: var(--tertiary) !important;
			}
		}
	}
}

.search-filter-field {
	.search-filter-label {
		font-weight: 600;
		color: var(--tertiary);
	}
	
	.search-filter-input-group {
		.search-filter-input-checkbox {
			.search-filter-input-checkbox__label {
				font-weight: 300;
			}
			.search-filter-input-checkbox__control {
				svg {
					fill: var(--tertiary);
				}
			}
		}
	}
}

.map-title {
	width: 75%;
	
	@media(max-width: 768px) {
		width: 100%;
	}
}

.calendar-container {
	width: 75%;
	margin: 0 auto;
	
	@media(max-width: 992px) {
		width: 100%;
	}
}

.gallery-section {
	padding: 8rem 0;
	height: fit-content;
	
	.event-gallery {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 2rem;
		row-gap: 10rem;
		
		@media(max-width: 991px) {
			column-gap: 4rem;
		}
		@media(max-width: 768px) {
			grid-template-columns: repeat(1, 1fr);
			column-gap: 6rem;
		}
		
		.image-stack {
			position: relative;
			height: 325px;
			width: 325px;
			
			@media(max-width: 1200px) {
				height: 275px;
				width: 275px;
			}
			@media(max-width: 991px) {
				height: 225px;
				width: 225px;
			}
			@media(max-width: 540px) {
				height: 235px;
				width: 235px;
			}
			
			.event-link {
				position: absolute;
				bottom: -40px;
				left: 0;
				z-index: 4;
				font-weight: 500;
			}
			
			.event-title {
				position: absolute;
				z-index: 4;
				bottom: 0;
				left: 0;
				background: var(--white);
				padding: 1rem;
				
				@media(max-width: 540px) {
					font-size: 1.05rem;
				}
			}
			
			.img-wrapper {
				position: absolute;
				height: 100%;
				width: 100%;
				
				&:nth-of-type(n+4) {
					display: none;
				}
				
				&:first-of-type {
					z-index: 3;
				}
				
				&:nth-of-type(2) {
					transform: translate(20px, -20px);
					z-index: 2;
				}
				
				&:nth-of-type(3) {
					transform: translate(40px, -40px);
					z-index: 1;
				}
				
				img {
					height: 100%;
					width: 100%;
					object-fit: cover;
				}
			}
		}
	}	
}

.wm-event-popup {
	padding: 2.5rem !important;
}

.wm-close-button {
	border: none;
}

.wm-event-title {
	margin-top: .6rem;
}

.wm-event-buttons {
	margin-top: .6rem;
	
	a {
		font-weight: 600;
	}
}

#input_1_4_1 {
	margin: 0 !important;
}