@charset "utf-8";
/* CSS Document */


.button {
  position: relative;
  cursor: pointer;
  color:#999998;
  font-family: "Lato";
  font-size:16px;
  width:120px;
  padding:9px 0;
  text-align:center;
  margin: 0 auto;
  border:#999998 solid 1px;
}
.button .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.button:nth-of-type(1):before, .button:nth-of-type(1):after, .button:nth-of-type(1) .inner:before, .button:nth-of-type(1) .inner:after {
  background-color: #ff0b00;
}
.button:nth-of-type(2):before, .button:nth-of-type(2):after, .button:nth-of-type(2) .inner:before, .button:nth-of-type(2) .inner:after {
  background-color: #26a69a;
}
.button:nth-of-type(3):before, .button:nth-of-type(3):after, .button:nth-of-type(3) .inner:before, .button:nth-of-type(3) .inner:after {
  background-color: #7e57c2;
}
.button:before, .button:after, .button .inner:before, .button .inner:after {
  position: absolute;
  content: "";
  display: block;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.button.horizontal:before, .button.horizontal:after, .button.both:before, .button.both:after {
  left: 0;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.button.horizontal .inner:before, .button.horizontal .inner:after, .button.both .inner:before, .button.both .inner:after {
  top: 0;
  width: 1px;
  height: 100%;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
.button.horizontal .inner:before, .button.both .inner:before {
  left: -1px;
}
.button.horizontal .inner:after, .button.both .inner:after {
  right: -1px;
}
.button.horizontal .inner:hover:before, .button.horizontal .inner:hover:after, .button.both .inner:hover:before, .button.both .inner:hover:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button.horizontal:before, .button.both:before {
  top: -1px;
}
.button.horizontal:after, .button.both:after {
  bottom: -1px;
}
.button.horizontal:hover:before, .button.horizontal:hover:after, .button.both:hover:before, .button.both:hover:after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.button.horizontal:hover .inner:before, .button.horizontal:hover .inner:after, .button.both:hover .inner:before, .button.both:hover .inner:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button.horizontal.clockwise .inner:before, .button.both.clockwise .inner:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.horizontal.clockwise .inner:after, .button.both.clockwise .inner:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.horizontal.clockwise:before, .button.both.clockwise:before {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button.horizontal.clockwise:after, .button.both.clockwise:after {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button.horizontal.clockwise:hover .inner:before, .button.both.clockwise:hover .inner:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.horizontal.clockwise:hover .inner:after, .button.both.clockwise:hover .inner:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.horizontal.clockwise:hover:before, .button.both.clockwise:hover:before {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button.horizontal.clockwise:hover:after, .button.both.clockwise:hover:after {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button.horizontal.counterclockwise .inner:before, .button.both.counterclockwise .inner:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.horizontal.counterclockwise .inner:after, .button.both.counterclockwise .inner:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.horizontal.counterclockwise:before, .button.both.counterclockwise:before {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button.horizontal.counterclockwise:after, .button.both.counterclockwise:after {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button.horizontal.counterclockwise:hover .inner:before, .button.both.counterclockwise:hover .inner:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.horizontal.counterclockwise:hover .inner:after, .button.both.counterclockwise:hover .inner:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.horizontal.counterclockwise:hover:before, .button.both.counterclockwise:hover:before {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button.horizontal.counterclockwise:hover:after, .button.both.counterclockwise:hover:after {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button.vertical:before, .button.vertical:after {
  top: 0;
  width: 1px;
  height: 100%;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
.button.vertical:before {
  left: 0;
}
.button.vertical:after {
  right: 0;
}
.button.vertical:hover:before, .button.vertical:hover:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button.vertical.clockwise:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.vertical.clockwise:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.vertical.clockwise:hover:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.vertical.clockwise:hover:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.vertical.counterclockwise:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.vertical.counterclockwise:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.vertical.counterclockwise:hover:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.vertical.counterclockwise:hover:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}











.button1 {
  position: relative;
  cursor: pointer;
  color:#999998;
  font-family: "Lato";
  font-size:16px;
  width:350px;
  height:100%;
  text-align:center;
  border:#999998 solid 1px;
  background:#fff;
}
.button1 .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.button1:nth-of-type(1):before, .button1:nth-of-type(1):after, .button1:nth-of-type(1) .inner:before, .button1:nth-of-type(1) .inner:after {
  background-color: #ff0b00;
}
.button1:nth-of-type(2):before, .button1:nth-of-type(2):after, .button1:nth-of-type(2) .inner:before, .button1:nth-of-type(2) .inner:after {
  background-color: #ff0b00;
}
.button1:nth-of-type(3):before, .button1:nth-of-type(3):after, .button1:nth-of-type(3) .inner:before, .button1:nth-of-type(3) .inner:after {
  background-color: #ff0b00;
}
.button1:nth-of-type(4):before, .button1:nth-of-type(4):after, .button1:nth-of-type(4) .inner:before, .button1:nth-of-type(4) .inner:after {
  background-color: #ff0b00;
}
.button1:nth-of-type(5):before, .button1:nth-of-type(5):after, .button1:nth-of-type(5) .inner:before, .button1:nth-of-type(5) .inner:after {
  background-color: #ff0b00;
}
.button1:nth-of-type(6):before, .button1:nth-of-type(6):after, .button1:nth-of-type(6) .inner:before, .button1:nth-of-type(6) .inner:after {
  background-color: #ff0b00;
}
.button1:nth-of-type(7):before, .button1:nth-of-type(7):after, .button1:nth-of-type(7) .inner:before, .button1:nth-of-type(7) .inner:after {
  background-color: #ff0b00;
}
.button1:nth-of-type(8):before, .button1:nth-of-type(8):after, .button1:nth-of-type(8) .inner:before, .button1:nth-of-type(8) .inner:after {
  background-color: #ff0b00;
}
.button1:nth-of-type(9):before, .button1:nth-of-type(9):after, .button1:nth-of-type(9) .inner:before, .button1:nth-of-type(9) .inner:after {
  background-color: #ff0b00;
}
.button1:nth-of-type(10):before, .button1:nth-of-type(10):after, .button1:nth-of-type(10) .inner:before, .button1:nth-of-type(10) .inner:after {
  background-color: #ff0b00;
}
.button1:nth-of-type(11):before, .button1:nth-of-type(11):after, .button1:nth-of-type(11) .inner:before, .button1:nth-of-type(11) .inner:after {
  background-color: #ff0b00;
}
.button1:nth-of-type(12):before, .button1:nth-of-type(12):after, .button1:nth-of-type(12) .inner:before, .button1:nth-of-type(12) .inner:after {
  background-color: #ff0b00;
}

.button1:before, .button1:after, .button1 .inner:before, .button1 .inner:after {
  position: absolute;
  content: "";
  display: block;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.button1.horizontal:before, .button1.horizontal:after, .button1.both:before, .button1.both:after {
  left: 0;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.button1.horizontal .inner:before, .button1.horizontal .inner:after, .button1.both .inner:before, .button1.both .inner:after {
  top: 0;
  width: 1px;
  height: 100%;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
.button1.horizontal .inner:before, .button1.both .inner:before {
  left: -1px;
}
.button1.horizontal .inner:after, .button1.both .inner:after {
  right: -1px;
}
.button1.horizontal .inner:hover:before, .button1.horizontal .inner:hover:after, .button1.both .inner:hover:before, .button1.both .inner:hover:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button1.horizontal:before, .button1.both:before {
  top: -1px;
}
.button1.horizontal:after, .button1.both:after {
  bottom: -1px;
}
.button1.horizontal:hover:before, .button1.horizontal:hover:after, .button1.both:hover:before, .button1.both:hover:after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.button1.horizontal:hover .inner:before, .button1.horizontal:hover .inner:after, .button1.both:hover .inner:before, .button1.both:hover .inner:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button1.horizontal.clockwise .inner:before, .button1.both.clockwise .inner:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button1.horizontal.clockwise .inner:after, .button1.both.clockwise .inner:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button1.horizontal.clockwise:before, .button1.both.clockwise:before {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button1.horizontal.clockwise:after, .button1.both.clockwise:after {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button1.horizontal.clockwise:hover .inner:before, .button1.both.clockwise:hover .inner:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button1.horizontal.clockwise:hover .inner:after, .button1.both.clockwise:hover .inner:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button1.horizontal.clockwise:hover:before, .button1.both.clockwise:hover:before {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button1.horizontal.clockwise:hover:after, .button1.both.clockwise:hover:after {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button1.horizontal.counterclockwise .inner:before, .button1.both.counterclockwise .inner:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button1.horizontal.counterclockwise .inner:after, .button1.both.counterclockwise .inner:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button1.horizontal.counterclockwise:before, .button1.both.counterclockwise:before {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button1.horizontal.counterclockwise:after, .button1.both.counterclockwise:after {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button1.horizontal.counterclockwise:hover .inner:before, .button1.both.counterclockwise:hover .inner:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button1.horizontal.counterclockwise:hover .inner:after, .button1.both.counterclockwise:hover .inner:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button1.horizontal.counterclockwise:hover:before, .button1.both.counterclockwise:hover:before {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button1.horizontal.counterclockwise:hover:after, .button1.both.counterclockwise:hover:after {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button1.vertical:before, .button1.vertical:after {
  top: 0;
  width: 1px;
  height: 100%;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
.button1.vertical:before {
  left: 0;
}
.button1.vertical:after {
  right: 0;
}
.button1.vertical:hover:before, .button1.vertical:hover:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button1.vertical.clockwise:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button1.vertical.clockwise:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button1.vertical.clockwise:hover:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button1.vertical.clockwise:hover:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button1.vertical.counterclockwise:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button1.vertical.counterclockwise:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button1.vertical.counterclockwise:hover:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button1.vertical.counterclockwise:hover:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}








.button2 {
  position: relative;
  cursor: pointer;
  color:#999998;
  font-family: "Lato";
  font-size:16px;
  width:350px;
  height:100%;
  text-align:center;
  border:#999998 solid 1px;
  background:#fff;
}
.button2 .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.button2:nth-of-type(1):before, .button2:nth-of-type(1):after, .button2:nth-of-type(1) .inner:before, .button2:nth-of-type(1) .inner:after {
  background-color: #ff0b00;
}
.button2:nth-of-type(2):before, .button2:nth-of-type(2):after, .button2:nth-of-type(2) .inner:before, .button2:nth-of-type(2) .inner:after {
  background-color: #ff0b00;
}
.button2:nth-of-type(3):before, .button2:nth-of-type(3):after, .button2:nth-of-type(3) .inner:before, .button2:nth-of-type(3) .inner:after {
  background-color: #ff0b00;
}
.button2:nth-of-type(4):before, .button2:nth-of-type(4):after, .button2:nth-of-type(4) .inner:before, .button2:nth-of-type(4) .inner:after {
  background-color: #ff0b00;
}
.button2:nth-of-type(5):before, .button2:nth-of-type(5):after, .button2:nth-of-type(5) .inner:before, .button2:nth-of-type(5) .inner:after {
  background-color: #ff0b00;
}
.button2:nth-of-type(6):before, .button2:nth-of-type(6):after, .button2:nth-of-type(6) .inner:before, .button2:nth-of-type(6) .inner:after {
  background-color: #ff0b00;
}
.button2:nth-of-type(7):before, .button2:nth-of-type(7):after, .button2:nth-of-type(7) .inner:before, .button2:nth-of-type(7) .inner:after {
  background-color: #ff0b00;
}
.button2:nth-of-type(8):before, .button2:nth-of-type(8):after, .button2:nth-of-type(8) .inner:before, .button2:nth-of-type(8) .inner:after {
  background-color: #ff0b00;
}
.button2:nth-of-type(9):before, .button2:nth-of-type(9):after, .button2:nth-of-type(9) .inner:before, .button2:nth-of-type(9) .inner:after {
  background-color: #ff0b00;
}
.button2:nth-of-type(10):before, .button2:nth-of-type(10):after, .button2:nth-of-type(10) .inner:before, .button2:nth-of-type(10) .inner:after {
  background-color: #ff0b00;
}
.button2:nth-of-type(11):before, .button2:nth-of-type(11):after, .button2:nth-of-type(11) .inner:before, .button2:nth-of-type(11) .inner:after {
  background-color: #ff0b00;
}
.button2:nth-of-type(12):before, .button2:nth-of-type(12):after, .button2:nth-of-type(12) .inner:before, .button2:nth-of-type(12) .inner:after {
  background-color: #ff0b00;
}

.button2:before, .button2:after, .button2 .inner:before, .button2 .inner:after {
  position: absolute;
  content: "";
  display: block;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.button2.horizontal:before, .button2.horizontal:after, .button2.both:before, .button2.both:after {
  left: 0;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.button2.horizontal .inner:before, .button2.horizontal .inner:after, .button2.both .inner:before, .button2.both .inner:after {
  top: 0;
  width: 1px;
  height: 100%;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
.button2.horizontal .inner:before, .button2.both .inner:before {
  left: -1px;
}
.button2.horizontal .inner:after, .button2.both .inner:after {
  right: -1px;
}
.button2.horizontal .inner:hover:before, .button2.horizontal .inner:hover:after, .button2.both .inner:hover:before, .button2.both .inner:hover:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button2.horizontal:before, .button2.both:before {
  top: -1px;
}
.button2.horizontal:after, .button2.both:after {
  bottom: -1px;
}
.button2.horizontal:hover:before, .button2.horizontal:hover:after, .button2.both:hover:before, .button2.both:hover:after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.button2.horizontal:hover .inner:before, .button2.horizontal:hover .inner:after, .button2.both:hover .inner:before, .button2.both:hover .inner:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button2.horizontal.clockwise .inner:before, .button2.both.clockwise .inner:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button2.horizontal.clockwise .inner:after, .button2.both.clockwise .inner:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button2.horizontal.clockwise:before, .button2.both.clockwise:before {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button2.horizontal.clockwise:after, .button2.both.clockwise:after {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button2.horizontal.clockwise:hover .inner:before, .button2.both.clockwise:hover .inner:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button2.horizontal.clockwise:hover .inner:after, .button2.both.clockwise:hover .inner:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button2.horizontal.clockwise:hover:before, .button2.both.clockwise:hover:before {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button2.horizontal.clockwise:hover:after, .button2.both.clockwise:hover:after {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button2.horizontal.counterclockwise .inner:before, .button2.both.counterclockwise .inner:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button2.horizontal.counterclockwise .inner:after, .button2.both.counterclockwise .inner:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button2.horizontal.counterclockwise:before, .button2.both.counterclockwise:before {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button2.horizontal.counterclockwise:after, .button2.both.counterclockwise:after {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button2.horizontal.counterclockwise:hover .inner:before, .button2.both.counterclockwise:hover .inner:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button2.horizontal.counterclockwise:hover .inner:after, .button2.both.counterclockwise:hover .inner:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button2.horizontal.counterclockwise:hover:before, .button2.both.counterclockwise:hover:before {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button2.horizontal.counterclockwise:hover:after, .button2.both.counterclockwise:hover:after {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button2.vertical:before, .button2.vertical:after {
  top: 0;
  width: 1px;
  height: 100%;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
.button2.vertical:before {
  left: 0;
}
.button2.vertical:after {
  right: 0;
}
.button2.vertical:hover:before, .button2.vertical:hover:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button2.vertical.clockwise:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button2.vertical.clockwise:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button2.vertical.clockwise:hover:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button2.vertical.clockwise:hover:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button2.vertical.counterclockwise:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button2.vertical.counterclockwise:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button2.vertical.counterclockwise:hover:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button2.vertical.counterclockwise:hover:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}