/*
 * Info banner of side
 */
#info-container {
    /*Pos*/
    width: 100%;
    min-height: 500px;
    padding: 250px 0px;

    /* Background */
    background-image: var(--INFO-BANNER);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;

    /*Flexbox*/
    display: flex;
    justify-content: center;
    align-items: center;
}

#info-container-textbox {
    /*Flexbox*/
    display: flex;
    flex-direction: column;
    align-items: center;

    /*Block header select*/
    user-select: none;
}

.info-container-text {
    /*Pos*/
    padding: 10px;
    max-width: 40%;

    /* Background */
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
}

.info-container-text>* {
    /*Pos*/
    padding: 10px;

    /*Color*/
    color: var(--INFO-COLOR);
}

#info-headline { 
    align-self: flex-start;
    display: flex;
    flex-direction: column;
}

#info-headline>* {
    font-size: 2em;
}

#info-headline>h2 {
    font-size: 3.5em;
}

#info-text {
    align-self: flex-end;
    margin-top: 10px;
}

#info-text>* {
    font-size: 2em;
}

.info-container-text div span {
    font-size: inherit;
    color: inherit;
    /*Todo: Add fat color*/
}

@media screen and (max-width: 1400px) {
    #info-container {
        min-height: 300px;
        padding: 180px 0px;
    }

    #info-container-textbox {
        align-items: center;
    }

    #info-headline,
    #info-text {
        max-width: 100%;
        width: 100%;
        margin: 4px;

        justify-content: center;
        align-self: auto;
    }

    #info-headline>* {
        text-align: center;
    }

    #info-headline>h2 {
        font-size: 2.5em;
    }

}


@media screen and (max-width: 900px) {
    #info-headline>* {
        font-size: 1.25em;
    }

    #info-headline>h2 {
        font-size: 1.75em;
    }


    #info-text>* {
        font-size: 1.25em;
    }
}

@media screen and (max-width: 400px) {
    #info-container {
        min-height: 250px;
        padding: 125px 0px;
    }

    #info-headline>h2 {
        font-size: 1.5em;
    }

    #info-headline>* {
        font-size: 1.5em;
    }

    #info-text>* {
        font-size: 1em;
    }
}