* {
  font-family: Arial, Helvetica, sans-serif ;


}


@font-face {
  font-family: 'Antarctica';
  src: url('/fonts/Antarctica.ttf');
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: Antarctica, sans-serif ;


}

:root {
  /*Farben*/
  --maincolor:#e73743;
  --bgwhite:#fff;
  --gradientbg: linear-gradient(90deg,  #e73743 0%,#e73743 100%);
}



.wrapall {
  background-color: rgba(255,255,255,0.1);
  background: linear-gradient( rgba(255, 255, 255,0.1) 85%,rgba(0, 0, 0, 0.1)100%);
  height: 100%;

}


.lgnbd {
  background-image:  url(../img/franke_bg_blur.jpg) !important;
  background-position: center;
  background-size: cover;
  /*backdrop-filter: blur(9px) brightness(1);*/

}

.outerlogin {
width: 100%;
height: 100%;


}

.logincontainer {
  display: grid;
  justify-content: center;
  align-items: center;
}

#login-form {

  background-color: rgba(255, 255, 255, 0.95);
  
  margin-top: 250px;
  border-radius: 15px;

  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
  backdrop-filter: blur(100px);
  border: 1px solid rgb(0,0,0, 0);
  width: 350px;
}




.toast-container {
  margin-top: 80px;
}
#login-form img {

  margin: 30px 30px;
  
}

.toast.fade.hide {
  transform: translateY(-80px);
  transition: opacity 0.5s ease-in-out;
}




#loginscale {
  transition: all 0.75s ease-in-out;
  /* scale: 0.1;
  opacity: 0; */
}

.bi-person-fill::before, .bi-lock-fill::before {
  color: var(--maincolor);
  position: absolute;
  margin-top:-15px;
  margin-left:-25px;

}

.loginwelcome code {
  font-size: 15px;
  color: var(--maincolor);
}

div.loginwelcome {
  color: var(--maincolor);
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  height: auto;
  gap: 5px;
  margin: 0;
  padding: 0;
  flex-direction: row;
  margin-bottom: 20px;
  margin-top: 15px;
}

#mainsection {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
 
}

.loginbtnwrap {
  display: grid;
}

.loginbtn {
  display: flex;
  margin-bottom: 50px;
  margin-left: 75px;
  margin-right: 75px;
  justify-content: center;
}


.loginwelcome i{
 
  color: var(--maincolor);
  align-self: center;
  text-align: center;
  display: flex;

}
.loginwelcome h5{
  display: flex;
align-self: center;
  font-size: 35px;
  text-align: center;
   
}

.formwrap input {
  border: none;
  outline:0px !important;
  border-bottom: 1px solid var(--maincolor);
  background-color: rgb(0, 0, 0, 0.0);
  border-radius: 0px;
}



#soundwrap{
  order:5;
  margin-left: auto;
}

input.slider-control {
  -ms-apperance:none !important;
  -moz-apperance: none !important;
  -webkit-appearance: none !important;
  appearance: none;
  height: 15px;
  background-color: rgba(255, 255, 255, 0.75);
  outline: 1px solid var(--maincolor);
  border-radius: 10px;
  overflow: hidden;
  order: 4;
  
  }

    

  .slider-control::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:  var(--maincolor) !important;
  cursor: pointer;
  box-shadow: -407px 0 0 400px var(--maincolor);
  border: 2px solid rgb(255, 255, 238);
  }


  .slider-control::-moz-slider-thumb {
    -moz-appearance: none !important;
    appearance: none !important;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background:  var(--maincolor) !important;
    cursor: pointer;
    box-shadow: -407px 0 0 400px var(--maincolor);
    border: 2px solid rgb(255, 255, 238);
    }

    .slider-control::-ms-slider-thumb {
    -ms-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background:  var(--maincolor) !important;
    cursor: pointer;
    box-shadow: -407px 0 0 400px var(--maincolor);
          border: 2px solid rgb(255, 255, 238);
    }
    
  


