body {
  font: normal 14px Trebuchet MS, Verdana;
}

.button {
  border-radius: 20px;
  display: block;
  font: bold 11px Verdana;
  line-height:38px;
  margin: 5px 0;
  padding-left: 5px;
  text-align: left;
  text-decoration: none;
}

.button:hover {
  font: bold 12px Verdana;
  line-height: 38px;
  margin: 0;
}

.container {
  background-color: #fff;
  max-height: 800px;
  width: 120px;
  overflow:hidden;
}

.container_header {
  background-color: #8CC713;
  margin-bottom: 5px;
  text-align: center;
}

.container_footer {
  background-color: #5D5959;
  margin-top: 5px;
  overflow: hidden;
}

.footer {
  background-color: #00aeef;
  border-radius: 5px;
  color: white;
  display: block;
  font-size: 18px;
  line-height: 1.4em;
  margin: 8px 5px 14px 5px;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 5px #003447;
}

.footer:hover{
  transform:translateY(2px);
  box-shadow: 0 3px #003447;
  transition: all 0.3s ease-in;
}

.footer:active{
  transform:translateY(4px);
  box-shadow: 0 1px #003447;
  box-shadow: none;
}

.header_text {
  color: #ffffff;
  display: block;
  font: normal 18px Trebuchet MS, Verdana;
  margin:0;
  padding-bottom: 5px;
  text-align: center;
  text-decoration: none;
  text-shadow: black 0.5px 0.5px 0.5px ;
}

.grade_icon {
  height: 16px;
  fill: #5D5959;
  padding-left:2px;
  padding-right: 4px;
  position: relative;
  top: 3px;
  width: 16px;
}

.logo {
  display:block;
  border:0;
  padding: 0;
  margin: 0 auto;
  width: 100%;
}

.logo_img {
  border:0;
  height: 60px;
  margin: 0 auto;
  padding: 0;
  width: 110px;
}

.kindergarten {
  animation: kindergarten 9600ms infinite;
  background-color: #E82929;
  color: white;
  fill: #fff;
  -moz-animation: kindergarten 9600ms infinite;
  -webkit-animation: kindergarten 9600ms infinite;
}

@keyframes kindergarten {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  11% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  12% {
    background-color: #E82929;
    color: white;
    fill: #fff;
    fill: #fff;
  }
}

@-webkit-keyframes kindergarten {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  11.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  12% {
    background-color: #E82929;
    color: white;
    fill: #fff;
  }
}

.grade_1 {
  animation: grade_1 9600ms infinite;
  background-color: #2059e9;
  color: white;
  fill: #fff;
  -moz-animation: grade_1 9600ms infinite;
  -webkit-animation: grade_1 9600ms infinite;
}

@-webkit-keyframes grade_1 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  17.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  18% {
    background-color: #2059e9;
    color: white;
    fill: #fff;
  }
}

@keyframes grade_1 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  17.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  18% {
    background-color: #2059e9;
    color: white;
    fill: #fff;
  }
}

.grade_2 {
  animation: grade_2 9600ms infinite;
  background-color: #3DB10A;
  color: white;
  fill: #fff;
  -moz-animation: grade_2 9600ms infinite;
  -webkit-animation: grade_2 9600ms infinite;
}

@-webkit-keyframes grade_2 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  23.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  24% {
    background-color: #3DB10A;
    color: white;
    fill: #fff;
  }
}

@keyframes grade_2 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  23.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  24% {
    background-color: #3DB10A;
    color: white;
    fill: #fff;
  }
}

.grade_3 {
  animation: grade_3 9600ms infinite;
  background-color: #E19504;
  color: white;
  fill: #fff;
  -moz-animation: grade_3 9600ms infinite;
  -webkit-animation: grade_3 9600ms infinite;
}

@-webkit-keyframes grade_3 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  29.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  30% {
    background-color: #E19504;
    color: white;
    fill: #fff;
  }
}

@keyframes grade_3 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  29.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  30% {
    background-color: #E19504;
    color: white;
    fill: #fff;
  }
}

.grade_4 {
  animation: grade_4 9600ms infinite;
  background-color: #E11E9A;
  color: white;
  fill: #fff;
  -moz-animation: grade_4 9600ms infinite;
  -webkit-animation: grade_4 9600ms infinite;
}

@-webkit-keyframes grade_4 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  35.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  36% {
    background-color: #E11E9A;
    color: white;
    fill: #fff;
  }
}

@keyframes grade_4 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  35.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  36% {
    background-color: #E11E9A;
    color: white;
    fill: #fff;
  }
}

.grade_5 {
  animation: grade_5 9600ms infinite;
  background-color: #7E19C5;
  color: white;
  fill: #fff;
  -moz-animation: grade_5 9600ms infinite;
  -webkit-animation: grade_5 9600ms infinite;
}

