@media all  {
    .carousel  {
        background-color: transparent;/* grey;*/
        position: relative;
        display: flex;
        justify-content: center;
        align-items: end;
        min-height: 15rem;
        padding: .5rem;
    }
    .carousel * {
        margin: 0;
        padding: 0;
    }
    .carousel-wrapper  {
        height: 100%;
        width: 100%;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
    }
    input[name=carousel-css]  {
        -webkit-appearance: none;
        appearance: none;
        margin: .125rem;
        border: 1px solid #969696;
        background-color:  #fafafa;
        width: 2rem;
        height: 2rem;
        cursor: pointer;
        border-radius: 50%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-left: 20px;
        margin-right: 20px;
        z-index: 3;
    }
    input[name=carousel-css]:checked  {
        display: inline-flex;
    }
    input[name=carousel-css]:checked::before  {
        content: "";
        background-color:  #6495ed;
        border-radius: 50%;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
    }
    .carousel label[data-value|=slide]  {
        width: 0!important;
        height: 0!important;
    }
    .carousel label[data-value|=slide]::after,  .carousel label[data-value|=slide]::before  {
        content: "";
        display: none;
        position: absolute;
        z-index: 3;
        width: 3rem;
        height: 3rem;
        background-color: rgba(10,  10,  10,  .5);
        border-radius: .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:after,  .carousel label[data-value|=slide]::before:hover  {
        background-color:  rgba(10,  10,  10,  .8);
    }
    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-1]:checked~label[data-value|=slide]:last-of-type::before,  input[name=carousel-css][value=slide-20]:checked~label[data-value=slide-19]::before,  input[name=carousel-css][value=slide-21]:checked~label[data-value=slide-20]::before,  input[name=carousel-css][value=slide-22]:checked~label[data-value=slide-21]::before,  input[name=carousel-css][value=slide-23]:checked~label[data-value=slide-22]::before,  input[name=carousel-css][value=slide-24]:checked~label[data-value=slide-23]::before,  input[name=carousel-css][value=slide-25]:checked~label[data-value=slide-24]::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  {
        display:  inline-block;
        left:  1rem;
    }
    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,  input[name=carousel-css][value=slide-1]:checked~label[data-value=slide-2]::after,  input[name=carousel-css][value=slide-20]:checked~label[data-value=slide-21]::after,  input[name=carousel-css][value=slide-21]:checked~label[data-value=slide-22]::after,  input[name=carousel-css][value=slide-22]:checked~label[data-value=slide-23]::after,  input[name=carousel-css][value=slide-23]:checked~label[data-value=slide-24]::after,  input[name=carousel-css][value=slide-24]:checked~label[data-value=slide-25]::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]:last-of-type:checked~label[data-value=slide-1]::after  {
        display:  inline-block;
        right:  1rem;
    }
    .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;
    }
    input[name=carousel-css][value=slide-10]:checked~.carousel-wrapper .carousel-slide:nth-child(9),  input[name=carousel-css][value=slide-11]:checked~.carousel-wrapper .carousel-slide:nth-child(10),  input[name=carousel-css][value=slide-12]:checked~.carousel-wrapper .carousel-slide:nth-child(11),  input[name=carousel-css][value=slide-13]:checked~.carousel-wrapper .carousel-slide:nth-child(12),  input[name=carousel-css][value=slide-14]:checked~.carousel-wrapper .carousel-slide:nth-child(13),  input[name=carousel-css][value=slide-15]:checked~.carousel-wrapper .carousel-slide:nth-child(14),  input[name=carousel-css][value=slide-16]:checked~.carousel-wrapper .carousel-slide:nth-child(15),  input[name=carousel-css][value=slide-17]:checked~.carousel-wrapper .carousel-slide:nth-child(16),  input[name=carousel-css][value=slide-18]:checked~.carousel-wrapper .carousel-slide:nth-child(17),  input[name=carousel-css][value=slide-19]:checked~.carousel-wrapper .carousel-slide:nth-child(18),  input[name=carousel-css][value=slide-1]:checked~.carousel-wrapper .carousel-slide:last-of-type,  input[name=carousel-css][value=slide-20]:checked~.carousel-wrapper .carousel-slide:nth-child(19),  input[name=carousel-css][value=slide-21]:checked~.carousel-wrapper .carousel-slide:nth-child(20),  input[name=carousel-css][value=slide-22]:checked~.carousel-wrapper .carousel-slide:nth-child(21),  input[name=carousel-css][value=slide-23]:checked~.carousel-wrapper .carousel-slide:nth-child(22),  input[name=carousel-css][value=slide-24]:checked~.carousel-wrapper .carousel-slide:nth-child(23),  input[name=carousel-css][value=slide-25]:checked~.carousel-wrapper .carousel-slide:nth-child(24),  input[name=carousel-css][value=slide-2]:checked~.carousel-wrapper .carousel-slide:first-child,  input[name=carousel-css][value=slide-3]:checked~.carousel-wrapper .carousel-slide:nth-child(2),  input[name=carousel-css][value=slide-4]:checked~.carousel-wrapper .carousel-slide:nth-child(3),  input[name=carousel-css][value=slide-5]:checked~.carousel-wrapper .carousel-slide:nth-child(4),  input[name=carousel-css][value=slide-6]:checked~.carousel-wrapper .carousel-slide:nth-child(5),  input[name=carousel-css][value=slide-7]:checked~.carousel-wrapper .carousel-slide:nth-child(6),  input[name=carousel-css][value=slide-8]:checked~.carousel-wrapper .carousel-slide:nth-child(7),  input[name=carousel-css][value=slide-9]:checked~.carousel-wrapper .carousel-slide:nth-child(8)  {
        display:  flex;
        opacity:  1;
        transform:  translate(-100%,  0);
        transition:  transform .5s,  z-index .1s .4s;
    }
    input[name=carousel-css]:last-of-type:checked~.carousel-wrapper .carousel-slide:first-child,  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][value=slide-1]:checked~.carousel-wrapper .carousel-slide:nth-child(2),  input[name=carousel-css][value=slide-20]:checked~.carousel-wrapper .carousel-slide:nth-child(21),  input[name=carousel-css][value=slide-21]:checked~.carousel-wrapper .carousel-slide:nth-child(22),  input[name=carousel-css][value=slide-22]:checked~.carousel-wrapper .carousel-slide:nth-child(23),  input[name=carousel-css][value=slide-23]:checked~.carousel-wrapper .carousel-slide:nth-child(24),  input[name=carousel-css][value=slide-24]:checked~.carousel-wrapper .carousel-slide:nth-child(25),  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)  {
        display: flex;
        opacity:  1;
        transform: translate(100%,  0);
        transition: transform .5s,  z-index .1s .4s;
    }
    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-1]:checked~.carousel-wrapper .carousel-slide:first-child,  input[name=carousel-css][value=slide-20]:checked~.carousel-wrapper .carousel-slide:nth-child(20),  input[name=carousel-css][value=slide-21]:checked~.carousel-wrapper .carousel-slide:nth-child(21),  input[name=carousel-css][value=slide-22]:checked~.carousel-wrapper .carousel-slide:nth-child(22),  input[name=carousel-css][value=slide-23]:checked~.carousel-wrapper .carousel-slide:nth-child(23),  input[name=carousel-css][value=slide-24]:checked~.carousel-wrapper .carousel-slide:nth-child(24),  input[name=carousel-css][value=slide-25]:checked~.carousel-wrapper .carousel-slide:nth-child(25),  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)  {
        display:  flex;
        transition:  transform .5s;
        transform:  translate(0,  0);
        opacity:  1;
        z-index:  2;
    }
    .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;
    }
}