.col-24, .s-col-24, .t-col-24, .xl-col-24,
.col-23, .s-col-23, .t-col-23, .xl-col-23,
.col-22, .s-col-22, .t-col-22, .xl-col-22,
.col-21, .s-col-21, .t-col-21, .xl-col-21,
.col-20, .s-col-20, .t-col-20, .xl-col-20,
.col-19, .s-col-19, .t-col-19, .xl-col-19,
.col-18, .s-col-18, .t-col-18, .xl-col-18,
.col-17, .s-col-17, .t-col-17, .xl-col-17,
.col-16, .s-col-16, .t-col-16, .xl-col-16,
.col-15, .s-col-15, .t-col-15, .xl-col-15,
.col-14, .s-col-14, .t-col-14, .xl-col-14,
.col-13, .s-col-13, .t-col-13, .xl-col-13,
.col-12, .s-col-12, .t-col-12, .xl-col-12,
.col-11, .s-col-11, .t-col-11, .xl-col-11,
.col-10, .s-col-10, .t-col-10, .xl-col-10,
.col-09, .s-col-09, .t-col-09, .xl-col-09,
.col-08, .s-col-08, .t-col-08, .xl-col-08,
.col-07, .s-col-07, .t-col-07, .xl-col-07,
.col-06, .s-col-06, .t-col-06, .xl-col-06,
.col-05, .s-col-05, .t-col-05, .xl-col-05,.col-05-1,
.col-04, .s-col-04, .t-col-04, .xl-col-04,
.col-03, .s-col-03, .t-col-03, .xl-col-03,
.col-02, .s-col-02, .t-col-02, .xl-col-02,
.col-01, .s-col-01, .t-col-01, .xl-col-01, .col-00  {
    display: block;
    position: relative;
    float: left;
    box-sizing: border-box;
    min-height: 1px;
    transition: width 300ms ease-out;
    padding: 1%;
}

header .col-24,
header .col-23,
header .col-22,
header .col-21,
header .col-20,
header .col-19,
header .col-18,
header .col-17,
header .col-16,
header .col-15,
header .col-14,
header .col-13,
header .col-12,
header .col-11,
header .col-10,
header .col-09,
header .col-08,
header .col-07,
header .col-06,
header .col-05,
header .col-04,
header .col-03,
header .col-02,
header .col-01{
    padding: 0.5%;
}


.col-24 {width: 100%;}
/* 95,834 % */ .col-23 {width: calc((100% / 24) * 23);}
/* 91,667 % */ .col-22 {width: calc((100% / 24) * 22);}
/* 87,5 % */ .col-21 {width: calc((100% / 24) * 21);}
/* 83,3 % */ .col-20 {width: calc((100% / 24) * 20);}
/* 80% */  .col-19 {width: 80%;}
/* 75 % */ .col-18 {width: calc((100% / 24) * 18);}
/* 70,834 % */ .col-17 {width: calc((100% / 24) * 17);}
/* 66,667 % */ .col-16 {width: calc((100% / 24) * 16);}
/* 60 % */ .col-15 {width: 60%;}
/* 58,3 % */ .col-14 {width: calc((100% / 24) * 14);}
/* 54,167 % */ .col-13 {width: calc((100% / 24) * 13);}
/* 50 % */ .col-12 {width: calc((100% / 24) * 12);}
/* 45,834 % */ .col-11 {width: calc((100% / 24) * 11);}
/* 40 % */ .col-10-1 {width: 40%;}
/* 40 % */ .col-10 {width: 41.666667%;}
/* 37,5 % */.col-09 {width: calc((100% / 24) * 9);}
/* 33,3 % */ .col-08 {width: calc((100% / 24) * 8);}
/* 29,167 % */ .col-07 {width: calc((100% / 24) * 7);}
/* 25 % */ .col-06 {width: calc((100% / 24) * 6);}
/* 20,8333 % */ .col-05-1 {width: 20.8333%;}
/* 20 % */ .col-05 {width: 20%;}
/* 16,667 % */ .col-04 {width: calc((100% / 24) * 4);}
/* 12,5 % */ .col-03 {width: calc((100% / 24) * 3);}
/* 8,3 % */ .col-02 {width: calc((100% / 24) * 2);}
/* 4,167 % */ .col-01 {width: calc(100% / 24);}
.col-00 {display: none;}

