.slider-wrapper {
  position: relative;
  height: 100%; }
  .slider-wrapper .slider {
    position: relative;
    height: 100%; }
    .slider-wrapper .slider .trigger {
      display: none; }
    .slider-wrapper .slider .slide {
      width: 100%;
      overflow: hidden;
      position: absolute;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 5000;
      opacity: 0;
      transition: opacity .5s ease-in-out;
      margin: 0; }
      .slider-wrapper .slider .slide .slide-item {
        width: 100%;
        max-width: 100%;
        height: 100%;
        /* margin: 0 auto; */
        vertical-align: middle;
        overflow: auto;
        display: flex;
        items-align: center;
        justify-content: center;
        border: solid 1px #ccc; }
        .slider-wrapper .slider .slide .slide-item > pre {
          width: 100%;
          padding-left: 10px;
          overflow: auto;
          border: none;
          font-size: 1.4rem;
          line-height: 2.1rem; }
        .slider-wrapper .slider .slide .slide-item .slide-caption {
          font-size: 1.6rem;
          padding: 0 1rem 0 1rem;
          position: absolute;
          top: -1rem;
          right: 2rem;
          color: #666;
          background-color: rgba(230, 230, 230, 0.5);
          text-align: center; }
          .slider-wrapper .slider .slide .slide-item .slide-caption a {
            color: blue; }
          .slider-wrapper .slider .slide .slide-item .slide-caption a:hover {
            border-bottom: dotted 1px blue; }
  .slider-wrapper .slider .trigger:checked + .slide {
    z-index: 6000;
    opacity: 1; }
  .slider-wrapper .slider-nav {
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
    width: 100%;
    text-align: right;
    margin: 0;
    z-index: 6000; }
    .slider-wrapper .slider-nav .slider-nav__item {
      display: inline-block; }
    .slider-wrapper .slider-nav .slider-nav__label {
      font-size: 1.3rem;
      background-color: #333;
      display: block;
      height: 2em;
      line-height: 2em;
      width: 2em;
      text-align: center;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      transition: background-color .25s, color .25s ease-in-out; }
    .slider-wrapper .slider-nav .slider-nav__label:hover,
    .slider-wrapper .slider-nav .slider-nav__label:active,
    .slider-wrapper .slider-nav .slider-nav__label:focus {
      background-color: gray;
      color: black; }
    .slider-wrapper .slider-nav .slider-nav__label.slider-active {
      background-color: white;
      color: black;
      border: solid 1px #ccc; }

/* responsive layout */
@media only screen and (min-width: 1024px) {
  .slide-caption {
    font-size: 1.5rem; } }
@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .slide-caption {
    font-size: 1.25rem; } }
@media only screen and (max-width: 768px) {
  .slide-item {
    width: 100%;
    height: auto; }

  .slider-wrapper .slider-nav {
    position: relative;
    display: block; } }
#content.codeboard_demo div.codeboard-player {
  height: 273px; }