/* Color themes */

.component-2_column_h2_title.dark_grey_full_width .row,
.component-2_column_h2_title.dark_grey_container .row{background-color: #6B6F7B;}
.component-2_column_h2_title.light_grey_full_width .row,
.component-2_column_h2_title.light_grey_container .row{background-color: #F7F7F8;}
.component-2_column_h2_title.green_full_width .row,
.component-2_column_h2_title.green_container .row{background-color: #D5DD3C;}
.component-2_column_h2_title.white_full_width .row,
.component-2_column_h2_title.white_container .row{background-color: #FFFFFF;}

/* Carousel */

    /* Indicators */

.indicator-container{
    position: absolute;
    top: 0;
    left: 25%;
    z-index: 2;
    width: 50%;
    height: 100%;
}
.indicator-container.left{left: 0;}
.indicator-container.right{left: 50%;}
.component-2_column_h2_title .carousel-indicators{bottom: 0;}

/* Content */

    /* Text */

.component-2_column_h2_title .mce{
    /* Text container */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
.component-2_column_h2_title .text-left{
    padding: 30px;
}
.component-2_column_h2_title .text-right{
    padding: 30px;
    text-align: left !important; /* Overriding default bootstrap behaviour */
}
.component-2_column_h2_title .button{margin-bottom: 10px;}

    /* Image */

.component-2_column_h2_title .image-container > div{
    /* Background-image */
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

@media screen and (max-width: 576px){
    .component-2_column_h2_title.container{padding: 0;}
    .component-2_column_h2_title .mce{
        /* Padding needs to be set individually due to javascript
            overriding some rules in certain conditions */
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 20px;
        padding-bottom: 40px;
    }
    .component-2_column_h2_title .mce .row{justify-content: center;}
}