body
{
    width:100%;
    margin:0px;
}
panorama,
panorama *
{
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}
panorama
{
    align-items:     center;
    cursor:          move;
    display:         flex;
    flex-flow:       column;
    height:          600px;
    justify-content: flex-end;
}

panorama slide
{
    display: none;
}

panorama > controller
{
    align-content:   flex-end;
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    margin:          0 0 1em;   
    -webkit-touch-callout: none;
    -webkit-user-select:   none;
    -khtml-user-select:    none;
    -moz-user-select:      none;
    -ms-user-select:       none;
    user-select:           none;
}

panorama > controller,
panorama > controller button
{
    color: #FFFFFF;
}

panorama > controller button
{
    background:  rgba(0, 0, 0, 0.75);
    border:      none;
    cursor:      pointer;
    display:     block;
    flex-basis:  2em;
    font-size:   2em;
    padding:     0 0 0.25em;
}

panorama > controller button.prev
{
    border-radius: 0 0 0 5px;
}

panorama > controller button.next
{
    border-radius: 0 0 5px 0;
}

panorama > controller > span
{
    background:    rgba(0, 0, 0, 0.75);
    border-radius: 5px;
    flex-grow:     1;
    flex-basis:    100%;
    font-size:     2em;
    padding:       0.25em 0;
    text-align:    center;
}

panorama > controller .subtitle:before
{
    content:       "";
    font-size:     small;
    font-style:    italic;
    padding-right: 4px;
}


@media (max-width: 600px)
{
    panorama
    {
        background-size: auto 300px;
        height:          300px;
    }

    panorama > controller > span
    {
        font-size: 1em;
    }

    panorama > controller button
    {
        flex-basis: 30%;
        font-size:  1em;
    }
}

panorama.no-js
{
    animation-duration:        5000s;
    animation-iteration-count: infinite;
    animation-name:            panorama-no-js-scroll;
    animation-timing-function: linear;

    cursor: auto;
}

panorama.no-js > controller
{
    margin: 0;
}

panorama.no-js > controller > span
{
    border-radius: 5px 5px 0 0;
    padding:       0.25em;
}

panorama.no-js > controller button
{
    display: none;
}

@keyframes panorama-no-js-scroll
{
    from
    {
        background-position: 100000px 0;
    }

    to
    {
        background-position: -100000px 0;
    }
}