.kiosk-nav {
    top: -42px;
    transition: top linear 0.25s;
}

.kiosk-nav:hover {
    top: 0;
    transition: top linear 0.25s;
}

.kiosk-canvas {
    position: relative;
    top: -50px;
    font-family: 'Sense','Georgia','Arial',sans-serif;
}

.number {
    font-family: 'Arial',sans-serif;
}

.kiosk-banner {
    height: 10vh;
    overflow: hidden;
}

.kiosk-banner > img.logo {
    height: 10vh;
}

.kiosk-poster {
 /*   height: calc(90vh - 160px); */
    height: 100%;
}

.kiosk-drop {
    margin-left: 140px;
    overflow: visible !important;
}



/* FLEX */
.flex-grid-kiosk-container {
    justify-content: space-between;
    display: grid !important;
}

.flex-grid-kiosk-container > div {
    overflow: hidden !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center !important;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
}


.grid-kiosk-4x9 {
    grid-template-columns: auto auto auto auto !important;
    grid-template-rows: auto auto auto auto auto auto auto auto auto !important;
}

.grid-kiosk-12x1 {
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto !important;
    grid-template-rows: auto !important;
}

/* Carousel Fadeout Transition Override (default too abrupt)*/

/*
.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: 0.4s;          /* transition out */
/*    transition-property: opacity;
}

    .carousel-fade .carousel-item.active,
    .carousel-fade .carousel-item-next.carousel-item-left,
    .carousel-fade .carousel-item-prev.carousel-item-right {
        opacity: 1;
        transition-duration: 1.2s;      /* transition in */
/*        transition-property: opacity;
    }

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
    opacity: 0;
    transition-duration: 0.4s;          /* transition out */
/*   transition-property: opacity;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
    transform: translateX(0);
    transform: translate3d(0, 0, 0);
}
*/

@media (max-width: 575.98px) {

    .kiosk-nav {
        top: 0;
    }

    .kiosk-canvas {
        top: 0;
    }

    #FSBbtn {
        display: none;
    }


    .kiosk-banner {
        height: 8vh;
    }

    .kiosk-banner > img.logo {
        height: 6vh;
    }

    .kiosk-poster {
        /*       height: calc(90vh - 210px) !important;
        width: 96vw; */
        width: 94%;
    }

    .kiosk-drop {
        margin-left: -130px;
        overflow: visible !important;
    }



}

@media (min-width: 768px) {
    /* confirm width = sm */

    #FSBbtn {
        display: normal;
    }
}