@import url(http://fonts.googleapis.com/css?family=Raleway:100,300);

@font-face {
font-family: Pier;
src: url("pier.otf") format("opentype");
}



body {
  background-color: #222;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMjIyMjIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTExMTExIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111), color-stop(50%, #222222), color-stop(100%, #111111));
  background-image: -moz-linear-gradient(top, #111111 0%, #222222 50%, #111111 100%);
  background-image: -webkit-linear-gradient(top, #111111 0%, #222222 50%, #111111 100%);
  background-image: linear-gradient(to bottom, #111111 0%, #222222 50%, #111111 100%);
  font-family: 'pier', sans-serif;
  font-weight: 10;
  color: rgba(255, 255, 255, 0.5);
  height: 100vh;
  width: 100vw;
}

#title {
  text-align: center;
  font-size: 20px;
  letter-spacing: 0.1em;
  z-index: 100;
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}

#main {
  height: 100%;
  width: 100%;
  display: table;
	position: relative;
  background-color: #222;
}

.waves-text{
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
}


/* Button */
.buttonContainer {
    position: relative;
    width: 100%;
}
.button {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid #f7f7f7;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  -webkit-transition: .3s;
  transition: .3s;
  width: 40%;
}
.button:after {
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button:after {
  height: 120%;
  left: -10%;
  -webkit-transform: skewX(15deg);
          transform: skewX(15deg);
  z-index: -1;
}
.button:hover {
  cursor: pointer;
}
.button:hover:after {
  width: 100%;
  left: 0;
}
.button:hover {
  color: #5bcaff;
}
.button:hover:after {
  left: -10%;
  width: 120%;
}