/*! Spectre.css Experimentals v0.5.3 | MIT License | github.com/picturepan2/spectre */
.carousel
{position: relative; z-index: 1; display: block; overflow: hidden; width: 100%; 

    background: #d5dbe4; -webkit-overflow-scrolling: touch;
}

.carousel .carousel-container
{position: relative; left: 0; 

    height: 100%;
}

.carousel .carousel-container::before
{display: block; padding-bottom: 56.25%; 

    content: '';
}

.carousel .carousel-container .carousel-item
{position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; 

    animation: carousel-slideout 1s ease-in-out 1; opacity: 0;
}

.carousel .carousel-container .carousel-item:hover .item-prev,
.carousel .carousel-container .carousel-item:hover .item-next
{
    opacity: 1;
}

.carousel .carousel-container .item-prev,
.carousel .carousel-container .item-next
{position: absolute; z-index: 100; top: 50%; transition: all .4s ease; transform: translateY(-50%); opacity: 0; color: #c3cad8; border-color: rgba(195, 202, 216, .5); 
    background: rgba(195, 202, 216, .25);
}

.carousel .carousel-container .item-prev
{
    left: 1rem;
}

.carousel .carousel-container .item-next
{
    right: 1rem;
}

.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
.carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
.carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
.carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4)
{z-index: 100; 

    animation: carousel-slidein .75s ease-in-out 1; opacity: 1;
}

.carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
.carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
.carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
.carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4)
{
    color: #c3cad8;
}

.carousel .carousel-nav
{position: absolute; z-index: 100; 
    bottom: 1rem; left: 50%; display: -ms-flexbox; display: flex; width: 10rem; transform: translateX(-50%); -ms-flex-pack: center; justify-content: center;
}

.carousel .carousel-nav .nav-item
{position: relative; display: block; max-width: 2.5rem; height: 1.6rem; margin: .2rem; 

    color: rgba(195, 202, 216, .5); -ms-flex: 1 0 auto;     flex: 1 0 auto;
}

.carousel .carousel-nav .nav-item::before
{position: absolute; top: .5rem; display: block; width: 100%; height: .1rem; content: ''; 

    background: currentColor;
}

@keyframes carousel-slidein
{
    0%
    {
        transform: translateX(100%);
    }
    100%
    {
        transform: translateX(0);
    }
}

@keyframes carousel-slideout
{
    0%
    {
        transform: translateX(0); 

        opacity: 1;
    }
    100%
    {
        transform: translateX(-50%); 

        opacity: 1;
    }
}

.off-canvas
{position: relative; 

    display: -ms-flexbox;    display: flex; width: 100%; height: 100%; -ms-flex-flow: nowrap;     flex-flow: nowrap;
}

.off-canvas .off-canvas-toggle
{position: absolute; z-index: 1; 

    display: block; transition: none;
}

.off-canvas .off-canvas-sidebar
{position: fixed; z-index: 200; top: 0; bottom: 0; left: 0; overflow-y: auto; min-width: 10rem; transition: transform .25s ease; transform: translateX(-100%); 

    background: #d5dbe4;
}

.off-canvas .off-canvas-content
{height: 100%; padding: 1rem 1rem 1rem 4rem; 

    -ms-flex: 1 1 auto;        flex: 1 1 auto;
}

.off-canvas .off-canvas-overlay
{position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; width: 100%; height: 100%; border-color: transparent; border-radius: 0; 
    background: rgba(41, 49, 64, .1);
}

.off-canvas .off-canvas-sidebar:target,
.off-canvas .off-canvas-sidebar.active
{
    transform: translateX(0);
}

.off-canvas .off-canvas-sidebar:target ~ .off-canvas-overlay,
.off-canvas .off-canvas-sidebar.active ~ .off-canvas-overlay
{z-index: 100; 

    display: block;
}

@media (min-width: 960px)
{
    .off-canvas.off-canvas-sidebar-show .off-canvas-toggle
    {
        display: none;
    }
    .off-canvas.off-canvas-sidebar-show .off-canvas-sidebar
    {position: relative; transform: none; 

        -ms-flex: 0 0 auto;            flex: 0 0 auto;
    }
    .off-canvas.off-canvas-sidebar-show .off-canvas-overlay
    {
        display: none !important;
    }
}