#contact-info-modal {
	--bg-color-basic: #D5ED99;
	--bg-color-hover: #BCD5E4;
	--text-color: #364A67;
}

body:not(.contact-info-modal-open) #contact-info-modal,
body:not(.contact-info-modal-open) #contact-info-modal *,
body:not(.contact-info-modal-open) #contact-info-modal *:before,
body:not(.contact-info-modal-open) #contact-info-modal *:after {
	pointer-events: none !important;
}
.contact-info-modal-open #contact-info-modal {
	transform: translateY(0px);
	opacity: 1;
	pointer-events: auto;
}

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

#contact-info-modal .inner-wrapper > .scrollable {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: 40px;
}
@media (min-width: 900px) {
	#contact-info-modal .inner-wrapper > .scrollable {}
}
@media (max-width: 899.99px) {
	#contact-info-modal .inner-wrapper > .scrollable {}
}

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

#contact-info-modal .inner-wrapper > .scrollable > .title { font-weight: 500; }
@media (min-width: 900px)	 { #contact-info-modal .inner-wrapper > .scrollable > .title { font-size: 40px; } }
@media (max-width: 899.99px) { #contact-info-modal .inner-wrapper > .scrollable > .title { font-size: 32px; } }

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

#contact-info-modal .inner-wrapper > .scrollable > .offices {}
#contact-info-modal .inner-wrapper > .scrollable > .offices > .swiper-wrapper {}

#contact-info-modal .inner-wrapper > .scrollable > .offices .office {
	display: flex; overflow: hidden;
	flex-direction: row;
	align-items: flex-start;
	column-gap: 20px;
	padding: 15px;
	
	background-color: var(--text-color);
	background-clip: padding-box;
	border: solid 1px var(--bg-color-basic);
	border-radius: 30px;
	
	color: #FFF;
	
	transition:
		background-color .2s ease-out,
		border-color	 .2s ease-out,
		color			 .2s ease-out;
}
#contact-info-modal .inner-wrapper > .scrollable > .offices .office:hover {
	background-color: var(--bg-color-basic);
	color: var(--text-color);
}
#contact-info-modal .inner-wrapper > .scrollable > .offices .office > .icon {
	flex: 0 0 55px; height: 80px;
}
#contact-info-modal .inner-wrapper > .scrollable > .offices .office > .icon img {
	object-fit: contain;
	object-position: center;
}
#contact-info-modal .inner-wrapper > .scrollable > .offices .office > address {
	flex: 1;
	padding: 20px 0;
	
	font-style: normal;
}
#contact-info-modal .inner-wrapper > .scrollable > .offices .office > address > * {
	display: block;
}
#contact-info-modal .inner-wrapper > .scrollable > .offices .office > address > .name {
	font-size: 22px;
	font-weight: 500;
}
#contact-info-modal .inner-wrapper > .scrollable > .offices .office > address > .description {
	font-size: 16px;
	font-weight: 500;
}
#contact-info-modal .inner-wrapper > .scrollable > .offices .office > address > .address {
	margin-top: 15px;
	
	font-size: 14px;
}
#contact-info-modal .inner-wrapper > .scrollable > .offices .office > address > .map {
	margin-top: 25px;
	
	font-size: 15px;
	font-weight: 500;
}
@media (min-width: 900px) {
	#contact-info-modal .inner-wrapper > .scrollable > .offices {
		margin: 0 -10px;
		padding: 1px 10px;
	
		--mask-image: linear-gradient(to right, transparent 0px, #000 10px, #000 calc(100% - 10px), transparent 100%);

		-webkit-mask-image: var(--mask-image);
		mask-image: var(--mask-image);
	}
	#contact-info-modal .inner-wrapper > .scrollable > .offices .office {
		width: 330px; height: auto;
	}
}
@media (max-width: 899.99px) {
	#contact-info-modal .inner-wrapper > .scrollable > .offices {
		display: grid; width: 100%;
		grid-template-columns: 1fr;
		grid-auto-rows: 1fr;
		row-gap: 15px;
		padding: 1px;
	}
	#contact-info-modal .inner-wrapper > .scrollable > .offices > .swiper-wrapper {
		display: contents;
	}
}

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

#contact-info-modal .inner-wrapper > .scrollable > .links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 10px;
}
#contact-info-modal .inner-wrapper > .scrollable > .links > .link {
	display: flex;
	flex-direction: row;
	align-items: center;
}
#contact-info-modal .inner-wrapper > .scrollable > .links > .link:before,
#contact-info-modal .inner-wrapper > .scrollable > .links > .link > .icon,
#contact-info-modal .inner-wrapper > .scrollable > .links > .link > .icon:before {
	display: block; height: var(--height); width: var(--height); flex: 0 0 var(--height);
}
#contact-info-modal .inner-wrapper > .scrollable > .links > .link:before,
#contact-info-modal .inner-wrapper > .scrollable > .links > .link > .icon:before {
	content: '';
	
	background-color: #FFF;
	
	--mask-position: center;
	--mask-repeat: no-repeat;
	
	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
	-webkit-mask-position: var(--mask-position);
	mask-position: var(--mask-position);
	-webkit-mask-size: var(--mask-size);
	mask-size: var(--mask-size);
	-webkit-mask-repeat: var(--mask-repeat);
	mask-repeat: var(--mask-repeat);
}
#contact-info-modal .inner-wrapper > .scrollable > .links > .link:before {
	--mask-image: url("../../images/icons/cta-arrow.svg");
	--mask-size: 60% auto;
}
#contact-info-modal .inner-wrapper > .scrollable > .links > .link > .icon {
	position: relative;
	margin-right: 20px;
	
	background-color: var(--text-color);
	border-radius: 50%;
}
#contact-info-modal .inner-wrapper > .scrollable > .links > .link > .icon:before {
	position: absolute; top: 0; left: 0;
	--mask-size: 40% auto;
}
#contact-info-modal .inner-wrapper > .scrollable > .links > .link.email > .icon:before { --mask-image: url("../../images/social/email.svg"); }
#contact-info-modal .inner-wrapper > .scrollable > .links > .link.linkedin > .icon:before { --mask-image: url(../../images/social/linkedin.svg); }
#contact-info-modal .inner-wrapper > .scrollable > .links > .link > .cta-link {
	flex: 1;
	
	font-weight: 500;
}
@media (min-width: 900px) {
	#contact-info-modal .inner-wrapper > .scrollable > .links > .link:before,
	#contact-info-modal .inner-wrapper > .scrollable > .links > .link > .icon,
	#contact-info-modal .inner-wrapper > .scrollable > .links > .link > .icon:before {
		--height: 50px;
	}
	#contact-info-modal .inner-wrapper > .scrollable > .links > .link > .cta-link { font-size: 22px; }
}
@media (max-width: 899.99px) {
	#contact-info-modal .inner-wrapper > .scrollable > .links > .link:before,
	#contact-info-modal .inner-wrapper > .scrollable > .links > .link > .icon,
	#contact-info-modal .inner-wrapper > .scrollable > .links > .link > .icon:before {
		--height: 40px;
	}
	#contact-info-modal .inner-wrapper > .scrollable > .links > .link > .cta-link { font-size: 16px; }
}

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