/* video container */
.vidBox{
  overflow: visible;
  display: table-cell;
	position:relative;
	background:transparent;
	color:#ccc;
  margin: 0 auto;
}

/* video caption css */

/*** VIDEO CONTROLS CSS ***/
/* control holder */
.vidBox .control{
	background: rgba(0, 0, 0, 0.5);
	color:#ccc;
  position: absolute;
	left:0;
	bottom: -45px;
	width:100%;
	z-index:5;
	height: 45px;
}
/* control top part */
.vidBox .topControl{
	height:11px;
	padding:1px 5px;
}
/* control bottom part */
.vidBox .btmControl{
  display: flex;
  justify-content: space-between;
	clear:both;
  height: 30px;
  background: none;
  padding: 0 5px;
}
.vidBox .control nav.flexNav {
  position:relative;
  display: flex;
}
.vidBox .control nav.flexNav:last-of-type {
  justify-content: flex-end;
}
.vidBox .control div.btn {
  position: relative;
	width:34px;
	height:30px;
	padding:0 5px;
	cursor: pointer;
  display: table-cell;
  border-radius: 0;
  border: none;
}
.vidBox .control div.btnPlay{
	background:url(control.png) no-repeat 0 0;
}
.vidBox .control div.paused{
	background:url(control.png) no-repeat 0 -30px;
}
.vidBox .control div.btnStop{
	background:url(control.png) no-repeat 0 -60px;
}
.vidBox .control div.sound{
	background:url(control.png) no-repeat -88px -30px;
	border:none;
}
.vidBox .control div.sound2{
	background:url(control.png) no-repeat -88px -60px;
}
.vidBox .control div.muted{
	background:url(control.png) no-repeat -88px 0;
}
.vidBox .control div.btnFS{
	background:url(control.png) no-repeat -44px 0;
  padding: 5px;
}
.vidBox .control div.btnCC {
  border:none;
	font-size:24px;
  vertical-align: baseline;
  color: #FFF;
}
.vidBox .control div.CC {
  color: #FC3;
}
.vidBox .control div.btnCfg{
	background:url(control.png) no-repeat -44px -30px;
	border-left:1px solid #404040;
  margin-right: 15px;
}

/* PROGRESS BAR CSS */
/* Progress bar */
.vidBox .progress {
	width:85%;
	height:10px;
	position:relative;
	float:left;
	cursor:pointer;
	background: #444; 
	background:-webkit-linear-gradient(top,#666,#333);
  background:linear-gradient(to bottom,#666,#333);
	box-shadow:0 2px 3px #333 inset;
	border-radius:10px;
}
.vidBox .progress span {
	height:100%;
	position:absolute;
	top:0;
	left:0;
	display:block;
	border-radius:10px;
}
.vidBox .timeBar{
  position:relative;
	z-index:10;
	width:0;
	background: #ffcc33;
	box-shadow:0 0 1px #fff;
}
.vidBox .bufferBar{
  position:relative;
	z-index:5;
	width:0;
	background: #777;
	background:-webkit-linear-gradient(top,#999,#666);
  background:linear-gradient(to bottom,#999,#666);
	box-shadow:2px 0 5px #333;
}
/* time and duration */
.vidBox .time{
  position:relative;
	width:15%;
	float:right;
	text-align:center;
	font-size:11px;
	line-height:12px;
	height: 12px;
	overflow: hidden;
}

/* VOLUME BAR CSS */
/* volume bar */
.vidBox .volume{
	position:relative;
	cursor:pointer;
	width:70px;
	height:10px;
	float:right;
	margin-top:10px;
	margin-right:10px;
  display: table-cell;
}
.vidBox .volumeBar{
	display:block;
	height:10px;
  width: 70%;
	position:absolute;
	top:0;
	left:0;
	background-color:#fc3;
	z-index:10;
}

/* OTHERS CSS */
/* video screen cover */
.vidBox .loading{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(loading.gif) no-repeat 50% 50%;
	z-index:2;
	display:none;
}
.vidBox .init.on{
  position:absolute;
  background:url(bigplay.png) no-repeat 50% 50% !important;
  background-color: transparent;
  background-size: 13% 22%;
	cursor:pointer;
  height:100%;
  width:100%;
  top: 0;
  left: 0;
  opacity:1 !important;
  z-index: 2147483647 !important; 
  transition: opacity 1s ease-out;
}
.vidBox .init.off{
  position:relative;
  height:1px;
  width:1px;
  top: 0;
  left: -999px;
  opacity:0 !important;
  z-index:-1 !important;
  transition: opacity 1s ease-in;
}
.vidBox div.btn div.menu{
	display: none;
  position: relative;
  bottom: 162px;
  background: rgba(0, 0, 0, 0.6);
  background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) 80%,rgba(0, 0, 0, 0));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) 80%,rgba(0, 0, 0, 0));
	width: 130px;
	height: 170px;
	left: -55px;
	padding: 5px;
  cursor: pointer;
}
.vidBox table.panels {
  position:relative;
  width: 100%;
  table-layout: fixed;
  border-spacing: 3px -1px;
  margin: 0;
	padding: 2px;
  font: 700 14px/1.3 Tahoma;
}
.vidBox table.panels thead th {
  position:relative;
  font: inherit;
  width: 50%;
  vertical-align: middle;
  padding-bottom: 5px;
}
.vidBox table.panels thead th:first-child {
  border-right: 1px solid grey;
}
.vidBox table.panels td {
  position:relative;
  font: inherit;
	text-align: left;
	padding: 2px 4px;
	border-radius: 2px;
	margin: 0;
	color: white;
}
.vidBox table.panels tbody tr td:first-child {
  border-right: 1px solid grey;
}
.vidBox div.btnCfg:hover div.menu, .vidBox div.btnCfg div.menu:hover {
	display: block;
	z-index: 2147483647!important;
}