.s-row-01, .t-row-01,	.xl-row-01,	.row-01, .d-row-01,
.s-row-02, .t-row-02,	.xl-row-02,	.row-02, .d-row-02,
.s-row-03,	.t-row-03,	.xl-row-03,	.row-03, .d-row-03,
.s-row-04,	.t-row-04,	.xl-row-04,	.row-04, .d-row-04,
.s-row-05,	.t-row-05,	.xl-row-05,	.row-05, .d-row-05,
.s-row-06,	.t-row-06,	.xl-row-06,	.row-06, .d-row-06,
.s-row-07,	.t-row-07,	.xl-row-07,	.row-07, .d-row-07,
.s-row-08,	.t-row-08,	.xl-row-08,	.row-08, .d-row-08,
.s-row-09,	.t-row-09,	.xl-row-09,	.row-09, .d-row-09,
.s-row-10,	.t-row-10,	.xl-row-10,	.row-10, .d-row-10,
.s-row-11,	.t-row-11,	.xl-row-11,	.row-11, .d-row-11,
.s-row-12,	.t-row-12,	.xl-row-12,	.row-12, .d-row-12,
.s-row-13,	.t-row-13,	.xl-row-13,	.row-13, .d-row-13,
.s-row-14,	.t-row-14,	.xl-row-14,	.row-14, .d-row-14,
.s-row-15,	.t-row-15,	.xl-row-15,	.row-15, .d-row-15,
.s-row-16,	.t-row-16,	.xl-row-16,	.row-16, .d-row-16,
.s-row-17,	.t-row-17,	.xl-row-17,	.row-17, .d-row-17,
.s-row-18,	.t-row-18,	.xl-row-18,	.row-18, .d-row-18,
.s-row-19,	.t-row-19,	.xl-row-19,	.row-19, .d-row-19,
.s-row-20,	.t-row-20,	.xl-row-20,	.row-20, .d-row-20,
.s-row-21,	.t-row-21,	.xl-row-21,	.row-21, .d-row-21,
.s-row-22,	.t-row-22,	.xl-row-22,	.row-22, .d-row-22,
.s-row-23,	.t-row-23,	.xl-row-23,	.row-23, .d-row-23,
.s-row-24,	.t-row-24,	.xl-row-24,	.row-24, .d-row-24{
    overflow: hidden;
    min-height: 1px;
}

.row-24 {height: calc((100% / 24) * 24);}
.row-23 {height: calc((100% / 24) * 23);}
.row-22 {height: calc((100% / 24) * 22);}
.row-21 {height: calc((100% / 24) * 21);}
.row-20 {height: calc((100% / 24) * 20);}
.row-19 {height: calc((100% / 24) * 19);}
.row-18 {height: calc((100% / 24) * 18);}
.row-17 {height: calc((100% / 24) * 17);}
.row-16 {height: calc((100% / 24) * 16);}
.row-15 {height: 60%;}
.row-14 {height: calc((100% / 24) * 14);}
.row-13 {height: calc((100% / 24) * 13);}
.row-12 {height: calc((100% / 24) * 12);}
.row-11 {height: calc((100% / 24) * 11);}
.row-10 {height: 40%;}
.row-09 {height: calc((100% / 24) * 9);}
.row-08 {height: calc((100% / 24) * 8);}
.row-07 {height: calc((100% / 24) * 7);}
.row-06 {height: calc((100% / 24) * 6);}
.row-05 {height: 20%;}
.row-04 {height: calc((100% / 24) * 4);}
.row-03 {height: calc((100% / 24) * 3);}
.row-02 {height: calc((100% / 24) * 2);}
.row-01 {height: calc(100% / 24);}
.row-16x9 {height: 56.25%;}

.videobox {
    float: left;
    width: 100%;
}

.imgWidth {
    min-width: 100%;
    max-width: 100%;
}

.imgHeight {
    min-height: 100%;
    max-height: 100%;
    width: auto !important;
}


