.carousel 
{
    position: relative;
    padding: 0;

    display: inline-block;
    width: 100%;
    height: 25em;

    list-style: none;
}


/* Content */
.carousel .content-display
{
    position: relative;
    transform: translateX(7.5%);    
    width: 85%;
    height: 100%;
    border-radius: 3px;
    overflow: hidden;
}


/*Content scroll*/
.carousel .content
{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    padding: 0;
    margin: 0;
    
    transition: transform 0.5s ease 0s;
}

.carousel .content-control:nth-of-type(1):checked ~ .content-display .content { transform: translateX(0%);    }
.carousel .content-control:nth-of-type(2):checked ~ .content-display .content { transform: translateX(-100%); }
.carousel .content-control:nth-of-type(3):checked ~ .content-display .content { transform: translateX(-200%); }
.carousel .content-control:nth-of-type(4):checked ~ .content-display .content { transform: translateX(-300%); }
.carousel .content-control:nth-of-type(5):checked ~ .content-display .content { transform: translateX(-400%); }


/*Content image*/
.carousel .slide 
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

.carousel .slide:nth-of-type(1) { transform: translateX(0%);   }
.carousel .slide:nth-of-type(2) { transform: translateX(100%); }
.carousel .slide:nth-of-type(3) { transform: translateX(200%); }
.carousel .slide:nth-of-type(4) { transform: translateX(300%); }
.carousel .slide:nth-of-type(5) { transform: translateX(400%); }

.carousel .slide img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*Content caption*/
.carousel .caption
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: fit-content;

    text-align: left;

    background-color: rgba(75, 44, 142, 0.9);
}

.carousel .caption h3, .carousel .caption p
{
    font-style: normal;
    color: rgb(235, 235, 235);
    margin: 0px;
    padding: 0px 15px;
}

.carousel .caption h3
{
    font-family: "PatrickHand", sans-serif;
    font-weight: bold;
    font-size: 1.4em;
    margin-top: 10px;
}

.carousel .caption h3:hover{ text-decoration: underline; }

.carousel .caption p
{
    margin-top: 5px;
    margin-bottom: 15px;
}


/* Controls */
.carousel .control 
{
    position: absolute;
    height: 100%;
    width: 5%;

    display: block;
    cursor: pointer;
    opacity: 0.5;
}

.carousel .control div 
{
    padding-top: 4.5em;

    color: rgb(75, 44, 142);

    font-family: "PatrickHand", sans-serif;
    font-size: 40px;
    font-weight: bold;
    font-style: normal;

    text-decoration: none;
    /*text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);*/
}

.carousel .backward { left: 0; text-align: right; }
.carousel .forward  { right: 2%; }

.carousel .control:hover { opacity: 1; }

.carousel .content-control, .carousel .controls { display: none; }

.carousel .content-control:nth-of-type(1):checked ~ .controls:nth-of-type(1), 
.carousel .content-control:nth-of-type(2):checked ~ .controls:nth-of-type(2),
.carousel .content-control:nth-of-type(3):checked ~ .controls:nth-of-type(3),
.carousel .content-control:nth-of-type(4):checked ~ .controls:nth-of-type(4),
.carousel .content-control:nth-of-type(5):checked ~ .controls:nth-of-type(5)
{
  display: block;
  opacity: 1;
}


/* Thumbnails */
.carousel .thumbnails
{
    position: absolute;
    bottom: -6em;
    transform: translateX(7.5%);    
    width: 85%;
    text-align: center;
}

.carousel .thumbnail 
{
    display: inline-block;
    margin: 1px;
    
    height: 5em;
    width: 17.5%;
    border-radius: 3px;
    overflow: hidden;
    
    cursor: pointer;
    opacity: 0.5;
}

.carousel .thumbnail:hover { opacity: 0.85; }

.carousel .content-control:nth-of-type(1):checked ~ .thumbnails .thumbnail:nth-of-type(1),
.carousel .content-control:nth-of-type(2):checked ~ .thumbnails .thumbnail:nth-of-type(2),
.carousel .content-control:nth-of-type(3):checked ~ .thumbnails .thumbnail:nth-of-type(3),
.carousel .content-control:nth-of-type(4):checked ~ .thumbnails .thumbnail:nth-of-type(4),
.carousel .content-control:nth-of-type(5):checked ~ .thumbnails .thumbnail:nth-of-type(5) 
{ opacity: 1; }

.carousel .thumbnail img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}