.carousel-slide p{
    text-align: center;
}

.carousel-slide img{
    padding: -5px;
    max-width: 90%;
}

.carousel-slide figcaption{
    font-size: 16px;
    text-align: center;
    color: #666666;
}

@media (min-width: 375px) {
    .carousel-slide img{
        padding: -30px 20px 5px 20px ;
        max-width: 100%;
    }

    .carousel-slide figcaption{
        color: #666666;
    }   
    
}

@media (min-width: 480px) {
    .carousel-slide img{
        padding: 0px 20px 5px 20px ;
        max-width: 100%;
    }

    .carousel-slide figcaption{
        color: #666666;
    }   
}

@media (min-width: 600px) {
    .carousel-slide img{
        padding: 20px 20px 5px 20px ;
        max-width: 100%;
    }

    .carousel-slide figcaption{
        color: #666666;
    }   
    
}

@media (min-width:768px) {
    .carousel-slide img{
        padding: 50px 20px 5px 20px ;
        max-width: 90%;
    }

    .carousel-slide figcaption{
        color: #666666;
    }   
}

@media (min-width: 992px){
    .carousel-slide img{
        padding: 100px 20px 5px 20px ;
        max-width: 90%;
    }

    .carousel-slide figcaption{
        color: #666666;
    }   
}


