@font-face 
{
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/TESLA.ttf');
	font-family: Tesla;
}
@font-face 
{
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFDinTextCompPro-Medium.ttf');
	font-family: pfd-medium;
}
.ss7_slider *, 
.ss7_slider *:before, 
.ss7_slider *:after 
{
	padding: 0;
	
	margin: 0;

	box-sizing: border-box;
}
.ss7_slider button, .ss7_slider input 
{
	border: none;
	outline: none;
}
.ss7_slider input[type=radio] 
{
	position: absolute;
	top: -5000px;
	left: -5000px;

	opacity: 0;
	z-index: -1000;
}
.ss7_slider 
{
	width: 100%;
	height: 100%;

	position: relative;
	left: 50%;
	transform: translateX(-50%);

	background: black;
}
.ss7_slider--control 
{
	width: 4rem;
	height: 4rem;

	z-index: 50;

	position: absolute;
	top: calc(50% - 2rem);
	display: none !important;

	background: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	opacity: 0;
	cursor: pointer;
}
.ss7_slider--control.ss7_left 
{
	left: 4rem;
}
.ss7_slider--control.ss7_right 
{
	right: 4rem;
}
.ss7_slider--control label 
{
	width: 100%;
	height: 100%;
	
	position: absolute;
	top: 0;
	left: 0;
	transform: scale(0);
	transition: transform 0s 0s;

	cursor: pointer;
	z-index: 2000;
}
.ss7_slider--el 
{
	width: 100%;
	height: 100%;
	
	position: absolute;
	top: 0;
	left: 0;
	transition: transform 2.8s, z-index 0.1s;

	overflow: hidden;
	z-index: 1;
}
.ss7_slider--el.ss7_anim-5parts .ss7_part 
{
	width: 20.1%;
	height: 100%;

	position: absolute;
	top: 0;

	overflow: hidden;
	will-change: transform;
}
.ss7_slider--el.ss7_anim-5parts .ss7_part:before 
{
	width: 500%;
	height: 100%;
	content: "";

	position: absolute;
	top: 0;
	display: block;

	background-size: cover;
	background-position: center;
	object-fit: contain;
}
.ss7_slider--el.ss7_anim-5parts .ss7_part.ss7_part-1 
{
	left: 0%;
	transition: transform 1.1s 0.3s;
}
.ss7_slider--el.ss7_anim-5parts .ss7_part.ss7_part-1:before 
{
	left: 0%;
}
.ss7_slider--el.ss7_anim-5parts .ss7_part.ss7_part-2 
{
	left: 20%;
	transition: transform 1.1s 0.5s;
}
.ss7_slider--el.ss7_anim-5parts .ss7_part.ss7_part-2:before 
{
	left: -100%;
}
.ss7_slider--el.ss7_anim-5parts .ss7_part.ss7_part-3 
{
	left: 40%;
	transition: transform 1.1s 0.7s;
}
.ss7_slider--el.ss7_anim-5parts .ss7_part.ss7_part-3:before 
{
	left: -200%;
}
.ss7_slider--el.ss7_anim-5parts .ss7_part.ss7_part-4 
{
	left: 60%;
	transition: transform 1.1s 0.5s;
}
.ss7_slider--el.ss7_anim-5parts .ss7_part.ss7_part-4:before 
{
	left: -300%;
}
.ss7_slider--el.ss7_anim-5parts .ss7_part.ss7_part-5 
{
	left: 80%;
	transition: transform 1.1s 0.3s;
}
.ss7_slider--el.ss7_anim-5parts .ss7_part.ss7_part-5:before 
{
	left: -400%;
}
.ss7_slider--el.ss7_anim-5parts .ss7_part 
{
	transform: translateY(100%);
}
.ss7_slider--el.ss7_anim-9parts .ss7_slider--el-bg 
{
	perspective: 2000;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part 
{
	width: 33.5%;
	height: 33.5%;

	position: absolute;

	overflow: hidden;
	will-change: transform;
	transform-origin: 0% 100%;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part:before 
{
	width: 300%;
	height: 300%;
	content: "";

	position: absolute;
	display: block;
	
	background-size: cover;
	background-position: center;
	object-fit: contain;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_left-top 
{
	top: 0%;
	left: 0%;
	transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_left-top:before 
{
	top: 0%;
	left: 0%;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_mid-top 
{
	top: 0%;
	left: 33.3333333333%;
	transition: transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.8s;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_mid-top:before 
{
	top: 0%;
	left: -100%;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_right-top 
{
	top: 0%;
	left: 66.6666666667%;
	transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_right-top:before 
{
	top: 0%;
	left: -200%;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_left-mid 
{
	top: 33.3333333333%;
	left: 0%;
	transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_left-mid:before 
{
	top: -100%;
	left: 0%;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_mid-mid 
{
	top: 33.3333333333%;
	left: 33.3333333333%;
	transition: transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.7s;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_mid-mid:before 
{
	top: -100%;
	left: -100%;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_right-mid 
{
	top: 33.3333333333%;
	left: 66.6666666667%;
	transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_right-mid:before 
{
	top: -100%;
	left: -200%;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_left-bot 
{
	top: 66.6666666667%;
	left: 0%;
	transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_left-bot:before 
{
	top: -200%;
	left: 0%;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_mid-bot 
{
	top: 66.6666666667%;
	left: 33.3333333333%;
	transition: transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.2s;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_mid-bot:before 
{
	top: -200%;
	left: -100%;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_right-bot 
{
	top: 66.6666666667%;
	left: 66.6666666667%;
	transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part.ss7_right-bot:before 
{
	top: -200%;
	left: -200%;
}
.ss7_slider--el.ss7_anim-9parts .ss7_part 
{
	transform: rotateX(90deg);

	opacity: 0;
}
.ss7_slider--el.ss7_anim-3parts .ss7_part 
{
	width: 33.5%;
	height: 100%;

	position: absolute;
	top: 0;

	overflow: hidden;
	transition: transform 1.5s 0.3s;
	will-change: transform;
}
.ss7_slider--el.ss7_anim-3parts .ss7_part:before 
{
	width: 300%;
	height: 100%;
	content: "";

	position: absolute;
	display: block;

	background-size: cover;
	background-position: center;
	object-fit: contain;
}
.ss7_slider--el.ss7_anim-3parts .ss7_part.ss7_left 
{
	left: 0;
}
.ss7_slider--el.ss7_anim-3parts .ss7_part.ss7_left:before 
{
	left: 0;
}
.ss7_slider--el.ss7_anim-3parts .ss7_part.ss7_mid 
{
	left: 33.3333333333%;
}
.ss7_slider--el.ss7_anim-3parts .ss7_part.ss7_mid:before 
{
	left: -100%;
}
.ss7_slider--el.ss7_anim-3parts .ss7_part.ss7_right 
{
	left: 66.6666666667%;
}
.ss7_slider--el.ss7_anim-3parts .ss7_part.ss7_right:before 
{
	left: -200%;
}
.ss7_slider--el.ss7_anim-3parts .ss7_left 
{
	transform: translate3D(-100%, -33.333%, 0);
}
.ss7_slider--el.ss7_anim-3parts .ss7_mid 
{
	transform: translate3D(0, 100%, 0);
}
.ss7_slider--el.ss7_anim-3parts .ss7_right 
{
	transform: translate3D(100%, -33.333%, 0);
}
.ss7_slider--el.ss7_anim-4parts .ss7_part 
{
	width: 50.2%;
	height: 50.2%;

	position: absolute;

	overflow: hidden;
	will-change: transform;
}
.ss7_slider--el.ss7_anim-4parts .ss7_part:before 
{
	width: 200%;
	height: 200%;
	content: "";
	
	position: absolute;
	display: block;

	background-size: cover;
	background-position: center;
	object-fit: contain;
}
.ss7_slider--el.ss7_anim-4parts .ss7_part.top 
{
	top: 0;
	transition: transform 1.3s 0.3s;
}
.ss7_slider--el.ss7_anim-4parts .ss7_part.top:before 
{
	top: 0;
}
.ss7_slider--el.ss7_anim-4parts .ss7_part.ss7_bot 
{
	top: 50%;
	transition: transform 1.3s 0.5s;
}
.ss7_slider--el.ss7_anim-4parts .ss7_part.ss7_bot:before 
{
	top: -100%;
}
.ss7_slider--el.ss7_anim-4parts .ss7_part.ss7_left 
{
	left: 0;
}
.ss7_slider--el.ss7_anim-4parts .ss7_part.ss7_left:before 
{
	left: 0;
}
.ss7_slider--el.ss7_anim-4parts .ss7_part.ss7_right 
{
	left: 50%;
}
.ss7_slider--el.ss7_anim-4parts .ss7_part.ss7_right:before 
{
	left: -100%;
}
.ss7_slider--el.ss7_anim-4parts .ss7_left 
{
	transform: translateX(-100%);
}
.ss7_slider--el.ss7_anim-4parts .ss7_right 
{
	transform: translateX(100%);
}
.ss7_slider--el-bg 
{
	width: 120%;
	height: 120%;

	position: absolute;
	top: -10%;
	left: -10%;
	transition: transform 1s 1.5s;

	background-size: cover;
	background-position: center;
	object-fit: contain;
	will-change: transform;
}
.ss7_slider--el-bg .ss7_part:after 
{
	content: "";
	width: 100%;
	height: 100%;

	position: absolute;
	top: 0;
	left: 0;
	
	background: rgba(0, 0, 0, 0.15);
}
.ss7_slider--el-content 
{
	width: calc(100% - 40px);
	height: 100%;

	position: absolute;
	top: 0;
	left: 20px;
	transition: opacity 0.3s;
	
	overflow: hidden;
	opacity: 0;
}
.ss7_slider--el-heading 
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	font-size: 3rem;
	font-family: Tesla;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
}

@media (min-width: 600px) 
{
	.ss7_slider--el-heading 
	{
		font-size: 5rem;
	}
}
/* CONTROL */
#page1:checked ~ .ss7_slider--el-1 .ss7_slider--el-bg 
{
	transform: scale(0.834);
}
#page1:checked ~ .ss7_slider--el-1 .ss7_slider--el-content 
{
	opacity: 1;
	transition: opacity 0.3s 1.8s;
}
#page1:checked ~ .ss7_slider--el-1 .ss7_part 
{
	transform: translateZ(0);
	opacity: 1;
}
#page2:checked ~ .ss7_slider--el-2 .ss7_slider--el-bg 
{
	transform: scale(0.834);
}
#page2:checked ~ .ss7_slider--el-2 .ss7_slider--el-content 
{
	transition: opacity 0.3s 1.8s;
	opacity: 1;
}
#page2:checked ~ .ss7_slider--el-2 .ss7_part 
{
	transform: translateZ(0);
	opacity: 1;
}
#page3:checked ~ .ss7_slider--el-3 .ss7_slider--el-bg 
{
	transform: scale(0.834);
}
#page3:checked ~ .ss7_slider--el-3 .ss7_slider--el-content 
{
	transition: opacity 0.3s 1.8s;
	opacity: 1;
}
#page3:checked ~ .ss7_slider--el-3 .ss7_part 
{
	transform: translateZ(0);
	opacity: 1;
}
#page4:checked ~ .ss7_slider--el-4 .ss7_slider--el-bg 
{
	transform: scale(0.834);
}
#page4:checked ~ .ss7_slider--el-4 .ss7_slider--el-content 
{
	transition: opacity 0.3s 1.8s;
	opacity: 1;
}
#page4:checked ~ .ss7_slider--el-4 .ss7_part 
{
	transform: translateZ(0);
	opacity: 1;
}
#page1:checked ~ .ss7_slider--control.ss7_left .ss7_page4-left 
{
	transform: scale(1);
	transition: transform 0s 2.1s;

	z-index: 5000;
}
#page1:checked ~ .ss7_slider--control.ss7_right .ss7_page2-right 
{
	transform: scale(1);
	transition: transform 0s 2.1s;
	
	z-index: 5000;
}
#page2:checked ~ .ss7_slider--control.ss7_left .ss7_page1-left 
{
	transform: scale(1);
	transition: transform 0s 2.1s;
	
	z-index: 5000;
}
#page2:checked ~ .ss7_slider--control.ss7_right .ss7_page3-right 
{
	transform: scale(1);
	transition: transform 0s 2.1s;
	
	z-index: 5000;
}
#page3:checked ~ .ss7_slider--control.ss7_left .ss7_page2-left 
{
	transform: scale(1);
	transition: transform 0s 2.1s;
	
	z-index: 5000;
}
#page3:checked ~ .ss7_slider--control.ss7_right .ss7_page4-right 
{
	transform: scale(1);
	transition: transform 0s 2.1s;
	
	z-index: 5000;
}
#page4:checked ~ .ss7_slider--control.ss7_left .ss7_page3-left 
{
	transform: scale(1);
	transition: transform 0s 2.1s;
	
	z-index: 5000;
}
#page4:checked ~ .ss7_slider--control.ss7_right .ss7_page1-right 
{
	transform: scale(1);
	transition: transform 0s 2.1s;
	
	z-index: 5000;
}