.mh-header {
    background: none;
}

/* Category Bar Styles  BEGIN */
.mh-categ-2, .mh-categ-4 {
	border-top: 8px solid #867D68;
}

.mh-categ-2:hover, .mh-categ-4:hover {
	background: #867D68;
	color: #fff;
}

.mh-categ-2:hover a, .mh-categ-4:hover a {
	background: #999084;
	color: #fff;
}
.mh-categ-1:hover a, .mh-categ-3:hover a, .mh-categ-5:hover a {
	background: #846D52;
	color: #fff;
}
/* Category Bar Styles  END */


#vibrant-learn {
   padding-left: 42%;
   font-size: 17px;
   font-style: italic;
}

@media only screen and (max-width: 600px) {
   #vibrant-learn {
      padding-left: 24%;
      font-size: 14px;
   }
}

/* Begin code for slide-in panel */


/* Text transition-in */

.rel-box-top {   /* This is to enclose the whole Island Image and everything inside it */
   position: relative;
  /*  display: inline-block; */
}

#rel-img {  /* This is for the image of Wrangell Island - nothing more*/
  display: block;
  width: 699px;
}

.see-thru {  /* This is the outermost box enclosing the slide-in translucent panel */

  transform: translateX(80%);
  animation: slide-in-anim 1.5s ease-out forwards;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  opacity: 0.4;

  margin: 15px 30px;
  padding: 25px 45px;
  /*  This is for the original "what future do we see for our children? 
  background-color: rgba(37, 37, 37, 0.85);
  color: #fff; */
  background-color: rgba(255, 255, 255, 0.93);  
  border-radius: 4px;
}


/*  BEGIN styles for  */

#grad-title {  /* Styles for text like "Naw Ruz Celebration" or "Summer Youth Camp" */
   background: #FF5557;
   background: linear-gradient(to right,  #3A0E18 0%, #5E1626 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  font-size: 50px;
}


#grad-title, .fine-commentary {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 10px 20px;
  margin-top: 0;
  line-height: 62px;
}

.fine-commentary { /* This is for "Join us for a..." */
   color: #0000FF;
   color: #3A0E18;
   margin-left: 7%;
   margin-top: 10px;
   margin-bottom: 8px;
   font-size: 20px;
   line-height:24px;
   padding-bottom: 0;
}

#info-commentary {  /* This is for Date and Place */

   color: #D62549;
   color: #3A0E18;
   margin-left: 7%;
   margin-top: 10px;
   margin-bottom: 8px;
   font-size: 20px;
   line-height:24px;
   padding-bottom: 0;
   font-family: Arial, sans-serif;
   font-style: italic;
}

#more-nw26 a {  /* This was just for styling of the "...more info" */
   font-size: 0.7em;
   margin-left: 15px;
   color: blue;
   font-weight: 600;
   text-decoration: underline;
}


/*    END styles for NAW RUZ announcement and Summer Youth Camp  */



@keyframes slide-in-anim {
	20% {
		opacity: 0;
	}
	60% {
		transform: translateX(3%);
		opacity: 0.25;
	}
	75% {
		transform: translateX(-3%);
		opacity: 0.35;
	}
	100% {
		opacity: 0.6;
		transform: translateX(0);
	}
}

@keyframes slide-in-txt {
	40% {
		transform: translateX(3%);
	}
	65% {
		transform: translateX(-2%);
	}
	85% {
		transform: translateX(-6%);
	}
	100% {
		transform: translateX(0);
	}
}

/* Showing only the 2 blocks that pertain to the slide-in translucent panel */
@media only screen and (max-width: 600px) { 
    .see-thru { /* Make this specific to the new html widget */
      margin: 1px 10px;
      padding: 5px 6px;
    }
    .rel-box-top {
      top:20px; /* This is the space above the panoramic image */
    }

.fine-commentary { /* */
    font-size: 14px;
    line-height: 15px;
    margin-bottom: 0;
    margin-left: 3%;
    margin-right: 0;
}

#grad-title {
    font-size: 26px;
    line-height: 33px;
    margin: 0 20px;
}

#info-commentary {
    font-size: 14px;
    line-height: 18px;
    margin-top: 0;
}

#grad-title, .fine-commentary, #info-commentary {
    font-family: Arial, "Liberation Sans", 'Arimo', "Helvetica Neue", Helvetica, sans-serif;
    # font-family: 'Arimo', sans-serif;
}


}