.notification-bar {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 999999;
}

.notification-text {
    background-color: #182e4fde;
    padding: 12.5px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    position: absolute;
    width: 100%;

    -webkit-animation: initiate 350ms ease;
    -moz-animation: initiate 350ms ease;
    -o-animation: initiate 350ms ease;
    animation: initiate 350ms ease;
}

.notification-bar input {
    display: none;
}

.notification-bar label {
    cursor: pointer;
    color: #fff;
    position: absolute;
    z-index: 5;
    display: inline-block;

    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.notification-bar label[for=hide] {
    right: 20px;
    top: 20px;
    width: 50px;
    height: 50px;
    background: url(../img/banner/close.png) no-repeat center center;

    -webkit-animation: initiate 350ms ease;
    -moz-animation: initiate 350ms ease;
    -o-animation: initiate 350ms ease;
    animation: initiate 350ms ease;
}

.notification-bar label[for=show] {
    width: 75px;
    height: 70px;
    border-radius: 0px 0px 3px 3px;
    right: 10px;
    background: url(../img/banner/warn.png) no-repeat center center #3566b0db;
}

.notification-bar input[value=show]:checked~label[for=show],
.notification-bar input[value=hide]:checked~label[for=hide],
.notification-bar input[value=hide]:checked~.notification-text {
    -webkit-transition: ease 350ms;
    -moz-transition: ease 350ms;
    -o-transition: ease 350ms;
    transition: ease 350ms;

    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

.notification-bar input[value=hide]:checked~label[for=show],
.notification-bar input[value=show]:checked~label[for=hide],
.notification-bar input[value=show]:checked~.notification-text {
    -webkit-transition: ease 350ms;
    -moz-transition: ease 350ms;
    -o-transition: ease 350ms;
    transition: ease 350ms;

    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
}

@media (min-width: 320px) and (max-width: 480px) {

    .notification-bar label[for=show] {
        right: 70px;
    }

    .notification-bar label[for=hide] {
        right: -7px;
    }

}