#rangeValue {

  font-size:28px;
  color: var(--maincolor);
  font-weight: 400;
  margin-left: auto;
  order: 3;
  cursor: pointer;
  margin-right: 8px;
  overflow: hidden;
  }


 
  

   

.infobar {
position: relative;
bottom: 0%;
width: 100%;
margin-top: 0.5vw;
padding-left: 5px;
padding-right: 5px;
max-width: 1400px;
display: flex;
margin-top: 0px;
align-items: center;
transition: margin-top 0.25s ease-in-out;
z-index: 9;
outline: 0px solid rgb(175,195,195);
margin-bottom: 15px;
}
.loginname {
  color: var(--maincolor);
  display: none;
  order: 2;
  margin-left: 25px;
}
.loginname code{
  color: var(--maincolor);
  font-weight: 700;
  font-size: 1.25rem;

}


.infobar a {
color: var(--maincolor);
text-decoration: none;
font-weight: 700;
cursor: pointer;
order: 1;
width: 30px;
z-index: 1;
max-width: 30px;
}


#homelogo {
  width: 25px;
  height: 25px;
}

#lastactivelayer {
  order:2;
  color: var(--maincolor);
  font-weight: 600;
  margin-left: 10px;
  font-style: normal;
  cursor: pointer;
  opacity: 0;
  display: none;
  font-size: 16px;
  transition: opacity 1s ease-in-out;
}

.videosection:hover > .infobar  {
  
  margin-top: 0;
}


.navbar {
   box-shadow: 0 0 6px rgba(30,30,30,0); 
}




.infobar img {
width: 4vw;
max-width: 30px;
bottom: 0%;
z-index: 9;
}



body {
padding: 0;
margin: 0;
background-color: var(--bgwhite);
/* background-image:  url(../img/bg_test.jpg);  */
/* background-repeat: no-repeat;*/
background-size: cover; 

/* background-color: rgba(255,255,255,1); */
height: 100vh;
overflow-x: hidden;
}

#offcanvasNavbarDark {
  background-color: rgba(45,50,75,1) !important;
}


.dropdown-menu {
  /* background-color: rgba(45,50,75,1) !important; */
  border: 0px;
  outline: 0;
  border-radius: 0;


}


.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 1rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-navbar-color);
  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  

}

.divlink {
  font-weight: bolder;
}

nav-link {
  font-weight: lighter;
 }

.bgred {
background-image: var(--gradientbg) !important;

}


.bgwhite {
  background-image: var(--bgwhite) !important;
}
.frankelogo {
/* filter: grayscale(100%) brightness(0) invert(1);  */
width: 110px;
margin: 3%;
display: block;
}

.frankelogo_f {
  /* filter: grayscale(100%) brightness(0) invert(1);  */
  width: 40px;
  margin: 10%;
  display: none;
  }

button:focus, button:hover {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

section.videosection {
display: grid;
place-items: center;
align-content: center;
z-index: 1;
overflow: hidden;
/* background-color: rgba(175,195,195,1); */

}  

#footer {
  height: 80px;
  width: 80px;
  background-color: rgba(45,50,75,1) ;
  position: absolute;
  bottom: 0;

}

.videowrap {
max-width: 1400px;
max-height: 787.4px;
overflow: hidden;
z-index: 2;
position: relative;
width: 100vw;
height: 56.25vw;
background-color: rgba(255, 255, 255, 1);
padding: 0 !important;
box-shadow: 0px -0 10px rgba(0,0,0,0.4);
margin-top: 4rem;
/* outline: 80px solid rgb(34, 26, 68); */
}


