/*__________________________________________________  concept css   __________________________________________________*/

.content_bij_opzet {
    line-height: 30px;
}

.tijdelijke_border {
    border: 0 dashed #ff0000;
}

/*____________________________________________________________________________________________________________________*/

/* http://codepen.io/chriscoyier/pen/uwJjr */

.basis_browserraam {
    min-height: calc(100% - 9px);
    margin: 0 auto;
    margin-bottom: -150px; /* GELIJK ALS: .basis_browserraam_footer:height; */
    background-color: #ffffff;
}

.basis_browserraam:after {
    content: "";
    display: block;
    height: 150px; /* GELIJK ALS: .basis_browserraam_footer:height; */
}

.basis_browserraam_header_all {
    clear: both;
    width: 100%;
    height: 176px;
    display: table;
    margin: 0 auto;
    min-height: 185px;
    color: #212121;
}

.basis_browserraam_footer {
    margin: 0 auto;
    /*max-width: 1200px;*/
    height: 150px; /* ANDEREN DIENEN GELIJK TE ZIJN ALS DEZE: height; */
    background-color: rgba(158, 149, 143, 0.75) /*FF7A01*/
}

/* clear without structural mark-up */
.basis_clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.basis_clearfix {
    display: inline-block;
}

.basis_clearfix {
    display: block;
}

.basis_leeslayout {
    display: table;
    max-width: 1200px;
    width: 100%;
    height: calc(100vh - 285px); /* 185 + 100  GELIJK ALS: browserraam_header_all + browserraam_footer */
    margin: 0 auto;
}

.basis_csm_content {
    position: relative;
    top: -332px;
    display: table-cell;
    height: calc(100vh - 359px);
    padding: 0 0 0 0;
    vertical-align: top;
    border: 0 dotted #000000;
    background-color: #ffffff;
}

.basis_parent {
    margin: 0 auto;
    width: calc(100% - 2px);
    max-width: calc(1200px - 0px);
    height: 100%;
    text-align: center;
    vertical-align: top;
    border: 0 dashed blue;
    background-color: #ffffff;
}

.basis_child_1van2 {
    display: inline-block;
    margin: 2px 0;
    padding: 0 5px 5px 6px;
    width: 22.03%;
    /*max-width: calc(100% - 250px - 4px);*/
    /*min-width: 650px;*/
    text-align: left;
    float: left;
    border: 0 dashed red;
}

.basis_child_2van2 {
    display: inline-block;
    width: calc(73.87% - 0px);
    margin: -18px 5px;
    text-align: left;
    vertical-align: top;
    float: left;
    border: 0 dashed #00ff00;
}

.class_B02 {
    top: -158px;
}

@media only screen and (min-width: 1200px) {
    .basis_parent {
        margin: 0 auto;
        width: calc(1200px - 24px);
        /*min-height: 998px;*/
    }
}

@media only screen and (max-width: 1199px) {
    .class_B02 {
        top: -158px;
    }

    .basis_csm_content {
        display: block;
        top: -295px;
    }
}

@media only screen and (max-width: 1024px) {
    .basis_csm_content {
        top: -355px;
    }
}

@media only screen and (max-width: 768px) {
    .basis_csm_content {
        top: -409px;
    }

    .basis_child_1van2 {
        width: 28.03%;
    }

    .basis_child_2van2 {
        width: calc(69.87% - 0px);
    }
}

@media only screen and (max-width: 736px) {
    .class_B02 {
        top: -87px;
    }

    .basis_csm_content {
        top: -211px;
    }
}

@media only screen and (max-width: 709px) {
    .basis_browserraam_footer {
        background: transparent;
    }

    .basis_child_1van2 {
        width: calc(100% - 2px);
    }

    .basis_child_2van2 {
        width: calc(100% - 8px);
        max-width: calc(100% - 4px);
    }

}

@media only screen and (max-width: 600px) {
    .basis_browserraam_header_all {
        min-height: 155px;
    }
}

@media only screen and (max-width: 667px) {

}

@media only screen and (max-width: 568px) {
    .basis_csm_content {
        top: -276px;
    }
}

@media only screen and (max-width: 376px) {
    .basis_csm_content {
        top: -339px;
    }
}

@media only screen and (max-width: 360px) {
    .basis_csm_content {
        top: -288px;
    }
}

@media only screen and (max-width: 320px) {
    .basis_csm_content {
        top: -299px;
    }
}

/*____________________________________________________________________________________________________________________*/
