body.index     .bodyContainer,
body.sub-index .bodyContainer {
  padding-bottom: 3rem;
}

/* =============================================================================
   .media.overlap temp img (delete me later)
   ========================================================================== */

.overlap .media .imgBox {
  background-image: url(../img/news3.jpg);
}

/* =============================================================================
   INDEX FEATURE
   ========================================================================== */

/*    .SUB-INDEX-HEADER    */

          .sub-index-header {
  position: relative;
  z-index: 1;
  width: auto;
  margin: auto;
  margin-bottom: -0.25em;
  font-size: 1.75rem;
  line-height: 3;
  text-align: center;
  color: hsl(97, 3%, 20%);
}
body.dark .sub-index-header {
  color: hsl(97, 3%, 95%);
}
          .sub-index-header:before,
          .sub-index-header:after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  margin: auto;
  height: 2px;
  background-color: hsl(97, 3%, 20%);
}
          .sub-index-header:after {
  width: 12em;
  height: 1.5em;
  background-color: hsl(97, 3%, 90%);
}
body.dark .sub-index-header:before {
  background-color: hsl(97, 3%, 95%);
}
body.dark .sub-index-header:after {
  background-color: hsl(97, 3%, 10%);
}

@media only screen and (max-width: 768px) {
  .sub-index-header {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 568px) {
  .sub-index-header {
    font-size: 1.25rem;
  }
}

.mp-feature::after,
.mp-feature-inner::after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}

/*    .MP-FEATURE    */

.mp-feature {}
.mp-feature-inner {
  margin: auto -0.5em;
}

/*    INDEX-SUB OVERWRITE    */

          .mp-feature.index-sub {
  padding-bottom: 3em;
  text-align: center;
  background-color: hsl(97, 3%, 90%);
  border-bottom: 1px solid hsl(97, 3%, 80%);
}
body.dark .mp-feature.index-sub {
  background-color: hsl(97, 3%, 10%);
  border-color: hsl(97, 3%, 20%);
}
          .mp-feature.index-sub .mp-feature-inner {
  margin: auto;
  border-bottom: 2px solid hsl(97, 3%, 20%);
}
body.dark .mp-feature.index-sub .mp-feature-inner {
  border-color: hsl(97, 3%, 95%);
}

/*    .FEATURE-SLIDER    */

.feature-slider-wrap {
  float: left;
  width: 60%;
}
.feature-slider {
  padding: 0 0.5em;
}
.feature-slider .media {
  height: 540px;
}
.feature-slider .media .textBox h4 {
  font-size: 2rem;
  max-width: 700px;
}

