/**
 * hero
 */

#hero_dtl_1 {
    background-image:url('../images/hero/hero_dt1.jpg');
    background-size:cover;
}
#hero_dtl_2 {
    background-image:url('../images/hero/hero_dt2.jpg');
    background-size:cover;
}
#hero_sub_1 {
    background-image:url('../images/hero/hero_sub.jpg');
    background-size:cover;
}

#hrd2_rcol_top {
   background-color: rgba(255,255,255,0.8);
}
#hrd2_rcol_top .title {
    margin:0px 0px 4px 4px;
}

._hero {
    @include background-image(radial-gradient($grey-light 0%, $grey-light 40%, $grey 100%), $grey-light-medium);
    margin-bottom: rem(34);
    overflow: hidden;
    position: relative;
}

._hero ._p-bgimage {
    z-index: auto;
}

._hero--small {

    @include media(max-width rem(449)) {
        height: 30vw;
    }

    @include media(min-width rem(450)) {
        height: 25vw;
    }

    @include media(min-width rem(500)) {
        height: 23vw;
    }

    @include media(min-width rem(600)) {
        height: 20vw;
    }

    @include media(min-width rem(750)) {
        height: 16vw;
    }

    @include media(min-width rem(900)) {
        height: 14vw;
    }

    @include media(min-width rem(1200)) {
        height: 12vw;
    }
}

._hero--medium {
    @include media(max-width rem(449)) {
        height: 45vw;
    }

    @include media(min-width rem(450)) {
        height: 40vw;
    }

    @include media(min-width rem(500)) {
        height: 35vw;
    }

    @include media(min-width rem(750)) {
        height: 31vw;
    }

    @include media(min-width rem(900)) {
        height: 29vw;
    }

    @include media(min-width rem(1200)) {
        height: 27vw;
    }

    @include media(min-width rem(1600)) {
        height: 25vw;
    }
}

._hero--large {
    @include media(max-width rem(449)) {
        height: 60vw;
    }

    @include media(min-width rem(450)) {
        height: 50vw;
    }

    @include media(min-width rem(500)) {
        height: 46vw;
    }

    @include media(min-width rem(750)) {
        height: 44vw;
    }

    @include media(min-width rem(900)) {
        height: 42vw;
    }

    @include media(min-width rem(1200)) {
        height: 40vw;
    }

    @include media(min-width rem(1600)) {
        height: 36vw;
    }
}

