.layered-banner {
    position: relative;
}

    .layered-banner-flickity-container .unselectable-default {
        display: none;
    }

.layered-banner-container h2{
    font-size: 18px;
}

.layered-banner-hidden {
    display: none;
}

.layered-banner-display {
    position: relative;
    padding-top: 53%;
}

.layered-banner-flickity-container {
    background: white;
    display: flex;
}

.layered-banner-image-mandatory.layered-banner-base-image {
    position: absolute;
}

.layered-banner-action-callout-desc-link {
    width: 90%;
    padding-left: 10%;
}



.layered-banner-image-mandatory, .layered-banner-image-optional {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    max-height: 100%;
}

.layered-banner-image-mandatory picture img, .layered-banner-image-optional picture img {
    width: 100%;
}


.layered-banner-controls {
    display: inline-flex;
    flex-wrap: wrap;
}

.layered-banner-seletor {
    padding: 10px 30px 10px 0;
}

button.layered-banner-button {
    width: 30px;
    height: 15px;
    background-color: red;
}

    button.layered-banner-button:hover {
        background-color: blue;
    }

.layered-banner-seletor .accordianIcon {
    width: 14px;
    height: 14px;
    display: block;
    position: absolute;
    right: 5%;
    top: 50%;
    -moz-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    -webkit-transform: translateY(-7px);
    transform: translateY(-7px);
    stroke: #f9f9f9;
}

.layered-banner-control-container-titles, .layered-banner-control-container-options {
    position: relative;
    border: 1px solid #d9d9d9;
    margin: 0;
    padding: 0 55px;
    box-sizing: content-box;
}

.layered-banner-control-container-titles {
    width: calc(33.3333333% - 110px);
}
.layered-banner-control-container-options {
    width: calc(66.6666666% - 110px);
}

.layered-banner-control-container-titles {
    border-right: none;
}

.layered-banner-button-container {
    flex: 0 0 auto;
    width: 25%;
    text-align: center;
    margin-bottom: 10px;
}

.layered-banner-selector-option{
    margin-bottom: 5px;
}

.layered-banner-thumb-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2px auto;
}

.flickity-prev-next-button.next {
    right: 5px;
}

.flickity-prev-next-button.previous {
    left: 5px;
}

.layered-banner-flickity-title {
    text-align: center;
}

.layered-banner-primary-carousel-title {
    text-align: center;
}
.layered-banner-flickity-title, .layered-banner-flickity-option {
    font-size: 18px;
}

.layered-banner-flickity-title {
    width: 33%;
}

.layered-banner-flickity-option {
    width: 12%;
}

.layered-banner-title-thumb-container {
    width: 100%;
    text-align: center;
}

.layered-banner-container .flickity-prev-next-button .arrow {
    fill: #888;
}

.layered-banner-control-container-titles .flickity-prev-next-button, .layered-banner-control-container-options .flickity-prev-next-button {
    width: 50px;
    height: 50px;
    background: #eee;
}

.layered-banner-control-container-titles .flickity-prev-next-button:hover, .layered-banner-control-container-options .flickity-prev-next-button:hover {
    background: #ddd;
}

.layered-banner-flickity-container .layered-banner-flickity-container h2, .layered-banner-flickity-container h3, .layered-banner-flickity-container h4, .layered-banner-flickity-container h5, .layered-banner-flickity-container span {
    font-family: Roboto, Helvetica, Arial;
    font-size: 16px;
    line-height: 1;
}

.layered-banner-flickity-container h3 {
    font-weight: 400;
}

.layered-banner-flickity-container h2 {
    padding-bottom: 2px;
    padding-top: 2px;
    text-align: center;
}

.flickity-enabled.is-draggable .flickity-viewport {
    transition: height .5s cubic-bezier(0.39, 0.58, 0.57, 1);
}

.flickity-viewport {
    padding-bottom: 5px;
}

.layered-banner-flickity-title img, .layered-banner-flickity-option img {
    max-width: 100%;
}

.layered-banner-flickity-title.is-selected, .layered-banner-flickity-option-selected {
    border: 1px lightblue solid;
}

    .layered-banner-flickity-title.is-selected.single-item, .layered-banner-flickity-option.is-selected.single-item {
        border: none;
    }

.layered-banner-action-callout-container {
    text-align: center;
    border: 1px solid #bbb;
    padding: 5px;
}
.layered-banner-action-callout-link {
    margin-top: 1%;
}

.layered-banner-action-callout-desc-link {
    display: flex;
    flex-direction: row;
}

.layered-banner-action-callout-desc, .layered-banner-action-callout-link {
    width: 50%;
}

.layered-banner-action-callout-desc-text {
    width: 70%;
    margin: auto;
} 

.layered-banner-action-callout-link {
    text-align: left;
}

.layered-banner-action-callout-title {
    margin-bottom: 10px;
}

.layered-banner-action-callout-link-button {
    background: #555;
    color: #fff;
    padding: 5px 50px;
    border-radius: 8px;
}

.layered-banner-control-options-container {
    display: flex;
}

.layered-banner-controls-main-title {
    text-align: center;
    border: 1px solid #ccc;
    padding: 5px 15%;
}

.layered-banner-option-main-title {
    text-align: center;
}
.layered-banner-action-callout-link-button:hover {
    background: #333;
    color: #ccc;
}

    a.layered-banner-action-callout-link-button:visited {
        color: #fff;
    }

@media screen and ( min-width: 768px ) {
    .layered-banner-flickity-title.is-selected.max-single-item, .layered-banner-flickity-option.is-selected.max-single-item {
        border: none;
    }
}


    @media screen and ( max-width: 767px ) {
        /* disable Flickity for large devices */
        .carousel:after {
            content: 'flickity';
            display: none;
        }
        
        .layered-banner-controls {
            display: block;
            top: 0;
            bottom: 0;
        }

        .layered-banner-control-container-titles {
            border-bottom: none;
            border-right: 1px solid #d9d9d9;
        }

        .layered-banner-thumb-text {
            
        }

        .layered-banner-control-container-titles, .layered-banner-control-container-options {
            width: calc(100% - 110px);
        }
            .layered-banner-flickity-title, .layered-banner-flickity-option {
            width: calc(100% - 100px);
        }

            .layered-banner-flickity-title.is-selected.min-single-item, .layered-banner-flickity-option.is-selected.min-single-item {
                border: none;
            }
        .layered-banner-button-container {
            padding: 0;
            width: 100%;
        }
        .layered-banner-flickity-container .layered-banner-flickity-container h2, .layered-banner-flickity-container h3, .layered-banner-flickity-container h4, .layered-banner-flickity-container h5, .layered-banner-flickity-container span {
            font-size: 3.5vw;
        }
       
        .layered-banner-flickity-container {
            display: block;
        }

        .layered-banner-control-options-container {
            display: block;
        }
        .layered-banner-action-callout-desc, .layered-banner-action-callout-link {
            width: 100%;
        }
        .layered-banner-action-callout-desc-link {
            display: block;
        }
        .layered-banner-action-callout-desc-text{
            width: 100%;
        } 
        .layered-banner-action-callout-link {
            text-align: center;
            margin: 10px;
        }
    }