/* Build this by running
 * npx tailwindcss-cli build coc-style.tailwind.css -o coc-style.css
 */
#coc-page .coc-header {
  @apply relative w-full;

}

#coc-page .coc-header-image {
  @apply flex relative w-full;

}

#coc-page .coc-header-image img {
  @apply w-full h-full;
}

#coc-page .coc-header-content {
  @apply absolute left-1/2 flex justify-center items-center w-10/12 top-0;
  transform: translateX(-50%);
  @apply md:w-4/6;
  @apply xl:w-3/5 md:top-10;
}

#coc-page .coc-header-content img{
  @apply w-full p-2;
}
#coc-page .coc-episode{
    background-color: #eaeaea;
}

#coc-page .coc-container {
  @apply my-8 mx-auto container text-center;
  @apply md:mt-12;
  @apply lg:mt-20;
  @apply xl:mt-24;
}
#coc-page .coc-h1-container{
  @apply absolute -bottom-4;
}
#coc-page h1 {
  font-family: escrow-banner,serif;
  @apply max-w-xl mx-auto font-normal text-4xl px-2 text-center uppercase -mb-8 z-10 relative;
  @apply 2xl:text-4xl;
}
#coc-page .coc-all-video-heading h1{
  @apply text-5xl;
}
#coc-page .coc-container h2 {
  color: #8B8B8B;
  @apply text-lg mb-6 font-normal normal-case px-4;
  @apply md:text-3xl;
}

#coc-page .coc-container p {
  @apply text-black text-base;
}

#coc-page .coc-container hr {
  @apply my-8;
}

#coc-page .coc-episode-box {
  background-color: #EAEAEA;
  @apply px-4 pt-4 pb-12;
}

#coc-page .coc-episode-box-content {
  border: 1px solid #000;
  @apply relative flex flex-col items-center px-4 pt-8 pb-16;
}

#coc-page .coc-episode-box-content h2 {
  font-family: escrow-banner,serif;
  @apply italic font-normal text-xl mb-4 mt-0 uppercase;
  @apply md:text-3xl;
}

#coc-page .coc-video-placeholder {
  @apply w-full max-w-screen-lg relative;
}

#coc-page .coc-video-holder, #coc-page .coc-video {
  @apply relative w-full flex;
  padding-bottom: 56.25%;
}

#coc-page .coc-video-holder img {
  @apply absolute inset-0 w-full h-full object-cover;
}

#coc-page .coc-video iframe {
  @apply absolute inset-0 w-full h-full;
}

#coc-page .coc-video-play {
  background-color: #fff;
  @apply absolute inset-0 w-full h-full opacity-70 flex justify-center items-center;
}

#coc-page .coc-video-play svg {
  @apply w-16 h-16;
}

#coc-page .coc-video-play:hover {
  @apply opacity-80;
}

#coc-page .coc-video-hover {
  background-color: #fff;
  @apply relative bottom-0 w-full left-0 right-0 px-6 py-3;
  @apply md:absolute md:opacity-90;
}

#coc-page .coc-video-hover h3 {
  @apply text-lg mb-1 normal-case text-black font-semibold pb-0;
}

#coc-page .coc-video-hover p {
  @apply text-black text-base;
}

#coc-page .coc-all-button {
  @apply absolute bottom-0 left-1/2 px-6;
  transform: translate3d(-50%, 50%, 0);
  background-color: #eaeaea;
}

#coc-page .coc-all-button a {
  border: 1px solid #000;
  @apply block text-black uppercase text-base px-4 py-2 whitespace-nowrap;
}

#coc-page .coc-all-button a:hover {
  background-color: #ccc;
}

#coc-page .coc-socials-container{
  @apply max-w-sm py-6 text-black mx-auto bg-gray-300 w-full  relative z-10 mb-16;
  @apply md:-mt-32;
  @apply 2xl:-mt-40;
  @apply xl:mb-0;
}
#coc-page .coc-socials-title{
  font-family: escrow-banner,serif;
  @apply text-2xl;
}

#coc-page h2.coc-all-episodes {
  font-family: escrow-banner,serif;
  @apply italic font-normal text-xl mb-8 uppercase flex items-center text-black;
  @apply md:text-2xl;
}

#coc-page .coc-all-episodes::before, #coc-page .coc-all-episodes::after {
  border-bottom: 1px solid #000;
  flex: 1;
  content: '';
  display: block;
  margin: 1px 30px;
}

#coc-page .coc-episodes {
  display: -ms-grid;
  display: grid;
  @apply gap-3;
}

@screen md {
  #coc-page .coc-episodes {
    -ms-grid-columns: 1fr 0.75rem 1fr 0.75rem 1fr;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #coc-page .coc-episode .coc-video-hover {
    background-color: #EAEAEA;
    @apply relative opacity-100;
  }

  #coc-page .coc-episode .coc-video-play {
    @apply opacity-0;
  }

  #coc-page .coc-episode .coc-video-play:hover,
  #coc-page .coc-episode .coc-video-play:focus {
    @apply opacity-80;
  }
}
@screen xl{
  #coc-page h1{
    @apply xl:text-3xl px-8 mb-0 pb-0;
  }
}



#coc-page .coc-hidden {
  @apply hidden;
}
#coc-page .coc-mobile{
  @apply xl:hidden;
}
#coc-page .coc-desktop{
  @apply hidden;
  @apply xl:block;
}
#coc-page .coc-video-player {
  background-color: #EAEAEA;
  @apply p-4 w-full;
}