﻿/*div[id^="abid"] {
    margin-top: 50px !important;
}*/

/*
    Floating left & right  for columns  
    Diese werden durchnummeriert, deswegen die Wildcardselection  */
div[class*='defaultparafloatleft-'] {
    float: left;
    transition: .3s ease-in-out;
}

div[class*='defaultparafloatright-'] {
    float: right;
    transition: .3s ease-in-out;
}

/*div[class*='defaultaddspacercolumn'] {
    min-height:1px;
}

div[class*='defaultaddcolumn'] {
    min-height: 1px;
}*/

/* ############################### Full width ################################## */

/********* Index ********/
/* content 1300px */
.defaultaddcolumn1300 {
    width: 100%;
}

/* content 920px */
.defaultaddcolumn920 {
    width: 70.769%;
}

/* content 830px */
.defaultaddcolumn830 {
    width: 63.846%;
}

/* content 615px */
.defaultaddcolumn615 {
    width: 47.308%;
}

/* content 400px */
.defaultaddcolumn400 {
    width: 30.769%;
}

/* content 289px */
.defaultaddcolumn289 {
    width: 22.231%;
}

/* spacer 190px */
.defaultaddspacercolumn190 {
    width: 14.615%;
}

/* spacer 70px */
.defaultaddspacercolumn70 {
    width: 5.385%;
    min-height: 70px;
}

/* spacer 50px */
.defaultaddspacercolumn50 {
    width: 3.846%;
    min-height: 50px;
}

/* spacer 48px */
.defaultaddspacercolumn48 {
    width: 3.692%;
    min-height: 48px;
}

.imageaddcolumn400, .imageaddcolumn830, .blogaddcolumn830 {
    width: 100%;
}


/********* Index Small ********/

.defaultaddcolumn1000 {
    width: 100%;
}

/********** Popup ***********/

.popupaddcolumn920{
    width: 100%;
    max-width: 920px;
}

/********* Flex Box **********/

[id^="abid"] {
    display: flex;
}

.defaultaddcolumn920{
    flex: 0 0 920px;
}

@media screen and (max-width: 1379px) {
    .defaultaddcolumn615 {
        flex: 1;
    }

    .defaultaddspacercolumn70 {
        flex: 0 0 70px;
    }

    .defaultaddspacercolumn50 {
        flex: 0 0 50px;
    }

    .defaultaddspacercolumn48{
        flex: 0 0 48px;
    }

}

/* ############################### MAX 1199 ################################## */
@media screen and (max-width: 1199px) {

    .defaultaddcolumn920 {
        flex: 1 0 100%;
    }

    .defaultaddspacercolumn70 {
        flex: 0 0 50px;
        min-height: 50px;
    }
}

@media screen and (max-width: 991px) {
    [id^="abid"] {
        /*flex-direction: column;*/
        flex-wrap:wrap;
        justify-content: center;
    }

    .defaultaddcolumn920 {
        width: 100%;
    }

    .defaultaddcolumn830 {
        width: 100%;
        flex: 1;
    }

    .defaultaddcolumn400, .defaultaddcolumn289 {
        width: 100%;
        flex: 0 0 290px;
    }

    .defaultaddcolumn615 {
        flex: 1 0 100%;
    }

    .defaultaddspacercolumn70 {
        width: 100%;
    }

    .defaultaddspacercolumn50 {
        width: 100%;
    }

    .defaultaddspacercolumn190 {
        flex: 0;
    }

    [id^="abid"] .defaultaddcolumn400 + .defaultaddspacercolumn50 + .defaultaddcolumn400 + .defaultaddspacercolumn50 {
        display: block;
        flex: 0 0 100%;
    }

    [id^="abid"] .defaultaddcolumn289 + .defaultaddspacercolumn48 + .defaultaddcolumn289 + .defaultaddspacercolumn48 {
        display: block;
        flex: 0 0 100%;
    }

        [id^="abid"] .defaultaddcolumn289 + .defaultaddspacercolumn48 + .defaultaddcolumn289 + .defaultaddspacercolumn48 + .defaultaddcolumn289 + .defaultaddspacercolumn48 {
            flex: 0 0 48px;
        }

}

@media screen and (max-width: 767px) {
    .defaultaddcolumn920 {
        flex: 1;
    }

    [id^="abid"] {
        flex-direction: column;
    }

    .defaultaddcolumn615 {
        flex: 1;
        width: 100%;
    }

    .defaultaddcolumn400, .defaultaddcolumn289 {
        flex: 1 0 100%;
    }
}


/* ############################### MAX 992 ################################## */
@media screen and (max-width: 992px) {


        

}

@media screen and (max-width: 460px) {


}