#slideshow {

    overflow: hidden;

    height: 300px;

    width: 300px;

    margin: 0 auto;

    border-radius: 6px;

}



#slideshow2 {

    overflow: hidden;

    height: 300px;

    width: 300px;

    margin: 0 auto;

    border-radius: 6px;

}



#slideshow3 {

    overflow: hidden;

    height: 300px;

    width: 300px;

    margin: 0 auto;

    border-radius: 6px;

}



#regshow {

    overflow: hidden;

    height: 300px;

    width: 300px;

    margin: 0 auto;

    border-radius: 6px;

}



/* Style each of the sides 

    with a fixed width and height */

.slide {

    float: left;

    height: 300px;

    width: 300px;

    border-radius: 6px;

}



.reg {

    float: left;

    height: 300px;

    width: 300px;

    border-radius: 6px;

}



.slide-wrapper {

    /* Calculate the total width on the

      basis of number of slides */

    width: calc(300px * 3);

    /* Specify the animation with the

      duration and speed */

    animation: slide 20s ease infinite;

    border-radius: 6px;

}



.reg-wrapper {

    /* Calculate the total width on the

      basis of number of slides */

    width: calc(300px * 10);

    /* Specify the animation with the

      duration and speed */

    animation: reg 30s ease infinite;

    border-radius: 6px;

}



/* Define the animation 

    for the slideshow */





@keyframes reg {



    10% {

        margin-left: 0px;

    }



    20% {

        margin-left: calc(-300px * 1);

    }



    30% {

        margin-left: calc(-300px * 2);

    }



    40% {

        margin-left: calc(-300px * 3);

    }



    50% {

        margin-left: calc(-300px * 4);

    }



    60% {

        margin-left: calc(-300px * 5);

    }



    70% {

        margin-left: calc(-300px * 6);

    }



    80% {

        margin-left: calc(-300px * 7);

    }



    90% {

        margin-left: calc(-300px * 8);

    }



    100% {

        margin-left: calc(-300px * 9);

    }

}



@keyframes slide {



    20% {

        margin-left: 0px;

    }



    40% {

        margin-left: calc(-300px * 1);

    }



    60% {

        margin-left: calc(-300px * 2);

    }

}









details {

    background: black;

    color: white;

    padding: 15px;

    margin-bottom: 2px;

    border-radius: 25px;

}



summary {

    cursor: pointer;

    font-weight: 500;

    font-size: 1.2em;

}