:root {
  --black: #000;
  --white: #fff;
  --color-1: #000;
  --gutter: 2rem;
  /* this value is going to be changed by javascript */
  --replace-offset: 50%;
  --replace-offset-2: calc((100% - var(--replace-offset) ) * -1)
}

/* set image position */


/* .footer {
  padding: calc(var(--gutter) * .5);
  background-color: var(--black);
  color: var(--white);
} */

/* without fixed header this makes no sense */
.header {
  /* position: fixed; */
  /* top: 50%; */
  /* transform: translateY(-50%); */
  left: 0;
  right: 0;
  /* padding: calc(var(--gutter) * .5); */
  z-index: 40;
  /* text-align: center; */
}
.menu-icon{
    float: right;
}

.logo {
  display: inline-block;
  border: solid;
  padding: calc(var(--gutter) * .25);
  border-radius: calc(var(--gutter) * .25);
  font-size: 2em;
}

.logo--invert {
  background-color: var(--black);
  color: var(--white);
  border-color: var(--white);
}



.section--bg {
  background-color: var(--color-1);
}

/**
  This is the interesting part
**/

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

.js-replace__item {
  grid-row: -1 / 1;
  grid-column: -1 / 1; 
  overflow: hidden;
  /* will-change: transform; */
}

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

  transform: translateY(calc(var(--replace-offset) * -1));
}

/* previous replace item*/
.js-replace__item--active {
  transform: translateY(calc(var(--replace-offset-2) * 1));  
}
.js-replace__item--active .js-replace__content {
  transform: translateY(calc(var(--replace-offset-2) * -1));  
}


/* REVERSE ANIMATION */
.js-replace--reverse 
.js-replace__item {
  transform: translateY(calc(var(--replace-offset-2) * 1));  
}
.js-replace--reverse 
.js-replace__content {
  transform: translateY(calc(var(--replace-offset-2) * -1));
}

/* previous replace item*/
.js-replace--reverse 
.js-replace__item--active {
  transform: translateY(calc(var(--replace-offset) * 1));  
}
.js-replace--reverse 
.js-replace__item--active .js-replace__content {
  transform: translateY(calc(var(--replace-offset) * -1));
}