@charset "utf-8";
/* CSS Document */

/* Example wrapper */
.wrap {
	position: relative;
	margin: 3em 0;
}

.horizontal_scrollbar_row {
	margin-top: 5px !important;
	margin-bottom: 5px !important;
	display: flex;
    align-items: center;
}

/* Frame */
.frame {
	height: 322px;
	/*line-height: 322px;*/
	overflow: hidden;
}
.frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}
.frame ul li {
	width:230px;
	padding: 5px;
	margin-left:2px;
	margin-right:2px;
	float: left;
	background: #fff;
	color: #ddd;
	text-align: center;
	cursor: pointer;
	border-radius: 15px;
	
}
.frame ul li.active {
	/*color: #fff;
	background: #66FFFF;*/
	background: -moz-linear-gradient(90deg, #FF00FF 0%, #00FF33 100%);
	background: -webkit-linear-gradient(90deg, #FF00FF 0%, #00FF33 100%);
	background: -o-linear-gradient(90deg, #FF00FF 0%, #00FF33 100%);
	background: -ms-linear-gradient(90deg, #FF00FF 0%, #00FF33 100%);
	background: linear-gradient(90deg, #FF00FF 0%, #00FF33 100%);
}

.horizontal_scrollbar_row {
	margin-top: 5px !important;
	margin-bottom: 5px !important;
	display: flex;
    align-items: center;
}

/* Scrollbar */
.scrollbar {
	margin-top: 5px;
	height: 20px;
	line-height: 0;	
	border-radius: 15px;
	border-style: dotted;
  	border-width: 0.01em;
	fill: #00FF33;
	border-color: #00FF33;
	border-color: -moz-linear-gradient(270deg, #FF00FF 0%, #00FF33 100%);
	border-color: -webkit-linear-gradient(270deg, #FF00FF 0%, #00FF33 100%);
	border-color: -o-linear-gradient(270deg, #FF00FF 0%, #00FF33 100%);
	border-color: -ms-linear-gradient(270deg, #FF00FF 0%, #00FF33 100%);
	border-color: linear-gradient(270deg, #FF00FF 0%, #00FF33 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 10s infinite linear;
}
.scrollbar .handle {
	width: 100px;
	height: 100%;
	background: #00FF00;
	cursor: pointer;
	border-radius: 15px;
}
.scrollbar .handle .mousearea {
	top: -9px;
	left: 0;
	width: 100%;
	height: 20px;
}

/* Pages */
.pages {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	text-align: center;
}
.pages li {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 4px;
	text-indent: -999px;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.pages li:hover {
	background: #aaa;
}
.pages li.active {
	background: #666;
}

/* Controls */
.controls { text-align: right; }

/* One Item Per Frame example*/
.oneperframe { height: 300px; line-height: 300px; }
.oneperframe ul li { width: 1140px; }
.oneperframe ul li.active { background: #333; }

/* Crazy example */
.crazy ul li:nth-child(2n) { width: 100px; margin: 0 4px 0 20px; }
.crazy ul li:nth-child(3n) { width: 300px; margin: 0 10px 0 5px; }
.crazy ul li:nth-child(4n) { width: 400px; margin: 0 30px 0 2px; }