#blockEditor {
    position: relative;
}

.beContainerRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    --column-gap: 5%;
}

.beContainerRow {
}

.beContainerColumn {
}

.beContainerBlock {
    position: relative;
    clear: both;
}

/* Default margin/paddings */
.beContainerBlock {
    margin-bottom: 20px;
}

.beField p:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.hasPropertyBackgroundColor {
    color: #fff;
    padding: 15px 20px 15px 20px;
}

.hasPropertyBackgroundColor h1,
.hasPropertyBackgroundColor h2,
.hasPropertyBackgroundColor h3,
.hasPropertyBackgroundColor h4,
.hasPropertyBackgroundColor h5,
.hasPropertyBackgroundColor h6 {
    color: #fff;
}

.hasPropertyBackgroundColor a,
.hasPropertyBackgroundColor a:visited {
    color: #fff;
}

#main .hasPropertyBackgroundColor li:before {
    background-color: #fff;
}

[data-columncount="2"] > .beContainerColumn {
    /* width: calc((100% / columnCount) - Gap + (Gap / columnCount)); */
    width: calc((100% / 2) - var(--column-gap) + (var(--column-gap) / 2));
}

[data-columncount="3"] > .beContainerColumn {
    width: calc((100% / 3) - var(--column-gap) + (var(--column-gap) / 3));
}

[data-columncount="4"] > .beContainerColumn {
    width: calc((100% / 4) - var(--column-gap) + (var(--column-gap) / 4));
}

[data-columncount="5"] > .beContainerColumn {
    width: calc((100% / 5) - var(--column-gap) + (var(--column-gap) / 5));
}

[data-columncount="6"] > .beContainerColumn {
    width: calc((100% / 6) - var(--column-gap) + (var(--column-gap) / 6));
}

[data-columncount="2"] > .beContainerColumn.beCol-1,
[data-columncount="3"] > .beContainerColumn.beCol-1 {
    width: calc((100% / 6) - var(--column-gap) + (var(--column-gap) / 6));
}

[data-columncount="2"] > .beContainerColumn.beCol-2,
[data-columncount="3"] > .beContainerColumn.beCol-2 {
    width: calc((100% / 6 * 2) - var(--column-gap) + (var(--column-gap) / 6 * 2));
}

[data-columncount="2"] > .beContainerColumn.beCol-3,
[data-columncount="3"] > .beContainerColumn.beCol-3 {
    width: calc((100% / 6 * 3) - var(--column-gap) + (var(--column-gap) / 6 * 3));
}

[data-columncount="2"] > .beContainerColumn.beCol-4,
[data-columncount="3"] > .beContainerColumn.beCol-4 {
    width: calc((100% / 6 * 4) - var(--column-gap) + (var(--column-gap) / 6 * 4));
}

[data-columncount="2"] > .beContainerColumn.beCol-5,
[data-columncount="3"] > .beContainerColumn.beCol-5 {
    width: calc((100% / 6 * 5) - var(--column-gap) + (var(--column-gap) / 6 * 5));
}

@media screen and (max-width: 767.9px) {

    .beContainerRow {
        display: block;
    }

    [data-columncount="2"] > .beContainerColumn,
    [data-columncount="2"] > .beContainerColumn.beCol-1,
    [data-columncount="2"] > .beContainerColumn.beCol-2,
    [data-columncount="2"] > .beContainerColumn.beCol-3,
    [data-columncount="2"] > .beContainerColumn.beCol-4,
    [data-columncount="2"] > .beContainerColumn.beCol-5
    {
        width: 100%;
    }
}


/* ImageSlider */


