/*---- DEVELOPMENT ONLY -----
body {margin: 0;padding: 0;font-size: 15px;line-height: 1.8em;font: 16px 'Rubik',Arial,Helvetica,sans-serif; color: #333}
#headPic figure {margin: 0;text-align: center}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
figure, ul {padding: 0; margin: 0}
li {list-style-type: none}
img {display: block; max-width: 100%}

@media (max-width: 768px)
{
	#headPic {display: none}
}*/

/*--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------*/
/*---- TUBE AB HIER -------------------------*/





/*--------------------------------------------------*/
/*-- GLOBALS --*/
#pg_tubeframe, #pg_tubeNav, #pg_tubeNav .level_2 li
{-webkit-transition: all .75s cubic-bezier(.23,1,.32,1);-moz-transition: all .75s cubic-bezier(.23,1,.32,1);-ms-transition: all .75s cubic-bezier(.23,1,.32,1);-o-transition: all .75s cubic-bezier(.23,1,.32,1);transition: all .75s cubic-bezier(.23,1,.32,1);}
#pg_tubeframe {width: 100%; overflow: hidden}
#pg_tubeHead {width: 100%;background-color: rgb(210, 210, 210);padding: 25px}

#pg_tubeBox {overflow: hidden}
#pg_tubeNav {width: 30%; float: left; padding: 25px; min-height: 100vh; background-color: #efefef; max-width: 350px}
#pg_tubeNav li {cursor: pointer}

.clickable{cursor: pointer;}	

/*--------------------------------------------------*/
/*-- DARK/LIGHT MODE --*/
#pg_tubeframe.darkMode {background-color: rgba(0,0,0,0.8); color: #fff}
#pg_tubeframe.darkMode #pg_tubeHead {background-color: rgba(0,0,0,9);color: #fff}
#pg_tubeframe.darkMode #pg_tubeNav {background-color: rgba(0,0,0,9); color: #fff}
#pg_tubeframe.darkMode #pg_tubeNav .level_2 li span, #pg_tubeframe.darkMode .pg_tubeSubNavBtn.closed {color: #fff}
#pg_tubeframe.darkMode #pg_tubeHeadInner h1, #pg_tubeframe.darkMode .pg_tubeCaption a {color: #fff}
#pg_tubeframe.darkMode #SEL li:nth-child(2n) {background-color: #4f4f4f}
#pg_tubeframe.darkMode #pg_tubeHeadInner i, #pg_tubeframe.darkMode .widget.search #clrS:after {color: #4f4f4f}
/*--------------------------------------------------*/
/*-- TOP -> HEAD --*/
#hintButtonRow {display: flex;justify-content: space-between;}
#pg_tubeframe .hintButton {background-color: #920e30;padding: 8px 16px;width: 48%;text-align: center;display: flex;align-items: center;justify-content: center;}
#pg_tubeframe .hintButton a {color: #fff; text-decoration: none !important; font-weight: bold; font-size: 14px}
#pg_tubeframe .hintButton:hover a {color: #fff}
#pg_tubeframe .hintButton:hover {opacity: 0.8}

#pg_tubeHeadInner {padding: 0 15px;display: flex;align-items: center;}
#pg_tubeHeadLine h1 {margin: 0;color: #464646;font-size: 2em;display: inline-block;margin-right: 5%;vertical-align: middle}
#pg_tubeHeadLine p {width: 69%;margin: 0;display: inline-block;vertical-align: middle;font-size: 13px;line-height: 1.4em}
#pg_tubeHeadInner i {font-size: 1.8em}
#pg_tubeHeadInner li {display: inline-block; margin-right: 6%; cursor: pointer; vertical-align: middle}
#pg_tubeHeadInner li:last-child {margin-right: 0}
#pg_tubeHeadInner > .col4 ul {display: flex; align-items: center}

/*#pg_tubesearchBox input {height: 35px; border-radius: 30px; border: none; outline: none; width: 500px; padding: 10px; font-size: 16px}*/

