.glitch-slider,
.glitch-slider .frames {
	width: 100%;
	height: 100%;
	position: relative;
}

.glitch-slider .frames > div {
	width: 100%;
	height: 100%;
	position: absolute;
	background-size: cover;
	opacity: 0;
}

.glitch-slider .frames > div .part {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.glitch-slider .frames > div .frame {
	width: 100%;
	height: 100%;
}

.glitch-slider .frames > div .frame div {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-size: cover;
}

.glitch-slider .frames > .current,
.glitch-slider .frames > .next {
	opacity: 1;
}

.glitch-slider .frames > .current .part,
.glitch-slider .frames > div:first-child.next:not(.current) .part {
	z-index: 1000;
}

.glitch-slider .current .part_3,
.glitch-slider .current .part_5,
.glitch-slider .current .part_7,
.glitch-slider .current .part_9,
.glitch-slider .next .part_2,
.glitch-slider .next .part_4,
.glitch-slider .next .part_6,
.glitch-slider .next .part_8,
.glitch-slider .next .part_10 {
	animation: glitcher_left 0.5s step-start 0s 1;
}

.glitch-slider .current .part_2,
.glitch-slider .current .part_4,
.glitch-slider .current .part_6,
.glitch-slider .current .part_8,
.glitch-slider .current .part_10,
.glitch-slider .next .part_3,
.glitch-slider .next .part_5,
.glitch-slider .next .part_7,
.glitch-slider .next .part_9 {
	animation: glitcher_right 0.5s step-start 0s 1;
}


.glitch-slider .frames > div .part_1 {
	height: 100%;
	top: 0;
	opacity: 1;
}

.glitch-slider .frames > div .part_2 {
	height: 10%;
	top: 20%;
}

.glitch-slider .frames > div .part_3 {
	height: 5%;
	top: 30%;
}

.glitch-slider .frames > div .part_4 {
	height: 3%;
	top: 35%;
}

.glitch-slider .frames > div .part_5 {
	height: 10%;
	top: 38%;
}

.glitch-slider .frames > div .part_6 {
	height: 20%;
	top: 48%;
}

.glitch-slider .frames > div .part_7 {
	height: 5%;
	top: 68%;
}

.glitch-slider .frames > div .part_8 {
	height: 2%;
	top: 73%;
}

.glitch-slider .frames > div .part_9 {
	height: 7%;
	top: 75%;
}

.glitch-slider .frames > div .part_10 {
	height: 18%;
	top: 82%;
}


.glitch-slider .frames > .current .part_3 {
	animation: fadeOut 0.1s step-start 0.05s 1 both;
}

.glitch-slider .frames > .current .part_9 {
	animation: fadeOut 0.1s step-start 0.1s 1 both;
}

.glitch-slider .frames > .current .part_1 {
	animation: fadeOut 0.1s step-start 0.15s 1 both;
}

.glitch-slider .frames > .current .part_8 {
	animation: fadeOut 0.1s step-start 0.20s 1 both;
}

.glitch-slider .frames > .current .part_6 {
	animation: fadeOut 0.1s step-start 0.25s 1 both;
}

.glitch-slider .frames > .current .part_10 {
	animation: fadeOut 0.1s step-start 0.30s 1 both;
}

.glitch-slider .frames > .current .part_2 {
	animation: fadeOut 0.1s step-start 0.35s 1 both;
}

.glitch-slider .frames > .current .part4 {
	animation: fadeOut 0.1s step-start 0.40s 1 both;
}

.glitch-slider .frames > .current .part_7 {
	animation: fadeOut 0.1s step-start 0.45s 1 both;
}

.glitch-slider .frames > .current .part_5 {
	animation: fadeOut 0.1s step-start 0.5s 1 both;
}


.glitch-slider .frames > div .part_1 .frame div {
	background-position: 50% 0;
}

.glitch-slider .frames > div .part_2 .frame div {
	background-position: 50% 19%;
}

.glitch-slider .frames > div .part_3 .frame div {
	background-position: 50% 27.1%;
}

.glitch-slider .frames > div .part_4 .frame div {
	background-position: 50% 31.2%;
}

.glitch-slider .frames > div .part_5 .frame div {
	background-position: 50% 36.1%;
}

.glitch-slider .frames > div .part_6 .frame div {
	background-position: 50% 50.5%;
}

.glitch-slider .frames > div .part_7 .frame div {
	background-position: 50% 61.7%;
}

.glitch-slider .frames > div .part_8 .frame div {
	background-position: 50% 64.6%;
}

.glitch-slider .frames > div .part_9 .frame div {
	background-position: 50% 69.5%;
}

.glitch-slider .frames > div .part_10 .frame div {
	background-position: 50% 84.7%;
}


.glitch-slider .current .frame > div:first-child,
.glitch-slider .next .frame > div:first-child {
	animation: glitcher_main 0.5s step-start 0s 1;
}

.glitch-slider .next .frame > div:last-child,
.glitch-slider .current .frame > div:last-child {
	animation: glitcher_left 0.5s step-start 0s 1;
	mix-blend-mode: hue;
}

@keyframes glitcher_main {
	0% {
		left: 0;
	}
	20% {
		left: 5%;
	}
	40% {
		top: 1%;
		left: 4%;
	}
	60% {
		top: 2%;
		left: 3%;
	}
	80% {
		left: 0;
		top: 0;
	}
	100% {
		left: 0;
	}
}

@keyframes glitcher_right {
	0% {
		left: 0;
		opacity: 0;
	}
	20% {
		left: 5%;
		opacity: 1;
	}
	40% {
		left: 2%;
		opacity: 1;
	}
	60% {
		left: 4%;
		opacity: 1;
	}
	80% {
		left: 0;
		opacity: 0;
	}
	100% {
		left: 0;
		opacity: 0;
		mix-blend-mode: color-dodge;
	}
}


@keyframes glitcher_left {
	0% {
		left: 0;
		opacity: 0;
		mix-blend-mode: color-dodge;
	}
	20% {
		left: -5%;
		opacity: 1;
	}
	40% {
		left: -2%;
		opacity: 1;
	}
	60% {
		left: -4%;
		opacity: 1;
	}
	80% {
		left: 0;
		opacity: 0;
	}
	100% {
		left: 0;
		opacity: 0;
		mix-blend-mode: color-dodge;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

div.navigation {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.3;
	transition: opacity 0.2s ease-in-out;
	z-index: 2000;
}

.glitch-slider:hover > div.navigation {
	opacity: 1;
}

div.navigation .position {
	display: flex;
	justify-content: center;
	height: 26px;
}

div.navigation .position > div {
	width: 24px;
	height: 24px;
	padding: 8px;
	margin: 0 1px;
	box-sizing: border-box;
	border-radius: 24px;
}

div.navigation .position > div > div {
	width: 8px;
	height: 8px;
	border-radius: 32px;
	background-color: rgba(255, 255, 255, 0.5);
}

div.navigation .position > div.current > div {
	width: 8px;
	height: 8px;
	background-color: rgba(255, 255, 255, 1);
}

div.navigation .position > div > div:before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	position: relative;
	top: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0);
	box-sizing: border-box;
	border-radius: 24px;
	transition: all 0.1s ease-in-out;
}

div.navigation .position > div:hover:not(.current) > div:before {
	width: 24px;
	height: 24px;
	top: -8px;
	left: -8px;
	background-color: rgba(255, 255, 255, 0.5);
}

div.navigation .position > div:hover:not(.current) {
	cursor: pointer;
}

div.navigation #next,
div.navigation #prev {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 45px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}

div.navigation #next div,
div.navigation #prev div {
	width: 21px;
	height: 35px;
	opacity: 0.5;
	transition: opacity 0.2s ease-in-out;
}

div.navigation #next div {
	background-image:url('../images/next.svg');
}

div.navigation #prev div {
	background-image:url('../images/prev.svg');
}

div.navigation #prev {
	right: inherit;
	left: 0;
}

div.navigation #next:hover,
div.navigation #prev:hover {
	cursor: pointer;
}

div.navigation #next:hover > div,
div.navigation #prev:hover > div {
	opacity: 1;
}