/* CSS VARIABLES */
:root {
  --primary: black;
  --light: #F3F3F3;
  --dark: 	#686868;
}

.completed-wrapper {
  width: 100vw;
  /* height: 100vh; */
  min-height: 100vh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  background-color: var(--primary);
  color: var(--light);
  font-family: teletext2;
  box-sizing: border-box;
  line-height: 1.4;
}

img {
  max-width: 100%;
  display: block;
}

.completed-minisite-burger-menu{
  padding-right: 3vw;
}

.main-container h1, .gallery-title {
  padding-top: 60px;
  padding-bottom: 10px;
  font-size: 1.75em;  
  padding-left: 7.5vw;
  /* color: #2ad4da; */
}


/* HEADER */
.completed-header {
  position: fixed;
  font-family: teletext2;
  top: 0;
  height: 60px;
  align-items: center;
  display: grid;  
  grid-gap:5px;
  grid-template-columns: 2fr 7fr 1fr;
  grid-template-areas: 
   "nt mn mn sb . . . "; 
  background-color: #0800e7;
  /* background-color: #d10d0e; */
  width: 100%;
  margin-bottom: 0px;  
  z-index: 5;
}

.genre-links, .show-links{
  padding-right: 20px;
}

.genre-links:hover, .show-links:hover{
  cursor: pointer;
  color: aqua;
}

.genre-title{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 5px;
}

.featured-carousel .completed-archive-title{
  text-shadow: 3px 3px black;
  text-transform: uppercase;
}

span.black-bg{
  background: black;
  padding: 5px;
  line-height: 1.4;
  color: #00f5f8;
}




.show-title-link{
  text-transform: uppercase;
  border-right: 2px solid var(--light);
  margin-right: 20px;
}

.completed-blink-logo {
  grid-area: nt;
  object-fit: cover;
  width: 100px;
  max-height: 100%;
  font-size: 2em;
  font-family: teletext;
  padding-left: 30px;
  text-shadow: 2px 2px black;
  /* padding-top: 0px;   */
}

.completed-blink-logo img {  
  height: 35px;     
}

#logo {
  color: #fff700;  
  margin: 0; 
  padding: 0; 
}

.completed-blink-logo a{
  text-decoration: none;
}


.main-nav {
  grid-area: mn;
}

.main-nav a {
  color: var(--light);
  text-decoration: none;
}

.main-nav a:hover {
  color: #00f5f8;
}

.sub-nav {
  grid-area: sb;
  padding: 0 40px 0 40px;
}

.sub-nav a {
  color: var(--light);
  text-decoration: none;
  margin: 5px;
}

.sub-nav a:hover {
  color: var(--dark);
}

/* SHOWCASE */


.showcase {
width: 100%;
height: 93vh;
margin-top: 60px;
position: relative;
background: url('https://i.ibb.co/vXqDmnh/background.jpg') no-repeat center center/cover;
}

.showcase::after, .completed-page-wrapper{
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
}

.showcase::after{
  box-shadow: inset 120px 100px 250px #000000, inset -120px -100px 250px #000000;
  position: absolute;
}

.showcase-top {
position: relative;
z-index: 2;
height: 90px;
}

.showcase-top img {
width: 170px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: 0;
}

.showcase-top a {
position: absolute;
top: 50%;
right: 0;
transform: translate(-50%, -50%);
}

.showcase-content {
position: relative;
z-index: 2;
width: 65%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
}

.showcase-content h1 {
font-weight: 700;
font-size: 5.2rem;
line-height: 1.1;
margin: 0 0 2rem;
}

.showcase-content p {
text-transform: uppercase;
color: #fff;
font-weight: 400;
font-size: 1.9rem;
line-height: 1.25;
margin: 0 0 2rem;
}


/* MAIN CONTIANER */
.main-container {
  /* padding: 50px; */
  padding-top: 0;
  margin-top: 60px;
}

.box {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(6, minmax(300px, 1fr));
}

.box button {
  transition: transform .3s;
  cursor: pointer;  
}

.box img {
  border-radius: 2px;
  object-fit: cover;
    height: 100%;
}

/* .show-card{
  border: 2px solid #fff700; 
} */

/* LINKS */
.link {
  padding: 50px;
}

.sub-links ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}

