@font-face {
    font-family: titilium;
    src: url(font/titilium/Titillium-Regular.otf) format('opentype'),url(font/titilium/Titillium-Regular.ttf) format('truetype'),url(font/titilium/titillium-regular-webfont.woff) format('woff');
}

html{background: #fff;}
a{color: #fff;}
:focus{outline: none;}
h2{margin: 5px 0 0;
font-weight: normal;
font-family: titilium;
font-size: 1.2em;}

.pcbjs-player-wrap{
	width: 100%;
	font-size: 14px;
	/*max-width: 600px;*/
	margin: auto;
	font-family: titilium;
	position: relative;
	overflow: hidden;
}

.pcbjs-player-left,
.pcbjs-player-right,
.playerCurrent,
.pcbjs-player-right-content-wrap{/*height: 164px;*/}

/*----Player------*/
.pcbjs-player{
	margin: auto;
	width: 100%;/*height: 164px;*/
	height: 168px;
	display: flex;}

.pcbjs-player a{color: #2b2b2b}

.pcbjs-player :focus{outline: none;}

.pcbjs-audio{display: none;}


/*--- Player left ---*/
.pcbjs-player-left {
	min-width: 168px;
	width: 168px;
	display: block;
	position: relative;}

.pcbjs-player-left img{width: 100%;/*! float: left; */height: auto;}


/*---------rechts----------*/
.pcbjs-player-right{
	width: 100%;
	position: relative;
	display: inline-block;padding-left: 10px;}

.pcbjs-extra_btn_wrap {
    display: flex;
    height: 28px;
    width: 100%;
    /*overflow: hidden;*/
}
.pcbjs-extra_btn_wrap {
    display: flex;
    margin-right: 0;
    margin-left: auto;
    min-width: 180px;
}

.pcbjs-extra_btn_wrap button {
	min-width: 30px;
	height: 30px;
	overflow: hidden;
	font-size: 0;
	background-size: 25px;
	margin: auto 0;
    background-position: center;
    background-repeat: no-repeat;
	background-color: transparent;
	border: none;
	cursor: pointer;
	vertical-align: middle;
}
.pcbjs-extra_btn_wrap button.active{/*display: none;*/}
.pcbjs-extra_btn_wrap a{   
	width: 20px;
    height: 20px;  
	background-size: 20px;
	cursor: pointer;
	display: inline-block;
	margin: auto 5px auto 20px;
	vertical-align: middle;}

.pcbjs-extra_btn_wrap_left{display: inline-flex;margin-right: auto;}
.pcbjs-extra_btn_wrap_right{display: inline-flex;margin-left: auto;}

.pcbjs-option-btns,.pcbjs-extra{height: 0;
	width: 0;
	padding: 0;
	border: 1px transparent;
	float: right;
	overflow: hidden;
	transition: all 200ms;
	right: 0;
	bottom: 0;
	position: absolute;
	color: #fff;
	background-color: #222;
	background-image: radial-gradient(circle, #464646 11%,#222 );
	z-index: 1;
}

.pcbjs-option-btns.active{
	height: 168px;
	width: 250px;
	padding: 0px 0px;
	
	}

.pcbjs-option-btns ul{padding: 15px;margin: 0; list-style: none;}
.pcbjs-option-btns ul li{    
	height: 65px;
    display: flex;
    width: 220px;
    margin-bottom: 10px;
}
.pcbjs-option-btns ul li:first-child{border-bottom: 2px #676767 solid;}

.pcbjs-option-btns ul li > div:first-child{
	min-width: 90px;
	width: 80px; 
	padding: 3px 5px;
}
.pcbjs-option-btns ul li > div{width: 100%; }

.pcbjs-option-btns ul li div button,
.pcbjs-option-btns ul li div button a{color: #fff;display: block;}

.pcbjs-option-content{
	transition: width 200ms;
    position: absolute;
    top: 0;
	background-color: #222;
	background-image: radial-gradient(circle, #464646 11%,#222 );
    right: 0px;
    width: 0;
    bottom: 0;
	color: #fff;
	overflow: hidden;
	z-index: 900;
}

.pcbjs-option-content.active{
	width: calc(100% - 210px);
}

.pcbjs-option-content >div {
	display: inline-block;
	padding: 10px;
	width: calc(100% - 20px);
	text-align: center;
}

.pcbjs-option-btns-wrap button{
	display: block;
	background: none;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	width: 100%;
	text-align: left;
}

.pcbjs-option-btns-wrap button.active,
.pcbjs-option-btns-wrap button:hover,
.pcbjs-option-btns-wrap button a:hover{
	background-color: #fff;
	color: #222;
}

.pcbjs-option-btns-wrap a{
	color: #000;
	text-decoration: none;}

.pcbjs-serie-title{
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 270px;
    margin: auto 0;
    color: gray;
    font-weight: normal;
    font-size: 1em;
}

.pb_extra_close,.pb_extra_back{
	display: none;
	position: absolute;
	width: 30px;
	height: 30px;
	background-color: transparent;
	background-image: url("icon/kindpng_736252.png");
	opacity: 0;
	transition: opacity 1000ms;
	z-index: 999;
	background-size: contain;
	border: none;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.pb_extra_back{
	top: 5px;
	right: 5px;}

.pb_extra_close{
	bottom: 5px;
	right: 5px;
	transform: rotate(45deg);}

.pb_extra_close.active,.pb_extra_back.active{
	display: block;
	opacity: 1;
}
.pb_extra_close.active.left{
	right: unset;
	left: 215px;
	transform: rotate(135deg);
}

.pcbjs-title {
    margin:0;
    font-weight: normal;
    font-family: titilium;
    font-size: 1.2em;
    width: 100%;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
    line-height: 1.2em;
    /*transition: all 500ms;*/
    height: 1.8em;
}

.pcbjs-date {
    font-size: 0.8em;
    margin: 2px 0 0px;
    opacity: 0.5;
    height: 15px;
    /*transition: all 500ms;*/
}

.pcbjs-extra,.pcbjs-kapitel{
	height: 0;
	padding: 0 30px;
	z-index: 1;
}	

.pcbjs-extra.active,.pcbjs-kapitel.active{
	width: calc(100% - 270px);
	height: 168px;
	/*overflow: auto;*/
}


.pcbjs-kapitel{height: 0;
	width: 0;
	border: 1px transparent;
	float: right;
	overflow: hidden;
	transition: all 200ms;
	left: 210px;
	bottom: 0;
	position: absolute;
	color: #fff;
	background-color: #222;
	background-image: radial-gradient(circle, #464646 11%,#222 );
}
.pcbjs-kapitel-li{cursor: pointer;display: flex;}

.pcbjs-kapitel-li:hover{background-color: #fff;color: #222}
.pcbjs-kapitel-wrap{margin: 10px 0 15px;}
.tt_time{
margin-right: 5px;
min-width: 62px;
width: 62px;
}
.tt_seperator{display: block ruby;margin-right: 5px;}

.pcbjs-extra-wrap{display: inline-block;overflow: auto;
max-height: 148px;
margin: 10px 10px 10px 0;}
.pcbjs-moderator-icon-wrap{display: inline-block;margin: 5px 5px 5px 0}
.pcbjs-moderator-icon{
	width:80px;
	height: 80px;
	background-position: center;
	background-size: cover;}

.pcbjs-moderator-wrap{margin-bottom: 15px;}

.pcbjs-content-wrap{margin: 15px 15px 15px 0; }

/*-----Player Controll-----*/
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}
/*progressbar*/

.pcbjs-progressbar {
    cursor: pointer;
    background: #fff;
    width: 100%;
    margin: 8px 0 7px;
    display: inline-block;
    vertical-align: middle; 
	border: none;
    border-top: 2px solid;
    height: 5px;
	position: relative;
}

.pcbjs-progressbar .ui-slider-range {
    height: 5px;
    cursor: pointer;
    background: rgb(0, 0, 0);
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
}

.pcbjs-progressbar .ui-slider-handle {
    cursor: pointer;
    width: 6px !important;
    height: 6px !important;
    margin-left: -3px !important;
    top: -9px !important;

}

.pcbjs-controls{
	text-align: center;
	margin: 10px 0;
	position: relative;
}

/*volume*/
.pcbjs-volume_wrap {
    overflow: hidden;
    text-align: left;
    width: 30px;
	height:30px;
    display: flex;
  
}

.pcbjs-volume_wrap:hover {
    overflow: visible;
    width: 135px;
    padding-right: 10px;
    z-index: 902;
    background: #fff;
}

.pcbjs-volume_wrap:hover .pcbjs-volume {
    visibility: visible;
}

.pcbjs-mute {   
	margin: 0 5px 0 0 !important;
}

.pcbjs-volume {
    min-width: 100px;
    width: 100px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    margin: 12px 0px 0px 0;
    float: right;
    position: relative;
    height: 5px;
    border: 2px solid;
    border-top: none;
    border-right: none;
}
.pcbjs-volume_wrap #volume {
    visibility: hidden;
}
.pcbjs-volume .ui-slider-range {
order: none;
height: 6px;
cursor: pointer;
background: black;
}
.pcbjs-volume .ui-slider-handle {display: none;}

/*maincontrol*/

.pcbjs-main-btn {
    text-align: center;
    width: 200px;
    display: inline-flex;
    margin: 2px 0;
}

.pcbjs-play, .pcbjs-pause, .pcbjs-speed, 
.pcbjs-skipback, .pcbjs-skipforward, .pcbjs-playlast,
.pcbjs-playnext {
    padding: 0;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: inline-block;
    border: none;
    vertical-align: middle;
	margin: auto 10px;
	background-size: cover;
	background-position: center;
	background-color: transparent;
}

.pcbjs-play.active, .pcbjs-pause.active{
	position: absolute;
	top: -79px;
	left: -2px;
	margin: 0px;
	background-color: rgb(255, 255, 255);
}
.pcbjs-volume_wrap.active{
	position: absolute;
	bottom: 40px;
	left: 6px;
}
.pcbjs-currenttime.active{
	position: absolute;
	left: 2px;
	top: 57px;
	width: 39px;
	text-align: center;
	font-size: 13px;
}
.pcbjs-skipback,.pcbjs-skipforward{	
	background-position: center;
	background-size: 30px;
	background-repeat: no-repeat;
	padding: 3px 5px;
	font-size: 11px;
	/*font-weight: bold;*/
}
.pcbjs-skipforward{ 	
	margin-right: auto;
}

.pcbjs-skipback { 
	margin-left: auto;
}

/*time*/
.pcbjs-time {
    display: flex;
    margin: 0;
    font-size: 13px;
}

.pcbjs-currenttime ,.pcbjs-duration{
    margin: 0;
}
.pcbjs-currenttime {
    margin: 0 auto 0 0;
}
.pcbjs-duration {
    margin: 0 0 0 auto;
}

.pcbjs-kapitel_info_wrap{overflow:hidden;}

.pcbjs-kapitel_info{display: inline-block;width: 100%;}

.pcbjs-kapitelbtn{
	width: 16px;
	height: 22px;
	cursor: pointer;
	padding: 4px 7px 4px 3px;}

/*---Abo & share Button ----*/

.pcbjs-abo-wrap a,.pcbjs-share-icon a{
	display: inline-block;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	font-size: 0;
	margin: 20px 10px;
}

/*--- social button --*/

.pcbjs-player .socialpage_wrap{
	display: inline-flex;
	float: right;
	margin: 3px 0px 0;}

.pcbjs-player .facebookpage,
.pcbjs-player .twitterpage,
.pcbjs-player .instagrampage,
.pcbjs-player .linkedinpage,
.pcbjs-player .xingpage{
	width: 25px;
	height:25px;
	margin: 0 5px;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;}

/*-----Icon----*/

.pcbjs-option {background-image: url("icon/icon-option.png");}
.pcbjs-list {background-image: url(icon/Icon-Playlist-schwarz.png);}
.pcbjs-info{ background-image: url(icon/info-mobile.png);}
.pcbjs-share{background-image: url(icon/share_icon.svg);}
.pcbjs-moderator {background-image: url(icon/Icon-Hostmobile.png);}
.pcbjs-downloadicon {background-image: url("icon/Download-icon.svg");}

/*Abo icon*/
.pcbjs-rss_btn{background-image: url(icon/rss-feed_icon-white.svg);}
.pcbjs-deezer{background-image: url("icon/deezer-farbe-48.png");}
.pcbjs-audionow{background-image: url("icon/icon-audionow.png");}
.pcbjs-applePodcast{background-image: url("icon/ITunes_logo.png");}
.pcbjs-spotify{background-image: url("icon/Spotify.png");}
.pcbjs-gp{background-image: url("icon/googlepodcast.png");}

/*control*/
.pcbjs-play,.pcbjs-currentplay{background-image: url(icon/play-icon.svg);}
.pcbjs-pause{background-image: url(icon/pause-icon.svg);}
.pcbjs-skipforward{background-image: url(icon/skipforward.svg);}
.pcbjs-skipback{background-image: url(icon/skipbackward.svg);}
.pcbjs-mute {background-image: url(icon/icon-lautsprecher.svg);}
.pcbjs-mute.active {background-image: url(icon/icon-lautsprecher-aus.svg);}

/*social*/
.pcbjs-email{background-image: url(icon/Icon-Email.png);background-size: contain !important;}
.pcbjs-facebook{background-image: url(icon/F_icon.svg);}
.pcbjs-twitter{background-image: url(icon/twitter.png);}
.pcbjs-instagram{background-image: url(icon/instagram_icon.png);}
.pcbjs-linkedin{background-image: url(icon/LinkedIn_logo_25px.png);}
.pcbjs-xing{background-image: url(icon/xing-icon.svg);}

@media screen and (min-width: 511px) {
	.pcbjs-extra_btn_wrap{
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;}
	
	.pcbjs-extra_btn_wrap_left{margin-left: 10px;}
	
	.pb_extra_close,
	.pb_extra_back {
    	right: 5px;
	}
}
@media screen and (max-width: 510px) {
	.pcbjs-extra,.pcbjs-kapitel{
		margin-left: 0px;
	}	
	.pcbjs-controls{margin: 6px 0;}
	.pcbjs-player-left{min-width: 50px;
width: 50px;
float: left;
position: absolute;}
	.pcbjs-player-right{padding: 0;}
	
	.pcbjs-date,.pcbjs-title{margin-left: 55px; width: cacl(100% - 55px);}
	
	.pcbjs-title{
		margin-bottom: 8px;}
	
	.pcbjs-kapitel{left: 0;}
	.pb_extra_close.active.left{left: 0;}

	.pcbjs-extra.active, .pcbjs-kapitel.active{
		width: 	calc(100% - 60px);
	}
	.pcbjs-option-content.active,.pcbjs-option-btns.active{width: 100%;}
	.pcbjs-extra.active, .pcbjs-kapitel.active,.pcbjs-option-btns.active,.pcbjs-option-content.active{
		height: 168px;}
	
	.pcbjs-option-btns, .pcbjs-extra,	.pb_extra_close,.pcbjs-kapitel,.pcbjs-option-content{bottom: 0px;}
	.pcbjs-option-btns ul{display: flex;height: 114px;}
	.pcbjs-option-btns ul li{display: block;height: 100%;}
	
	.pcbjs-option-btns ul li > div:first-child{
		padding: 0 10px;
		text-transform: uppercase;}
	
	.pcbjs-option-btns ul li:first-child {
		padding-right: 15px;
 		border-right:1px #676767 solid;
		border-bottom: none;
	}	
	.pcbjs-option-btns ul li:nth-child(2) {
		padding-left: 15px;
		border-left:1px #676767 solid;
	}
	.pcbjs-option-btns-wrap button{margin-top: 10px;}
	
	.pcbjs-play.active, 
	.pcbjs-pause.active,
	.pcbjs-volume_wrap.active,
	.pcbjs-currenttime.active{
		position: inherit;
	}
}