:root{
    --min-box-width: 300px;
}
.include-page-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.include-page {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    width: 90%;
    min-width: var(--min-box-width);
    max-width: 1200px;
}

.content-box {
    display: flex;
    flex-direction: column;
/*    background-color: white;*/
    box-sizing: border-box;
    padding: 10px;
/*    min-height: 300px;*/
/*    border: 1px solid black;*/
}

.content-box-1, .content-box-2, .content-box-3 {
/*    background-color: white;*/
    box-sizing: border-box;
    padding: 10px;
/*    min-height: 300px;*/
/*    border: 1px solid black; */
}

.box-part-common {
    display: flex;
    min-width: var(--min-box-width);
    height: 100%;
    box-sizing: border-box;
}

.left-box-part {
    flex-direction: row;
    width: 33.3%;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.right-box-part {
    flex-direction: column;
    width: 66.6%;
    padding-left: 10px;
}

.picture-and-text {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.top-100-percent {
    align-items: flex-start;
}
.center-100-percent {
    align-items: center;
}
.bottom-100-percent {
    align-items: flex-end;
}

.picture-and-text-100-percent {
    display: flex;
    flex-direction: row;
}

.left-box-part-100-percent {
    width: 33.3%;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.right-box-part-100-percent {
    display: flex;
    flex-direction: column;
    width: 66.6%;
    padding-left: 10px;
}

.horizontal-left {
    text-align: left;
    justify-content: flex-start;
}

.horizontal-center {
    text-align: center;
    justify-content: center;
}

.horizontal-right {
    text-align: right;
    justify-content: flex-end;
}

.vertical-top {
    justify-content: flex-start;
}

.vertical-center {
    justify-content: center;
}

.vertical-bottom {
    justify-content: flex-end;
}

.picture-and-text-vertical-top {
    align-items: flex-start;
}

.picture-and-text-vertical-center {
    align-items: center;
}

.picture-and-text-vertical-bottom {
    align-items: flex-end;
}

@media(max-width: 1050px){
    .picture-and-text {
        justify-content: center;
    }
    .picture-and-text-100-percent {
        flex-direction: column;
        justify-content: center;
    }
    .top-100-percent {
        align-items: center;
    }
    .bottom-100-percent {
        align-items: center;
    }
    .left-box-part {
        flex-direction: row;
        width: 100%;
    }
    .right-box-part {
        flex-direction: column;
        width: 100%;
    }
    .left-box-part-100-percent {
        width: 100%;
        padding-right: 0px;
    }
    .right-box-part-100-percent {
        width: 100%;
        padding-left: 0px;
    }
    .horizontal-left {
        text-align: center;
        justify-content: center;
    }
    .horizontal-right {
        text-align: center;
        justify-content: center;
    }
    .vertical-top {
        align-items: center;
        justify-content: center;
    }
    .vertical-bottom {
        align-items: center;
        justify-content: center;
    }
    .picture-and-text-vertical-top {
        align-items: center;
    }
    .picture-and-text-vertical-bottom {
        align-items: center;
    }
}

.extra-margin {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Box classes ----------------------------------------------------- */

.a-box-1 {
    width: 100%;
}

.a-box-2 {
    min-width: var(--min-box-width);
    width: 50%;
}

.a-box-3 {
    min-width: var(--min-box-width);
    width: 33.3%;
}

@media(max-width: 1050px){
    .a-box-2 {
        width: 100%;
    }
    .a-box-3 {
        width: 100%;
    }
}

/*
.pictureOnly {
    overflow: hidden;
}*/

.content {
    margin: 20px;
}