#contact-modal {}
.contact-open #contact-modal {
	clip-path: inset(0 0 0 0);
	
	pointer-events: auto;
	visibility: visible;
	
	transition:
		clip-path  .6s cubic-bezier(0.38, 0.005, 0.215, 1),
		visibility  0s 0s;
}
#contact-modal > .modal-wrapper {
	position: fixed; top: 0; left: 0;
	height: 100%; width: 100%; overflow: auto;
	
	background-color: #FFF;
	clip-path: inset(0 0 0 100%);
}
@media (min-width: 900px)	 { #contact-modal > .modal-wrapper { padding: 150px 0 100px; } }
@media (max-width: 899.99px) { #contact-modal > .modal-wrapper { padding:  125px 0 25px; } }
.loaded #contact-modal > .modal-wrapper {
	transition: clip-path 0s linear .6s;
}
.contact-open #contact-modal > .modal-wrapper {
	clip-path: inset(0 0 0 0);
	transition: clip-path .6s cubic-bezier(0.38, 0.005, 0.215, 1) .1s;
}
#contact-modal > .modal-wrapper > .accordions {
	position: relative; top: 50px;
	opacity: 0;
}
.loaded #contact-modal > .modal-wrapper > .accordions {
	transition:
		top 	0s linear .6s,
		opacity 0s linear .6s;
}
.contact-open #contact-modal > .modal-wrapper > .accordions {
	top: 0;
	opacity: 1;
	transition:
		top 	.6s cubic-bezier(0.38, 0.005, 0.215, 1) .1s,
		opacity .6s cubic-bezier(0.38, 0.005, 0.215, 1) .1s;
}

/*-------------------------------------------------------------------------------------------*/

#contact-modal .accordion {}
#contact-modal .accordion:not(:last-child) { border-bottom: solid 1px #000; }
#contact-modal .accordion > .header { display: flex; }
#contact-modal .accordion > .header > .title {
	text-transform: uppercase;
	font-family: "Stretch Pro";
}
#contact-modal .accordion > .header > .cta-btn {
	position: relative;
	
	white-space: nowrap;
	font-size: 16px;
	font-weight: 800;
	font-style: italic;
}
#contact-modal .accordion > .header > .instagram-btn { padding-left: 70px; }
#contact-modal .accordion > .header > .instagram-btn:before {
	content: '';
	position: absolute; top: 50%; left: 35px; transform: translateY(-50%);
	display: block; height: 20px; width: 20px;
	
	background-color: currentColor;
	
	mask-image: url("../../images/social/instagram.svg");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
}
#contact-modal .accordion > .content {}
@media (min-width: 900px) {
	#contact-modal .accordion > .header {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 80px 100px;
	}
	#contact-modal .accordion > .header > .title {
		line-height: 40px;
		font-size: 50px;

		cursor:
			url("../../images/icons/contact-cursor.svg") 50 50,
			pointer;
	}
	#contact-modal .accordion > .content { padding: 0 100px 80px; }
}
@media (max-width: 899.99px) {
	#contact-modal .accordion > .header {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 25px;
		padding: 35px 25px;
	}
	#contact-modal .accordion > .header > .title {
		line-height: 36px;
		font-size: 30px;
		
		cursor: pointer;
	}
	#contact-modal .accordion > .content { padding: 0 25px 35px; }
}
#contact-modal .accordion:last-child > .content { padding-bottom: 0; }

/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

#contact-modal .postal {
	position: relative;
	
	line-height: 26px;
	font-family: "Stretch Pro";
	font-size: 20px;
}
@media (min-width: 900px) {
	#contact-modal .postal {
		display: flex; height: 480px;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		row-gap: 35px;
		
		line-height: 26px;
		font-size: 20px;
	}
}
@media (max-width: 899.99px) {
	#contact-modal .postal {
		line-height: 20px;
		font-size: 16px;
	}
}

/*-------------------------------------------------------------------------------------------*/

#contact-modal .postal > .offices {
	overflow: hidden;
	
	border-radius: 40px;
	
	isolation: isolate;
}
#contact-modal .postal > .offices > .swiper {}
#contact-modal .postal > .offices > .swiper > .swiper-wrapper {}
#contact-modal .postal > .offices > .swiper > .swiper-wrapper > .swiper-slide { position: relative; }
#contact-modal .postal > .offices > .swiper > .swiper-wrapper > .swiper-slide > img {
	position: absolute; top: 0; left: 0; transform: scale(1.01);
	height: 100%; width: 100%;
	
	object-fit: cover;
	object-position: center;
}