@media only screen and (max-width: 1200px) {
  .feature-slider .media {
    height: 500px;
  }
}
@media only screen and (max-width: 1023px) {
  .feature-slider-wrap {
    width: 100%;
  }
  .feature-slider .media {
    height: 400px;
  }
  .feature-slider .media .textBox h4 {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .feature-slider .media {
    height: 320px;
  }
  .feature-slider .media .textBox h4 {
    font-size: 1.25rem;
  }
}
@media only screen and (max-width: 568px) {
  .feature-slider .media {
    height: 280px;
  }
}
@media only screen and (max-width: 420px) {
  .feature-slider .media {
    height: 250px;
  }
}
@media only screen and (max-width: 374px) {
  .feature-slider .media {
    height: 200px;
  }
}

/*    .MP-FEATURE.INDEX-SUB OVERWRITE    */

.mp-feature.index-sub .feature-slider-wrap {
  width: 100%;
  text-align: left;
}
.mp-feature.index-sub .feature-slider {
  padding: 0;
}
.mp-feature.index-sub .feature-module {
  position: relative;
  width: 100%;
  margin: auto 3.25em;
  padding-bottom: 2em;
}
.mp-feature.index-sub .media {
  float: left;
  width: 70%;
  height: 500px;
}

@media only screen and (max-width: 1023px) {
  .mp-feature.index-sub .feature-module {
    margin: auto 0.5em;
  }
  .mp-feature.index-sub .media {
    height: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .mp-feature.index-sub .feature-module {
    padding-bottom: 1em;
  }
  .mp-feature.index-sub .media {
    width: 100%;
    height: 320px;
  }
}
@media only screen and (max-width: 568px) {
  .mp-feature.index-sub .media {
    height: 280px;
  }
}
@media only screen and (max-width: 420px) {
  .mp-feature.index-sub .media {
    height: 250px;
  }
}
@media only screen and (max-width: 374px) {
  .mp-feature.index-sub .media {
    height: 200px;
  }
}


/*    .MP-FEATURE.INDEX-SUB ASIDE    */

.mp-feature.index-sub aside {
  float: left;
  position: relative;
  width: 30%;
  height: 500px;
  padding: 0.75em 1.25em;
  padding-right: 0;
}
          .mp-feature.index-sub aside .abstract {
  overflow: hidden;
  max-height: 11em;
  font-size: 1em;
  line-height: 1.75;
  font-weight: bold;
  color: hsl(97, 3%, 30%);
}
body.dark .mp-feature.index-sub aside .abstract {
  color: hsl(97, 3%, 90%);
}
.mp-feature.index-sub aside .extended {
  position: absolute;
  left: 1.25em;
  right: 0;
  bottom: 0.75em;
  margin: auto;
}
          .mp-feature.index-sub aside .header {
  font-size: 0.75em;
  line-height: 30px;
  font-weight: bold;
  border-bottom: 1px solid hsl(97, 3%, 50%);
  color: hsl(97, 3%, 50%);
}
body.dark .mp-feature.index-sub aside .header {
  border-color: hsl(97, 3%, 70%);
  color: hsl(97, 3%, 70%);
}
.mp-feature.index-sub aside li {
  margin-top: 0.75em;
}
          .mp-feature.index-sub aside li h4 {
  font-size: 0.875em;
  font-weight: bold;
  color: hsl(97, 3%, 30%);
}
          .mp-feature.index-sub aside li h4:hover {
  text-decoration: underline;
}
body.dark .mp-feature.index-sub aside li h4 {
  color: hsl(97, 3%, 90%);
}
          .mp-feature.index-sub aside li h6 {
  margin-top: auto;
  margin-bottom: 0.25em;
  color: hsl(97, 3%, 50%);
}
body.dark .mp-feature.index-sub aside li h6 {
  color: hsl(97, 3%, 70%);
}

@media only screen and (max-width: 1023px) {
  .mp-feature.index-sub .slick-prev:before,
  .mp-feature.index-sub .slick-next:before {
    display: none;
  }
  .mp-feature.index-sub aside {
    height: 400px;
  }
  .mp-feature.index-sub aside .abstract {
    max-height: 7em;
  }
  .mp-feature.index-sub aside li h4 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .mp-feature.index-sub aside {
    width: 100%;
    height: auto;
    padding: 0.5em 0;
  }
  .mp-feature.index-sub aside .abstract {}
  .mp-feature.index-sub aside .extended {
    position: static;
    width: 100%;
    margin-top: 0.5em;
  }
}

/* =============================================================================
   SLICK CSS OVERWRITE
   ========================================================================== */

.mp-feature.index     .slick-dots {
  right: 0.5rem;
  bottom: 0.75rem;
  padding-right: 11px;
  text-align: right;
}
.mp-feature.index-sub .slick-dots {
  right: 0;
  bottom: -2.1875rem;
}
.mp-feature.index-sub [dir='rtl'] .slick-next,
.mp-feature.index-sub .slick-prev {
  left: 0;
}
.mp-feature.index-sub [dir='rtl'] .slick-prev,
.mp-feature.index-sub .slick-next {
  right: 0;
}

/*    COLOR    */

          .mp-feature.index-sub .slick-prev:before,
          .mp-feature.index-sub .slick-next:before,
          .mp-feature.index-sub .slick-prev:hover:before,
          .mp-feature.index-sub .slick-prev:focus:before,
          .mp-feature.index-sub .slick-next:hover:before,
          .mp-feature.index-sub .slick-next:focus:before {
  text-shadow: none;
  color: rgba(0, 0, 0, 0.5);
  opacity: 1;
}
          .mp-feature.index-sub .slick-prev:before,
          .mp-feature.index-sub .slick-next:before {
  color: rgba(0, 0, 0, 0.25);
  opacity: .75;
}
          .mp-feature.index-sub .slick-dots li button:before {
  background-color: rgba(0, 0, 0, 0.25);
  opacity: 0.5;
}
          .mp-feature.index-sub .slick-dots li.slick-active button:before {
  background-color: rgba(255, 255, 255, 0.875);
  box-shadow: none;
  opacity: 1;
}
body.dark .mp-feature.index-sub .slick-prev:before,
body.dark .mp-feature.index-sub .slick-next:before {
  opacity: .75;
  color: #fff;
}
body.dark .mp-feature.index-sub .slick-prev:hover:before,
body.dark .mp-feature.index-sub .slick-prev:focus:before,
body.dark .mp-feature.index-sub .slick-next:hover:before,
body.dark .mp-feature.index-sub .slick-next:focus:before {
  color: #fff;
  opacity: 1;
}
body.dark .mp-feature.index-sub .slick-dots li button:before {
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0.5;
}
body.dark .mp-feature.index-sub .slick-dots li.slick-active button:before {
  background-color: rgba(255, 255, 255, 0.875);
  opacity: 1;
}

/* =============================================================================
   FEATURE-PROG-WRAP
   ========================================================================== */

/*    .FEATURE-PROG-WRAP    */

.feature-prog-wrap {
  float: left;
  width: 40%;
  padding: 0 0.5em;
}
          .feature-prog {
  position: relative;
  background-color: hsl(97, 3%, 30%);
  height: 540px;
  padding-top: 36px;
}
body.dark .feature-prog {
  background-color: hsl(97, 3%, 20%);
}

@media only screen and (max-width: 1200px) {
  .feature-prog {
    height: 500px;
  }
}
@media only screen and (max-width: 1023px) {
  .feature-prog-wrap {
    clear: both;
    margin-top: 1.5em;
    width: 100%;
  }
  .feature-prog {
    height: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .feature-prog-wrap {
    margin-top: 1em;
  }
}
@media only screen and (max-width: 567px) {
  .feature-prog-wrap {
    float: none;
    width: auto;
    margin-top: auto;
    padding-top: 1rem;
  }
  .feature-prog {
    height: 400px;
    -webkit-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
       -moz-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        -ms-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
         -o-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
            transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  }
  .feature-prog.expand {
    height: 600px;
  }
}

/*    .FEATURE-PROG-HEAD    */

.feature-prog-head {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  width: auto;
  height: 36px;
  margin: auto;
}
.feature-prog-head .header {
  position: relative;
  z-index: 10;
  float: left;
  padding: 0 1.5rem;
  font-size: 0.875em;
  line-height: 36px;
  font-weight: bold;
  color: hsl(97, 3%, 20%);
}
.feature-prog-head .header:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: -1em;
  right: 0;
  bottom: 0;
  z-index: -1;
  margin: auto;
  background-color: hsl(97, 3%, 90%);
  pointer-events: none;
  -webkit-transform: skewX(10deg);
     -moz-transform: skewX(10deg);
      -ms-transform: skewX(10deg);
       -o-transform: skewX(10deg);
          transform: skewX(10deg);
}

@media only screen and (max-width: 567px) {
 .feature-prog-head .header {
   padding: 0 1em;
  }
}

/*    .FEATURE-PROG-HEAD UL LI    */

.feature-prog-head ul {
  position: absolute;
  left: 112px;
  left: 104px;
  right: 0;
  margin: auto;
  font-size: 0.875em;
  line-height: 36px;
  font-weight: bold;
  text-align: center;
  color: hsl(97, 3%, 70%);
}
.feature-prog-head li {
  float: left;
  width: 33.3333333333%;
  cursor: pointer;
  -webkit-user-select: none;
}
.feature-prog-head li.active {
  color: hsl(97, 3%, 95%);
}

@media only screen and (max-width: 567px) {
  .feature-prog-head ul {
    left: 96px;
    padding-right: 0.25em;
  }
  .feature-prog-head li span {
    display: none;
  }
}

/*    .FEATURE-PROG-LARGE    */

.feature-prog-group {
  display: none;
}
.feature-prog-group.active {
  display: block;
}
          .feature-prog-large {
  position: relative;
  overflow: hidden;
  padding: 1em;
  background-color: hsl(97, 3%, 20%);
}
body.dark .feature-prog-large {
  background-color: hsl(97, 3%, 10%);
  box-shadow: inset 0 -1px hsl(97, 3%, 20%);
}
.feature-prog-large::after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
.feature-prog-large > a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: 1em;
  width: 160px;
  height: 90px;
}
.feature-prog-large .imgBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  /*    TEMP IMG DELETE ME LATER    */
  background-image: url(../img/thumbnail.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.feature-prog-large .textBox {
  padding-left: 11em;
  min-height: 90px;
}
.feature-prog-large .textBox h4 {
  clear: both;
  overflow: hidden;
  font-size: 1em;
  line-height: 1.375;
  /*js dot dot dot*/
  max-height: 4em;
  color: hsl(97, 3%, 90%);
}
.feature-prog-large .textBox h6 {
  position: absolute;
  bottom: 1rem;
}
.feature-prog.live .feature-prog-large {
  display: none;
}

/*    .FEATURE-PROG-LIVE    */

          .feature-prog-live {
  display: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 1em;
  background-color: hsl(97, 3%, 20%);
}
body.dark .feature-prog-live {
  background-color: hsl(97, 3%, 10%);
}
.feature-prog.live .feature-prog-live {
  display: block;
}
.feature-prog-live .media > a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 160px;
  height: 90px;
}
.feature-prog-live .imgBox iframe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  margin: auto;
}
.feature-prog-live .textBox {
  min-height: 90px;
  padding-left: 11em;
}
.feature-prog-live .textBox h4 {
  overflow: visible;
  max-height: none;
  font-size: 1em;
  font-weight: bold;
  color: hsl(97, 3%, 95%);
}
.feature-prog-live .textBox h5 {
  color: hsl(97, 3%, 70%);
}
.feature-prog-live .textBox h6 {
  position: absolute;
  bottom: 0;
}
.feature-prog-live .live-badge {
  display: inline-block;
  position: relative;
  top: -0.25em;
  width: auto;
  height: 1.5em;
  margin-left: 0.5em;
  padding: 0 0.25rem 0 1rem;
  font-size: 0.7rem;
  line-height: 1.5;
  border-radius: 3px;
  background-color: #bea22f;
  color: #fff;
}
.feature-prog-live .live-badge .live-light {
  display: block;
  position: absolute;
  top: 0;
  left: 0.3125rem;
  bottom: 0;
  width: 0.375rem;
  height: 0.375rem;
  margin: auto;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: liveBadgeLight 1500ms infinite;
     -moz-animation: liveBadgeLight 1500ms infinite;
      -ms-animation: liveBadgeLight 1500ms infinite;
       -o-animation: liveBadgeLight 1500ms infinite;
          animation: liveBadgeLight 1500ms infinite;
}

