figure {
	max-width:450px;
	max-width:28.125rem;
	width:100%;
	height:100%;
	max-height:300px;
	max-height:18.75rem;
	margin:0px auto;
	margin:0rem auto;
	padding:0px;
	padding:0%;
	background-color:#0d8581;
	border:1px solid #000000;
}
video {
	width:100%;
}

/* controls */
.controls, .controls > * {
	padding:0;
	margin:0;
}
.controls {
	overflow:hidden;
	background:transparent;
	width:100%;
	height:8.0971659919028340080971659919028%; /* of figure's height */
	position:relative;
}
.controls[data-state=hidden] {
	display:none;
}
.controls[data-state=visible] {
	display:block;
}
.controls > * {
	float:left;
/*
	width:3.90625%;
	height:100%;
	margin-left:0.1953125%;
*/
	width:3.7778%;
	height:100%;
	margin-left:0.8889%;
	display:block;
}
.controls > *:first-child {
	margin-left:4px;
}
.controls .progress {
	cursor:pointer;
/*	width:75.390625%; */
	width:70.222%;
}
.controls button {
	text-align:center;
	overflow:hidden;
	white-space:nowrap;
  	text-overflow:ellipsis;
  	border:none;
  	cursor:pointer;
  	text-indent:-99999px;
  	background:transparent;
  	background-size:contain;
  	background-repeat:no-repeat;
/*	added for spacing between video and controls */
	margin-top:4px;
}
.controls button:hover, .controls button:focus {
	opacity:0.5;
}
.controls button[data-state="play"] {
	background-image: url('../img/menubridge/PlayButton.png');
}
.controls button[data-state="pause"] {
	background-image: url('../img/menubridge/PauseButton.png');
}
.controls button[data-state="stop"] {
	background-image: url('../img/menubridge/StopButton.png');
}
.controls button[data-state="mute"] {
	background-image: url('../img/menubridge/VolumeButton.png');
}
.controls button[data-state="unmute"] {
	background-image: url('../img/menubridge/MuteButton.png');
}
.controls button[data-state="volup"] {
	background-image: url('../img/menubridge/VolumePlusButton.png');
}
.controls button[data-state="voldown"] {
	background-image: url('../img/menubridge/VolumeMinusButton.png');
}
.controls button[data-state="go-fullscreen"] {
	background-image: url('../img/menubridge/FullscreenButton.png');
}
.controls button[data-state="cancel-fullscreen"] {
	background-image: url('../img/menubridge/ScreenRestore.png');
}
.controls progress {
	display:block;
	width:100%;
	height:81%;
	margin-top:2px;
	margin-top:0.125rem;
	border:none;
	overflow:hidden;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	color:#0095dd; /* Internet Explorer uses this value as the progress bar's value colour */
}
.controls progress[data-state="fake"] {
	background:#e6e6e6;
	height:65%;
}
.controls progress span {
	width:0%;
	height:100%;
	display:inline-block;
	background-color:#2a84cd;
}

.controls progress::-moz-progress-bar {
	background-color:#0095dd;
}
/* Chrome requires its own rule for this, otherwise it ignores it */
.controls progress::-webkit-progress-value {
	background-color:#0095dd;
}

/* fullscreen */
html:-ms-fullscreen {
	width:100%;
}
:-webkit-full-screen {
	background-color:transparent;
}
video:-webkit-full-screen + .controls {
	background:#ccc; /* required for Chrome which doesn't heed the transparent value set above */
}
video:-webkit-full-screen + .controls progress {
	margin-top:0.5rem;
}

/* hide controls on fullscreen with WebKit */
figure[data-fullscreen=true] video::-webkit-media-controls {
	display:none !important;
}
figure[data-fullscreen=true] {
	max-width:100%;
	width:100%;
	margin:0;
	padding:0;
	max-height:100%;
}
figure[data-fullscreen=true] video {
	height:auto;
}
figure[data-fullscreen=true] figcaption {
	display:none;
}
figure[data-fullscreen=true] .controls {
	position:absolute;
	left:0px;
	bottom:2%;
	width:100%;
/*	z-index:2147483647; */
	z-index:30;
}
figure[data-fullscreen=true] .controls li {
	width:5%;
}
figure[data-fullscreen=true] .controls .progress {
	width:68%;
}

/* Media Queries */

@media screen and (max-width:4096px) {
	figure {
		padding-left:0;
		padding-right:0;
		height:auto;
	}
	.controls {
		/* we want the buttons to be proportionally bigger, so give their parent a set height */
		height:34px;
		height:2.126rem;
	}
}

@media screen and (max-width:42.5em) {
	.controls {
		height:auto;
	}
	.controls > * {
		display:block;
		width:16.6667%;
		margin-left:0;
		height:40px;
		height:2.5rem;
		margin-top:2.5rem;
	}
	.controls .progress {
		/*display:table-caption;*/
		/* this trick doesn't work as elements are floated and the layout doesn't work */
		position:absolute;
		top:0;
		width:100%;
		float:none;
		margin-top:0;
	}
	.controls .progress progress {
		width:98%;
		margin:0 auto;
	}
	.controls button {
		background-position:center center;
	}
	figcaption {
		text-align:center;
		margin-top:0.5rem;
	}
}

#mbcontainer {
	width:1024px;
	margin:0 auto;
	text-align:left;
}
.mbhead {
	width:1024px;
	height:110px;
	overflow:hidden;
	float:left;
	background-color:#ffffff;
}
.mbheadnav {
	width:1024px;
	height:40px;
	overflow:hidden;
	float:left;
	background-color:#000000;
}
.mbnav {
	float:left;
	width:150px;
	height:40px;
	padding-top:12px;
	text-align:center;
}
.mbnavends {
	float:left;
	width:62px;
	height:40px;
}
.mbnavref {
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}
.after-box {
	clear: left;
}
#mbcontent {
	width:1024px;
	float: left;
	background: #fff;
}
.mbicon {
	float:left;
	width:190px;
	height:190px;
	padding:15px;
	font-size:15px;
	font-weight:bold;
	color:#000000;
	text-align:center;
}
.mbiconend3 {
	float:left;
	width:182px;
	height:190px;
}
.mbiconend2 {
	float:left;
	width:292px;
	height:190px;
}