.clear { 
    clear:            both;
   }

/* main CSS directives for base body, and navigation */
   body  {
    color:            rgb(000,000,000);
    font-size:        18px;
    font-weight:      normal;
    font-family:      "Trebuchet MS", "Century Gothic", Arial;
    text-align:       center;
    margin:           0px;
    z-index:          20;
   }

  * {
    box-sizing: border-box;
  }

  .logoText {
    transition:       0.7s;
    opacity:          1;  /* initially entire div is fullly visible */
    display:          block;
    position:         absolute;
    top:              55px;
    left:             150px;
    color:            #fff;
    font-size:        17px;
    font-style:       italic;
    font-weight:      normal;
    height:           100%;
    float:            left;
    width:            auto;
/*    border:           0px solid #0f0;   */
  }

  .navbar {
    transition:       0.7s;
    overflow:         visible;   /* Need this to allow drop-down menu to extend down into body */
    background-color: #900;
    padding:          4px 4px 2px 4px;  /* top, right, bottom, left - Set spacing on the navbar HEADER overall */
    position:         fixed;
    width:            100%;
    height:           138px;
    top:              0;
    z-index:          9;
    border-bottom:    1px solid #000;
  }

  .colorRed {
    color:            #a00;
  }

  .colorBlue {
    color:            #00a;
  }

/* Message or tagline used in the header on all pages */
  .mastHdMsg {
    color:            #000;
    background:       #c90;
    border:           1px solid #fff;
    font-weight:      bold;
    font-size:        18px;
    border-radius:    4px;
   -webkit-animation: mastHdChg 5s 2 alternate;
/*    text-shadow:      2px 2px 4px #fff; /* Add glow around text */
    float:            left;
    padding:          2px 2px 2px 2px;  /* Sets space on top and bottom of main buttons */
    margin:           -2px -2px 0px 60px;  /* Sets space on top and bottom of main buttons */
    font-style:       normal;
  }

@-webkit-keyframes mastHdChg {
  0% {
    color: #333;
  }
  25% {
    color: #f00;
  }
  50% {
    color: #b00;
  }
  75% {
    color: #00b;
  }
  100% {
    color: #00f;
  }
}

/* Style the navbar links */
  .navbar a {
    float:            left;
    transition:       0.7s;
    color:            #fff;
    text-align:       center;
    padding:          4px 6px 4px 6px;  /* top, right, bottom, left - Sets space on top and bottom of main buttons */
    text-decoration:  none;
    font-size:        18px;
    border:           1px solid transparent;
/*    line-height:      20px;  */
    border-radius:    4px;
  }

/* Add a lighter red background color and 1px border to navbar links on hover */
  .navbar a:hover, .dropdown:hover, .dropbtn {
    transition:       0.7s;
    color:            #fff;
    background-color: #c00;
    z-index:          9;
    border:           1px solid #fff;
    border-radius:    4px;
  }

/* Current navigation in menu, set gray colors, and disable the Anchor Links since we are on the page to be linked to */
  .navbar a.current {
    color:            #999;
    background-color: #fff;
    border:           1px solid #000; /* Need this to outline drop-down menu items when they extend into the white background of the body */
    pointer-events:   none;
  }

/* navbar image (insignia) */
  .navbar img{
    height:           100%;
    float:            left;
    width:            auto;
  }

/* The dropdown container on the navbar */
  .dropdown {
    transition:       0.7s;
    float:            left;
    font-weight:      inherit;
    padding:          2px 0px 0px 0px;  /* top, right, bottom, left */
    margin:           0px 0px 2px 0px;  /* top, right, bottom, left */
    overflow:         hidden;
    border-radius:    4px;
    border:           1px solid transparent;
    z-index:          9;
  }

/* Dropdown button, in the .navbar container */
  .dropbtn {
    transition:       0.7s;
    color:            #fff;
    font-size:        inherit;
    border:           0px;
    outline:          none;
    padding:          1px 0px 4px 0px;  /* top, right, bottom, left - Set spacing on buttons with "drop-down" options */
    background-color: inherit;
    font-family:      inherit; /* Important for vertical align on mobile phones */
    margin:           0;       /* Important for vertical align on mobile phones */
    border:           1px solid transparent;
    z-index:          9;
  }

