@import "https://fonts.googleapis.com/css?family=Anton";
* {
  box-sizing: border-box;
}

html {
  /* font-size: 62.5%; */
}

body {
  height: 100%;
  background-color: #333;
  text-align: center;
  margin: 0;
  overflow-x: hidden;
  /* padding: 1em 0; */
}

.ulList{
  list-style-type: none;
  padding: 0
}

.ulList li {
  display:flex;
  justify-content: flex-start;
  align-self: center;
}

.skew-button-container {
  position: absolute;
  left: 50%;
}

.skew-button {
  cursor: pointer;
  outline: none;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: relative;
  display: block;
  padding: 0;
  background-color: transparent;
  border: none;
  font: 1em 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  width: 255px;  
  white-space: nowrap;
}

.v1 {
  color: #000;
  width: 60px;
  -webkit-transform: translate3d(-180%, -50%, 0);
  transform: translate3d(-180%, -50%, 0);
}

.v2 {
  color: #159;
  width: 60px;
  -webkit-transform: translate3d(-180%, -50%, 0);
  transform: translate3d(-180%, -50%, 0);
}

.skew-button span {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: relative;
  display: block;
  width: 255px;
  height: 100%;
  padding: 20px 50px;
  z-index: 3;
}

.v2 span,
.v1 span {
  padding: 20px 20px;
  width: 60px;
}

.skew-button:before,
.skew-button span:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) skewX(-20deg);
          transform: translate(-50%, -50%) skewX(-20deg);
  width: 100%;
  height: 50px;
  border: 1px solid #159;
  z-index: 2;
}

.disclaimer:before,
.disclaimer span:before {
  background-color:#247;
}

.v1:before,
.v1 span:before {
  background-color:#ccc;
}

.v2:before,
.v2 span:before {
  background-color:#ffbf00;
}

.skew-button span:before {
  display: block;
  -webkit-transform: translate(-50%, -50%) skew(-20deg);
          transform: translate(-50%, -50%) skew(-20deg);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  z-indeX: -1;
}
.skew-button:after {
  transition: all 100ms ease-out;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: skewX(-20deg) scaleX(0);
          transform: skewX(-20deg) scaleX(0);
  width: 100%;
  height: 100%;
  background-color: #159;
  border: 1px solid transparent;
  z-index: 1;
}
.skew-button:hover span:before {
  -webkit-animation: fill .5s ease-out;
          animation: fill .5s ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.skew-button:hover:after {
  -webkit-animation: swoosh .7s ease-in;
          animation: swoosh .7s ease-in;
}
.skew-button:active:before {
  background-color: #030d1b;
}

@-webkit-keyframes swoosh {
  0% {
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  20% {
    -webkit-transform: skewX(-20deg) scaleX(1);
            transform: skewX(-20deg) scaleX(1);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  21% {
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
  50% {
    -webkit-transform: skewX(-20deg) scaleX(0);
            transform: skewX(-20deg) scaleX(0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}

@keyframes swoosh {
  0% {
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  20% {
    -webkit-transform: skewX(-20deg) scaleX(1);
            transform: skewX(-20deg) scaleX(1);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  21% {
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
  50% {
    -webkit-transform: skewX(-20deg) scaleX(0);
            transform: skewX(-20deg) scaleX(0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}
@-webkit-keyframes fill {
  0% {
    background-color: rgba(14, 56, 118, 0);
  }
  20% {
    opacity: .5;
    border-width: 15px;
    border-color: #092248;
  }
  100% {
    opacity: .5;
    border-width: 1px;
    background-color: rgba(14, 56, 118, 0.5);
  }
}
@keyframes fill {
  0% {
    background-color: rgba(14, 56, 118, 0);
  }
  20% {
    opacity: .5;
    border-width: 15px;
    border-color: #092248;
  }
  100% {
    opacity: .5;
    border-width: 1px;
    background-color: rgba(14, 56, 118, 0.5);
  }
}

small {
  color: #333;
}
.logo {
  font: 72px 'Arial Narrow', sans-serif;/* I picked this font because it's the closest looking 'web safe' font http://cssfontstack.com/ */
  color: #fefefe;
  text-transform: uppercase;
  letter-spacing: -4px;
}

/* stuff for both words */
.logo span {
  position: relative;
}
.logo span:before,
.logo span:after {
  content: '';
  position: absolute;
  border-width: 32px;/* makes a nice, big 64px square */
  border-style: solid;
  border-color: transparent;
  height: 0;
  z-index: 10;
}

/* stuff for 1st word */
.logo .word1 {
  color: #159;
  margin-right: -38px;
  transform: rotateY(180deg);/* using Prefix free */
  display: inline-block;/* required for transform */
  z-index: 10;/* stack 1st word on top */
}
.logo .word1:before {
  right: -4px;/* would be left, but we flipped the word */
  top: -9px;
  border-top-color: #333;/* match background color */
  border-right-color: #333;/* would be left, but we flipped the word */
}
.logo .word1:after {
  left: 17px;/* would be right, but we flipped the word */
  bottom: -15px;
  border-bottom-color: #333;
  border-left-color: #333;/* would be right, but we flipped the word */
}

/* stuff for 2nd word */
.logo .word2 {
  z-index: 0;/* stack 2nd word below */
}
.logo .word2:before {
  left: -4px;
  top: -6px;
  border-top-color: #333;
  border-left-color: #333;
}
.logo .word2:after {
  right: -4px;  
  bottom: 4px;
  border-bottom-color: #333;
  border-right-color: #333;
}