.tutorial-box {
  position: relative;
  float: left;
}

.mc-tutorial-info {
  background-color: rgba(0, 0, 0, 0.5);
  width: 260px;
  padding: 10px;
}

.mc-new-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 98px;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

.new-mc {
  color: white;
  background-color: #7665a0;
  width: 250px;
  margin: -10px;
  padding: 5px;
  text-align: center;
}

.mc-img {
  width: 478px;
}

.white-text, .mc-h1-second-box, .mc-tutorial-description, .mc-tutorial-specs {
  color: white;
}

.color-block a:link, .color-block a:visited, .color-block a:hover, .color-block a:active {
  font-family: "Gotham 5r", sans-serif;
  color: white;
  text-decoration: underline;
}

.mc-store {
  width: 478px;
  height: 360px;
  background-color: #0094ca;
  color: white;
  float: left;
  padding: 0 20px;
}

.mc-host-event {
  width: 478px;
  height: 360px;
  background-color: #b9bf15;
  color: white;
  float: right;
  padding: 0 20px;
}

.mc-continue-learning {
  width: 478px;
  height: 360px;
  background-color: #7665a0;
  color: white;
  margin-top: 15px;
  font-size: 14px;
  float: left;
  padding: 0 20px;
}

.mc-future {
  width: 478px;
  height: 360px;
  background-color: #00adbc;
  margin-top: 15px;
  color: white;
  float: right;
  padding: 0 20px;
}

.mc-videos {
  margin-top: 20px;
}

.padded-button {
  margin-top: 22px;
}

@media screen and (min-width: 971px) {
  .mc-tutorial-info {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .mc-tutorial-details {
    margin-top: 100px;
  }

  .mc-img-wide {
    width: 100%;
  }

  .mc-img-narrow {
    display: none;
  }

  .mc-tutorial-info-wide {
    width: 360px;
  }
}

@media screen and (min-width: 0px) and (max-width: 970px) {
  .tutorial-box {
    margin-bottom: 15px;
  }

  .color-block {
    width: 100%;
  }

  .mc-store {
    margin-bottom: 15px;
  }

  .mc-host-event, .mc-youth-spark, .mc-store {
    padding-bottom: 15px;
    height: auto;
  }

  .responsive-padding {
    padding: 10px;
  }
}

@media screen and (min-width: 513px) and (max-width: 970px) {
  .mc-tutorial-info {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .tutorial-box {
    padding-left: 10px;
  }

  .mc-tutorial-details {
    margin-top: 100px;
  }

  .mc-img-wide {
    display: none;
  }

  .mc-img-narrow {
    display: block;
  }
}

@media screen and (min-width: 0px) and (max-width: 512px) {
  .mc-tutorial-info {
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    position: relative;
    float: left;
  }

  .mc-h1-second-box {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .tutorial-box {
    width: 100%;
    background-image: url(/images/mc/MC_Wide_Blank_V2.jpg);
    background-size: 605px 100px;
  }

  .mc-img, .mc-img-wide {
    display: none;
  }

  .mc-new-tag {
    margin-bottom: 10px;
    width: 60px;
  }

  .padded-button {
    margin-top: 0px;
  }
}