.sub-links a {
  color: var(--dark);
  text-decoration: none;
}

.sub-links a:hover {
  color: var(--dark);
  text-decoration: underline;
}

.logos{
  display: grid;
  width: 100%;
  justify-self: center;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: space-evenly;
  justify-items: space-evenly;
  padding: 50px 0;
}

.logos a{
  /* padding: 10px; */
  display: flex;
  width: 100%;
  justify-content: center;
}


.logo {
  color: var(--dark);
  transition: 0.3s ease;
}

.logo:hover{
  color: white;
}

/* FOOTER */
footer {
  padding: 20px;
  text-align: center;
  color: var(--dark);
  margin: 10px;
}

/* INDIVIDUAL PAGE */

.completed-page-center{
  display: grid;
  justify-content: center;
  width: 100vw;
  margin-top: 60px;
}


.featured-section-wrapper{
  /* height: calc(100vh - 40px); */
  width: 100%;
  position: relative;
  display: grid;
  /* overflow: hidden; */
  max-width: 1920px;
  grid-template-areas: "thearea";
  justify-self: center;
}

#play-btn{
  grid-area: thearea;
  z-index: 3;
  width: 15%;
  align-self: center;
  justify-self: center;
  /* background-image: url('../img/play-button.png'); */
  transition: opacity 1s ease;
}

#play-btn:hover{
  cursor: pointer;
}


.completed-page-feat-vid{
  /* overflow: hidden; */
  grid-area: thearea;
  justify-self: center;
  width: 100%;
  height: 100%;
}

.completed-page-wrapper{
  background-size: cover;
  grid-area: thearea;
  height: 100%;
background-repeat: no-repeat;
background-position: center;
display: grid;
/* display: none; */
align-content: end;
justify-self: center;
  z-index: 2;
  box-shadow: inset 400px 100px 250px #181818, inset -120px -100px 250px #181818;
}

.completed-page-wrapper-show-details{
  height: 100%;
  width: 50%;
  padding-left: 8%;
  padding-bottom: 5%;
  transition: opacity ease 2s;

}

.completed-page-show-title{
  font-size: 2.5em;
  line-height: 1;
  text-transform: uppercase;
}