@-webkit-keyframes grade_5 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  41.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  42% {
    background-color: #7E19C5;
    color: white;
    fill: #fff;
  }
}

@keyframes grade_5 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  41.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  42% {
    background-color: #7E19C5;
    color: white;
    fill: #fff;
  }
}

.grade_6 {
  animation: grade_6 9600ms infinite;
  background-color: #00A89B;
  color: white;
  fill: #fff;
  -moz-animation: grade_6 9600ms infinite;
  -webkit-animation: grade_6 9600ms infinite;
}

@-webkit-keyframes grade_6 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  47.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  48% {
    background-color: #00A89B;
    color: white;
    fill: #fff;
  }
}

@keyframes grade_6 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  47.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  48% {
    background-color: #00A89B;
    color: white;
    fill: #fff;
  }
}


.grade_7 {
  animation: grade_7 9600ms infinite;
  background-color: #FC6F23;
  color: white;
  fill: #fff;
  -moz-animation: grade_7 9600ms infinite;
  -webkit-animation: grade_7 9600ms infinite;
}

@-webkit-keyframes grade_7 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  53.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  54% {
    background-color: #FC6F23;
    color: white;
    fill: #fff;
  }
}

@keyframes grade_7 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  53.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  54% {
    background-color: #FC6F23;
    color: white;
    fill: #fff;
  }
}

.grade_8 {
  animation: grade_8 9600ms infinite;
  background-color: #B07A06;
  color: white;
  fill: #fff;
  -moz-animation: grade_8 9600ms infinite;
  -webkit-animation: grade_8 9600ms infinite;
}

@-webkit-keyframes grade_8 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  59.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  60% {
    background-color: #B07A06;
    color: white;
    fill: #fff;
  }
}

@keyframes grade_8 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  59.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  60% {
    background-color: #B07A06;
    color: white;
    fill: #fff;
  }
}

.algebra_1 {
  animation: algebra_1 9600ms infinite;
  background-color: #A419BD;
  color: white;
  fill: #fff;
  -moz-animation: algebra_1 9600ms infinite;
  -webkit-animation: algebra_1 9600ms infinite;
}

@-webkit-keyframes algebra_1 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  65.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  66% {
    background-color: #A419BD;
    color: white;
    fill: #fff;
  }
}

@keyframes algebra_1 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  65.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  66% {
    background-color: #A419BD;
    color: white;
    fill: #fff;
  }
}

.geometry {
  animation: geometry 9600ms infinite;
  background-color: #556b2f;
  color: white;
  fill: #fff;
  -moz-animation: geometry 9600ms infinite;
  -webkit-animation: geometry 9600ms infinite;
}

@-webkit-keyframes geometry {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  71.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  72% {
    background-color: #556b2f;
    color: white;
    fill: #fff;
  }
}

@keyframes geometry {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  71.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  72% {
    background-color: #556b2f;
    color: white;
    fill: #fff;
  }
}

.algebra_2 {
  animation: algebra_2 9600ms infinite;
  background-color: #0084C2;
  color: white;
  fill: #fff;
  -moz-animation: algebra_2 9600ms infinite;
  -webkit-animation: algebra_2 9600ms infinite;
}

@-webkit-keyframes algebra_2 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  77.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  78% {
    background-color: #0084C2;
    color: white;
    fill: #fff;
  }
}

@keyframes algebra_2 {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  77.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  78% {
    background-color: #0084C2;
    color: white;
    fill: #fff;
  }
}

.precalculus {
  animation: precalculus 9600ms infinite;
  background-color: #D53F3F;
  color: white;
  fill: #fff;
  -moz-animation: precalculus 9600ms infinite;
  -webkit-animation: precalculus 9600ms infinite;
}

@-webkit-keyframes precalculus {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  83.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  84% {
    background-color: #D53F3F;
    color: white;
    fill: #fff;
  }
}

@keyframes precalculus {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  83.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  84% {
    background-color: #D53F3F;
    color: white;
    fill: #fff;
  }
}

.calculus {
  animation: calculus 9600ms infinite;
  background-color: #ffbad2;
  color: white;
  fill: #fff;
  -moz-animation: calculus 9600ms infinite;
  -webkit-animation: calculus 9600ms infinite;
}

@-webkit-keyframes calculus {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  89.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  90% {
    background-color: #ffbad2;
    color: white;
    fill: #fff;
  }
}

@keyframes calculus {
  0% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  89.9% {
    background-color: #D5F08C;
    color: #5D5959;
    fill: #5D5959;
  }
  90% {
    background-color: #ffbad2;
    color: white;
    fill: #fff;
  }
}