@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
@import url("https://fonts.googleapis.com/css?family=Lora");
@import url('http://fonts.cdnfonts.com/css/gotham');
@import url('https://fonts.cdnfonts.com/css/myriad-pro');
/* new wed 5/3/23: 1. monserate reuglar 400 2.  | https://fonts.google.com/specimen/Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

:root {
/* new font 5/3/23 */
   --primaryFont: 'Montserrat', sans-serif;
   --mainFont: 'Lato', sans-serif;
   --secondaryFont: 'myriad-pro', sans-serif;
   --serifFont: Georgia, serif;
   --primary: rgb(255, 90, 95);
   --dark: #484848;
   --light: #cac0c0; }

   /* --navbar: #707175; */
   /* [ --secondaryFont: 'Gotham', sans-serif; ] ** tried to edit to [ myriad-pro ] NO SUCCESS // TRY AGAIN w/CDN 2/25/2023 ** */
   /* new primary #6cb33f || 3/25/23 my birthday || heading titles Genesis: #cd9a81 */

/*------------------------------------------------------------------------------ ref. v.5 6-26 */
/* ***************************** - - - - * BASIC SETUP * - - - - ***************************** */
/* *:before, *:after { || box-sizing: inherit; } || --navbar: #707175 */
* {
   margin: 0; padding: 0; }