@media screen and (min-width: 0px) and (max-width: 720px) {

    .responsive-box:before{
        content: 'smartphone portrait - 0 -> 720';
    }


    .col-24, .col-23, .col-22, .col-21, .col-20, .col-19, .col-18, .col-17, .col-16, .col-15, .col-14, .col-13, .col-12, .col-11, .col-10, .col-09, .col-08, .col-07, .col-06, .col-05, .col-04, .col-03, .col-02, .col-01{
        width:100%;
    }

    .s-row-24 {height: calc((100% / 24) * 24);}
    .s-row-23 {height: calc((100% / 24) * 23);}
    .s-row-22 {height: calc((100% / 24) * 22);}
    .s-row-21 {height: calc((100% / 24) * 21);}
    .s-row-20 {height: calc((100% / 24) * 20);}
    .s-row-19 {height: calc((100% / 24) * 19);}
    .s-row-18 {height: calc((100% / 24) * 18);}
    .s-row-17 {height: calc((100% / 24) * 17);}
    .s-row-16 {height: calc((100% / 24) * 16);}
    .s-row-15 {height: 60%;}
    .s-row-14 {height: calc((100% / 24) * 14);}
    .s-row-13 {height: calc((100% / 24) * 13);}
    .s-row-12 {height: calc((100% / 24) * 12);}
    .s-row-11 {height: calc((100% / 24) * 11);}
    .s-row-10 {height: 40%;}
    .s-row-09 {height: calc((100% / 24) * 9);}
    .s-row-08 {height: calc((100% / 24) * 8);}
    .s-row-07 {height: calc((100% / 24) * 7);}
    .s-row-06 {height: calc((100% / 24) * 6);}
    .s-row-05 {height: 20%;}
    .s-row-04 {height: calc((100% / 24) * 4);}
    .s-row-03 {height: calc((100% / 24) * 3);}
    .s-row-02 {height: calc((100% / 24) * 2);}
    .s-row-01 {height: calc(100% / 24);}
    .s-row-00 {display: none;}

    .s-col-24 {width: 100%;}
    .s-col-23 {width: calc((100% / 24) * 23);}
    .s-col-22 {width: calc((100% / 24) * 22);}
    .s-col-21 {width: calc((100% / 24) * 21);}
    .s-col-20 {width: calc((100% / 24) * 20);}
    .s-col-19 {width: 80%}
    .s-col-18 {width: calc((100% / 24) * 18);}
    .s-col-17 {width: calc((100% / 24) * 17);}
    .s-col-16 {width: calc((100% / 24) * 16);}
    .s-col-15 {width: 60%;}
    .s-col-14 {width: calc((100% / 24) * 14);}
    .s-col-13 {width: calc((100% / 24) * 13);}
    .s-col-12 {width: calc((100% / 24) * 12);}
    .s-col-11 {width: calc((100% / 24) * 11);}
    .s-col-10 {width: 40%;}
    .s-col-09 {width: calc((100% / 24) * 9);}
    .s-col-08 {width: calc((100% / 24) * 8);}
    .s-col-07 {width: calc((100% / 24) * 7);}
    .s-col-06 {width: calc((100% / 24) * 6);}
    .s-col-05 {width: 20%;}
    .s-col-04 {width: calc((100% / 24) * 4);}
    .s-col-03 {width: calc((100% / 24) * 3);}
    .s-col-02 {width: calc((100% / 24) * 2);}
    .s-col-01 {width: calc(100% / 24);}
    .s-col-00 {display: none;}


    .mobile-contact-navi .col-01{
        width: calc(100% / 24);
    }

    .mobile-contact-navi .col-02{
        width: calc((100% / 24)*2);
    }

    .mobile-contact-navi .col-04{
        width: calc((100% / 24)*4);
    }

    /* mobile-col-1 */
    /* passiert automatisch durch col-reset, kann aus Typo3 entfernt werden.

    /* mobile-col-2 */
    .mobilecol_2 .col-04,
    .mobilecol_2 .col-06,
    .mobilecol_2 .col-08,
    .mobilecol_2 .col-12,
    .mobilecol_2 .col-16,
    .mobilecol_2 .col-18,
    .mobilecol_2 .col-20{width: calc((100% / 24) * 12);}
    /* Abhängigkeit in T3 setzen / zwei Spalten (33% 66%) (25%) (50%) (25% 75%) (16% 84%) (16%) */

    /* mobile-col-3 */
    .mobilecol_3 .col-04,
    .mobilecol_3 .col-06,
    .mobilecol_3 .col-08,
    .mobilecol_3 .col-10,
    .mobilecol_3 .col-12,
    .mobilecol_3 .col-16{width: calc((100% / 24) * 8);}
    /* Abhängigkeit in T3 setzen / sechs Spalten (16%) // drei Spalten (33%) (25% 50% 25%) (16% 41% 41%)   */

    /* mobile-col-4 */
    .mobilecol_4 .col-04,
    .mobilecol_4 .col-06,
    .mobilecol_4 .col-12{width: calc((100% / 24) * 6);}
    /* Abhängigkeit in T3 setzen / vier Spalten (25%) // sechs Spalten (16%) // zwei Spalten (50%)  */


    /* mobile-col-5 */
    /* kann aus Typo3 entfernt werden.

    /* mobile-col-6 */
    .mobilecol_6 .col-04,
    .mobilecol_6 .col-08{width: calc((100% / 24) * 4);}
    /* Abhängigkeit in T3 setzen / sechs Spalten (16%) // drei Spalten (33%). */

}

