/* -------------------------------------------- */
/* -------- Hero-Image und Hero-Section ------- */
/* -------------------------------------------- */

/* !!!!!!!!! TO DO: verschiedene Größen des Bildes und Bild positionieren !!!!!!!!!! */

section.hero{
    width: 100%;
    will-change: transform;
    min-height: 500px;
    height: 100vh;
    margin:0;
    background-color: #000;
    padding-top: 50px;
    background-origin: content-box;
}


/* --------- Hero Content Area --------- */
.hero-content{
    display: grid;
    grid-template-rows: 5fr 1fr 5fr;
    align-items: center;
    height: 100%;
    color: #eee;
    position: relative;
}
section.hero .hero-content-left{
    justify-content: flex-start;
    justify-items: start;
}
section.hero .hero-content-right{
    justify-content: flex-end;
    justify-items: end;
}


/* --------- Hero Content Text -------- */
.hero h1{
    display: inline-block;
    align-self: end;
    margin:0;
    padding: 0;
    color: #E6B551; /* fallback-text-color (mainly for IE)*/
    -webkit-text-fill-color: transparent; /* transparent text, ignore color-attribute, if this is supported */
    background-image: -webkit-linear-gradient(25deg, #bc8912 0%, #bc8912 20%, #EDDA99 75%, #bc8912 90%, #bc8912 100%); /* use webkit-prefix, so that IE won't use it */
    -webkit-background-clip: text; /*clip background to text. not supported in IE */
    font-family:   'Bree Serif', 'Georgia', serif;
    font-weight: 800;
    font-size: 3em;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    filter: drop-shadow(1px 2px rgba(67,67,67,0.15));
}
.hero h3{
    letter-spacing: 1.2px;
    font-weight: normal;
    font-size: 1em;
}


/* --------- Hero Content Scroller ------------ */
.hero .scroller{
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 0.8em;
    margin-bottom: 0.8em;
}

@media only screen and (max-width:1200px) and (orientation:landscape){
    section.hero{
        min-height: initial;
        height: 100vh;
    }
    .hero .scroller{
        display: block;
    }
}


/* --------- Hero Content Images ------------ */

section.hero{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

section.hero.eric{
    background-image: url('/./images/eventh-hero-image-eric-venth.png');
    background-size: contain;
    background-size: auto 100%;
    background-position: right -100px top;
    background-attachment: scroll;
}
section.hero.mady{
    background-image: url('/./images/eventh-hero-image-mady-venth.jpg');
    background-position: left -190px top;
    background-attachment: scroll;
}
.no-js section.hero.eric,
.no-js section.hero.mady{
    background-attachment: fixed;
}
section.hero.personal-training{
    background-image:  linear-gradient(to left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%), url('/./images/eventh-personal-training3_3000.jpg');
    background-position: center top;
}

section.hero.firmen-fitness{
    background-image: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%), url('/./images/eventh-firmenfitness_3000.jpg');
}
section.hero.ernaehrungsberatung{
    background-image: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%), url('/./images/eventh-ernaehrungsberatung1_3000.jpg');
    //background-position: bottom right;
}
section.hero.kurse{
    background-image: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%), url('/./images/eventh-kurse2_3000.jpg');
    background-position: left top;
}


@media only screen and (min-width:650px){
    section.hero.eric{
        background-image: url('/./images/eventh-hero-image-eric-venth.png');
        background-position: right -200px top;
    }
}

@media only screen and (max-width:1200px) and (orientation:landscape){
    section.hero.eric{
        background-image: url('/./images/eventh-hero-image-eric-venth.png');
        background-position: right top;
    }
}
@media only screen and (min-width:1200px){
    section.hero.eric{
        background-image: url('/./images/eventh-hero-image-eric-venth.png');
        background-position: right  top;
    }
}