/* 
Customized marquee.css per client request to slow down the marquee scrolling

-------------------------------------------------------
Copyright (c) 2017, Ranta Consulting Inc.

Last Updated: BJ Nguyen
*/
#SchoolAlert {
	color: red;
}

.marquee {
    display:block;
	width: 100%;
    height: auto;
	min-height: 40px;
	/*margin: 10px auto;*/
	overflow:hidden;
	position: relative;
    /*z-index:9998;*/
    font-size:1em;
	/*border: 0 solid #000;*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /*
    -webkit-box-shadow: inset 0 2px 2px  rgba(0, 0, 0, .5), 0 1px 0  rgba(250, 250, 250, .2);
    box-shadow: inset 0 2px 2px  rgba(0, 0, 0, .5), 0 1px 0  rgba(250, 250, 250, .2);
    */
	-webkit-transition: background-color 350ms;
	-moz-transition: background-color 350ms;
    -o-transition: background-color 350ms;
    transition: background-color 350ms;
}

    .marquee li {
        position: absolute;
        font-family: Tahoma, Arial, sans-serif;
        width: 0;
        height: 100%;
        margin: 0 5px;
        line-height: 25px;
        text-align: center;
        /*text-shadow: 1px 1px 0 #ff0000;
        filter: dropshadow(color=#ff0000, offx=1, offy=1);*/
        -moz-transform: translateY(100%);
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
        transform: translateY(100%);
        list-style:none;
        padding:0;
    }
@media (min-width:333px) and (max-width:645px) {
    .marquee {min-height: 65px;}
    .marquee li {font-size:85%;text-shadow: none; filter: none;}
}
@media (max-width: 332px) {
    .marquee {min-height: 65px;}
    .marquee li {font-size:80%;height: 100%;margin:0 auto;text-shadow: none; filter: none;line-height: 21px;}
}
.marquee li.active {
	-moz-animation: left-one 18s linear normal;
	-o-animation: left-one 18s linear normal;
	-webkit-animation: left-one 18s linear normal;
	animation: left-one 18s linear normal;
	width: 100%;
	animation-iteration-count: infinite;
}
.marquee.down li.active {
    -moz-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -moz-animation: down-one 12s ease normal;
    -o-animation: down-one 12s ease normal;
    -webkit-animation: down-one 12s ease normal;
    animation: down-one 12s ease normal;
    width:100%;
}

.marquee.up li.active {
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -o-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -moz-animation: up-one 12s ease normal;
    -o-animation: up-one 12s ease normal;
    -webkit-animation: up-one 12s ease normal;
    animation: up-one 12s ease normal;
    width:100%;
}
/*================================
	Move the Marquee to the Left
==================================*/
/* css standard keyframes*/
@keyframes left-one {
    0% {
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
	45% {
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1.0;
	}

	50% {
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1.0;
	}

	55% {
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1.0;
	}
	65% {
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1.0;
	}
    100% {
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0.0;
    }
}


@keyframes down-one {
    0%  {
        transform:translateY(-100%);
        opacity:0.0;
    }
    10% {
        transform:translateY(0);
        opacity:1.0;
    }
    40% {
        transform:translateY(0);
    }
    50% {
        transform:translateY(100%);
        opacity:0.0;
    }
    100%{
        transform:translateY(100%);
        opacity:0.0;
    }
}

@keyframes up-one {
	0% {
		transform:translateY(100%);
	}
	10% {
		transform:translateY(0);
	}
	40% {
		transform:translateY(0);
	}
	50% {
		transform:translateY(-100%);
	}
	100%{
		transform:translateY(-100%);
	}
}

/** Mozilla Firefox Keyframes **/
@-moz-keyframes left-one {
    0% {
        -moz-transform: translateX(100%);
    }
	45% {
		-moz-transform: translateX(0);
		opacity: 1.0;
	}

	50% {
		-moz-transform: translateX(0);
		opacity: 1.0;
	}

	55% {
		-moz-transform: translateX(0);
		opacity: 1.0;
	}
	65% {
		-moz-transform: translateX(0);
		opacity: 1.0;
	}
    100% {
        -moz-transform: translateX(-100%);
        opacity: 0.0;
    }
}
/** Webkit Keyframes **/
@-webkit-keyframes left-one {
    0% {
        -webkit-transform: translateX(100%);
    }
	45% {
		-webkit-transform: translateX(0);
		opacity: 1.0;
	}

	50% {
		-webkit-transform: translateX(0);
		opacity: 1.0;
	}

	55% {
		-webkit-transform: translateX(0);
		opacity: 1.0;
	}
	65% {
		-webkit-transform: translateX(0);
		opacity: 1.0;
	}
    100% {
        -webkit-transform: translateX(-100%);
        opacity: 0.0;
    }
}


/*================================
	Move the Marquee Downwards
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes down-one {
	0%	{
		-moz-transform:translateY(-100%);
	}
	10% {
		-moz-transform:translateY(0);
	}
	40% {
		-moz-transform:translateY(0);
	}
	50% {
		-moz-transform:translateY(100%);
	}
	100%{
		-moz-transform:translateY(100%);
	}
}


/** Webkit Keyframes **/
@-webkit-keyframes down-one {
	0% {
		-webkit-transform:translateY(-100%);
	}
	10% {
		-webkit-transform:translateY(0);
	}
	40% {
		-webkit-transform:translateY(0);
	}
	50% {
		-webkit-transform:translateY(100%);
	}
	100%{
		-webkit-transform:translateY(100%);
	}
}


/*================================
	Move the Marquee Upwards
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes up-one {
	0%	{
		-moz-transform:translateY(100%);
	}
	10% {
		-moz-transform:translateY(0);
	}
	40% {
		-moz-transform:translateY(0);
	}
	50% {
		-moz-transform:translateY(-100%);
	}
	100%{
		-moz-transform:translateY(-100%);
	}
}


/** Webkit Keyframes **/
@-webkit-keyframes up-one {
	0% {
		-webkit-transform:translateY(100%);
	}
	10% {
		-webkit-transform:translateY(0);
	}
	40% {
		-webkit-transform:translateY(0);
	}
	50% {
		-webkit-transform:translateY(-100%);
	}
	100%{
		-webkit-transform:translateY(-100%);
	}
}

/* opera Keyframes*/
@-o-keyframes left-one {
    0% {
        -o-transform: translateX(100%);
    }
    25% {
        -o-transform: translateX(0);
        opacity: 1.0;
    }
    75% {
        -o-transform: translateX(0);
        opacity: 1.0;
    }
    85% {
        -o-transform: translateX(-100%);
        opacity: 0.0;
    }
    100% {
        -o-transform: translateX(-100%);
        opacity: 0.0;
    }
}

@-o-keyframes down-one {
    0%  {
        -o-transform:translateY(-100%);
    }
    10% {
        -o-transform:translateY(0);
    }
    40% {
        -o-transform:translateY(0);
    }
    50% {
        -o-transform:translateY(100%);
    }
    100%{
        -o-transform:translateY(100%);
    }
}

@-o-keyframes up-one {
	0% {
		-o-transform:translateY(100%);
	}
	10% {
		-o-transform:translateY(0);
	}
	40% {
		-o-transform:translateY(0);
	}
	50% {
		-o-transform:translateY(-100%);
	}
	100%{
		-o-transform:translateY(-100%);
	}
}