@media screen and (min-width: 721px) and (max-width: 1024px) {
    .t-row-24 {height: calc((100% / 24) * 24);}
    .t-row-23 {height: calc((100% / 24) * 23);}
    .t-row-22 {height: calc((100% / 24) * 22);}
    .t-row-21 {height: calc((100% / 24) * 21);}
    .t-row-20 {height: calc((100% / 24) * 20);}
    .t-row-19 {height: calc((100% / 24) * 19);}
    .t-row-18 {height: calc((100% / 24) * 18);}
    .t-row-17 {height: calc((100% / 24) * 17);}
    .t-row-16 {height: calc((100% / 24) * 16);}
    .t-row-15 {height: 60%;}
    .t-row-14 {height: calc((100% / 24) * 14);}
    .t-row-13 {height: calc((100% / 24) * 13);}
    .t-row-12 {height: calc((100% / 24) * 12);}
    .t-row-11 {height: calc((100% / 24) * 11);}
    .t-row-10 {height: 40%;}
    .t-row-09 {height: calc((100% / 24) * 9);}
    .t-row-08 {height: calc((100% / 24) * 8);}
    .t-row-07 {height: calc((100% / 24) * 7);}
    .t-row-06 {height: calc((100% / 24) * 6);}
    .t-row-05 {height: 20%;}
    .t-row-04 {height: calc((100% / 24) * 4);}
    .t-row-03 {height: calc((100% / 24) * 3);}
    .t-row-02 {height: calc((100% / 24) * 2);}
    .t-row-01 {height: calc(100% / 24);}
    .t-row-00 {display: none;}


    /* tablet-col-1 */
    .tabletcol_1 > .col-24,
    .tabletcol_1 > .col-23,
    .tabletcol_1 > .col-22,
    .tabletcol_1 > .col-21,
    .tabletcol_1 > .col-20,
    .tabletcol_1 > .col-19,
    .tabletcol_1 > .col-18,
    .tabletcol_1 > .col-17,
    .tabletcol_1 > .col-16,
    .tabletcol_1 > .col-15,
    .tabletcol_1 > .col-14,
    .tabletcol_1 > .col-13,
    .tabletcol_1 > .col-12,
    .tabletcol_1 > .col-11,
    .tabletcol_1 > .col-10,
    .tabletcol_1 > .col-09,
    .tabletcol_1 > .col-08,
    .tabletcol_1 > .col-07,
    .tabletcol_1 > .col-06,
    .tabletcol_1 > .col-05,
    .tabletcol_1 > .col-04,
    .tabletcol_1 > .col-03,
    .tabletcol_1 > .col-02,
    .tabletcol_1 > .col-01{width:100%;}

    /* tablet-col-2 */
    .tabletcol_2 > .col-04,
    .tabletcol_2 > .col-06,
    .tabletcol_2 > .col-08,
    .tabletcol_2 > .col-12,
    .tabletcol_2 > .col-16,
    .tabletcol_2 > .col-18,
    .tabletcol_2 > .col-20{width: calc((100% / 24) * 12);}
    /* Abhängigkeit in T3 setzen / zwei Spalten (33% 66%) (25%) (50%) (25% 75%) (16% 84%) (16%) */

    /* tablet-col-3 */
    .tabletcol_3 > .col-04,
    .tabletcol_3 > .col-06,
    .tabletcol_3 > .col-08,
    .tabletcol_3 > .col-10,
    .tabletcol_3 > .col-12,
    .tabletcol_3 > .col-16{width: calc((100% / 24) * 8);}
    /* Abhängigkeit in T3 setzen / sechs Spalten (16%) // drei Spalten (33%) (25% 50% 25%) (16% 41% 41%)   */

    /* tablet-col-4 */
    .tabletcol_4 > .col-04,
    .tabletcol_4 > .col-06,
    .tabletcol_4 > .col-12{width: calc((100% / 24) * 6);}
    /* Abhängigkeit in T3 setzen / vier Spalten (25%) // sechs Spalten (16%) // zwei Spalten (50%)  */

    /* tablet-col-5 */
    /* kann aus Typo3 entfernt werden.

    /* tablet-col-6 */
    .tabletcol_6 > .col-04,
    .tabletcol_6 > .col-08{width: calc((100% / 24) * 4);}
    /* Abhängigkeit in T3 setzen / sechs Spalten (16%) // drei Spalten (33%). */
}