.swiper-slide img {
    width: 100%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.swiper-button-next, .swiper-button-prev {
    color: #fff !important;
}

.beItem[data-itemname="ImageSlider"] {
    margin-bottom: 50px;
    overflow: hidden;
}

/* End ImageSlider */

/* ImageGallery */

figure {
    margin: 0;
}

.beImageGalleryImagesContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.beImageGalleryImageContainer {
    width: Calc(100% / 4 - (30px / 4 * 3));
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.beContainerColumn .beImageGalleryImagesContainer {
    gap: 10px;
}

.beContainerColumn .beImageGalleryImageContainer {
    width: Calc(100% / 2 - 5px);
}

.beContainerColumn.beCol-4 .beImageGalleryImageContainer,
.beContainerColumn.beCol-5 .beImageGalleryImageContainer {
    width: Calc(100% / 3 - 10px);
}


.beImageGalleryImageContainer img {
    vertical-align: top;
    /* Part below needed if portrait images should be cut above and below. Without this the image is only cut below*/
    object-fit: cover;
    width: 100%;
    max-height: 100%;
    aspect-ratio: 4/3;
}

.beImageGalleryImageDescription {
    padding: 5px 10px 5px 10px;
    font-size: 16px;
    position: absolute;
    bottom: -40px;
    background-color: rgba(255,255,255,0.9);
    right: 0;
    left: 0;
    transition: all 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.beImageGalleryImageContainer:hover .beImageGalleryImageDescription {
    bottom: 0;
}

.beImageGalleryImageContainer a,
.beImageGalleryImageContainer a:visited,
.beImageGalleryImageContainer a:hover {
    text-decoration: none;
    color: #4C86A5;
}

@media screen and (max-width: 1279.9px) {

    .beImageGalleryImageContainer {
        width: Calc(100% / 3 - (30px / 3 * 2));
    }

    .beContainerColumn .beImageGalleryImagesContainer {
        gap: 10px;
    }

    .beContainerColumn .beImageGalleryImageContainer {
        width: Calc(100% / 2 - 5px);
    }
}

@media screen and (max-width: 1023.9px) {

    .beImageGalleryImagesContainer {
        gap: 10px;
    }

    .beImageGalleryImageContainer {
        width: Calc(100% / 2 - 5px);
    }

    .beContainerColumn .beImageGalleryImageContainer {
        width: Calc(100% / 2 - 5px);
    }

    .beContainerColumn.beCol-4 .beImageGalleryImageContainer,
    .beContainerColumn.beCol-5 .beImageGalleryImageContainer {
        width: Calc(100% / 2 - 10px);
    }

    .beContainerColumn.beCol-1 .beImageGalleryImagesContainer,
    .beContainerColumn.beCol-2 .beImageGalleryImagesContainer,
    .beContainerColumn.beCol-3 .beImageGalleryImagesContainer {
        gap: 0;
        display: block;
    }

    .beContainerColumn.beCol-1 .beImageGalleryImageContainer,
    .beContainerColumn.beCol-2 .beImageGalleryImageContainer,
    .beContainerColumn.beCol-3 .beImageGalleryImageContainer {
        width: 100%;
        margin-bottom: 30px;
    }
}


@media screen and (max-width: 580px) {

    .beImageGalleryImagesContainer {
        gap: 0;
        display: block;
    }

    .beImageGalleryImageContainer,
    .beContainerColumn .beImageGalleryImageContainer,
    .beContainerColumn.beCol-4 .beImageGalleryImageContainer,
    .beContainerColumn.beCol-5 .beImageGalleryImageContainer {
        width: 100%;
        margin-bottom: 30px;
    }
}

/* End ImageGallery */


/* Card */

.beItemContainer[data-itemname="Card"] {
    display: flex;
    flex-wrap: wrap;
    row-gap: 30px;
    column-gap: 30px;
}

.beItem[data-itemname="Card"] {
    width: Calc((100% - 60px) / 3);
    box-shadow: rgba(50, 50, 93, 0.20) 0px 13px 27px -5px, rgba(0, 0, 0, 0.2) 0px 8px 16px -8px;
    position: relative;
}

.beItem[data-itemname="Card"] .beFieldDataTypecKEditorText {
    padding: 15px 15px 15px 15px;
}

.beItem[data-itemname="Card"] .beFieldDataTypeimageWithControls img {
    vertical-align: top;
    object-fit: cover;
    width: 100%;
    max-height: 100%;
    aspect-ratio: 16/9;
}

.beItem[data-itemname="Card"] .beItemLink {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.beItem[data-itemname="Card"] .beItemLink,
.beItem[data-itemname="Card"] .beItemLink:visited {
    color: inherit;
    text-decoration: none;
}

.beItem[data-itemname="Card"] .beItemLink:hover {
    text-decoration: none;
}

.beItem[data-itemname="Card"].hasOverlayLink:hover {
    background-color: #F4F4F4;
}

.beItem[data-itemname="Card"] .beFieldDataTypeimageWithControls
{
    overflow: hidden;
}


.beItem[data-itemname="Card"] img {
    transition: all 0.3s;
}

.beItem[data-itemname="Card"].hasOverlayLink:hover img {
    /* opacity: 0.65;*/
    transform: scale(1.05);
}

.beItem[data-itemname="Card"] .beItemContent {
    position: relative;
    pointer-events: none;
    z-index: 1;
}

.beItem[data-itemname="Card"] .beItemContent a {
    pointer-events: all;
    position: relative;
}

@media screen and (max-width: 1023.9px) {
    .beItem[data-itemname="Card"] {
        width: Calc((100% - 30px) / 2);
    }
}

@media screen and (max-width: 450px) {

    .beItem[data-itemname="Card"] {
        width: 100%;
    }
}

/* End Card*/

/* Form */

.form-group.plaincontent {
    padding: 0;
    margin: 0;
}

.formFieldPlainContent p:last-child {
    padding: 0;
    margin: 0;
}

.beItem[data-itemname="Form"] .inputContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.beItem[data-itemname="Form"] .form-group.radio {
    margin-bottom: 17px;
}

@media screen and (max-width: 450px) {

    .beItem[data-itemname="Form"] .inputContainer {
        display: block;
    }

    .beItem[data-itemname="Form"] .form-group {
        width: 100% !important;
    }

}

/* End Form*/