#pg_tubesearchBox {width: 70%}
#pg_tubesearchBox .widget.search {position: relative; margin-bottom: 0}
#pg_tubesearchBox .widget.search input {outline: none; height: 35px; border: 1px solid #cad2db; padding: 5px 5px 5px 35px; font-size: 14px; color: #666; border-radius: 35px;width: 100%; box-shadow: inset 2px 2px 10px rgba(0,0,0,0.1); font-weight: bold;color: #a20b25;user-select: none;}
#pg_tubesearchBox .widget.search label {position: absolute; top: 9px; left: 12px; font-size: 14px; width: 10px !important}
#pg_tubesearchBox .widget.search label i {font-size: 16px}
#pg_tubesearchBox .widget.search #clrS {position: absolute;right: 20px;top: 10px;opacity: 0.6}
#pg_tubesearchBox .widget.search #clrS:after {content:"\f057"; font-family:"FontAwesome"; position: absolute}
/*--------------------------------------------------*/
/*-- LEFT -> NAVIGATION --*/
#pg_tubeNav .level_1 li {display: block;border-bottom: 1px solid #444}
#pg_tubeNav .level_1 li button {padding: 35px 15px;display: block;width: 100%;text-align: left;}
#pg_tubeNav .level_1 li button.mediaSubMenu {padding: 35px 15px 10px 15px}
#pg_tubeNav .level_2 {display: block;padding-left: 29px}
#pg_tubeNav .level_2 li {padding: 0; font-weight: bold; position: relative; padding-left: 5px}
#pg_tubeNav .level_2 li button {padding: 10px}
#pg_tubeNav .level_2 li:last-child {border-bottom: none}
/*#pg_tubeNav .level_2 li.active:before {content:"\f054";font-family:"FontAwesome"; position: absolute; top: 17px; left: 0; font-size: 14px; color: rgb(147, 10, 46);}*/
/*#pg_tubeNav .level_2 li.active {padding-left: 8px; font-weight: bold}*/
#pg_tubeNav .level_2 li span {text-transform: initial !important; font-weight: normal; padding: 15px}
#pg_tubeNav .level_2 li span, .pg_tubeSubNavBtn.closed {text-transform: initial !important; font-weight: normal; color: #333}

#pg_tubeNav .level_3 li {padding-left: 30px;font-weight: normal}
#pg_tubeNav span {text-transform: uppercase; font-weight: bold;vertical-align: middle;display: inline-block;}
#pg_tubeNav .tubeIcon {width: 40px; font-size: 25px; }

#pg_tubeNav li.active > span {color: rgb(147, 10, 46);font-weight: bold}

#pg_tubeNav.seactiv {opacity: 0.6}
#pg_tubeNav.seactiv li.active > span {color: #464646}

.pg_tubeNavBtn.closed {
	height: 102px;
    overflow: hidden;
}

#pg_tubeNav .level_2 li.closed 
{
	height: 58px; 
    overflow: hidden;
}

/*--------------------------------------------------*/
/*-- RIGHT -> CONTENT --*/
.pg_tubeContent {width: 70%; float: left; padding: 25px}
.pg_mainVideoInner {width: 100%}
.pg_mainVideoBox {position: relative;padding-bottom: 56.25%;/*padding-top: 30px;*/height: 0;overflow: hidden; background-color: #000}
.pg_mainVideoBox iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: medium none}

.pg_mainVideoBox #videoBox, .pg_mainVideoBox #videoBox video {position: absolute; top: 0; width: 100%; height: 100%}

.pg_mainVideoBox #extHint {    position: absolute;
    width: 100%;
    background-color: rgba(255,255,255,0.5);
    color: #333;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 10px;
    text-align: right;
    padding: 6px;}
.pg_mainVideoBox #extHint i{    
    margin-left: 5px;
    vertical-align: middle}    

#pg_mainVideo {width: 70%; float: left}
#pg_videoInfo {padding: 10px 0; font-size: 12px}
#pg_videoInfo li {display: inline-block; margin-right: 12%}

.pg_tubeText h3 {margin: 17px 0;color: rgb(147, 10, 46)}
.pg_tubeCaption {line-height: 1.6em; font-size: 14px}

/*-- RIGHT -> CONTENT --> FULLWIDTH MODE --*/
#pg_tubeBox.fullContent #pg_tubeNav {overflow: hidden; margin-left: -25%}
#pg_tubeBox.fullContent .pg_tubeContent {width: 100%}


/*-- RIGHT -> CONTENT -> Video Vorschau List --*/
#pg_videoPreview {width: 27%; float: left}
#pg_vPBox, #SEL {font-size: 12px; overflow: hidden;padding: 0 15px; margin-left: 3%}
#pg_vPBox .teaserText {display: none}
#pg_vPBox li, #SEL li {overflow: hidden; margin-bottom: 20px}
#SEL li {padding: 10px}
#SEL li:nth-child(2n) {background-color: #efefef}
#pg_vPBox figure, #SEL figure {float: left;margin: 0 3% 3% 0;max-width: 50%;}
#SEL figure {max-width: 180px; margin-bottom: 1%}
#SEL li > p {font-weight: bold; font-size: 1.17em; color: #920f30;margin-bottom: 0}
#pg_vPBox p, #SEL p {margin-top: 0; line-height: 1.6em}
#pg_vPBox .PVdetails, #SEL .PVdetails {float: left; width: 47%} 
.PVdetails i {margin-right: 5px}