i.videocloseicon {

    z-index: 100;
    position: absolute;
    right: 2%;
    top: 3%;
    scale: 1.5;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    color: rgba(73, 73, 73, 0.5);
    z-index: 100;
  
}
i.videocloseicon.showicon {

  z-index: 100;
  position: absolute;
  border-radius: 50%;
  right: 2%;
  top: 2%;
  scale: 2;
  cursor: pointer;
  opacity: 0.8;
  scale: 2;
  transform: rotate(90deg);
  opacity: 1;

  color: rgba(73, 73, 73, 0.5);
}
i.videocloseicon.showicon:before {
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
i.videocloseicon:hover {
  scale: 2.2;
  opacity: 1;
  color: rgb(231, 55, 67, 1);

}


i.pdfvideoicon{
  position: absolute;
  z-index: 15;
  left: 3%;
  top: 3%;
  scale:2.5;
  color: var(--maincolor);
  opacity: 0;
  transition: all 0.75s ease-in-out;
}
.sidenav-container {
  display: none;
}



#pdfFrame {
  height: 100%;
}


video {
width: 100% ;
height: 100% ;
max-width: 100% ;
z-index: 3;
position: relative;
opacity: 1;
background: rgba(255, 255, 255, 0) !important;

}


video::-webkit-media-controls-panel {
background-image: none;
background-image: linear-gradient(rgb(0, 0, 0, 0.0) 60%, rgb(0  , 0 , 0 , 0.3) 95%) !important;
}

video::-webkit-media-controls-current-time-display, video::-webkit-media-controls-time-remaining-display {
color: #fff;

}
progress::-moz-progress-bar, progress::-webkit-progress-value { background: blue; }


video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider:hover, video::-webkit-media-controls-volume-slider:focus{
-webkit-appearance: none;
background-image: none !important;
display: none !important;
}

video::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button:hover, video::-webkit-media-controls-mute-button:focus{
-webkit-appearance: none;
background: transparent;
display: none;
background-image: none !important;
}


video::-webkit-media-controls-play-button {

color: #e73743;

}


.posterimg {
max-width: 100%;
z-index: 4;
position: relative;
opacity: 1;
position: absolute;
}


.videoliste.links {
display: block;
top:26%; 
left: 22.25%;
overflow-y: scroll;
width: 24.5%;
height: 61.7%;
opacity: 0;
}

.videoliste.rechts {
display: block;
top:26%; 
left: 53.3%;
overflow-y: scroll;
width: 24.5%;
height: 61.7%;
opacity: 0;
}




/*  -ms-overflow-style: none;  /* IE and Edge */
/*  scrollbar-width: none; */

/**
.videoliste::-webkit-scrollbar {
display: none;
}**/

::-webkit-scrollbar {
width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
background: var(--maincolor); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555; 
}

.playlink {
position: absolute;
z-index: 9;
color: #e73743;
list-style-type:square;
}

.playbutton {
position: absolute;
z-index: 9;
animation: btnpulse 5s infinite;
color:  var(--maincolor);
list-style-type:square;
background: url(../img/play-circle-fill.svg);
filter: invert(33%) sepia(34%) saturate(2286%) hue-rotate(318deg) brightness(101%) contrast(104%);
background-repeat: no-repeat;
width: 2vw;
margin-top: -1vw;
margin-left: -1vw;
height: 2vw;
border: 0px;
background-color: rgba(9, 255, 0, 0) !important;
z-index: 11;
transition: opacity 0.2s ease-in-out;

border-radius: 100%;
transition: all 0.3s ease-in-out;

}

.playbutton:hover {
opacity: 0.95;
transform: scale(0.9);
}

@keyframes btnpulse {
0% { scale: 1}
50% { scale: 1}
100% { scale: 1}
}

@keyframes btnglow {
0% { box-shadow: 0px 0px 40px green}
50% { box-shadow: 0px 0px 20px green}
100% { box-shadow: 0px 0px 40px green}
}


.startbuttonwrap {
transition: opacity 1s ease-in-out;
opacity: 1;
z-index: 11;
}


.pdfvideobutton {
position: absolute;
z-index: 19;
color: #e73743;
list-style-type:square;
background-image:url(../img/filetype-pdf.svg);
width: 2vw;
margin-top: -1vw;
margin-left: -1vw;
height: 2vw;
border: 0px;
background-color: rgba(255, 255, 255, 0);
left: 3%;
top:5%;
opacity: 0;
}


