.index_grid_holder { margin:0 auto; width:100%; display:block; margin-top:0px; max-width:1920px; height:100vh;  min-height:500px;max-height:1000px;} .index_grid1 {width:100%; height:700px; float:left;    object-fit: cover; } .index_grid2 {width:33%;  height:215px; float:left;  margin-bottom:30px;  margin-left:2%; object-fit: cover; overflow:hidden; border-radius:5px;  background-image: url("foto_slider/g2.jpg"); background-size:cover !important; background-repeat: no-repeat;  align-items: center;display: flex; justify-content: center; } .index_grid3 {width:33%;  height:215px; float:left;  margin-bottom:30px;  margin-left:2%; object-fit: cover; overflow:hidden;  border-radius:5px; background-image: url("foto_slider/g3.jpg"); background-size:cover !important; background-repeat: no-repeat;  align-items: center;display: flex; justify-content: center; } .index_grid4 {width:33%;  height:215px; float:left;  margin-bottom:30px;  margin-left:2%; object-fit: cover; overflow:hidden;  border-radius:5px;  background-image: url("foto_slider/g4.jpg"); background-size:cover !important;  background-repeat: no-repeat;  align-items: center;display: flex; justify-content: center; }  .index_grid2 h2, .index_grid3 h2, .index_grid4 h2 {color:white; font-size:230%; text-align:center;   font-weight:600; line-height:1.1; margin:0; padding:10px;}    @media screen and (max-width:1000px) { .index_grid1 {width:100%; height:auto;} .index_grid2 {width:49%; margin-left:0; margin-top:30px; height:250px;  } .index_grid3 {width:49%;margin-top:30px; height:250px; } .index_grid4 {width:49%;margin: 0 auto; margin-top:30px; float: none;height:250px; }   .index_grid2 h2, .index_grid3 h2, .index_grid4 h2 { font-size:200%;} }  @media screen and (max-width:600px) { .index_grid2 {width:100%; margin-left:0; margin-top:30px; } .index_grid3 {width:100%;margin-top:0px; margin-left:0; } .index_grid4 {width:100%;margin-top:30px; margin-left:0; }  .index_grid2, .index_grid3  {object-fit: contain; object-position:  center; width:100%; } .index_grid2 img, .index_grid3 img  {object-fit: contain; object-position:  center; width:100%; } }  .slider-obal { overflow-x: hidden; position: relative; height: 100vh; 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-bottom:0; width:100%; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center; max-width:2000px; border-radius:0px;  }  @media screen and (max-width:600px) {  .index_grid_holder, .slider-obal  { height: 80vh; min-height:500px; max-height:900px;}  } .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 !important; will-change: transform;  }  .ztmaveni { position: absolute; margin: 0 auto; text-align:center; width:100%; padding:2%; margin-top:0; height:100%; background-color:rgba(0, 0, 0, 0.3);}  .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; background-position: 35% 50%; }  .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; background-position: 35% 50%; }  .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; background-position: 70% 50%; }  .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; background-position: 25% 50%; }  .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; background-position: 65% 50%; }  .slide-obsah { position: relative; margin: 0 auto; text-align:center; width:90%; padding:2%; margin-top:25vh; text-align:center; height: auto; background-color:rgba(0, 0, 0, 0); border-radius: 0 5px 5px 0; margin-left:0;}  @media screen and (min-width:2000px) { .slide-obsah {   margin-top:250px;} } @media screen and (max-width:800px) { .slide-obsah { width:92%;   margin-top:130px;} }  .slide-obsah h1 { text-align:center; font-size:530%; color:#00adef; color:white; padding:5px; font-weight:800; font-family: 'Poppins', sans-serif; margin-top:20px; line-height:1.3; margin-bottom:15px;  }  .slide-obsah h2 { text-align:center; font-size:220%; color:#00adef; color:white; padding:5px; font-weight:600; font-family: 'Poppins', sans-serif; margin-top:20px; line-height:1.3; margin-top:0; }   .slide-nadpis {padding-left:2%;padding-right:2%;}  .slider-strankovani { position: absolute; z-index: 3; bottom: 2rem; 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; }   .tlacitko_slider { width:170px; background:var(--hlavni-barva); color:white; font-size:120%; text-align:center; padding:10px; display: inline-block; margin:0 auto; margin-top:10px; margin-bottom:20px; margin-right:10px; margin-left:10px; transition: all 0.7s ease; border-radius:5px; border:0px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }  @media screen and (max-width:700px) { .tlacitko_slider { width:150px; font-size:100%;} }  .tlacitko_slider:hover {  transform:  scale(1.1); }  @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: 1500px) {  .slide-obsah h1 { font-size:300%;} .slide-obsah h2 { font-size:200%;} }   @media screen and (max-width:1350px) {  .slide-obsah h1 {font-size:250%;} .slide-obsah h2 { font-size:180%; }  @media screen and (max-width:700px) {  .slide-obsah h1 { font-size:220%;} .slide-obsah h2 { font-size:160%; font-weight:700;}; }  @media screen and (max-width:410px) {  .slide-obsah h1 { font-size:180%;} .slide-obsah h2 { font-size:130%; font-weight:700;}; }     @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%; } }