@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}

#alert {
    position:absolute;
        top:4%;
        left:10%;
        right:10%;
        text-align:left;
        display:inherit;
        border-top-width: 5px;
        border-right-width: 15px;
        border-bottom-width: 15px;
        border-left-width: 15px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-color: #E00;
display:block;
z-index:99999;
        background-color:#FFF;
}
#alertHeader {
        font-family: Verdana, Geneva, sans-serif;
        font-size:24px;
        font-style:normal;
        font-weight:bold;
        color: #000000;
        background-color: #E00;
        text-align: center;
z-index:0;
}
#alertHeading {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        font-weight:bold;
        color:#C00;
        padding-top: 8px;
        padding-right: 4px;
        padding-bottom: 0px;
        padding-left: 8px;
z-index:0;
}
#alertContent {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
        padding-top: 0px;
        padding-right: 8px;
        padding-bottom: 8px;
        padding-left: 8px;
        
z-index:0;
}
#alertFooter {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 10px;
        font-weight:bold;
        text-align: right;
        vertical-align:bottom;
z-index:0;
}

/*Weather Alert Information*/
#weather-alert {
    position: absolute;
    top: 2.5%;
    left: 10%;
    right: 10%;
	z-index: 99999;
	height:630px;
	background-image:url('https://niu.edu/emergencyinfo/images/altgeld-university-closure.jpg');
	background-size: cover;
	background-position: center center;
	background-color:#ffffff;
    padding: 2em 0;
    text-align: left;
    display: inherit;
    border-top-width: 5px;
    border-right-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 5px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
 	border-color: rgba(0,0,0,.8);
	font-family: Arial, sans-serif;
	color: #ffffff!important;
}

#weather-alertHeader { 
    z-index: 0;
	position: absolute;
    top: 30%;
    left: 30%;
    transform: translate(-20%, -50%);
	background-color:rgba(0,0,0,.8);
	width: 80%;
	display:none;
}

#weather-alertHeader h2 { 
	font-weight:600;
	font-size: 2rem;
    font-size: 3.5vw!important;
	text-transform: uppercase;
	color: #ffffff!important;
    text-align: center;
	padding:0 1em;
}


#weather-alertContent {
    padding-top: 10px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    z-index: 99999;
    position: absolute;
    bottom: 10px;
	left:10px;
	width:98%;
	text-align: center;
	color: #ffffff!important;
	background-color:rgba(0,0,0,.8);
}
	#weather-alertContent p{
    font-weight: 300;
    font-size: 1.5rem;
    font-size: 1.5vw!important;
	color: #ffffff!important;
}
#weather-alertFooter {
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    vertical-align: bottom;
    z-index: 0;
}

#weather-alert a{
    color:#ffffff!important;
    z-index: 99999;
}

/*#weather-alert a.btn{*/
/* color:#000000;*/
/* margin-bottom:1em;*/
/*}*/

@media (min-width:768px) and (max-width:922px){
	/* Smartphone View*/
#weather-alert {
    position: absolute;
    top: 2.5%;
    left: 10%;
    right: 10%;
	z-index: 99999;
	height:550px;
}
	#weather-alertHeader h2{
    font-weight: 600;
    font-size: 2.5rem;
    font-size: 3.5vw!important;
	line-height: 1.5;
	margin-top:5px;
			color: #ffffff!important;
}
#weather-alertContent {
    padding-top: 10px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    z-index: 0;
    position: absolute;
    bottom: 10px;
	left:10px;
	width:96%;
	text-align: center;
	background-color:rgba(0,0,0,.8);
	color: #ffffff!important;
}
	#weather-alertContent p{
    font-weight: 300;
    font-size: 2rem;
    font-size: 2vw!important;
	color: #ffffff!important;
}
 }

@media(max-width:767px){
	/* Smartphone View*/
#weather-alert {
    position: absolute;
    top: 2.5%;
    left: 10%;
    right: 10%;
	z-index: 99999;
	height:450px;
}
#weather-alertHeader { 
    z-index: 0;
	position: absolute;
    top: 20%;
    left: 30%;
    transform: translate(-20%, -50%);
	background-color:rgba(0,0,0,.8);
	widows: 80%;
}
	#weather-alertHeader h2{
    font-weight: 600;
    font-size: 2.5rem;
    font-size: 3vw!important;
	line-height: 1.5;
	margin-top:5px;
}
#weather-alertContent {
    padding-top: 10px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    z-index: 0;
    position: absolute;
    bottom: 10px;
	left:10px;
	width:94%;
	text-align: center;
	background-color:rgba(0,0,0,.8);
	color: #ffffff!important;
}
	#weather-alertContent p{
    font-weight: 300;
    font-size: 1.4rem;
    font-size: 2.5vw!important;
		color: #ffffff!important;
}
 }
@media(max-width:480px){
	/* Small Smartphone View*/
#weather-alert {
    position: absolute;
    top: 2.5%;
    left: 10%;
    right: 10%;
	z-index: 99999;
	height:400px;
}
#weather-alertHeader { 
    z-index: 0;
	position: absolute;
    top: 20%;
    left: 30%;
    transform: translate(-20%, -50%);
	background-color:rgba(0,0,0,.8);
	widows: 80%;
}
	#weather-alertHeader h2{
    font-weight: 600;
    font-size: 2.5rem;
    font-size: 3.5vw!important;
	line-height: 1.5;
	margin-top:5px;
}
#weather-alertContent {

    padding-top: 10px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    z-index: 0;
    position: absolute;
    bottom: 10px;
	left:10px;
	width:92%;
	text-align: center;
	background-color:rgba(0,0,0,.8);
	color: #ffffff!important;
}
	#weather-alertContent p{
    font-weight: 300;
    font-size: 1.5rem;
    font-size: 3.45vw!important;
	color: #ffffff!important;
}
 }