.slider-obal {
  overflow-x: hidden;
  position: relative;
  height: 90vh;
  min-height:500px;
  max-height:1000px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: all-scroll;
  margin-top:60px;
margin-bottom:70px;
  
    width:100%;
      margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    max-width:2000px;

  }

.slider {
  z-index: 1;
  position: relative;
  height: 100%;

  }
  
.slider.animace {
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  will-change: transform;

  }
  
.slider.animace .slide-pozadi {
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  will-change: transform;
    
  }

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
 
  } 
  
.slide-pozadi {
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background-size: cover;
  will-change: transform; 
  
  }   
  
.slide:nth-child(1) {left: 0; }
.slide:nth-child(1) .slide-pozadi {
  left: 0;
  background-image: url("foto_slider/1.jpg");
         background-size: 100%;
        animation-name: shrink;
         animation-duration: 3s;
        animation-delay: 0s;
  }

.slide:nth-child(2) {left: 100%; }
.slide:nth-child(2) .slide-pozadi {
  left: -50%;
  background-image: url("foto_slider/2.jpg");
         background-size: 100%;
        animation-name: shrink;
         animation-duration: 3s;
        animation-delay: 5s;
  }

.slide:nth-child(3) {left: 200%;}
.slide:nth-child(3) .slide-pozadi {
  left: -100%;
  background-image: url("foto_slider/3.jpg");
       background-size: 100%;
        animation-name: shrink;
         animation-duration: 3s;
        animation-delay: 10s; 
  }

.slide:nth-child(4) {left: 300%;}
.slide:nth-child(4) .slide-pozadi {
  left: -150%;
  background-image: url("foto_slider/4.jpg");
        background-size: 100%;
        animation-name: shrink;
         animation-duration: 3s;
        animation-delay: 15s;
  }

.slide:nth-child(5) {left: 400%;}
.slide:nth-child(5) .slide-pozadi {
  left: -200%;
  background-image: url("foto_slider/5.jpg");
    background-size: 100%;
        animation-name: shrink;
         animation-duration: 3s;
        animation-delay: 20s;
  }

.slide-obsah {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,0.3);
  }

.slide-obsah h1 {margin-top:300px; font-size:600%; color:white; text-shadow: 1px 1px 1px #2c2c2c;}

.slider-strankovani {
  position: absolute;
  z-index: 3;
  bottom: 5rem;
  font-size: 0;
  list-style-type: none;
  
  margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
  }
  
.slider-strankovani_element {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 2rem;
  height: 2rem;
  margin: 0 0.5rem;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
  }
  
.slider-strankovani_element:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.2rem;
  height: 1.2rem;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }
  
.slider-strankovani_element.active:before, .slider-strankovani_element:hover:before {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }
  
  
 @media (max-width: 1800px) { 
 .slide:nth-child(1)   .slide-pozadi  {
         background-size: cover;
       animation-name:none;
  }
   .slide:nth-child(2)   .slide-pozadi  {
         background-size: cover;
       animation-name:none;
  }
   .slide:nth-child(3)   .slide-pozadi  {
         background-size: cover;
       animation-name:none;
  }
   .slide:nth-child(4)   .slide-pozadi  {
         background-size: cover;
       animation-name:none;
  }
  
  .slide:nth-child(5)   .slide-pozadi  {
         background-size: cover;
       animation-name:none;
  }
  
   
  }
  
 @media screen and (max-width: 1400px) { 
  
  .slide-obsah h1 {margin-top:200px; font-size:500%;}
 
 }
 
 
  @media screen and (max-width:800px) { 
  
  .slide-obsah h1 {margin-top:150px; font-size:400%;}
 
 }
 
   @media screen and (max-width:600px) { 
  
  .slide-obsah h1 {margin-top:150px; font-size:300%;}
  
   .slider-obal {
 
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  
    width:100%;
   

  }

 
 }
 
 
    @media screen and (max-width:400px) { 
  
  .slide-obsah h1 {margin-top:100px; font-size:250%;}
 
 }
  
  @keyframes shrink {
  0% {
    background-size: 115%;
  }
  100% {
    background-size: 100%;
  }
}

  
  @keyframes shrink2 {
  0% {
    background-size: 120%;
  }
  100% {
    background-size: 100%;
  }
  
    @keyframes shrink3 {
  0% {
    background-size: 120%;
  }
  100% {
    background-size: 100%;
  }
  
    @keyframes shrink4 {
  0% {
    background-size: 120%;
  }
  100% {
    background-size: 100%;
  }
}