/* Containers */
#exp-sec {
	background-color: #0F130D;
	padding-top: 10%;
}

#exp {
	height: 55rem;
	white-space: nowrap;
}

.exp-col {
	display: inline-block;
	background-color: #222a1f;
 	height: 100%;
	width: 25%;
	overflow: hidden;
	transition: background-color .5s, opacity .5s .5s, width .5s .5s, height .5s .5s, max-height .5s .5s, transform .5s .5s;
}

.exp-col.active {
	width: 100%;
	transition: width .5s .5s, height .5s .5s, max-height .5s .5s, ;
}

#exp-col1.away {transition: opacity .5s, width 1s, height 1s, max-height 1s, transform 1s;}
#exp-col2.away {transition: opacity .6s, width 1.2s, height 1.2s, max-height 1.2s, transform 1.2s;}
#exp-col3.away {transition: opacity .35s, width .7s, height .7s, max-height .7s, transform .7s;}
#exp-col4.away {transition: opacity .45s, width .9s, height .9s, max-height .9s, transform .9s;}

.exp-col.away,
.exp-col.active {background-color: #182114;}

@media (min-width: 1400px) {
	.exp-col.away {
		opacity: 0;
		width: 0;
		height: 0;
		transform: scale(0);
	}
}

/* Backgrounds */
.exp-bgr {
	opacity: .3;
	background-size: cover;
	background-position: center;
	height: 100%;
	top: auto;
	bottom: 0;
	filter: grayscale(1);
	transition: opacity .4s, background-position .5s, transform .4s, filter .4s;
}

@media (min-width: 1400px) {
	.exp-col:not(.active):hover:not(.away):hover .exp-bgr {
		opacity: 1;
		transform: scale(1);
		filter: grayscale(0);
	}
}

.active .exp-bgr {
	opacity: 1;
	transform: scale(1);
	filter: grayscale(0);
}

.active .exp-bgr {
	background-position: 0 50%;
	transition: opacity .4s, background-position .75s ease-out, transform .4s, filter .4s;
}

#exp-col1.open .exp-bgr {background-position: 50% 50%;}

.exp-bgr-over {
	opacity: .5;
	background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0) 60%);
	transition: opacity .5s, background .5s;
}

.active .exp-bgr-over {
	opacity: .6;
	background: #000;
}

/* Title box */
.exp-col-body {
	opacity: 1;
	transition: opacity .5s .6s, transform .5s .6s;
}

.exp-col:not(.active) .exp-col-body {z-index: 1;}

.exp-titl-zoom {
	opacity: 1;
	transition: transform .25s;
}

@media (min-width: 1400px) {
	.exp-col:not(.away):not(.active):hover .exp-titl-zoom {transform: scale(1.1);}
}

.active .exp-col-body {
	opacity: 0;
	transform: scale(1.2);
	transition: opacity .25s, transform .25s;
}

/* Icons */
.exp-ico-box {
	width: 50px;
	height: 50px;
	left: 50%;
	transform: translateX(-50%);
}

.exp-ico-br {
	border: 2px solid #FFF;
	width: 100%;
	height: 100%;
	position: absolute;
	transform: rotate(45deg);
	box-sizing: border-box;
	transition: transform .25s;
}

.exp-ico {
	background-size: contain;
	background-position: center;
	height: 100%;
	transition: transform .25s;
}

@media (min-width: 1400px) {
	.exp-col:not(.away):not(.active):hover .exp-ico {transform: rotate(45deg);}
	.exp-col:not(.away):not(.active):hover .exp-ico-br {transform: rotate(0deg);}
}

.active .exp-ico {transform: rotate(45deg);}
.active .exp-ico-br {transform: rotate(0deg);}

/* Titles and descriptions */
.exp-titl {
	opacity: 1;
	margin-top: 3rem;
	font-size: 1.2rem;
	letter-spacing: .2rem;
}

.exp-titl br {display: none;}

.exp-btn {margin-top: 3rem; margin-bottom: 0;}

/* Responsive */
@media (max-width: 1400px) {

	#exp {height: auto;}

	.exp-col {
		display: block;
		width: auto;
		height: auto;
		min-height: 20rem;
	}

	.exp-bgr {
		opacity: .3;
		background-size: cover;
	}

	.active .exp-bgr {
		opacity: .7;
		background-position: 50% 50%;
	}

	.active .exp-col-body {
		opacity: 0;
		transition: opacity .5s, transform .5s;
	}

	.exp-ico-box {
		display: inline-block;
		width: 2.2rem;
		height: 2.2rem;
		left: 0;
		transform: none;
	}

	.exp-titl {
		margin-top: 1.5rem;
		font-size: 2rem;
	}

	.exp-btn {
		display: inline-block;
		margin-top: 3rem;
	}
}