/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url("./font/MaterialIcons-Regular.eot"); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url("./font/MaterialIcons-Regular.woff2") format('woff2'),
    url("./font/MaterialIcons-Regular.woff") format('woff'),
    url("./font/MaterialIcons-Regular.ttf") format('truetype');	
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

	.wrapper508video{background:#000; position:relative; overflow:hidden; font-family:'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif'; width:100%;}

	.wrapper508video.fullscreen{position:fixed; top:0px; left:0px; width:100% !important; height:100% !important; z-index: 100000000}

	.wrapper508video.error{background:#000; color:#FFF; display:flex; justify-content: center; align-items: center; text-align: center;}

	.wrapper508video .title{
		z-index:4;
		position:absolute;
		top:0px; left:0px;
		color:#FFF;
		padding:.5em .75em 1.5em .75em;
		opacity:0;
		transition:.2s;
		font-size:14px;		
		width:100%;
		background: rgb(255,0,0);
		background: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
		background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
		background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	}
	.wrapper508video:hover .title{
		opacity:1;
	}

	.wrapper508video video{height:100%; width:100%; background:#000; z-index:1}	

	
	.wrapper508video .initplaypause{
		position:absolute; top:0px; left:0px; right:0px; bottom:0px;
		margin:auto; 
		width:100%;
		border:none;
		background:rgba(0,0,0,.8);
		color:#CCC;
		font-weight:bold;
		transition:.1s;
		z-index:2;
	}
	.wrapper508video .initplaypause .playicon{font-size:60px}	
	.wrapper508video .initplaypause:hover{color:#FFF; cursor:pointer;}		
	
	.wrapper508video .controls{		
		display:flex;
		background: rgb(0,0,0);
		background: -webkit-linear-gradient(bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
		background: -o-linear-gradient(bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
		background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
		color:#FFF;
		height:30px;
		width:100%;
		position:absolute; bottom:-60px; left:0px;
		padding-top:30px;
		transition:.2s;
		justify-content: space-between;
		align-items:flex-end;
		z-index:3
	}
	
	.wrapper508video:hover .controls{
		bottom:0px;
	}	
	
	.wrapper508video .controls button{color:#CCC; border:0px; background:none; cursor:pointer;}
	.wrapper508video .controls button.active{color:#b1e959 !important; text-shadow:0px 0px 2px #000;}	
	.wrapper508video .controls button:hover{color:#FFF;}
	
	.wrapper508video .controls .progresswrapper{
		flex-grow:10000;
		position: relative;		
		margin-right:10px;
		margin-bottom:12px;
	}
	.wrapper508video .controls .progresswrapper input{
		position:absolute;top:0px; left:0px; width:100%;
		margin:0px;
		cursor:pointer;	
		background:none;
	}
	.wrapper508video .controls .progresswrapper progress{
		background:#FFF !important;;
		border:1px solid #000;
		height:6px;	
		margin-bottom:0px;
		transition:.1s;
		width:100%;
	}
	.wrapper508video .controls .progresswrapper:hover progress{
		height:14px;
		margin-bottom:-4px;	
	}		
	.wrapper508video .controls .progresswrapper progress:not([value]),
	.wrapper508video .controls .progresswrapper progress[value]::-webkit-progress-bar{
		background:#FFF;
		border-radius:2px;
	}
	.wrapper508video .controls .progresswrapper progress[value]{
		background:#72b431;
		border-radius:2px;
		-webkit-appearance: none;
     	-moz-appearance: none;
        appearance: none;
		border:none;
	}
	
.wrapper508video .controls .time{font-size:12px; margin-bottom:9px;}

	.wrapper508video .controls .audiowrapper{
		width:100px;
		position: relative;		
		margin-right:10px;
		margin-bottom:12px;
	}
	.wrapper508video .controls .audiowrapper input{
		position:absolute;top:0px; left:0px; width:100%;
		margin:0px;
		cursor:pointer;	
		background:none;
	}
	.wrapper508video .controls .audiowrapper progress{
		background:#FFF !important;;
		border:1px solid #000;
		height:6px;	
		margin-bottom:0px;
		transition:.1s;
		width:100%;
	}
	.wrapper508video .controls .audiowrapper:hover progress{
		height:14px;
		margin-bottom:-4px;	
	}		
	.wrapper508video .controls .audiowrapper progress:not([value]),
	.wrapper508video .controls .audiowrapper progress[value]::-webkit-progress-bar{
		background:#FFF;
		border-radius:2px;
	}
	.wrapper508video .controls .audiowrapper progress[value]{
		background:#72b431;
		border-radius:2px;
		-webkit-appearance: none;
     	-moz-appearance: none;
        appearance: none;
		border:none;
	}
	
	.wrapper508video input[type=range] {
	  height: 21px;
	  -webkit-appearance: none;
	  margin: 10px 0;
	  width: 100%;
	}
	.wrapper508video input[type=range]:focus {
	  outline: none;
	}
	.wrapper508video input[type=range]::-webkit-slider-runnable-track {
	  width: 100%;
	  height: 1px;
	  cursor: pointer;
	  animate: 0.2s;
	  box-shadow: 0px 0px 0px #000000;
	  background: rgba(0,0,0,0);
	  border-radius: 0px;
	  border: 0px solid #000000;
	}
	.wrapper508video input[type=range]::-webkit-slider-thumb {
	  box-shadow: 0px 0px 0px #000000;
	  border: 0px solid #000000;
	  height: 15px;
	  width: 15px;
	  border-radius: 50px;
	  background: rgba(0,0,0,0);
	  cursor: pointer;
	  -webkit-appearance: none;
	  margin-top: -7px;
	}
	.wrapper508video input[type=range]:focus::-webkit-slider-runnable-track {
	  background: rgba(0,0,0,0);
	}
	.wrapper508video input[type=range]::-moz-range-track {
	  width: 100%;
	  height: 1px;
	  cursor: pointer;
	  animate: 0.2s;
	  box-shadow: 0px 0px 0px #000000;
	  background: rgba(0,0,0,0);
	  border-radius: 0px;
	  border: 0px solid #000000;
	}
	.wrapper508video input[type=range]::-moz-range-thumb {
	  box-shadow: 0px 0px 0px #000000;
	  border: 0px solid #000000;
	  height: 15px;
	  width: 15px;
	  border-radius: 50px;
	  background: rgba(0,0,0,0);
	  cursor: pointer;
	}
	.wrapper508video input[type=range]::-ms-track {
	  width: 100%;
	  height: 1px;
	  cursor: pointer;
	  animate: 0.2s;
	  background: transparent;
	  border-color: transparent;
	  color: transparent;
	}
	.wrapper508video input[type=range]::-ms-fill-lower {
	  background: rgba(0,0,0,0);
	  border: 0px solid #000000;
	  border-radius: 0px;
	  box-shadow: 0px 0px 0px #000000;
	}
	.wrapper508video input[type=range]::-ms-fill-upper {
	  background: #rgba(0,0,0,0);
	  border: 0px solid #000000;
	  border-radius: 0px;
	  box-shadow: 0px 0px 0px #000000;
	}
	.wrapper508video input[type=range]::-ms-thumb {
	  margin-top: 1px;
	  box-shadow: 0px 0px 0px #000000;
	  border: 0px solid #000000;
	  height: 15px;
	  width: 15px;
	  border-radius: 50px;
	  background: rgba(0,0,0,0);
	  cursor: pointer;
	}
	.wrapper508video input[type=range]:focus::-ms-fill-lower {
	  background: rgba(0,0,0,0);
	}
	.wrapper508video input[type=range]:focus::-ms-fill-upper {
	  background: rgba(0,0,0,0);
	}
			
	.wrapper508video video::cue {
		background:#000;		
  		color: #FFF;
	}