@font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot?cdimjx');
	src: url('fonts/icomoon.eot?cdimjx#iefix') format('embedded-opentype'),
	url('fonts/icomoon.woff2?cdimjx') format('woff2'),
	url('fonts/icomoon.ttf?cdimjx') format('truetype'),
	url('fonts/icomoon.woff?cdimjx') format('woff'),
	url('fonts/icomoon.svg?cdimjx#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}



@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-bold-webfont.woff2') format('woff2'),
	url('fonts/roboto-bold-webfont.woff') format('woff');
	font-weight: 600;


}




@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-light-webfont.woff2') format('woff2'),
	url('fonts/roboto-light-webfont.woff') format('woff');
	font-weight: 300;


}




@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-medium-webfont.woff2') format('woff2'),
	url('fonts/roboto-medium-webfont.woff') format('woff');
	font-weight: 500;


}




@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-regular-webfont.woff2') format('woff2'),
	url('fonts/roboto-regular-webfont.woff') format('woff');
	font-weight: 400;

}














[class^="icon-"],
[class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-Icon-awesome-fire:before {
	content: "\e900";
	color: #fff;
}

.icon-Icon-awesome-snowflake:before {
	content: "\e901";
	color: #fff;
}

.icon-Icon-awesome-water:before {
	content: "\e902";
	color: #fff;
}

.icon-Icon-awesome-wind:before {
	content: "\e903";
	color: #fff;
}

.icon-Icon-weather-smoke:before {
	content: "\e904";
	color: #fff;
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	line-height: 1;
}

body {


	width: 100vw;
	height: 100vh;
	font-size: 62.5%;

	font-family: roboto;
	display: flex;
	flex-direction: column;

}



.water {

	background: linear-gradient(110deg, rgba(104, 148, 250, 1) 10%, rgba(87, 92, 241, 1) 100%);
}

.fire {
	background: linear-gradient(110deg, rgba(246, 189, 3, 1) 10%, rgba(255, 61, 0, 1) 100%);
}

.alert-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 1px 3px 8px rgba(0, 0, 0, .35);
	height: 8vw;
	width: 8vw;
	border-radius: 50%;
	POSITION: ABSOLUTE;
	left: -2vw;
	top: -1vh;
	z-index: 999999;
	opacity: 0;
	opacity: 0;
	transform: scale(0);
}
.alert-icon-anim{
	animation: anim2 15s ease-in-out forwards;
}
.icon {
	font-size: 3.5vw;
	
	opacity: 0;
}
.icon-anim{
	animation: anim2 19s ease-in-out forwards;
	animation-delay: .2s;
}
.first-line {
	display: flex;
	align-items: center;
	background-color: #2C1259;
	border-radius: 200px;
	min-height: 4.5vw;
	flex: 1 1 50%;
	padding: 0 2vw 0 8vw;
	z-index: 2;
	width: 100%;
	opacity: 0;
}
.first-line-anim{
	animation: anim .4s ease-in-out forwards;
	animation-delay: 1s;
}
.alert-cont {
	display: flex;
	position: relative;
	justify-content: center;
	width: 100%;
	max-height: 8vw;
	margin: 4vw;
	
	max-width: 85%;

}
.hide-alert-cont{
	animation: anim3 .6s ease-out forwards;

}

.title {
	font-weight: 600;
	color: #fff;
	font-size: 2vw;
	flex: 1 1 40%;
}

.time-cont {
	display: flex;
	align-items: center;
	flex: 1 1 60%;
	justify-content: flex-end;
	animation: anim .2s ease-out forwards;
	animation-delay: 1.3s;
	opacity: 0;


}

.warning {
	padding: .5rem 1.25rem;
	background-color: #FF2300;
	color: white;
	display: inline-block;
	border-radius: 25px;
	font-size: 1vw;
	font-family: roboto;
	font-weight: 500;
	margin-left: 2rem;
	box-shadow: 1px 6px 18px rgba(17, 17, 42, 0.44);
	animation: colorChange 2s ease-in-out infinite;
}

.date {
	color: #E8DAFF;
	font-size: 1.25vw;
	font-weight: 400;
}

.second-line {
	background-color: #fff;
	display: flex;
	align-items: center;
	border-radius: 200px;
	min-height: 2.5vw;
	z-index: -1;
	box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.26);
	padding: 0 0 0 8vw;
	width: 85%;
	opacity: 0;

}
.second-line-anim{
	animation: anim1 .6s ease-out forwards;
	animation-delay: 1.8s;
}
.desc {
	color: #4A2A82;
	font-size: 1.2vw;
	line-height: 3vw;
    padding-right: 3vw;
	height: 3vw;
	overflow: hidden;
}
#smtext{
	position: relative;
	top: 0
}

.line-holder {
	width: 100%;
}

@media (max-width: 1000px) {
	.alert-icon {
		top: -.5vh;
	}
}

@keyframes anim {
	0% {
		opacity: 0;
		transform: translateX(-100vw);
	}

	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}


@keyframes anim1 {
	0% {
		opacity: 0;
		transform: translateY(-100px);
	}

	75% {
		opacity: 0;
	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}





@keyframes anim2 {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	10% {
		opacity: 1;
		transform: scale(1.1);
	}

	20% {
		opacity: 1;
		transform: scale(1);
	}

	30% {
		opacity: 1;
		transform: scale(1.1);
	}


	40% {
		opacity: 1;
		transform: scale(1);
	}



	50% {
		opacity: 1;
		transform: scale(1.1);
	}



	60% {
		opacity: 1;
		transform: scale(1);
	}


	70% {
		opacity: 1;
		transform: scale(1.1);
	}



	80% {
		opacity: 1;
		transform: scale(1);
	}


	90% {
		opacity: 1;
		transform: scale(1.1);
	}




	100% {
		opacity: 1;
		transform: scale(1);
	}

}


@keyframes colorChange {

	0% {
		background-color: #FF2300;
	}


	50% {
		background-color: #d82509
	}


	100% {
		background-color: #FF2300;
	}
}

@keyframes anim3 {
	0% {
		opacity: 1;
		transform: translate(0, 0);

	}

	25% {
		opacity: 1;
		transform: translate(0, 200px);

	}

	100% {
		opacity: 0;
		transform: translate(-100%, 200px);
	}
}