body { background: #e8e8e8; }
.container { margin: 0 auto; }

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

/* Frame */
.frame {
	height: 185px;
	line-height: 140px;
	overflow: hidden;
	padding: 0;
	margin: 0;
/* 
	border: 1px solid orange;
 */
/*	margin-bottom: 10px; */
}

.frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}

/* -------------------------------------------------------------------- */
/* Dynamic queries to adjust item spacing depending on screen sizes etc */
/* -------------------------------------------------------------------- */

/* default */
	.frame ul li {
/* 
		background: white; 
 */
		float: left;
		width: 106px;
		height: 100%;
		margin: 0 0 0 0;
		padding: 0;
	/* 
		background: #666; 
	 */
		color: #ddd;
		text-align: center;
		cursor: pointer;
	}

/* iphone screen, ipad mini etc change man sly widths to fit nicely */
@media (min-width: 320px) {
	.frame ul li {
/* 
		background: yellow; 
 */
		width: 105px;
	}
}

/* small screen, ipad mini etc change man sly widths to fit nicely */
@media (min-width: 600px) {
	.frame ul li {
/* 
		background: red; 
 */
		width: 111px;
	}
}

/* small screen, ipad mini etc change man sly widths to fit nicely */
/* widths are subtley different between browser and ipad mini vertical */
/* this is for desktop */
@media (min-width: 768px) {
	.frame ul li {
/* 
		background: blue; 
 */
		width: 125px;
	}
}

/* iPad Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
	.frame ul li {
/* 
		background: blue; 
 */
		width: 121px;
	}
}

/* everything else */
@media (min-width: 992px) {
	.frame ul li {
/* 
		background: green; 
 */
/* 
		width: 130px;
 */
		width: 139px;
	}
}

/* -------------------------------------------------------------------- */

.frame ul li.active {
	color: #fff;
/* 
	background: #404040;
 */
/* 
	background: #a03232;
 */
/* 
	background: #C7B299;	
 */
}

.muzines button, .muzines button { background: transparent; border: 0; color: #fff; opacity: .5; }
.muzines button:hover, .muzines button:hover { opacity: 1; }
.muzines button:disabled, .muzines button:disabled { opacity: .2; }

/* 
.muzines .forward, .muzines .backward { float: left; width: 30px; height: 150px; margin-top: 10px; font-size: 30px; }
.muzines .forward { float: right; }
 */

.muzines .forward, .muzines .backward { width: 30px; height: 150px; margin-top: 10px; font-size: 30px; }
.muzines .forward { position: absolute; margin-left: 970px; }
.muzines .backward { position: absolute; margin-left: -40px; }

/* iPad landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
	.muzines .forward, .muzines .backward { display: none; }
}

/* iPad portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
	.muzines .forward, .muzines .backward { display: none; }
}

@media (max-width: 991px) {
.muzines .forward { position: absolute; margin-left: 750px; }

@media (max-width: 768px) {
	.muzines .forward, .muzines .backward { display: none; }
}


/* Controls */
.controls { margin: 25px 0; text-align: center; }