.notice {
    background: #def1fb;
    max-height: 10em;
}
.notice.emergency {
    background: #e95530;
}
.notice.warning {
    background: #ea9a00;
}
.notice .notice-body {
    background: url('/media/sample-site/site-assets/css/css-images/warning_64.png') no-repeat scroll 32px 50%;
    color: #0e4966;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 40px 50px 40px 120px;
    text-decoration: none;
}
.notice a {
    color: #0e4966;
}
.notice a.button {
    width: 150px;
    display: block;
    margin-top: 1.25rem;
    margin-bottom: 0;
    background-color: #0e4966;
    border-color: #0e4966;
    color: #fff;
}

.notice .button:hover,
.notice .button:focus {
    background-color: #990616;
    border-color: #990616;
}   
.notice.warning a.button {
    background-color: #990616;
    border-color: #7a0512;
}
.notice.warning .button:hover,
.notice.warning .button:focus {
    background-color: #7a0512;
    border-color: #7a0512;
}

.notice .fa {
    float: right;
    margin: -50px 16px 0 0;
    font-weight: bold;
    color: #0e4966;
    border: 2px solid #0e4966;
    padding: 2px;
    border-radius: 5px;
    cursor: pointer;
}
.notice.emergency a,
.notice.warning a,
.notice.emergency .fa,
.notice.warning .fa {
    color: #fff;
    border-color: #fff;
}
@media (max-width: 550px) {
    .notice .row span {
        margin: -70px 0 0 0;
    }
}
@media (max-width: 330px) {
    .notice .row span {
        margin: -90px 0 0 0;
    }
}
.notice {
    opacity: 1 !important;
    display: block !important;
}
.notice.closed {
    display: block !important;
    transition: opacity 500ms ease-out, max-height 500ms ease-out !important;
    max-height: 0 !important;
    opacity: 0 !important;
}
.notice.closed .fa {
    display: none !important;
}
.notice.closed a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: padding 500ms ease-out !important;
    max-height: 0 !important;
}





#alert-container .inner {
	//**padding : 20px 20px 0;**//
	overflow : hidden;
}
#alert-container #alert-icon {
	width : 50px;
	height : 50px;
	float : left;
}
#alert-container.critical a {
	color : #FFF;
}
#alert-container.noncritical a {
	color : #333;
}
#alert {
	width : calc(100% - 50px);
	float : right;
}
#alert .title {
	font-size : 18px;
	font-weight : 700;
}
#alert .desc {
	font-size : 14px;
}
#alert .desc p {
	margin : 0;
}
#alert .trigger:hover {
	-webkit-transform : scale(1.1);
	-ms-transform : scale(1.1);
	transform : scale(1.1);
}