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

/* Setup Root Variables - These Values Will Be Changed With JavaScript */
:root {
	/* this value is going to be changed by javascript */
	--burgerbar-replace-offset: 50%;
	--burgerbar-replace-offset-2: calc((100% - var(--burgerbar-replace-offset) ) * -1);
}

.blue div {
	background:#0000ff !important;
}

/* without fixed header this makes no sense */
.burgerbar_container {
	position: fixed;
	top: 50px;
	right: 36px;
	z-index: 9999;
	width: 25px;
	height: 25px;
}

.burger_white div {
	height:3px;
	width:100%;
	background:white;
}

.burger_blue div {
	height:3px;
	width:100%;
	background:#0000ff;
}

.burger-icon div {
	transition: all .2s ease-in-out;
}

.burger-icon {
	height:25px;
	width:25px;
	display: flex;
    flex-direction: column;
    justify-content: space-around;
}


.burger-icon.open .burger_top {
	transform: translateY(5px) rotate(45deg);
	background:white;
}

.burger-icon.open .burger_bottom {
	transform: translateY(-7px) rotate(-45deg);
	background:white;
}

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

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

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

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

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

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

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

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

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

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