/* Color Tokens */
.primary {
	color: #2A6091; /* $primary */
}

.secondary {
	color: #A7AEAE; /* $secondary */
}

.tertiary {
	color: #134070; /* $tertiary */
}

.quaternary {
	color: #2A6091; /* $quaternary */
}

.light {
	color: #FFFFFF; /* $light */
}

.off {
	color: #ECF0F1; /* $off */
}

.dark {
	color: #313131; /* $dark */
}
/* End Color Tokens */

/* General Styles */
.hover-panel {
	background-color: #134070; /* $tertiary */
}

.hover-panel .main, .hover-panel ul {
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	color: #FFFFFF; /* $light */
}

.hover-panel .main {
	height: 30em;
}

.hover-panel h2 {
	color: #FFFFFF; /* $light */
	display: inline-block;
	padding: 0 4%;
	max-width: 22rem;
	position: relative;
}

.hover-panel .header-section {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 20%;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-color: #134070; /* $tertiary */
}

.cms-layout .hover-panel .header-section {
	width: 100%;
}

.hover-panel .list-section {
	width: 80%;
	height: 100%;
	background-image: url(/images/BG_FAQ-min.jpg);
	background-size: cover;
	background-position: 50% 50%;
}

.cms-layout .hover-panel .list-section {
	width: 70vw;
	height: 15rem;
}

.hover-panel .list-section ul {
	height: 100%;
}

.hover-panel li {
	background-size: cover;
	background-repeat: no-repeat;
	width: 25%;
	position: relative;
}

.hover-panel li:before {
	position: absolute;
	width: 1px;
	height: 10em;
	bottom: 0;
	left: 0;
	background-color: #2A6091; /* $quaternary */
	opacity: 0.5;
	content: '';
	transition: 0.4s ease;
}

.hover-panel li:hover:before {
	opacity: 0;
}

.hover-panel li:first-child {
	background-image: url(/images/hover-1.jpg);
}

.hover-panel li:nth-child(2) {
	background-image: url(/images/hover-2.jpg);
}

.hover-panel li:nth-child(3) {
	background-image: url(/images/hover-3.jpg);
}

.hover-panel li:nth-child(4) {
	background-image: url(/images/hover-4.jpg);
}

.hover-panel li h3 {
	color: #FFFFFF; /* $light */
	letter-spacing: .1em;
	z-index: 1;
	transition: .4s ease;
	position: absolute;
	bottom: 2em;
	width: 100%;
	padding: 0 7%;
	min-height: 4.65rem;
}

.hover-panel li:hover h3 {
	bottom: 67%;
}

.hover-panel li .text-wrapper {
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	transition: opacity .4s ease .2s;
	height: 100%;
	background-color: rgba(49,49,49,0.298); /* alpha($dark,30%) */
	position: absolute;
}

.hover-panel li .text-wrapper p {
	height: 57%;
	position: absolute;
	width: 100%;
	padding: 0 6%;
	bottom: 1.5em;
	margin: 0;
	overflow-y: auto;
	right: 0;
}

.hover-panel li:hover .text-wrapper {
	opacity: 1;
}

.hover-panel li .text-wrapper p::-webkit-scrollbar {
	width: 16px;
	height: 12px;
	background: none;
}

.hover-panel li .text-wrapper p::-webkit-scrollbar-track {
	background: none;
}

.hover-panel li .text-wrapper p::-webkit-scrollbar-thumb {
	border: solid 6px transparent;
	background-clip: padding-box;
	border-radius: 12px;
	background-color: #A7AEAE; /* $secondary */
}

.hover-panel li .text-wrapper p::-webkit-scrollbar-button {
	width: 0;
	height: 0;
	display: none;
}

.hover-panel li .text-wrapper p::-webkit-scrollbar-corner {
	background-color: transparent;
}
/* End General Styles */

/* Responsive Styles */
@media screen and (min-width:451px) {
}

@media screen and (min-width:801px) {
}

@media screen and (min-width:1501px) {
}

@media screen and (max-width:1500px) {
	.hover-panel h2 {
		padding: .2em;
	}

	.hover-panel .main {
		height: 24em;
	}

	.hover-panel .header-section .pseudo:after {
		margin: .3em auto;
	}

	.hover-panel li h3 {
		font-size: 1em;
	}
}

@media screen and (max-width:1150px) {
	.hover-panel .header-section {
		padding: 1.5em 1em 1em;
		width: 100%;
	}

	.hover-panel h2 {
		max-width: 100%;
		text-align: center;
	}

	.hover-panel h2:after {
		margin-left: auto;
		margin-right: auto;
	}

	.hover-panel .list-section {
		width: 100%;
		height: 23em;
	}

	.hover-panel .main {
		height: auto;
	}

	.hover-panel li .text-wrapper p {
		line-height: 1.5em;
	}
}

@media screen and (max-width:800px) {
	.hover-panel .list-section {
		padding: 0;
		background-color: #2A6091; /* $primary */
		color: #FFFFFF; /* $light */
	}

	.hover-panel li {
		width: 100%;
		display: block;
		padding: 0;
		background-image: none!important;
		border-bottom: solid 1px #313131; /* $dark */
	}

	.hover-panel li h3 {
		position: relative;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		width: 100%;
		text-align: center;
		padding: 1em 4%;
		bottom: auto;
		left: auto;
		max-width: 100%;
		background-color: #2A6091; /* $quaternary */
		color: #FFFFFF; /* $light */
		border-bottom: solid 2px transparent;
		min-height: initial;
	}

	.hover-panel li.active h3 {
		background-color: #FFFFFF; /* $light */
		color: #313131; /* $dark */
		border-bottom: solid 4px #2A6091; /* $primary */
	}

	.hover-panel li h3:after {
		content: '\e7c6';
		font-family: 'icomoon-ult';
		font-size: .9em;
		transition: .4s ease;
		display: inline-block;
		font-weight: normal;
		margin-left: .5em;
		vertical-align: middle;
	}

	.hover-panel li.active h3:after {
		-webkit-transform: scaleY(-1);
		-ms-transform: scaleY(-1);
		transform: scaleY(-1);
	}

	.hover-panel li:hover h3 {
		bottom: auto;
	}

	.hover-panel li .text-wrapper {
		position: relative;
		display: none;
		opacity: 1;
		width: 100%;
		height: auto;
		background-color: #FFFFFF; /* $light */
		color: #313131; /* $dark */
	}

	.hover-panel li .text-wrapper:before {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-image: linear-gradient(to bottom,rgba(255,255,255,0.106),rgba(0,0,0,0.05));
	}

	.hover-panel li .text-wrapper p {
		position: relative;
		left: auto;
		bottom: auto;
		overflow: visible;
		padding-bottom: 2em;
		padding-top: 1.5em;
		height: auto;
		max-width: 700px;
		margin: auto;
		text-align: left;
	}

	.hover-panel .list-section ul, .hover-panel .list-section {
		height: auto;
		transition: .5s ease;
	}
}
/* End Responsive Styles */