/* text alignment */
.blocks-content .left {
    text-align: left;
}

.blocks-content .center {
    text-align: center;
}

.blocks-content .right {
    text-align: right;
}


/* text colors */
.blocks-content .darkblue{
    color: #194268;
}

.blocks-content .white {
    color: white;
}


/* image sizes */
.blocks-content .small {
    height: 30vw !important;
}

.blocks-content .tall {
    height: 60vw !important;
}

.blocks-content .narrow {
    /* width: 30vw !important; */
    flex: 1;
    max-width: 30vw;
}

.blocks-content .wide {
    /* width: 80vw !important; */
    flex: 2;
}

/* spacers */
.blocks-content .spacer {
    height: 5vw;
    width: 100%;
}

/* block vertical alignment */
.blocks-content .bottom {
    justify-content: end;
}

/* background */
.block-container .background {
    position: absolute;
    background-color: #C2D7E5;
    width: 100%;
    height: 36vw;
    overflow: hidden; 
}

    .block-container .background div {
        height: 100%;
        position: relative;
        left: 0vw;
        top: 0vw;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

/* empty block content */
.block-container.selected .block-content-container.empty::after { 
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    /* align-items: flex-end; */
    font-size: 4vw;
    content: '+';
    width: 100%;
    height: 6vw;
    margin-top: 10vw;
    font-family: Poppins;
    opacity: 0.2;
    cursor: pointer;
}

    .block-container.selected .block-content-container.empty:hover::after {
        content: 'add content';
    }

/* add block */
.blocks-content .add-block {
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3vw;
    font-weight: bold;
    background-color: #C2D7E5;
    opacity: 0.2;
    cursor: pointer;
}

    .blocks-content .add-block:hover {
        opacity: 0.4;
    }

    .blocks-content .add-block.first {
        margin-bottom: 2rem;
    }

    .blocks-content .add-block.last {
        margin-top: 2rem;
    }


/* block template */
.block-container.template {
    display: none;
}


/* block content */
.block-content .identification {
    margin: -1vw 0px;
}


/* MARGINS IN CLASSES GIETEN "spacers" */
/* wanneer content top # krijgt ook bijtellen bij de margin bottom */