@media screen and (min-width: 721px) and (max-width: 800px) {
    .responsive-box:before{
        content: 'tablet portrait  - 721 -> 800';
    }

}

@media screen and (min-width: 801px) and (max-width: 1024px) {
    .responsive-box:before{
        content: 'Tablet landscape - 800 -> 1024';
    }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
    .responsive-box:before{
        content: 'small-Size Desktop - 1025 -> 1440';
    }

    .d-row-24 {height: calc((100% / 24) * 24);}
    .d-row-23 {height: calc((100% / 24) * 23);}
    .d-row-22 {height: calc((100% / 24) * 22);}
    .d-row-21 {height: calc((100% / 24) * 21);}
    .d-row-20 {height: calc((100% / 24) * 20);}
    .d-row-19 {height: calc((100% / 24) * 19);}
    .d-row-18 {height: calc((100% / 24) * 18);}
    .d-row-17 {height: calc((100% / 24) * 17);}
    .d-row-16 {height: calc((100% / 24) * 16);}
    .d-row-15 {height: 60%;}
    .d-row-14 {height: calc((100% / 24) * 14);}
    .d-row-13 {height: calc((100% / 24) * 13);}
    .d-row-12 {height: calc((100% / 24) * 12);}
    .d-row-11 {height: calc((100% / 24) * 11);}
    .d-row-10 {height: 40%;}
    .d-row-09 {height: calc((100% / 24) * 9);}
    .d-row-08 {height: calc((100% / 24) * 8);}
    .d-row-07 {height: calc((100% / 24) * 7);}
    .d-row-06 {height: calc((100% / 24) * 6);}
    .d-row-05 {height: 20%;}
    .d-row-04 {height: calc((100% / 24) * 4);}
    .d-row-03 {height: calc((100% / 24) * 3);}
    .d-row-02 {height: calc((100% / 24) * 2);}
    .d-row-01 {height: calc(100% / 24);}
    .d-row-00 {display: none;}
}

