.offer {
    background-image: url(../img/backgrounds/bg-desktop.jpg);
    background-size: cover;
    background-position: center;
    padding: 3em 0 0;

    .logo {
        max-width: 290px;
        display: block;
        padding: 0 0 3em;

        img {
            width: 100%;
        }
    }

    &__label {
        font-family: 'Vanguard-DemiBold';
        background-color: $color-tertiary;
        color: #0b0b0b;
        padding: 0.1em 0.5em 0.06em;
        font-size: 2.6em;
        display: inline-block;
        margin: 0 0 0.4em;
        line-height: 1;
    }
    &__title {
        color:  $color-primary;
        font-size: 7em;
        text-transform: uppercase;
        font-family: 'Vanguard-ExtraBold';
        line-height: 1;
        margin: 0;

        span { 
            color:  $color-secondary;
            display: block;
        }
        sup {
            vertical-align: top;
            font-size: 0.4em;
            position: relative;
            top: 0.3em;
        }
    }
    &__description {
        color:  $color-primary;
        text-transform: uppercase;
        font-size: 3.2em;
        line-height: 1.1;
        margin: 0.5em 0 0.75em;
        letter-spacing: 0.5px;
    }
    &__event {
        border-left: 2px solid $color-secondary;
        color:  $color-primary;
        font-family: 'Gilroy-Regular';
        font-size: 1.8em;
        padding-left: 0.6em;

        .event__participants {
            text-transform: uppercase;
        }
    }
    &__cta {
        color: $color-primary;
        border: 2px solid $color-primary;
        font-size: 3.4em;
        border-radius: 6px;
        font-family: 'Dalton-Maag';
        display: inline-block;
        margin-top: 1.5em;
        margin-left: 7em;
        text-decoration: none;
        overflow: hidden;
        padding: 0.2em 0 0.2em;
        position: relative;
        background: #262625;
        background: -moz-linear-gradient(top, #262625 0%, #000000 100%);
        background: -webkit-linear-gradient(top, #262625 0%,#000000 100%);
        background: linear-gradient(to bottom, #262625 0%,#000000 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262625', endColorstr='#000000',GradientType=0 );
        line-height: 1.2;

        .cta__text {
            padding: 1em 0.8em 1em 0.8em;
            border-left: 0.3em solid $color-secondary;
        }

        &:before {
            content: '';
            height: 100%;
            width: 0.3em;
            position: absolute;
            top: 0;
            left: 0;
            background: #ff8a00;
            background: -moz-linear-gradient(top, #ff8a00 0%, #f75f00 100%);
            background: -webkit-linear-gradient(top, #ff8a00 0%,#f75f00 100%);
            background: linear-gradient(to bottom, #ff8a00 0%,#f75f00 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8a00', endColorstr='#f75f00',GradientType=0 );
        }
    }

    @media (max-width: 768px) {
        background-image: url(../img/backgrounds/bg-mobile.jpg);
        @include fluid-size(font-size, 320px, 768px, 6px, 10px);

        .logo {
            margin: 0 auto;
            max-width: 220px;
            margin-bottom: 2em;
        }

        &__content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        &__cta {
            margin-left: 0;
            align-self: center;
        }
        &__event {
            margin-bottom: 15vw;
        }
    }
}



.offer__keyTerms {
    margin-top: 3em;
    padding: 1.5em 0;
    background: #000;
    color: #fff;
    opacity: 0.8;

    .keyTerms__text {
        font-family: 'Gilroy-Regular';
        text-align: center;
        font-size: 1.4em;
        line-height: 1.5;

        a {
            color: inherit;
        }
        img {
            width: 20px;
            margin-left: 4px;
            vertical-align: middle;
        }
    }

    @media (max-width: 768px) {
        @include fluid-size(font-size, 320px, 768px, 7px, 9px);
    }
}

@media (max-width: 768px) {
    .mobile-button {
        background: #000;
        text-align: center;
        display: block !important;

        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 999;
        padding: 2em 0;
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0.85) 100%);
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 55%,rgba(0,0,0,0.85) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 55%,rgba(0,0,0,0.85) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#d9000000',GradientType=0 );
        transform: translateY(100%);
        transition: all 0.5s;

        @include fluid-size(font-size, 320px, 768px, 6px, 10px);

        .offer__cta {
            margin-top: 0;
        }
    }
    .mobile-button.enter-view {
        transform: translateY(0%);
    }
}