* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Lato', helvetica, sans-serif;
}

body.quiz .module.mntv-extras .content.quiz,
body.facts .module.mntv-extras .content.facts,
body.embed .module.mntv-extras .content.embed {
  display: block;
}

body.embed .module.mntv-extras span.embed {
  display: none;
}

.module.mntv-extras {
  position: relative;
  max-width: 714px;
  height: 250px;
  color: #084067;
  background: linear-gradient(80deg, #58C5FD, #2E8BB8);
  background-color: #58C5FD;
  overflow: hidden;
}

.module.mntv-extras header {
  display: table;
  position: relative; z-index: 8;
  width: 100%;
  height: 36px;
  border-collapse: collapse;
  border-style: hidden;
  border-bottom: 2px solid rgb(232, 232, 232);
  background: linear-gradient(to right, #3E3F3F 20%, #B0B0B0);
}

.module.mntv-extras header > * {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  border: 2px solid rgb(232, 232, 232);
}

.module.mntv-extras h1 {
  margin: 0;
  padding: 0 24px;
  width: 100%;
  color: rgb(232, 232, 232);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
}

.module.mntv-extras header span {
  position: relative;
  padding: 0 16px;
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}

.module.mntv-extras header span:hover,
body.facts .module.mntv-extras header span.facts,
body.quiz .module.mntv-extras header span.quiz {
  color: #FFFFFF;
  background-color: #313234;
}

body.facts .module.mntv-extras header span.facts:after,
body.quiz .module.mntv-extras header span.quiz:after {
  content: ' ';
  display: block;
  position: absolute; bottom: -7px; left: calc(50% - 7px);
  margin: 0 auto;
  width: 14px;
  height: 14px;
  background-color: #313234;
  transform: rotate(45deg);
}

.module.mntv-extras .content {
  display: none;
  position: absolute; top: 38px; right: 0; bottom: 0; left: 0;
  padding: 16px 8px 8px 8px;
  background: url('../images/bg_corner.png') no-repeat bottom left,
              radial-gradient(circle at 128px 16px, #64D6FF 24px, transparent 200px) no-repeat;
  background-size: auto, 100% 100%;
}

.module.mntv-extras .content .details {
  display: table;
  margin-bottom: 12px;
}

.module.mntv-extras .content .details > * {
  display: table-cell;
  vertical-align: middle;
}

.module.mntv-extras .content .details h2 {
  margin: 0;
  padding: 0 8px 0 16px;
  color: #313234;
  font-size: 32px;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px #FFFFFF;
}

.module.mntv-extras .content .intro {
  color: #FFFFFF;
  font-size: 14px;
}

.module.mntv-extras .content .details h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.module.mntv-extras .content .details p {
  display: block;
  margin: 0;
  padding: 0;
  color: #FFFFFF;
  font-size: 14px;
  text-transform: uppercase;
  white-space: nowrap;
}

.module.mntv-extras .content .data {
  margin: 0 16px 0 96px;
  font-weight: bold;
}

.module.mntv-extras .content .data h4 {
  margin: 0;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: normal;
}

.module.mntv-extras .content .data p {
  margin: 0;
}

.module.mntv-extras .content ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.module.mntv-extras .content ol li {
  display: none;
}

.module.mntv-extras .content ol li:first-child {
  display: block;
}

.module.mntv-extras .content .data ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -webkit-justify-content: flex-start;
  flex-flow: row wrap;
  justify-content: flex-start; /* space-around; */
  margin: 0 auto;
  padding: 4px 0;
  width: 80%;
  list-style: none;
}

.module.mntv-extras .content .data ul li {
  padding: 0 4px;
  min-width: 50%;
  line-height: 20px;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  font-size: 13px;
  white-space: nowrap;
}

.module.mntv-extras .content .data ul li > * {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

.module.mntv-extras .content .buttons {
  position: absolute;  right: 0; bottom: 16px; left: 0;
  text-align: center;
}

.module.mntv-extras .content .submit {
  display: inline-block;
  margin: 8px 0 0 0;
  padding: 0 8px;
  border: 1px solid #A5D7F1;
  border-width: 1px 1px 0 1px;
  border-radius: 16px 16px 0 0;
  white-space: nowrap;
}

.module.mntv-extras .content .submit button,
.module.mntv-extras .content .submit span.continue {
  position: relative; bottom: -8px;
  padding: 8px 16px;
  min-width: 120px;
  color: #B4B6B7;
  font-family: 'Lato', helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #313234;
  background-image: url('../images/arrow_next.png'), url('../images/arrow_next_active.png');
  background-position: right 8px center, right 8px center;
  background-repeat: no-repeat;
  background-size: 18px 18px, 0 0;
  border: 0;
  cursor: pointer;
}

.module.mntv-extras .content .submit span.continue {
  display: inline-block;
  padding-right: 32px;
  min-width: 0;
  border-radius: 0 0 8px 8px;
}

.module.mntv-extras .content .submit button:first-child {
  text-align: right;
  background-image: url('../images/arrow_back.png'), url('../images/arrow_back_active.png');
  background-position: left 8px center, left 8px center;
  border-radius: 0 0 0 8px;
}

.module.mntv-extras .content .submit button:last-child {
  text-align: left;
  padding-right: 32px;
  border-radius: 0 0 8px 0;
}

.module.mntv-extras .content .submit button:only-child {
  padding-right: 80px;
  text-align: center;
  background-image: url('../images/arrow_next.png'), url('../images/arrow_next_active.png');
  background-position: right 56px center, right 56px center;
  border-radius: 0 0 8px 8px;
}

.module.mntv-extras .content .submit button:only-child:after {
  content: attr(data-current) " of " attr(data-total);
  display: block;
  position: absolute; top: 10px; right: 20px;
  color: #5FCDFF;
  font-size: 11px;
  text-transform: none;
}

.module.mntv-extras .content .submit button:not(:disabled):hover,
.module.mntv-extras .content .submit span.continue:hover {
  color: #FFFFFF;
  background-size: 0 0, 18px 18px;
}

.module.mntv-extras .content .submit button:disabled {
  opacity: 0.4;
  cursor: default;
}


.module.mntv-extras span.embed {
  position: absolute; right: 32px; bottom: 16px;
  text-decoration: underline;
  cursor: pointer;
}

.module.mntv-extras span.embed:hover {
  text-decoration: none;
}

.module.mntv-extras .content.embed code {
  display: block;
  padding: 8px;
  text-align: left;
  white-space: pre-line;
  background-color: #FFFFFF;
  border-radius: 8px;
}

.module.mntv-extras .content .summary ~ * {
  display: none;
}




@media (max-width: 710px) {

  .module.mntv-extras .content {
    padding-top: 8px;
  }

  .module.mntv-extras .content .details h2 {
    font-size: 24px;
  }

  .module.mntv-extras .content .intro {
    font-size: 12px;
  }

  .module.mntv-extras .content .details h3 {
    font-size: 12px;
  }

  .module.mntv-extras .content .details p {
    font-size: 12px;
  }

  .module.mntv-extras .content .data {
    margin: 0 16px 0 16px;
  }

  .module.mntv-extras .content .data h4 {
    font-size: 16px;
  }

  .module.mntv-extras .content .data p {
    font-size: 13px;
  }

  .module.mntv-extras .content .data ul {
    width: 100%;
  }

  .module.mntv-extras .content .data ul li {
    font-size: 12px;
  }

}




@media (max-width: 480px) {

  .module.mntv-extras span.embed {
    display: none;
  }

  .module.mntv-extras h1 {
    padding: 0 16px 0 8px;
  }

  .module.mntv-extras header span {
    font-size: 12px;
  }

  .module.mntv-extras .content {
    /*
    background: radial-gradient(circle at 128px 16px, #64D6FF 24px, transparent 200px) no-repeat;
    background-size: 100% 100%;
    */
    background-position: bottom -64px left, top right;
  }

  .module.mntv-extras .content .details {
    margin-bottom: 4px;
  }

  .module.mntv-extras .content .details h2 {
    padding: 0 4px 0 0;
    font-size: 12px;
  }

  .module.mntv-extras .content .intro {
    font-size: 10px;
  }

  .module.mntv-extras .content .data {
    margin: 0;
  }

  .module.mntv-extras .content .data ul li {
    min-width: 0;
    max-width: none;
    width: 100%;
    font-size: 11px;
    font-weight: normal;
  }

  .module.mntv-extras .content .buttons .submit button,
  .module.mntv-extras .content .buttons .submit span.continue {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 11px;
  }

  .module.mntv-extras .content .submit button:only-child::after {
    top: 4px;
  }

}