@charset "utf-8";
/* CSS Document */
#topbuttons {
    background-color: #663399;
    overflow: hidden;
	font-size: .85em;
}
#topbuttons ul li {
  float: left;
  display: block;
  padding: 0;
  margin: 0;
}
#topbuttons ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: .8em;
  font-weight: bold;
  font-size:.8em;
  text-transform: uppercase;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#topbuttons ul li a:hover {
  color: #FFCA00;
}
#topbuttons ul li a:hover:before {
  width: 100%;
}
#topbuttons ul li a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: .3em;
  width: 0;
  background: #FFCA00;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#topbuttons ul li.last > a:after,
#topbuttons ul li:last-child > a:after {
  display: none;
}
#topbuttons ul li.active a:before {
  width: 100%;
}


@media screen and (max-width: 69.2em) {

#topbuttons {
    float: none;
}
	
#topbuttons ul li {
	float: none;
}
#topbuttons ul li a {
	width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#topbuttons ul li a:after {
    display: none;
}
#topbuttons ul li a:before {
    height: .2em;
    background: #FFF;
    width: 100%;
    opacity: .2;
}
#topbuttons ul li.last > a:before,
#topbuttons ul li:last-child > a:before {
    display: none;
}
}