/* Homepage -> Slider */
.slider {
  position: relative;
  background-color: var(--light);
  width: 100%;
  height: 55vh;
  z-index: 20;
  overflow: hidden;
}


.slider-container {
  display: flex;
  height: 57vh;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
  
  z-index: 20;
  overflow: hidden;
}
.slider-container ul {
  padding-top: 4rem;
  padding-left:25rem;
}
.morphist > * {
	display: none;
}
.morphist > .animated {
	display: inline-block;
}
.slider-text {
  width: 45%;
  background: url("/images/fric.png")no-repeat;
  background-position: left 100px bottom -50px;
  height:100%;
  background-size: 25rem;
  position: relative;
  z-index: 5;
}
@media (min-width: 1930px) {
    .slider-text {
      background-size: 30rem;   
    } 
    .slider-container ul {
      padding-top: 7rem;
      padding-left: 30rem;
    }
}

.slider-image {
 width: 55%;
 background: url("/images/foto.jpg")no-repeat;
 background-position: left bottom;
 background-size: cover;
 height:100%;
 position: relative;
 
}


.slider-image img{
 width: 100%;
}

.slider-kolo {
  position:absolute; 
  width: 220px;
  right: 1px;
  bottom: 0px;
  margin-bottom: -20px;
  transform: scale(1);
  animation: pulse 2s infinite;
  z-index: 120;
  
}


@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}



.slider-text h1,
.slider-text h2,
.slider-text h3 {
  line-height: 1.2;
}
@-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: 2000px){
.slider-text {
  
  background-size: 33rem;
  z-index: 100;
}

}



@media (max-width: 1620px) {
  .slider-text {  margin-left: 0%;z-index: 100;}  
  .slider-text { background-position: left 50px bottom -50px;}
  .slider-kolo { width: 200px;}
  
  .slider-container ul {
  padding-top: 3rem;
 
 } 
  .slider-text h1 {
    font-size: 1.8rem;
  }
 
}

@media (max-width: 1400px) {
  .slider-container ul {
  padding-top: 3rem;
  padding-left: 5rem;
  padding-right: 5px;
 } 


 
}



@media (max-width: 991px) {
   .slider-text {width: 100%; background-position: left 5px top 10px; background-size: 15rem;}
   .slider-kolo {width: 160px; left: 10%; margin-bottom: -40px;  }
    .slider-container {
    flex-direction: column;
  }
  
  .slider-text h1 {
    font-size: 1.6rem;
  }
  .slider-text h2 {
    font-size: 1.4rem;
  }
  .slider-text h3 {
    font-size: 1.4rem;
  }
  .slider-text .button-dark {
    padding: 0.6rem 1rem;
    border-radius: 6px;
  }
  .slider-image {
    width: 100%;
    background: url("/images/foto-mobil.jpg")no-repeat;
    background-position: center top;
    background-size: cover;
    
    height:100%;
  }
  .slider-image img {
    max-height: 100%
  }
  
 .slider-container ul {
  padding-left: 15rem; padding-top: 2rem; 
  
 } 
 .slider, .slider-container { height: 75vh;  }
 
}



@media (min-width: 992px) {
  h1 {
    font-size: 2.0rem;
  }
  h2 {
    font-size: 1.8rem;
  }
}