/* menu */
.header.small .wrapper{
  background: white;
}
/* type */
h1.meta{
  margin: 0;
}
.bold{
  font-weight: bold;
}
.tagged.show .tagged-shows{
  display: none;
}
.tagged.work .tagged-works{
  display: none;
}
.header, .header a{
  color: white;
}
.header.small, .header.small a{
  color: black;
}
.menu-down a{
  color: black;
}
.header nav .toggle-menu.black{
  display: none;
}
.header nav .toggle-menu.white{
  display: block;
}
.header.small nav .toggle-menu.black{
  display: block;
}
.header.small nav .toggle-menu.white{
  display: none;
}
.meta.subtype{
  margin-bottom: 1em;
}
#body figcaption{
  padding: .5em 1em;
}
#body .tagged, #body .related{
  padding: 0 1em;
}
#body .tagged figcaption, #body .related figcaption{
  padding: .5em 0;
}
#box .tagged figcaption, #box .related figcaption{
  padding: .5em 0;
}
.tagged a, .related a{
  color: black;
}
ul{
  padding: 0;
  margin: 0;
  list-style: none;
}

/* content */
#body{
  padding-bottom: 3em;
}
.tagged ul, .related ul{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.tagged li, .related li{
  max-width: calc(50% - 1em);
  margin-right: 1em;
}
.video-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.video-container iframe{
  position: absolute;
  /* z-index: -1; */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.video-caption{
  padding: .5em 1.25em;
  background: white;
}
figure{
  width: 100%;
  margin: 0;
  display: block;
}
figure img{
  display: block;
  width: 100%;
}
.related img, .tagged img{
  width: 100%;
}


/* mobile box situation */
.small .related, .small .tagged{
  display: none;
}
.big-small{
  position: absolute;
  z-index: 1;
  line-height: 0;
  padding: 0;
  width: 1em;
  height: 1em;
  border-radius: 0;
  border: .5px solid black;
  background: white;
}
.big-small:disabled,
.big-small[disabled]{
  border-color: lightgrey;
  color: lightgrey;
}
#body .big-small{
  display: none;
}
#box{
  display: block;
  position: fixed;
  bottom: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  padding-top: 4em;
  background: white;
  border-radius: 0;
  border: none;
  overflow: auto;
}
#box .wrapper{
  margin: 0 1em;
}
.big-small{
  display: block;
  top: 4em;
  right: 1em;
}
#box .big-small.bigger{
  display: none;
}
#box.small{
  bottom: -1px;
  height: 3em;
  width: calc(100% - 2.5em);
  margin: 0 1.25em;
  padding: 0;
  border-radius: 5px 5px 0 0;
  border: .5px solid black;
  overflow: hidden;
}
/* some extra phone rules */
@media only screen and (max-width: 850px) {
  #box.small .wrapper *{
    display: none;
  }
  #box.small .wrapper ul, #box.small .wrapper .title{
    display: block;
  }
  .noscroll{
    overflow: hidden!important;
    position: fixed;
    top: 0;
    width: 100%;
    height: calc(100% - 2px);
    pointer-events: none;
  }
  #box{
    /* opacity: .5!important; */
  }
}
#box.small .wrapper ul{
  margin-top: .875em;
}
#box.small .big-small{
  top: 1em;
}
#box.small .big-small.smaller{
  display: none;
}
#box.small .big-small.bigger{
  display: block;
}
/* little bug fix with the scrolling */
#body.small{
  max-height: 100vh;
  overflow: hidden;
}
/* desktop */
@media only screen and (min-width: 850px) {
  /* menu */
  nav .works-shows{
    display: block;
  }
  .big-small.smaller, .big-small.bigger{
    top: .6em!important;
    right: .5em;
  }
  .big-small.smaller{
    right: 1.75em;
  }
  .header.small .wrapper{
    background: none;
  }
  /* type */
  figcaption{
    padding: .5em 1.25em;
    background: white;
  }
  /* box styling and transition */
  #box{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    width: 100%;
    max-width: 40em;
    margin: 3.75em 0;
    z-index: -1;
    overflow: unset;
    padding: 0;
  }
  #box .wrapper{
    margin: 0 1.25em;
    padding-bottom: 1.25em;
  }
  #box .big-small{
    display: none;
  }
  #box.small{
    display: block;
    position: fixed;
    margin: 0;
    top: unset;
    left: 1.25em;
    top: calc(100vh - 198px - 1.25em);
    width: 352px;
    height: 198px;
    border-radius: 5px;
    overflow-y: hidden;
    z-index: 1000;
  }
  #box.small .wrapper{
    margin: 0;
    padding: 0 .5em;
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  #box.small .wrapper ul{
    margin-top: .5em;
  }
  #box.small .metaul{
    margin-bottom: 1.25em;
  }
  /* #box.small .wrapper *{
    display: unset;
  } */
  #box.small .big-small.smaller, #box.small .big-small.bigger{
    display: block;
  }
  #box.small .wrapper{
    position: unset;
    overflow: auto;
  }
  #box.tiny{
    height: 2.5em;
    top: calc(100vh - 2.5em - 1.25em);
  }
  #box.tiny .big-small.smaller, #box.tiny .big-small.bigger{
    top: .7em!important;
    right: .5em;
  }
  #box.tiny .big-small.smaller{
    right: 1.75em;
  }
  #box.tiny .wrapper{
    overflow: hidden;
  }
  #box.tiny .wrapper *{
    display: none;
  }
  #box.tiny .wrapper ul, #box.tiny .wrapper .title{
    display: block;
    margin-top: .55em;
  }

  #body{
    width: 100%;
    margin: 0;
    padding-bottom: calc(198px + 2em);
  }
  #body figcaption{
    padding: .5em 1.25em;
  }
  #body .related, #body .tagged{
    padding: 0 1.25em;
  }
  #body .related img, #body .tagged img{
    width: 300px;
  }
  #body .big-small{
    display: none;
  }
  #body.small{
    position: fixed;
    width: 352px;
    height: 198px;
    right: 1.25em;
    bottom: 1.25em;
    z-index: 1000;
    overflow: hidden;
    border: .5px solid black;
    border-radius: 5px;
    padding: 0;
    max-height: none;
  }
  #body.small .big-small{
    display: block;
  }
  #body.small .wrapper{
    overflow: auto;
    width: 100%;
    height: 100%;
  }
}

/* for bigger screens */
@media only screen and (min-width: 1050px) {
  #body.small{
    width: 496px;
    height: 279px;
  }
}
/* for actually large screens */
@media only screen and (min-width: 1200px) {
  #body.small{
    width: 704px;
    height: 396px;
  }
}