archived-TwisterOS/carousel.css

.carousel-wrapper{
    height:450px;
    position:relative;
    width:800px;
    margin:0 auto;
    margin-top: 25px;
    margin-bottom: -20px;
  }
  .carousel-item{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding:25px 50px;
    opacity:0;
    transition: all 0.5s ease-in-out;
    border-radius: 10px;
  }
  .arrow{
    border: solid #FACF46;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 12px;
  }
  
  .arrow-prev{
    left:-30px;
    position:absolute;
    top:50%;
    transform:translateY(-50%) rotate(135deg);
  }
   
  .arrow-next{
      right:-30px;
    position:absolute;
    top:50%;
    transform:translateY(-50%) rotate(-45deg);
    }
  
  .light{
    color:white;
  }
  
  @media (max-width: 480px) {
        .arrow, .light .arrow {
          background-size: 10px;
          background-position: 10px 50%;
        }
      }
  
  
  /*Select every element*/
  [id^="item"] {
      display: none;
    }
  
  .item-1 {
      z-index: 2;
      opacity: 1;
    background:url('images/NewSlideShowImages/TwisterOS.png');
    background-size:cover;
    }

    .item-2 {
    background:url('images/NewSlideShowImages/TwisterOS-Dark.png');
    background-size:cover;
    }    

  .item-3{
    background:url('images/NewSlideShowImages/Twister95.png');
     background-size:cover;
  }

  .item-4{
    background:url('images/NewSlideShowImages/TwisterXP.png');
     background-size:cover;
  }
  
  .item-5{
    background:url('images/NewSlideShowImages/Twister7.png');
     background-size:cover;
  }
  
  .item-6{
    background:url('images/NewSlideShowImages/Twister10.png');
     background-size:cover;
  }
  
  .item-7{
    background:url('images/NewSlideShowImages/Twister10-Dark.png');
     background-size:cover;
  }
  
  .item-8{
    background:url('images/NewSlideShowImages/iTwister.png');
     background-size:cover;
  }
  
  .item-9{
    background:url('images/NewSlideShowImages/iTwister-Dark.png');
     background-size:cover;
  }

  .item-10{
    background:url('images/NewSlideShowImages/iTwisterSur.png');
     background-size:cover;
  }

  .item-11{
    background:url('images/NewSlideShowImages/iTwisterSur-Dark.png');
     background-size:cover;
  }
  
  *:target ~ .item-1 {
      opacity: 0;
    }
  
  #item-1:target ~ .item-1 {
      opacity: 1;
    }
  
  #item-2:target ~ .item-2, #item-3:target ~ .item-3 {
      z-index: 2;
      opacity: 1;
    }
    #item-3:target ~ .item-3, #item-4:target ~ .item-4 {
      z-index: 3;
      opacity: 1;
    }
      #item-4:target ~ .item-4, #item-5:target ~ .item-5 {
      z-index: 4;
      opacity: 1;
    }
      #item-5:target ~ .item-5, #item-6:target ~ .item-6 {
      z-index: 5;
      opacity: 1;
    }
      #item-6:target ~ .item-6, #item-7:target ~ .item-7 {
      z-index: 6;
      opacity: 1;
    }
      #item-7:target ~ .item-7, #item-8:target ~ .item-8 {
      z-index: 7;
      opacity: 1;
    }
        #item-8:target ~ .item-8, #item-9:target ~ .item-9 {
      z-index: 8;
      opacity: 1;
    }

    #item-9:target ~ .item-9, #item-10:target ~ .item-10 {
      z-index: 9;
      opacity: 1;
    }
    
    #item-10:target ~ .item-10, #item-11:target ~ .item-11 {
      z-index: 10;
      opacity: 1;
    }
  
    #item-11:target ~ .item-11, #item-1:target ~ .item-1 {
      z-index: 11;
      opacity: 1;
    }