.related-wrap{
  background-color: #FFF;
  padding: 20px;
  margin-bottom: 5px;
}

.related-holder{
padding-right: 10px;
display: flex;
 flex-wrap: wrap;
}

.related-holder-small{
  padding: 0;
}

.related{
  padding-right: 10px;
   display: flex;
}

.related a{
  width: 100%;
}

.related-image-holder{
  position: relative;
  margin: 0;
}

.related-image-holder img {
    position: absolute;
    width: 100%;
    height: 100%;
}

a .related-h3 {
    color: #333;
    margin: 9px 0 14px;
    font-size: 17px;
    font-weight: 600;
}

a .related-h3-small {
    color: #333;
    margin: 9px 0 14px;
    font-size: 15px;
    font-weight: 500;
}

.related-header{
  background-color: #575A78;
      padding: 7px 11px;
      color: #fff;
      font-size: 1.2em;
      font-weight: 500;
      -webkit-border-top-left-radius: 2px;
      -webkit-border-top-right-radius: 2px;
      -moz-border-radius-topleft: 2px;
      -moz-border-radius-topright: 2px;
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
      opacity: 0.7;
      -webkit-font-smoothing: antialiased;
      margin-top: 10px;
      font-style: italic;
      font-family: 'freight-text-pro','Book Antiqua', Palatino, 'Palatino Linotype', 'Palatino LT STD', Georgia, serif;
}

.related-header-small{
  font-size: 0.70em;
  display: inline-block;
  font-weight: 900;
  text-transform: uppercase;
  padding: 3px 14px 6px 0px;
  font-family: "museo-sans", 'Arial Black', Arial, "Lucida Grande", sans-serif;
}

.related-line{
  border-top: 1px solid #d9d9d9;
  clear: both;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  float: left;
}

.category-7 .related-header{
  background-color: #124896;
}
.category-8 .related-header{
  background-color:  #65C0C9;
}
.category-9 .related-header{
  background-color: #40C15C;
}
.category-10 .related-header{
  background-color: #EF4D7F;
}
.category-11 .related-header{
  background-color: #EF7320;
}
.category-12 .related-header{
  background-color: #D852BC;
}



/**********************************************************
related-toplist
**********************************************************/
.related-toplist-number{
  font-family: "museo-sans", 'Arial Black', Arial, "Lucida Grande", sans-serif;
  color:#d9d9d9;
  font-size: 1.2em;
}

.related-toplist-content-wrap{
    border-top: 1px solid #d9d9d9;
    padding: 12px 0 12px 5px;
    width: 70%;
    margin-right: 5%;
}
.related-toplist-h2{
  margin-top: 0;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
  padding: 10px 0;
  border-top: 2px solid #333;
}

.related-toplist-h3{
    font-size: 1em;
    font-weight: 400;
    color: #000;
    margin-top: 0;
}

.related-toplist-bottom{
  border-bottom: 2px solid #333;
}

.related-toplist-item{
  margin-bottom: 5px;
}

a .related-toplist-item{
  color: #000;
}

a .related-toplist-item:hover{
  background-color: #fafafa;
}


@media only screen and (max-width: 700px){
  .related-wrap {
      padding: 10px;
      margin: 5px;
      margin-top: 0;
      width: calc(100% - 10px);
  }
  .related-header{
    width: calc(100% - 10px);
    padding: 5px 10px;
    font-size: 1em;
    margin: 5px;
    margin-bottom: 0;
  }
  .related-holder {
    padding-right: 0px;
  }
  a .related-h3 {
    margin: 6px 0 14px;
  }
  .related{
    padding: 0;
  }
  .related-header-small{
    display: block;
    width: 100%;
    margin: 0 0 2px 0;
  }
  .related-small{
    margin-bottom: 3px;
    background-color: #f4f5f7;
  }
  a .related-h3-small {
      padding: 0 10px;
  }

  .related-holder-small{
      margin-bottom: 5px;
  }
  .related-line{
    display: none;
  }
}