#slider-wrapper{
    height:max((100vH - 16rem), 27em);
  }
#slider{
    perspective:100vw;
    background-color: #000;
    background-image:url(/img/sliderback.jpg); 
    background-size:cover; 
    background-position:center; 
  }

  @media (max-height: 500px) { #slider{font-size: 14px;} }
  @media (max-height: 500px) { #slider{font-size: 12px; height: calc(100vH - 5rem);} }
  @media (max-height: 300px) { #slider{font-size: 10px; height: max(200px,calc(100vH - 4rem));} }
  
  #slider * {
      -moz-transition: all 0.7s ease-in-out;
      -webkit-transition: all 0.7s ease-in-out;
      -o-transition: all 0.7s ease-in-out;
      -ms-transition: all 0.7s ease-in-out;
      transition: all 0.7s ease-in-out;
  }
  
  .frame {
      position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    animation: none; 
    z-index:0; 
    opacity:0; 
  }
  .frame.on {
    z-index:20; 
    opacity:1; 
  }
  .frame > * {
      position:absolute; 
    animation-play-state: paused !important; 
    animation-fill-mode:backwards !important;
    animation-name: fromleft; 
    animation-duration: 1s;
  }
  .frame.on > * {
      animation-play-state: running !important; 
    animation-fill-mode:both !important; 	
    animation-delay: 1s;
  }
  
  .frame p{
    font-size: clamp(1em, ((50vmin - 5rem) / 14), 2em);
    color:#fff; 
    box-sizing:border-box;
    line-height:1.4em;
    margin: 0;
    padding: 0; 
    padding-bottom: 1em;
  }
  
  #slide1_1{ 
      top:8%;
      left:15%; 
      height:53%;
  }
  #slide1_2{ 
      top:13%; 
      left:17%; 
      height:53%;
      animation-delay: 1.25s; 
  }
  #slide1_3{ 
    bottom:calc(10% + 1.6em);
    animation-name: appear; 
      animation-delay: 2s;
    left:8%; 
  }
  #slide1_4{ 
    bottom:10%;
    animation: appear 2s; 
      animation-delay: 2.7s;
    left:8%; 
  }
  
  #slide2_1{ 
      top:30%;
      left:5%; 
      animation-name: appear;  
  }
  #slide2_2{ 
      top:30%; 
      left:5%; 
      animation-name: appear; 
    animation-delay: 1.3s; 
    margin-top:1.5em;
  }
  #slide2_3{ 
      top:30%; 
    margin-top:5em;
      left:5%; 
      animation-name: appear; 
    animation-delay: 2s; 
  }
  
  #slide3_1, #slide3_2, #slide3_3{
    top:30%;
    left:5%; 
    animation-name: appear;  
  }
  #slide3_2{ 
    margin-top:1.6em;
    animation-delay: 1.3s; 
  }
  
  #slide3_3{ 
      margin-top:4.6em;
      animation: appear 2s; 
    animation-delay: 2s; 
  }
  #slide4_1{ 
      left: 5.8%; 
      top: 10%;
      animation-delay: 1s;
      height:40%;
      max-width: calc(100vW - 4rem);
      object-fit: contain;
}

  #slide4_2{ 
      left: 5%;  
    top: 52%;
      animation: appear 2s; 
    animation-delay: 2s;
  }
  #slide4_3{ 
      left: 5%;  
    top: calc(52% + 4em);
      animation: appear 2s; 
    animation-delay: 2.5s;
  }
  
  @keyframes fromleft {	0% {  transform:translateX(-1000px); }  100% {  transform:translate(0); } }
  @keyframes appear {	0% {  opacity:0; }	100% {  opacity:1; } }