.top-banner-grid {
    @include background(linear-gradient(left, $bluejay 0%, $bluejay-dark 100%));
    animation: bannerFadeIn 700ms ease-in;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 90% center;
    color: $white;
    font-size: 15px;
    max-height: 800px;
    overflow: hidden;

    &.bannerslideup {
        animation: bannerFadeOut 700ms ease-in;
        max-height: 0;
    }

    .banner-content {
        float: left;
        padding: 20px 28px;
        width: calc(100% - 38px);

        .survey-link {
            color: $fox;
            text-decoration: underline;
        }

    }

    .dismiss-banner-btn {
        background: url('/images/redesign/cross-icon.svg') no-repeat center center;
        background-size: contain;
        color: $white;
        cursor: pointer;
        float: left;
        height: 20px;
        line-height: 20px;
        margin: 20px 0;
        width: 10px;
    }

}

.finetunes,
.email-notification {
    border: none;
    background: none;
    margin-bottom: 0;
    padding: 0;

    a {
        text-decoration: underline;
    }

    .dismiss-banner-btn {
        background: none;
        
        &:before {
            content: '\e014';
            display: inline-block;
            font-family: 'Glyphicons Halflings';
            position: relative;
        }

    }

}

.finetunes {

    .dismiss-banner-btn {

        &:before {
            color: $bluejay;
        }

    }

}

.email-notification {

    &.alert {
        margin-top: 0;
    }

    b {
        font-weight: $font-weight-bold;
    }

    .banner-content {
        background-image: url('../oa/images/alert-warning-icon.svg');
        background-repeat: no-repeat;
        background-position: 10px 26px;
        padding-left: 55px;
    }

    .dismiss-banner-btn {

        &:before {
            color: #e18752;
        }

    }

}

@keyframes bannerFadeIn {

    from {
        max-height: 0;
        opacity: 0;
    }

    to {
        max-height: 200px;
        opacity: 1;
    }

}

@keyframes bannerFadeOut {

    from {
        max-height: 200px;
        opacity: 1;
    }

    to {
        max-height: 0;
        opacity: 0;
    }

}