.alert-area {
    display: none;
    max-height: 100%;
    position: fixed;
    top: 10px;
    left: 20px;
    right: 20px;
    z-index: 10000;
}

    .alert-area.show {
        display: block;
    }

    .alert-area.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s;
        -moz-animation: fadein 0.5s;
        -o-animation: fadein 0.5s;
        animation: fadein 0.5s;
    }

.alert-box {
    font-size: 16px;
    color: #2B3E44;
    background: #EFF3F5;
    line-height: 1.3em;
    padding: 10px 15px;
    margin: 5px 10px;
    position: relative;
    border-radius: 5px;
    transition: opacity 0.5s ease-in;
}

.alert-area .close-button {
    position: absolute;
    top: 0;
    right: 5px;
    padding: 2px;
    font-size: 24px;
    border-width: 0;
    background: transparent;
    cursor: pointer;
}

    .alert-area .close-button:before {
        content: '\D7';
    }

.alert-area h1 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #2B3E44 !important;
}

.alert-area p {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    color: #2B3E44 !important;
    letter-spacing: .05em;
    line-height: 1.2em;
}

@media (max-width: 767px) and (min-width: 481px) {
    .alert-area {
        left: 100px;
        right: 100px;
    }
}

/*#region fadein*/
@-webkit-keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 10px;
        opacity: 1;
    }
}

@-moz-keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 10px;
        opacity: 1;
    }
}

@-o-keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 10px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 10px;
        opacity: 1;
    }
}
/*#endregion*/