* {
   box-sizing: border-box; }

         html, body {
            background-color: fff;
            color: #202020;                        /* color: #555; */
            font-family: var(--secondaryFont);
            font-weight: 500;
            text-rendering: optimizeLegibility;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
            font-size: 13.5px;     /* font-size: 13.5px; / [ NEW ADD for genesis" ] 6/18/23 revert font-weight: 300;*/
         }

   mark { 
      content: "";
      background-color: rgba(0,193,222,.2);
      border-radius: 2px; }

   span.ingredient {
      color: #f00; }

   input {
      border-style: solid;
      border-width: 1px;
   }

      /* .main-content-2 p :first-of-type {     PLEASE try ASAP copying some attributes to [ INPUT > above *** this code belongs @ln.509 ] */
         /* font-size: 10.8px;
         color: #4CAF50;
         background-color: white;
         padding: 6.5px;
         border-color: #4CAF50;
         word-spacing: normal;
      } */

/* Bootstrap tags or Similar */
/* ************************* - - - - * UTILITY ELEMENTS, TAGS * - - - - ********************* */
      .m-1 {
         margin: .25rem 0; !important; }

      .m-2 {
         margin: .5rem 0; !important; }


      .mt-0 {
         margin-top: 0; !important; }

      .mt-1 {
         margin-top: .25rem; !important; }

      .mt-2 {
            margin-top: .5rem; !important; }

      .mt-3 {
         margin-top: 1rem; !important; }

      .mt-5 {
         margin-top: 5rem; !important; }
/*                                                [ PADDING-TOP ] | Bootstrap tags or Similar */
      .pt-1 {
         padding-top: .25rem; !important; }

      .pt-2 {
         padding-top: .5rem; !important; }
   
      .pt-3 {
         padding-top: 1rem; !important; }


      .mb-1 {
         margin-bottom: .25rem; !important; }

      .mb-2 {
         margin-bottom: .5rem; !important; }

      .mb-3 {
         margin-bottom: 1rem; !important; }

      .mb-4 {
         margin-bottom: 1.5rem; !important;}

      .lh-12 {
         line-height: 1.2; }

      .lh-13 {
         line-height: 1.3; }

      .lh-14 {
         line-height: 1.4; }

      .lh-15 {
         line-height: 1.5; }
                  
      .lh-16 {
         line-height: 1.6; }
      .lh-2 {
         line-height: 2; }

/* PLEASE UNDO ACTIONS "today" FOR TUESDAY ASAP      */
/* Optional img attriubutes for a 2 column layout */
/*                                                                       prev. color: #004876; */
/* ************************* - - - - * REUSABLE ELEMENTS, TAGS * - - - - ********************* */
a {
   color: #555;
   cursor: pointer;
   transition: all .4s ease;
   text-decoration: none; }

   a:link {
      color: green;
      background-color: transparent;
      text-decoration: none;
    }
    a:visited {
      color: salmon;
      background-color: transparent;
      text-decoration: none;
    }
    a:hover {
      color: #36454f;
      background-color: transparent;
      text-decoration: underline;
    }
    /* color: red; | previously 2/7/23 cityHarvest */
    a:active {
      color: yellow;
      background-color: transparent;
      text-decoration: underline;
    }

   article > a {
      font-size: 1.375rem; 
      color: #6cb33f;
      font-weight: 300;
      line-height: 1.3; 
      margin-bottom: 1.1rem;       
      cursor: pointer;
      transition: all .4s ease;
      text-decoration: none; }

img {
   width: 100%; }

         img {
            display: block; }
            /* max-width: 1200px; } max-width: 1200 or 975px; */

   caption {
      text-align: right;
   }

   .main-nav form {
      font-size: 13px;
      color: black;
      padding: 8px 14px;
      display: block;
      text-align: left;
   }

   article > .main-content p {
      color: #000000;
      font-family: var(--secondaryFont);
      /* margin-bottom: 1.2rem; */
      line-height: 1.6; 
      font-size: 18px;
      text-align: center;
   }

   article > .main-content-0 p {
      color: #000000;
      font-family: var(--secondaryFont); /* [ genesisHouse pgs. use var(--serifFont); */
      margin: 40px 2% 1.2rem;      /* was --> margin-bottom: 1.2rem ::: | edited: margin: 40px 2% 1.2rem / for genesis pg.#2 7/3/23 */
      line-height: 1.6; 
      font-size: 18px;           /* was --> font-size: 18px; or 15.5px; ::: | edited: font-size: 15px / for genesis pg.#2 7/3/23 */
      letter-spacing: -.3px;
      word-spacing: normal;
   }

   article > .main-content-01 p {
      color: #000000;
      font-family: var(--secondaryFont);
      margin-bottom: 1.2rem;
      line-height: 1.6; 
      font-size: 1.05rem;
      letter-spacing: -.3px;
      word-spacing: normal;
   }

   .main-content-01 p :first-of-type {
      font-size: 10.8px;
      color: #4CAF50;
      background-color: white;
      padding: 6.5px;
      border-color: #4CAF50;
      word-spacing: normal;
   }

   article > .main-content h2 {
      font-family: var(--secondaryFont);
      font-weight: 500;
      line-height: 1.6;
      font-size: 1.45rem;
      margin-bottom: 1.2rem; }

   article > .main-content-0 h2 {
      font-family: var(--secondaryFont);
      font-weight: 500;
      line-height: 1.6;
      font-size: 1.45rem;
      margin-bottom: 1.2rem; }

   article > .main-content-01 h2 {
      font-family: var(--secondaryFont);
      font-weight: 500;
      line-height: 1.6;
      font-size: 1.45rem;
      text-align: center;
      margin-bottom: 1.2rem; }
         
   article > .main-content h3 {
      font-family: var(--secondaryFont);
      font-weight: 100;
      line-height: 1.6;
      font-size: 1.80rem;
      margin: 30px 0 0 0;
      text-align: center;
      color: var(--dark);
      letter-spacing: -.3px;
      word-spacing: -.1ch;
   }

   article > .main-content-0 h3 {
      font-family: var(--secondaryFont);  /* font-family: or var(--serifFont); :: also see: .main-content-2 :: .main-content-2 h3 */
      font-weight: 100;
      line-height: 1.2;
      font-size: 28px;                /* font-size: 1.7rem; */
      /* color: var(--dark); */
      letter-spacing: -.3px;
      word-spacing: -.1ch;
      text-align: center;
      /* margin: 15px 0 0.3rem 0; */
   }     /* font-size: 1.5rem; / margin-top:15px; / margin: 15px 0 0.3rem 0; [ new add for genesis ] 6/18/23 */
      /* margin: 50px 0 15px 0;     margin: 10px 0 15px 0; / font-size: 1.77rem; | previously 3/6/23 cityHarvest */

   article > .main-content-01 h3 {
      font-family: var(--secondaryFont);
      font-weight: 100;
      line-height: 1.2;
      font-size: 1.77rem;
      color: var(--dark);
      letter-spacing: -.3px;
      word-spacing: -.1ch;
   }

   article > .main-content h5 {
      font-family: var(--secondaryFont);
      font-weight: 400;
      line-height: 0.8;
      text-align: right;
      font-size: .8.5rem;
      margin: -1.4rem 0 3.3rem 0;
   }

   article > .main-content-0 h5 {
      font-family: var(--secondaryFont);
      font-weight: 400;
      line-height: 0.8;
      text-align: right;
      font-size: .8.5rem;
      margin: -.9rem 0 3.3rem 0;
   }

   article > .container-02 p {
      color: #000000;
      font-family: var(--secondaryFont);
      font-size: 1.80rem;   /* New attribute today 9/4/22 "line-height: 1.6" | New "TEMPORARY" ?? attribute */
   }

   article > .main-content li {
      margin-left: 2rem; }


   article > .main-content a {
      font-family: var(--secondaryFont);
      line-height: 1.6;
      margin-bottom: 1.2rem; }

   article > .main-content-1 p {
      color: red;
      font-family: var(--secondaryFont);
      line-height: 3.6;
      margin-bottom: 1.2rem;
   }


   main > .main-content-0 h3 {
      font-family: var(--secondaryFont);
      font-weight: 100;
      line-height: 1.2;
      font-size: 1.77rem;
      margin: 50px 0 37px 3.5%;     /* margin: 10px 0 15px 0; | previously 3/6/23 cityHarvest */
      color: var(--dark);
      letter-spacing: -.3px;
      word-spacing: -.1ch;
   }

   /* more buttons at END of FILE || more buttons at END of FILE || more buttons at END of FILE */
   .btn {
      display: inline-block;
      font-weight: 400;
      text-align: left;
      white-space: nowrap;
      vertical-align: middle;
      user-select: none;
      border: 1px solid transparent;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      line-height: 1.5;
      border-radius: 0.25rem;
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }

   .btn-2 {
      display: inline-block;
      font-weight: 400;
      text-align: left;
      white-space: nowrap;
      vertical-align: middle;
      user-select: none;
      border: 1px solid transparent;
      padding: 0.375rem 0.75rem;
      font-size: .9rem;
      line-height: 1;
      border-radius: 0.25rem;
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }


/* ************************* - - - - * REUSABLE CONTAINERS * - - - - ************************* */

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

   .height-50 {
      height: 50vh; }

   .height-60 {
      height: 60vh; }

   .height-75 {
      height: 75vh; }

/*                                                                  Task 2.2 - FLOATS, 1/Row */
/* ********************* - - - - * REUSABLE FLOATS ln. 120 * - - - - *********************** */

@media (min-width: 440px) {
   .container {
      margin: 0 auto;     /* This centers the page */
      width: 90%;         /* This sets our total page width */
      max-width: 1200px;  /* Make sure out page never gets too wide */
   }

   .main-content {
      margin: 0 auto;     /* This centers the page */
      width: 90%;         /* This sets our total page width */
      max-width: 1200px;  /* Make sure out page never gets too wide */      
      align-items: center;
   }
}

@media (min-width: 720px) {
   .container {
      margin: 0 auto;     /* This centers the page */
      width: 90%;         /* This sets our total page width */
      max-width: 1200px;  /* Make sure out page never gets too wide */
   }

   .main-content {     
      float: left;        /* This causes the cont ent to move to the left */
      width: 60%;         /* We need to set the width whenever we float an element */
   }

   .aside-left {
      float: left;        /* This causes the sidebar to move to the left */
      width: 40%;
   }
}

@media (min-width: 1020px) {
   .container {
      margin: 0 auto;     /* This centers the page */
      width: 90%;         /* This sets our total page width */
      max-width: 1200px;  /* Make sure out page never gets too wide */
   }

   .container-02 {
      margin: 0 auto;     /* margin: 0 auto; | This centers the page */
      width: 100%;        /* This sets our total page width || previously: width: 90%; 3/9/23 */
      max-width: 1400px;  /* Make sure out page never gets too wide */
      line-height: 1.6;   /* New attribute today 9/4/22 "line-height: 1.6" | New "TEMPORARY" ?? attribute */
   }

   .main-content {
      float: left;        /* This causes the content to move to the left */
      width: 100%;         /* We need to set the width whenever we float an element || * * * previously 6/8/23 width: 100%; * * */
   }

   .main-content-0 {
      /* float: left;        This causes the content to move to the left || previously: float: left; 5/27/23 */
      width: 100%;         /* We need to set the width whenever we float an element || * * * previously 6/8/23 width: 60%; * * */
      text-align: center;  /* New attribute today 9/11/23 "text-align: center;" | New "TEMPORARY" ?? attribute */
   }

      /* This causes the content to move to the left / height: 80vh; or 40vh; or 45vh; optional || height: 40vh; 2/25/23 / width: 40%; || width: 45%; for wide or .wide-max-width-container optional || M.D.Rey Tourism uses 62% || CityHarvest uses 63% was 65% */   
   /* .main-content-2 {
      float: left;
      height: 38vh;      
      width: 63%;         
      line-height: 1.6;
      margin-top: 7%;
   } */
   /* .main-content-2 span { / color: #3498db; } */
   /* .main-content-2 p :first-of-type { / font-size: 10.8px;
      color: #4CAF50;
      background-color: white;
      padding: 6.5px;
      border-color: #4CAF50;
      word-spacing: normal; } */

   /* article > .main-content-2 h3 { / font-family: var(--secondaryFont);
      font-weight: 100;
      line-height: 1.6;
      font-size: 1.80rem;
      margin: 30px 0 0 0;
      color: var(--dark);
      letter-spacing: -.3px;
      word-spacing: -.1ch; } */

         .main-content-2 {
            float: left;        /* This causes the content to move to the left ::: start @ [ -2 ] main-content-2 */
            height: 73vh;       
            width: 100%;        /* || M.D.Rey Tourism uses 62% || CityHarvest uses 63% was 65% also uses [ Try: 83% ] */
            font-family: Georgia, serif;
            line-height: 1.6;
            margin-top: 3.5%;     /* latest: margin-top: 3.5%; / previously margin-top: 7%; 5/8/23 or margin-top: 7%; ::: .main-content-5 { float: left; / height: 23vh; / width: 100%; */
         }

         .main-content-2 p :first-of-type {
            line-height: 1.6;
            margin: 0 5% 12px 0;  /* margin-bottom: 12px; / font-family: sans-serif; */
            font-size: 13px;
            letter-spacing: .5px;
         }

         .main-content-2 p {
            line-height: 1.4;     /* line-height: 1.6; */
            margin: 1% 5% 12px 0;  /* margin-bottom: 12px; */
            font-family: Georgia, serif;
            font-size: 18.5px;
         }
                                 /* parent element has attribute already: deleting font-style: .95rem; / font-size:18px ::: in editor style */
         article > .main-content-2 h3 {
            font-family: Georgia, serif;
            font-weight: 100;    /* || CityHarvest: font-weight: 100; also F.Wt. 320; ] */
            line-height: 1.5;    /* || edit was line-height: 1.6; ] 6/20/23 */
            font-size: 32px;     /* || M.D.Rey Tourism uses 62% || CityHarvest uses font-size: 1.80rem; also uses [ font-size: 1.80rem; ] */
            margin-bottom: 30px;
            color: black;
            letter-spacing: -.3px;
            word-spacing: -.1ch; }
                                 /* margin: 30px 0 0 0; */
                                 /* font-size:28px ::: in editor style */
         .main-content-2 img {
            float: left;
            display: block;
            margin: 5px 6% 8% 0;
            height: auto;
            width: 49vw;
            max-width: 100%; 
         }
         /* margin: 5px 3% 8% 0; */

         .main-content-2b {
            float: left;
            height: 71vh;       /* latest: height: 71vh; or 80vh; or 70vh "was 60vh" */
            width: 100%;
            font-family: Georgia, serif;
            line-height: 1.6;            
            margin-top: 6%;     /* previously margin-top: 7%; 5/8/23 "was 2%" */
            margin: 60px 0 12px 85px;
         }
            /* border-left: 1px solid black; */

            .main-content-2b p :first-of-type {
               line-height: 1.6;
               margin: 0 0 12px 0;
               font-size: 13px;
               letter-spacing: .5px;
            }
   
         .main-content-2b p {
            line-height: 1.4;
            margin: 1% 0 12px 0;
            font-family: Georgia, serif;
            font-size: 18.5px;
         }
            /* font-family: var(--primaryFont);   */
               
         article > .main-content-2b h3 {
            font-family: Georgia, serif;
            font-weight: 100;    /* || CityHarvest: font-weight: 100; also F.Wt. 320; ] */
            line-height: 1.5;    /* || edit was line-height: 1.6; ] 6/20/23 */
            font-size: 32px;     /* || M.D.Rey Tourism uses 62% || CityHarvest uses font-size: 1.80rem; also uses [ font-size: 1.80rem; ] */
            color: black;
            letter-spacing: -.3px;
            word-spacing: -.1ch;
            margin: 0 0 28px 0;
         }
               /* margin: 0 0 12px 95px;  margin: 30px 0 0 0; */

         .main-content-2b img {
            float: right;
            display: block;
            margin: 5px 6% 5% 6%;       /* edited: was margin: margin: 5px 6% 5% 165px; or 180px; 6/20/23 */
            width: 49vw;
            max-width: 100%; }


   .main-content-4 {
      float: left;        /* This causes the content to move to the left */
      height: 60vh;       /* height: 80vh; or 40vh; optional */
      width: 44%;         /* width: 40%;  | We need to set the width whenever we float an element || width: 45%; for wide or .wide-max-width-container optional */
   }

   .main-content-5 {
      float: left;        /* This causes the content to move to the left */
      height: 73vh;       /* height: 80vh; or 40vh; or 45vh; optional || height: 40vh; 2/25/23 height: | previously 38vh; 5/8/23 edit: to 20vh 15vh 26vh ] */
      width: 100%;        /* || M.D.Rey Tourism uses 62% || CityHarvest uses 63% was 65% also uses [ Try: 83% ] */
      font-family: var(--serifFont:);     /* font-family: var(--serifFont:); */
      margin-top: 3.5%;     /* previously margin-top: 7%; 5/8/23 or margin-top: 7%; ::: .main-content-5 { float: left; / height: 23vh; / width: 100%; */
   }

         .main-content-5 p {
            line-height: 1.6;
            margin-bottom: 12px;
            font-family: var(--serifFont:);
            font-style: .95rem;
         }
            /* parent element has attribute already: try deelting this font-style line */

         article > .main-content-5 h3 {
            font-family: var(--serifFont:);
            font-weight: 100;    /* || CityHarvest: font-weight: 100; also F.Wt. 320; ] */
            line-height: 1.2;    /* || edit was line-height: 1.6; ] 6/20/23 */
            font-size: 1.7rem;   /* || M.D.Rey Tourism uses 62% || CityHarvest uses font-size: 1.80rem; also uses [ font-size: 1.80rem; ] */
            /* margin: 30px 0 0 0; */
            color: #cd9a81;    /* || edit was var(--dark); */
            letter-spacing: -.3px;
            word-spacing: -.1ch;
         }

   article > .main-content-5 h4 {
      font-family: var(--secondaryFont);
      font-weight: 300;
      line-height: 1.6;
      font-size: 26px;
      margin: 20px 0 20px 8px;
      color: var(--dark);
      letter-spacing: -.3px;
      word-spacing: -.1ch;
   }

   article > .main-content-5 h5 {
      font-weight: 600;
      line-height: 2;
      font-size: 22px;
      margin-bottom: 8px;
      font-family: var(--primaryFont);

   }

   article > .main-content-5 h6 {
      font-family: var(--primaryFont);
      font-weight: 800;
      line-height: 2;
      font-size: 19px;
      margin-top: 20px;
   }

   .main-content-5 img {
      float: left;
      display: block;
      margin: 5px 3% 8% 0;
      height: auto;
      width: 49vw;
      max-width: 100%; 
   }
   
         .main-content-5b {
            float: left;        /* This causes the content to move to the left ::: start @ [ -2 ] main-content-2 */
            height: 73vh;       
            width: 100%;        /* || M.D.Rey Tourism uses 62% || CityHarvest uses 63% was 65% also uses [ Try: 83% ] */
            font-family: Georgia, serif;
            margin-top: 3.5%;     /* previously margin-top: 7%; 5/8/23 or margin-top: 7%; ::: .main-content-5 { float: left; / height: 23vh; / width: 100%; */
         }

         .main-content-5b p {
            line-height: 1.6;
            margin-bottom: 12px;
            font-family: Georgia, serif;
            font-style: .95rem;
         }
            /* parent element has attribute already: try deelting this font-style line */

         article > .main-content-5b h3 {
            font-family: Georgia, serif;
            font-weight: 100;    /* || CityHarvest: font-weight: 100; also F.Wt. 320; ] */
            line-height: 1.2;    /* || edit was line-height: 1.6; ] 6/20/23 */
            font-size: 1.7rem;   /* || M.D.Rey Tourism uses 62% || CityHarvest uses font-size: 1.80rem; also uses [ font-size: 1.80rem; ] */
            /* margin: 30px 0 0 0; */
            color: black;
            letter-spacing: -.3px;
            word-spacing: -.1ch; }

         .main-content-5b img {
            float: left;
            display: block;
            margin: 5px 3% 8% 0;
            height: auto;
            width: 49vw;
            max-width: 100%; 
         }

                     .main-content-5c {
                        float: left;
                        height: 71vh;       /* latest: height: 71vh; or 80vh; or 70vh "was 60vh" */
                        width: 100%;
                        font-family: Georgia, serif;
                        margin-top: 6%;
                        margin: 60px 0 12px 0;
                     }
                        /* previously margin-top: 7%; 5/8/23 "was 2%" */
                        /* margin: 60px 0 12px 100px; / border-left: 1px solid black; */

                     /* height: 38vh; <---- was, now its 80vh; 6/12/23 genesis, home, sec-6 ln. 590 ? */
                     /* height: auto; | "omit temporarily" edited 6/13/23 also GOTO: ln. 599 */
                     /* height: auto; | "omit temporarily" edited 6/13/23 also GOTO: ln. 542 */

                     .main-content-5c p {
                        line-height: 1.6;
                        margin: 0 0 12px 35px;
                        font-family: Georgia, serif;
                     }
                     /* font-weight: 500; / <span style="font-size:12px"> */

                     article > .main-content-5c h3 {
                        font-family: Georgia, serif;
                        font-weight: 300;    /* || CityHarvest: font-weight: 100; also F.Wt. 320; ] */
                        line-height: 1.6;
                        font-size: 1.7rem;   /* || M.D.Rey Tourism uses 62% || CityHarvest uses font-size: 1.80rem; also uses [ font-size: 1.50rem; ] */
                           /* margin: 0 0 12px 95px;  margin: 30px 0 0 0; */
                        color: var(--dark);
                        letter-spacing: -.3px;
                        word-spacing: -.1ch;
                        margin: 0 0 28px 0;
                     }

                     .main-content-5c img {
                        float: left;      /* This causes the content to move to the left */
                        display: block;
                        margin: 5px 13.3% 5% 45px;       /* edited: was margin: margin: 5px 6% 5% 165px; or 180px; or 45px 6/20/23 */
                        width: 57vw;
                        max-width: 100%;
                     }
                     /* margin: 5px 13.5% 5% 45px;       edited: was margin: margin: 5px 6% 5% 165px; or 180px; or 45px 6/20/23 */
                     /* margin: 5px 6% 5% 165px; / width: 64.5vw; / margin: 5px 6% 5% 45px; / width: 57vw; */

                  /* [ 2 ] brand new properties here & IMG below 6/30/23 [ .main-content-5c ] */
                  /* .main-content-5c {
                     height: 58vh;       
                     width: 100%;        
                     font-family: Georgia, serif;
                     margin-top: 3.5%;   
                  } */
                     
                  .main-content-6b > div p {
                     border-left-style: solid;
                     border-width: 1px;
                     padding: 0 0 0 60px;
                  }
                     /* margin-right: 30px; */
                     /* padding: 0 0 0 30px; */

                  .main-content-6b p {
                     line-height: 1.6;
                     margin: 0 10% 12px 71.5vw;
                     font-family: var(--primaryFont);
                  }
                     /* margin: 0 10% 12px 71.5vw; or 75.5vw / padding: 0 0 0 30px; / margin: 0 0 12px 65vw; // margin: 0 0 12px 76vw; */
                     /* border-left: 1px solid-black; } / font-weight: 500; / <span style="font-size:12px"> / margin: 0 0 12px 935px; / or try 65% or 65vw */

                  article > .main-content-6b h3 {
                     font-family: var(--secondaryFont);
                     font-weight: 300;    /* || CityHarvest: font-weight: 100; also F.Wt. 320; ] */
                     line-height: 1.6;
                     font-size: 1.7rem;   /* || M.D.Rey Tourism uses 62% || CityHarvest uses font-size: 1.80rem; also uses [ font-size: 1.50rem; ] */
                     color: var(--dark);
                     letter-spacing: -.3px;
                     word-spacing: -.1ch;
                     margin: 0 0 28px 0;
                  }
                        /* margin: 0 0 12px 95px;  margin: 30px 0 0 0; */


            .main-content-6 {
               float: left;
               height: 71vh;       /* latest: height: 71vh; or 80vh; or 70vh "was 60vh" */
               width: 100%;
               font-family: var(--secondaryFont);
               margin-top: 6%;     /* previously margin-top: 7%; 5/8/23 "was 2%" */
               margin: 60px 0 12px 100px;
               /* border-left: 1px solid black; */
            }
            /* height: 38vh; <---- was, now its 80vh; 6/12/23 genesis, home, sec-6 ln. 590 ? */
            /* height: auto; | "omit temporarily" edited 6/13/23 also GOTO: ln. 599 */
            /* height: auto; | "omit temporarily" edited 6/13/23 also GOTO: ln. 542 */

            .main-content-6 p {
               line-height: 1.6;
               margin: 0 0 12px 0;     /* was margin: 0 0 12px 35px; edit 9/3/23 */
               font-family: var(--primaryFont);  
            }
            /* font-weight: 500; / <span style="font-size:12px"> | margin: 0 0 12px 35px; */

   article > .main-content-6 h3 {
      font-family: var(--secondaryFont);
      font-weight: 300;    /* || CityHarvest: font-weight: 100; also F.Wt. 320; ] */
      line-height: 1.6;
      font-size: 1.7rem;   /* || M.D.Rey Tourism uses 62% || CityHarvest uses font-size: 1.80rem; also uses [ font-size: 1.50rem; ] */
         /* margin: 0 0 12px 95px;  margin: 30px 0 0 0; */
      color: var(--dark);
      letter-spacing: -.3px;
      word-spacing: -.1ch;
      margin: 0 0 28px 0;
   }

   article > .main-content-6 h4 {
      font-family: var(--secondaryFont);
      font-weight: 300;
      line-height: 1.6;
      font-size: 28px;
      margin: 20px 0 20px 33px;
      color: var(--dark);
      letter-spacing: -.3px;
      word-spacing: -.1ch; 
   }  

   article > .main-content-6 h5 {
      font-weight: 600;
      line-height: 2;
      font-size: 22px;
      margin-bottom: 8px;
      font-family: var(--primaryFont);
   }

   article > .main-content-6 h6 {
      font-family: var(--primaryFont);
      font-weight: 800;
      line-height: 2;
      font-size: 19px;
      margin-top: 20px;
   }

            .main-content-6 img {
               float: right;
               display: block;
               margin: 5px 6% 5% 165px;       /* edited: was margin: margin: 5px 6% 5% 165px; or 180px; 6/20/23 */
               width: 64.4vw;
               max-width: 100%; }
               /* height: auto; | "omit temporarily" edited 6/13/23 / edit from width: 49vw; to width: 64.4vw xx 7/20/23 also GOTO: ln. 542 */

               .main-content-7 {
                  float: left;        /* This causes the content to move to the left */
                  height: 71vh;       /* latest: height: 71vh; or 80vh; or 70vh "was 60vh" */
                  width: 100%;        /* || M.D.Rey Tourism uses 62% || CityHarvest uses 63% was 65% also uses [ Try: 83% ] */
                  font-family: var(--secondaryFont);
                  margin-top: 3.5%;     /* previously margin-top: 7%; 5/8/23 or margin-top: 7%; */
               }
                  /* height: auto; | "omit temporarily" edited 6/13/23 also GOTO: ln. 666 */
                  /* height: auto; | "omit temporarily" edited 6/13/23 also GOTO: ln. 610 */
                        
               .main-content-7 p {
                  line-height: 1.6;
                  margin: 0 0 12px 35px;
                  font-family: var(--primaryFont);  
               }
               /* font-weight: 500; / <span style="font-size:12px"> */
   
               article > .main-content-7 h3 {
                  font-family: var(--secondaryFont);
                  font-weight: 300;    /* || CityHarvest: font-weight: 100; also F.Wt. 320; ] */
                  line-height: 1.6;
                  font-size: 1.7rem;   /* || M.D.Rey Tourism uses 62% || CityHarvest uses font-size: 1.80rem; also uses [ font-size: 1.50rem; ] */
                     /* margin: 0 0 12px 95px;  margin: 30px 0 0 0; */
                  color: var(--dark);
                  letter-spacing: -.3px;
                  word-spacing: -.1ch;
                  margin: 0 0 28px 0;
               }
            
               article > .main-content-7 h4 {
                  font-family: var(--secondaryFont);
                  font-weight: 300;
                  line-height: 1.6;
                  font-size: 28px;
                  margin: 20px 0 20px 33px;
                  color: var(--dark);
                  letter-spacing: -.3px;
                  word-spacing: -.1ch; 
               }  
            
               article > .main-content-7 h5 {
                  font-weight: 600;
                  line-height: 2;
                  font-size: 22px;
                  margin-bottom: 8px;
                  font-family: var(--primaryFont);
               }
   
               article > .main-content-7 h6 {
                  font-family: var(--primaryFont);
                  font-weight: 800;
                  line-height: 2;
                  font-size: 19px;
                  margin-top: 20px;
               }

               .main-content-7 img {
                  float: left;
                  display: block;
                  margin: 5px 6% 5% 0;       /* edited: was margin: margin: 5px 6% 5% 165px; or 180px; or 5px 6% 5% 55px; 6/20/23 */
                  width: 64.5vw;                /* earlier was width: 64.5vw; or 56vw; [ genesis index, homePg. 8/12/23 ] */
                  max-width: 100%; }
                  /* height: auto; | "omit temporarily" edited 6/13/23 also GOTO: ln. 666 */
                  
               .main-content-7 .r-40 {
                  float: right;
                  display: block; }
   

                  .main-content-7b {
                     float: left;        /* This causes the content to move to the left */
                     height: 71vh;       /* latest: height: 71vh; or 80vh; or 70vh "was 60vh" */
                     width: 100%;        /* || M.D.Rey Tourism uses 62% || CityHarvest uses 63% was 65% also uses [ Try: 83% ] */
                     font-family: var(--secondaryFont);
                     margin-top: 3.5%;     /* previously margin-top: 7%; 5/8/23 or margin-top: 7%; */
                  }
                     /* height: auto; | "omit temporarily" edited 6/13/23 also GOTO: ln. 666 */
                     /* height: auto; | "omit temporarily" edited 6/13/23 also GOTO: ln. 610 */
                           
                  .main-content-7b p {
                     line-height: 1.6;
                     margin: 0 0 12px 35px;
                     font-family: var(--primaryFont);  
                  }
      
                  article > .main-content-7b h3 {
                     font-family: var(--secondaryFont);
                     font-weight: 300;
                     line-height: 1.6;
                     font-size: 1.7rem;
                     color: var(--dark);
                     letter-spacing: -.3px;
                     word-spacing: -.1ch;
                     margin: 0 0 28px 0;
                  }
               
                  article > .main-content-7b h4 {
                     font-family: var(--secondaryFont);
                     font-weight: 300;
                     line-height: 1.6;
                     font-size: 28px;
                     margin: 20px 0 20px 33px;
                     color: var(--dark);
                     letter-spacing: -.3px;
                     word-spacing: -.1ch; 
                  }  
               
                  article > .main-content-7b h5 {
                     font-weight: 600;
                     line-height: 2;
                     font-size: 22px;
                     margin-bottom: 8px;
                     font-family: var(--primaryFont);
                  }

                  article > .main-content-7b h6 {
                     font-family: var(--primaryFont);
                     font-weight: 800;
                     line-height: 2;
                     font-size: 19px;
                     margin-top: 20px;
                  }

                  .main-content-7b img {
                     float: left;
                     display: block;
                     margin: 5px 6% 5% 55px;       /* edited: was margin: margin: 5px 6% 5% 165px; or 180px; or 5px 6% 5% 55px; 6/20/23 */
                     width: 56vw;                /* earlier was width: 64.5vw; or 56vw; [ genesis index, homePg. 8/12/23 ] */
                     max-width: 100%; }

                     
   .main-content-10 {
      width: 60%;
      font-family: var(--secondaryFont);
      margin: 5% auto 4%;
      padding-left: 20px;
   }
   
   .main-content-10 p {
      line-height: 1.6;
      margin-bottom: 12px;
      font-family: var(--primaryFont);
   }

   article > .main-content-10 h3 {
      font-family: var(--secondaryFont);
      font-weight: 320;    /* || CityHarvest uses [ font-weight: 100; ] */
      line-height: 1.6;
      font-size: 1.50rem;  /* || M.D.Rey Tourism uses 62% || CityHarvest uses font-size: 1.80rem; also uses [ font-size: 1.80rem; ] */
      margin: 30px 0 0 0;
      color: var(--dark);
      letter-spacing: -.3px;
      word-spacing: -.1ch;
   }

   article > .main-content-10 h4 {
      font-family: var(--secondaryFont);
      font-weight: 600;
      line-height: 1.6;
      font-size: 23px;
      margin: 20px 0;
      color: var(--dark);
      letter-spacing: -.3px;
      word-spacing: -.1ch;
   }

   .main-content-10 img {
      /* float: left; */
      display: block;
      margin: 5px 3% 5px 3%;
      height: auto;
      max-width: 100%; 
   }

   .main-content-11 {
      width: 60%;
      font-family: var(--secondaryFont);
      margin: 5% auto 4%;
      padding-left: 20px;
   }

   .main-content-11 p {
      line-height: 1.6;
      margin-bottom: 12px;
      font-family: var(--primaryFont); }

   article > .main-content-11 h3 {
      font-family: var(--secondaryFont);
      font-weight: 320;    /* || CityHarvest uses [ font-weight: 100; ] */
      line-height: 1.6;
      font-size: 1.50rem;  /* || M.D.Rey Tourism uses 62% || CityHarvest uses font-size: 1.80rem; also uses [ font-size: 1.80rem; ] */
      margin: 30px 0 0 0;
      color: var(--dark);
      letter-spacing: -.3px;
      word-spacing: -.1ch;
   }

   article > .main-content-11 h4 {
      font-family: var(--secondaryFont);
      font-weight: 600;
      line-height: 1.6;
      font-size: 23px;
      margin: 20px 0;
      color: var(--dark);
      letter-spacing: -.3px;
      word-spacing: -.1ch;
   }

   .main-content-11 img {
      float: left;
      display: block;
      margin: 5px 3% 5px 0;
      height: auto;
      max-width: 100%; 
   }
   /* Atlas S.Systems: uses / aside-left column width: 48%; | "wide-max-width-container" */
   /* MDR M.DelRey tourism: uses / aside-left column width: of 31.5% | height: 50vh; ? */
   .aside-left {
      float: left;        /* This causes the sidebar to move to the left */
      width: 31.5%;         /* width: 30%; - 50% [ 48% Atlas S.Systems ] || caution: adjusting may cause "post body to narrow & align to the left " */
      height: 40vh;       /* height: 50vh; for narrow "post body"| height: 80vh; for wide or .wide-max-width-container optional */
      margin: 0 3% 0 0;
   }

   .aside-left-3 {
      float: left;        /* This causes the sidebar to move to the left */
      width: 45%;         /* width: 30%; [ 50% ] optional || caution: adjusting may cause "post body to narrow & align to the left " */
      height: 70vh;       /* height: 50vh; for narrow "post body"| height: 80vh; for wide or .wide-max-width-container optional */
      margin: 0 3% 0 3%;
   }

   .aside-right {         /* adjusting width: to 50% or 47% or 30%; [ works perfectly ] */
      float: right;       /* This causes the sidebar to move to the right */
      width: 47%;         /* width: 30%; [ 50% ] optional || caution: adjusting may cause "post body to narrow & align to the left " */
      height: 70vh;       /* height: 50vh; for narrow "post body"| height: 80vh; for wide or .wide-max-width-container optional */
      margin: 2% 0 0 5%;  /* margin: 0 5% 0 0; optional inline: detail page */
   }

   .aside-right-1 {       /* adjusting width: to 50% or 47% or 30%; [ works perfectly ] */
      float: right;       /* This causes the sidebar to move to the right */
      width: 27%;         /* width: 30%; [ 50% ] optional || caution: adjusting may cause "post body to narrow & align to the left " */
      height: 120vh;      /* height: 50vh; for narrow "post body"| height: 80vh; for wide or .wide-max-width-container optional */
      margin: 4% 6%;      /* margin: 0 5% 0 0; optional inline: detail page */
         line-height: 1.6;       /* new attribute 7/3/22 */
   }

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

   .aside-right-2 {        /* adjusting width: to 50% or 47% or 30%; [ works perfectly ] */
      float: right;       /* This causes the sidebar to move to the right */
      width: 27%;         /* width: 30%; [ 50% ] optional || caution: adjusting may cause "post body to narrow & align to the left " */
      height: 90vh;       /* height: 50vh; for narrow "post body"| height: 80vh; for wide or .wide-max-width-container optional */
      margin: 2% 6%;  /* margin: 0 5% 0 0; optional inline: detail page */
   }

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

   .aside-right-3 {
      float: left;        /* This causes the sidebar to move to the left */
      width: 45%;         /* width: 30%; [ 50% ] optional || caution: adjusting may cause "post body to narrow & align to the left " */
      height: 70vh;       /* height: 50vh; for narrow "post body"| height: 80vh; for wide or .wide-max-width-container optional */
      margin: 0 3% 0 0;
   }

   .col-30 {
      float: left;        /* This causes the sidebar to move to the left */
      width: 28%;         /* width: 30%; [ 31% or 50% ] optional || caution: adjusting may cause "post body to narrow & align to the left " */
      margin: 0 2.5%;
   }

   .col-50 {
      float: left;        /* This causes the sidebar to move to the left */
      width: 44.7%;       /* width: 30%; [ 50% ] optional || caution: adjusting may cause "post body to narrow & align to the left " || * * * WAS width: 47.9%; // WAS width: 44.7%; ] */
      line-height: 1.6;
      margin: 2% 3.2% 0 0;    /* { NEW ADD 6/5/23 } * * * || " IN EDITOR: WAS column one r14 " height:483px; width:595px" /></p> * * * */
   }

   article > .col-50 h2 {
      font-family: var(--secondaryFont);
      font-weight: 500;
      line-height: 1;
      font-size: 1.7em;
      margin-bottom: 1.2rem; 
   }
}

/*                                                               Task 2.2 - FLEX PARENT, 1/Row */
/* ********************* - - - - * REUSABLE FLEXGRID ln. 225 * - - - - *********************** */
@media (min-width: 640px) {
   .flex-grid {
      display: flex;
      flex-wrap: wrap;
      flex-flow: row wrap; }

@media (min-width: 720px) {
   .flex-grid--width-85 {
      display: flex;
      align-items: center;
      flex-direction: row; }

   .flex-grid--width-85 .task-item-1 {
      width: 40%; }
   .flex-grid--width-85 .task-item-2 {
      width: 60%; }

   .flex-grid--width-75 {
      display: flex;
      flex-wrap: wrap;
      flex-flow: row wrap;
      width: 75%;
      gap: 2%;
      margin: auto; }

   .flex-grid--width-65 {
      display: flex;
      flex-wrap: wrap;
      flex-flow: row wrap;
      width: 65%;
      gap: 2%;
      margin: auto; }

   .flex-grid--width-62 {
      display: flex;
      flex-wrap: wrap;
      flex-flow: row wrap;
      width: 62%;
      gap: 6%;
      margin: auto; }


   /* Flex item, Child Widths */
   .flex-grid__col--20-percent {
      flex: 1 0 18.3333%; }

   .flex-grid__col--quarter-width {
      flex: 1 0 24.3333%; }
      /* or flex: 1 0 20.3333%; } */
   .flex-grid__col--third-width {
      flex: 1 0 29.3333%; }
      /* flex: 0 0 32.3333%; } */
      /* width: 33.3%; } */

   .flex-grid__col--half-width {
      flex: 1 0 49%; }

   .flex-grid__col--2-third-width {
      flex: 1 0 59.3333%; }

   .flex-grid__col--3-quarter-width {
      flex: 1 0 67.3333%; }
      /* or flex: 1 0 63.3333%; } */

   .flex-grid__col--75-percent {
      flex: 1 0 77.3333%; }

   .flex-grid__col--80-percent {
      flex: 1 0 77.3333%; }

   .flex-grid__col--full-width {
      width: 100%; }

   .button5 {
      display: inline-block;
      text-transform: uppercase; }

   .button5--state-pink {
      color: #FFF;
      background: #fe7b7c; }

   .button5--full-radius {
      width: 180px;
      height: 40px;
      border: none;
      border-radius: 50px; }

   /* NEW ADD 3/1/2023 ref. w3school.com coppy/paste */
   .button {
      border: none;
      color: white;
      padding: 16px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      transition-duration: 0.4s;
      cursor: pointer;
   }
   
   .button1 {
      background-color: white; 
      color: black; 
      border: 2px solid #4CAF50;
   }
   
   .button1:hover {
      background-color: #4CAF50;
      color: white;
   }
   
   .button2 {
      background-color: white; 
      color: black; 
      border: 2px solid #008CBA;
   }
   
   .button2:hover {
      background-color: #008CBA;
      color: white;
   }

   .arrow-link {
      font-size: 14px; 
      font-weight: 600;
      margin: .9rem 0;         
      color:#0077B8; }

/* ================================================================
   BLOG — Non-Bootstrap replacements (comment form + search widget)
   Added 9/4/26 while stripping Bootstrap from blog_post.html/search.html
   ================================================================ */

   .blog-featured-img {
      margin-bottom: 1rem; }

   .blog-card,
   .blog-search-card {
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      margin-top: 1.5rem; }

   .blog-card__header,
   .blog-search-card__header {
      padding: 12px 16px;
      border-bottom: 1px solid #e0e0e0; }

   .blog-card__header h2 {
      margin: 0;
      font-size: 1.3rem; }

   .blog-search-card__header h3 {
      margin: 0;
      font-size: 1rem;
      text-align: center; }

   .blog-card__body,
   .blog-search-card__body {
      padding: 16px; }

   .blog-form-row {
      margin-bottom: 12px; }

   .blog-form-col {
      display: block;
      width: 100%; }

   .blog-form-col--half {
      max-width: 320px; }

   .blog-form-col--wide {
      max-width: 100%; }

   .blog-input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      font-family: var(--secondaryFont);
      box-sizing: border-box; }

   .blog-input:focus {
      outline: none;
      border-color: var(--primary); }

   textarea.blog-input {
      resize: vertical; }

   .blog-error-text {
      color: #d9363e;
      font-size: 0.85rem;
      margin-top: 4px; }

   .blog-btn-submit,
   .blog-search-btn {
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 8px 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.2s;
      white-space: nowrap; }

   .blog-btn-submit:hover,
   .blog-search-btn:hover {
      opacity: 0.85; }

   .blog-search-form {
      display: flex;
      gap: 8px;
      width: 100%; }

   .blog-search-form .blog-input {
      flex: 1; }

   .blog-sidebar-search {
      margin-top: 1.5rem; }