/* CSS Document */

#tips, #tips li{
	margin:0;
	padding:0;
	list-style:none;
	filter:drop-shadow(9px 9px 9px black);
	}
#tips{
	width:inherit;
	line-height:80%;
	}
#tips li{
	padding:0;
	display:none; /* hide the items at first only */
	}

.AnimationContainer {
    font-size:25px;
    text-align:center;
    width: 27vw;
    height: 4vh;
    margin-top:1vw;
    margin-bottom:1vh;
	margin:auto;
	color:white;
	font-family:"Segoe UI Light" !important;
	
    animation-name: flip;
    animation-duration: 6s;
	transform-origin: top center;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    
    -moz-animation-name: flip;
    -moz-animation-duration: 5s;
	-moz-transform-origin: top center;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function: ease-in;
    
    -o-animation-name: flip;
    -o-animation-duration: 5s;
	-o-transform-origin: top center;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: ease-in;
    
    -webkit-animation-name: flip;
    -webkit-animation-duration: 5s;
	-webkittransform-origin: top center;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in;
}

/*---------------------------------------------------animation-------------------------------------------------------*/


@-webkit-keyframes flip {
	0% {
		-webkit-transform: perspective(400px) rotateX(90deg);
		animation-timing-function: ease-out;
	}
	5% {
		-webkit-transform: perspective(400px) rotateX(0deg);
		animation-timing-function: ease-out;
	}
	
	80% {
		-webkit-transform: perspective(400px) rotateX(0deg);
		animation-timing-function: ease-out;
	}
	100% {
		-webkit-transform: perspective(400px) rotateX(-270deg);
		animation-timing-function: ease-out;
	}
}
@-ms-keyframes flip {
	0% {
		-ms-transform: perspective(400px) rotateX(90deg);
		animation-timing-function: ease-out;
	}
	5% {
		-ms-transform: perspective(400px) rotateX(0deg);
		animation-timing-function: ease-out;
	}
	
	80% {
		-ms-transform: perspective(400px) rotateX(0deg);
		animation-timing-function: ease-out;
	}
	100% {
		-ms-transform: perspective(400px) rotateX(-270deg);
		animation-timing-function: ease-out;
	}
}
@-moz-keyframes flip {
	0% {
		-moz-transform: perspective(400px) rotateX(90deg);
		animation-timing-function: ease-out;
	}
	5% {
		-moz-transform: perspective(400px) rotateX(0deg);
		animation-timing-function: ease-out;
	}
	
	80% {
		-moz-transform: perspective(400px) rotateX(0deg);
		animation-timing-function: ease-out;
	}
	100% {
		-moz-transform: perspective(400px) rotateX(-270deg);
		animation-timing-function: ease-out;
	}
}
@-o-keyframes flip {
	0% {
		-o-transform: perspective(400px) rotateX(90deg);
		animation-timing-function: ease-out;
	}
	5% {
		-o-transform: perspective(400px) rotateX(0deg);
		animation-timing-function: ease-out;
	}
	
	80% {
		-o-transform: perspective(400px) rotateX(0deg);
		animation-timing-function: ease-out;
	}
	100% {
		-o-transform: perspective(400px) rotateX(-270deg);
		animation-timing-function: ease-out;
	}
}
@keyframes flip {
	0% {
		transform: perspective(400px) rotateX(90deg);
		animation-timing-function: ease-out;
	}
	5% {
		transform: perspective(400px) rotateX(0deg);
		animation-timing-function: ease-out;
	}
	
	80% {
		transform: perspective(400px) rotateX(0deg);
		animation-timing-function: ease-out;
	}
	100% {
		transform: perspective(400px) rotateX(-270deg);
		animation-timing-function: ease-out;
	}
}