.column-coming-soon.mb  {display: none}

/* FOR SHALLOW SCREENS */
@media screen and (min-width: 768px) and (max-height: 800px) {

    .podcast-hero   { }
    
}

@media (max-width: 1200px) {
    
    
}

@media (max-width: 1100px) {
    
    /* LATEST / COMING SOON */
    #tvn-content h2 {font-size: 38px}
    .le-left        {width: 200px;}
    .cs-tile.tile .podcast-tile-image   {width: 100px;}
    .column-coming-soon                 {flex: 0 0 300px;}
}



@media (max-width: 1000px) {

    
}

@media (max-width: 960px) {

    /* HOME HERO */
    .hero-top           {justify-content: flex-start; padding: 20px 0 0 0;}
    .hero-container h1  {font-size: 14vw; margin-bottom: 0.1em}
    
    /* LATEST / COMING SOON */
    .latest-episode-section .cols   {flex-direction: column;}
    .column-latest-ep               {padding-right: 0}

    .le-cols    {gap: 30px;}
    
    .ccs-cols   {display: flex; gap: 60px;}
    .cs-tile    {width: calc(50% - 30px);}
    
    .column-coming-soon.dk          {display: none}
    .column-coming-soon             {flex: auto; width: 100%; padding: 35px 0 25px 0px; background-color: #5b5b5b;}
    .column-coming-soon:after       {display: none}

    .column-coming-soon.mb      {display: block; width: 100%; padding: 30px;}
    .column-coming-soon h2      {margin-bottom: 0.75em !important}
    
    .podcast-listing-section    {padding: 50px 0;}
    
    /* FILTERS */
    .filters                {justify-content: space-between}
    .filters ul             {font-size: 15px;}
    .filters ul li:after    {margin: 0 2px}
    
    /* PODCAST HERO */
    .podcast-hero-collage   {display: none}
    
    
}

@media (max-width: 840px) {
    
    /* HOME HERO */
    .hero-container         {}
    
    .hero-top               {flex: 0 0 auto;}
    ul.podcast-platforms    {gap: 30px}
    
    /* HOME HERO COLLAGE */
    .headphones {margin-top: -10vw; width: 45vw; margin-left: -24vw;}
    .phone      {margin-top: -12vw; width: 13vw; margin-left: -38vw;}
    .frame      {margin-top: -30vw; width: 26vw; margin-left: 3vw;}
    .robot      {margin-top: -30vw; width: 36vw; margin-left: -32vw;}
    .airpods    {margin-top: -33vw; width: 9vw; margin-left: -8vw;}
    .joggers    {margin-top: -33vw; width: 13vw; margin-left: -45vw;}
    .coin       {margin-top: -7vw; width: 7vw; margin-left: -23vw;}
    .mic        {margin-top: -9vw; width: 8vw; margin-left: -48vw;}    
    .tree       {margin-top: 7vw; width: 21vw; margin-left: -46vw;}    
    .cogs       {margin-top: -1vw; width: 7vw; margin-left: -47vw;}  
    .harvester  {margin-top: -16vw; width: 21vw; margin-left: 22vw;}    
    .ipad       {margin-top: 5vw; width: 31vw; margin-left: 21vw;}
    .butterfly  {margin-top: -17vw; width: 8vw; margin-left: 35vw;}
    .drone      {margin-top: -30vw; width: 13vw; margin-left: 31vw;}
    .lightbulb  {margin-top: 25vw; width: 6vw; margin-left: -29vw;}
    
    .stethascope    {display: none}
    
    /* PODCAST LISTING */
    .podcast-listing .col {flex: 0 0 calc(50% - 30px);}
    
    
}

@media (max-width: 767px) {

    /* HOME HERO */
    .hero-container     {height: auto; min-height: unset;}
    .collage-container  {flex: 0 0 auto;}
    .hero-top           {flex: 1}
    .collage-container  {height: 80vw;}
    
    /* PODCAST HERO */
    .podcast-hero h1        {font-size: 45px; max-width: 550px; width: 100%; margin-left: auto; margin-right: auto}
    .podcast-hero-details   {padding-left: 40px; padding-right: 40px;}
    
    
}

@media (max-width: 700px) {
    
    /* PODCAST FILTERS */
    .filters    {gap:12px; flex-direction: column; align-items: center; justify-content: center}
    .filters ul li:first-child  {margin-right: 5px;}
    
    /* COMING SOON */
    .ccs-cols   {gap: 30px;}
    .cs-tile    {width: calc(50% - 10px);}
    
    /* SOCIAL */
    .social-container       {flex-direction: column; align-items: flex-start}
    .social-container ul    {flex-wrap: wrap}
    
}


@media (max-width: 640px) {
 
    /* LATEST / COMING SOON */
    .le-left    {width: 33%;}
    
    /* COMING SOON */
    .ccs-cols   {gap: 30px; flex-direction: column}
    .cs-tile    {width: 100%; margin-bottom: 0}
    
    /* PODCAST DETAIL */
    .podcast-hero-text-bar                  {padding-bottom: 27px}
    .podcast-hero-text-bar .inner-narrow    {flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 5px;}
    
    .podcast-hero   {height: auto; min-height: unset}
    
    
}

@media (max-width: 500px) {
    
    .inner  {padding: 0 20px;}
    
    .column-coming-soon.mb  {padding-left: 20px; padding-right: 20px;}
    
    #tvn-content h2 {font-size: 35px;}
    
    #tvn-content p,
    .podcast-hero-text-bar p    {font-size: 18px;}
    
    /* HOME HERO */
    .soundwave {transform: scale(0.5); opacity: 0.8}
    ul.podcast-platforms        {gap: 20px;}
    ul.podcast-platforms li p   {font-size: 12px !important; margin-top: 0}
    .collage-container  {transform: scale(0.9)}
    
    /* LATEST / COMING SOON */
    .le-cols            {flex-direction: column;}
    .le-left            {width: 100%; max-width: 250px;}
    .column-latest-ep   {padding-top: 40px; padding-bottom: 40px;}
    .podcast-listing-section    {padding-top: 40px; padding-bottom: 40px;}
    
    /* PODCAST LISTING */
    .podcast-listing .cols          {gap: 30px;}
    .podcast-listing .col           {flex: 0 0 calc(50% - 15px);}
    .podcast-listing .tile-text h3  {font-size: 20px;}
    
    /* PODCATS DETAIL */
    .podcast-hero h1            {font-size: 40px;}
    .podcast-hero-details       {padding-left: 20px; padding-right: 20px;}
    .podcast-description        {padding-bottom: 30px;}
    
    .featured-in h3,
    #tvn-content h2,
    #tvn-content .intro-copy,
    #tvn-content .intro-copy p,
    #tvn-content .related-articles h2,
    #tvn-content .podcast-hero-text-bar h2 {font-size: 28px; font-weight: 500}
    
    
    .featured-in .person-col    {flex: 0 0 100%}
    .podcast-hero-details       {padding-top: 60px; padding-bottom: 60px;}
    
    #tvn-content .podcast-listing .tile-text p.date {font-size: 10px;}
    #tvn-content .podcast-listing .tile-text p   {font-size: 16px;}
    
    .home-icon  {font-size: 10px; width: 42px; height: 40px;}
    
}

@media (max-width: 480px) {

    .filters    {align-items: flex-start}
    .filters ul {font-size: 13px; align-items: center}
    .filters ul li:first-child  {font-size: 10px;}
    
}

@media (max-width: 414px) {
    
}

@media (max-width: 380px) {

        .filters ul li:first-child  {display: none}
    
}