/* MEDIA fixes */


/* Phone: 2 stories per row */
@media (max-width: 767px) { 

   img.alignleft {
      float: none;
      display: block;
   } 
   
      
   .container-fluid {
      padding-left:0;
      padding-right:0;
   }
   
    .header-banner {
        position: relative;
        overflow: hidden;
        height: 230px;
         top: var(--navbar-height);
    }
    
    .header-banner img {
        height: 230px;
        max-width: none;
        position: absolute;
        top: -9999px;
        bottom: -9999px;
        margin: auto;
        display: block;
    }
    
    .entry-thumbnail, .entry-thumbnail img {
       width: 100%;
    }
    
/* 
    * Clear space for a new row every second story.
    Note:
    The +2 is explained by:
      +1 for a hidden h1 
      +1 because the clear applies to the one AFTER the last in the row
      
 */
   article:nth-child(2n+2) .entry-wrapper {
      clear: both;
   }
    

    .header-banner img {
      border-top: 0;
   }
   
   .wp-block-image figure {
      float: none !important;
   }

   html {
      --main-side-gutter: 15px;
   }
   
   h1 {
      margin-top: 1.4em;
   }
    
}



/* Phone less than 640px  - special cases for top banner*/



@media  (max-width:440px) { 
    
    .header-banner {
        position: relative;
        overflow: hidden;
        height: 115px;
         top: var(--navbar-height);
    }
    
    .header-banner img {
        height: 115px;
        max-width: none;
        position: absolute;
        top: -9999px;
        bottom: -9999px;
        margin: auto;
        display: block;
    }
    

   .header-banner img {
      border-top: 0;
   }
    
}

@media (min-width:510px) and (max-width: 640px) { 
    
    .header-banner {
        position: relative;
        overflow: hidden;
        height: 195px;
        
   top: var(--navbar-height);
    }
    
    .header-banner img {
        height: 195px;
        max-width: none;
        position: absolute;
        top: -9999px;
        bottom: -9999px;
        margin: auto;
        display: block;
    }
     

    .header-banner img {
      border-top: 0;
   }
    
}


@media (min-width: 440px) and  (max-width:510px) { 
    
    .header-banner {
        position: relative;
        overflow: hidden;
        height: 165px;
        
   top: var(--navbar-height);
    }
    
    .header-banner img {
        height: 165px;
        max-width: none;
        position: absolute;
        top: -9999px;
        bottom: -9999px;
        margin: auto;
        display: block;
    }
    
/*    #navcontainer {display: none;} */
   .header-banner img {
      border-top: 0;
   }
    
}



@media only screen and (max-width: 500px) {
   html {
      --main-side-gutter: 15px;
   }
}

/* Tablet - 3 stories per row on front page 
*/
@media (min-width: 768px) and (max-width: 991px)  {

    
    .header-banner {
        position: relative;
        overflow: hidden;
        height: 365px;
         top: 0px;
    }
    
    .header-banner img {
        height: 365px;
        max-width: none;
        position: absolute;
        margin: auto;
        display: block;
      
    }
    
    
   /* 
    * Clear space for a new row every 3 stories.
    Note:
    The +2 is explained by:
      +1 for a hidden h1 
      +1 because the clear applies to the one AFTER the last in the row
      
 */
   article:nth-child(3n+2) .entry-wrapper {
      clear: both;
   }
    
    
}

/* Undos for bad Trope parent-theme responsive styles */

@media (max-width: 768px) {
         .entry-thumbnail, .entry-thumbnail img {
         width: 100%;
         max-width: 320px;
         margin: 0;
      }
}

@media (max-width: 850px) {
   .entry-title {
      margin-left: 0px;
      margin-top: 1em;
   }
}


/* Medium desktop - 4 stories per row on front page 
 */
@media (min-width: 992px) and (max-width: 1399px) {
   .header-banner {
        position: relative;
        overflow: hidden;
        height: 420px;
        
   top: 0;
    }
    
    .header-banner img {
        height: 420px;
        max-width: none;
        position: absolute;
        margin: auto;
        display: block;
      
    }
    
/* 
    * Clear space for a new row every 4 stories.
    Note:
    The +2 is explained by:
      +1 for a hidden h1 
      +1 because the clear applies to the one AFTER the last in the row
      
 */
   article:nth-child(4n+2) .entry-wrapper {
      clear: both;
   }
    
}




/* Large desktop */
@media (min-width: 1400px) {
  /* 
    * Clear space for a new row every 4 stories.
    Note:
    The +2 is explained by:
      +1 for a hidden h1 
      +1 because the clear applies to the one AFTER the last in the row
      
 */
   article:nth-child(4n+2) .entry-wrapper {
      clear: both;
   }
   
   body {
      font-size: 21px !important;
   }
}






/* Large desktop special banner case */

@media (min-width:1200px) and (max-width: 1300px) {
   .header-banner {
        position: relative;
        overflow: hidden;
        height: 460px;
    }
    
    .header-banner img {
        height: 460px;
        max-width: none;
        position: absolute;
        margin: auto;
        display: block;
      
    }
}

/* Oversized desktop : 6 stories per row

   We invent a new xxl-size. This isn't a full implementation. 
   It's just the styles needed to make it work.
   


*/
@media (min-width: 1430px) {
   .col-xxl-2 {
        -ms-flex: 0 0 16.666667%;
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
   }
   
     /* 
    * Clear space for a new row every 4 stories.
    Note:
    The +2 is explained by:
      +1 for a hidden h1 
      +1 because the clear applies to the one AFTER the last in the row
      
 */
   article:nth-child(4n+2) .entry-wrapper {
      clear: none; /* need to undo xl-size setting before rule underneath  */
   }
   article:nth-child(6n+2) .entry-wrapper {
      clear: both;
   }
   .container-fluid {
      max-width: 2085px; /* Even humungous screens need some limits!*/
   }
}