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


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

#lbx-lightbox * {
  outline: 1px solid #333;
  /* outline:none !important; */
}

#lbx-lightbox {
  padding:2em;
}

#lbx-lightbox {
    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;
}


#lbx-lightbox-item * {
  /* outline: 1px solid #222; */
}


#lbx-lightbox-item {
  background: rgba(0, 0, 0, 1);
  /* background-image: linear-gradient(#0c1622, #000000, #000000, #000000, #0c1622); */
  z-index:1000 !important;
  color:#fff;
  padding:0em;
  display:block;
  /* border:1px solid lime; */
}

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

#lbx-header * {
  /* outline:1px solid #222; */

}

#lbx-header {
  flex-wrap:wrap;
  flex-shrink: 1;


}


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



#lbx-top-right-controls {

}



#lbx-sound-button a {
}

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




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

}


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

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




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

}

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




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


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






/* ---------- LIGHT BOX CONTENT ----------*/

#lbx-content {
  padding:2em 0;
  border-top:1px solid rgba(255, 255, 255, 0.2);
  border-bottom:1px solid rgba(255, 255, 255, 0.2);
  margin:2rem 0;

  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;


}

#lbx-content-container {
  position:relative;
  /* margin: 0 auto; */
  width:100%;
  height:100%;
  display: flex;
  justify-content: space-around;
  align-items: center;




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



/* ---------- VIDEO / IMAGE CONTAINER ---------- */

#lbx-video-container, #lbx-image-container {
  display:block;
  top:0px; left:0px;
  width: 100% !important;
  height: auto !important;
}

#lbx-video-container > .video-holder, #lbx-image-container > .image-holder {
  top:0px;
  left:0px;
  width: 100% !important;
}

#lbx-video-container .video-holder video , #lbx-image-container .image-holder img {
  display: inline-block;
  vertical-align:top;
  max-width: 100%;
  object-fit:scale-down;
    width: 100% !important;
  height:720px !important;
}

.lbx-add-padding {
  padding: 0 3em;
}

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

/*
#lbx-preloader-container {
  position: absolute;
  z-index:-999 !important;
  max-width: 1280px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */


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


#lbx-preloader {
    width: calc(var(--controlsize)* 1.3);
    height: calc(var(--controlsize)* 1.3);
    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);}
}



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

/* ROOT VARS */

:root {
  --lbx-footer-height:2rem;
  --lbx-footer-max-width:33rem;

}


#lbx-footer * {
  /* outline:1px solid #333; */
}

#lbx-footer * {
  /* outline:none !important; */
}


#lbx-footer {
  display: flex;
  height:var(--lbx-footer-height);

}

#lbx-footer-content {
  margin:0 auto;
  display: flex;
  justify-content:center;
  align-items: center;
  width:100%;
  gap:1rem;


}



/* ---------------------------- */
/* Footer Middle */

#lbx-footer-middle {



}


#lbx-buttons {
  display: flex;
  justify-content:space-around;
  align-items: center;
  width: 20rem;
  gap:1rem;
}

#lbx-buttons a {
  height: calc(var(--lbx-footer-height) / 3);
  border-radius: 50px;
  background-color: var(--grey3);
  display: inline-block;
  /* outline:1px solid blue; */


}


#lbx-buttons a:hover {
  color: #fff;
  background-color: var(--grey1) !important;

}

.lbx-dot {
  background-color: var(--grey3);
  color: #000;
  flex-basis: 25%;


}

.lbx-dot-on {
  /* background-color: var(--red) !important; */
  background-color: var(--grey1) !important;
  color: #fff;
  flex-basis: 100%;
}





/* ---------- LEFT / RIGHT ARROWS ---------- */


#lbx-footer-nav-left, #lbx-footer-nav-right {
  /* outline:1px solid orange; */
  display: flex;
  justify-content: center;
  align-items: center;


}


#lbx-footer-nav-left a, #lbx-footer-nav-right a {

  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--lbx-footer-height) /2 );
  height: calc(var(--lbx-footer-height) /2 );
  /* outline:1px solid green; */
  margin:0 0.5rem;
}

#lbx-footer-nav-left a img, #lbx-footer-nav-right a img {

  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--lbx-footer-height) /2 );
  height: calc(var(--lbx-footer-height) /2);
  /* outline:1px solid pink; */


}



/* -------------------------------------------------- */
/* Media queries */
/* -------------------------------------------------- */


/* @media screen and (max-width: 39.9375em) { */
@media screen
and (max-width: 639px) {

  /* .lbx-dot {
    height: .6em;
    width: .6em;
    margin:0 0.3em;

  } */



#lbx-agency, #lbx-role, #lbx-details, #lbx-notes, #lbx-caption {
  display: none !important;

}



  #lbx-close, #lbx-sound-button {
    width:1.5rem;
    height:1.5rem;

  }

  #lbx-video-container .video-holder video , #lbx-image-container .image-holder img {

    height:300px !important;
  }


  #lbx-lightbox {
    padding:1rem;
  }

  #lbx-footer {
    display: flex;
    height:var(--lbx-footer-height);
    margin:1rem;
  }

  #lbx-footer-content {
    gap:1rem;

  }


  #lbx-buttons {
    width: 12rem;
    gap:.5rem;
  }

  #lbx-footer-nav-left a, #lbx-footer-nav-right a {
    margin:0;
  }

}