/* ----- Lightbox ----- */

#playtest {
  padding:0.15em .5em;
  position:absolute;
  font-size: 2em;
  letter-spacing: 0.25em;
  top:0px;
  left:2.1em;
  color:var(--red2);
  /* color:var(--grey1); */
  opacity:0.5;

  /* font-family: 'Alphadot-Rigid'; */
  background: repeating-linear-gradient( -45deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85) 1px, rgba(29, 29, 54, 0.85) 1px, rgba(29, 29, 54, 0.85)  2px);

}

#itemtype {
  font-family: 'Alphadot-Rigid';
  background: repeating-linear-gradient( -45deg, rgba(230, 69, 75, 0.85), rgba(230, 69, 75, 0.85) 3px, rgba(230, 69, 75, 1) 3px, rgba(230, 69, 75, 1)  6px);
  color:#000000;
  padding:0.1em 0.5em;
  margin-right: 0.5em;
  float:left;
}

#positional {
  position:absolute;
  top:0px;
  left:100px;
  display:none;
  width:1343px;
  height:875px;

}


/* dev panel */

#lb-dev {
  position:fixed;
  z-index: 999999;
  top:20px;
  left: 20px;
  width:100px;
  background: black;
  display:block;
  color:white;
  text-align: center;
  display:none;
}

#lb-info-height { background: red}
#lb-content-height { background: blue}
#lb-footer-height { background: green}



/* -------------------------------------------------- */
/* LIGHTBOX */
/* -------------------------------------------------- */

:root {
  --lb-border: 2em;

}


#lightbox * {
  /* outline:1px solid lime; */
}

#lightbox {
  position:fixed;
  top: 0;
  left: 0;
  width:100vw;
  height:100vh;
  color:#fff;
  text-align: left;
  font-family: Montserrat-Regular;
  background: rgba(0, 0, 0, 1);
  z-index:100000 !important;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  display:none;


}


/* ------------------------------ */
/* LIGHTBOX HEADER */

#lb-header * {
  /* outline:1px solid #ccc; */

}

#lb-header {

  margin: var(--lb-border);
  padding: 0 0 calc(var(--lb-border) / 2) 0;
  border-bottom:1px solid rgba(255, 255, 255, 0.2);
  flex-wrap:wrap;
  flex-shrink: 1;


}


#lb-info-header {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}



#lb-top-right-controls {

}

#lb-close, #lb-sound-button {
  width:2em;
  height:2em;
  float:right;
  margin-left:2em;
  z-index: 1000000 !important;

}

#lb-sound-button a {
}

#lb-sound-on {
  display:none;
}




#lb-client {
  font-size:2em;
  line-height:1.2em;
  font-family:'Alphadot-Rigid';
  color:var(--grey2);

}


#lb-info-box * {
  /* outline:1px solid lime; */
}

#lb-info-box {
  display:flex;
  justify-content:flex-start;
  gap:1;
  font-size:1em;
  color:var(--grey2);
}




div.lb-details {
  font-size:0.9em;
  display:inline-block;
  margin-right:1.75rem;
  margin-top:0.1rem;
  margin-bottom:0.2rem;

}

.lb-hide-details { display:none !important}




#lb-info-box .lb-details span:nth-child(2) {
  color:#ffffff;
  display: block;
}




.fa-bolt {color:#45E689}
.fa-bolt:hover {color:#ffffff}
.fa-arrows-alt {color:#6161B2}





/* ------------------------------ */
/* LIGHBOX CONTENT */

#lb-content * {
  /* outline: 1px solid lime; */
}


#lb-content  {
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:1;



}

#lb-content-container * {

}


#lb-content-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width:100%;
  height:100%;
}


/* ------------------------------ */
/* LIGHTBOX NAVIGATION */


.lb-nav {
  /* outline:1px solid lime; */
}

#lb-nav-left, #lb-nav-right {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;

}

#lb-nav-left a, #lb-nav-right a {


  /* margin:.5em; */
  opacity:0.8;
  transition: 250ms opacity ease-in;
}

#lb-nav-left a:hover, #lb-nav-right a:hover {
  opacity:1;
}



.lb-hide-nav {
  display:none !important;
}

.arrow {
  font-family: Arrows;
  font-size: 3em;
  color:var(--white);
  padding:0.25em;

}

.arrow-left::before { content: 'B';}
.arrow-right::before { content: 'C';}

/* ------------------------------ */
/* LIGHBOX VIDEO CONTAINER */

#lb-video-container, #lb-image-container {
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;

}

#lb-video-container > .video-holder, #lb-image-container > .image-holder {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 100% !important;
  height: auto !important;


}

#lb-video-container .video-holder video , #lb-image-container .image-holder img {
  flex-shrink: 0;
  min-height: 300px;
  flex-shrink: 0;
  width:100%;
  /* max-height: 720px; */
  object-fit: contain;

}




.lb-add-padding {
  padding: 0 var(--lb-border);
}