@media (min-width: 1024px) {
    .carousel{
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: end;
        min-height: 45rem;
        padding: 5rem;
        top: -15px;
        width: 765px;
        margin-left: 115px; 
    }
    
    .carousel *{
        margin: 0;
        padding: 0;
    }
    
    .carousel-wrapper{
        height: 690px;
        width: 100%;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
    }

    .carousel-slide img{
        padding: auto;
        max-width: 100%;
        /*border-radius: 15px;*/
        margin-right: -0px;
    }

    .carousel-slide figcaption{
        background-color: rgba(0,0,0,0.5);
        color: white;
        font-size: 20px;
        position: fixed;
        padding: 10px;
        float: left;
        margin-top: 533px;
        text-align: center;
    }
 
    .carousel-slide{
        display: none;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 100%;
    
        position: absolute;
        top: 0;
        left:0;
        z-index: 10;
    
        transform: translate(100%, 0);
        opacity: 0;
    }
    
    /* Hide unnecessary radio buttons */
    
    input[name="carousel-css"][value="slide-20"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(19),
    input[name="carousel-css"][value="slide-19"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(18),
    input[name="carousel-css"][value="slide-18"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(17),
    input[name="carousel-css"][value="slide-17"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(16),
    input[name="carousel-css"][value="slide-16"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(15),
    input[name="carousel-css"][value="slide-15"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(14),
    input[name="carousel-css"][value="slide-14"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(13),
    input[name="carousel-css"][value="slide-13"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(12),
    input[name="carousel-css"][value="slide-12"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(11),
    input[name="carousel-css"][value="slide-11"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(10),
    input[name="carousel-css"][value="slide-10"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(9),
    input[name="carousel-css"][value="slide-9"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(8),
    input[name="carousel-css"][value="slide-8"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(7),
    input[name="carousel-css"][value="slide-7"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(6),
    input[name="carousel-css"][value="slide-6"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(5),
    input[name="carousel-css"][value="slide-5"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(4),
    input[name="carousel-css"][value="slide-4"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(3),
    input[name="carousel-css"][value="slide-3"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(2),
    input[name="carousel-css"][value="slide-2"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(1),
    input[name="carousel-css"][value="slide-1"]:checked ~ .carousel-wrapper .carousel-slide:last-of-type{
        display: flex;
        opacity: 1;
        transform: translate(-100%, 0);
        /*transition: 0.5s transform, 0.1s z-index 0.4s;*/
    }
    
    input[name="carousel-css"][value="slide-1"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(2),
    input[name="carousel-css"][value="slide-2"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(3),
    input[name="carousel-css"][value="slide-3"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(4),
    input[name="carousel-css"][value="slide-4"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(5),
    input[name="carousel-css"][value="slide-5"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(6),
    input[name="carousel-css"][value="slide-6"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(7),
    input[name="carousel-css"][value="slide-7"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(8),
    input[name="carousel-css"][value="slide-8"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(9),
    input[name="carousel-css"][value="slide-9"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(10),
    input[name="carousel-css"][value="slide-10"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(11),
    input[name="carousel-css"][value="slide-11"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(12),
    input[name="carousel-css"][value="slide-12"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(13),
    input[name="carousel-css"][value="slide-13"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(14),
    input[name="carousel-css"][value="slide-14"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(15),
    input[name="carousel-css"][value="slide-15"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(16),
    input[name="carousel-css"][value="slide-16"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(17),
    input[name="carousel-css"][value="slide-17"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(18),
    input[name="carousel-css"][value="slide-18"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(19),
    input[name="carousel-css"][value="slide-19"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(20),
    input[name="carousel-css"]:last-of-type:checked ~ .carousel-wrapper .carousel-slide:nth-child(1){
        display: flex;
        opacity: 1;
        transform: translate(100%, 0);
       
    }
    
    
    /* Actions from the radio buttons */
    
    input[name="carousel-css"][value="slide-1"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(1),
    input[name="carousel-css"][value="slide-2"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(2),
    input[name="carousel-css"][value="slide-3"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(3),
    input[name="carousel-css"][value="slide-4"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(4),
    input[name="carousel-css"][value="slide-5"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(5),
    input[name="carousel-css"][value="slide-6"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(6),
    input[name="carousel-css"][value="slide-7"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(7),
    input[name="carousel-css"][value="slide-8"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(8),
    input[name="carousel-css"][value="slide-9"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(9),
    input[name="carousel-css"][value="slide-10"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(10),
    input[name="carousel-css"][value="slide-11"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(11),
    input[name="carousel-css"][value="slide-12"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(12),
    input[name="carousel-css"][value="slide-13"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(13),
    input[name="carousel-css"][value="slide-14"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(14),
    input[name="carousel-css"][value="slide-15"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(15),
    input[name="carousel-css"][value="slide-16"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(16),
    input[name="carousel-css"][value="slide-17"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(17),
    input[name="carousel-css"][value="slide-18"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(18),
    input[name="carousel-css"][value="slide-19"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(19),
    input[name="carousel-css"][value="slide-20"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(20){
        display: flex;
       
        transform: translate(0, 0);
        opacity: 1;
        z-index: 2;
    }
    
    /* Next and prev buttons */
    
    .carousel label[data-value|="slide"]{
        width: 0 !important;
        height: 0 !important;
    }
    
    .carousel label[data-value|="slide"]::before,
    .carousel label[data-value|="slide"]::after{
        content: "";
        display: none;
        position: absolute;
        z-index: 3;
    
        width: 3rem;
        height: 3rem;
    
      
        border-radius: 0.5rem;
        opacity: 1;
    
        cursor: pointer;
    
        top: 0; bottom: 0;
        margin: auto 0;
    
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Im02NDAtODAtNDAwLTQwMCA0MDAtNDAwIDU2IDU3LTM0MyAzNDMgMzQzIDM0M3oiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
    }
    
    .carousel label[data-value|="slide"]::after{
        transform: rotate(180deg);
    }
    
    .carousel label[data-value|="slide"]::before:hover,
    .carousel label[data-value|="slide"]::before:after{
        background-color: rgba(10,10,10,0.8);
    }
    
    input[name="carousel-css"][value="slide-1"]:checked ~ label[data-value|="slide"]:last-of-type::before,
    input[name="carousel-css"][value="slide-2"]:checked ~ label[data-value="slide-1"]::before,
    input[name="carousel-css"][value="slide-3"]:checked ~ label[data-value="slide-2"]::before,
    input[name="carousel-css"][value="slide-4"]:checked ~ label[data-value="slide-3"]::before,
    input[name="carousel-css"][value="slide-5"]:checked ~ label[data-value="slide-4"]::before,
    input[name="carousel-css"][value="slide-6"]:checked ~ label[data-value="slide-5"]::before,
    input[name="carousel-css"][value="slide-7"]:checked ~ label[data-value="slide-6"]::before,
    input[name="carousel-css"][value="slide-8"]:checked ~ label[data-value="slide-7"]::before,
    input[name="carousel-css"][value="slide-9"]:checked ~ label[data-value="slide-8"]::before,
    input[name="carousel-css"][value="slide-10"]:checked ~ label[data-value="slide-9"]::before,
    input[name="carousel-css"][value="slide-11"]:checked ~ label[data-value="slide-10"]::before,
    input[name="carousel-css"][value="slide-12"]:checked ~ label[data-value="slide-11"]::before,
    input[name="carousel-css"][value="slide-13"]:checked ~ label[data-value="slide-12"]::before,
    input[name="carousel-css"][value="slide-14"]:checked ~ label[data-value="slide-13"]::before,
    input[name="carousel-css"][value="slide-15"]:checked ~ label[data-value="slide-14"]::before,
    input[name="carousel-css"][value="slide-16"]:checked ~ label[data-value="slide-15"]::before,
    input[name="carousel-css"][value="slide-17"]:checked ~ label[data-value="slide-16"]::before,
    input[name="carousel-css"][value="slide-18"]:checked ~ label[data-value="slide-17"]::before,
    input[name="carousel-css"][value="slide-19"]:checked ~ label[data-value="slide-18"]::before,
    input[name="carousel-css"][value="slide-20"]:checked ~ label[data-value="slide-19"]::before{
        display: inline-block;
        left: 1rem;
    }
    
    input[name="carousel-css"][value|="slide"]:last-of-type:checked ~ label[data-value="slide-1"]::after,
    input[name="carousel-css"][value="slide-1"]:checked ~ label[data-value="slide-2"]::after,
    input[name="carousel-css"][value="slide-2"]:checked ~ label[data-value="slide-3"]::after,
    input[name="carousel-css"][value="slide-3"]:checked ~ label[data-value="slide-4"]::after,
    input[name="carousel-css"][value="slide-4"]:checked ~ label[data-value="slide-5"]::after,
    input[name="carousel-css"][value="slide-5"]:checked ~ label[data-value="slide-6"]::after,
    input[name="carousel-css"][value="slide-6"]:checked ~ label[data-value="slide-7"]::after,
    input[name="carousel-css"][value="slide-7"]:checked ~ label[data-value="slide-8"]::after,
    input[name="carousel-css"][value="slide-8"]:checked ~ label[data-value="slide-9"]::after,
    input[name="carousel-css"][value="slide-9"]:checked ~ label[data-value="slide-10"]::after,
    input[name="carousel-css"][value="slide-10"]:checked ~ label[data-value="slide-11"]::after,
    input[name="carousel-css"][value="slide-11"]:checked ~ label[data-value="slide-12"]::after,
    input[name="carousel-css"][value="slide-12"]:checked ~ label[data-value="slide-13"]::after,
    input[name="carousel-css"][value="slide-13"]:checked ~ label[data-value="slide-14"]::after,
    input[name="carousel-css"][value="slide-14"]:checked ~ label[data-value="slide-15"]::after,
    input[name="carousel-css"][value="slide-15"]:checked ~ label[data-value="slide-16"]::after,
    input[name="carousel-css"][value="slide-16"]:checked ~ label[data-value="slide-17"]::after,
    input[name="carousel-css"][value="slide-17"]:checked ~ label[data-value="slide-18"]::after,
    input[name="carousel-css"][value="slide-18"]:checked ~ label[data-value="slide-19"]::after,
    input[name="carousel-css"][value="slide-19"]:checked ~ label[data-value="slide-20"]::after{
        display: inline-block;
        right: 1rem;
    }
    
    /* Special functions for the carousel */
    
    .carousel-no-bullets input[name="carousel-css"][value|="slide"]{
        display: none;
    }
    
    .carousel-non-selectable{
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; 
    }
}

@media screen and (min-width: 1280px){
    .carousel{
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: end;
        min-height: 45rem;
        padding: 5rem ;
        margin-top: 5px;
        width: 760px;
        margin-left: 230px; 
    }

    .carousel-slide figcaption{
        background-color: rgba(0,0,0,0.5);
        color: white;
        font-size: 20px;
        position: fixed;
        padding: 10px;
        float: left;
        margin-top: 530px;
        text-align: center;
    }  
}


@media (min-width: 1440px) {
    .carousel{
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: end;
        min-height: 40rem;
        padding: 0.5rem;
        margin-top: 150px;
        width: 960px;
        margin-left: 470px; 
    }
    
    .carousel *{
        margin: 0;
        padding: 0;
    }
    
    .carousel-wrapper{
        height: 600px;
        width: 100%;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
    }

    .carousel-slide img{
        padding: auto;
        max-width: 100%;
        /*border-radius: 15px;*/
        margin-right: -0px;
    }

    .carousel-slide figcaption{
        background-color: rgba(0,0,0,0.5);
        color: white;
        font-size: 20px;
        position: fixed;
        padding: 10px;
        float: left;
        margin-top: 560px;
        text-align: center;
    }
 
    .carousel-slide{
        display: none;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 100%;
    
        position: absolute;
        top: 0;
        left:0;
        z-index: 0;
    
        transform: translate(100%, 0);
        opacity: 0;
    }
    
    /* Hide unnecessary radio buttons */
    
    input[name="carousel-css"][value="slide-20"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(19),
    input[name="carousel-css"][value="slide-19"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(18),
    input[name="carousel-css"][value="slide-18"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(17),
    input[name="carousel-css"][value="slide-17"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(16),
    input[name="carousel-css"][value="slide-16"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(15),
    input[name="carousel-css"][value="slide-15"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(14),
    input[name="carousel-css"][value="slide-14"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(13),
    input[name="carousel-css"][value="slide-13"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(12),
    input[name="carousel-css"][value="slide-12"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(11),
    input[name="carousel-css"][value="slide-11"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(10),
    input[name="carousel-css"][value="slide-10"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(9),
    input[name="carousel-css"][value="slide-9"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(8),
    input[name="carousel-css"][value="slide-8"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(7),
    input[name="carousel-css"][value="slide-7"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(6),
    input[name="carousel-css"][value="slide-6"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(5),
    input[name="carousel-css"][value="slide-5"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(4),
    input[name="carousel-css"][value="slide-4"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(3),
    input[name="carousel-css"][value="slide-3"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(2),
    input[name="carousel-css"][value="slide-2"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(1),
    input[name="carousel-css"][value="slide-1"]:checked ~ .carousel-wrapper .carousel-slide:last-of-type{
        display: flex;
        opacity: 1;
        transform: translate(-100%, 0);
        /*transition: 0.5s transform, 0.1s z-index 0.4s;*/
    }
    
    input[name="carousel-css"][value="slide-1"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(2),
    input[name="carousel-css"][value="slide-2"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(3),
    input[name="carousel-css"][value="slide-3"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(4),
    input[name="carousel-css"][value="slide-4"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(5),
    input[name="carousel-css"][value="slide-5"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(6),
    input[name="carousel-css"][value="slide-6"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(7),
    input[name="carousel-css"][value="slide-7"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(8),
    input[name="carousel-css"][value="slide-8"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(9),
    input[name="carousel-css"][value="slide-9"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(10),
    input[name="carousel-css"][value="slide-10"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(11),
    input[name="carousel-css"][value="slide-11"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(12),
    input[name="carousel-css"][value="slide-12"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(13),
    input[name="carousel-css"][value="slide-13"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(14),
    input[name="carousel-css"][value="slide-14"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(15),
    input[name="carousel-css"][value="slide-15"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(16),
    input[name="carousel-css"][value="slide-16"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(17),
    input[name="carousel-css"][value="slide-17"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(18),
    input[name="carousel-css"][value="slide-18"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(19),
    input[name="carousel-css"][value="slide-19"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(20),
    input[name="carousel-css"]:last-of-type:checked ~ .carousel-wrapper .carousel-slide:nth-child(1){
        display: flex;
        opacity: 1;
        transform: translate(100%, 0);
       
    }
    
    
    /* Actions from the radio buttons */
    
    input[name="carousel-css"][value="slide-1"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(1),
    input[name="carousel-css"][value="slide-2"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(2),
    input[name="carousel-css"][value="slide-3"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(3),
    input[name="carousel-css"][value="slide-4"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(4),
    input[name="carousel-css"][value="slide-5"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(5),
    input[name="carousel-css"][value="slide-6"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(6),
    input[name="carousel-css"][value="slide-7"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(7),
    input[name="carousel-css"][value="slide-8"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(8),
    input[name="carousel-css"][value="slide-9"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(9),
    input[name="carousel-css"][value="slide-10"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(10),
    input[name="carousel-css"][value="slide-11"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(11),
    input[name="carousel-css"][value="slide-12"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(12),
    input[name="carousel-css"][value="slide-13"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(13),
    input[name="carousel-css"][value="slide-14"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(14),
    input[name="carousel-css"][value="slide-15"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(15),
    input[name="carousel-css"][value="slide-16"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(16),
    input[name="carousel-css"][value="slide-17"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(17),
    input[name="carousel-css"][value="slide-18"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(18),
    input[name="carousel-css"][value="slide-19"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(19),
    input[name="carousel-css"][value="slide-20"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(20){
        display: flex;
       
        transform: translate(0, 0);
        opacity: 1;
        z-index: 2;
    }
    
    /* Next and prev buttons */
    
    .carousel label[data-value|="slide"]{
        width: 0 !important;
        height: 0 !important;
    }
    
    .carousel label[data-value|="slide"]::before,
    .carousel label[data-value|="slide"]::after{
        content: "";
        display: none;
        position: absolute;
        z-index: 3;
    
        width: 3rem;
        height: 3rem;
    
      
        border-radius: 0.5rem;
        opacity: 1;
    
        cursor: pointer;
    
        top: 0; bottom: 0;
        margin: auto 0;
    
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Im02NDAtODAtNDAwLTQwMCA0MDAtNDAwIDU2IDU3LTM0MyAzNDMgMzQzIDM0M3oiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
    }
    
    .carousel label[data-value|="slide"]::after{
        transform: rotate(180deg);
    }
    
    .carousel label[data-value|="slide"]::before:hover,
    .carousel label[data-value|="slide"]::before:after{
        background-color: rgba(10,10,10,0.8);
    }
    
    input[name="carousel-css"][value="slide-1"]:checked ~ label[data-value|="slide"]:last-of-type::before,
    input[name="carousel-css"][value="slide-2"]:checked ~ label[data-value="slide-1"]::before,
    input[name="carousel-css"][value="slide-3"]:checked ~ label[data-value="slide-2"]::before,
    input[name="carousel-css"][value="slide-4"]:checked ~ label[data-value="slide-3"]::before,
    input[name="carousel-css"][value="slide-5"]:checked ~ label[data-value="slide-4"]::before,
    input[name="carousel-css"][value="slide-6"]:checked ~ label[data-value="slide-5"]::before,
    input[name="carousel-css"][value="slide-7"]:checked ~ label[data-value="slide-6"]::before,
    input[name="carousel-css"][value="slide-8"]:checked ~ label[data-value="slide-7"]::before,
    input[name="carousel-css"][value="slide-9"]:checked ~ label[data-value="slide-8"]::before,
    input[name="carousel-css"][value="slide-10"]:checked ~ label[data-value="slide-9"]::before,
    input[name="carousel-css"][value="slide-11"]:checked ~ label[data-value="slide-10"]::before,
    input[name="carousel-css"][value="slide-12"]:checked ~ label[data-value="slide-11"]::before,
    input[name="carousel-css"][value="slide-13"]:checked ~ label[data-value="slide-12"]::before,
    input[name="carousel-css"][value="slide-14"]:checked ~ label[data-value="slide-13"]::before,
    input[name="carousel-css"][value="slide-15"]:checked ~ label[data-value="slide-14"]::before,
    input[name="carousel-css"][value="slide-16"]:checked ~ label[data-value="slide-15"]::before,
    input[name="carousel-css"][value="slide-17"]:checked ~ label[data-value="slide-16"]::before,
    input[name="carousel-css"][value="slide-18"]:checked ~ label[data-value="slide-17"]::before,
    input[name="carousel-css"][value="slide-19"]:checked ~ label[data-value="slide-18"]::before,
    input[name="carousel-css"][value="slide-20"]:checked ~ label[data-value="slide-19"]::before{
        display: inline-block;
        left: 1rem;
    }
    
    input[name="carousel-css"][value|="slide"]:last-of-type:checked ~ label[data-value="slide-1"]::after,
    input[name="carousel-css"][value="slide-1"]:checked ~ label[data-value="slide-2"]::after,
    input[name="carousel-css"][value="slide-2"]:checked ~ label[data-value="slide-3"]::after,
    input[name="carousel-css"][value="slide-3"]:checked ~ label[data-value="slide-4"]::after,
    input[name="carousel-css"][value="slide-4"]:checked ~ label[data-value="slide-5"]::after,
    input[name="carousel-css"][value="slide-5"]:checked ~ label[data-value="slide-6"]::after,
    input[name="carousel-css"][value="slide-6"]:checked ~ label[data-value="slide-7"]::after,
    input[name="carousel-css"][value="slide-7"]:checked ~ label[data-value="slide-8"]::after,
    input[name="carousel-css"][value="slide-8"]:checked ~ label[data-value="slide-9"]::after,
    input[name="carousel-css"][value="slide-9"]:checked ~ label[data-value="slide-10"]::after,
    input[name="carousel-css"][value="slide-10"]:checked ~ label[data-value="slide-11"]::after,
    input[name="carousel-css"][value="slide-11"]:checked ~ label[data-value="slide-12"]::after,
    input[name="carousel-css"][value="slide-12"]:checked ~ label[data-value="slide-13"]::after,
    input[name="carousel-css"][value="slide-13"]:checked ~ label[data-value="slide-14"]::after,
    input[name="carousel-css"][value="slide-14"]:checked ~ label[data-value="slide-15"]::after,
    input[name="carousel-css"][value="slide-15"]:checked ~ label[data-value="slide-16"]::after,
    input[name="carousel-css"][value="slide-16"]:checked ~ label[data-value="slide-17"]::after,
    input[name="carousel-css"][value="slide-17"]:checked ~ label[data-value="slide-18"]::after,
    input[name="carousel-css"][value="slide-18"]:checked ~ label[data-value="slide-19"]::after,
    input[name="carousel-css"][value="slide-19"]:checked ~ label[data-value="slide-20"]::after{
        display: inline-block;
        right: 1rem;
    }
    
    /* Special functions for the carousel */
    
    .carousel-no-bullets input[name="carousel-css"][value|="slide"]{
        display: none;
    }
    
    .carousel-non-selectable{
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; 
    }

    
   
}

/* Stilregeln für Bildschirme mit mindestens WQHD-Auflösung */
@media screen and (min-width: 2560px) { 
    .carousel{
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: end;
        min-height: 60rem;
        padding: 0.5rem;
        margin-top: 155px;
        width: 1350px;
       margin-left: 610px;   
    }
    
    .carousel *{
        margin: 0;
        padding: 0;
    }
    
    .carousel-wrapper{
        height: 910px;
        width: 100%;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
    }

    .carousel-slide img{
        padding: auto;
        max-width: 100%;
        /*border-radius: 15px;*/
        margin-right: -0px;
    }

    .carousel-slide figcaption{
        background-color: rgba(0,0,0,0.5);
        color: white;
        font-size: 20px;
        position: fixed;
        padding: 10px;
        float: left;
        margin-top: 865px;
        text-align: center;
    }
  
   }

   @media screen and (min-width: 3840px) {
    .carousel{
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: end;
        min-height: 100rem;
        padding: 0.5rem;
        margin-top: 205px;
        width: 2500px;
       margin-left: 610px;   
    }
 
    .carousel-wrapper{
        height: 1550px;
        width: 100%;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
    }

    .carousel-slide figcaption{
        background-color: rgba(0,0,0,0.5);
        color: white;
        font-size: 20px;
        position: fixed;
        padding: 10px;
        float: left;
        margin-top: 1505px;
        text-align: center;
    }


    


    
   }

   @media screen and (min-width: 7680px) {
    .carousel{
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: end;
        min-height: 100rem;
        padding: 0.5rem;
        margin-top: 205px;
        width: 6500px;
       margin-left: 610px;   
    }
 
    .carousel-wrapper{
        height: 3500px;
        width: 100%;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
    }

    .carousel-slide figcaption{
        background-color: rgba(0,0,0,0.5);
        color: white;
        font-size: 55px;
        position: fixed;
        padding: 10px;
        float: left;
        margin-top: 3080px;
        text-align: center;
    }

   }