#contact-modal .postal > .address {
	text-transform: uppercase;
}
#contact-modal .postal > .phone {
	position: relative;
	padding-left: 35px;
}
#contact-modal .postal > .phone:before {
	content: '';
	position: absolute; top: 50%; left: 0; transform: translateY(-50%);
	display: block; height: 20px; width: 20px;
	
	background-image: url("../../images/icons/phone.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
#contact-modal .postal > .social {
	display: flex;
	flex-direction: row;
	column-gap: 15px;
}
#contact-modal .postal > .social > a {
	position: relative;
	display: block; flex: 0 0 100px; overflow: hidden;
	
	background-color: transparent;
	border: solid 1px #000;
	border-radius: 50%;
	
	isolation: isolate;
	
	transition:
		background-color .4s ease-out,
		color			 .4s ease-out;
}
#contact-modal .postal > .social > a:before {
	content: '';
	display: block;
	padding-top: 100%;
}
#contact-modal .postal > .social > a:after {
	content: '';
	position: absolute; top: 0; left: 0;
	display: block; height: 100%; width: 100%;
	
	background-color: currentColor;
	
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 40% auto;
	mask-size: 20% auto;
}
#contact-modal .postal > .social > a.linkedin:after {
	-webkit-mask-image: url("../../images/social/linkedin.svg");
	mask-image: url("../../images/social/linkedin.svg");
}
#contact-modal .postal > .social > a.instagram:after {
	-webkit-mask-image: url("../../images/social/instagram.svg");
	mask-image: url("../../images/social/instagram.svg");
}
#contact-modal .postal > .social > a.tiktok:after {
	-webkit-mask-image: url("../../images/social/tiktok.svg");
	mask-image: url("../../images/social/tiktok.svg");
}
#contact-modal .postal > .social > a:hover {
	background-color: #000;
	color: #FFF;
}
@media (min-width: 900px) {
	#contact-modal .postal > .offices {
		position: absolute;
		border: solid 5px #000;
	}
	#contact-modal .postal > .offices:before {
		content: '';
		display: block;
		padding-top: 180%;
	}
	#contact-modal .postal > .offices > * {
		position: absolute; top: 0; left: 0;
		width: 100%;
	}
	#contact-modal .postal > .offices > .swiper { height: 100%; }
	#contact-modal .postal > .offices > .accent {
		z-index: 1;
		
		background-image: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));

		text-align: center;
		color: #FFF;
	}
	@media (min-width: 1150px) {
		#contact-modal .postal > .offices {
			left: max(900px, min(70%, 1200px)); top: -150px; transform: translateX(-50%) rotate(10deg);
			width: 300px;
		}
		#contact-modal .postal > .offices > .accent {
			min-height: 200px;
			padding: 50px;
		}
	}
	@media (max-width: 1149.99px) {
		#contact-modal .postal > .offices {
			right: 125px; top: calc(50% - 40px); transform: translateY(-50%) rotate(10deg);
			width: 200px;
			
			line-height: 20px;
			font-size: 16px;
		}
		#contact-modal .postal > .offices > .accent {
			min-height: 150px;
			padding: 25px;
			
			line-height: 18px;
			font-size: 14px;
		}
	}
}
@media (max-width: 899.99px) {
	#contact-modal .postal > :not(:last-child) { margin-bottom: 30px; }
	#contact-modal .postal > .offices { width: 100%; }
	#contact-modal .postal > .offices > .swiper { height: calc(75vw - 50px); }
	#contact-modal .postal > .offices > .accent { display: none; }
	#contact-modal .postal > .road-map,
	#contact-modal .postal > .phone { display: block; }
}

/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

#contact-modal .forms { position: relative; }

/*-------------------------------------------------------------------------------------------*/

#contact-modal .forms > .pagination {}
#contact-modal .forms > .pagination .swiper-slide {
	position: relative;
	width: auto;
	padding: 0 30px 0 65px;
	
	background-color: transparent;
	border: solid 1px #000;
	border-radius: 25px;
	
	line-height: 50px;
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
	color: #000;
	
	cursor: pointer;
	transition:
		background-color .2s ease-out,
		color			 .2s ease-out;
}
#contact-modal .forms > .pagination .swiper-slide:hover,
#contact-modal .forms > .pagination .swiper-slide.current {
	background-color: #000;
	color: #FFF;
}
#contact-modal .forms > .pagination .swiper-slide > .icon {
	position: absolute; top: 50%; left: 30px; transform: translateY(-50%);
	display: block; height: 20px; width: 20px;
}
#contact-modal .forms > .pagination .swiper-slide > .icon > img {
	width: 100%; height: 100%;
	
	object-fit: contain;
	object-position: center;
}
@media (min-width: 900px) {
	#contact-modal .forms > .pagination { margin-bottom: 50px; }
    #contact-modal .forms > .pagination > .swiper {
		padding: 1px 100px;
		margin: -1px -100px;
	}
}
@media (max-width: 899.99px) {
	#contact-modal .forms > .pagination { margin-bottom: 30px; }
    #contact-modal .forms > .pagination > .swiper {
		padding: 1px 25px;
		margin: -1px -25px;
	}
}

