/* Styles for ToS cards. */

/* Display for desktop. */
@media screen and (min-width: 1000px) {
  #tos-maincontainer {
    width: 670px;
    height: 285px;
    position: relative;
    border-radius: 4px;
    display: inline-table;
  }

  #tos-leftcolumn {
    float: left;
    width: 335px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 2px;
  }

  #tos-contentwrapper {
    position: absolute;
    right: 0;
  }

  #tos-img {
    width: 435px;
    border-radius: 4px;
  }

  #tos-top {
    font-family: Roboto;
    font-weight: 500;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
  }
}

/* Adapt for devices. */
@media screen and (max-width: 1000px) {
  #tos-maincontainer {
    width: 335px;
    border-radius: 4px;
  }

  #tos-leftcolumn {
    width: 335px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 2px;
  }

  #tos-contentwrapper {
    position: relative;
    height: 210px
  }

  #tos-img {
    border-radius: 4px;
    position: absolute;
    bottom: 0px;
  }

  #tos-top {
    font-family: Roboto;
    font-weight: 500;
    margin-bottom: 5px;
    z-index: 1;
    position: relative;
  }
}

#tos-head {
  color: #ffffff;
  font-size: 24px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 28px;
  margin-bottom: 12px;
  z-index: 1;
  position: relative;
}

.tos-text {
  color: rgba(255,255,255,0.9);
  font-size: 15px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  z-index: 1;
  position: relative;
}

a.tos-link {
  color: #ffffff;
  font-weight: 500;
}

a.tos-link:hover {
  text-decoration: underline;
}

/* Unique background and text colors. */
.tos-01 {
  background-color: #bb6ac7;
  color: #673d70;
}

.tos-02 {
  background-color: #498bfc;
  color: #24467c;
}

.tos-03 {
  background-color: #84b2ff;
  color: #255fa9;
}

.tos-04 {
  background-color: #ffb850;
  color: #b07920;
}

.tos-05 {
  background-color: #ff8b82;
  color: #d03b31;
}

.tos-06 {
  background-color: #9876cd;
  color: #634293;
}

.tos-07 {
  background-color: #fe5555;
  color: #b23229;
}

.tos-08 {
  background-color: #6abb6c;
  color: #398143;
}

.tos-09 {
  background-color: #b58afe;
  color: #6c4e99;
}