/* Here's where our carousel begins, with the main wrapper being
relatively positioned, so that our absolutely positioned items are
in the right place. */
.carousel-wrapper {
position: relative;

/* Our absolutely positioned carousel items span the width and
height of its parent. We're making them transparent by default so
that they fade in when we cycle through them using the arrow links.*/
.carousel-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 25px 50px; /* top | sides */
opacity: 0;
transition: all 0.5s eease-in-out; /* ease-in-out ease infinite */

    /* Did you notice the 50px left, right padding up above? It's so
    we can position our arrow links! Each one will be 50px wide. Also,
    I'm using empty links with a background image so that the links
    look like arrows. Make sure you swap out that URL with an actual
    URL so that your arrow links aren't just transparent rectangles. */
    .arrow {
    position: absolute;
    top: 0;
    display: block; /* block */
	/* align-items: center;  to vertically align and auto-centered due to change in image-table resizing*/
    /* justify-content: center;  to vertically align and auto-centered due to change in image-table resizing*/
    width: 50px;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: url("arrow_left.png") 50% 50% / 20px no-repeat;

      /* Let's put our arrow to go back on the left. */
      &.arrow-prev {
        left: 0;
      }

      /* And our arrow to go forward on the right. Since I'm using
      the same arrow image for both my arrows, I'm rotating this one by
      180 degrees so that it points in the right direction */
      &.arrow-next {
        right: 0;
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
      }
    }
    /* I really like how these carousel items look on a dark image
    background, so if a .carousel-item div has the class 'light',
    we'll make its text color white, and use a white arrow instad of
    a dark gray one. Again, make sure this arrow image exists somewhere */
    &.light {
      color: white;

      .arrow {
        background: url("arrow_left.png") 50% 50% / 20px no-repeat;
      }
    }

    /* Let's use using some media queries to resize the arrows
    on smaller devices.*/
    @media (max-width: 480px) {
      .arrow, &.light .arrow {
        background-size: 10px;
        background-position: 10px 50%;
      }
    }

}

/* Let's set our jump link targets display: none; so that we're not
making the browser jump to the top of the carousel whenever a user
clicks on one of our arrow links. This attribute selector will target
any element whose id starts with 'target-item'. */
[id^="target-item"] {
display: none;
}

/* So, up above we made all our carousel items transparent, which means
that on page-load, we'd have a big empty box where our carousel should be.
Let's set our first item's opacity to 1 so that it displays instead. Also,
we're setting its z-index to 2, so that it's positioned on top of the
other carousel items. */
.item-1 {
z-index: 2;
opacity: 1;
}

/* But we don't want the first item to ALAWYS be opacity: 1; otherwise
it would peek through when cycling between items two and above. */
\*:target ~ .item-1 {
opacity: 0;
}

/* ...but if #target-item-1 is targeted, well we do want the first item
to show up, so we're selecting it with the ~ sibling selector and
setting its opacity to 1 again :-) */
#target-item-1:target ~ .item-1 {
opacity: 1;
}

/* If any other target-item-# is targeted, let's select it using the sibling
selector, make it fade in, and place it on top of the pile using z-index: 3.
Here's where you'd add more target items if your carousel has more than three
items. It might be worth adding like 10 items right off the bat. */
#target-item-2:target ~ .item-2, #target-item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}

#target-item-3:target ~ .item-3, #target-item-4:target ~ .item-4 {
z-index: 4;
opacity: 1;
}

#target-item-4:target ~ .item-4, #target-item-5:target ~ .item-5 {
z-index: 5;
opacity: 1;
}

#target-item-5:target ~ .item-5, #target-item-6:target ~ .item-6 {
z-index: 6;
opacity: 1;
}

#target-item-6:target ~ .item-6, #target-item-7:target ~ .item-7 {
z-index: 7;
opacity: 1;
}

#target-item-7:target ~ .item-7, #target-item-8:target ~ .item-8 {
z-index: 8;
opacity: 1;
}

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

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

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

}