.tooltip {
transition: opacity 0.25s ease-in-out;
font-weight: 600;
position: absolute;
}
.fade:not(.show) {
  opacity: 1;
}

.tooltip-main {

border-radius: 50%;

background:  var(--maincolor);
border: 1px solid #737373;
color: #737373;
margin: 4px 121px 0 5px;

}

.tooltip-qm {
float: left;
margin: -2px 0px 3px 4px;
font-size: 12px;
}

.tooltip-inner {

/* font-size: 0.5vw; */
padding: 0.5vw;
background:  var(--maincolor);
color: rgba(255, 255, 255, 1);

}
.tooltip-inner h5 {
/* font-size: 0.75vw; */
margin-bottom : 0rem;

}

.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
top: -1px;
border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
border-top-color: var(--maincolorg);
}

.tooltip-arrow {
color: var(--maincolor);
}


.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before {
  right: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
  border-right-color: var(--maincolor);
}









.playlink li{
margin-top: 0.5vw;
}
.playlink a {
color: var(--maincolor);
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-transform: uppercase;
font-size: 0.8vw;

}



.playlink li:hover {
color: #fff;
transition: ease-in-out 0.5s;
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-transform: uppercase;
cursor: pointer;
translate: all 1s;
transition-timing-function: ease-in-out;
}


.offcanvas-backdrop {
  display: none !important;
}
.offcanvas-backdrop.show {
  transition: all 0.5s ease-in-out;
}

.playimg {
position: relative;
width: 2vw;
margin-left: -1vw;
margin-top: -1vw;
}
.v1 {
position: absolute;
opacity: 1;
z-index: 9;
width: 100%;
height: 100%;
transition: opacity 0.75s ease-in-out;
background: rgba(255, 255, 255, 0) !important;
}
.v2 {
position: absolute;
z-index: 8;
opacity: 1;
transition: opacity 0.75s ease-in-out;
background: rgba(255, 255, 255, 0) !important;
}

.v3 {
  background: rgba(255, 255, 255, 0) !important;
}

.navvid{
  opacity: 0;
  height: 100%;
  transition: opacity 1s ease-in-out;
}
.videobg {
opacity: 1;
z-index: 1;
width: 100%;
height: 100%;
position: relative;
top: 0%;
left: 0%;;
}


.backicon {
height: 15px;
margin-top: -4px;

}
.backlink {
text-decoration: none;
color: #fff;
font-weight: 800;
text-transform: uppercase;
}


section.button {
margin-top: 10px;
z-index: 999999999999999999999;
opacity: 1;
}

.buttonwrap {
background-color: rgba(0,0,0,0);
max-width: 1600px;
z-index: 999999999;
position: relative;
height: 100%;
width: 100%;
}

.back-btn,  .back-btn:active, .back-btn:visited {
background-color: var(--maincolor);
color: #fff;
border-color: #fff;
opacity: 0;
margin-left: 10px;
}

.back-btn:focus, .back-btn:active, .back-btn:hover{
background-color: var(--maincolor);
color:antiquewhite;
}



li.dropdown li a{
color: var(--maincolor);
text-decoration: none;
padding: 0;
margin: 0;
}

li.dropdown li a:hover{
color: rgba(45,50,75,1);
transition: all ease-in-out 0.25s;
background-color: #fff;
}

.clientlogo {
width: 25px;
height: auto;
margin-right: 10px;
margin-bottom: 3px;
}

.frankeworldlogo {
filter: grayscale(100%) brightness(0) invert(1);
width: 30px;
margin-right: 10px;
}

.frankelogoofc {
filter: grayscale(100%) brightness(0) invert(1);
max-width: 100%;
}


.offcanvas-divider {
height: 0;
overflow: hidden;
border-top: 1px solid #55545c;
opacity: 1;
margin-top: 5px;
margin-bottom: 10px;
}

.divlink {
margin-top: 45px;
color: var(--bgwhite) !important;
}



.btn-close {
  opacity: 1;
}



::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 1s;
}

