/* FOOTER */
/* FOOTER */
/* FOOTER */

footer {
	position: relative;
	display: flex;
	padding: 10vw 5vw 0 5vw;
	column-gap: 16vw;
}
footer .left{
	width: 50%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
footer .left .payoff{
	color: var(--clr-magenta-100);
	font-family: Arvo, Gilroy, Open Sans, Helvetica, Arial, sans serif;
	font-size: 5vw;
}
footer .left .legal{
	position: absolute;
	display: flex;
	gap: 2vw;
	left: 0;
	bottom: 1vw;
	font-family: Open Sans, Helvetica, Arial, sans serif;
	font-size: var(--txt-small);
}
footer .left .legal a{
	color: inherit;
}
footer .right{
	width: 50%;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 4vw;
}
footer .right .title{
	width: 100%;
	font-size: var(--txt-header-3);
	font-weight: 300;
	margin-bottom: 1em;
}
footer .right > div{
	width: 50%;
	font-family: Open Sans, Helvetica, Arial, sans serif;
	font-size: var(--txt-standard);
}
footer .right > div div{
	margin-bottom: 3em;
}
footer .right > div b{
	font-family: Gilroy, Open Sans, Helvetica, Arial, sans serif;
	font-size: var(--txt-bigtext);
}
footer .right > div p{
	margin-bottom: 0.5em;
}
footer .right > div a{
	position: relative;
	color: inherit;
	display: flex;
}
footer .right > div a{
	position: relative;
	color: inherit;
	display: flex;
}
footer .right .contact a p,
footer .right .quick_links a p{
	position: relative;
	padding-left: 2em;
}
footer .right .contact a p::after,
footer .right .quick_links a p::after{
	content:'';
	position: absolute;
	bottom: -0.2vw;
	left: 0;
	height: 0.2em;
	background-color: var(--clr-magenta-100);
	width: 100%;

	transition: transform 0.25s ease-in-out;
}
footer .right .contact a p::after{
	transform-origin: left;
	transform: scaleX(1);
}
footer .right .quick_links a p::after{
	transform-origin: right;
	transform: scaleX(0);
}
footer .right .contact a:hover p::after{
	transform-origin: right;
	transform: scaleX(0);
}
footer .right .quick_links a:hover p::after{
	transform-origin: left;
	transform: scaleX(1);
}
footer .right .contact a p::before,
footer .right .quick_links a p::before{
	content:'';
	position: absolute;
	top: 5%;
	left: 0;
	height: 90%;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
}
footer .right .contact a:nth-child(2) p::before{
	background-image: url(/assets/img/telephone.svg);
}
footer .right .contact a:nth-child(3) p::before{
	background-image: url(/assets/img/email.svg);
}
footer .right .quick_links a p::before{
	background-image: url(/assets/img/external.svg);
}
footer .right > div .count{
	color: inherit;
	font-size: var(--txt-small);
	font-family: Gilroy, Open Sans, Helvetica, Arial, sans serif;
	font-weight: 700;
	color: var(--clr-magenta-100);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 1.8em;
	padding-top: 0.1em;
	aspect-ratio: 1 / 1;
	border: 0.18em solid var(--clr-magenta-100);
	border-radius: 50%;
	margin-left: 0.5em;
}
footer .middle{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	pointer-events: none;
}
footer .middle .colors{
	width: 0.4vw;
	height: 15vw;
}
footer .middle .colors div{
	width: 100%;
}
footer .middle .colors .magenta{
	height: 40%;
	background-color: var(--clr-magenta-100);
}
footer .middle .colors .blue{
	height: 20%;
	background-color: var(--clr-blue-100);
}
footer .middle .colors .orange{
	height: 15%;
	background-color: var(--clr-orange-100);
}
footer .middle .colors .green{
	height: 25%;
	background-color: var(--clr-green-100);
}

#cookie_bar{
	position: fixed;
	z-index: 1000;
	width: 25vw;
	bottom: 5vw;
	right: 5vw;
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding: 2vw;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;

	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

#cookie_bar h3{
	font-size: var(--txt-bigtext);
}

#cookie_bar .cookie_buttons{
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: 1em;
	font-size: var(--txt-small);
	font-family: Open Sans, Helvecica, Arial, sans serif;
}

#cookie_bar .cookie_buttons .text{
	margin: 0;
	font-size: inherit;
}

#cookie_bar #cookie_button{
	padding: 1em;
	font-family: Gilroy, Open Sans, Helvecica, Arial, sans serif;
	background-color: var(--clr-magenta-100);
	border: 1px solid var(--clr-magenta-100);
	color: white;
	cursor: pointer;
	transition: all 150ms linear;
}
#cookie_bar #cookie_button:hover{
	background-color: transparent;
	border: 1px solid var(--clr-magenta-100);
}

@media (max-width: 1000px) {
	footer {
		flex-wrap: wrap;
	}
	footer .left {
		flex-wrap: wrap;
		order: 2;
		width: 100%;
	}
	footer .left .payoff {
		font-size: 12.2vw;
		padding: 20vw 0 30vw 0;
	}
	footer .left .legal {
		width: 100%;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	footer .right {
		flex-wrap: wrap;
		order: 1;
		width: 100%;
		padding-bottom: 0;
	}
	footer .right .contact a p::after,
	footer .right .quick_links a p::after{
		height: 4px;
	}
	footer .middle .colors{
		width: 1vw;
		height: 20vw;
	}
	#cookie_bar{
		width: 90vw;
		padding: 7vw 5vw;
		gap: 0.5em;
	}
	#cookie_bar .cookie_buttons{
		gap: 2em;
		font-size: var(--txt-small);
		font-family: Open Sans, Helvecica, Arial, sans serif;
	}
}

@media (max-width: 600px) {
	footer .right .address {
		width: 100%;
	}
	footer .right .info {
		width: 100%;
	}
	footer .right .contact a p::after,
	footer .right .quick_links a p::after{
		height: 3px;
	}
	footer .left .legal{
		display: grid;
		grid-template-columns: 1fr 1fr;
		text-align: center;
	}
	footer .left .legal > *:nth-child(1){
		order: 4;
	}
	footer .left .legal > *:nth-child(2){
		order: 2;
	}
	footer .left .legal > *:nth-child(3){
		order: 3;
	}
	footer .left .legal > *:nth-child(4){
		order: 1;
	}
	footer .left .payoff {
		font-size: 12.2vw;
		padding: 10vw 0 30vw 0;
	}
}
@media (min-width: 2500px) {
	#cookie_bar{
		left: 5vw;
		bottom: 3vw;
	}
}