<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	<link rel="icon" sizes="192x192" href="logo192.png">
	<link rel="icon" sizes="512x512" href="logo512.png">
	<link rel="image_src" href="{{channel_poster}}">
	<link rel="canonical" href="{{url}}">
	<title>{{channel_name}}</title>
	<meta name="description" content="{{channel_description}}">
	{{#if channel_creator_name}}
	<meta name="author" content="{{channel_creator_name}}">
	{{/if}}
    <meta property="og:site_name" content="{{title}}">
    <meta property="og:url" content="{{url}}">
    <meta property="og:title" content="{{channel_name}}">
    <meta property="og:image" content="{{channel_poster}}">
    <meta property="og:image:width" content="{{channel_width}}">
    <meta property="og:image:height" content="{{channel_height}}">
    <meta property="og:description" content="{{channel_description}}">
    <meta property="og:type" content="video.other">
	<meta property="og:video:url" content="{{url}}">
	<meta property="og:video:secure_url" content="{{url}}">
	<meta property="og:video:type" content="text/html">
	<meta property="og:video:width" content="{{channel_width}}">
    <meta property="og:video:height" content="{{channel_height}}">
	<meta name="twitter:card" content="player">
	<meta name="twitter:url" content="{{url}}">
	<meta name="twitter:title" content="{{channel_name}}">
	<meta name="twitter:description" content="{{channel_description}}">
	<meta name="twitter:image" content="{{channel_poster}}">
	<meta name="twitter:player" content="{{url}}">
	<meta name="twitter:player:width" content="{{channel_width}}">
    <meta name="twitter:player:height" content="{{channel_height}}">
	<link rel="alternate" type="application/json+oembed" href="channels/{{channel_id}}/oembed.json" title="{{channel_name}}">
	<link rel="alternate" type="text/xml+oembed" href="channels/{{channel_id}}/oembed.xml" title="{{channel_name}}">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap"/>
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&amp;display=block">
	{{#ifEquals player "videojs"}}
	<link href="player/videojs/dist/video-js.min.css" rel="stylesheet">
	<link href="player/videojs/dist/video-js-skin.min.css" rel="stylesheet">
	<link href="player/videojs/dist/videojs-overlay.min.css" rel="stylesheet">
	<link href="player/videojs/dist/videojs-license.min.css" rel="stylesheet">
	{{/ifEquals}}
	<style>
		/**	flexboxgrid 6.3.1 **/
		.container,.container-fluid{margin-right:auto;margin-left:auto}.container-fluid{padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}@media only screen and (min-width:48em){.container{width:49rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-11{margin-left:91.66666667%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:64em){.container{width:65rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-0,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-11{margin-left:91.66666667%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:75em){.container{width:76rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-11{margin-left:91.66666667%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}
	</style>
	<style>
		/** flexboxgrid extention hide/show **/
		.hide-xs{display:block}.show-xs{display:none}.hide-sm{display:block}.show-sm{display:none}.hide-md{display:block}.show-md{display:none}.hide-lg{display:block}.show-lg{display:none}@media only screen and (min-width:48em){.hide-sm{display:none}.show-sm{display:block}}@media only screen and (min-width:64em){.hide-md{display:none}.show-md{display:block}}@media only screen and (min-width:75em){.hide-lg{display:none}.show-lg{display:block}}
	</style>
	<style>
		/** basics **/
		body {
			color: {{textcolor_default}};
			font-family: 'Roboto';
			font-size: 18px;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			background-color: {{bgcolor_default}};
			{{#if bgimage_url}}background: {{bgcolor_default}} url('{{bgimage_url}}') no-repeat fixed left top;{{/if}}
			background-size: cover;
			left: 0;
			margin-top: 0;
			margin-bottom: 0;
		}
		hr {
			border: none;
			border-top: 2px solid {{hrcolor}};
			height: 2px;
			margin: 0;
		}
		a {
			color: {{textcolor_link}};
			text-decoration: none;
		}
		a:hover {
			color: {{textcolor_link_hover}};
			text-decoration: underline;
		}
		.inline-icon {
			font-size: 18px !important;
			vertical-align: bottom;
		}
		.right-align {
			text-align: right;
			float: right;
		}
		.max-width {
			max-width: 1400px;
		}

		/** header **/
		.header {
			background-color: {{bgcolor_header}};
		}
		.header-title {
			color: {{textcolor_title}};
			font-size: 1.4rem;
			font-weight: 400;
			padding-left: .5em;
		}
		@media only screen and (min-width: 48em) {
			.header-title {
				padding-left: 1.2em;
			}
		}

		/** main grid **/
		.main {
			background: {{bgcolor_default}};
			align-content: baseline;
			height: 100%;
		}
		@media only screen and (min-width: 48em) {
			.main {
				background: {{bgcolor_default}};
				padding-top: 1.5em;
			}
		}

		/**	player **/
		.player-l1 {
			margin: 0em -0.5em 0em -0.5em;
		}
		@media only screen and (min-width: 48em) {
			.player-l1 {
				margin: 0em 0em 0em 1.5em;;
			}
		}
		.player-l2 {
			max-height: 980px;
			padding-left: 0;
			padding-right: 0;
		}
		.player-l3 {
			position: relative;
			width: 100%;
			padding-top: 56.25%;
		}
		.player-l4 {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: #000!important;
			max-height: 980px;
		}
		[data-player] {
			max-height: 980px;
		}
		.clappr-watermark[data-watermark-top-left] {
			top: 20px !important;
			left: 35px !important;
		}
		.clappr-watermark[data-watermark-top-right] {
			top: 20px !important;
			right: 35px !important;
		}
		.clappr-watermark[data-watermark-bottom-left] {
			bottom: 20px !important;
			left: 35px !important;
		}
		.clappr-watermark[data-watermark-bottom-right] {
			bottom: 20px !important;
			right: 35px !important;
		}

		/** channel content **/
		.content {
			padding: 1.5em 1em 1.5em 1em;
		}
		@media only screen and (min-width: 48em) {
			.content {
				padding: 1.5em .5em 1.5em 2em;
			}
		}
		.content-headline {
			color: {{textcolor_title}};
			font-size: 1.5rem;
			font-weight: 500;
		}
		.content-description {
			margin-bottom: 1.4em;
			margin-right: 0em;
		}
		@media only screen and (min-width: 48em) {
			.content-description {
				margin-right: 2em;
			}
		}
		.channel-stats {
			color: {{textcolor_title}};
			font-weight: 500;
			padding-top: 0.6em;
			padding-bottom: 0.8em;
		}
		.channel-stats-icon {
			color: {{textcolor_title}};
			font-size: 1.3rem !important;
			height: 1em;
			margin-right: 0.5em;
		}
		.channel-license-image {
			margin-top: .3em;
		}

		/** channel list **/
		.channel-list-link:hover {
			text-decoration: none;
		}
		.channel-list-sidebar {
			max-width: 390px;
			padding-right: 1.5em;
		}
		.channel-list-inside {
			margin-bottom: 1.6em;
		}
		.channel-list-l1 {
			background-color: {{bgcolor_unselected}};
			margin-left: 0em;
			margin-right: 0em;
			margin-bottom: 1em;
		}
		.channel-list-l1:hover {
			background-color: {{bgcolor_selected}};
		}
		.channel-list-l2 {
			display: flex;
		}
		.channel-list-selected {
			background-color: {{bgcolor_selected}};
		}
		.channel-list-image {
			height: auto;
			max-height: 90px;
			width: 100%;
			min-width: 130px;
			max-width: 130px;
			margin-left: -7px;
		}
		.channel-list-badge {
			display: none;
			position: absolute;
			font-weight: bold;
			background-color: rgb(193, 39, 45);
			border-radius: 4px;
			align-self: flex-end;
			margin-bottom: 5px;
			padding: 1px 5px 2px 4px;
		}
		.channel-list-description {
			width: 100%;
			font-size: 1rem;
			line-height: 1rem;
			text-overflow: ellipsis;
			white-space: normal;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			max-height: 2rem;
			overflow: hidden;
			display: -webkit-box;
			margin: 0px 0px 5px 0px;
			padding: 5px 10px 0px 20px;
		}
		.channel-list-description-stats {
			font-size: .8rem;
			line-height: 1rem;
			text-overflow: ellipsis;
			white-space: normal;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			max-height: 2rem;
			overflow: hidden;
			display: -webkit-box;
			padding: 0px 10px 0px 20px;
		}

		/**	share icons **/
		.btn-share {
			color: {{textcolor_link}};
			text-decoration: none;
		}
		.btn-share:hover {
			color: {{textcolor_link_hover}};
			text-decoration: none;
		}
		.share-icons {
			fill: {{textcolor_link}};
			text-decoration: none;
		}
		.share-icons:hover {
			fill: {{textcolor_link_hover}};
			text-decoration: none;
			transform: scale(1.2);
		}

		/** inject3 **/
		.inject3 {
			padding: 1.3em 0em 1em 0em;
		}

		/**	footer**/
		.footer {
			padding: 1.4em 0em 0em 0em;
			margin-left: -1em;
			margin-right: -1em;
		}
		.footer-link {
			margin-right: 1em;
		}

		/** modal boxes **/
		.modal {
			display: none;
			justify-content: center;
			align-items: center;
			position: fixed;
			z-index: 1000;
			left: 8px;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgb(0,0,0,.4);
		}
		.modal-content {
			background-color: {{bgcolor_default}};
			padding: 20px;
		}
		.modal-content-header {
			justify-content: space-between;
			display: flex;
			align-items: center;
			margin-top: -20px;
		}
		.modal-content-body {
			justify-content: space-between;
			display: flex;
		}
		.close {
			color: {{textcolor_title}};
			float: right;
			font-size: 28px;
			font-weight: bold;
		}
		.close:hover,
		.close:focus {
			color: {{textcolor_title}};
			text-decoration: none;
			cursor: pointer;
		}
		.modal-share {
			max-width: 340px;
		}
	</style>
	{{{inject1}}}
</head>
<body>
	<div class="row">
		<div class="col-xs-12 middle-xs header">
			<h1 class="header-title">{{title}}</h1>
		</div>
	</div>
	<div class="row max-width">
		<div class="col-xs-12 col-sm-8 main">
			<div class="row player-l1">
				<div class="col-xs-12 player-l2">
					<div class="player-l3">
						{{#ifEquals player "videojs"}}
						<video id="player" class="vjs-public video-js player-l4" playsinline></video>
						{{else}}
						<div id="player" class="player-l4"></div>
						{{/ifEquals}}
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12 content">
					<div class="row">
						<div class="col-xs-12">
							<div class="row">
								<div class="col-xs-12">
									<h2 class="content-headline">{{channel_name}}</h2>
								</div>
							</div>
							<hr>
							<div class="row col-middle-xs channel-stats">
								<div class="col-xs-9 middle-xs">
									<span id="channel_stats_current_{{channel_id}}"></span> <span class="material-icons inline-icon channel-stats-icon">remove_red_eye</span>
									<span id="channel_stats_sum_{{channel_id}}"></span> <span class="material-icons inline-icon channel-stats-icon">trending_up</span>
									<span id="channel_stats_runtime_{{channel_id}}"></span> <span class="material-icons inline-icon channel-stats-icon">live_tv</span>
								</div>
								<div class="col-xs-3 middle-xs right-align">
									{{#if share}}
									<a id="btn-share" href="#"><span class="material-icons inline-icon">share</span> SHARE</a>
									{{/if}}
								</div>
							</div>
							<hr>
							<div class="row">
								<div class="col-xs-12">
									<p class="content-description">
										{{{channel_description_html}}}
									</p>
									<p class="content-description">
										{{#if channel_creator_name}}
										<strong>Creator:</strong> <a id="btn-creator" href="#">{{channel_creator_name}}</a><br />
										{{/if}}
										{{#if channel_license}}
										{{#ifnoteq channel_license "none"}}
										<strong>Content license:</strong><br />
										<a id="license" target="_blank" rel="noopener"><img id="license_image" class="channel-license-image" height="40" width="114" /></a>
										{{/ifnoteq}}
										{{/if}}
									</p>
								</div>
							</div>
							<div class="row show-xs hide-sm">
								{{#if inject2}}
								<div class="col-xs-12">
									{{{inject2}}}
								</div>
								{{/if}}
								<div class="col-xs-12">
									<h2 class="content-headline">Channels</h2>
								</div>
								<div class="col-xs-12 channel-list-inside">
									{{#each channels}}
									<a class="channel-list-link" href="/playersite_{{this.channelid}}.html" target="_self">
										<div class="row channel-list-l1 {{#ifEquals @root.channel_id this.channelid}}channel-list-selected{{/ifEquals}}">
											<div class="col-xs-12 middle-xs channel-list-l2">
												<span id="channel_list_badge_{{this.channelid}}_1" class="channel-list-badge">LIVE</span>
												<img src="/memfs/{{this.channelid}}.jpg" class="channel-list-image">
												<div class="row">
													<div class="channel-list-description">
														{{this.name}}
													</div>
													<div class="channel-list-description-stats">
														Views <span id="channel_list_stats_sum_{{this.channelid}}_1"></span>
													</div>
												</div>
											</div>
										</div>
									</a>
									{{/each}}
								</div>
							</div>
							<hr />
							{{#if inject3}}
							<div class="col-xs-12 inject3">
								{{{inject3}}}
							</div>
							<hr />
							{{/if}}
							<div class="col-xs-12">
								<div class="row footer">
									<div class="col-xs-4 middle-xs">
										{{#if imprint_html}}
										<a id="btn-imprint" href="#" class="footer-link">Imprint</a>
										{{/if}}
										{{#if terms_html}}
										<a id="btn-terms" href="#" class="footer-link">Terms</a>
										{{/if}}
									</div>
									{{#if support}}
									<div class="col-xs-8 right-align">
										Powered by <a href="https://github.com/datarhei/restreamer" target="blank" rel="noopener">datarhei Restreamer</a>
									</div>
									{{/if}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xs-12 col-sm-4 hide-xs show-sm" >
			<div class="row channel-list-sidebar main">
				{{#if inject2}}
				<div class="col-xs-12">
					{{{inject2}}}
				</div>
				{{/if}}
				<div class="col-xs-12">
					<h2 class="content-headline">Channels</h2>
				</div>
				<div class="col-xs-12 col-sm-12">
					{{#each channels}}
					<a class="channel-list-link" href="/playersite_{{this.channelid}}.html" target="_self">
						<div class="row channel-list-l1 {{#ifEquals @root.channel_id this.channelid}}channel-list-selected{{/ifEquals}}">
							<div class="col-xs-12 middle-xs channel-list-l2">
								<span id="channel_list_badge_{{this.channelid}}_2" class="channel-list-badge">LIVE</span>
								<img src="/memfs/{{this.channelid}}.jpg" class="channel-list-image">
								<div class="row">
									<div class="channel-list-description">
										{{this.name}}
									</div><br />
									<div class="channel-list-description-stats">
										Views <span id="channel_list_stats_sum_{{this.channelid}}_2"></span>
									</div>
								</div>
							</div>
						</div>
					</a>
					{{/each}}
				</div>
			</div>
		</div>
	</div>

	<!-- The Modal -->
	<div id="modal-share" class="row modal">
		<div class="col-xs modal-content modal-share">
			<div class="row">
				<div class="col-xs-12 between-xs modal-content-header">
					<p class="content-headline">Share</p>
					<span id="close-share" class="close">&times;</span>
				</div>
				<div class="col-xs-12 between-xs modal-content-body">
					<a onclick="window.open('https://www.facebook.com/sharer.php?u=' + window.location.href);" rel="noopener" class="share-icons">
						<svg width="36px" height="36px" viewBox="0 0 24 24">
							<path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z" />
						</svg>
					</a>
					<a onclick="window.open('https://twitter.com/intent/tweet?url=' + window.location.href);" rel="noopener" class="share-icons">
						<svg width="36px" height="36px" viewBox="0 0 24 24">
							<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z" />
						</svg>
					</a>
					<a onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);" rel="noopener" class="share-icons">
						<svg width="36px" height="36px" viewBox="0 0 24 24">
							<path d="M22 12.14a2.19 2.19 0 0 0-3.71-1.57 10.93 10.93 0 0 0-5.86-1.87l1-4.7 3.27.71a1.56 1.56 0 1 0 .16-.76l-3.64-.77c-.11-.02-.22 0-.29.06-.09.05-.14.14-.16.26l-1.11 5.22c-2.33.07-4.43.78-5.95 1.86A2.2 2.2 0 0 0 4.19 10a2.16 2.16 0 0 0-.9 4.15 3.6 3.6 0 0 0-.05.66c0 3.37 3.92 6.12 8.76 6.12s8.76-2.73 8.76-6.12c0-.21-.01-.44-.05-.66A2.21 2.21 0 0 0 22 12.14M7 13.7c0-.86.68-1.56 1.54-1.56s1.56.7 1.56 1.56a1.56 1.56 0 0 1-1.56 1.56c-.86.02-1.54-.7-1.54-1.56m8.71 4.14C14.63 18.92 12.59 19 12 19c-.61 0-2.65-.1-3.71-1.16a.4.4 0 0 1 0-.57.4.4 0 0 1 .57 0c.68.68 2.14.91 3.14.91s2.47-.23 3.14-.91a.4.4 0 0 1 .57 0c.14.16.14.41 0 .57m-.29-2.56c-.86 0-1.56-.7-1.56-1.56a1.56 1.56 0 0 1 1.56-1.56c.86 0 1.58.7 1.58 1.56a1.6 1.6 0 0 1-1.58 1.56z" />
						</svg>
					</a>
					<a onclick="window.open('https://www.linkedin.com/sharing/share-offsite?mini=true&url=' + window.location.href);" rel="noopener" class="share-icons">
						<svg width="36px" height="36px" viewBox="0 0 24 24">
							<path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z" />
						</svg>
					</a>
					<a onclick="window.open('https://telegram.me/share/url?url=' + window.location.href);" rel="noopener" class="share-icons">
						<svg width="36px" height="36px" viewBox="0 0 24 24">
							<path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z" />
						</svg>
					</a>
					<a onclick="window.open('https://api.whatsapp.com/send?text=' + window.location.href);" rel="noopener" class="share-icons">
						<svg width="36px" height="36px" viewBox="0 0 24 24">
							<path d="M16.75 13.96c.25.13.41.2.46.3.06.11.04.61-.21 1.18-.2.56-1.24 1.1-1.7 1.12-.46.02-.47.36-2.96-.73-2.49-1.09-3.99-3.75-4.11-3.92-.12-.17-.96-1.38-.92-2.61.05-1.22.69-1.8.95-2.04.24-.26.51-.29.68-.26h.47c.15 0 .36-.06.55.45l.69 1.87c.06.13.1.28.01.44l-.27.41-.39.42c-.12.12-.26.25-.12.5.12.26.62 1.09 1.32 1.78.91.88 1.71 1.17 1.95 1.3.24.14.39.12.54-.04l.81-.94c.19-.25.35-.19.58-.11l1.67.88M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10c-1.97 0-3.8-.57-5.35-1.55L2 22l1.55-4.65A9.969 9.969 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8c0 1.72.54 3.31 1.46 4.61L4.5 19.5l2.89-.96A7.95 7.95 0 0 0 12 20a8 8 0 0 0 8-8 8 8 0 0 0-8-8z" />
						</svg>
					</a>
				</div>
			</div>
		</div>
  	</div>

	{{#if imprint_html}}
	<!-- The Modal -->
	<div id="modal-imprint" class="row modal">
		<!-- Modal content -->
		<div class="col-xs-12 col-sm-10 col-md-7 col-lg-5 modal-content">
			<div class="row">
				<div class="col-xs-12 between-xs modal-content-header">
					<p class="content-headline">Imprint</p>
					<span id="close-imprint" class="close">&times;</span>
				</div>
				<div class="col-xs-12 between-xs modal-content-body">
					{{{imprint_html}}}
				</div>
			</div>
		</div>
	</div>
	{{/if}}

	{{#if terms_html}}
	<!-- The Modal -->
	<div id="modal-terms" class="row modal">
		<!-- Modal content -->
		<div class="col-xs-12 col-sm-8 col-md-6 col-lg-5 modal-content">
			<div class="row">
				<div class="col-xs-12 between-xs modal-content-header">
					<p class="content-headline">Terms and conditions</p>
					<span id="close-terms" class="close">&times;</span>
				</div>
				<div class="col-xs-12 between-xs modal-content-body">
					{{{terms_html}}}
				</div>
			</div>
		</div>
	</div>
	{{/if}}

	{{#if channel_creator_name}}{{#if channel_creator_description_html}}
	<!-- The Modal -->
	<div id="modal-creator" class="row modal">
		<!-- Modal content -->
		<div class="col-xs-12 col-sm-8 col-md-6 col-lg-5 modal-content">
			<div class="row">
				<div class="col-xs-12 between-xs modal-content-header">
					<p class="content-headline">{{channel_creator_name}}</p>
					<span id="close-creator" class="close">&times;</span>
				</div>
				<div class="col-xs-12 between-xs modal-content-body">
					{{{channel_creator_description_html}}}
				</div>
			</div>
		</div>
	</div>
	{{/if}}{{/if}}

	<script>
		var modal_share = document.getElementById("modal-share");
		var btn_share = document.getElementById("btn-share");
		var close_share = document.getElementById("close-share");
		btn_share.onclick = function() {
			modal_share.style.display = "flex";
		}
		close_share.onclick = function() {
			modal_share.style.display = "none";
		}
		{{#if imprint_html}}
		var modal_imprint = document.getElementById("modal-imprint");
		var btn_imprint = document.getElementById("btn-imprint");
		var close_imprint = document.getElementById("close-imprint");
		btn_imprint.onclick = function() {
			modal_imprint.style.display = "flex";
		}
		close_imprint.onclick = function() {
			modal_imprint.style.display = "none";
		}
		{{/if}}
		{{#if terms_html}}
		var modal_terms = document.getElementById("modal-terms");
		var btn_terms = document.getElementById("btn-terms");
		var close_terms = document.getElementById("close-terms");
		btn_terms.onclick = function() {
			modal_terms.style.display = "flex";
		}
		close_terms.onclick = function() {
			modal_terms.style.display = "none";
		}
		{{/if}}
		{{#if channel_creator_name}}{{#if channel_creator_description_html}}
		var modal_creator = document.getElementById("modal-creator");
		var btn_creator = document.getElementById("btn-creator");
		var close_creator = document.getElementById("close-creator");
		btn_creator.onclick = function() {
			modal_creator.style.display = "flex";
		}
		close_creator.onclick = function() {
			modal_creator.style.display = "none";
		}
		{{/if}}{{/if}}
		var close = document.getElementsByClassName("close")[0];

		close.onclick = function() {
			modal_share.style.display = "none";
			{{#if imprint_html}}
			modal_imprint.style.display = "none";
			{{/if}}
			{{#if terms_html}}
			modal_terms.style.display = "none";
			{{/if}}
			{{#if channel_creator_name}}{{#if channel_creator_description_html}}
			modal_creator.style.display = "none";
			{{/if}}{{/if}}
		}
		window.onclick = function(event) {
			if (event.target == modal_share) {
				modal_share.style.display = "none";
			{{#if imprint_html}}
			} else if (event.target == modal_imprint) {
				modal_imprint.style.display = "none";
			{{/if}}
			{{#if terms_html}}
			} else if (event.target == modal_terms) {
				modal_terms.style.display = "none";
			{{/if}}
			{{#if channel_creator_name}}{{#if channel_creator_description_html}}
			} else if (event.target == modal_creator) {
				modal_creator.style.display = "none";
			{{/if}}{{/if}}
			}
		}
	</script>

	<script>
		var license = '{{channel_license}}';
		var license_url = '';
		var license_name = 'unknown';
		if (license === 'CC0 4.0') {
			license_name = 'CC0 1.0 Universal'
			license_url = 'https://creativecommons.org/publicdomain/zero/1.0/';
			license_image = 'https://creativecommons.org/publicdomain/zero/1.0/';
		} else if (license === 'CC BY 4.0') {
			license_name = 'CC BY 4.0'
			license_url = 'https://creativecommons.org/licenses/by/4.0/';
			license_image = 'https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by.png';
		} else if (license === 'CC BY-SA 4.0') {
			license_name = 'CC BY-SA 4.0'
			license_url = 'https://creativecommons.org/licenses/by-sa/4.0/';
			license_image = 'https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-sa.png';
		} else if (license === 'CC BY-ND 4.0') {
			license_name = 'CC BY-ND 4.0'
			license_url = 'https://creativecommons.org/licenses/by-nd/4.0/';
			license_image = 'https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nd.png';
		} else if (license === 'CC BY-NC 4.0') {
			license_name = 'CC BY-NC 4.0'
			license_url = 'https://creativecommons.org/licenses/by-nc/4.0/';
			license_image = 'https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc.png';
		} else if (license === 'CC BY-NC-SA 4.0') {
			license_name = 'CC BY-NC-SA 4.0'
			license_url = 'https://creativecommons.org/licenses/by-nc-sa/4.0/';
			license_image = 'https://mirrors.creativecommons.org/presskit/buttons/88x31/png/by-nc-sa.png';
		} else if (license === 'CC BY-NC-ND 4.0') {
			license_name = 'CC BY-NC-ND 4.0';
			license_url = 'https://creativecommons.org/licenses/by-nc-nd/4.0/';
			license_image = 'https://creativecommons.org/licenses/by-nc-nd/4.0/';
		}
		document.getElementById("license").setAttribute("href", license_url);
		document.getElementById("license_image").src = license_image;
	</script>

	<script>
		var channelIds = [{{#each channels}}"{{this.id}}",{{/each}}]
		var channel_id = '{{channel_id}}';
		myCallback(channelIds, channel_id);
		setInterval(myCallback, 2000, channelIds, channel_id);
		function myCallback(channelIds) {
			channelIds.forEach(function (channelId) {
				fetch("api/v3/widget/process/" + channelId).then(
					function(u){
						return u.json();
					}
				).then(
					function(json){
						data_function(json);
					}
				);
				function data_function(data){
					/** channel stats **/
					if (channelId.split(':')[2] === channel_id) {
						document.getElementById('channel_stats_current_' + channelId.split(':')[2]).innerHTML = data.current_sessions;
						document.getElementById('channel_stats_sum_' + channelId.split(':')[2]).innerHTML = data.total_sessions;

						var time = data.uptime;
						var days = Math.floor(time / 86400);
						time -= days * 86400;

						var hours = Math.floor(time / 3600);
						time -= hours * 3600;

						var minutes = Math.floor(time / 60);
						time -= minutes * 60;

						var seconds = parseInt(time % 60, 10);

						document.getElementById('channel_stats_runtime_' + channelId.split(':')[2]).innerHTML = days + ':' + (hours < 24 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
					}

					/** channel list **/
					if (data.uptime >= 1) {
						document.getElementById('channel_list_badge_' + channelId.split(':')[2] + '_1').style.display = "block";
						document.getElementById('channel_list_badge_' + channelId.split(':')[2] + '_2').style.display = "block";
					} else {
						document.getElementById('channel_list_badge_' + channelId.split(':')[2] + '_1').style.display = "none";
						document.getElementById('channel_list_badge_' + channelId.split(':')[2] + '_2').style.display = "none";
					}
					document.getElementById('channel_list_stats_sum_' + channelId.split(':')[2] + '_1').innerHTML = data.total_sessions;
					document.getElementById('channel_list_stats_sum_' + channelId.split(':')[2] + '_2').innerHTML = data.total_sessions;
				};
			});
		}
	</script>

	<script src="channels/{{channel_id}}/config.js"></script>
	{{#ifEquals player "videojs"}}
	<script src="player/videojs/dist/video.min.js"></script>
	<script src="player/videojs/dist/videojs-overlay.min.js"></script>
	<script src="player/videojs/dist/videojs-license.min.js"></script>
	{{else}}
	<script src="player/clappr/clappr.min.js"></script>
	<script src="player/clappr/clappr-stats.min.js"></script>
	<script src="player/clappr/clappr-nerd-stats.min.js"></script>
	{{/ifEquals}}
	<script>
		function getQueryParam(key, defaultValue) {
			var query = window.location.search.substring(1);
			var vars = query.split("&");
			for(var i = 0; i < vars.length; i++) {
				var pair = vars[i].split("=");
				if(pair[0] == key) {
					return pair[1];
				}
			}
			return defaultValue;
		}

		function convertBoolParam(key, defaultValue) {
			var val = getQueryParam(key, defaultValue);
			return val === true || val === "true" || val === "1" || val === "yes" || val === "on";
		}

		function convertColorParam(parameter, defaultColor) {
			var re = new RegExp("^#([0-9a-f]{3}|[0-9a-f]{6})$");
			var c = getQueryParam(parameter, defaultColor);
			// decode color as # has to be represented by %23
			var c = decodeURIComponent(c);
			// if color was given without leading #, prepend it
			if (!String(c).startsWith("#")) c = "#" + c;

			if (re.test(c)) {
				return c;
			} else {
				return defaultColor;
			}
		}

		var autoplay = convertBoolParam("autoplay", playerConfig.autoplay);
		var mute = convertBoolParam("mute", playerConfig.mute);
		var statistics = convertBoolParam("stats", playerConfig.statistics);
		var color = convertColorParam("color", playerConfig.color.buttons);
	</script>
	<script src="playersite/player.js"></script>

	{{{inject4}}}

</body>
</html>
