/* ************************* - - - - * REUSABLE CONTAINERS * - - - - ************************* */
.mid-width-container {
   max-width: 965px;
   margin:0 auto; }

.mid-width-container-02 {
   max-width: 1045px;
   margin: 0 auto; }

.mid-width-container-03 {
   max-width: 1090px;
   margin: 0 auto; }

         .max-width-container {
            margin: 0 auto;   /* max-width: 1200px; or try 1240px; */
         }

         .max-width-container-02 {
            margin: 0 auto;
            max-width: 1335px;
            height: 63.7vh;    /* NEW ADD 6/15/23 */
            margin-top: 40px;    /* NEW ADD 7/2/23 [ margin-top: 40px; genesis ] */
         }

.wide-max-width-container {
   max-width: 1390px;
   margin: 0 auto; }

.wide-max-width-container-02 {
   min-width: 1400px;
   margin: 0 auto; }

      /* "ROW" Remove extra left and right margins, due to padding in columns | NEW ADD [ "ROW" ]4/27/23 7:07pm */
      .row {
         margin: 0 -5px 30px -5px;;
      }

      /* Clear floats after the columns ** PLEASE try: ** display: block; ** ] */
      .row:after {
         content: "";
         display: table;
         clear: both;
      }

   /* REVERT ASAP max-width: 1400px; | wide-max-width-container, col-30 is used for listings 3 column layout */
   .col-30 {
      float: left;        /* This causes the sidebar to move to the left */
      width: 31%;         /* width: 30%; [ 50% ] optional || adjusting: may cause "post body to narrow & align to the left" | edit width: 30%; */
      margin: 0 1%;
   }
   /* height: 70vh;       height: 50vh; for narrow "post body"| height: 80vh; for wide or .wide-max-width-container optional || revert ASAP */
   /* max-width-container, col-29 is used for post_detail 3 column layout goto ln. 275 */

   .col-29 {
      float: left;        /* This causes the sidebar to move to the left */
      width: 28.8%;         /* width: 30%; [ 50% ] [ 29% ] optional || caution: adjusting may cause "post body to narrow & align to the left " [ 29% ] */
      margin: 2% 3.2% 4% 0;    /* edit: 9/9/23 margin: 2% 3.2% 0 0; || margin: 0; || margin: 0 1%; || " IN EDITOR: WAS style="height:182px; width:385px" /></p> * * * */
   }

         .col-29 h4 {
            font-weight: 400;
            font-size: 1.3rem;
            margin-bottom: 10px;
            color: #cd9a81;
         }
            /* color: #cd9a81; / float: left; / width: 28.8%; / margin: 2% 3.2% 0 0; */

         .col-29 p {
            color: #202020;
         }
         /* font-size: .8rem; or .85rem | 202020 [ edit 6/18/23 ] */


   article > .aside-right-2 img {
      width: 80%;
      height: 100%; 
   }

   /* Float three columns side by side ref. how to_css_column_cards "w3schools"  | NEW ADD [ "ROW" ]4/27/23 7:07pm */
   .column-30 {
      float: left;
      width: 31%;
      padding: 0 10px;
   }

/* Float three columns side by side ref. how to_css_column_cards "w3schools"  | NEW ADD [ "ROW" ]4/28/23 5:02pm */
   .column-50 {
      float: left;
      width: 45%;
      padding: 0 10px;
   }   

   .side-nav {
      font-size: .9rem;
      font-family: var(--nav-font);
   }

   .side-nav p {
      font: black;
      font-family: var(--nav-font);
      font-weight: 450;
   }

   .ml-1 {
      margin: 1.5rem 2rem 2rem 1rem;
      font-size: 1.1rem;
      line-height: 1.4;
   }

   .button {
      background-color: #4CAF50; /* Green */
      border: none;
      color: white;
      padding: 6px 9px 6px 9px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 11px;
      cursor: pointer;
      margin-top: 4px;
   }

   .button2 {background-color: #008CBA;} /* Blue */
   .button3 {background-color: #f44336;} /* Red */ 
   .button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
   .button5 {background-color: #555555;} /* Black */

            .post {
               max-width: 95vw;
               width: 57%;      /* width: 100%; previously 2/23/2023 ** || max-width: 95vw; || previously 5/27/23 width: 98%; or width: 60%; */
               margin: 90px auto 70px;     /* latest: margin: 90px auto 70px; / margin: 0 auto; or 20px auto; || previously 5/27/2023 margin: 0 1%; */
               line-height: 1.5;
            }

   .post-1 {
      padding: 2% 0 0 11.2%;
      max-width: 50vw;        /* max-width: 75vw; || 55% or 50% */
      width: 100%;
      margin: 0 auto;
      line-height: 2; 
   }

            .post-01 {
               max-width: 95vw;
               width: 57%;
               margin: 60px auto 70px;     /* latest: margin: 98px auto 70px; || genesis pg.#2, previously 7/03/23 .post-01 margin: 60px auto 70px; :: post { 90px auto 70px; */
               line-height: 1.5;
            }


   #misc-page {
      display: block;
      margin: 0 auto; }

   .page-margins {
      margin: 50px 130px;
   }            

   .page-margins {
      padding-left:17.5px;
      padding-right:17.5px
   }

@media (min-width: 992px) {
   .page-margins {
      padding-left:35px;
      padding-right:35px
   }
}

@media (min-width: 1200px) {
   .page-margins {
      padding-left:70px;
      padding-right:70px
   }
}

            .task-2-2 {
               width: 83%;
               margin: auto;
               gap: 12px;
               height: 100vh; }
               
            .item {
               background-color: #f3f5f7;
               border: 4px solid tomato;
               border-radius: 5px;
               box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); }

/* or .greater-max-width-container { max-width: 1460px; see hero.css          */

/* Utility Classes  || NEW CODE, Just Enabled this { 4 properties } & WORKS FINE! 1/29-1/30/20 */
   .height-50 {
      height: 50vh; }

   .height-60 {
      height: 60vh; }

   .height-75 {
      height: 75vh; 
   }

   .industry-flag {
      background-color: #1d448f;
      text-transform: uppercase;
      color: #fff;
      font-weight: 600;
      display: inline-block;
      padding: 6px 25px 2px 25px;
      margin-top: 30px;
   }

      .collapsible {
         background-color: white;
         color: black;
         cursor: pointer;
         margin-left: 10px;
         padding: 10px 0;
         width: 100px;
         border: none;
         text-align: left;
         outline: none;
         font-size: 14.5px;
      }

      .collapsible:hover {
         background-color: #f1f1f1;
      }
      /* .active, .collapsible:hover { */

   .content > p {
      line-height: 1.6;
   }

   .content > h4 {
      margin: 30px 0 0 0;
      line-height: 1.65; 
      color: black; 
      font-weight: 350;
      font-size: .96em;
      font-family: "Gotham Narrow", sans-serif;
   }