@keyframes slideshow__fade {  
    0% {
      opacity: 0;
      animation-timing-function: ease-in;
    }
    8.33% {
     opacity: 1;
     animation-timing-function: ease-out;
    }
    16.67% {
      opacity: 1;
    }
    25.00% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

/* animated menu icon */
#burger {
    position: relative;
    top: 2px;
    width: 20px;
    height: 19px;
    cursor: pointer;
    display: none;
    z-index: 2;
}
#burger span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--color__2);
    border-radius: 2px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 350ms;
}
#burger span:nth-child(1) { top: 0px; }
#burger span:nth-child(2), #burger span:nth-child(3) { top: 6px; }
#burger span:nth-child(4) { top: 12px; }
#burger.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; }
#burger.open span:nth-child(2) { transform: rotate(45deg); }
#burger.open span:nth-child(3) { transform: rotate(-45deg); }
#burger.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; }

@media only screen and (max-width: 1024px) {
    #burger {
        display: block;
        position: absolute;
        right: 25px;
        top: calc(50% - 10px);
        z-index: 10;
    }
    .nav {
        position: fixed;
        width: 100%;
        height: 100%;
        top: -100vh;
        left: 0;
        background: var(--color__2);
        padding: 0;
        transition: 350ms;
        background: white;
        display: grid;
        place-content: center;
        z-index: 9;
    }
    .nav.show {
        top: 0;
    }
}