@media screen and (min-width: 1200px) and (max-width: 1900px) {
.playlink a {
color: var(--maincolor);
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-transform: uppercase;
font-size: 1.2vw;
}
.playlink li{
margin-top: 0.5vw;
}

}


@media screen and (max-width: 1470px) {

  
  
  .frankelogo {

    display: none;
    }
    
    .frankelogo_f {

      display: block;
      }
  
  
  
  }


@media screen and (max-width: 1200px) {
.playlink a {
color: var(--maincolor);
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-transform: uppercase;
font-size: 1.4vw;
}

.playlink li{
margin-top: 0.2vw;
}





}

@media screen and (max-width: 900px) {
.playlink a {
color: var(--maincolor);
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-transform: uppercase;
font-size: 1.6vw;
}
.playlink li{
margin-top: 0.05vw;
}

}

.form-check {
  display: grid;
  grid-template-columns: 0.2fr 2fr;

  align-items: center;


}

.form-switch{
  margin: 0;
  padding: 0;
}

.form-switch .form-check-input {
  margin: 0;

}

#vidpdfselect {
  width: 24%;
  margin-left: 0.5vw;
  margin-bottom: 10px;
  color: #fff;

}


#pdfswitch {
  margin-right: 10px;
}

#pdfLink, #videoLink {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  padding-bottom: 2px;
  margin-right: 5px;
}


#pdfLink::after, #videoLink::after {
  display: grid;
  content: '';
  border-bottom: solid 2px var(--maincolor);  
  transform: scaleX(0);  
  transition: transform 150ms ease-in-out;
  transform-origin:50% 50%;
}

#pdfLink.selected, #videoLink.selected {
  color: var(--maincolor);
  border-bottom: 0px solid var(--maincolor);
}

#pdfLink.selected::after, #videoLink.selected::after {
  transform: scaleX(1);  
}

#pdfswitchtext, #pdfswitch {

  font-size: 18px;
}

#pdflistwrap {
  display: block;
  overflow: hidden;
  overflow-y: scroll;

}

#pdflistwrap div.no-pdfs{
  color: var(--maincolor);
  font-size: 24px;
  text-align: center;
  width: 24%;
  padding: 0.25vw;
  align-self: center;
  justify-self: center;
}

.pdful {
color: var(--maincolor);
list-style: none;
margin-left: 0.5vw;
padding-left: 0;
}


.pdful li {
  cursor: pointer;
  padding-left: 0.5vw;
  margin-top: 2px;
  }

  .pdful li i {
    margin-right: 5px;
  }

.pdful div{
  color: #fff ;
  margin-top: 15px;
  font-size: 1.2rem;
  }


  li.pdflistenelement {
    width: 24%;
  }


li.pdflistenelement span, li.pdflistenelement i {
  pointer-events: none;
}

ul.dropdown-menu {
  list-style: none;
  padding: 10px;
}

ul.dropdown-menu li{
  margin-bottom: 5px;
}

.navpdfli {
  cursor: pointer;
  float: left;
  color: rgba(45,50,75,1);
  opacity: 0.85;
  font-size: 12px;
  margin-left: 10px;
  margin-top: 3px;
  margin-right: 5px;
  transition: color 0.2s ease-in-out;
  display: contents;
}


.navpdfli:hover {
  cursor: pointer;
  float: left;
  color:var(--maincolor);
  opacity: 0.85;
  font-size: 12px;
  margin-left: 10px;
  margin-top: 3px;
  margin-right: 5px;
}


.navpdfli i {
  margin-right: 3px;
  margin-left: 5px;
}

ul {
  margin-bottom: 0;
}



.form-check-input {
  cursor: pointer;


}
.form-check-input:focus{
  outline: none;
  box-shadow: none;

}

.form-check-input:checked {
  background-color: var(--maincolor);
  border-color: #fff ;
}

#videotext, #pdftext {
  color: #fff;
}
span#videotext.selected, span#pdftext.selected {
  color: var(--maincolor);
}


