/**
*
* .c13
* Headline H1
* h1 as preset just enter text
* little slogan on top
* brown line at the bottom yes/no
*
**/

/*======= 320  padding l,r  5  = 310 ===*/

.c13 {
    text-align: center;
    position: relative;
    padding-top: 0.7em;
}

.c13.bottomLine::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 82.959%;
    /*10 grid elements*/
    height: 1px;
    border-bottom: solid 1px var(--colored-line);
}

.c13.ltr.bottomLine::after {
    left: 0;
}

.c13.rtl.bottomLine::after {
    right: 0;
}

.c13 h1 {
    display: inline-block;
    margin-top: 0;

}

.c13 .slogan {
    display: inline-block;
    color: var(--colored-text);
    margin-bottom: 0.3em;
}


/*======= 576 ========= MEDIA QUERIES ======= Rand 15 = 546 ===*/

@media only screen and (min-width: 576px) {}

/*======= 768========= MEDIA QUERIES ======== Rand 15 = 738 ===*/

@media only screen and (min-width: 768px) {}

/*======= 990 ======== MEDIA QUERIES ======== Rand 15 = 960 ===*/

@media only screen and (min-width: 990px) {
    .c13 {
        text-align: left;
    }

    .c13 h1 {
        font-size: 50px;
        text-align: left;
    }


}

/*======= 1398 ======= MEDIA QUERIES ======== Rand 30 = 1338 ==*/

@media only screen and (min-width: 1398px) {
    .c13 {
        padding-top: 1.5em;
    }

    .c13.bottomLine::after {
        width: calc(((100vw - 1338px) / 2) + 1110px);
        /*10 grid elements*/
    }

    .c13 h1 {
        font-size: 60px;
    }

}


/*END-.c13*/