/* Homepage -> Slider */
#slider {
  position: relative;
  height: calc(100vh - 2rem);
  width: 100%;
  margin: 0 auto;
  background-color: var(--bg-body);
  background-image: url(../images/slider.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
	overflow: hidden;
  z-index: 2;
}
.home-slider {
  position: relative;
  height: calc(100vh - 2rem);
  z-index: 5;
  display: flex;
  align-items: center;
}
.home-slider {
  list-style: none;
  list-style-type: none;
  padding: 0;
  padding: 0;
}
.home-slider h1,
.home-slider h2,
.home-slider h3 {
  font-size: 3rem;
  color: var(--bold-color);
  background-color: rgba(211, 211, 211, 0.5);
}
.home-slider p {
  display: inline-block;
  padding: 0 10px;
  font-size: 1.6rem;
  background-color: rgba(211, 211, 211, 0.5);
  color: var(--bold-color);
}
.morphist > * {
	display: none;
}
.morphist > .animated {
	display: inline-block;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media (min-width: 768px) {
  .home-slider {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .home-slider li{
    margin-top: 100px;
  }
}
    

@media (max-width: 767px) {
  #slider {
    height: 60vh;
    background-position: 63% 30%;
  }

  #slider .container {
    height: -webkit-fill-available;
  }

  .home-slider {
    height: auto;
    margin-top: 10px;
    height: -webkit-fill-available;
  }

  .home-slider li{
    height: -webkit-fill-available;
  }

  .home-slider h3 {
    font-size: 1.2rem !important;
    background-color: rgba(211, 211, 211, 0.5);
    margin-top: 20px;
  }

  .home-slider p {
    background-color: rgba(211, 211, 211, 0.5);
  }

  .home-slider .button:nth-of-type(1) {
    position: absolute;
    bottom: 10px;
  }

  .home-slider .button:nth-of-type(2) {
    position: absolute;
    bottom: 10px;
    left: 110px;
  }

}