0

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

@media (max-width: 1432px) {

    #tvn-content .hub-intro h1  {font-size: 8.1vw;}
    
}

@media (max-width: 1125px) {

    #tvn-content .hub-intro h1  {font-size: 8vw;}
    
    .panel-container h2 {width: auto}

    .panel-container.multiline .panel-container-top-text {margin-top: 0;}
    .panel-container .panel-container-top-text {margin-top: 15px !important;}

}

@media (max-width: 1045px) {

    #tvn-content .hub-intro h1  {font-size: 57px;}
    
    .panel-container h2    {font-size: 30px}
    
    .number img {width: auto; height: 43px;}
    
}

@media (max-width: 900px) {
    
    
    /* Comment back in when more than 2 */
    /* .related-articles .inner    {padding: 0 36px;} */
    
    .related-articles .inner    {padding: 0;}

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

    .hub-intro  {margin-bottom: 17px;}
    
    .panel-container h2   {font-size: 24px}
    .panel-container p    {font-size: 14px}
    .number img           {height: 32px;}
    
    .panel-container-top-text   {gap: 10px;}
    
    .related-articles h3    {padding: 0 20px;}
    
    .slick-arrow    {width: 47px; height: 47px; margin-top: 0}
    .slick-next     {background-size: 12px; right: -10px;}
    .slick-prev     {background-size: 12px; left: -10px;}
    
    .article-image .image   {background-attachment: inherit}
    
    
}


@media (max-width: 767px) {
    
    .main-content   {padding-left: 0; padding-right: 0}
    
    .article-heading        {padding-bottom: 20px;}
    .article-heading h1  {font-size: 42px;}
    .blockquote-container p {font-size: 38px;}
    
    .related-articles h3,
    #tvn-content .cta-container p   {font-size: 38px;}
    
    .related-articles   {padding-bottom: 50px;}
    
    .cta-container  {margin-top: 0; padding-top: 60px; padding-bottom: 60px;}
    
    .home-icon {top: 118px; position: absolute; z-index: 5; width: 40px; height: 40px;}
    
    .video-container {max-height: unset;}
    .article-inner.video-inner {width: calc(100% - 40px);}
}


@media (max-width: 640px) {
    
    #tvn-content .hub-intro h1 { font-size: 48px; width: 315px; max-width: 100%; margin: auto;}
    
    .border-top     {border: none}
    
    .cols.span-2,
    .cols.span-3    {flex-direction: column;}
    
    .cols.span-1 .coll,
    .cols.span-2 .coll,
    .cols.span-3 .coll  {border: none !important; border-top: 2px solid var(--bodyCopy) !important; padding: 0 !important; padding-top: 8px !important; margin-bottom: 8px;}
        
    .cols.span-2 .coll,
    .cols.span-3 .coll  {flex: 0 0 100%;}
    
   .cols.span-1 .panel-container p,
   .cols.span-2 .panel-container p,
   .cols.span-3 .panel-container p {width: 257px; max-width: 100%; font-size: 16px;}
   
   .cols.span-1 .panel-container h2,
   .cols.span-2 .panel-container h2,
   .cols.span-3 .panel-container h2 {width: 257px; max-width: 100%;}
    
    .panel-image-container,
    .cols.span-1 .panel-image-container,
    .cols.span-3 .panel-image-container     {padding-top: 57%}
    
    .panel-container .panel-container-top-text  {margin-top: 10px !important;}
    .panel-container-top                        {margin-bottom: 10px;}
    
    .listing-inner .cols    {margin: 0; width: 100%;}
    
}

@media (max-width: 625px) {
    
    .related-articles h3    {margin-bottom: 1em}
    .slick-arrow    {top: 32vw; margin-top: 22px;}

}

@media (max-width: 500px) {
    
    .related-articles h3, #tvn-content .cta-container p     {font-size: 30px;}
    
    .article-hero-container {height: calc(100vh - 165px);}
    
    .article-heading h1 {font-size: 38px;}
    
}