@media only screen and (max-width: 567px) {
  .feature-prog-large > a {
    width: 90px;
    height: 90px;
  }
  .feature-prog-large .imgBox {
    background-image: url(https://www.passiontimes.hk/images/tn/picon-83.jpg);
  }
  .feature-prog-large .textBox {
    padding-left: 6.625em;
  }
  .feature-prog-large .textBox h4 {
    max-height: 2.75em;
    font-size: 0.875em;
  }
  
  /*    .FEATURE-PROG-LIVE    */
  
  .feature-prog-live .media > a {
    width: 160px;
    height: 90px;
  }
  .feature-prog-live .imgBox {
    background: #000;
  }
  .feature-prog-live .textBox {
    padding-left: 11em;
  }
  .feature-prog-live .textBox h4 {
    max-height: none;
  }
  
}
@media only screen and (max-width: 420px) {
  .feature-prog-large > a {
    width: 70px;
    height: 70px;
  }
  .feature-prog-large .imgBox {
    background-image: url(https://www.passiontimes.hk/images/tn/picon-83.jpg);
  }
  .feature-prog-large .textBox {
    min-height: 70px;
    padding-left: 5.375em;
  }
  
  /*    .FEATURE-PROG-LIVE    */

  .feature-prog-live {
    padding: 0;
  }
  .feature-prog-live .media > a {
    position: relative;
    width: 100%;
    height: 0;
    margin: auto;
    padding-top: 10rem;
  }
  .feature-prog-live .imgBox {
    background: #000;
  }
  .feature-prog-live .textBox {
    min-height: 0;
    padding: 0.5em 1em;
    background-color: #000;
    border-top: 2px solid #bea22f;
    border-bottom: 1px solid hsl(97, 3%, 20%);
  }
  .feature-prog-live .textBox h4 {
    font-size: 0.875em;
  }
  .feature-prog-live .textBox h5 {
    display: none;
  }
  .feature-prog-live .textBox h6 {
    position: static;
  }
}

/*    .FEATURE-PROG-LIST    */

.feature-prog-list {
  position: absolute;
  top: 118px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
}
          .feature-prog-list ul {
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 1em 0;
  pointer-events: auto;
  background-color: hsl(97, 3%, 15%);
}
body.dark .feature-prog-list ul {
  background-color: hsl(97, 3%, 10%);
}
.feature-prog-list li {
  clear: both;
  position: relative;
  padding-left: 3em;
  padding-right: 5em;
}
.feature-prog-list li ~ li {
  margin-top: 1em;
}
.feature-prog-list li:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin: auto;
  width: 3em;
  height: 1em;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  color: hsl(97, 3%, 70%);
}
.feature-prog-list li:nth-child(1):before { content: '1'; }
.feature-prog-list li:nth-child(2):before { content: '2'; }
.feature-prog-list li:nth-child(3):before { content: '3'; }
.feature-prog-list li:nth-child(4):before { content: '4'; }
.feature-prog-list li:nth-child(5):before { content: '5'; }
.feature-prog-list li:nth-child(6):before { content: '6'; }
.feature-prog-list li:nth-child(7):before { content: '7'; }
.feature-prog-list li:nth-child(8):before { content: '8'; }
.feature-prog-list li:nth-child(9):before { content: '9'; }
.feature-prog-list li:nth-child(10):before { content: '10'; }
.feature-prog-list li .textBox h4 {
  font-weight: normal;
  color: hsl(97, 3%, 80%);
}
.feature-prog-list li .textBox h6.caption {
  margin-top: 0.25em;
}
.feature-prog-list li .textBox h6 .time {
  position: absolute;
  top: 0;
  right: 1rem;
  margin: auto;
}

@media only screen and (max-width: 567px) {
  .feature-prog-list li {
    padding-right: 1em;
  }
  .feature-prog-list li .textBox h6 .time {
    position: static;
  }
}
@media only screen and (max-width: 420px) {
  .feature-prog-list {
    top: 102px;
  }
  .feature-prog-list ul {
    padding-bottom: 3.25em;
  }
  
  /*    .FEATURE-PROG.LIVE OVERWRITE    */

  .feature-prog.live .feature-prog-list {
    top: 10rem;
  }
  .feature-prog.live .feature-prog-list ul {
    top: 90px;
  }
}

/*    .FEATURE-PROG-MORE    */

          .feature-prog-more {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  margin: auto;
  height: 36px;
  background-color: hsl(97, 3%, 20%);
}
body.dark .feature-prog-more {
  background-color: hsl(97, 3%, 20%);
}
.feature-prog-more i {
  display: block;
  font-size: 1.3125em;
  line-height: 36px;
  text-align: center;
  color: hsl(97, 3%, 70%);
  -webkit-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
     -moz-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
      -ms-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
       -o-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
          transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.feature-prog-more.active i {
  -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
       -o-transform: rotate(180deg);
          transform: rotate(180deg);
}

@media only screen and (max-width: 567px) {
  .feature-prog-more {
    display: block;
  }
}


/* =============================================================================
   COPIED DIRECTLY FROM ARTICLE.CSS (PROG TABLE)
   ========================================================================== */

/*    progTable    */

.utilityMenu {}
.utilityMenu ul {
  overflow: hidden;
  margin-bottom: 0.5em;
  text-align: center;
}
body.dark .utilityMenu ul {
  background-color: hsl(97, 3%, 20%);
}
.utilityMenu ul > li {
  float: left;
  font-size: 0.675em;
  line-height: 2.25;
  font-weight: bold;
  text-align: center;
  color: hsl(97, 3%, 60%);
  border-radius: 3px;
  cursor: pointer;
  -webkit-user-select: none;
}
.progTable .utilityMenu ul > li {
  width: 14.285714286%;
}
.utilityMenu ul > li:hover {
  background: hsl(97, 3%, 30%);
}

/*    .progTable.day1 .utilityMenu ul > li ACTIVE    */

.progTable.day1 .utilityMenu ul > li:nth-child(2) {
  background-color: #bea22f;
  color: hsl(97, 3%, 95%);
}
.progTable.day2 .utilityMenu ul > li:nth-child(3) {
  background-color: #bea22f;
  color: hsl(97, 3%, 95%);
}
.progTable.day3 .utilityMenu ul > li:nth-child(4) {
  background-color: #bea22f;
  color: hsl(97, 3%, 95%);
}
.progTable.day4 .utilityMenu ul > li:nth-child(5) {
  background-color: #bea22f;
  color: hsl(97, 3%, 95%);
}
.progTable.day5 .utilityMenu ul > li:nth-child(6) {
  background-color: #bea22f;
  color: hsl(97, 3%, 95%);
}
.progTable.day6 .utilityMenu ul > li:nth-child(7) {
  background-color: #bea22f;
  color: hsl(97, 3%, 95%);
}
.progTable.day7 .utilityMenu ul > li:nth-child(1) {
  background-color: #bea22f;
  color: hsl(97, 3%, 95%);
}

/*    .progTable .vAlign .media    */

.progTable {
  border-top: none;
  background-color: hsl(97, 3%, 20%);
  padding: 0 1rem 0.75em;
}
.progTable .sectionHead {
  border: none;
  padding-left: 0.5em;
  color: hsl(97, 3%, 95%);
}
.progTable .vAlign .media {
  width: 100%;
  padding: 0.75em 0;
}
.progTable .vAlign .media > a {
  display: table-cell;
  width: 50px;
}
.progTable .vAlign .imgBox {
  width: 50px;
  height: 50px;
}
.progTable .vAlign .textBox h4 {
  color: hsl(97, 3%, 95%);
}

/* =============================================================================
   OVERWRITE PROG TABLE FROM ARTICLE.CSS
   ========================================================================== */

body.index      .utilityMenu ul {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0.5em 1em;
  background-color: hsl(97, 3%, 20%);
}
body.index.dark .utilityMenu ul {
  background-color: hsl(97, 3%, 10%);
  box-shadow: inset 0 -1px hsl(97, 3%, 20%);
}

/*    .PROGTABLE    */

body.index      .progTable {
  overflow: hidden;
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  margin: auto;
  padding: 0;
  background-color: hsl(97, 3%, 15%);
}
body.index.dark .progTable {
  background-color: hsl(97, 3%, 10%);
}
body.index .progTable .vAlign {
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  margin: auto;
  padding: 1em;
  padding-top: 0.25em;
}
body.index .progTable .vAlign .media > a,
body.index .progTable .vAlign .media .imgBox {
  width: 60px;
  height: 60px;
}
body.index .progTable .vAlign .textBox h4 {
  font-size: 1em;
  color: hsl(97, 3%, 90%);
}
body.index .progTable .vAlign .textBox h6 {
  font-size: 0.75rem;
}

@media only screen and (max-width: 568px) {
  body.index .progTable .vAlign .media > a,
  body.index .progTable .vAlign .media .imgBox {
    width: 50px;
    height: 50px;
  }
  body.index .progTable .vAlign .textBox h4 {
    font-size: 0.875rem;
  }
}

/* =============================================================================
   COPIED DIRECTLY FROM ARTICLE.CSS (PROG TABLE)
   ========================================================================== */

.progTable .media {display: none;}
.progTable.day1 .media.d1 {display: block;}
.progTable.day2 .media.d2 {display: block;}
.progTable.day3 .media.d3 {display: block;}
.progTable.day4 .media.d4 {display: block;}
.progTable.day5 .media.d5 {display: block;}
.progTable.day6 .media.d6 {display: block;}
.progTable.day7 .media.d7 {display: block;}


/* =============================================================================
   .mp-section
   ========================================================================== */

.mp-section {
  position: relative;
  margin-top: 2rem;
}
.mp-section > .maxWrapper {
  position: relative;
}

/*    .MP-SECTION-ROW    */

          .mp-section-row::after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
          .mp-section-row {
  position: relative;
  width: 100%;
  border-top: 2px solid hsl(97, 3%, 80%);
}
body.dark .mp-section-row {
  border-color: hsl(97, 3%, 95%);
}

/*    .MP-SECTION-HEADER    */

          .mp-section-header {
  float: left;
  width: 100%;
  margin: 1.5rem auto 0.25rem;
  font-size: 1.5em;
  line-height: 1;
  font-weight: bold;
  color: hsl(97, 3%, 20%);
  -webkit-user-select: none;
}
body.dark .mp-section-header {
  color: hsl(97, 3%, 95%);
}

/*    .MP-SECTION-HIDEBTN    */

             .mp-section-hideBtn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  margin: 1.125rem auto 0;
  width: 2rem;
  height: 2rem;
  text-align: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px hsl(97, 3%, 50%);
  color: hsl(97, 3%, 50%);
  cursor: pointer;
  -webkit-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
     -moz-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
      -ms-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
       -o-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
          transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
body.dark    .mp-section-hideBtn {
  color: hsl(97, 3%, 70%);
  box-shadow: inset 0 0 0 2px hsl(97, 3%, 70%);
}
.hide-module .mp-section-hideBtn {
  -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
       -o-transform: rotate(180deg);
          transform: rotate(180deg);
}
.mp-section-hideBtn i {
  width: 2rem;
  height: 2rem;
  font-size: 1.25rem;
  line-height: 1.875rem;
}

/*    .MP-SECTION-MODULE-WRAP    */

.mp-section-module-wrap {
  clear: both;
  position: relative;
  margin: auto -0.5rem;
}
.mp-section-module-wrap::after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
.hide-module .mp-section-module-wrap {
  display: none;
}
@media only screen and (max-width: 767px) {
  .mp-section-module-wrap {
    margin: auto;
  }
  .mp-section-header {
    font-size: 1.3125rem;
  }
}

/*    .MP-SECTION.LAYOUT1 FLOAT FIX    */

.mp-section.layout1 .mp-section-module:nth-child(9),
.mp-section.layout1 .mp-section-module:nth-child(4) {
  clear: both;
}
.mp-section.layout2 .mp-section-module:nth-child(12),
.mp-section.layout2 .mp-section-module:nth-child(9),
.mp-section.layout2 .mp-section-module:nth-child(4) {
  clear: both;
}
.mp-section.layout3 .mp-section-module:nth-child(8),
.mp-section.layout3 .mp-section-module:nth-child(4) {
  clear: both;
}
.mp-section.layout4 .mp-section-module:nth-child(13),
.mp-section.layout4 .mp-section-module:nth-child(9),
.mp-section.layout4 .mp-section-module:nth-child(5) {
  clear: both;
}
.mp-section.layout5 .mp-section-module:nth-child(5) {
  clear: both;
}
.mp-section.layout6 .mp-section-module:nth-child(9),
.mp-section.layout6 .mp-section-module:nth-child(4) {
  clear: both;
}
@media only screen and (max-width: 1023px) {
  .mp-section.layout5 .mp-section-module:nth-child(5),
  .mp-section.layout4 .mp-section-module:nth-child(5),
  .mp-section.layout3 .mp-section-module:nth-child(8),
  .mp-section.layout2 .mp-section-module:nth-child(4),
  .mp-section.layout1 .mp-section-module:nth-child(4) {
    clear: none;
  }
  .mp-section.layout5 .mp-section-module:nth-child(6),
  .mp-section.layout4 .mp-section-module:nth-child(6),
  .mp-section.layout4 .mp-section-module:nth-child(4),
  .mp-section.layout1 .mp-section-module:nth-child(3),
  .mp-section.layout1 .mp-section-module:nth-child(6),
  .mp-section.layout2 .mp-section-module:nth-child(6),
  .mp-section.layout2 .mp-section-module:nth-child(3),
  .mp-section.layout3 .mp-section-module:nth-child(7) {
    clear: both;
  }
  .mp-section.layout5 .mp-section-module.ch80px:nth-child(5) .media,
  .mp-section.layout3 .mp-section-module.ch80px:nth-child(8) .media {
    height: 78px;
  }
  .mp-section.layout5 .mp-section-module.ch80px:nth-child(5) .media:last-child,
  .mp-section.layout3 .mp-section-module.ch80px:nth-child(8) .media:last-child {
    height: 80px;
  }
}

/*    .MP-SECTION-MODULE    */

.mp-section-module {
  float: left;
  width: 100%;
  margin-top: 1rem;
  padding: 0 0.5rem;
}

/*    .MP-SECTION-MODULE .MEDIA    */

.mp-section-module .media {}
.mp-section .media .imgBox {
  /*TEMP IMG*/
  background-image: url(../img/news5.jpg);
  background-size: cover;
  background-position: center;
  -webkit-filter: grayscale(0.25) contrast(1.125);
          filter: grayscale(0.25) contrast(1.125);
}
.mp-section .media .textBox h4 {
  overflow: hidden;
  max-height: 4em;
  /*js dot dot dot*/
}

/*    TEMP IMG DELETE ME LATER 尐相 ratio 既係 3 : 2 (padding top 66.66%)    */

.mp-section-module.imgTop .media .imgBox {
  background-image: url(../img/news5.jpg);
}
.mp-section-module:nth-child(2) .media .imgBox {
  background-image: url(../img/news2.jpg);
}
.mp-section-module:nth-child(3) .media .imgBox {
  background-image: url(../img/news3.jpg);
}
.mp-section-module:nth-child(4) .media .imgBox {
  background-image: url(../img/news4.jpg);
}
.mp-section-module:nth-child(5) .media .imgBox {
  background-image: url(../img/news5.jpg);
}
.mp-section-module:nth-child(6) .media .imgBox {
  background-image: url(../img/news6.jpg);
}
.mp-section-module:nth-child(7) .media .imgBox {
  background-image: url(../img/news7.jpg);
}
.mp-section-module:nth-child(8) .media .imgBox {
  background-image: url(../img/news8.jpg);
}
.mp-section-module.imgTop .media .textBox {
  padding: 0.5rem 0.75rem;
}
.mp-section-module.text .media .textBox h4,
.mp-section-module.imgTop .media .textBox h4 {
  margin-top: 0;
  line-height: 1.375rem;
}
.mp-section-module.text.large .media .textBox h4 {
  line-height: 1.25em;
}
.mp-section-module.imgTop .media .textBox h6 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 0.75rem;
}
.mp-section-module.ch80px .media {
  height: 80px;
}
.mp-section-module.ch92px .media {
  height: 92px;
}
.mp-section-module.ch100px .media {
  height: 100px;
}
.mp-section-module.ch80px .media + *,
.mp-section-module.ch92px .media + *,
.mp-section-module.ch100px .media + * {
  margin-top: 0.75rem;
}
.mp-section-module.ch80px .media .textBox h4 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-section-module.ch100px .media .textBox p {
  display: none;
}

/*    .MP-SECTION-MODULE.TEXT    */

.mp-section-module.text.ch80px .media:nth-child(n+5) {
  display: none;
}
.mp-section-module.text.ch92px .media:nth-child(n+4),
.mp-section-module.text.ch100px .media:nth-child(n+4) {
  display: none;
}

/*    .MP-SECTION-MODULE WIDTH    */

.mp-section-module.w10p {width: 10%;}
.mp-section-module.w20p {width: 20%;}
.mp-section-module.w25p {width: 25%;}
.mp-section-module.w26p {width: 26.6666666666%;}
.mp-section-module.w30p {width: 30%;}
.mp-section-module.w33p {width: 33.3333333333%;}
.mp-section-module.w35p {width: 35%;}
.mp-section-module.w40p {width: 40%;}
.mp-section-module.w46p {width: 46.6666666666%;}
.mp-section-module.w50p {width: 50%;}
.mp-section-module.w60p {width: 60%;}
.mp-section-module.w66p {width: 66.6666666666%;}
.mp-section-module.w70p {width: 70%;}
.mp-section-module.w75p {width: 75%;}
.mp-section-module.w80p {width: 80%;}
.mp-section-module.w90p {width: 90%;}
.mp-section-module.w100p {width: 100%;}
@media only screen and (max-width: 1140px) {
  .mp-section-module.hide-1140 {display: none;}
  .mp-section-module.w10p-1140 {width: 10%;}
  .mp-section-module.w20p-1140 {width: 20%;}
  .mp-section-module.w25p-1140 {width: 25%;}
  .mp-section-module.w26p-1140 {width: 26.6666666666%;}
  .mp-section-module.w30p-1140 {width: 30%;}
  .mp-section-module.w33p-1140 {width: 33.3333333333%;}
  .mp-section-module.w35p-1140 {width: 35%;}
  .mp-section-module.w40p-1140 {width: 40%;}
  .mp-section-module.w46p-1140 {width: 46.6666666666%;}
  .mp-section-module.w50p-1140 {width: 50%;}
  .mp-section-module.w60p-1140 {width: 60%;}
  .mp-section-module.w66p-1140 {width: 66.6666666666%;}
  .mp-section-module.w70p-1140 {width: 70%;}
  .mp-section-module.w75p-1140 {width: 75%;}
  .mp-section-module.w80p-1140 {width: 80%;}
  .mp-section-module.w90p-1140 {width: 90%;}
  .mp-section-module.w100p-1140 {width: 100%;}
}
@media only screen and (max-width: 1023px) {
  .mp-section-module.hide-1140 {display: block;}
  .mp-section-module.hide-1023 {display: none;}
  .mp-section-module.w10p-1023 {width: 10%;}
  .mp-section-module.w20p-1023 {width: 20%;}
  .mp-section-module.w25p-1023 {width: 25%;}
  .mp-section-module.w26p-1023 {width: 26.6666666666%;}
  .mp-section-module.w30p-1023 {width: 30%;}
  .mp-section-module.w33p-1023 {width: 33.3333333333%;}
  .mp-section-module.w35p-1023 {width: 35%;}
  .mp-section-module.w40p-1023 {width: 40%;}
  .mp-section-module.w46p-1023 {width: 46.6666666666%;}
  .mp-section-module.w50p-1023 {width: 50%;}
  .mp-section-module.w60p-1023 {width: 60%;}
  .mp-section-module.w66p-1023 {width: 66.6666666666%;}
  .mp-section-module.w70p-1023 {width: 70%;}
  .mp-section-module.w75p-1023 {width: 75%;}
  .mp-section-module.w80p-1023 {width: 80%;}
  .mp-section-module.w90p-1023 {width: 90%;}
  .mp-section-module.w100p-1023 {width: 100%;}
}
@media only screen and (max-width: 767px) {
  .mp-section-module.w10p {width: 100%;}
  .mp-section-module.w20p {width: 100%;}
  .mp-section-module.w25p {width: 100%;}
  .mp-section-module.w26p {width: 100%;}
  .mp-section-module.w30p {width: 100%;}
  .mp-section-module.w33p {width: 100%;}
  .mp-section-module.w40p {width: 100%;}
  .mp-section-module.w46p {width: 100%;}
  .mp-section-module.w50p {width: 100%;}
  .mp-section-module.w60p {width: 100%;}
  .mp-section-module.w66p {width: 100%;}
  .mp-section-module.w70p {width: 100%;}
  .mp-section-module.w75p {width: 100%;}
  .mp-section-module.w80p {width: 100%;}
  .mp-section-module.w90p {width: 100%;}
}

/*    .MP-SECTION-MODULE HEIGHT    */

.mp-section-module.h400px .media {height: 400px;}
.mp-section-module.h350px .media {height: 350px;}
.mp-section-module.h324px .media {height: 324px;}
.mp-section-module.h300px .media {height: 300px;}
.mp-section-module.h250px .media {height: 250px;}
.mp-section-module.h200px .media {height: 200px;}
.mp-section-module.h175px .media {height: 175px;}
.mp-section-module.h167px .media {height: 167px;}
.mp-section-module.h140px .media {height: 140px;}
.mp-section-module.h250px .media .textBox p,
.mp-section-module.h300px .media .textBox p {
  display: none;
}
/* .mp-section-module.h324px .media .textBox p { */


@media only screen and (max-width: 1140px) {
  .mp-section-module.h400px-1140 .media {height: 400px;}
  .mp-section-module.h350px-1140 .media {height: 350px;}
  .mp-section-module.h324px-1140 .media {height: 324px;}
  .mp-section-module.h300px-1140 .media {height: 300px;}
  .mp-section-module.h250px-1140 .media {height: 250px;}
  .mp-section-module.h200px-1140 .media {height: 200px;}
  .mp-section-module.h175px-1140 .media {height: 175px;}
  .mp-section-module.h167px-1140 .media {height: 167px;}
  .mp-section-module.h140px-1140 .media {height: 140px;}
  .mp-section-module.h250px-1140 .media .textBox p,
  .mp-section-module.h300px-1140 .media .textBox p,
  .mp-section-module.h324px-1140 .media .textBox p {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .mp-section-module.h400px-1023 .media {height: 400px;}
  .mp-section-module.h350px-1023 .media {height: 350px;}
  .mp-section-module.h324px-1023 .media {height: 324px;}
  .mp-section-module.h300px-1023 .media {height: 300px;}
  .mp-section-module.h250px-1023 .media {height: 250px;}
  .mp-section-module.h200px-1023 .media {height: 200px;}
  .mp-section-module.h175px-1023 .media {height: 175px;}
  .mp-section-module.h167px-1023 .media {height: 167px;}
  .mp-section-module.h140px-1023 .media {height: 140px;}
  .mp-section-module.h250px-1023 .media .textBox p,
  .mp-section-module.h300px-1023 .media .textBox p,
  .mp-section-module.h324px-1023 .media .textBox p {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .mp-section-module {
    padding: 0;
    margin-top: 0.75rem;
  }
  .mp-section-module.overlap.h175px .media,
  .mp-section-module.overlap.h200px .media,
  .mp-section-module.overlap.h250px .media,
  .mp-section-module.overlap.h300px .media,
  .mp-section-module.overlap.h324px .media,
  .mp-section-module.overlap.h350px .media,
  .mp-section-module.overlap.h400px .media,
  .mp-section-module.text.large.h175px .media,
  .mp-section-module.text.large.h200px .media,
  .mp-section-module.text.large.h250px .media,
  .mp-section-module.text.large.h300px .media,
  .mp-section-module.text.large.h324px .media,
  .mp-section-module.text.large.h350px .media,
  .mp-section-module.text.large.h400px .media {
    height: 240px;
  }
  .mp-section-module.ch80px .media .textBox h4 {
    white-space: normal;
  }
  .mp-section-module.ch80px.text .media,
  .mp-section-module.ch92px.text .media,
  .mp-section-module.ch100px.text .media {
    padding-bottom: 2.125rem;
    height: auto !important;
  }
  .mp-section-module.imgTop.h175px .media,
  .mp-section-module.imgTop.h200px .media,
  .mp-section-module.imgTop.h250px .media,
  .mp-section-module.imgTop.h300px .media,
  .mp-section-module.imgTop.h324px .media,
  .mp-section-module.imgTop.h350px .media,
  .mp-section-module.imgTop.h400px .media {
    height: auto;
    min-height: 74px;
  }
  .mp-section-module.imgTop .media .imgBox {
    position: absolute;
    right: 0;
    z-index: 10;
    top: 0;
    bottom: auto;
    left: auto;
    width: 108px;
    height: 72px;
    padding-top: 0;
  }
  .mp-section-module.imgTop .media .textBox {
    padding-bottom: 0.75rem;
  }
  .mp-section-module.imgTop .media .textBox h4 {
    padding-right: 7.75rem;
  }
  .mp-section-module.imgTop .media .textBox p {
    padding-right: 32%;
    display: none;
  }
  .mp-section-module.imgTop .media .textBox h6 {
    position: static;
    margin-bottom: auto;
    margin-top: 0.5rem;
    padding: 0;
  }
  .mp-section-module.text.large .media h4,
  .mp-section-module.overlap .media .textBox h4 {
    font-size: 1.25rem;
  }
  .mp-section button {
    width: 100%;
    margin-top: 0.25rem;
  }
}
@media only screen and (max-width: 413px) {
  .mp-section-module.overlap.h175px .media,
  .mp-section-module.overlap.h200px .media,
  .mp-section-module.overlap.h250px .media,
  .mp-section-module.overlap.h300px .media,
  .mp-section-module.overlap.h324px .media,
  .mp-section-module.overlap.h350px .media,
  .mp-section-module.overlap.h400px .media,
  .mp-section-module.text.large.h175px .media,
  .mp-section-module.text.large.h200px .media,
  .mp-section-module.text.large.h250px .media,
  .mp-section-module.text.large.h300px .media,
  .mp-section-module.text.large.h324px .media,
  .mp-section-module.text.large.h350px .media,
  .mp-section-module.text.large.h400px .media {
    height: 220px;
  }
}
@media only screen and (max-width: 374px) {
  .mp-section-module.overlap.h175px .media,
  .mp-section-module.overlap.h200px .media,
  .mp-section-module.overlap.h250px .media,
  .mp-section-module.overlap.h300px .media,
  .mp-section-module.overlap.h324px .media,
  .mp-section-module.overlap.h350px .media,
  .mp-section-module.overlap.h400px .media,
  .mp-section-module.text.large.h175px .media,
  .mp-section-module.text.large.h200px .media,
  .mp-section-module.text.large.h250px .media,
  .mp-section-module.text.large.h300px .media,
  .mp-section-module.text.large.h324px .media,
  .mp-section-module.text.large.h350px .media,
  .mp-section-module.text.large.h400px .media {
    height: 200px;
  }
  .mp-section-module.imgTop .media .textBox h4 {
    padding-right: 7.75rem;
    font-size: 0.9rem;
  }
}

/*    .MP-SECTION-MODULE.RECTAD300    */

          .mp-section-ad .media {
  position: relative;
  background-color: hsl(97, 3%, 92%);
  box-shadow: inset 0 0 0 1px hsl(97, 3%, 80%);
  border: none;
}
          .mp-section-ad .media > a {
  display: block;
}
body.dark .mp-section-ad .media {
  background-color: hsl(97, 3%, 10%);
  box-shadow: inset 0 0 0 1px hsl(97, 3%, 20%);
}
.mp-section-ad .adWrap img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  -webkit-transform: translateY(-0.5em);
     -moz-transform: translateY(-0.5em);
      -ms-transform: translateY(-0.5em);
       -o-transform: translateY(-0.5em);
          transform: translateY(-0.5em);
}
.mp-section-ad .rectAd250 {
  display: none;
}
.mp-section-ad .rectAd250 .adWrap img {
  max-width: 250px;
  max-height: 250px;
}
.mp-section-ad .rectAd300 .adWrap img {
  max-width: 300px;
  max-height: 250px;
}
.mp-section-ad .rectAd680 .adWrap img {
  max-width: 680px;
  max-height: 125px;
}
.mp-section-ad .rectAd728 .adWrap img {
  max-width: 728px;
//  max-height: 90px;
}

/*.mp-section-ad .adInfo*/

.mp-section-ad .adInfo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 10px;
  padding-bottom: 12px;
  font-size: 0.75em;
  text-align: center;
  line-height: 1;
  color: hsl(97, 3%, 60%);
}

@media only screen and (max-width: 767px) {
  .mp-section-ad .rectAd250 .adWrap {
    padding: 0.5rem 0;
  }
  .mp-section-module.mp-section-ad .media .adWrap img {
    position: static;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .mp-section-module.mp-section-ad.h175px .media,
  .mp-section-module.mp-section-ad.h200px .media,
  .mp-section-module.mp-section-ad.h250px .media,
  .mp-section-module.mp-section-ad.h300px .media,
  .mp-section-module.mp-section-ad.h324px .media,
  .mp-section-module.mp-section-ad.h350px .media,
  .mp-section-module.mp-section-ad.h400px .media {
    height: auto;
  }
}

@media only screen and (max-width: 1024px) {
  .mp-section-ad .rectAd300 {
    display: none;
  }
  .mp-section-ad .rectAd250 {
    display: block;
  }
}
@media only screen and (max-width: 768px) {
  .mp-section-module.googleAd728 {
    display: none;
  }
}
@media only screen and (max-width: 568px) {
  .mp-section-ad.rectAd300-wrap .rectAd300 {
    padding-bottom: 1rem;
  }
  .mp-section-ad .adInfo {
    display: none;
  }
  .mp-section-ad .bannerAd {
    padding: 0;
    box-shadow: none;
  }
}

/* =============================================================================
   .MP-SECTION.MP-HOTPOST
   ========================================================================== */

.hotPost-wrap::after,
.mp-hotPost-wrap::after,
.mp-section-borderNav ul::after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}

.mp-hotPost .mp-section-module.googleAd728 {
  padding: 0;
}
.mp-hotPost-wrap {
  clear: both;
  padding-left: 9rem;
}

/*    .MP-SECTION-BORDERNAV (ACTUALLY...IT IS A DROPDOWN NAV...)    */

.mp-section-borderNav {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 3.5rem;
  /*    TRANSITION    */
  -webkit-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5);
     -moz-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5);
      -ms-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5);
       -o-transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5);
          transition: all 300ms cubic-bezier(0.7, -0.5, 0.3, 1.5);
}
.mp-section-borderNav ul {
  margin-top: 0.5rem;
}
.mp-section-borderNav ul > li {
  width: auto;
  padding: 0;
  font-size: 0.875em;
  line-height: 36px;
  font-weight: bold;
  color: hsl(97, 3%, 50%);
  cursor: pointer;
  -webkit-user-select: none;
}
.mp-hotPost-wrap .hotPost-wrap {
  float: left;
  width: 50%;
  padding: 0 0.5rem;
}
.mp-hotPost-wrap button {
  display: none;
}
.mp-section-header > i,
.mp-section-borderNav ul > li {
  /*    TRANSITION    */
  -webkit-transition: all 200ms ease;
     -moz-transition: all 200ms ease;
      -ms-transition: all 200ms ease;
       -o-transition: all 200ms ease;
          transition: all 200ms ease;
}
@media only screen and (min-width: 1024px) {
  .mp-section.mp-hotPost .mp-section-header > i {
    display: none;
  }
            .mp-section-borderNav ul > li:hover {
    color: hsl(97, 3%, 50%);
  }
  body.dark .mp-section-borderNav ul > li:hover {
    color: hsl(97, 3%, 95%);
  }
            .mp-section-borderNav ul > li.active {
    text-decoration: underline;
    color: #bea22f;
  }
  body.dark .mp-section-borderNav ul > li.active {
    color: hsl(97, 3%, 95%);
  }
}
@media only screen and (max-width: 1023px) {
  .mp-hotPost .mp-section-header {
    cursor: pointer;
  }
  .mp-section.mp-hotPost .mp-section-header.active > i {
    -webkit-transform: rotate(180deg) translateY(-0.075em) scale(1.125);
       -moz-transform: rotate(180deg) translateY(-0.075em) scale(1.125);
        -ms-transform: rotate(180deg) translateY(-0.075em) scale(1.125);
         -o-transform: rotate(180deg) translateY(-0.075em) scale(1.125);
            transform: rotate(180deg) translateY(-0.075em) scale(1.125);
  }

  .mp-hotPost-wrap {
    padding-left: 0;
  }
  
  /*    .MP-SECTION-BORDERNAV    */
  
            .mp-section-borderNav {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 3.75rem;
    right: auto;
    z-index: 10;
    margin: auto;
    max-width: 320px;
    padding: 0.5em 0;
    font-size: 1rem;
    background-color: #fff;
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1), 0 0.5em 2em rgba(0, 0, 0, 0.1);
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    -webkit-transform: scale(0.75) translateY(-2em);
       -moz-transform: scale(0.75) translateY(-2em);
        -ms-transform: scale(0.75) translateY(-2em);
         -o-transform: scale(0.75) translateY(-2em);
            transform: scale(0.75) translateY(-2em);
    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;
        -ms-transform-origin: top left;
         -o-transform-origin: top left;
            transform-origin: top left;
  }
            .mp-section-borderNav.active {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
  body.dark .mp-section-borderNav {
    background-color: hsl(97, 3%, 20%);
  }
            .mp-section-borderNav ul {
    margin-top: auto;
  }
            .mp-section-borderNav ul > li {
    min-width: 180px;
    padding: 0 1em;
    font-size: 0.875rem;
    line-height: 2.5;
    color: hsl(97, 3%, 30%);
  }
  body.dark .mp-section-borderNav ul > li {
    color: hsl(97, 3%, 70%);
  }
            .mp-section-borderNav ul > li:hover {
    background-color: hsl(97, 3%, 95%);
  }
  body.dark .mp-section-borderNav ul > li:hover {
    background-color: hsl(97, 3%, 20%);
    color: hsl(97, 3%, 95%);
  }
            .mp-section-borderNav ul > li.active,
  body.dark .mp-section-borderNav ul > li.active {
    background-color: #bea22f;
    color: #fff;
  }
}
@media only screen and (max-width: 767px) {
  .mp-hotPost-wrap {
    padding-top: 0.25rem;
  }
  .hotPost-wrap {
    width: 100%;
    padding: 0;
  }
            .hotPost-wrap + .hotPost-wrap .media:first-child {
    border-top: 1px solid hsl(97, 3%, 80%);
  }
  body.dark .hotPost-wrap + .hotPost-wrap .media:first-child {
    border-color: hsl(97, 3%, 20%);
  }
  .hotPost-wrap      .media:nth-child(n+4),
  .hotPost-wrap      + .hotPost-wrap {
    display: none;
  }
  .hotPost-wrap.more .media:nth-child(n+4),
  .hotPost-wrap.more + .hotPost-wrap {
    display: block;
  }
  .mp-hotPost-wrap button {
    float: left;
    display: block;
    margin-top: 0.5rem;
  }
  .hotPost-wrap.more ~ button {
    display: none;
  }
  .mp-section.mp-hotPost .mp-section-module-wrap .mp-section-module.w80p {
    margin-left: auto;
  }
}
@media only screen and (max-width: 420px) {
  body.section-toggle-active {
    overflow: hidden;
  }
      .section-toggle-active .dd-overlay {
    opacity: 0.5;
    z-index: 1001;
    pointer-events: auto;
  }
  .mp-section-borderNav {
    position: fixed;
    max-height: 75%;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    max-width: none;
    -webkit-transform-origin: bottom center;
       -moz-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
         -o-transform-origin: bottom center;
            transform-origin: bottom center;
    -webkit-transform: scale3d(0.975, 0.975, 0.975) translateY(25%);
       -moz-transform: scale3d(0.975, 0.975, 0.975) translateY(25%);
        -ms-transform: scale3d(0.975, 0.975, 0.975) translateY(25%);
         -o-transform: scale3d(0.975, 0.975, 0.975) translateY(25%);
            transform: scale3d(0.975, 0.975, 0.975) translateY(25%);
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    /*    TRANSITION    */
    -webkit-transition: all 300ms ease;
       -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
         -o-transition: all 300ms ease;
            transition: all 300ms ease;
  }
  .mp-section-borderNav.active {
    -webkit-transform: scale(1) translateY(0);
       -moz-transform: scale(1) translateY(0);
        -ms-transform: scale(1) translateY(0);
         -o-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
  .mp-section-borderNav ul > li {
    font-size: 1rem;
  }
}

/* =============================================================================
   ARTICLE PAGE HOTPOST STYLING OVERWRITE
   ========================================================================== */

/*    BODY.ARTICLE .MP-SECTION-ROW    */

body.article .mp-section-row {
  border-top: none;
}

/*    BODY.ARTICLE .MP-SECTION.MP-HOTPOST    */

body.article      .mp-hotPost {
  margin: auto;
  padding: 2em 0 2.5em;
  background-color: hsl(97, 3%, 92%);
  border-top: 1px solid hsl(97, 3%, 80%);
}
@media only screen and (max-width: 1023px) {
  body.article      .mp-hotPost {
    padding: 1em 0 2.5em;
  }
}
body.article.dark .mp-hotPost {
  background-color: hsl(97, 3%, 10%);
  border-color: hsl(97, 3%, 20%);
}
body.article      .mp-hotPost .mp-section-ad .media {
  border-top: 1px solid hsl(97, 3%, 80%);
  box-shadow: none;
}
body.article.dark .mp-hotPost .mp-section-ad .media {
  border-color: hsl(97, 3%, 20%);
}
body.article      .mp-hotPost .mp-section-module.h140px .media {
  height: auto;
}
body.article      .mp-hotPost .mp-section-ad .adWrap img {
  position: static;
  margin-top: 0.75rem;
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
}
body.article      .mp-hotPost .mp-section-ad .adInfo {
  position: static;
  padding-bottom: 0;
}

/* =============================================================================
   .HOTPOST .MEDIA
   ========================================================================== */

.hotPost .media {
  padding: 1.25rem 6.625rem 1.25rem 3.25rem;
}
.hotPost .media::before {
  content: "1";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 2.5rem;
  height: 2rem;
  margin: auto;
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  font-weight: lighter;
  color: hsl(97, 3%, 50%);
}
.hotPost.hotPost-1to5 .media:nth-child(2)::before {
  content: "2";
}
.hotPost.hotPost-1to5 .media:nth-child(3)::before {
  content: "3";
}
.hotPost.hotPost-1to5 .media:nth-child(4)::before {
  content: "4";
}
.hotPost.hotPost-1to5 .media:nth-child(5)::before {
  content: "5";
}
.hotPost.hotPost-6to10 .media:nth-child(1)::before {
  content: "6";
}
.hotPost.hotPost-6to10 .media:nth-child(2)::before {
  content: "7";
}
.hotPost.hotPost-6to10 .media:nth-child(3)::before {
  content: "8";
}
.hotPost.hotPost-6to10 .media:nth-child(4)::before {
  content: "9";
}
.hotPost.hotPost-6to10 .media:nth-child(5)::before {
  content: "10";
}
          .hotPost .media + * {
  border-top: 1px solid hsl(97, 3%, 80%);
}
body.dark .hotPost .media + * {
  border-color: hsl(97, 3%, 20%);
}
.hotPost .media .imgBox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 90px;
  height: 60px;
  margin: auto;
}
.hotPost .media .textBox p {
  display: none;
}
.hotPost .media .textBox h4 {
  font-weight: bold;
  font-size: 0.9rem !important;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hotPost .media .textBox h6 .time {
  display: none;
}
.hotPost .media .textBox h6 .cat {
  color: #bea22f;
  font-weight: bold;
}
@media only screen and (max-width: 767px) {
  .hotPost.hotPost-1to5,
  .hotPost.hotPost-6to10 {
    width: 100%;
    padding: 0;
  }
  .hotPost .media {
    padding: 0.75rem 0 0.75rem 3.25rem;
  }
  .hotPost .media .imgBox {
    display: none;
  }
  .hotPost .media .textBox h4 {
    /*    white-space: normal;*/
  }
}