.pg_accordionSingle .pg_toggler {
  outline: none;
  padding: 8px 25px 8px 10px;
  cursor: pointer;
  position: relative;
  font-weight: bold;
  }
/*.rotated {transform: rotate(-90deg)}*/
.pg_accordionSingle .pg_toggler h3 {margin-bottom: 0}
.pg_accordionSingle .pg_accordion {padding: 0}
.pg_accordionSingle .pg_toggler:before {top: 12px}

.pg_accordionSingle {padding-bottom: 10px}
.pg_accordionSingle .pg_toggler {outline: none; padding: 8px 10px; cursor: pointer; position: relative; font-weight: bold; width: 100%; text-align: left;}
.pg_accordionSingle .pg_toggler:hover {opacity: 0.7}	
.pg_accordionSingle .pg_accordion {padding: 0 10px}
.pg_accordionSingle .pg_toggler:before {
content: "";
  position: absolute;
  right: 10px;
  top: 30px;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-arrow-right);
  mask-image: var(--icon-arrow-right);
  mask-size: contain;
  mask-repeat: no-repeat;
}
.pg_accordionSingle .pg_toggler.pg-state-active:before {transform: rotate(90deg)}

.pg_accordion .ce_downloads li.divider {font-weight: bold;margin: 3% 0 1% 0;font-size: 17px;}
.pg_accordion .ce_downloads li.divider:hover {opacity: 1; cursor: default}
.pg_accordion .ce_downloads li.divider:before {content: ""; margin: 0; display: none}
.pg_accordion .divider {
  font-family: "DBScreenSansBold";
  margin-top: 30px;
  margin-bottom: 10px;
}
.link {
  cursor: pointer;
}
.download-element, .download-element.text
{
	font: 18px var(--font-regular);
}

.mediahidden{display: none;}

body.hidden{overflow: hidden;}

#selectHolder {display: flex; flex-wrap: wrap}
#selectHolder > div {width: 31.3333%; margin-right: 2%}
@media(max-width: 768px)
{
	#selectHolder {margin-bottom: 3%}
	#selectHolder > div {width: 100%; margin: 0}
}

.widget.select {width: 100%!Important}
#mediathek a[target=_blank]:after {display: none}

#mediatree .col5 {position: relative; height: 600px; overflow-x: hidden;
    overflow-y: scroll;}
#mediatree .col5 .innerTree {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%}

#mediatree .col5::-webkit-scrollbar {
  width: 0.5em;
}
 
#mediatree .col5::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
#mediatree .col5::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}


.pg_toggler{
padding: 4px;
cursor: pointer;
margin-bottom: 6px;
margin-left: 2px;

}
.subgroup {margin-top: 6px;}

.closed{display:none}
.opend{display:block}

.pg_toggler img {
    transition: transform 0.3s ease-in-out;
}
.pg_toggler.rotated > img {
    transform: rotate(90deg);
}
.pg_toggler img{float: right;}
.pg_toggler h3 { font-size: 14px;    line-height: 1.1em;    margin-bottom: 0;}
.pg_notoggle h3 { font-size: 13px;    line-height: 1.1em;    margin-bottom: 0;}
.pg_accordion {padding: 0}
/*.pg_toggler:before {top: 12px}*/

.pg_accordionSingle {padding-bottom: 10px}
/*.pg_notoggle, .pg_toggler {outline: none; border-bottom: 1px solid #ddd; padding: 10px; cursor: pointer; position: relative; font-weight: bold}*/
/*.pg_toggler:hover {opacity: 0.7}	*/
.pg_accordion {padding: 0 10px}
/*.pg_toggler:before {position: absolute; right: 10px; top: 10px; font-family: "Fontawesome"; content: "\f107"; font-size: 1.2em;transform: rotate(-90deg)}*/
/*.pg_toggler.pg-state-active:before {transform: rotate(0deg)}*/

