/* ---------------------------------- */
/* Slip Scroll Functionality          */
/* https://codepen.io/anon/pen/BvjWzw */
/* ---------------------------------- */

/* variables */
:root {
	/* this value is going to be changed by javascript */
	--vertical-replace-offset: 50%;
	--vertical-replace-offset-2: calc((100% - var(--vertical-replace-offset) ) * -1);
}

/* without fixed header this makes no sense */
.vertical_container {
	position: fixed;
	top: 50%;
	-ms-transform: translateX(-60px);
	-webkit-transform: translateX(-60px);
	-moz-transform: translateX(-60px);
	-o-transform: translateX(-60px);
	transform: translateX(-60px);
	left: 35px;
	z-index:9;
	transition: 1s;
}

/* ---------------------------- */
/* This is the interesting part */
/* ---------------------------- */

/* align content above each other without absolute */
.vertical-js-replace {
	display: grid;
}

.vertical-js-replace__item {
	grid-row: -1 / 1;
	grid-column: -1 / 1; 
	overflow: hidden;
	will-change: transform;
	-ms-transform: translateY( calc(var(--vertical-replace-offset) * 1) );
	-webkit-transform: translateY( calc(var(--vertical-replace-offset) * 1) );
	-moz-transform: translateY( calc(var(--vertical-replace-offset) * 1) );
	-o-transform: translateY( calc(var(--vertical-replace-offset) * 1) );
	transform: translateY( calc(var(--vertical-replace-offset) * 1) );
}

.vertical-js-replace__content {
	/* fixes problem with calculating correct height in js */
	border: 1px solid transparent;
	will-change: transform;
	-ms-transform: translateY(calc(var(--vertical-replace-offset) * -1));
	-webkit-transform: translateY(calc(var(--vertical-replace-offset) * -1));
	-moz-transform: translateY(calc(var(--vertical-replace-offset) * -1));
	-o-transform: translateY(calc(var(--vertical-replace-offset) * -1));
	transform: translateY(calc(var(--vertical-replace-offset) * -1));
}

/* previous replace item*/
.vertical-js-replace__item--active {
	-ms-transform: translateY(calc(var(--vertical-replace-offset-2) * 1));  
	-webkit-transform: translateY(calc(var(--vertical-replace-offset-2) * 1));
	-moz-transform: translateY(calc(var(--vertical-replace-offset-2) * 1));
	-o-transform: translateY(calc(var(--vertical-replace-offset-2) * 1));	
	transform: translateY(calc(var(--vertical-replace-offset-2) * 1));
}

.vertical-js-replace__item--active .vertical-js-replace__content {
	-ms-transform: translateY(calc(var(--vertical-replace-offset-2) * -1));
	-webkit-transform: translateY(calc(var(--vertical-replace-offset-2) * -1));
	-moz-transform: translateY(calc(var(--vertical-replace-offset-2) * -1));
	-o-transform: translateY(calc(var(--vertical-replace-offset-2) * -1));
	transform: translateY(calc(var(--vertical-replace-offset-2) * -1));
}

/* REVERSE ANIMATION */
.vertical-js-replace--reverse 
.vertical-js-replace__item {
	-ms-transform: translateY(calc(var(--vertical-replace-offset-2) * 1));
	-webkit-transform: translateY(calc(var(--vertical-replace-offset-2) * 1));
	-moz-transform: translateY(calc(var(--vertical-replace-offset-2) * 1));
	-o-transform: translateY(calc(var(--vertical-replace-offset-2) * 1));
	transform: translateY(calc(var(--vertical-replace-offset-2) * 1));
}

.vertical-js-replace--reverse 
.vertical-js-replace__content {
	-ms-transform: translateY(calc(var(--vertical-replace-offset-2) * -1));
	-webkit-transform: translateY(calc(var(--vertical-replace-offset-2) * -1));
	-moz-transform: translateY(calc(var(--vertical-replace-offset-2) * -1));
	-o-transform: translateY(calc(var(--vertical-replace-offset-2) * -1));
	transform: translateY(calc(var(--vertical-replace-offset-2) * -1));
}

/* previous replace item*/
.vertical-js-replace--reverse 
.vertical-js-replace__item--active {
	-ms-transform: translateY(calc(var(--vertical-replace-offset) * 1));
	-webkit-transform: translateY(calc(var(--vertical-replace-offset) * 1));
	-moz-transform: translateY(calc(var(--vertical-replace-offset) * 1));
	-o-transform: translateY(calc(var(--vertical-replace-offset) * 1));
	transform: translateY(calc(var(--vertical-replace-offset) * 1));
}

.vertical-js-replace--reverse 
.vertical-js-replace__item--active .vertical-js-replace__content {
	-ms-transform: translateY(calc(var(--vertical-replace-offset) * -1));
	-webkit-transform: translateY(calc(var(--vertical-replace-offset) * -1));
	-moz-transform: translateY(calc(var(--vertical-replace-offset) * -1));
	-o-transform: translateY(calc(var(--vertical-replace-offset) * -1));
	transform: translateY(calc(var(--vertical-replace-offset) * -1));
}