/**
 * Page service
 */

.service__aside {
	padding: 15px 0;
	margin-bottom: 2em;
	border-right: 1px solid var(--color-extra-light);
}

@media screen and (max-width: 767px)  {
	.service .service__aside {order: 1;}
	.service .service__content { order: 0;}
	.service__aside { border: 0; }
}

.service__menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.service__menu ul li {
	width: 100%;
}

.service__menu >  ul > li {
	padding: 10px 20px 10px 0;
	border-bottom: 1px solid var(--color-extra-light);
}

.service__menu >  ul > li > a {
	padding: 15px 0;
}

.service__menu ul li a > span {
	position: relative;
	display: inline-block;
	justify-self: start;
}

.service__menu ul li a > svg {
	width: 24px;
	justify-self: end;
	position: relative;
	transform: rotateZ(0deg);
	transition: all var(--ease-base);
}

.service__menu ul li a.is-open svg {
	transform: rotateZ(180deg);
}


.service__menu ul li a {
	width: 100%;
	position: relative;
	display: grid;
	align-items: center;
	grid-auto-flow: column;
	transition: all var(--ease-base);
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.1em;
	font-size: var(--small-font);
	font-weight: 500;
	color: var(--color-link);
	font-family: var(--heading-font);
}

.service__menu ul li a:hover,
.service__menu ul li a:focus,
.service__menu ul li.active > a,
.service__menu ul li a.is-open {
	color: var(--color-white);
	padding-left: 2px;
}

/* underline decorator */
.service__menu li a span::before {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 0;
	width: 100%;
	height: 1px;
	display: block;
	background-color: var(--color-light);
	transition: width var(--ease-base);
}

.service__menu li > a:focus span::before,
.service__menu li > a:hover span::before,
.service__menu li > a.is-open span::before,
.service__menu li.active > a span::before,
.service__menu li.parent.active > a span::before {
	background-color: var(--color-link);
}

.service__menu .submenu {
	display: none;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.service__menu .submenu .submenu {
	margin-left: 20px;
}

.service__menu .submenu li a {
	font-size: var(--tiny-font);
	padding: 5px 0;
	margin-left: 20px;
}

.service__menu .submenu > li:first-child {
	padding-top: 20px;
}

.service__menu .submenu > li:last-child {
	padding-bottom: 20px;
}

.service__menu .submenu.is-animating {
	height: 0;
	display: block;
	overflow: hidden;
	transition: height .44s var(--ease-expo-in-out);
}

.service__menu .submenu.is-open {
	display: block;
}

.service__button .button {
	margin-top: 20px;
	width: 50%;
}