/* --------------------------- */
/* Video controls */

:root {
  --controlsize: 5em;
  --controltime: 500ms;
}

.lb-show-video-controls {
  display:block !important;
  animation-fill-mode:backwards;
}

#lb-video-controls {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  cursor: pointer;
  display:none;
}


#lb-play-pause {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: top left;
  background-color:rgba(25, 25, 25, 0.8);
  border-radius: 500px;
  animation-fill-mode: forwards;
  width:calc(var(--controlsize));
  height:calc(var(--controlsize));

}

#lb-play-pause a {
  width:calc(var(--controlsize));
  height:calc(var(--controlsize));
}

#lb-pause {
  display:none;
}

.lb-play-in {
  animation-fill-mode: forwards;
  animation: playin var(--controltime) ease-in-out;
}

.lb-play-show {
  animation: playPulse var(--controltime) ease-in-out;
}

.lb-pause-show {
  animation: pausePulse var(--controltime) ease-in-out;
}



@keyframes playin {
    from { opacity:0; scale:1; }
    to   { opacity: 1; scale:1.2; }
}

@keyframes playPulse {
    0%   { opacity:0; scale:1; }
    75%  { opacity: 1; opacity: 0.75; }
    100% { opacity: 0; scale:1.2; }
}

@keyframes pausePulse {
    0%   { opacity:0; scale:1; }
    50%  { opacity: 1; opacity: 0.5; }
    100% { opacity: 0; scale:1.2; }
}







/* ------------------------------ */
/* LIGHBOX PRELOADER */


#lb-preloader-container {
  position:absolute;
  z-index:-999 !important;
  align-self: center;
  left:50%;
  transform: translateX(-50%);
}


#lb-preloader {
    width: calc(var(--controlsize)* 1.1);
    height: calc(var(--controlsize)* 1.1);
    border: 3px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0%     { transform: rotate(0deg);}
    100%   { transform: rotate(360deg);}
}


/* ------------------------------ */
/* NEW PRELOADER 1 */


/* #lb-preloader {
    width: calc(var(--controlsize)* 1.1);
    height: calc(var(--controlsize)* 1.1);
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
}

#lb-preloader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #FFF;
    animation: prixClipFix 2s linear infinite ;
}

@keyframes rotate {
  100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
} */



/* ------------------------------ */
/* LIGHTBOX FOOTER */


:root {
  --lb-footer-height:2rem;
  --lb-footer-max-width:25rem;

}



#lb-footer * {
  /* outline:1px solid lime; */
}

#lb-footer {
  /* bottom:0px; */
  /* padding: 2rem 2rem 8rem 2rem; */

  height:10rem !important;
  margin: var(--lb-border);
  flex-shrink: 0;



}

.lb-footer-content * {
  /* outline:1px solid red; */
}


.lb-footer-content {
  font-size: 1em;
  border-top:1px solid rgba(255, 255, 255, 0.2);
  padding: calc(var(--lb-border) * 0.4) 0 0 0;
  display: flex;
  justify-content:space-between;
  height: var(--lb-footer-height);
  /* max-width: var(--lb-footer-max-width); */


}




/* ------------------------------ */
/* FOOTER Left */

#lb-footer-left {
  height: var(--lb-footer-height);
  display: flex;
  align-items: center;
  flex:100%;
}

#lb-caption {
  font-size: 0.9em;
}

#lb-caption::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f05a";
    margin-right:0.5em;
    color: var(--grey3);
    font-size: 1.3em;
    vertical-align: middle;


  }


/* ------------------------------ */
/* FOOTER Middle Buttons */

#lb-footer-middle {
  display:flex;
  justify-content:space-around;
  align-items: center;
  height: var(--lb-footer-height);
  flex:100%;
}



#lb-buttons {
  display:flex;
  justify-content:space-around;
  align-items: center;
}

#lb-buttons a {
  height: .6rem;
  border-radius: 50px;
  background: var(--grey3);
  display: inline-block;
  transition: 500ms width ease-in, 500ms background ease-in;
}


#lb-buttons a:hover {
  color: #fff;
  background: var(--grey1) ;
}

.lb-dot {
  width: 1rem;
  margin:0 0.5em;
  transition: 500ms width ease-in, 500ms background ease-in;
}

.lb-dot-on {
  background: var(--grey1) !important;
  width: 4rem;
  transition: 500ms width ease-in, 500ms background ease-in;
}



/* ------------------------------ */
/* FOOTER Right */


#lb-footer-right * {
}

#lb-footer-right 		{
  font-family: "Alphadot-Quirks";
  text-align: right;
  height: var(--lb-footer-height);
  display:flex;
  text-align: right;
  justify-content: flex-end;
  align-items: center;
  flex:100%;
}

#lb-footer-legend	{
  font-size: 1.25em;
  color:#555555;
}


#logoicon img {
  vertical-align: baseline;
}


#playicon, #workicon {
  color:var(--red);
  display:none;
}