@media screen and (min-width: 1441px) and (max-width: 5200px) {

    .xl-col-24 {width: 100%;}
    .xl-col-23 {width: calc((100% / 24) * 23);}
    .xl-col-22 {width: calc((100% / 24) * 22);}
    .xl-col-21 {width: calc((100% / 24) * 21);}
    .xl-col-20 {width: calc((100% / 24) * 20);}
    .xl-col-19 {width: 80%}
    .xl-col-18 {width: calc((100% / 24) * 18);}
    .xl-col-17 {width: calc((100% / 24) * 17);}
    .xl-col-16 {width: calc((100% / 24) * 16);}
    .xl-col-15 {width: 60%;}
    .xl-col-14 {width: calc((100% / 24) * 14);}
    .xl-col-13 {width: calc((100% / 24) * 13);}
    .xl-col-12 {width: calc((100% / 24) * 12);}
    .xl-col-11 {width: calc((100% / 24) * 11);}
    .xl-col-10 {width: 40%;}
    .xl-col-09 {width: calc((100% / 24) * 9);}
    .xl-col-08 {width: calc((100% / 24) * 8);}
    .xl-col-07 {width: calc((100% / 24) * 7);}
    .xl-col-06 {width: calc((100% / 24) * 6);}
    .xl-col-05 {width: 20%;}
    .xl-col-04 {width: calc((100% / 24) * 4);}
    .xl-col-03 {width: calc((100% / 24) * 3);}
    .xl-col-02 {width: calc((100% / 24) * 2);}
    .xl-col-01 {width: calc(100% / 24);}
    .xl-col-00 {display: none;}

    .xl-row-24 {height: calc((100% / 24) * 24);}
    .xl-row-23 {height: calc((100% / 24) * 23);}
    .xl-row-22 {height: calc((100% / 24) * 22);}
    .xl-row-21 {height: calc((100% / 24) * 21);}
    .xl-row-20 {height: calc((100% / 24) * 20);}
    .xl-row-19 {height: calc((100% / 24) * 19);}
    .xl-row-18 {height: calc((100% / 24) * 18);}
    .xl-row-17 {height: calc((100% / 24) * 17);}
    .xl-row-16 {height: calc((100% / 24) * 16);}
    .xl-row-15 {height: 60%;}
    .xl-row-14 {height: calc((100% / 24) * 14);}
    .xl-row-13 {height: calc((100% / 24) * 13);}
    .xl-row-12 {height: calc((100% / 24) * 12);}
    .xl-row-11 {height: calc((100% / 24) * 11);}
    .xl-row-10 {height: 40%;}
    .xl-row-09 {height: calc((100% / 24) * 9);}
    .xl-row-08 {height: calc((100% / 24) * 8);}
    .xl-row-07 {height: calc((100% / 24) * 7);}
    .xl-row-06 {height: calc((100% / 24) * 6);}
    .xl-row-05 {height: 20%;}
    .xl-row-04 {height: calc((100% / 24) * 4);}
    .xl-row-03 {height: calc((100% / 24) * 3);}
    .xl-row-02 {height: calc((100% / 24) * 2);}
    .xl-row-01 {height: calc(100% / 24);}
    .xl-row-00 {display: none;}
}


@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .responsive-box:before{
        content: 'Mid-Size Desktop - 1441 -> 1920';
    }
}

@media screen and (min-width: 1921px) and (max-width: 5200px) {
    .responsive-box:before{
        content: 'big-Size Desktop - 1921 -> 5200';
    }
}


/* -------------   GRID  ------------- */

