.slider {
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  height: 100vh;
  width: 100%;
  -webkit-animation: rotateHue infinite 56s linear;
          animation: rotateHue infinite 56s linear;
  -webkit-animation-delay: 0.875s;
          animation-delay: 0.875s;
}
@-webkit-keyframes rotateHue {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes rotateHue {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.shutters {
  position: absolute;
  height: 150vmax;
  width: 150vmax;
  left: calc(50% - 75vmax);
  top: calc(50% - 75vmax);
  pointer-events: none;
  z-index: 4;
  -webkit-animation: rotateFrame 5s linear infinite;
          animation: rotateFrame 5s linear infinite;
}
@-webkit-keyframes rotateFrame {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@keyframes rotateFrame {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
.shutters:before, 
.shutters:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  background-color: #30363e;
  pointer-events: auto;
}
.shutters:before {
  bottom: 50%;
  -webkit-animation: openTop 14s infinite;
          animation: openTop 14s infinite;
}
@-webkit-keyframes openTop {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
  }
  40% {
    -webkit-transform: translate3d(-50%, -65vmax, 0);
            transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  70% {
    -webkit-transform: translate3d(-50%, -65vmax, 0);
            transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
}
@keyframes openTop {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
  }
  40% {
    -webkit-transform: translate3d(-50%, -65vmax, 0);
            transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  70% {
    -webkit-transform: translate3d(-50%, -65vmax, 0);
            transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
}
.shutters:after {
  top: 50%;
  -webkit-animation: openBottom 14s infinite;
          animation: openBottom 14s infinite;
}
@-webkit-keyframes openBottom {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
  }
  40% {
    -webkit-transform: translate3d(-50%, 65vmax, 0);
            transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  70% {
    -webkit-transform: translate3d(-50%, 65vmax, 0);
            transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
}
@keyframes openBottom {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
  }
  40% {
    -webkit-transform: translate3d(-50%, 65vmax, 0);
            transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  70% {
    -webkit-transform: translate3d(-50%, 65vmax, 0);
            transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
}
.slider-wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #30363e;
  top: 0;
  left: 0;
}
.slide {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  -webkit-animation: showHideSlide infinite 56s steps(1);
          animation: showHideSlide infinite 56s steps(1);
}
@-webkit-keyframes showHideSlide {
  0% {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }
  25% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
}
@keyframes showHideSlide {
  0% {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }
  25% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
}
.slide:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.slide:nth-child(1) .slideBg {
  background-image: url(../img/hero.jpg);
}
.slide:nth-child(2) {
  -webkit-animation-delay: 14s;
          animation-delay: 14s;
}
.slide:nth-child(2) .slideBg {
  background-image: url(../img/cucina_bianca_nera.jpg);
}

.slide:nth-child(3) {
  -webkit-animation-delay: 28s;
          animation-delay: 28s;
}
.slide:nth-child(3) .slideBg {
  background-image: url(../img/entrata_scala.jpg);
}
.slide:nth-child(4) {
  -webkit-animation-delay: 42s;
          animation-delay: 42s;
}
.slide:nth-child(4) .slideBg {
  background-image: url(../img/bagno_lavandino.jpg);
  background-position: top;
}

.slideBg {
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-color: #30363e;
  opacity: 1;
  z-index: -1;
  -webkit-animation: bgInOut 14s infinite;
          animation: bgInOut 14s infinite;
}

.slideBg::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(48 54 62 / 30%);
}
@-webkit-keyframes bgInOut {
  0% {
    -webkit-transform: rotate(-30deg) scale(1.3);
            transform: rotate(-30deg) scale(1.3);
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
            animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  22% {
    -webkit-transform: rotate(0deg) scale(1.35);
            transform: rotate(0deg) scale(1.35);
  }
  33% {
    -webkit-transform: rotate(0deg) scale(1.35);
            transform: rotate(0deg) scale(1.35);
  }
  50% {
    -webkit-transform: rotate(0deg) scale(1.4);
            transform: rotate(0deg) scale(1.4);
  }
  66% {
    -webkit-transform: rotate(0deg) scale(1.4);
            transform: rotate(0deg) scale(1.4);
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
            animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  100% {
    -webkit-transform: rotate(20deg) scale(1);
            transform: rotate(20deg) scale(1);
  }
}
@keyframes bgInOut {
  0% {
    -webkit-transform: rotate(-30deg) scale(1.3);
            transform: rotate(-30deg) scale(1.3);
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
            animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  22% {
    -webkit-transform: rotate(0deg) scale(1.35);
            transform: rotate(0deg) scale(1.35);
  }
  33% {
    -webkit-transform: rotate(0deg) scale(1.35);
            transform: rotate(0deg) scale(1.35);
  }
  50% {
    -webkit-transform: rotate(0deg) scale(1.4);
            transform: rotate(0deg) scale(1.4);
  }
  66% {
    -webkit-transform: rotate(0deg) scale(1.4);
            transform: rotate(0deg) scale(1.4);
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
            animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  100% {
    -webkit-transform: rotate(20deg) scale(1);
            transform: rotate(20deg) scale(1);
  }
}

@media only screen and (max-width: 425px){
  .slide:nth-child(2) .slideBg {
    background-position: right;
  }
  
}