/* Service wind-down notice. Kept in a separate file so the generated
   common.css build is not touched. Safe to delete once the notice is over. */

/* --- site-wide bar, sits above the navbar on every page --- */
.sunset-bar {
    background: #fff4d6;
    border-bottom: 1px solid #ecdcac;
    color: #5c4a1c;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    padding: 11px 0;
}
.sunset-bar strong {
    font-weight: 500;
}
.sunset-bar a {
    color: #5c4a1c;
    text-decoration: underline;
    white-space: nowrap;
}
.sunset-bar a:hover,
.sunset-bar a:focus {
    color: #5c4a1c;
    text-decoration: none;
}

/* The notice is taller than the store badge row it replaces, so let the
   header photo grow with it instead of the box spilling onto white. */
#header {
    height: auto;
    min-height: 717px;
    padding-bottom: 50px;
}
@media (max-width: 767px) {
    #header {
        min-height: 0;
        padding-bottom: 30px;
    }
}

/* --- notice in the homepage header, replaces the store badges --- */
.sunset-hero {
    max-width: 640px;
    margin: 4px 0 18px;
    padding: 22px 26px;
    background: rgba(0, 0, 0, .55);
    border-left: 4px solid #32b677;
    border-radius: 3px;
    /* the header centres text on small screens; keep the notice left-aligned
       so the heading and the paragraphs do not disagree */
    text-align: left;
}
.sunset-hero h2 {
    margin: 0 0 12px;
    padding: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
}
.sunset-hero p {
    margin: 0 0 10px;
    color: #e9edef;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.55;
    text-align: left;
}
.sunset-hero p:last-of-type {
    margin-bottom: 0;
}
.sunset-hero .sunset-keeps-working {
    color: #fff;
}

/* download block inside the notice */
.sunset-hero .sunset-desktop-lead {
    margin: 18px 0 8px;
    color: #fff;
}
.sunset-hero .sunset-actions {
    margin-top: 0;
}
.sunset-hero .sunset-actions .btn-primary {
    background-color: #32b677;
    border-color: #2ba066;
    padding: 9px 20px;
    font-size: 15px;
}
.sunset-hero .sunset-actions .btn-primary:hover,
.sunset-hero .sunset-actions .btn-primary:focus {
    background-color: #2ba066;
    border-color: #258b58;
}
.sunset-hero .sunset-actions .os-note {
    margin: 8px 0 0;
    color: #c7cdd1;
    font-size: 13px;
    text-align: left;
}
.sunset-hero .sunset-actions .showlink {
    display: inline-block;
    margin-top: 10px;
    color: #fff;
    font-size: 14px;
    text-decoration: underline;
    opacity: .75;
}
.sunset-hero .sunset-actions .showlink:hover {
    opacity: 1;
    text-decoration: none;
}
.sunset-hero .sunset-actions #allDownloads {
    color: #e9edef;
    font-size: 14px;
}
.sunset-hero .sunset-actions #allDownloads ul {
    margin: 6px 0 0;
    padding-left: 18px;
}
.sunset-hero .sunset-support {
    margin-top: 16px;
    color: #c7cdd1;
    font-size: 14px;
}
.sunset-hero .sunset-support a {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .sunset-hero {
        max-width: none;
        margin: 0 0 16px;
        padding: 18px 18px;
    }
    .sunset-hero h2 {
        font-size: 20px;
    }
    .sunset-hero p {
        font-size: 15px;
    }
    .sunset-bar {
        font-size: 13px;
        padding: 9px 0;
    }
    .sunset-bar a {
        white-space: normal;
    }
}