/* FOOTER */

.FOOTER {
	background: var(--white);
}

.FOOTER .sitemap .b-frame {
	padding-bottom: 80rem;
}

.FOOTER .container {
	display: flex;
	justify-content: space-between;
	height: 100%;
}

.FOOTER .logo {
	display: block;
	flex: 0 0 auto;
	width: 143rem;
	height: 40rem;
}

.FOOTER .contact {
	flex: 0 0 auto;
	width: 180rem;
}

.FOOTER .buttons .b-button {
	width: 100%;
}

.FOOTER .buttons .b-button {
	margin-bottom: 30rem;
}

.FOOTER .social {
	margin: 0 auto;
	max-width: 100rem;
	display: flex;
	justify-content: space-between;
}

.FOOTER .social a {
	background: var(--blue);
	color: var(--white);
	width: 40rem;
	height: 40rem;
	border-radius: 20rem;
	transition: background 0.25s;
}

.FOOTER .social a svg {
	width: 24rem;
	height: 24rem;
	margin: 8rem;
}

.FOOTER .social a:hover {
	background: var(--pink);
}

.FOOTER nav {
	color: var(--blue);
	flex-grow: 1;
	margin: 0 80rem 0 100rem;
	display: flex;
	justify-content: space-between;
}

.FOOTER nav li  {
	font-size: 16rem;
	font-weight: 700;
}

.FOOTER nav li li {
	font-weight: 400;
}

.FOOTER nav ul:not(:first-child) {margin-top: 10rem;}
.FOOTER nav li:not(:first-child) {margin-top: 30rem;}
.FOOTER nav li li:not(:first-child) {margin-top: 10rem;}


.FOOTER .legal {
	color: var(--blue);
	background: var(--background-purple);
	font-size: 16rem;
}

.FOOTER .legal .b-frame {
	padding-top: 20rem;
	padding-bottom: 20rem;
}

.FOOTER .legal a {
	display: inline-block;
	vertical-align: top;
	margin-right: 80rem;
}

.FOOTER .legal .copyright {
	display: inline-block;
	vertical-align: top;
}

@media screen and (max-width: 960px) {
	.FOOTER .sitemap .b-frame {padding-bottom: 40rem;}
	.FOOTER .container {display: block;}
	.FOOTER .contact {width: auto;}
	.FOOTER .buttons .b-button {margin-bottom: 20rem;}
	.FOOTER .social {max-width: 100rem; margin: 20rem auto 0;}
	.FOOTER nav {display: block; margin: 40rem 0;}
	.FOOTER nav .column:not(:first-child) {margin-top: 20rem;}
	.FOOTER nav li:not(:first-child) {margin-top: 20rem;}
	.FOOTER .legal a {display: block; text-align: center; margin: 0 0 10rem 0;}
	.FOOTER .legal .copyright {display: block; text-align: center;}

	.FOOTER .logo,
	.FOOTER nav {display: none;}
}




/* NAV */

.NAV nav input {
	display: none;
}

.NAV nav .a {
	color: var(--white);
	cursor: default;
}

.NAV nav .a::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	border: 5rem solid transparent;
	border-top-color: var(--white);
	margin: 4rem 0 0 6rem;
}

.NAV nav a:not(.b-button) {color: var(--white);}
.NAV nav a:not(.b-button):hover {color: var(--pink);}

.NAV nav .b-button {
	margin-top: 10rem;
	width: 100%;
}

/* teir 1 */

.NAV nav > ul > li {
	position: relative;
	padding: 18rem 0;
	font-size: 18rem;
	line-height: 1.25;
	font-weight: 700;
}

.NAV nav > ul > li:last-child {border-bottom: none;}

/* teir 2 */

.NAV nav ul ul {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.25s;
}

.NAV nav ul ul > li {
	padding: 10rem 0;
	font-size: 18rem;
	font-weight: 400;
}

.NAV nav ul ul > li:first-child {padding-top: 18rem;}
.NAV nav ul ul > li:last-child {padding-bottom: 0;}

/* teir 2 open */

.NAV nav input:checked ~ ul {max-height: 320rem;}
.NAV nav input:checked ~ .a::after {transform: scaleY(-1) translate(0, 5rem);}



/* MODAL */

.MODAL {
	position: relative;
	margin: 0 auto;
	max-width: 1160rem;
}

.MODAL .close {
	position: absolute;
	top: 0;
	right: -65px;
	width: 40rem;
	height: 40rem;
	background: #fff no-repeat center;
	cursor: pointer;
	border-radius: 15px;
	display: flex;
	justify-content: center;
	align-self: center;
}


.MODAL .content {
	box-sizing: border-box;
	background: #EEE9FF;
	max-height: calc(100vh - 80rem);
	padding: 40rem;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 30px;
}
.b-modal-content {
	overflow: visible;
}

.MODAL[data-width="10"] {max-width: 960rem;}
.MODAL[data-width="8"] {max-width: 760rem;}
.MODAL[data-width="6"] {max-width: 560rem;}

@media screen and (max-width: 960px) {
	.MODAL .content {padding: 20rem;}
	.MODAL .close {
		right: -0;
	}
}