._hero__content-wrapper {
    background: $white-transparent-soft;
    margin: 0;
    max-width: none;
    padding: 200vh rem(14) rem(11);
    position: absolute;
    width: calc(100vw - .875rem); // rem(14)

    &::after {
        background: $green;
        content: "";
        position: absolute;
        width: 100vw;
    }

    ._hero--small & {
        @include media(max-width rem(449)) {
            bottom: 10vw;

            &::after {
                bottom: -10vw;
                height: 10vw;
            }
        }

        @include media(min-width rem(450)) {
            bottom: 8vw;

            &::after {
                bottom: -8vw;
                height: 8vw;
            }
        }

        @include media(min-width rem(500)) {
            bottom: 6vw;

            &::after {
                bottom: -6vw;
                height: 6vw;
            }
        }

        @include media(min-width rem(750)) {
            bottom: 5vw;

            &::after {
                bottom: -5vw;
                height: 5vw;
            }
        }

        @include media(min-width rem(900)) {
            bottom: 4vw;

            &::after {
                bottom: -4vw;
                height: 4vw;
            }
        }

        @include media(min-width rem(1200)) {
            bottom: 3vw;

            &::after {
                bottom: -3vw;
                height: 3vw;
            }
        }
    }

    ._hero--medium & {
        @include media(max-width rem(449)) {
            bottom: 10vw;

            &::after {
                bottom: -10vw;
                height: 10vw;
            }
        }

        @include media(min-width rem(450)) {
            bottom: 10vw;

            &::after {
                bottom: -10vw;
                height: 10vw;
            }
        }

        @include media(min-width rem(500)) {
            bottom: 8vw;

            &::after {
                bottom: -8vw;
                height: 8vw;
            }
        }

        @include media(min-width rem(750)) {
            bottom: 7vw;

            &::after {
                bottom: -7vw;
                height: 7vw;
            }
        }

        @include media(min-width rem(900)) {
            bottom: 5vw;

            &::after {
                bottom: -5vw;
                height: 5vw;
            }
        }

        @include media(min-width rem(1200)) {
            bottom: 4vw;

            &::after {
                bottom: -4vw;
                height: 4vw;
            }
        }
    }

    ._hero--large & {
        @include media(max-width rem(449)) {
            bottom: 10vw;

            &::after {
                bottom: -10vw;
                height: 10vw;
            }
        }

        @include media(min-width rem(450)) {
            bottom: 10vw;

            &::after {
                bottom: -10vw;
                height: 10vw;
            }
        }

        @include media(min-width rem(500)) {
            bottom: 10vw;

            &::after {
                bottom: -10vw;
                height: 10vw;
            }
        }

        @include media(min-width rem(750)) {
            bottom: 9vw;

            &::after {
                bottom: -9vw;
                height: 9vw;
            }
        }

        @include media(min-width rem(900)) {
            bottom: 7.5vw;

            &::after {
                bottom: -7.5vw;
                height: 7.5vw;
            }
        }

        @include media(min-width rem(1100)) {
            bottom: 7vw;

            &::after {
                bottom: -7vw;
                height: 7vw;
            }
        }

        @include media(min-width rem(1200)) {
            bottom: 6.5vw;

            &::after {
                bottom: -6.5vw;
                height: 6.5vw;
            }
        }

        @include media(min-width rem(1400)) {
            bottom: 5.5vw;

            &::after {
                bottom: -5.5vw;
                height: 5.5vw;
            }
        }

        @include media(min-width rem(1600)) {
            bottom: 4.5vw;

            &::after {
                bottom: -4.5vw;
                height: 4.5vw;
            }
        }
    }

    ._hero--position-right & {
        margin-left: rem(14);
        padding-right: rem(14);
        text-align: left;

        &::after {
            left: -100vw;
        }
    }

    ._hero--position-right._hero--intersection-0 & {
        @include media(min-width rem(650)) {
            margin-left: 33.333333%;
            width: 66.66666%;
        }

        @include media(min-width rem(900)) {
            padding-right: rem(100);
        }
    }

    ._hero--position-right._hero--intersection-1 & {
        @include media(min-width rem(650)) {
            margin-left: 33.333333%;
            width: 66.66666%;
        }

        @include media(min-width rem(900)) {
            margin-left: 50%;
            width: 50%;
        }

        @include media(min-width rem(1200)) {
            padding-right: rem(100);
        }

    }

    ._hero--position-right._hero--intersection-2 & {
        @include media(min-width rem(650)) {
            margin-left: 33.333333%;
            width: 66.66666%;
        }

        @include media(min-width rem(900)) {
            margin-left: 50%;
            width: 50%;
        }

        @include media(min-width rem(1200)) {
            margin-left: 66.66666%;
            width: 33.33333%;
        }

        @include media(min-width rem(1500)) {
            padding-right: rem(100);
        }
    }

    ._hero--position-left & {
        margin-right: rem(14);
        padding-left: rem(14);
        text-align: right;

        &::after {
            right: -100vw;
        }
    }

    ._hero--position-left._hero--intersection-0 & {
        @include media(min-width rem(650)) {
            margin-right: 33.333333%;
            width: 66.66666%;
        }

        @include media(min-width rem(900)) {
            margin-right: 50%;
            width: 50%;
        }

        @include media(min-width rem(1200)) {
            margin-right: 66.66666%;
            width: 33.33333%;
        }

        @include media(min-width rem(1500)) {
            padding-left: rem(100);
        }

    }

    ._hero--position-left._hero--intersection-1 & {
        @include media(min-width rem(650)) {
            margin-right: 33.333333%;
            width: 66.66666%;
        }

        @include media(min-width rem(900)) {
            margin-right: 50%;
            width: 50%;
        }

        @include media(min-width rem(1200)) {
            padding-left: rem(100);
        }
    }

    ._hero--position-left._hero--intersection-2 & {
        @include media(min-width rem(650)) {
            margin-right: 33.333333%;
            width: 66.66666%;
        }

        @include media(min-width rem(900)) {
            padding-left: rem(100);
        }
    }
}

._hero__head {
    margin-bottom: 0;

    ._hero--position-left & {
        margin-right: 0;
    }

    ._hero--position-right & {
        margin-left: 0;
    }
}

._hero__headline,
._hero__subline {
    display: block;
    font-size: rem(22);
    line-height: 1em;
    text-transform: uppercase;


    @include media(min-width rem(350)) {
        font-size: rem(24);
    }

    @include media(min-width rem(400)) {
        font-size: rem(28);
    }

    @include media(min-width rem(450)) {
        font-size: rem(30);
    }

    @include media(min-width rem(500)) {
        font-size: inherit;
    }

    @include media(min-width rem(900)) {
        font-size: inherit;
    }

    ._article--product & {
        text-transform: none;
    }
}

._hero__headline {
    color: $green;
}

._hero__subline {
    color: $aubergine;
}

._hero__button {
    margin-top: rem(5);
}

._hero__link {
    display: inline-block;
}

._hero__button-text {
    color: $aubergine;
    font-size: rem(14);

    ._hero__link &:hover {
        text-decoration: underline;
    }
}

// print styles
@media print {

    ._hero {
        margin-bottom: rem(42);
    }

    ._hero--small {
        height: 4cm;

        ._hero__content-wrapper {
            bottom: 1cm;

            &::after {
                bottom: -1cm;
                height: 1cm;
            }
        }
    }

    ._hero--medium {
        height: 6cm;

        ._hero__content-wrapper {
            bottom: 1cm;

            &::after {
                bottom: -1cm;
                height: 1cm;
            }
        }
    }

    ._hero--large {
        height: 8cm;

        ._hero__content-wrapper {
            bottom: 1cm;

            &::after {
                bottom: -1cm;
                height: 1cm;
            }
        }
    }
}