/**
 * This file styles to mobile portrait pages
 */
@media (max-width: 991px) {
  #devicegrade {
    z-index: 20;
  }
  #devicegrade > div::after {
    content: "B";
    width: 100%;
    height: 100px;
  }
  .group {
    /*
    * width of all the groups
    */
  }
  .group.width-5 {
    width: 25%;
  }
  .group.width-10 {
    width: 25%;
  }
  .group.width-15 {
    width: 25%;
  }
  .group.width-20 {
    width: 25%;
  }
  .group.width-25 {
    width: 25%;
  }
  .group.width-30 {
    width: 30%;
  }
  .group.width-33 {
    width: 33.3333333333%;
  }
  .group.width-35 {
    width: 35%;
  }
  .group.width-40 {
    width: 40%;
  }
  .group.width-45 {
    width: 45%;
  }
  .group.width-50 {
    width: 50%;
  }
  .group.width-55 {
    width: 55%;
  }
  .group.width-60 {
    width: 60%;
  }
  .group.width-65 {
    width: 65%;
  }
  .group.width-66, .group.width-67 {
    width: 66.6666666667%;
  }
  .group.width-70 {
    width: 70%;
  }
  .group.width-75 {
    width: 75%;
  }
  .group.width-80 {
    width: 100%;
  }
  .group.width-85 {
    width: 100%;
  }
  .group.width-90 {
    width: 100%;
  }
  .group.width-95 {
    width: 100%;
  }
  .group.width-100 {
    width: 100%;
  }
  .article.bottom > .margin > .padding {
    max-height: 300px;
    overflow: auto;
  }
  /*
  * custom
  */
}
/* Only for grade B */
@media (min-width: 767.00001px) and (max-width: 991px) {
  .hide-grade-b {
    display: none;
  }
}

/*# sourceMappingURL=grade-B.css.map */