/*-------- font-style --------*/

@charset "utf-8";
@import url(http://fonts.lug.ustc.edu.cn/css?family=Titillium+Web:300);
@import url(http://fonts.lug.ustc.edu.cn/css?family=Lato:300,400,700);
@import url(http://fonts.lug.ustc.edu.cn/css?family=Open+Sans:400,600,700,800);
@import url(http://fonts.lug.ustc.edu.cn/css?family=Signika:400,700,600,300);

/*-------- fontawesome --------*/

@import "http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css";

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

::-moz-selection {
  background: #000000;
}

::selection {
  background: #000000;
}

/*-------- Body Content --------*/

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  color: rgba(58,58,58, 1.0);
  background: -webkit-gradient(linear, left top, left bottom, from(#D65EA2), to(transparent)), linear-gradient(90deg, #a3d371, transparent), linear-gradient(-90deg, #ff7f50, transparent);
  background: -webkit-linear-gradient(#32cd32, transparent), -webkit-linear-gradient(0deg, #87ceeb, transparent), -webkit-linear-gradient(180deg, #D65EA2, transparent);
  background: linear-gradient(#32cd32, transparent), linear-gradient(90deg, #87ceeb, transparent), linear-gradient(-90deg, #ff7f50, transparent);
  background-blend-mode: screen;
  -webkit-animation: hue 30s infinite linear;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}



.quiver {
  position: absolute;
  top: 50%;
  left: 0;
  padding: 0;
  margin: 50px auto;
  width: 100%;
}


.ani {
  tap-highlight-color: #00f;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.bato {
  border: 1px solid #fff;
  line-height: 1.5;
  font-size: 1.0em;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ccc;
  padding: 1em 1em;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 100%;
  max-width: 200px;
  height: 60px;
  background-color: #232323;
  background: -webkit-linear-gradient(90deg, #232323, #232323) 2px 2px/194px 54px no-repeat, -webkit-linear-gradient(0deg, LightSkyBlue, NavajoWhite, LightCoral, NavajoWhite, LightSkyBlue) 0% 0%/200% 100% no-repeat;
  background: linear-gradient(0deg, #232323, #232323) 2px 2px/194px 54px no-repeat, linear-gradient(90deg, LightSkyBlue, NavajoWhite, LightCoral, NavajoWhite, LightSkyBlue) 0% 0%/200% 100% no-repeat;
  -webkit-box-shadow: 0 0 3px 2px rgba(0,0,0,0.3);
  box-shadow: 0 0 3px 2px rgba(0,0,0,0.3);
  -webkit-transition: -webkit-transform 75ms linear, background 250ms linear;
  transition: transform 75ms linear, background 250ms linear;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -100px;
}

.bato:hover,
.bato:active,
.bato:focus {
  color: #f5f5f5;
  background: -webkit-linear-gradient(90deg, #232323, #232323) 2px 2px/194px 54px no-repeat, -webkit-linear-gradient(0deg, LightSkyBlue, NavajoWhite, LightCoral, NavajoWhite, LightSkyBlue) 100% 0%/200% 100% no-repeat;
  background: linear-gradient(0deg, #232323, #232323) 2px 2px/194px 54px no-repeat, linear-gradient(90deg, LightSkyBlue, NavajoWhite, LightCoral, NavajoWhite, LightSkyBlue) 100% 0%/200% 100% no-repeat;
}

.bato:active,
.bato.hover-effect:after {
  -webkit-transform: translateZ(0) translateY(6px) scale(0.95);
  -ms-transform: translateZ(0) translateY(6px) scale(0.95);
  transform: translateZ(0) translateY(6px) scale(0.95);
}

.bato:hover:after,
.bato.hover-effect:after {
  content: '';
  position: absolute;
  width: 200px;
  left: -200px;
  top: 0;
  -webkit-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  transform: skewX(-20deg);
  background-image: -webkit-linear-gradient(left, transparent, rgba(255,255,255,0.08), transparent);
  background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(255,255,255,0.08)), to(transparent));
  background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent);
  height: 60px;
  -webkit-animation: shine 0.5s ease;
  -ms-animation: shine 0.5s ease;
  animation: shine 0.5s ease;
}

.bato i {
  color: #f1f1f1;
  font-size: 25px;
}

@-webkit-keyframes shine {
  100% {
    left: 100%;
  }
}

@keyframes shine {
  100% {
    left: 100%;
  }
}