/******************
Featured Trick
******************/
div.content-body .lh div.featured-trick {
  border: 2px solid var(--primary-fg);
}
div.content-body div.featured-trick div.featured-header {
  font-family: Impact, sans-serif;
  font-size: x-large;
  text-align: center;
  color: var(--secondary-fg);
  background: var(--primary-fg);
  width: 100%;
}
div.content-body .lh div.featured-trick video {
  width: 100%;
  position: relative;
  float: left;
  padding-right: 10px;
}
div.content-body .lh div.featured-trick iframe.trick-video {
  width: 100%;
  height: 400px;
  position: relative;
  float: left;
}
div.content-body .lh div.featured-trick .trick-name {
  font-family: Impact, sans-serif;
  color: var(--primary-fg);
  font-size: larger;
  text-align: center;
}
div.content-body .lh div.featured-trick .featured-text {
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
}
div.content-body .lh div.featured-trick .featured-text b {
  color: var(--primary-fg);
}


/******************
Upcoming Events
******************/
div.content-body .rh div.events {
  background: var(--highlight);
  border: 2px solid var(--secondary-fg);
}
div.content-body .rh div.events .events-header {
  font-family: Impact, sans-serif;
  font-size: x-large;
  text-align: center;
  background: var(--secondary-fg);
  color: var(--primary-fg);
  width: 100%;
}
div.content-body .rh div.events .event {
  padding: 1%;
}
div.content-body .rh div.events .event .event-type {
  color: var(--secondary-fg);
  font-size: smaller;
  text-transform: uppercase;
  font-weight: bold;
}
div.content-body .rh div.events .event .event-name {
  color: var(--primary-fg);
  font-size: larger;
  text-transform: uppercase;
  font-weight: bold;
}
div.content-body .rh div.events .event .event-location {
  color: var(--primary-fg);
  text-transform: uppercase;
}
div.content-body .rh div.events .event .event-features {
  color: var(--primary-fg);
  text-transform: uppercase;
  font-weight: bold;
}
div.content-body .rh div.events .event .event-schedule {
  padding-top: 2%;
  padding-left: 3%;
}
div.content-body .rh div.events .event .event-schedule .day {
  color: var(--secondary-fg);
  padding-top: 2%;
}
div.content-body .rh div.events .event .event-schedule .day .date {
  color: var(--secondary-fg);
  text-transform: uppercase;
  font-weight: bold;
}
div.content-body .rh div.events .event .event-schedule .day .hours {
  color: var(--secondary-fg);
  padding-left: 1%;
}
div.content-body .rh div.events .event .event-schedule .day .item {
  color: var(--secondary-fg);
  padding-left: 1%;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}


/******************
Recent Updates
******************/
div.content-body .rh div.recent {
  background: var(--primary-fg);
  color: var(--highlight);
  border: 2px solid var(--primary-fg);
  min-height: 7em;
}
div.content-body .rh div.recent .recent-header {
  font-family: Impact, sans-serif;
  font-size: x-large;
  text-align: center;
  background: var(--secondary-fg);
  color: var(--highlight);
  width: 100%;
}
div.content-body .rh div.recent div.recent-text {
  width: 92%;
  margin-left: 1%;
  margin-right: 1%;
  display: grid;
  grid-template-columns: 30% 75%;
  grid-column-gap: 1.5%;
}
div.content-body .rh div.recent .recent-text span.date {
  color: var(--highlight);
  font-weight: bold;
}
div.content-body .rh div.recent .recent-text span.event {
  color: var(--highlight);
}



/******************
For Small Screens
******************/
@media only screen and (max-width: 1000px) {
  div.content-body {
  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-columns: 100%;
  }
}