.pg_accordion .ce_downloads li.divider {font-weight: bold;margin: 3% 0 1% 0;font-size: 17px;}
.pg_accordion .ce_downloads li.divider:hover {opacity: 1; cursor: default}
.pg_accordion .ce_downloads li.divider:before {content: ""; margin: 0; display: none}
.pg-filestate-active{color: #f00}
.mediahidden{display: none;}
.mediafile{padding: 4px}

.fnf {font-size: 13px;margin-top: 10%;text-align: center}

.fgfile {margin-bottom: 6px;padding: 10px;border-bottom: 1px solid #ddd}
.fileInfo {font-size: 13px; overflow: hidden; margin-bottom: 10px}
.filetype, .filesize {float: right; margin-left: 15px}
.filetitle {font-weight: bold}
.filedate {display: inline-block; margin-right: 5px}
.filedownloadicon{float: right;}

.breadcrump{font-size: 14px; color: #666; text-align: right;margin-bottom: 20px}

.medibox *, .mediaback:before, .mediaIcon:before {
-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)}

.nvGroup{margin: 6px 0;}

#medAuswahl {padding: 8px 16px; }
#medAuswahl.btn {margin-top: 26px; text-align: center; display: none; border: 1px solid var(--red); background-color: var(--red); color: #fff; cursor: pointer; border-radius: 3.5px;height: 50px;position: relative;}
#medAuswahl.btn button {position: absolute;left: 0;top: 0;right: 0;width: 100%;height: 100%;}

.medibox{border: 1px solid #ddd;background-color: #f1f3f5;clear: both;padding: 20px;overflow: hidden;margin-bottom: 12px; border-radius: 3.5px}
#mediabox.medibox{ background-color: #fff; border: none; padding: 0; overflow: visible; min-height: 200px}    

.navHead{font-weight: bold; clear: both;font-size: 24px;margin-bottom: 20px;}
.mediathekmodul > .nvRow > .medibox {background-color: rgba(0,0,0,0); padding: 0; border: 0}
.navItem{float: left; padding: 6px; cursor: pointer; width: 33.3333333%; text-align: left}

.navIcon{display: inline-block; vertical-align: middle; width: 40px;padding: 6px;height: 40px; background-color: #3c414b; border-radius: 5px}
.navItem:hover > .navIcon, .navItem.aktiv >  .navIcon {background-color: var(--red)}
.navItem:hover > .navTitle, .navItem.aktiv >  .navTitle {color: var(--red)}	

/*.navItem.aktiv >  .navIcon {background-color: #ffd1dd}
.navItem.aktiv > .navTitle {color: #ffD1dd}*/	

/*.navItem.aktiv:hover >  .navIcon {background-color: #868b96}
.navItem.aktiv:hover > .navTitle {color: #868b96}*/	

.navTitle {font-weight: bold; margin: 12px 0 12px 0px;display: inline-block; vertical-align: middle}

.nvGroup2{font-size: 24px;font-weight: bold;margin: 16px 0}
.nvGroup1{font-weight: bold; }
.nvGroup3{font-weight: bold; padding-left: 23px; margin-bottom: 10px}

.mediaItem{float: left;}
.mediaIcon{border-radius: 2px;height: 40px;left: 0;position: absolute;top: 0;width: 40px}
/*
.mediaIcon {cursor: pointer; position: absolute; top: 0;  width: 100%; height: 200px; text-align: center}
.mediaIcon figure {margin: 0 auto; margin-top: 23px;width: 100px; border: 3px solid #fff; padding: 20px; border-radius: 50%}
.mediaIcon:before {
    opacity: 0;
    transform: scale(0);
    content: "\f019";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 20%;
    left: 34%;
    color: #fff;
    font-size: 4em;
    text-shadow: 2px 2px 5px rgb(0 0 0 / 60%);
}
.mediaIcon:hover:before {opacity: 1;transform: scale(1)}
*/

.nvrow {overflow: hidden; clear: both; margin-bottom: 3%; padding: 20px 15px;border: 1px solid #ddd;background-color: #efefef;}
hr {border: 1px solid #ddd; display: block; margin-bottom: 20px}

.mediaRow {display: flex; flex-wrap: wrap;width: 100%}

.mediaRow .row.smallup {width: 100%}
.mediabox{background-color: #f0f3f5;width: 31.33333%;position: relative;margin: 0 2% 2% 0;box-shadow: 0 2px 4px 0 hsla(0,0%,45%,.5);
    border-radius: 4px;
    overflow: hidden;
transition-delay: 0s;
transition-duration: 0.15s;
transition-property: transform,box-shadow;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.15s;
-webkit-transition-property: transform,box-shadow;
-webkit-transition-timing-function: ease-in-out;}
.mediabox:hover {
-webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.15);
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
transform: translateY(-4px);
-webkit-transform: translateY(-4px)}
/* Remark zurück 01.03.21 */


.mediabox .mediaLink {position: absolute;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    left: 3px;
    top: 3px;
    margin: 0;
    padding: 0;}


/* .mediaCaption {opacity: 0;position: absolute;top: 38px;left: 2%;background-color: rgba(255,255,255,0.9);font-size: 12px;padding: 10px;box-shadow: 2px 2px 5px rgba(0,0,0,0.6);} */
.mediabox:hover .mediaCaption {opacity:1}
/*  
.mediaCaption {
    opacity: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255,255,255,0.9);
    font-size: 12px;
    padding: 10px;
  
}
*/
.mediaCaption{    
    margin-top: 20px;
    text-align: left;width: 85%
}

.mediabox .datum {top: 158px;position: absolute;right: 15px; font-size: 15px}

.mediaback{background-size: cover;height: 150px; cursor: pointer;background-repeat: no-repeat; background-position: 50% 50%}
.mediaback:before {opacity: 0; transform: scale(0);content: "\f002";font-family: "Font Awesome 5 Free";font-weight: 900;position: absolute;top: 15%;left: 39%;color: #fff;font-size: 4em;text-shadow: 2px 2px 5px rgba(0,0,0,0.6)}
.mediaback:hover:before {opacity: 1; transform: scale(1);}
.mediaback.noLightBox:before {display: none}


.mediabtn{text-align: center;padding: 15px;}
.mediabox a[target=_blank]:after {display: none}

/*
#DLPATH:focus, .mediaLink:focus {outline: -webkit-focus-ring-color auto 1px !important;
    outline: currentColor auto 1px;
    display: block;}*/
    
.mediabtn span.icon {
	cursor: pointer; 
	display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
	width: 34px; height: 34px; border-radius: 50%; background-color: #3c414b; margin-top: 20px; color: #fff; margin-right: 15px
}

.mediabtn span.icon.video {
	cursor: pointer; 
    display: flex;
    width: 34px; height: 34px;
    justify-content: center;
    align-items: center;
    padding-top: 0}

.mediabtn span.icon i {padding: 1px}
.mediabtn span.icon img {max-width: 80%}
.mediabtn.absbtn {bottom: 0; right: 0}
.mediabtn.absbtn a:after {display: none}


/*
.mediabtn span.icon {cursor: pointer; margin: 0 auto; width: 50px; height: 50px; border-radius: 50%; background-color: #868b96; text-align: center; padding-top: 12px; display: block; color: #fff}
.mediabtn:hover > span {background-color: var(--red)}
*/
.mediabox .mediabtn a, .mediabox .mediabtn button {width: 100%;display: flex;flex-direction: row-reverse;justify-content: flex-end;align-items: center;font-family: var(--font-bold);}
.mediabox .mediabtn {position: relative;overflow: hidden; display: flex;flex-direction: row-reverse;justify-content: flex-end;align-items: center}
.mediabox .mediabtn.videos .mediaCaption {margin-left: 0}
.mediabox .mediabtn.videos a {display: none}

.mediabox .mediabtn .size {display: none; opacity: 0; font-size: 12px; position: absolute; top: 31px;left: 45%; font-weight: bold}
.mediabox .mediabtn:hover {cursor: pointer}
/*
.mediabox .mediabtn:hover .icon {left: 30%; background-color: var(--red)}
.mediabox .mediabtn:hover .size {opacity: 1; left: 60%; color: var(--red)}
*/	

#liBackdrop{position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.8); z-index:999999999999}
#liBackdrop > button {position: absolute;top: 4%; right: 4%; font-size: 3em; color: #fff; cursor: pointer}

#lilightbox {left: 15vw;
    position: absolute;
    right: 15vw;
    top: 5vw;
    overflow: auto;
    bottom: 5vw;
    max-height: 70vw;
    max-width: 70vw;}

#liContentFrame {position: relative;width: 100%;left: 0%;background-color: #fff;min-height: 70px}
#liContent {background-color: rgba(0,0,0,0);height: auto;padding: 15px; }
#liContent p{margin: 0;line-height: 1.2em;}
#liCopyright {background-color: #fff;padding: 4px 15px;display: inline-block;font-size: 11px;color: #000}

.copychar{font-size: 12px; font-weight: bold;}
.copytext{font-size: 12px; font-weight: normal;}

/*#liMedia {background-color: #fff;position: relative; overflow: hidden; padding-bottom: 54.5%; min-height: 100px}*/
/*
#liMedia {position: relative;}
#liMedia video {position: absolute; top: 0;}	
#liMedia .videoIntern {min-height: 600px}
*/
#liMedia {height: 100%}
#liMedia .ytelement .videobox iframe {max-height: 700px}
/*#liMedia .ytelement {position: relative;padding: 2px;height: 100%;} */
#liMedia .ytelement iframe{position: absolute; top: 0; left: 0}

db-youtube{position: absolute; top: 0; left: 0;}
#liFilesize {position: absolute; right: 83px; font-size: 11px; bottom: 11px}
.absbtn{position: absolute; bottom: 8px; right: 8px}

#LLARROW {left: 44%;position: absolute;top: 50%;width: 20%;}	


#PGPAGINATION ul li button {font-size: inherit;font-family: inherit;padding: 5px 10px 5px 10px;}
#PAGNEXT, #PAGPRE {margin-top: 6px !important}

/*------- UI -> CONTENT ELEMENTS  -> PAGINATION --------------------------
.pg_pagination {margin-bottom: 3%; text-align: center; font-size: 12px}
.pg_pagination ul {margin: 0 auto}
.pg_pagination ul li {display: inline-block; margin: 0 -6px 0 0;padding: 0 10px;vertical-align: middle;}
.pg_pagination ul li:first-child span, .pg_pagination ul li:first-child a {border-top-left-radius: 5px;border-bottom-left-radius: 5px}
.pg_pagination ul li:last-child span, .pg_pagination ul li:last-child a {border-top-right-radius: 5px;border-bottom-right-radius: 5px}
.pg_pagination ul li a, .pg_pagination ul li span {float: left;background: #fff;background: -moz-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);background: -webkit-linear-gradient(top,#fff 0%,#f6f6f6 47%,#ededed 100%);background: linear-gradient(to bottom,#fff 0%,#f6f6f6 47%,#ededed 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed',GradientType=0);border: 1px solid #ddd; padding: 5px 10px 5px 10px; border-radius: 2px}
.pg_pagination ul li:before { content: none }
.pg_pagination ul li a:hover, .pg_pagination ul li span { opacity: 0.8 }*/

.nvRow {position: relative}
#mediathek .inside {overflow: visible}
/*
#PAGPRE, #PAGNEXT {position: absolute; top: 50%; font-size: 4em; cursor: pointer}
#PAGPRE:hover, #PAGNEXT:hover {opacity: 0.8}
#PAGPRE {left: -5%}
#PAGNEXT {right: -5%}
*/

/*--------------------------------------------*/
/*------- MEDIA BREAKS -------------*/
/*--------------------------------------------*/
@media (max-width: 1270px) 
{
	.navIcon {width: 40px; height: 40px}
	.navTitle {font-size: 12px; line-height: normal}
	/*#lilightbox {left: 5%; right: 5%;-webkit-overflow-scrolling: touch;transform: translate3d(0,0,0);position: fixed;overflow: auto}*/
	#liContent, #liCopyright {display: none}
	#liFilesize {top: 125%}
	.mediabtn.absbtn {bottom: -100%}
	.mediaCaption {margin-left: 0}
	#PAGPRE, #PAGNEXT {top: initial; bottom: -1%; font-size: 2em}
	#PAGNEXT {right: 5%}
	#PAGPRE {left: 5%}
}	

@media (max-width: 980px) 
{
	.nvRow {clear: none}
	.navItem {width: 33.3333%; overflow: hidden; padding: 6px 0; text-align: center}
	.navIcon {float: none; display: inline-block;width: 50px; height: 50px}
	.navTitle {margin: 5px 0; hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; display: block}

	.mediabox {width: 48%}
	.mediaback {height: 150px}
	.mediaback:hover:before {left: 29%;top: 8%; transform: scale(0.6)}
	.mediabox .mediabtn .icon {left: 35%}
	.mediabox .mediabtn:hover .icon {left: 8%}
	
	#liBackdrop:before {font-size: 1em}
	#liContent {height: auto}
	#liContent p {line-height: 22px}
	#liCopyright, #liFilesize, #lilightbox .mediabtn {position: initial;width: 100%;margin: 0;padding: 9px}
	
}


@media (max-width: 768px) 
{
	.navTitle {font-size: 10px}
	.mediaback {height: 120px}
	.mediabox .datum {top: 120px}
	.mediabox {width: 48%; margin: 1% 1% 6% 1%; padding-bottom: 20px}
	#mediathek > div.row.bigspace.inside > div:nth-child(3) > div:nth-child(2) > div:nth-child(4) {clear: both}

	.navItem:hover > .navIcon {background-color: #3c414b}
	.navItem:hover > .navTitle {color: #3c414b}
	.navItem.aktiv > .navIcon {background-color: var(--red);}
	.navItem.aktiv > .navTitle {color: var(--red)}
	
	#lilightbox {top: 20%; left: 5vw;right: 5vw; max-width: none; max-height: none}
	
	
}

@media (max-width: 575px) 
{
	.mediabox {width: 100%; margin: 0 0 6% 0; padding-bottom: 20px}

}