.videogrid {
opacity: 0;
transition: opacity 1s ease-in-out;
}

.videogrid.links {
position: absolute;
z-index: 10;
top: 19%;
left: 22.5%;
list-style-type: none;
display: grid;
height: 68.5%;
width: 100%;
align-content: baseline;
}

.videogrid.rechts {
  position: absolute;
  z-index: 10;
  top: 19%;
  left: 53.5%;
  list-style-type: none;
  display: grid;
  height: 68.5%;
  width: 100%;
  align-content: baseline;
  }



ul.videoul {
position: relative;
list-style-type: none;
margin:0;
padding:0;
width: 100%;
}

a.gridlink {
display: flex;
justify-content: center;
color: #fff;
text-decoration: none;
font-size: 1vw;
position: absolute;
z-index: 99999;
left: 0;
top: 40%;
width: 90%;
opacity: 1;
transition: all 0.5s;
background-color: var(--maincolor);
margin-left: 5%;
pointer-events: none;
padding: 0.8vw 0px;
text-align: center;
border-radius: 3px;
}


a.videobeschreibung {
text-align: center;
justify-content: center;
color: var(--maincolor);
background-color: #fff;
text-decoration: none;
font-size: 0.9vw;
position: absolute;
z-index: 99;
left: 0;
top: 40%;
width: 90%;
opacity: 0;
transition: all 0.5s;
font-weight: 400;
margin-left: 5%;
pointer-events: none;
padding: 0.2vw 0px;
box-shadow: 2px 2px 10px rgba(0,0,0,0);
border-radius: 3px;
}




#logout {
 
  cursor: pointer;

 margin-bottom: 25px;
  margin-left: 50px;
}

#logout i {
  margin-right: 5px;
}

#logout a {
  transition: margin-left 0.5s ease-in-out;
}

#logout:hover a {
  margin-left: 8px;
}


.videogrid li img:hover +a.gridlink  +a.videobeschreibung {
transition-delay: 0.1s;
transform: scale(0.9) translateY(120%);
cursor: pointer;
opacity: 1;
}

.videogrid li img:hover +a.gridlink {
transition-delay: 0.1s;
transform: scale(0.9) translateY(-80%);
cursor: pointer;
opacity: 1;
}

.videogrid.links > 
.videoul li {
width: 24%;
margin-left: 0%;

position: relative;

padding:0.4vw;
}

.videogrid.rechts > 
.videoul li {

width: 24%;

padding:0.4vw;
position: relative;
}

.videoul {

overflow-y: scroll;
overflow-x: hidden;


}

.videogrid li img {
width: 100%;
height: 100%;
transition: all 0.5s;
filter: grayscale(0%) blur(0px);
justify-self: center;
opacity:1;
border-radius: 0.8vw;

}


.videogrid li img:hover {
transition-delay: 0.1s;
transform: scale(0.9) translateY(-25px);
cursor: pointer;
opacity: 1;
filter: none;
margin-top: 2vw;
-webkit-filter: grayscale(1) ;
filter: grayscale(1) ;
border-radius: 0.8vw;
}

.filterwrap, .filterwrap option {
  color: var(--maincolor);
  font-weight: 500;
  display: block;
  white-space: nowrap;
  min-height: 1.2em;
  padding: 0px 8px 0px;
  cursor: pointer;

}


option.filterbtn  {
  color: var(--maincolor);
  font-weight: 500;
  display: block;
  min-height: 1.2em;
}



.filterwrap.links {
width: 23%;
margin-left: 0.5%;
margin-bottom: 5px;
height: 30px;
max-height: 30px;
margin-top: 2px;
}

.filterwrap.rechts {
  width: 23%;
  margin-left: 0.5%;
  margin-bottom: 20px;
  height: 30px;
  max-height: 30px;
  margin-top: 10px;
  }

