:root {
  /*Farben*/
  --maincolor:#e73743;
  --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: 1440px;
display: flex;
margin-top: 0px;
align-items: center;
transition: margin-top 0.25s ease-in-out;
}
.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;
}


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

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


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


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



body {
padding: 0;
margin: 0;

background: radial-gradient(rgba(95, 95, 95,0.1) 0%, rgba(20, 20, 20,0.8)80%);
background-image:  url(../img/food.jpg);
backdrop-filter: blur(0px) brightness(0.97);
height: 100vh;
overflow-x: hidden;
}






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

.frankelogo {
filter: grayscale(100%) brightness(0) invert(1);
width: 90px;
margin: 3%;
}

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;

}  



.videowrap {
max-width: 1440px;
max-height: 810px;
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;
}


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 {
margin-left:15px;
}
li.dropdown li a{
color: var(--maincolor);
text-decoration: none;
}

li.dropdown li a:hover{
color: #000;
transition: all ease-in-out 1s;
}

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

.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:  rgba(255, 255, 255, 0.55) !important;
}




::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: 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;
}

}


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

.videogrid.links {
position: absolute;
z-index: 10;
top: 22%;
left: 0%;
list-style-type: none;
display: grid;
height: 65.2%;
width: 100%;

}
.videogrid.rechts {
position: absolute;
z-index: 10;
top: 22%;
left: 0%;
list-style-type: none;
display: grid;
height: 65.2%;
width: 100%;

}

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: 1.2vw;
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 {
display: flex;
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 {
margin: 0.8vw; 
width: 24%;
margin-left: 22.5%;
padding: 0;
position: relative;
display: flex;
}

.videogrid.rechts > 
.videoul li {
margin: 0.8vw; 
width: 24%;
margin-left: 53.5%;
padding: 0;
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;

}




.filterwrap.links {

width: 24%;
margin-left: 22.5%;
height: 40px;
max-height: 40px;



}

.filterwrap.rechts {

width: 24%;
margin-left: 53.5%;
height: 40px;
max-height: 40px;
}


/* 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 {
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%;
    margin-left: 23%;
    height: 25px;
    max-height: 25px;
    padding: 0;
    padding-left: 5px;
    font-size: 10px;
    }
    
    .filterwrap.rechts {
    margin-left: 54%;
    margin-bottom: 8px;
    width: 23%;
    height: 25px;
    max-height: 25px;
    padding: 0;
    padding-left: 5px;
    font-size: 10px;
    }

    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: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  margin-bottom: 6px;
  margin-right: 5px;
  transition: all 0.25s ease ;

}

.square1, .square2 {
  width: 25px !important;
  height: 2px !important;
  background-color: rgba(255, 255, 255, 0.8)!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: rgba(255, 255, 255, 1);
}

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


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 {
  margin-bottom: 25px;
}

.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);
}