﻿/* Animation properties */
.slide {
	animation: slide 20s 10s infinite;
	animation-fill-mode:both;
}

/* Keyframes */
@keyframes slide {
	0%,20% {
/*		opacity: 0.5;	*/
		transform:translateX(0%) translateY(-1.35%);
	}
	25%,45% {
/*		opacity: 0.5;	*/
		transform:translateX(0%) translateY(18.65%);
	}
	50%,70% {
/*		opacity: 0.5;	*/
		transform:translateX(0%) translateY(38.65%);
	}
	75%,95% {
/*		opacity: 0.5;	*/
		transform:translateX(0%) translateY(58.65%);
	}
	100% {
/*		opacity: 0.5;	*/
		transform:translateX(0%) translateY(78.65%);
	}
}


/* General styles and layout */
body {
	background: #000;
	margin:0;
	padding:0;
	overflow: hidden;
}

.main-demo {
	width:1000px;
	height:120px;
	background-color:#ffbb99;
	position: absolute;
	left:50%;
	top:0;
	transform: translate(-50%,0);
  
}

.slide {
	position: absolute;
	bottom: -0.5em;
	width:100%;
}



/*** Media queries for adjusting to different screen sizes ***/

@media only screen and (max-width: 600px) {
  .main-demo {
    font-size: 10px;
  }
}

@media only screen and (max-width: 480px) {
  .main-demo {
    font-size: 7px;
  }
}
