/* STIL: bigtext - auch standard, wenn keine Angabe */
/* ------------------------------------------------ */
/* Text-Stile */

.title_font_bigtext h2 {
    font-size: 3em;
}
.title_font_bigtext h3 {
    font-size: 2em;
}
back_layer .title_hidden .title_font_bigtext h2 {
    transform: scale(1.3,1.3);
    opacity: 0;
}
back_layer .title_hidden .title_font_bigtext h3 {
    transform: scale(1.5,1.5);
    opacity: 0;
}
front_layer .title_hidden .title_font_bigtext h2 {
    transform: translateY(+50%);
    opacity: 0;
}
front_layer .title_hidden .title_font_bigtext h3 {
    transform: translateY(-100%);
    opacity: 0;
}

@media only screen and (min-aspect-ratio: 19/10) { /* Landscape ultra, for mobile phones turned landscape */
    .title_font_bigtext h2 {
        font-size: 2.1em;
    }
    .title_font_bigtext h3 {
        font-size: 1.4em;
    }
}
@media only screen and (max-aspect-ratio: 10/19) { /* Portrait ultra, for mobile phones turned portrait */
    .title_font_bigtext h2 {
        font-size: 1.8em;
    }
    .title_font_bigtext h3 {
        font-size: 1.2em;
    }
}




/* STIL: frametext1 */
/* ------------------------------------------------ */

/* Spezielle Background Stilelemente */

frametext1 {
    position: absolute;
    display: block;
    width: 100%;
    height: calc(100% - 1em);
    top: 1em;
    left: 0em;
    border-radius: 0em 4em 0em 0em;
    opacity: 1;
    transition: opacity 0.1s 0.6s, transform 0.3s 0.6s ease-out;
}

/* Spezielle Background Stilelemente */

.title_hidden title_body > frametext1 { /* für alle Elemente in frametext1 */
    transform: translate(0em, 0em);
    opacity: 0;
}

/* serious */
.title_color_serious h2 {
    border-radius: 0em 0em 0em 0em;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    background: black; border-color: white; color: white;
}
.title_color_serious h3 {
    background: white; color: black;
}
.frametext1_serious_1 { transform: translate(-1em, 1em); background:dimgray;
}
.frametext1_serious_2 { transform: translate(-0.5em, 0.5em); background: silver;
}

/* italy */
.title_color_italy h2 {
    border-radius: 0em 4em 0em 0em;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    background: green; border-color: white; color: white;
}
.title_color_italy h3 {
    background: white; color: black;
}
.frametext1_italy_1 { transform: translate(-1.5em, 1.5em); background: green;
}
.frametext1_italy_2 { transform: translate(-1em, 1em); background: white;
}
.frametext1_italy_3 { transform: translate(-0.5em, 0.5em); background: red;
}

/* wonder */
.title_color_wonder h2 {
    border-radius: 0em 4em 0em 0em;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    background:black; border-color: white; color: white;
}
.title_color_wonder h3 {
    background: white; color: black;
}
.frametext1_wonder_1 { transform: translate(-1.5em, 1.5em); background: darkorchid;
}
.frametext1_wonder_2 { transform: translate(-1em, 1em); background: red;
}
.frametext1_wonder_3 { transform: translate(-0.5em, 0.5em); background: orange;
}

/* pride */
.title_color_pride h2 {
    border-radius: 0em 4em 0em 0em;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    background: black; border-color: white; color: white;
}
.title_color_pride h3 {
    background: white; color: black;
}
.frametext1_pride_1 { transform: translate(-1.5em, 1.5em); background: blue;
}
.frametext1_pride_2 { transform: translate(-1.2em, 1.2em); background: limegreen;
}
.frametext1_pride_3 { transform: translate(-0.9em, 0.9em); background: yellow;
}
.frametext1_pride_4 { transform: translate(-0.6em, 0.6em); background: orange;
}
.frametext1_pride_5 { transform: translate(-0.3em, 0.3em); background: red;
}

/* Text-Stile */

.title_hidden .title_font_frametext1 h2 {
    transform: translateY(+200%);
    opacity: 0;
}
.title_hidden .title_font_frametext1 h3 {
    transform: translateY(-100%);
    opacity: 0;
}
.title_font_frametext1 h2 {
    font-size: 2.1em;
    padding: 0em 0.3em;
}
.title_font_frametext1 h3 {
    font-size: 1.4em;
    padding: 0em 0.2em;
}






/* STIL: frametext2 */
/* ------------------------------------------------ */

/* Spezielle Background Stilelemente */

frametext2 {
    position: absolute;
    display: block;
    width: 25%;
    height: calc(100% + 1em);
    bottom: 0em;
    left: 0em;
    border-radius: 0em 0em 0em 0em;
    transition: opacity 0.3s 0.6s, transform 0.3s 0.6s ease;
}

/* Spezielle Background Stilelemente */

.title_hidden title_body > frametext2 { /* für alle Elemente in frametext2 */
    transform: translate(0em, 1em) skewX(-10deg);
    opacity: 0;
}

/* race */
.title_color_race h2 {
    border-radius: 0em 0em 0em 0em;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    background: black; border-color: white; color: white;
}
.title_color_race h3 {
    background: white; color: black;
}
.frametext2_race_1 {
    transform: translate(20%, 1em) skewX(-10deg);
    background: dodgerblue;
    opacity: 1;
}
.frametext2_race_2 {
    transform: translate(120%, 1em) skewX(-10deg);
    background: red;
    opacity: 1;
}


/* Text-Stile */

.title_hidden .title_font_frametext2 h2 {
    transform: translateY(+200%);
    opacity: 0;
}
.title_hidden .title_font_frametext2 h3 {
    transform: translateY(-100%);
    opacity: 0;
}
.title_font_frametext2 h2 {
    font-size: 2.1em;
    padding: 0em 0.3em;
}
.title_font_frametext2 h3 {
    font-size: 1.4em;
    padding: 0em 0.2em;
}





/* STIL: frametext3 */
/* ------------------------------------------------ */

/* Spezielle Background Stilelemente */

frametext3 {
    position: absolute;
    display: block;
    width: 25%;
    height: calc(100% + 2em);
    bottom: 0em;
    left: 0em;
    transition: opacity 0.3s 0.6s, transform 0.3s 0.6s ease;
}

/* Spezielle Background Stilelemente */

.title_hidden title_body > frametext3 { /* für alle Elemente in frametext3 */
    transform: translate(0em, 1em) skewX(-10deg);
    opacity: 0;
}

/* blocks */
.title_color_blocks h2 {
    border-width: 0px 0px 2px 0px;
    border-style: solid;
    border-color: white; color: white;
    margin-bottom: 4px;
}
.title_color_blocks h3 {
    background: white; color: black;
}


/* Text-Stile */

.title_hidden .title_font_frametext3 h2 {
    transform: translateY(+200%);
    opacity: 0;
}
.title_hidden .title_font_frametext3 h3 {
    transform: translateY(-50%);
    opacity: 0;
}
.title_font_frametext3 h2 {
    font-size: 2.4em;
    padding: 0em 0.3em;
}
.title_font_frametext3 h3 {
    font-size: 1.5em;
    padding: 0.2em 0.2em;
}