/* button.filterbtn {
margin: 4px 4px;
color: var(--maincolor);
background-color: rgba(255,255,255,0);
margin-right: 0.2vw;
margin-bottom: 0.2vw;
padding: 0px 0.4vw;
border: 1px solid var(--maincolor);
transition: background-color 0.3s ease;
border-radius: 5px;
font-size: calc(0.55vw + 0.3vh + 0.1vmin);
}
button.filterbtn:hover {
color: var(--maincolor);
background-color: rgba(255,255,255,1);

border: 1px solid var(--maincolor);
}

button.filterbtn.active {
background-color: rgba(255,255,255,1);
} */

li.videoitem {
transform: scale(1);
transition: transform 0.5s ease-in-out;

display: block;
height: auto;
}
li.hidden {
transform: scale(0);
height: 0;
}






/* Hide scrollbar for Chrome, Safari and Opera */
.videoul::-webkit-scrollbar, #pdflistwrap::-webkit-scrollbar {
display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.videoul {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

@media only screen and (min-width: 2250px) {

a.gridlink , a.videobeschreibung {
font-size: 0.8vw;
/**  background-color: #7d0cff;**/
}
}



@media only screen and (max-width: 1920px) {

a.gridlink , a.videobeschreibung {
font-size: 1.2vw;

}
}

@media only screen and (max-width: 1600px) {
.videowrap {
margin-top: 0px;
}
object#pdfviewer {
  height: 100%;
  width: 60%;
  justify-self: center;
}

}

@media only screen and (max-width: 820px) {
  .filterwrap.links {
    margin-bottom: 8px;
    width: 23%;
    height: 25px;
    max-height: 25px;
    padding: 0;
    padding-left: 5px;
    font-size: 10px;
    }
    .pdful > div{
      font-size: 2.2vw;
    }

    .pdful li {
      font-size: 2vw;
    }
    #pdflistwrap div.no-pdfs{
      color: var(--maincolor);
      font-size: 14px;
      text-align: center;
      width: 24%;
      padding: 0.25vw;
      align-self: center;
      justify-self: center;
    }
    

    #pdfswitchtext, #pdfswitch {

      font-size: 12px;
    }



    #vidpdfselect {
        width: 24%;
        margin-left: 0.5vw;
        margin-bottom: 2px;
    }
    .filterwrap.rechts {

    margin-bottom: 8px;
    width: 23%;
    height: 20px;
    max-height: 25px;
    padding: 0;
    padding-left: 5px;
    font-size: 9px;
    }

    object#pdfviewer {
      height: 100%;
      width: 90%;
      justify-self: center;
    }


        

}


@media only screen and (max-width: 650px) {
    .tooltip {
      display: none;
    }

  .playbutton {
    position: absolute;
    z-index: 9;
    animation: btnpulse 5s infinite;
    color:  var(--maincolor);
    list-style-type:square;
    background: url(../img/play-circle-fill.svg);
    filter: invert(33%) sepia(34%) saturate(2286%) hue-rotate(318deg) brightness(101%) contrast(104%);
    background-repeat: no-repeat;
    width: 5vw !important;
    margin-top: -2.5vw;
    margin-left: -2.5vw;
    height: 5vw;
    border: 0px;
    background-color: rgba(9, 255, 0, 0) !important;
    z-index: 11;
    transition: opacity 0.2s ease-in-out;
    
    border-radius: 100%;
    transition: all 0.3s ease-in-out;
    
    }
    
    .playbutton:hover {
    opacity: 0.95;
    transform: scale(0.9);
    }

  i.videocloseicon {

    z-index: 100;
    position: absolute;
    right: 50%;
    top: -3%;
    scale: 1 !important;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    color: rgba(73, 73, 73, 0.5);
    z-index: 100;
  
}
i.videocloseicon.showicon {

  z-index: 100;
  position: absolute;
  border-radius: 50%;
  right: 50%;
  top: 1%;
  scale: 0.9;
  cursor: pointer;
  opacity: 0.8;
  scale: 2;
  transform: rotate(90deg);
  opacity: 1;

  color: rgba(73, 73, 73, 0.5);
}
i.videocloseicon.showicon:before {
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
i.videocloseicon:hover {
  scale: 1.2;
  opacity: 1;
  color: rgb(231, 55, 67, 1);

}


.videogrid li img:hover {
transition-delay: 0.1s;
transform: scale(0.9) translateY(-25px);
cursor: pointer;
opacity: 1;
filter: none;
padding-top: 3vw;
}

}




@media only screen and (max-height: 1100px) {
.videowrap {

margin-top: 0;
}
}

/************* MOBILE HOVER STUFF GOES HERE ********************/

@media (hover: none) {

#range, input.slider-control {
  display: none !important;
}


.videogrid li img {
transition-delay: 0.1s;
transform: scale(1) translateY(-25px);
cursor: pointer;
opacity: 1;
filter: none;
margin-top: 2vw;
-webkit-filter: grayscale(1) ;

}
.videogrid li img +a.gridlink  +a.videobeschreibung {
transition-delay: 0.1s;
transform: scale(0.9) translateY(120%);
cursor: pointer ;
opacity: 1 !important;
}

.videogrid li img +a.gridlink {
transition-delay: 0.1s;
transform: scale(0.9) translateY(-80%);
cursor: pointer;
opacity: 1;
}



}






