.modal {visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; margin: auto; height: 0; background: rgba(0,0,0,0); transition: background 500ms, height 0ms 500ms, visibility 0ms 500ms; }
.modal.m-active {visibility: visible; height: 100%; background: rgba(0,0,0,0.4); transition: background 500ms; }
.modal-contain { position: absolute; top: 0; bottom: 0; left: -92%; overflow: auto; padding: 1.5em; width: 92%; background: #fff; transition: background 500ms, height 0ms 500ms; }
.modal.m-active .modal-contain { left: 0; box-shadow: 0 0 2em 0 rgba(0,0,0,0.5); }
.modal-close { position: absolute; top: 0.4em; right: 0.5em; color: #ccc; }

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media only screen and (min-width: 46.5em){
	.modal { overflow: hidden; height: 0; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 500ms, height 0ms 500ms, visibility 0ms 500ms; }
	.modal.m-active { height: 100%; background: rgba(0,0,0,0.4); opacity: 1; transition: opacity 500ms; }
	.modal-contain { top: -4em; right: 0; bottom: 4em; left: 0; margin: auto; max-width: 30em; max-height: 28em; transition: top 500ms, bottom 500ms; }
	.modal.m-active .modal-contain { top: 0; bottom: 0; }
	.modal-close { position: absolute; right: 0.5em; }
}

.alert-bar { color: #fff; line-height: 1.5; padding: 0.6em 0; text-align: center; font-size: 0.9rem; position: relative; z-index: 9999; }
.alert-bar .fa {line-height: 1;padding-right: 0.6em;}
.alert-bar .button {font-size: 0.7em;padding: 0.4em 1em;background: #043f5e;margin: 0 0 0 2em;}

.alert-bar.red { background-color: #943838; }
.alert-bar.orange { background-color: #EE8B3F; }
.alert-bar.blue { background-color: #5F4FA0; }
.alert-bar.green { background-color: #599A43; }