.vidBox table.panels td:hover{
	background: #fc3;
  color: #111;
}
.vidBox table.panels td.blank:hover {
  background: none;
}
.vidBox table.panels td.r.selected, .vidBox table.panels td.q.selected {
	background: #0C94C0 !important;
	color: #111;
}
.vidBox figcaption, figure figcaption{
  margin: 0 0 6px 0;
}
.vidBox video {
  margin: 0 auto;
}
.vidBox:fullscreen{
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
		top: 0;
    left: 0;
}
.vidBox:-webkit-full-screen{
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;	
    top: -20px;
    left: 0;
}
 .vidBox:-moz-full-screen {
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
    top: 0;
    left: 0;	
 }
.vidBox:fullscreen video{
	width: 100%;
	height: 100%;
}
.vidBox:-webkit-full-screen video{
	width: 100%;
	height: 100%;	
}
.vidBox:-moz-full-screen video{
	width: 100%;
	height: 100%;	
}
.vidBox:fullscreen .control{
	background: rgba(0, 0, 0, 0.2);
	opacity: 0.2;
  position: absolute;
   z-index: 0!important;
    bottom: 0
}
.vidBox:-webkit-full-screen .control{
	background: rgba(0, 0, 0, 0.2);
	opacity: 0.2;
  position: absolute;
   z-index: 0!important;
    bottom: 0
}
.vidBox:-moz-full-screen .control{
	background: rgba(0, 0, 0, 0.2);
	opacity: 0.2;
  position: absolute;
   z-index: 0!important;
    bottom: 0
}
.vidBox:fullscreen .control:hover{
z-index: 2147483647!important;
	opacity: 1;
}
.vidBox:-moz-full-screen .control:hover{
z-index: 2147483647!important;
	opacity: 1;
}
.vidBox:-webkit-full-screen .control:hover{
z-index: 2147483647!important;
	opacity: 1;
}
.vidBox:fullscreen figcaption {
  display: none;
}
.vidBox:-moz-full-screen figcaption {
  display: none;
}
.vidBox:-webkit-full-screen figcaption {
  display: none;
}
.vidBox .progress{
	margin-bottom: 0; 
}
#i .vidBox, #ii .vidBox, #iii .vidBox, #iv .vidBox, #v .vidBox, #vi .vidBox, #vii .vidBox {width:720px; margin: 20px 0 20px calc(50% - 360px) !important; }
ul.fq						{ position: relative; left: -20px; width:100%; border: thin solid #88B2EE; background-position: left; color: #DDD; background-color: #555; border-radius: 8px; box-shadow: 2px 3px 2px #777; padding: 0 3px 3px 5px; }
ul.fq > li							{ margin: 0 0 3px 25px; list-style-type:none}	
ul.fq > li::before {font-family:FontAwesome;content:"\f00c\a0\a0";font-size:1em;color:#88C1FF;font-weight:100;}
ul.fq > li:last-child	{ margin: 0 0 7px 25px; }
ul.fq.fq > p { margin: 0 3px 5px 10px; display:inline-block; }
ul.fq > h6 { margin: 0 0 0 12px;display:inline-block; }

ul.fq > h6:first-of-type { margin: 6px 0 5px 10px; }
ul.fq > h6:nth-of-type(3), ul.fq > h6:nth-of-type(5) {display:block;margin-bottom:0 !important}
ul.fq > h6+p::after { content:' ';display:table}