*{
    box-sizing: border-box;
}


.carousel {
    background: #222;
    /*margin: 0px 10px 0px 10px;*/
    /*padding: 10px;*/
}

.carousel-cell {
    width: 100%;
     /*margin-right: 10px;*/
    /* center images in cells with flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
}

@media all and (min-width:993px) {
    .carousel-cell {
        height: 550px;
    }
}

@media all and (max-width:992px) {
    .carousel-cell {
        height: 400px;
    }
}

@media all and (max-width:770px) {
    .carousel-cell {
        height: 250px;
    }
}

.carousel.is-fullscreen .carousel-cell {
    height: 100%;
}

.carousel-cell-image {
    position: absolute;
    width: 75%;
    text-align: center;
    /*top: 50%;*/
}

@media all and (min-width:993px) {
/*    .carousel-cell-image {
        left: 50%;
        transform: translate(-50%, -50%);
    }*/
    .carousel-cell-image > img {
        height: 550px !important;
    }
}

@media all and (max-width:992px) {
/*    .carousel-cell-image {
        left: 50%;
        transform: translate(-50%, -50%);
    }*/
    .carousel-cell-image > img {
        height: 400px !important;
    }
}

@media all and (max-width:770px) {
/*    .carousel-cell-image {
        left: 50%;
        transform: translate(-50%, -50%);
    }*/
    .carousel-cell-image > img {
        height: 250px !important;
    }
}

.carousel.is-fullscreen .carousel-cell-image {
    max-width: 100%;
}

.carousel-cell-bg-image {
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);
    /* Full height/width */
    height: 100%;
    width: 100%;
    /* Center and scale the image nicely */
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.carousel-nav {
    padding: 10px;
}

.carousel-nav .nav-cell {
    margin: 3px;
    opacity: 0.4;
}

    .carousel-nav .is-nav-selected {
        opacity: 1;
    }


/* position dots in carousel */
.flickity-page-dots {
    bottom: 10px;
}
    /* white circles */
    .flickity-page-dots .dot {
        width: 12px;
        height: 12px;
        opacity: 1;
        background: white;
    }
        /* fill-in selected dot */
        .flickity-page-dots .dot.is-selected {
            background: #fcb316;
        }