@media (max-width: 1100px)
{
	#hintButtonRow {display: block}
	#pg_tubeframe .hintButton {width: 100%; margin: 5px 0}
}

@media (max-width: 1200px)
{
	#pg_tubeNav {max-width: 300px; font-size: 0.8; height: 100%; min-height: 800px}
}	

@media (max-width: 768px)
{
	#pg_tubeHead {padding: 15px 0}
	#slideToogle, #modeToogle {width: 11%; margin-right: 4% !important}

	#pg_tubeHeadInner li {vertical-align: middle}
	#pg_tubesearchBox {width: 66%; margin-right: 0 !important}
	#pg_tubeframe .widget.search input {width: 100%}
	#pg_tubeHeadLine h1 {font-size: 1.4em}
	#pg_tubeHeadLine p {width: 77%: font-size: 11px}
	#pg_tubeNav {width: 100%; float: none; height: auto; max-width: none;padding: 0;font-size: initial; min-height: 0}
	#pg_tubeNav .level_1 li {padding: 15px}
	#pg_tubeNav .tubeIcon {font-size: 18px}
	#pg_tubeNav .level_2 li.closed, .pg_tubeNavBtn.closed {height: 50px}
	#pg_tubeNav .level_2 li span {padding: 0}

	.pg_tubeContent, #pg_mainVideo, #pg_videoPreview {width: 100%; float: none}
	#pg_vPBox {margin: 3% 0; padding: 0}
	#pg_mainVideo {margin-bottom: 50px}

	#pg_vPBox li, #SEL li {width: 90%}
	#pg_tubeBox.fullContent #pg_tubeNav {margin-left: 100%; display: none}
	
	#SEL {margin: 0; padding: 0}

}






/*************** SCROLLBAR BASE CSS ***************/
 
#pg_tubeframe .scroll-wrapper {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
}
 
#pg_tubeframe  .scroll-wrapper > .scroll-content {
    border: none !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none !important;
    overflow: scroll !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important;
}
 
#pg_tubeframe .scroll-wrapper > .scroll-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}
 
#pg_tubeframe .scroll-element {
    display: none;
}
#pg_tubeframe .scroll-element, .scroll-element div {
    box-sizing: content-box;
}
 
#pg_tubeframe .scroll-element.scroll-x.scroll-scrollx_visible,
#pg_tubeframe .scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}
 
#pg_tubeframe .scroll-element .scroll-bar,
#pg_tubeframe .scroll-element .scroll-arrow {
    cursor: default;
}
 
#pg_tubeframe .scroll-textarea {
    border: 1px solid #cccccc;
    border-top-color: #999999;
}
#pg_tubeframe .scroll-textarea > .scroll-content {
    overflow: hidden !important;
}
#pg_tubeframe .scroll-textarea > .scroll-content > textarea {
    border: none !important;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow: scroll !important;
    outline: none;
    padding: 2px;
    position: relative !important;
    top: 0;
    width: 100% !important;
}
#pg_tubeframe .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
    height: 0;
    width: 0;
}
 
 
 
 
#pg_tubeframe .scrollbar-external_wrapper {
    height: 750px !important;
    position: relative;
    width: auto !important;
}
#pg_tubeframe .scrollbar-external {
    height: 700px;
    overflow: auto;
    /*width: 600px;*/
}
 
/******************* EXTERNAL SCROLLBAR *******************/
 
#pg_tubeframe .external-scroll_x,
#pg_tubeframe .external-scroll_y {
    border: solid 1px #93092e;
    cursor: pointer;
    display: none;
    position: absolute;
}
 
#pg_tubeframe .external-scroll_x.scroll-scrollx_visible {
    display: block;
    height: 10px;
    left: 0;
    top: 410px;
    width: 200px;
}
 
#pg_tubeframe .external-scroll_y.scroll-scrolly_visible {
    display: block;
    height: 200px;
    right: 0;
    top: 0;
    width: 10px;
}
 
#pg_tubeframe .external-scroll_x div,
#pg_tubeframe .external-scroll_y div
{
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
}
 
#pg_tubeframe .external-scroll_x .scroll-bar,
#pg_tubeframe .external-scroll_y .scroll-bar {
    background: #93092e;
    z-index: 12;
}
 
#pg_tubeframe .external-scroll_x .scroll-bar {
    width: 100px;
}
#pg_tubeframe .external-scroll_y .scroll-bar {
    height: 100px;
}