/*------------------------ YouTube Playlist ----------------------------------*/
div.youtube-playlist-wrapper {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	background-color:#fff;
}

div.youtube-playlist {
	margin-top: 0px;
	position: relative;
	border: 2px solid #545965;
}

div.youtube-playlist div.video-wrapper {
	width: 70%;
	float: left;
}
div.youtube-playlist div.video-wrapper iframe {
	display: block;
	background-color: #000;
	width: 100%;
}

div.youtube-playlist > .playlist-wrapper {
	width: 30%;
    height:100%;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 36px;
	overflow-y: scroll;
	background-color: #FFFFFF;
	border-left: 2px solid #545965;
}

div.youtube-playlist > .playlist-wrapper ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

div.youtube-playlist > .playlist-wrapper ul li {
	position: relative;
	margin-left: 2px;
	padding: 8px 15px 8px 116px;
	min-height: 75px;
	border-bottom: 1px solid #DDDCDA;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.95em;
}
div.youtube-playlist > .playlist-wrapper ul li.ytToggle {
	cursor: pointer;
}
div.youtube-playlist > .playlist-wrapper ul li.selected {
	font-weight: bold;
}
div.youtube-playlist > .playlist-wrapper ul li.selected.selected-playing {
	font-weight: bold;
}

div.youtube-playlist > .playlist-wrapper ul li .yt-video-thumb {
	position: absolute;
	width: 100px;
	left: 8px;
	top: 8px;
	bottom: 8px;
	overflow: hidden;
}

div.youtube-playlist > .playlist-wrapper ul li .yt-video-thumb img {
	display: block;
	margin-top: -10px;
	position: relative;
}

div.youtube-playlist > .playlist-wrapper ul li .yt-video-thumb img.video-thumb {
	z-index: 1;
}

div.youtube-playlist > .playlist-wrapper ul li .yt-video-thumb img.play-overlay {
	z-index: 10;
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
}
div.youtube-playlist > .playlist-wrapper ul li.selected .yt-video-thumb img.play-overlay {
	display: block;
}

div.youtube-playlist > .playlist-wrapper ul li h4{
    width: 100%;
    word-wrap: break-word;
    font-weight: bold;
    font-size: 1.1em;
}

div.youtube-playlist > .playlist-wrapper ul li:hover {
	font-weight: bold;
	cursor: pointer;
}

div.youtube-playlist > .playlist-wrapper ul li:first-child {
	border-top: 1px solid #DDDCDA;
}

.youtube-playlist .sharing-links {
	border-top: 2px solid #FFFFFF;
	color: #FFFFFF;
}

@media only screen and (max-width: 3840px){
    div#bio-tv div.youtube-playlist-wrapper div.video-wrapper iframe.ytPlayer{
        height:546px;
    }
}

@media only screen and (max-width: 1280px){
    div#bio-tv div.youtube-playlist-wrapper div.video-wrapper iframe.ytPlayer{
        height:455px;
    }
}

@media only screen and (max-width: 1024px){
    div#bio-tv div.youtube-playlist-wrapper div.video-wrapper iframe.ytPlayer{
        height:355px;
    }
}

@media only screen and (max-width: 800px) {
	div.youtube-playlist-wrapper {
		top:0%;
		transform: translateY(0%);
	}
	div.youtube-playlist div.video-wrapper, div.youtube-playlist > ul {
		float: none;
		width: auto;
	}
	div.youtube-playlist > .playlist-wrapper {
		position: relative;
		width: 100%;
		max-height: 220px;
		padding-bottom: 8px;
	}
	div.youtube-playlist > .playlist-wrapper ul {
		margin-top: 15px;
	}
	div.youtube-playlist > .playlist-wrapper ul li {
		margin-left: 0;
	}

}
@media only screen and (max-width: 600px) and (min-width: 1px) {
    div#bio-tv div.youtube-playlist-wrapper div.video-wrapper iframe.ytPlayer{
        height:270px;
    }
/*
	div#bottPage div.youtube-playlist-wrapper {
		display: none;
	}
	*/
}

@media only screen and (max-width: 360px){
    div#bio-tv div.youtube-playlist-wrapper div.video-wrapper iframe.ytPlayer{
        height:200px;
    }
}

@media only screen and (max-width: 320px){
    div#bio-tv div.youtube-playlist-wrapper div.video-wrapper iframe.ytPlayer{
        height:180px;
    }
}


/*------------------------------ Standard Video ------------------------------*/
iframe.youtube-player{
    width: 100%;
    max-width: 700px;
    margin: 10px auto 20px;
    height: 400px;
    display: block;
}

@media only screen and (max-width: 480px){
    iframe.youtube-player{
        height:300px;
    }
}
@media only screen and (max-width: 360px){
    iframe.youtube-player{
        height:250px;
    }
}