div.announcement-bar {
    position: fixed;
    width: 100%;
    z-index: 99999;
    top: 0;
    padding: 0;
}

    div.announcement-bar .announcement-box {
        padding: 3rem;
        background: #75a6ff;
        display: none;
    }

        div.announcement-bar .announcement-box .announcement-box-title {
            width: 20rem;
            background: #578cec;
            padding: 0.5rem;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.1pt;
            font-size: 1.5rem;
            display: inline-block;
            float: left;
        }

            div.announcement-bar .announcement-box .announcement-box-title p {
                margin-bottom: 0;
            }

        div.announcement-bar .announcement-box .announcement-box-content {
            width: calc(100% - 38rem);
            display: inline-block;
            float: left;
            padding: 0.5rem;
            margin-left: 3rem;
            padding-top: 0rem;
        }

        div.announcement-bar .announcement-box .announcement-box-button {
            width: 6rem;
            display: inline-block;
            float: left;
            margin-left: 4rem;
        }

            div.announcement-bar .announcement-box .announcement-box-button span.text {
                font-size: 1rem;
                border-bottom: 1px solid black;
            }

            div.announcement-bar .announcement-box .announcement-box-button span.fa {
                font-size: 1rem;
                margin-left: 0.5rem;
            }

        div.announcement-bar .announcement-box .announcement-box-close {
            margin-left: 3rem;
            font-size: 2rem;
            cursor: pointer;
            display: inline-block;
            float: left;
            vertical-align: top;
        }

            div.announcement-bar .announcement-box .announcement-box-close:hover {
                color: black;
                cursor: pointer;
            }

        div.announcement-bar .announcement-box:nth-child(even) {
            background: #578cec;
        }

            div.announcement-bar .announcement-box:nth-child(even) .announcement-box-title {
                background: #2967d8;
            }

@media screen and (max-width: 1024px) {

    div.announcement-bar .announcement-box {
        padding: 0.5rem;
    }

        div.announcement-bar .announcement-box .announcement-box-title {
            width: 100%;
        }

        div.announcement-bar .announcement-box div.announcement-box-content {
            width: 100%;
            display: block;
            margin-left: 0;
            padding-top: 0.5rem;
        }

        div.announcement-bar .announcement-box .announcement-box-button {
            margin-left: 0.5rem;
            margin-top: 0rem;
        }

        div.announcement-bar .announcement-box .announcement-box-close {
            position: absolute;
            right: 0;
            top: 0;
            margin-right: 1.25rem;
            margin-top: 1rem;
        }
}