div.content-body {
  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-columns: 100%;
}

div.content-body .single-pane {
  border: 2px solid var(--primary-fg);
  width: 90%;
}



/******************
Rider View
******************/
.rider-video {
  padding-left: 2%;
  white-space: nowrap;
}



/******************
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%;
}

/* Approval button tricks/view->pending videos */
div.content-body div.featured-trick.pending div.trick-name .approve-link {
  float: left;
  padding-left: .5%;
}
div.content-body div.featured-trick.pending div.trick-name .approve-link a {
  color: var(--primary-fg);
  font-size: smaller;
}
div.content-body div.featured-trick.pending div.trick-name .approve-link a:hover {
  color: var(--secondary-fg);
}

/* Suggest Changes button tricks/view */
div.content-body div.featured-trick div.trick-name .suggestion-button {
  float: right;
  padding-left: .5%;
  padding-right: .5%;
  white-space: nowrap;
}
div.content-body div.featured-trick div.trick-name .suggestion-button a {
  background: var(--secondary-fg);
  color: var(--primary-fg);
  font-size: smaller;
  border: 2px var(--primary-fg) solid;
  border-radius: 5px;
  padding: 0% .5%;
}
div.content-body div.featured-trick div.trick-name .suggestion-button a:hover {
  background: var(--primary-fg);
  color: var(--highlight);
}

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;
  padding-bottom: 1%;
}
div.content-body .lh div.featured-trick div.video {
}
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: 98%;
  margin-left: 1%;
  margin-right: 1%;
}
div.content-body .rh div.recent .recent-text b {
  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%;
  }
}