.completed-page-long-desc-wrapper{
  position: relative;
  padding: 80px 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.completed-page-long-desc{
  border-top: #00f5f8 4px dotted;
  border-bottom: #00f5f8 4px dotted;
  width: 70%;
  max-width: 850px;
  color: white;
  font-size: 1.1em;
  line-height: 1.4;
}

.completed-page-long-desc p{
  padding-top: 12.5px;
}
.completed-page-long-desc a{
  color: #ffff00;
}

.completed-page-long-desc p:first-of-type{
  padding-top: 30px;
}

.completed-page-long-desc p:last-of-type{
  padding-bottom: 30px;
}

.show-secondary-details{
  color:#a3a3a3;
  padding: 5px 0;
}

/* EPISODE BOX */

.episode-master-holder{
  width: 100vw;
  overflow-x: hidden;
  line-height: 1.2;
}

.single-episode{
  display: flex;
    /* width: 90vw; */
    /* width: calc(100% - 300px); */
    width: 100%;
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    /* padding: 0px 150px; */
    justify-content: center;
    grid-gap: 50px;
}

.single-episode .episode-holder{
  width: 75%;
}

.episode-title{
  font-size: 1.2em;
  padding: 5px 0;
}

.episode-description{
  font-size: 0.9em;
  color: #a3a3a3;
}

/* ARCHIVE PAGE */

.genre-shows-holder{
  /* padding-bottom: 20px; */
  /* border-bottom: white 2px solid; */
}

.show-card{
  position: relative;
  height: 15.73244147vw;
  min-height: 175px;
  width: 100%;
}

.owl-carousel .owl-stage-outer, .owl-stage {
  height: 15.73244147vw;
  min-height: 200px;
}

.episode-carousel .owl-carousel, .episode-carousel .owl-stage-outer, .episode-carousel.owl-stage {
  height: auto;
  min-height: auto;
}

.featured-carousel .show-card, .featured-carousel  .owl-stage-outer, .featured-carousel .owl-stage{
  height: 70vh;
}


.show-card-overlay{
  display: grid;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

.featured-carousel .show-card-overlay{
  align-content: end;
  justify-content: left;
  padding-left: 7.5vw;
  width: 85%;
  max-width: 900px;
  z-index: 2;
  /* text-shadow: 3px 3px black; */
}


button.show-card{
  border: none;
}

.short-desc{
  display: none;
}


.show-card-overlay:after {
  content: '\A';
  position: absolute;
  width: 100%; height:100%;
  top:0; left:0;
  background:rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.featured-carousel .show-card-overlay:after{
  background:none;
  }
  

.completed-archive-title{
  justify-self: center;
  align-self: center;
  color: white;
  z-index: 3;
  font-size: 1.9em;
  padding: 0 10px;
  font-family: teletext2;
  opacity: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.featured-carousel .short-desc{
  display: block;
  color: white;
  font-family: teletext2;
  padding: 0;
  font-size: 1.5em;
  justify-self: left;
  text-align: left;
  padding-bottom: 50px;
  opacity: 0;
  transition: all 0.75s;
  -webkit-transition: all 0.75s ease-out;
  /* max-width: 85%; */
}

.featured-carousel .completed-archive-title{
  justify-self: left;
  text-align: left;
  padding: 0;
  opacity: 0;
  font-size: 3em;
  /* max-width: 85%; */
  align-self: flex-start;
  transition: all 0.75s ease-out;
  -webkit-transition: all 0.75s ease-out;
  padding-bottom: 5px;
}

.featured-carousel .active .completed-archive-title{
  opacity: 1;
}

.featured-carousel .active .short-desc{
  opacity: 1;
}

.show-card:hover > .show-card-overlay:after{
  opacity: 1;
}

.show-card:hover *{
  opacity: 1;
}


/* GALLERY & LIGHTBOX */

.gallery-holder{
  width: 100vw;
  padding-top: 40px;
  padding-bottom: 50px;
}

.gallery-title{
  font-size: 1.4em;
  padding-left: 100px;
  padding-bottom: 10px;
}

.owl-carousel{
  color: white;
  position: relative;
}



.owl-item{
  height: 15.73244147vw;
}

.episode-carousel .owl-item{
  height: auto;
}

.owl-dots{
  display: none !important;
}

.owl-nav{
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  align-items: center;
  box-shadow: inset 12vw 0px 115px -25px rgb(0 0 0 / 50%), inset -12vw 0px 49px -46px rgb(0 0 0 / 50%);
}

.featured-carousel .owl-nav{
  box-shadow: inset 13vw 0px 115px -25px rgb(0 0 0 / 65%), inset -13vw 0px 49px -46px rgb(0 0 0 / 65%);
}


.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
  /* background: blue; */
    border: none;
    padding: 0!important;
    font-family: arial;
    font-size: 7em;
    pointer-events: auto;
    opacity: 0.8;
    height: 100%;
    display: flex;
    align-items: center;
    width: 10vw;
}

.owl-carousel .owl-nav button.owl-next{
  justify-content: end;
}

.owl-prev span{
  padding-left: 15px;
}
.owl-next span{
  padding-right: 15px;
}

.owl-item img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.owl-item img:hover{
  cursor: pointer;
}

.gallery-image-holder{
  display: block;
  /* width: 90vw; */
  /* width: calc(100% - 200px);
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 0px 100px;
  grid-gap:10px; */
}

.gallery-image-holder img:hover{
  cursor: pointer;
}

.lightbox-holder{
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  z-index: 100;
  /* pointer-events: none; */
  background-color: rgba(0, 0, 0, 0.7);
}

.lightbox-itself{
  display: grid;
    width: 100%;
    justify-content: center;
    justify-items: center;
}

.lightbox-itself img {
  justify-self: center;
  width: 95%;
  max-width: 95%;
  border: 2px #F3F3F3 solid;
}
.lightbox-itself img:hover {
  cursor: pointer;
}




/* MEDIA QUERIES */

@media(max-width: 2000px) {

  .box {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(5, minmax(300px, 1fr));
  }

}

@media(max-width: 1680px) {

  .box {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(4, minmax(300px, 1fr));
  }
  #inject-more_episodes{
    grid-gap:15px;
  }
}
@media(max-width: 1360px) {


  .box {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
  }

  .genre-links{
font-size: 0.8em;
  }

}

@media(min-width: 1360px) {

  

  .owl-nav{
    box-shadow: inset 15vw 0px 115px -25px rgb(0 0 0 / 50%), inset -15vw 0px 49px -46px rgb(0 0 0 / 50%);
  }
  
  .featured-carousel .owl-nav{
    box-shadow: inset 17vw 0px 115px -25px rgb(0 0 0 / 65%), inset -17vw 0px 49px -46px rgb(0 0 0 / 65%);
  }

  .main-container h1, .gallery-title{
    padding-left: 10%;
  }
  
}

@media(max-width: 1300px) {
  .completed-header {
    grid-template-columns: 2fr 5fr 1fr;
    grid-template-areas: "nt mn sb";
  }
}



@media(max-width: 1100px) {
  .completed-page-wrapper-show-details{
    padding-left: 5%;
    padding-bottom: 2.5%;
  }
  .completed-header {
    grid-template-columns: 2fr 4fr 1fr;
    grid-template-areas: "nt mn sb";
  }

}

@media(max-width: 900px) {
.main-nav{
  display: flex;
  align-items: center;
}

  .genre-links{
    font-size: 0.6em;
      }
    

  .about-show-link, .video-show-link, .gallery-show-link{
    display: none;
  }

  .show-title-link{
    padding-left: 5%;
  }

  .completed-header {
    grid-template-columns: 2fr 3fr 1fr;
    grid-template-areas: "nt mn sb";
  }

  #inject-short_description{
    line-height: 1;
  }

  .completed-page-wrapper-show-details{
    width: 85%;
    transform: scale(0.9);
    padding-left: 0;
    padding-bottom: 1%;
  }

  .box {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }

  .single-episode .episode-holder{
    width: 85%;
  }

}

@media(max-width: 700px) {

  .main-container h1, .gallery-title {
    padding-top: 20px;
  }

  .main-nav{
    display: none;
  }

  .completed-page-wrapper-show-details{
    width: 100%;
  }


  .completed-header {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-areas: 
    "nt nt nt  .  .  . sb . . . "
    "mn mn mn mn mn mn  mn mn mn mn"; */
  }

  .box {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }

  .sub-links ul {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }

  .completed-page-long-desc{
   width: 90%;
   max-width: auto;
  }

  .completed-minisite-burger-menu{
    padding-right: 0;
    justify-content: flex-end;
  }

 .completed-header #burger-menu{
    padding-right: 5%;
    justify-content: flex-end;
  }
   
}

