@import url("https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900");
body {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.grades{  
  margin: 15px auto;
  text-align:center;
}

.indGrade{
  box-sizing:border-box;
  padding:0.1em 2em;
  position:relative;  
}

.indGrade p{
  color: #FFF !important;
  font-size:1.6em;
  line-height: 1;
}

.indGrade a{
  text-decoration:none !important;
  color: #FFF !important;
  display:block;
  line-height: 1;
}

.indGrade:nth-child(1) {background-color: #117ec3;}
.indGrade:nth-child(2) {background-color: #1491e1;}
.indGrade:nth-child(3) {background-color: #2ba1eb;}
.indGrade:nth-child(4) {background-color: #49afef;}
.indGrade:nth-child(5) {background-color: #49afef;}
.indGrade:nth-child(6) {background-color: #49afef;}
.indGrade:before{position:absolute;}

.indGrade:after{
  position:absolute;
  z-index:1;
  content: '';
  border-style:solid;
  border-width:25px 25px 0 25px;
  right:2em;
  bottom: -25px;
}

.indGrade:nth-child(1):after{border-color:green transparent transparent transparent;}
.indGrade:nth-child(2):after{border-color: green transparent transparent transparent;}
.indGrade:nth-child(3):after{border-color:#2ba1eb transparent transparent transparent;}
.indGrade:nth-child(4):after{border-color:#2ba1eb transparent transparent transparent;}
.indGrade:nth-child(5):after{border-color:#2ba1eb transparent transparent transparent;}
.indGrade:nth-child(6):after{content: none;}
.indGrade:hover{background: #0b6ca9;}
.indGrade:hover:after{border-color:#0b6ca9 transparent transparent transparent transparent transparent;}


/*CLASS LIST DESKTOP VIEWS*/
@media screen and (min-width: 710px) {
  .grades{display:flex;}
  .indGrade{flex:1}
  .indGrade:after{bottom:50%;right:-20px;margin-bottom:-30px;border-width:30px 0 30px 20px;}
  .indGrade:nth-child(1):after{border-color:transparent transparent transparent green;}
  .indGrade:nth-child(2):after{border-color:transparent transparent transparent green;}
  .indGrade:nth-child(3):after{border-color:transparent transparent transparent #2ba1eb;}
  .indGrade:nth-child(4):after{border-color:transparent transparent transparent #2ba1eb;}
  .indGrade:nth-child(5):after{border-color:transparent transparent transparent #2ba1eb;}
  .indGrade:nth-child(6):after{border-color:transparent transparent transparent  darkblue;}
  .indGrade:hover:after{border-color: transparent transparent transparent transparent transparent } 
}

#inGrade_completed{
  background-color: lightgreen !important;
}

#inGrade_completed p{
  color: black !important;
}

#inGrade_completed a{
  color: black !important;
}