/* Dropdown content (hidden by default) */
  .dropdown-content {
    color:            #fff;
/*    display:          none;  */
    overflow:         visible;
    opacity:          0;
    visibility:       hidden;
    -webkit-transition: opacity 0.7s, visibility 0.7s;
    transition:       opacity 0.7s, visibility 0.7s;
    position:         relative;
    min-width:        inherit;
    background-color: #008;
    border:           1px solid transparent;
    border-radius:    4px;
    z-index:          9;
  }

/* Links inside the dropdown */
  .dropdown-content a {
    color:            #fff;
    float:            none;
    overflow:         visible;
    padding:          4px 4px 4px 4px;  /* Sets spacing on the individual "drop-down" buttons in a "drop-down" list */
    text-decoration:  none;
    display:          block;
    text-align:       left;
    z-index:          9;
  }

/* Add a blue background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #00f;
  }

/* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    transition:       0.7s;
    visibility:       visible;
    opacity:          1;
    z-index:          9;
  }

  .caret {
    width:            0;
    height:           0;
    display:          inline-block;
    border:           6px solid transparent;
  }

  .caret.down{
    border-top-color: #00d;
  }
    
  .caret.down:hover {
    border-top-color: #fff;
  }

  .donate {
    transition:       0.7s;
    float:            left;
    overflow:         hidden;
    background-color: transparent;
    border:           0px solid transparent;
  }

/* The DONATE on the navbar */
  .donate a {
    float:            left;
    transition:       0.7s;
    color:            #000;
    text-align:       center;
    font-weight:      bold;
    text-decoration:  none;
    font-size:        18px;
    border:           3px solid #000;
    padding:          4px 4px 4px 4px;  /* Sets spacing correctly */
    border-radius:    20px;
    background-color: #c90;
    text-shadow:      2px 2px 4px #fff; /* Add glow around text */
  }

/* Links inside the dropdown */
  .donate a:hover {
    color:            #900;
    background-color: #ea0;
    border:           3px solid #fff;
    border-radius:    20px;
  }

  .contMain {
    display:          block;
    text-align:       justify;
    text-justify:     inter-word;
    overflow:         auto;
    height:           auto;
/*    padding:          auto; */
    margin:           138px 30px 30px 30px;
 /*   max-width:        max-content;  */
  }

  .contMain a {
    color:            #009;
    font-weight:      bold;
    text-decoration:  none;
   }

   .contMain a:hover {
    color:            #900;
    font-weight:      bold;
    text-decoration:  none;
   }

  .quoteDiv {
    text-align:       justify;
    text-justify:     inter-word;
    font-size:        90%;
    font-style:       italic;
    font-weight:      normal;
    width:            90%;
    margin:           auto;
    padding:          10px;
    background-color: #eee;
    border:           1px solid #000;
  }

  .textDiv {
    display:          block;
    text-align:       justify;
    text-justify:     inter-word;
    font-size:        90%;
    font-weight:      normal;
    width:            98%;
    height:           auto;
    margin:           auto;
    padding:          5px;
    background-color: #fff;
    border:           1px solid #fff;
  }

/* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */
@media screen and (max-width: 800px) {
  .navbar {
    text-align:       left;
    height:           430px !important;  /* prevent javaScript to shrink nav bar on scroll from changs to height when in narrow mode */
    overflow:         visible;
    padding:          10px 10px !important; /* Use !important to make sure that JavaScript doesn't override the padding on small screens */
    z-index:          9;
  }

  .navbar a {
    visibility:       visible;
    opacity:          1;
    float:            none;
    display:          block;
    padding:          2px;
    text-align:       left;
    overflow:         visible;
    padding:          0px;  /* Need this to prevent .navbar container background color from showing under the drop-down menu items */
    z-index:          9;
  }

  .logoText {
    height:           0px;
    width:            0px;
    display:          none;
  }

/* navbar image (insignia) - hide it on small screen */
  .navbar img {
    height:           0px;
    width:            0px;
    display:          none;
  }

/* navbar image (insignia hover) - hide it on small screen */
  .navbar a img:nth-child(2) {
    height:           0px;
    width:            0px;
    display:          none;
  }

  .dropdown, .dropbtn, .dropdown-content { 
    visibility:       visible;
    opacity:          1;
    float:            none;
    display:          block;
    padding:          2px;
    text-align:       center;
    overflow:         visible;
    padding:          0px;  /* Need this to prevent .navbar container background color from showing under the drop-down mune items */
  }

  .contMain {
    margin:           430px 5px 5px 5px;
    display: flex;
    flex-wrap: nowrap;
  }

}