video::-webkit-media-controls-panel {
pointer-events: none;
}

video::-webkit-media-controls-play-button, video::-webkit-media-controls-timeline, video::-webkit-media-controls-fullscreen-button,video::-webkit-media-controls-return-to-realtime-button {
  pointer-events: all;
}




/**


video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button

*/
.dot1,.dot2,.dot3 {
  width: 25px !important;
  height: 2px !important;
  background-color: var(--bgwhite);
  border-radius: 3px;
  margin-bottom: 6px;
  margin-right: 5px;
  transition: all 0.25s ease ;

}

.square1, .square2 {
  width: 25px !important;
  height: 2px !important;
  background-color: var(--bgwhite)!important;
  border-radius: 3px;
  margin-bottom: 6px;
  margin-right: 5px;
  transition: all 0.25s ease ;
  content: "";
}

.square1 {
  transform: rotate(-45deg);
  transition: all 0.25 ease;
}
.square2 {
  transform: rotate(45deg);
  transition: all 0.25 ease;
  margin-top: -8px;
  margin-left: -1px;
}
.squarewrap {
  margin-top: 10px;
  width: 50px !important;
  height: 50px !important;
}

.squarewrap:hover .square1 {
  transform: rotate(45deg);
}

.squarewrap:hover .square2 {
  transform: rotate(-45deg);
}

.navbar-toggler:hover .dot3 {
  scale: 1;
  margin-right: -4px;
  background-color: var(--bgwhite);
}

.navbar-toggler:hover .dot1{
  scale: 1;
  margin-right: -4px;
  background-color: var(--bgwhite);
}
.navbar-toggler:hover .dot2{
  margin-left: 10px;
  background-color: var(--bgwhite);
}

.nav-link {
  color: var(--bgwhite);
}

div#animation-container {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
lottie-player{
  margin:0;
  padding:0;
  overflow: hidden;
  margin-bottom: -35px;
}

.navbar-toggler {
  border: 0px;
}




.nav-item a{
  text-decoration: none;
}
.accordion-collapse {
  background: rgba(255, 255, 255, 0.9);
  margin-top: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 4px;
  margin-left: 30px;
  padding-left: 0px;
}

.accordion-collapse li {
  list-style: none;
}


.modal-body{
  position: relative;
  width: 100%;
  display: grid;


}


#pdfviewer {
  height: 100%;
  width: 40%;
  justify-self: center;
}


#iconwrap {
  display: block;
  position: absolute;
  z-index: 9999;
  margin: 15px;

}


#iconwrap i {
  cursor: pointer;
  color: #fff;
  font-size: 28px;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  margin-right: 10px;
  display: block;
}

#iconwrap i:hover {
  opacity: 1;
  color: var(--maincolor);
}

#pdfviewerwrap {
  display: grid;
}

.clsbtn {
  background-color: var(--maincolor);
}