* {
    margin: 0;
  }
  
  .slider {
    position: relative;
    height: 70vh;
    width: 100%;
  }
  
  .slider-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 0;
    opacity: 0;
  }
  
  .slider-panel {
    position: absolute;
    bottom: 0;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    color: rgba(255, 255, 255, 0.7);
    z-index: 20;
  }
  
  .slider-panel__navigation {
    margin: 0 auto;
    padding: 10px;
    width: 70%;
    text-align: center;
  }
  
  .slider-panel__navigation i {
    margin: 0 3%;
    font-size: 15px;
  }
  
  .slider-panel__navigation i:hover, .slider-panel__navigation i:active {
    color: white;
    cursor: pointer;
  }
  
  .slider-panel__controls {
    margin: 0 auto;
    padding: 10px;
    width: 70%;
    text-align: center;
  }
  
  .slider-panel__controls i {
    margin: 0 4%;
    font-size: 40px;
  }
  
  .slider-panel__controls i:hover, .slider-panel__controls i:active {
    color: white;
    cursor: pointer;
  }
  
  .animate-retangle-border,.active {
    z-index: 10;
    opacity: 1;
    -webkit-animation: 2s fadeIn ease-in;
            animation: 2s fadeIn ease-in;
    /* -webkit-animation: 2s blur ease-in;
            animation: 2s blur ease-in; */
  }
  
  .active-out {
    -webkit-animation: 3s fadeOut;
            animation: 3s fadeOut;
  }
  
  
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}


@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

  @-webkit-keyframes circle {
    0% {
      -webkit-clip-path: circle(75%);
              clip-path: circle(75%);
    }
    100% {
      -webkit-clip-path: circle(0%);
              clip-path: circle(0%);
    }
  }
  
  @keyframes circle {
    0% {
      -webkit-clip-path: circle(75%);
              clip-path: circle(75%);
    }
    100% {
      -webkit-clip-path: circle(0%);
              clip-path: circle(0%);
    }
  }
  
  @-webkit-keyframes blur {
    0% {
      -webkit-filter: blur(10px);
              filter: blur(10px);
    }
    100% {
      -webkit-filter: blur(0);
              filter: blur(0);
    }
  }
  
  @keyframes blur {
    0% {
      -webkit-filter: blur(10px);
              filter: blur(10px);
    }
    100% {
      -webkit-filter: blur(0);
              filter: blur(0);
    }
  }