@media screen and (min-width: 721px) and (max-width: 5200px) {

    @supports(display: grid) {
        .grid-50-50,
        .grid-33-66,
        .grid-66-33,
        .grid-25-75,
        .grid-75-25,
        .grid-16-84,
        .grid-84-16,
        .grid-33-33-33,
        .grid-25-50-25,
        .grid-16-41-41,
        .grid-41-41-16,
        .grid-16-66-16,
        .grid-25-25-25-25,
        .grid-16-16-16-16-16-16{
            display: grid;
            grid-auto-flow: column;
        }

        /* 2er spalten Setup */
        .grid-50-50 {grid-template-columns: 1fr 1fr;}
        .grid-33-66 {grid-template-columns: 1fr 2fr;}
        .grid-66-33 {grid-template-columns: 2fr 1fr;}
        .grid-25-75 {grid-template-columns: 1fr 3fr;}
        .grid-75-25 {grid-template-columns: 3fr 1fr;}
        .grid-16-84 {grid-template-columns: 1fr 4fr;}
        .grid-84-16 {grid-template-columns: 4fr 1fr;}

        /* 3er spalten Setup */
        .grid-25-50-25{grid-template-columns: 1fr 2fr 1fr;}
        .grid-16-41-41{grid-template-columns: 1fr 2fr 2fr;}
        .grid-41-41-16{grid-template-columns: 2fr 2fr 1fr;}
        .grid-16-66-16{grid-template-columns: 1fr 3fr 1fr;}
        .grid-33-33-33{grid-template-columns: 1fr 1fr 1fr;}

        .grid-25-25-25-25{grid-template-columns: 1fr 1fr 1fr 1fr;}

        .grid-16-16-16-16-16-16{grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}

        /*.align-center-middle, .align-left-middle, .align-right-middle, .align-center-top, .align-center-bottom, .align-right-top, .align-right-bottom,.align-left-top, .align-left-bottom{
             display: grid;
             align-items: stretch;
             position: relative;
         }*/
        .grid-50-50 > div,
        .grid-33-66 > div,
        .grid-66-33 > div,
        .grid-25-75 > div,
        .grid-75-25 > div,
        .grid-16-84 > div,
        .grid-84-16 > div,
        .grid-33-33-33 > div,
        .grid-25-50-25 > div,
        .grid-16-41-41 > div,
        .grid-41-41-16 > div,
        .grid-16-66-16 > div,
        .grid-25-25-25-25 > div,
        .grid-16-16-16-16-16-16 > div{
            width: 100%;
        }

        .grid-50-50 .box-content,
        .grid-33-66 .box-content,
        .grid-66-33 .box-content,
        .grid-25-75 .box-content,
        .grid-75-25 .box-content,
        .grid-16-84 .box-content,
        .grid-84-16 .box-content,
        .grid-33-33-33 .box-content,
        .grid-25-50-25 .box-content,
        .grid-16-41-41 .box-content,
        .grid-41-41-16 .box-content,
        .grid-16-66-16 .box-content,
        .grid-25-25-25-25 .box-content,
        .grid-16-16-16-16-16-16 .box-content{
            height: 100%;
            display: grid;
            align-items: stretch;
            position: relative;
        }

        .grid-50-50 .box-content p,
        .grid-33-66 .box-content p,
        .grid-66-33 .box-content p,
        .grid-25-75 .box-content p,
        .grid-75-25 .box-content p,
        .grid-16-84 .box-content p,
        .grid-84-16 .box-content p,
        .grid-33-33-33 .box-content p,
        .grid-25-50-25 .box-content p,
        .grid-16-41-41 .box-content p,
        .grid-41-41-16 .box-content p,
        .grid-16-66-16 .box-content p,
        .grid-25-25-25-25 .box-content p,
        .grid-16-16-16-16-16-16 .box-content p{
            align-self: center;
        }

        .align-center-middle img, .align-left-middle img, .align-right-middle img, .align-center-top img, .align-center-bottom img, .align-right-top img, .align-right-bottom img, .align-left-top img, .align-left-bottom img {
            width: auto;
            position: relative;
        }

        .align-center-middle img {
            justify-self: center; /*horizontal*/
            align-self: center; /*vertikal*/
        }

        .align-left-middle img {
            justify-self: left; /*horizontal*/
            align-self: center; /*vertikal*/
        }

        .align-right-middle img {
            justify-self: right; /*horizontal*/
            align-self: center; /*vertikal*/
        }

        .align-center-top img {
            justify-self: center; /*horizontal*/
            align-self: self-start; /*vertikal*/
        }

        .align-center-bottom img {
            justify-self: center; /*horizontal*/
            align-self: end; /*vertikal*/
        }

        .align-right-top img {
            justify-self: right; /*horizontal*/
            align-self: self-start; /*vertikal*/
        }

        .align-right-bottom img {
            justify-self: right; /*horizontal*/
            align-self: self-end; /*vertikal*/
        }

        .align-left-top img {
            justify-self: left; /*horizontal*/
            align-self: self-start; /*vertikal*/
        }

        .align-left-bottom img {
            justify-self: left; /*horizontal*/
            align-self: self-end; /*vertikal*/
        }
    }
}