@media(max-width: 500px) {

  .featured-carousel .completed-archive-title{
    font-size: 2em;
  }
  .completed-archive-title{
    opacity: 1;
    font-size: 1.4em;
  }

  

.featured-carousel .short-desc {
  font-size: 1em;
}

  .main-container{
    margin-top: 0;
  }

  .completed-blink-logo{
    font-size: 7.5vw;
    padding-left: 2.5%;
  }

  .completed-page-long-desc-wrapper{
    position: relative;
    padding-top: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .completed-page-wrapper{
    grid-area: moveme;
    background-image: none !important;
    opacity: 1 !important;
    padding-top: 2.5%;
  }

  .featured-section-wrapper{
    grid-template-columns: 1fr;
    grid-template-areas: "thearea"
    "moveme";
  }

  .single-episode .episode-holder{
    width: 100%;
  }

  .single-episode .episode-description, .single-episode .episode-title{
    padding: 0 5%;
  }
  .single-episode .episode-title{
    padding-top:2%;
  }

  .wrapper {
    font-size: 15px;
  }

  .completed-header {
    margin: 0;
    position: static;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "nt sb";
    text-align: center;
  }

  .completed-page-center{
    margin-top: 0;
  }

  .completed-header .main-nav{
    display: none;
  }




  .main-nav {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
  }

  h1 {
    text-align: center;
    font-size: 18px;
  }

  .main-container h1, .gallery-title{
    text-align: left;
  }

 

  .box {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(1, 1fr);
    text-align: center;    
  }

  .box a:hover {
    transition: transform .3s;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);  
    transform: scale(1.2);
  }

  .logos {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
  }

  .sub-links ul {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
    font-size: 15px;
  }
}



@media screen and (max-width: 800px) {
  .showcase::after, .completed-page-wrapper{
    box-shadow: none;
  }
}