/*-------------------------------------------------------------------------------------------*/

#contact-modal .forms > .list {}
#contact-modal .forms > .list > .reflection-form {}
@media (min-width: 900px) {
	#contact-modal .forms > .list { max-width: 600px; }
}

/*-------------------------------------------------------------------------------------------*/

#contact-modal .forms > .crosslinks {}
#contact-modal .forms > .crosslinks > .career-btn {
	position: relative;
	display: block; overflow: hidden;
	
	border-radius: 40px;
	
	isolation: isolate;
}
#contact-modal .forms > .crosslinks > .career-btn > .background {
	position: relative;
	padding-top: 125%;
}
#contact-modal .forms > .crosslinks > .career-btn > .background > img,
#contact-modal .forms > .crosslinks > .career-btn > .background > video {
	position: absolute; top: 0; left: 0;
	height: 100%; width: 100%;
	
	object-fit: cover;
	object-position: center;
	
	filter: brightness(.7);
}
#contact-modal .forms > .crosslinks > .career-btn > .label {
	position: absolute; top: 25px; left: 25px;
	display: flex; height: calc(100% - 50px); width: calc(100% - 50px);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	text-align: center;
	text-transform: uppercase;
	text-shadow: 2px 2px 5px rgba(0,0,0,.3);
	font-family: "Stretch Pro";
	font-size: 28px;
	color: #FFF;
}
#contact-modal .forms > .crosslinks > .cta-wrapper {
	margin-top: 30px;
	text-align: center;
}
#contact-modal .forms > .crosslinks > .cta-wrapper > .jobs-link {
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
}
@media (min-width: 900px) {
	#contact-modal .forms > .crosslinks { position: absolute; }
	@media (min-width: 1150px) {
		#contact-modal .forms > .crosslinks {
			left: max(970px, min(75%, 1200px)); top: -50px; transform: translateX(-50%) rotate(10deg);
			width: 380px;
		}
	}
	@media (max-width: 1149.99px) {
		#contact-modal .forms > .crosslinks { display: none; }
	}
}
@media (max-width: 899.99px) {
	#contact-modal .forms > .crosslinks { margin-top: 50px; }
}

/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/

#contact-modal .instagram > .reel {}

#contact-modal .instagram > .reel > .swiper-button-next {
	transform: translate(-50%, -50%);
	display: block;
	margin: 0;

	background-color: #F2F2F2;
	background-image: url("../../images/emojis/left.png");
	background-position: center;
	background-size: 35% auto;
	background-repeat: no-repeat;
	border-radius: 50%;
}
#contact-modal .instagram > .reel > .swiper-button-next:after { content: none; }
.loaded #contact-modal .instagram > .reel > .swiper-button-next { transition: background-color .2s ease-out; }
#contact-modal .instagram > .reel > .swiper-button-next:hover { background-color: #FFDA17; }

#contact-modal .instagram > .reel > .swiper-wrapper {}
#contact-modal .instagram > .reel > .swiper-wrapper > .swiper-slide {
	position: relative;
	overflow: hidden;
	
	border: solid 5px #000;
	border-radius: 40px;
	
	isolation: isolate;
}
#contact-modal .instagram > .reel > .swiper-wrapper > .swiper-slide:before {
	content: '';
	display: block;
	padding-top: 180%;
}
#contact-modal .instagram > .reel > .swiper-wrapper > .swiper-slide > img {
	position: absolute; top: 0; left: 0;
	height: 100%; width: 100%;
	
	object-fit: cover;
	object-position: center;
}
@media (min-width: 900px) {
	#contact-modal .instagram > .reel { margin: 0 -100px; }
	#contact-modal .instagram > .reel > .swiper-button-next {
		top: 50%; left: 84vw;
		height: 150px; width: 150px;
	}
}
@media (max-width: 899.99px) {
	#contact-modal .instagram > .reel {
		overflow: visible;
		margin: 0 -25px;
		padding-bottom: 50px;
	}
	#contact-modal .instagram > .reel > .swiper-button-next {
		top: calc(100% - 50px); left: min(80vw, 100% - 100px);
		height: 100px; width: 100px;
	}
}