/* Default Alert Bar */
.ez-alert {
    background: #b50404;
    padding: 20px 75px 20px 35px;
    color: #fff;
    position: relative;
}
    .ez-alert h1,
    .ez-alert h2,
    .ez-alert h3,
    .ez-alert h4,
    .ez-alert p,
    .ez-alert li {
        color: #fff !important;
    }
    .ez-alert p {
        margin: 0;
    }
    .ez-alert a {
        color: #fff !important;
        text-decoration: underline !important;
    }
        .ez-alert a:hover,
        .ez-alert a:focus {
            text-decoration: none !important;
        }

    /* Title */
    .ez-alert > h2 {
        display: inline-block;
        margin: 0 0 0.35rem 0;
        font-size: 1.05rem;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0.01rem;
      }

    /* Alert */
    .ez-alert > p {
        font-size: 0.9rem;
    }

/* Close */
.ez-alert .close {
    position: absolute;
    right: 25px;
    top: 25px;
    width: 35px;
    height: 35px;
    border: solid 2px rgba(255,255,255,1);
    border-radius: 50%;
    opacity: 0.7;
}
.ez-alert .close:hover,
.ez-alert .close:focus {
    opacity: 1;
    cursor: pointer;
}
.ez-alert .close:before,
.ez-alert .close:after {
    position: absolute;
    left: 15px;
    top: 5px;
    content: ' ';
    height: 20px;
    width: 2px;
    background-color: rgba(255,255,255,1);
}
.ez-alert .close:before {
    transform: rotate(45deg);
}
.ez-alert .close:after {
    transform: rotate(-45deg);
}
.ez-alert .close span {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px !important;
    width: 1px !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute;
    display: block;
}


/* Custom Alert Classes */

/* Green */
.ez-alert.green {
    background: #03ab6e;
}

/* Orange */
.ez-alert.orange {
    background: #c16604;
}

/* Blue */
.ez-alert.blue {
    background: #005587;
}

@media only screen and (min-width: 0) and (max-width: 1025px) {
    .ez-alert {
        padding: 15px 60px 17px 20px;
    }
        .ez-alert > p {
            font-size: 0.8rem;
            line-height: 1.1rem;
        }
   .ez-alert .close {
       top: 16px;
       right: 16px;
   }
   .ez-alert .close {
       width: 27px;
       height: 27px;
   }
   .ez-alert .close:before,
   .ez-alert .close:after {
       height: 16px;
       left: 11px;
   }
}