.main-content {
  padding: 10px 0 30px;
  counter-reset: section;
}

.main-content > div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  width: 14em;
  height: 6em;
  margin: 5px;
  border: 1px dashed grey;
}

.main-content > div:after {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  top: -1px;
  left: -1px;
  color: #333;
  text-align: center;
  line-height: 30px;
  background: #DDDDDD;
  border-bottom-right-radius: 50%;
  counter-increment: section;
  content: ""counter(section)"";
}

.viewer {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

a[class*="button"] {
  display: block;
  width: 8em;
  font: 600 1em/3 Helvetica, Georgia, "Times New Roman", serif;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.065em;
  border-radius: 0.5em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Button Styling */
/* Button 1 */

a.button1 {
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  background: -webkit-linear-gradient(rgba(255, 0, 0, 0.3) 0.3em, rgba(255, 0, 0, 0.9) 6px, rgba(255, 0, 0, 0.9) 1.9em, rgba(255, 0, 0, 0.3));
  background: linear-gradient( rgba(255, 0, 0, 0.3) 0.3em, rgba(255, 0, 0, 0.9) 6px, rgba(255, 0, 0, 0.9) 1.9em, rgba(255, 0, 0, 0.3));
  border: 1px solid red;
  box-shadow: 0 0.4em 0.2em -0.2em rgba(0, 0, 0, 0.7);
  -webkit-transition: all 0s, background-position 0.3s linear, background-size 0.3s linear;
  transition: all 0s, background-position 0.3s linear, background-size 0.3s linear;
}

a.button1:hover {
  background-position: 10%;
  background-size: 100% 120%;
}
/* a.button1:focus, */

a.button1:active {
  box-shadow: none;
  -webkit-transform: translateY(0.2em);
  -ms-transform: translateY(0.2em);
  transform: translateY(0.2em);
}
/* Button 2 */

a.button2 {
  color: rgba(0, 0, 0, 0.7);
  text-shadow: 1px 1px #fff, -1px -1px #fff, -1px 1px #fff, 1px -1px #fff;
  background-color: lightblue;
  border: 0.2em solid rgba(255, 255, 255, 0.1);
  border-radius: 0 1.5em;
  outline: 0.2em solid rgba(255, 255, 255, 0.9);
  outline-offset: -0.9em;
  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.5), 0 0.3em 0.07em rgba(0, 0, 0, 0.3), 0 0.5em 0.35em rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

a.button2:hover {
  color: rgba(0, 0, 0, 0.6);
  border-color: rgba(0, 0, 0, 0.4);
  border-radius: 1.5em 0;
  outline-color: rgba(0, 0, 0, 0.4);
  text-shadow: 0px 0px 1em rgba(255, 255, 255, 0.7);
  box-shadow: none;
}
/* a.button2:focus, */

a.button2:active {
  outline-color: transparent;
  box-shadow: none;
  -webkit-transition: all 0s;
  transition: all 0s;
}
/* Button 3 */

a.button3 {
  position: relative;
  z-index: 0;
  color: #333;
  text-shadow: 1px 1px 1px #fff, -1px -1px 0px #000;
  background: -webkit-linear-gradient(bottom left, transparent 50%, silver 0), -webkit-repeating-linear-gradient(135deg, #DDD 0px, #DDD 25%, #FFF 0px, #FFF 50%) center / 0.4em 0.4em;
  background: linear-gradient(to top right, transparent 50%, silver 0), repeating-linear-gradient(-45deg, #DDD 0px, #DDD 25%, #FFF 0px, #FFF 50%) center / 0.4em 0.4em;
  background-clip: content-box;
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 0;
  box-shadow: 0 0 0.2em 0.2em #777;
}

a.button3:after {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: -webkit-linear-gradient(top right, transparent 50%, silver 0), -webkit-repeating-linear-gradient(135deg, #DDD 0px, #DDD 25%, #FFF 0px, #FFF 50%) center / 6px 6px;
  background: linear-gradient(to bottom left, transparent 50%, silver 0), repeating-linear-gradient(-45deg, #DDD 0px, #DDD 25%, #FFF 0px, #FFF 50%) center / 6px 6px;
  opacity: 0;
  -webkit-transition: all 0.8s linear;
  transition: all 0.8s linear;
}

a.button3:hover {
  box-shadow: 0 0 0.2em 0.2em #999;
}

a.button3:hover:after {
  opacity: 1;
}
/* a.button3:focus, */

a.button3:active {
  box-shadow: 0 0.2em 0.2em #777, 0 -0.2em 0.2em #777;
}
/* Button 4 */

a.button4 {
  position: relative;
  z-index: 0;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
  background: -webkit-repeating-radial-gradient(#fff, #000);
  background: repeating-radial-gradient(#fff, #000);
  border: 1px solid #000;
  box-shadow: 0 0.1em 0.2em #999999, 0 0.3em 0.07em #666666, 0 0.5em 0.3em rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

a.button4:after {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  background: -webkit-repeating-radial-gradient(#000, #fff);
  background: repeating-radial-gradient(#000, #fff);
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

a.button4:hover {
  border: 1px solid #000;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
  border-radius: 1em;
}

a.button4:hover:after {
  border-radius: 1em;
  opacity: 1;
}
/* a.button4:focus, */

a.button4:active {
  font-size: 1.1em;
  -webkit-transition: all 0s;
  transition: all 0s;
}
/* Button 5 */

a.button5 {
  position: relative;
  z-index: 0;
  color: darkgreen;
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff;
  background: green;
  border: 3px solid grey;
  overflow: hidden;
  -webkit-transition: all 0.8s linear;
  transition: all 0.8s linear;
}

a.button5:after {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  width: 300%;
  height: 100%;
  top: 0;
  right: 0;
  background: -webkit-repeating-linear-gradient(0deg, rgba(0, 255, 0, 0.4), rgba(0, 255, 0, 0.4) 0.125em, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0.8) 0.25em);
  background: repeating-linear-gradient(90deg, rgba(0, 255, 0, 0.4), rgba(0, 255, 0, 0.4) 0.125em, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0.8) 0.25em);
  -webkit-transition: all 0.8s linear;
  transition: all 0.8s linear;
}

a.button5:hover {
  color: #fff;
  text-shadow: none;
}

a.button5:hover:after {
  width: 100%;
}
/* a.button5:focus, */

a.button5:active {
  border-color: lightgrey;
  -webkit-transform: translateY(-0.2em);
  -ms-transform: translateY(-0.2em);
  transform: translateY(-0.2em);
  -webkit-transition: all 0s;
  transition: all 0s;
}
/* Button 6 */

a.button6 {
  color: rgba(0, 0, 255, 0.8);
  background: blue -webkit-linear-gradient(270deg, rgba(255, 255, 255, 0.2) 10%, rgba(255, 255, 255, 0.2) 10%, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0.8) 90%, rgba(255, 255, 255, 0.2) 0);
  background: blue linear-gradient(180deg, rgba(255, 255, 255, 0.2) 10%, rgba(255, 255, 255, 0.2) 10%, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0.8) 90%, rgba(255, 255, 255, 0.2) 0);
  box-shadow: 0 0 0.8em 0.15em #999;
  -webkit-transition: color 0.6s, background-position 0.5s linear, background-size 0.5s linear;
  transition: color 0.6s, background-position 0.5s linear, background-size 0.5s linear;
}

a.button6:hover {
  color: #fff;
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  background-position: 0%;
  background-size: 100% 55%;
}

a.button6:active {
  background-size: 0% 0%;
  -webkit-transition: all 0s;
  transition: all 0s;
}
/* Button 7 */

a.button7 {
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  border-top: 4px solid #000;
  border-radius: 0 0 0.5em 0.5em;
  background: #990000 -webkit-linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0.3) 0);
  background: #990000 linear-gradient( rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0.3) 0);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
  -webkit-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}

a.button7:hover {
  background-color: rgba(153, 0, 0, 0.8);
  border-color: #990000;
  box-shadow: 0px 0px 0.19em 0.07em #888;
}
/* a.button7:focus */

a.button7:active {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  background: #990000;
  border-color: #000;
  box-shadow: none;
  -webkit-transform: translateY(0.2em);
  -ms-transform: translateY(0.2em);
  transform: translateY(0.2em);
}
/* Button 8 */

a.button8 {
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  background: rgb(102, 102, 51);
  border-radius: 0.4em 0;
  box-shadow: -0.2em 0.2em 0 #000;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

a.button8:hover {
  padding-left: 0.5em;
  background-color: rgba(102, 102, 51, 0.8);
}
/* a.button8:focus, */

a.button8:active {
  box-shadow: none;
  -webkit-transform: translate(-0.2em, 0.2em);
  -ms-transform: translate(-0.2em, 0.2em);
  transform: translate(-0.2em, 0.2em);
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
/* Button 9 */

a.button9 {
  position: relative;
  z-index: 0;
  text-shadow: 0 0 2px #fff;
  background: -webkit-linear-gradient(135deg, #006666 85%, transparent 0) top left, -webkit-linear-gradient(45deg, #006666 85%, transparent 0) top right, -webkit-linear-gradient(315deg, #006666 85%, transparent 0) bottom right, -webkit-linear-gradient(225deg, #006666 85%, transparent 0) bottom left;
  background: linear-gradient(-45deg, #006666 85%, transparent 0) top left, linear-gradient(45deg, #006666 85%, transparent 0) top right, linear-gradient(135deg, #006666 85%, transparent 0) bottom right, linear-gradient(-135deg, #006666 85%, transparent 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  -webkit-filter: drop-shadow( 0 0 .3em rgba(0, 0, 0, .5));
          filter: drop-shadow( 0 0 .3em rgba(0, 0, 0, .5));
}

a.button9:before {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.3) 85%, transparent 0) top left, -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 85%, transparent 0) top right, -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.3) 85%, transparent 0) bottom right, -webkit-linear-gradient(225deg, rgba(255, 255, 255, 0.3) 85%, transparent 0) bottom left;
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 85%, transparent 0) top left, linear-gradient(45deg, rgba(255, 255, 255, 0.3) 85%, transparent 0) top right, linear-gradient(135deg, rgba(255, 255, 255, 0.3) 85%, transparent 0) bottom right, linear-gradient(-135deg, rgba(255, 255, 255, 0.3) 85%, transparent 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

a.button9:hover {
  color: #003737;
}

a.button9:hover:before {
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
}
/* a.button9:focus, */

a.button9:active {
  color: #fff;
  letter-spacing: 2px;
}
/* Button 10 */

a.button10 {
  background: #660066;
  border: 1px solid #660066;
  box-shadow: 0 0 0.4em 0.15em #999, inset 0 0 2px 2px #fff;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

a.button10:hover {
  color: #660066;
  background: lightgrey;
  -webkit-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
}
/* a.button10:focus, */

a.button10:active {
  color: #fff;
  background: #660066;
  -webkit-transition: all 0s;
  transition: all 0s;
}
/* Button 11 */

a.button11 {
  position: relative;
  z-index: 0;
  text-shadow: 1px 1px #333, -1px -1px #333, -1px 1px #333, 1px -1px #333;
  background: #F5F5F5;
  border: 3px solid #FF6600;
  border-radius: 50% / 0.75em;
  box-shadow: 0 1px 0 1px #000, 0 -1px 0 1px #000;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

a.button11:before {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  top: 10%;
  right: 0;
  bottom: 10%;
  left: 0;
  background: #FF6600;
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

a.button11:hover {
  color: #FF6600;
  text-shadow: none;
  box-shadow: inset 0 0 0 2px #000;
}

a.button11:hover:before {
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
}
/* a.button11:focus, */

a.button11:active {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  background: #FF6600;
  color: #fff;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
/* Button 12 */

a.button12 {
  position: relative;
  z-index: 0;
  color: lightgrey;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
  border: 2px solid #000;
  background: #E8E840;
  box-shadow: 0 0.1em 0.2em #999999, 0 0.3em 0.07em #666666, 0 0.5em 0.3em rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

a.button12:before {
  display: block;
  position: absolute;
  content: attr(data-name);
  width: 100%;
  height: 100%;
  top: -100%;
  white-space: nowrap;
  background: #000;
  outline: 1px solid #fff;
  outline-offset: -0.5em;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

a.button12:hover:before {
  top: 0;
}
/* a.button12:focus, */

a.button12:active {
  box-shadow: 0 0 0.125em 0.125em #454538;
}
/* Button 13 */

a.button13 {
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  background: #0099FF;
  border: 3px solid #000;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 0 0 50% 50% / 0 0 .35em .35em;
  box-shadow: 0 0.1em 0.2em #999999, 0 0.5em 0.3em rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

a.button13:hover {
  color: #fff;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
  border-color: #000;
  border-left-color: transparent;
  border-right-color: transparent;
}
/* a.button13:focus, */

a.button13:active {
  -webkit-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}
/* Button 14 */

a.button14 {
  position: relative;
  color: #FF6347;
  background: #282C2D;
  border: 2px solid #fff;
  border-radius: 0.7em;
  outline: 2px solid #282C2D;
}

a.button14:before {
  position: absolute;
  content: attr(data-name);
  overflow: hidden;
  color: #fff;
  white-space: nowrap;
  max-width: 0;
  -webkit-transition: max-width 0.4s;
  transition: max-width 0.4s;
}

a.button14:hover:before {
  max-width: 100%;
}
/* a.button14:focus, */

a.button14:active {
  opacity: 0.7;
}
/* Button 15 */

a.button15 {
  position: relative;
  z-index: 0;
  text-shadow: 0 0 1px #fff;
  background: -webkit-radial-gradient(circle at top left, transparent 0.5em, #7A993D 0) top left, -webkit-radial-gradient(circle at top right, transparent 0.5em, #7A993D 0) top right, -webkit-radial-gradient(bottom right, circle, transparent 0.5em, #7A993D 0) bottom right, -webkit-radial-gradient(circle at bottom left, transparent 0.5em, #7A993D 0) bottom left;
  background: radial-gradient(circle at top left, transparent 0.5em, #7A993D 0) top left, radial-gradient(circle at top right, transparent 0.5em, #7A993D 0) top right, radial-gradient(circle at bottom right, transparent 0.5em, #7A993D 0) bottom right, radial-gradient(circle at bottom left, transparent 0.5em, #7A993D 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  -webkit-filter: drop-shadow( 0 0 .1em rgba(0, 0, 0, .5));
          filter: drop-shadow( 0 0 .1em rgba(0, 0, 0, .5));
  outline: 1px dashed #fff;
  outline-offset: -0.8em;
}

a.button15:before {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  top: 0.1em;
  right: 0.1em;
  bottom: 0.1em;
  left: 0.1em;
  background: #fff;
  border-radius: 50%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

a.button15:hover {
  color: #7A993D;
}

a.button15:hover:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
/* a.button15:focus, */

a.button15:active {
  font-size: 1.1em;
}
/*  Button 16 */

a.button16 {
  position: relative;
  z-index: 0;
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  border: 1px solid #5588AA;
  background: -webkit-radial-gradient(center, circle, #5588AA 70%, #fff);
  background: radial-gradient(circle at center, #5588AA 70%, #fff);
  box-shadow: inset 0 0 1px 1px #fff;
}

a.button16:before {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border: 1px solid #5588AA;
  border-radius: 0.5em;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
}

a.button16:hover:before {
  top: -0.5em;
  right: -0.5em;
  bottom: -0.5em;
  left: -0.5em;
  opacity: 0;
}
/* a.button16:focus, */

a.button16:active {
  opacity: 0.8;
}
/* Button 17 */

a.button17 {
  position: relative;
  z-index: 0;
  color: #000;
  text-shadow: 1px 1px 1px #fff;
  background: #fff;
  border: 2px solid #000;
  border-top-color: grey;
  border-radius: 0 0 0.5em 0.5em;
  box-shadow: 0 0.1em 0.2em #999999, 0 0.3em 0.07em #666666, 0 0.5em 0.3em rgba(0, 0, 0, 0.2);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

a.button17:before,
a.button17:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #fff;
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
}

a.button17:before {
  z-index: -1;
  content: "";
  background: #e84545;
  border-radius: 0 0 0.4em 0.4em;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all 0.35s linear 0.7s;
  transition: all 0.35s linear 0.7s;
}

a.button17:after {
  z-index: 1;
  content: attr(data-name);
  background: black;
  -webkit-transition: all 0.7s linear;
  transition: all 0.7s linear;
}

a.button17:hover:before {
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition: all 0.35s linear 0.3s;
  transition: all 0.35s linear 0.3s;
}

a.button17:hover:after {
  -webkit-transform: rotateX(270deg);
  transform: rotateX(270deg);
}
/* a.button17:focus, */

a.button17:active {
  box-shadow: 0 0 2px 2px #454538;
  -webkit-transform: translateY(0.2em);
  -ms-transform: translateY(0.2em);
  transform: translateY(0.2em);
}
/* Button 18 */

a.button18 {
  position: relative;
  background: #CCA3CC;
  border: 2px solid magenta;
  border-radius: 0.5em 0;
  overflow: hidden;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

a.button18:before {
  display: block;
  position: absolute;
  content: "";
  width: 30px;
  height: 200%;
  top: -50%;
  left: -50px;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.6) 0px, transparent 10px, transparent 20px, rgba(255, 255, 255, 0.6) 30px);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.6) 0px, transparent 10px, transparent 20px, rgba(255, 255, 255, 0.6) 30px);
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

a.button18:hover {
  text-shadow: 1px 1px 1px pink, -1px -1px 1px pink;
  border-radius: 0.6em;
  box-shadow: 0 0 0.5em 0.5em pink;
}

a.button18:hover:before {
  -webkit-animation: shine 0.4s linear;
  animation: shine 0.4s linear;
}
/* a.button18:focus, */

a.button18:active {
  box-shadow: none;
  text-shadow: none;
}

@-webkit-keyframes shine {
  from {
    opacity: 0.5;
    left: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0.4;
    left: 100%;
  }
}

@keyframes shine {
  from {
    opacity: 0.5;
    left: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0.4;
    left: 100%;
  }
}
/* Button 19 */

a.button19 {
  position: relative;
  color: lightgrey;
  text-shadow: 1px 1px 1px #fff;
  background: #000066;
  border: 6px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

a.button19:before,
a.button19:after {
  display: block;
  position: absolute;
  content: "";
  width: calc(100% + 12px);
  height: 6px;
  left: -6px;
  background: #000066;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

a.button19:before {
  top: -6px;
}

a.button19:after {
  top: 100%;
}

a.button19:hover:before,
a.button19:hover:after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

a.button19:hover {
  color: #fff;
  text-shadow: none;
  background: #8080B3;
  border-left-color: #000066;
  border-right-color: #000066;
}
/* a.button19:focus, */

a.button19:active {
  text-shadow: 1px 1px 1px #fff;
  border-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0s;
  transition: all 0s;
}
/* Button 20 */

a.button20 {
  position: relative;
  top: 0;
  color: rgb(247, 247, 247);
  text-shadow: 1px 1px 1px #fff;
  background: #3D1414;
  border: 2px dashed #fff;
  border-radius: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

a.button20:before {
  display: block;
  position: absolute;
  content: attr(data-name);
  color: #3D1414;
  background: #D1C7C7;
  border: 2px dashed #3D1414;
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

a.button20:hover {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}
/*
a.button20:focus{
   transform: rotateX(0); 
  color: #3D1414;
  background: #D1C7C7;
  border: 2px dashed #3D1414;
}

a.button20:focus:before{
	display: none;
}
*/

a.button20:active:before {
  color: #fff;
  background: #3D1414;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
/* Button 21 */

a.button21 {
  position: relative;
  z-index: 0;
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  background: #A32900;
  border-radius: 0;
}

a.button21:before,
a.button21:after {
  display: block;
  position: absolute;
  content: "";
  z-index: -1;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
}

a.button21:before {
  top: 15%;
}

a.button21:after {
  bottom: 15%;
}

a.button21:hover {
  color: #2E0C00;
  border: 4px solid #822100;
  outline: 4px solid #5B1700;
  text-shadow: 1px 1px #fff, -1px -1px #fff, -1px 1px #fff, 1px -1px #fff;
  -webkit-transition: border 0.3s linear, outline 0.3s linear 0.3s, box-shadow 0.3s linear 0.6s;
  transition: border 0.3s linear, outline 0.3s linear 0.3s, box-shadow 0.3s linear 0.6s;
}
/* a.button21:focus, */

a.button21:active {
  color: #fff;
  text-shadow: none;
}
/* Button 22 */

a.button22 {
  position: relative;
  text-shadow: 1px 1px 1px darkgreen;
  background: #8CB876;
  border-radius: 0;
  outline: 2px solid green;
  outline-offset: 0.2em;
  box-shadow: 0 0 0.2em 0.2em #C2FFA3 inset;
  overflow: hidden;
}

a.button22:before,
a.button22:after {
  position: absolute;
  content: '';
  right: 0;
  bottom: 0;
  background: green;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
}

a.button22:before {
  width: 100%;
  height: 2px;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}

a.button22:after {
  width: 2px;
  height: 100%;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

a.button22 > span:before,
a.button22 > span:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  background: green;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
}

a.button22 > span:before {
  width: 100%;
  height: 2px;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}

a.button22 > span:after {
  width: 2px;
  height: 100%;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

a.button22:hover:before,
a.button22:hover:after,
a.button22:hover > span:before,
a.button22:hover > span:after {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

a.button22:hover {
  text-shadow: 1px 1px 1px darkgreen, -1px -1px 1px darkgreen;
}
/* a.button22:focus, */

a.button22:active {
  color: #fff;
  box-shadow: none;
}
/* Button 23 */

a.button23 {
  position: relative;
  text-shadow: 1px 1px 1px #fff;
  background: #003366;
  border-radius: 0;
  outline: 1px solid #fff;
  outline-offset: -0.5em;
  box-shadow: 0 0 3px 3px #fff inset;
  overflow: hidden;
}

a.button23:before,
a.button23:after {
  position: absolute;
  content: '';
  right: 0;
  bottom: 0;
  background: #003366;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
}

a.button23:before {
  width: 100%;
  height: 2px;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}

a.button23:after {
  width: 2px;
  height: 100%;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

a.button23 > span:before,
a.button23 > span:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  background: #003366;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
}

a.button23 > span:before {
  width: 100%;
  height: 2px;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

a.button23 > span:after {
  width: 2px;
  height: 100%;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

a.button23:hover:before,
a.button23:hover:after,
a.button23:hover > span:before,
a.button23:hover > span:after {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

a.button23:hover {
  text-shadow: none;
}

.button23:hover:before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.button23:hover:after {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.button23:hover > span:before {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

.button23:hover > span:after {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}
/* a.button23:focus, */

a.button23:active {
  color: #fff;
  box-shadow: none;
}
/* Button 24 */

a.button24 {
  position: relative;
  z-index: 0;
  color: grey;
  text-shadow: 1px 1px 1px #000;
  background: -webkit-radial-gradient(center, circle, silver 70%, #333);
  background: radial-gradient(circle at center, silver 70%, #333);
  border: 1px solid #000;
  border-radius: 0.5em 0.5em 0 0;
  box-shadow: 0 .1em 3px #999999, rgba(0, 0, 0, 0.2) 0 .5em 5px;
  overflow: hidden;
}

a.button24:before,
a.button24:after {
  position: absolute;
  display: block;
  font-size: 2em;
  color: #fff;
  text-shadow: none;
  top: -55%;
}

a.button24:before {
  content: "[";
  left: 6%;
}

a.button24:after {
  content: "]";
  right: 2%;
}

a.button24 > span:before,
a.button24 > span:after {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  width: 0.2em;
  height: 200%;
  top: -50%;
  left: 50%;
  background: rgba(255, 255, 255, 0.3);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

a.button24 > span:before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

a.button24:hover:before {
  left: 8%;
}

a.button24:hover:after {
  right: 4%;
}

a.button24:hover > span:before,
a.button24:hover > span:after {
  top: -22%;
  background: rgba(255, 255, 255, 1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

a.button24:hover > span:before {
  top: -76%;
}
/* a.button24:focus, */

a.button24:active {
  opacity: 0.4;
  -webkit-transform: translateY(0.2em);
  -ms-transform: translateY(0.2em);
  transform: translateY(0.2em);
}
/* Button 25 */

a.button25 {
  position: relative;
  z-index: 0;
  background: #00B88A;
  border-radius: 0;
}

/* left and right side */
a.button25:after,
a.button25 > span:after,
/* up and bottom side */
a.button25:before,
a.button25 > span:before {
  position: absolute;
  display: block;
  content: "";
  z-index: 1;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.7);
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

a.button25:after,
a.button25 > span:after {
  width: 0.5em;
  height: 100%;
}

a.button25 > span:after {
  left: calc(100% - 0.5em);
}
/* up and bottom side */

a.button25:before,
a.button25 > span:before {
  width: 100%;
  height: 0.5em;
}

a.button25 > span:before {
  top: calc(100% - 0.5em);
}

a.button25:hover {
  background: -webkit-radial-gradient(center, circle, #00B88A 70%, #fff);
  background: radial-gradient(circle at center, #00B88A 70%, #fff);
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #333;
}

a.button25:hover:after {
  left: -0.8em;
  background: #00B88A;
}

a.button25:hover > span:after {
  left: calc(100% + 0.3em);
  background: #00B88A;
}

a.button25:hover:before {
  top: -0.8em;
  background: #00B88A;
}

a.button25:hover > span:before {
  top: calc(100% + 0.3em);
  background: #00B88A;
}
/* a.button25:focus, */

a.button25:active {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  opacity: 0.85;
}
/* Button 26 */

a.button26 {
  position: relative;
  z-index: 0;
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  background: #CC9900;
  border-radius: 0.3em;
  border: 0.3em solid rgba(0, 0, 0, 0.8);
  border-top-color: rgba(255, 255, 255, 0.3);
  border-bottom-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0.1em 0.2em #999999, 0 0.5em 0.3em rgba(0, 0, 0, 0.2);
  /* everything that sits upon the borders disappears */
  overflow: hidden;
}

a.button26:before,
a.button26:after {
  position: absolute;
  display: block;
  content: "";
  width: calc(100% + 0.6em);
  height: 0.3em;
  background: rgba(0, 0, 0, 0.8);
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

a.button26:before {
  bottom: -0.2em;
  left: 0;
}

a.button26:after {
  top: -0.2em;
  left: 0;
}

/* the curtains effect */
a.button26 > span:before,
a.button26 > span:after {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  top: 1%;
  width: 50%;
  height: 98%;
  background: rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

a.button26 > span:before {
  right: 0;
}

a.button26 > span:after {
  left: 0;
}

a.button26:hover:before,
a.button26:hover:after {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

a.button26:hover > span:before {
  right: -50%;
}

a.button26:hover > span:after {
  left: -50%;
}
/* a.button26:focus, */

a.button26:active {
  font-size: 1.02em;
}
/* Button 27 */

a.button27 {
  position: relative;
  z-index: 0;
  background: #29A3CC;
  border: 5px solid rgba(255, 255, 255, 0.6);
  border-radius: 0;
  box-shadow: 0 .1em 3px #999999, rgba(0, 0, 0, 0.2) 0 .5em 5px;
  overflow: hidden;
}

a.button27:before {
  display: block;
  position: absolute;
  z-index: 1;
  content: attr(data-name);
  width: 100%;
  height: 100%;
  top: 0;
  color: #29A3CC;
  letter-spacing: 1px;
  text-shadow: 0 0 2px #fff;
  background: rgb(169, 218, 235);
  opacity: 0;
  -webkit-transform: scale(3) translateZ(50px);
  transform: scale(3) translateZ(50px);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

a.button27:hover {
  border-color: #29A3CC;
}

a.button27:hover:before {
  opacity: 1;
  -webkit-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
}

a.button27:active {
  box-shadow: none;
  -webkit-transform: translateY(0.2em);
  -ms-transform: translateY(0.2em);
  transform: translateY(0.2em);
}
/* a.button27:focus, */

a.button27:active:before {
  color: #114456;
  -webkit-transition: all 0s;
  transition: all 0s;
}
/* Button 28 */

a.button28 {
  position: relative;
  z-index: 0;
  text-shadow: 1px 2px 1px #222;
  background: rgba(153, 0, 51, 0.8);
  border-radius: 0.4em;
  outline: 5px solid #990033;
  outline-offset: 3px;
  box-shadow: 0 0 0 8px #777;
  overflow: hidden;
}

a.button28 > span {
  display: block;
  background: rgb(153, 0, 51);
}

a.button28:before,
a.button28:after {
  display: block;
  position: absolute;
  z-index: 1;
  content: "";
  width: 100%;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

a.button28:before {
  left: -100%;
  background: rgba(255, 255, 255, 0.3);
}

a.button28:after {
  content: attr(data-name);
  color: #fff;
  left: 100%;
}

a.button28:hover > span {
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

a.button28:hover:before,
a.button28:hover:after {
  left: 0;
}
/*
 a.button28:focus{
 opacity: 0.8;
 }
 */

a.button28:active:after {
  background: #990033;
  -webkit-transition: all 0s;
  transition: all 0s;
}
/* Button 29 */

a.button29 {
  position: relative;
  color: #000;
  background: #FFFF00 -webkit-repeating-linear-gradient(135deg, #FFFF00 0, #FFFF00 25%, #000 0, #000 50%) 0 / 6px 6px;
  background: #FFFF00 repeating-linear-gradient(-45deg, #FFFF00 0, #FFFF00 25%, #000 0, #000 50%) 0 / 6px 6px;
  background-clip: content-box;
  border-radius: 0;
  border: 3px solid rgba(0, 0, 0, 0.7);
  box-shadow: 0 0.1em 0.2em #999999, 0 0.5em 0.3em rgba(0, 0, 0, 0.2);
  overflow: hidden;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

a.button29 > span {
  display: inline-block;
  width: 100%;
  line-height: 1;
  padding: 0.3em 0;
  background: #FFFF00;
}

a.button29:before,
a.button29:after {
  display: block;
  position: absolute;
  z-index: 1;
  content: attr(data-name);
  width: 100%;
  height: 100%;
  top: 0;
  color: #000;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

a.button29:hover {
  background: #FFFF00;
}

a.button29:hover:before {
  font-size: 1.1em;
  top: 28%;
  left: 12%;
}

a.button29:hover:after {
  font-size: 0.8em;
  top: -22%;
  left: -15%;
}

a.button29:active {
  background: #000;
  -webkit-transition: all 0s;
  transition: all 0s;
}

a.button29:active:after,
a.button29:active:before {
  color: transparent;
  -webkit-transition: all 0s;
  transition: all 0s;
}
/* Button 30 */

a.button30 {
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

a.button30:before, a.button30:after {
  display: block;
  position: absolute;
  content: attr(data-name);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #fff;
  background: #483D8B;
  border: 1px dashed #fff;
  border-left: 3px solid rgba(255, 255, 255, 0.5);
  border-right: 3px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0.1em 0.2em #999999, 0 0.5em 0.3em rgba(0, 0, 0, 0.2);
}

a.button30:after{
  background: #A49EC5;
  border-left-color: #483D8B;
  border-right-color: #483D8B;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

a.button30:hover
{
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

a.button30:active:before {
  box-shadow: none;
  -webkit-transition: all 0s;
  transition: all 0s;
}
/* Button 31 */

a.button31 {
  position: relative;
  z-index: 0;
  background: -webkit-linear-gradient(135deg, rgba(47, 79, 79, 0.9) 100%, transparent 0) top left, -webkit-linear-gradient(45deg, rgba(47, 79, 79, 0.7) 100%, #2F4F4F 0) top right, -webkit-linear-gradient(315deg, rgba(47, 79, 79, 0.9) 100%, transparent 0) bottom right, -webkit-linear-gradient(225deg, rgba(47, 79, 79, 0.7) 100%, #2F4F4F 0) bottom left;
  background: linear-gradient(-45deg, rgba(47, 79, 79, 0.9) 100%, transparent 0) top left, linear-gradient(45deg, rgba(47, 79, 79, 0.7) 100%, #2F4F4F 0) top right, linear-gradient(135deg, rgba(47, 79, 79, 0.9) 100%, transparent 0) bottom right, linear-gradient(-135deg, rgba(47, 79, 79, 0.7) 100%, #2F4F4F 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  border: 1px dashed #2F4F4F;
  border-radius: 0;
  -webkit-transition: border 0.6s linear;
  transition: border 0.6s linear;
}

/* left and right side */
a.button31:after,
a.button31 > span:after,
/* up and bottom side */
a.button31:before,
a.button31 > span:before {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  width: 0.5em;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(47, 79, 79, 0.7);
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

a.button31 > span:after {
  left: calc(100% - 0.5em);
}
/* up and bottom side */

a.button31:before,
a.button31 > span:before {
  z-index: 1;
  width: 50%;
  height: 0.5em;
}

a.button31 > span:before {
  top: calc(100% - 0.5em);
  left: 50%;
}

a.button31:hover {
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #333;
  background: -webkit-linear-gradient(135deg, rgba(47, 79, 79, 0.7) 85%, transparent 0) top left, -webkit-linear-gradient(45deg, rgba(47, 79, 79, 0.9) 100%, #2F4F4F 0) top right, -webkit-linear-gradient(315deg, rgba(47, 79, 79, 0.7) 85%, transparent 0) bottom right, -webkit-linear-gradient(225deg, rgba(47, 79, 79, 0.9) 100%, #2F4F4F 0) bottom left;
  background: linear-gradient(-45deg, rgba(47, 79, 79, 0.7) 85%, transparent 0) top left, linear-gradient(45deg, rgba(47, 79, 79, 0.9) 100%, #2F4F4F 0) top right, linear-gradient(135deg, rgba(47, 79, 79, 0.7) 85%, transparent 0) bottom right, linear-gradient(-135deg, rgba(47, 79, 79, 0.9) 100%, #2F4F4F 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  border-color: transparent;
  -webkit-transition: border-color 0s;
  transition: border-color 0s;
}

a.button31:hover:after {
  left: -0.8em;
  top: -0.8em;
}

a.button31:hover > span:after {
  top: 0.8em;
  left: calc(100% + 0.3em);
}

a.button31:hover:before {
  top: -0.8em;
  left: -0.8em;
}

a.button31:hover > span:before {
  top: calc(100% + 0.3em);
  left: calc(50% + 0.8em);
}
/* a.button31:focus, */

a.button31:active {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  opacity: 0.85;
}
/* Button 32 */

a.button32 {
  position: relative;
  z-index: 0;
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  background: #FF4500;
  background-clip: content-box;
  border: 5px solid rgba(255, 255, 255, 0.7);
  border-radius: 0.1em;
  box-shadow: 0 0.1em 0.2em #999999, 0 0.5em 0.3em rgba(0, 0, 0, 0.2), 0 -0.1em 0.2em #999999, 0 -0.3em 0.3em rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

a.button32:before,
a.button32:after,
a.button32 > span:before,
a.button32 > span:after {
  display: block;
  position: absolute;
  z-index: 1;
  content: "";
  width: 50%;
  height: 50%;
  background: rgba(255, 255, 255, 0.4);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

a.button32:before {
  top: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.2);
}

a.button32:after {
  top: 0;
  left: 0;
}

a.button32 > span:after {
  top: 50%;
  bottom: 0;
  background: rgba(255, 255, 255, 0.2);
}

a.button32 > span:before {
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.4);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

a.button32:hover {
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #333;
}

a.button32:hover:after {
  -webkit-transform: translate(-100%, -100%);
  -ms-transform: translate(-100%, -100%);
  transform: translate(-100%, -100%);
}

a.button32:hover:before {
  -webkit-transform: translate(100%, -100%);
  -ms-transform: translate(100%, -100%);
  transform: translate(100%, -100%);
}

a.button32:hover > span:after {
  -webkit-transform: translate(-100%, 100%);
  -ms-transform: translate(-100%, 100%);
  transform: translate(-100%, 100%);
}

a.button32:hover > span:before {
  -webkit-transform: translate(100%, 100%);
  -ms-transform: translate(100%, 100%);
  transform: translate(100%, 100%);
}
/* a.button32:focus, */

a.button32:active {
  text-shadow: none;
  box-shadow: none;
  -webkit-transition: all 0s;
  transition: all 0s;
}
/* Button 33 */

a.button33 {
  position: relative;
  z-index: 0;
  background: #002c6a;
  border-radius: 0;
  outline: 1px solid #f8d99b;
  outline-offset: -0.8em;
  box-shadow: 0 0 0 4px #e45171, 0 0.32em 0.32em #222;
}

a.button33:after,
a.button33 > span:after,
a.button33 > span:before {
  position: absolute;
  content: "";
  display: block;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  background: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

a.button33 > span:before,
a.button33 > span:after {
  width: 4px;
  height: calc(100% + 8px);
  top: -4px;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  background: #002C6A;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

a.button33 > span:before {
  right: -4px;
}

a.button33 > span:after {
  left: -4px;
}

a.button33:hover {
  text-shadow: 1px 1px 1px #002C6A, -1px -1px 1px #002C6A;
  outline: none;
}

a.button33:hover:after {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

a.button33:hover > span:before,
a.button33:hover > span:after {
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
}
/* a.button33:focus, */

a.button33:active {
  outline: 1px dashed #002C6A;
  outline-offset: -0.8em;
  -webkit-transform: translateY(0.2em);
  -ms-transform: translateY(0.2em);
  transform: translateY(0.2em);
}
/* Button 34 */

a.button34 {
  position: relative;
  background: #453953;
  border-radius: 0.4em;
  outline: .6em solid #25161b;
  box-shadow: 0 0 0 .4em #25161b, 0 0.7em 0.43em #333;
  overflow: hidden;
}

a.button34:before,
a.button34:after {
  display: block;
  position: absolute;
  content: attr(data-name);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #25161b;
  background: #975a5e;
  border-radius: 0.4em;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

a.button34:before {
  top: -100%;
  color: #FFF;
  background: #453953;
}

a.button34:hover:before {
  top: 0;
}

a.button34:hover:after {
  top: 100%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

a.button34:active {
  -webkit-transform: translateY(0.2em);
  -ms-transform: translateY(0.2em);
  transform: translateY(0.2em);
}

a.button34:active:before {
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff;
  -webkit-transition: all 0s;
  transition: all 0s;
}
/* Button 35 */

a.button35 {
  position: relative;
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  background: #a7425c;
  border-radius: 0 0 0.4em 0.4em;
  box-shadow: inset 0 0.38em #563761, 0 0.2em 0.32em #333;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

a.button35:after {
  display: block;
  position: absolute;
  content: attr(data-name);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #f3825f;
  border-radius: 0 0 0.4em 0.4em;
  box-shadow: inset 0 0.38em #563761;
  -webkit-transform: rotateX(270deg);
  transform: rotateX(270deg);
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

a.button35:hover:after {
  -webkit-transform: rotateX(10deg);
  transform: rotateX(10deg);
}
/* a.button35:focus, */

a.button35:active {
  box-shadow: none;
  -webkit-transform: translateY(0.2em);
  -ms-transform: translateY(0.2em);
  transform: translateY(0.2em);
}
/* Button 36 */

a.button36 {
  position: relative;
  text-shadow: 1px 1px 1px #333, -1px -1px 1px #333;
  background: grey;
  border-radius: 0 0 0.2em 0.2em;
  box-shadow: 0.125em 0.125em 0.125em rgba(0, 0, 0, 0.7), inset -0.125em -0.125em 0.125em rgba(255, 255, 255, 0.7);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

a.button36:after {
  display: block;
  position: absolute;
  content: "";
  width: 1.2em;
  height: 1.2em;
  top: 0;
  left: 0;
  background: -webkit-linear-gradient(315deg, #FAFAFA 40%, #C0C0C0 55%, #FAFAFA 95%, #808080 100%);
  background: linear-gradient(135deg, #FAFAFA 40%, #C0C0C0 55%, #FAFAFA 95%, #808080 100%);
  border-bottom-right-radius: 0.3em;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

a.button36:hover {
  padding-left: 1em;
}

a.button36:hover:after {
  width: 1.6em;
  height: 1.6em;
}
/* a.button36:focus, */

a.button36:active {
  box-shadow: 0.125em 0.125em 0.125em rgba(0, 0, 0, 0.1);
  -webkit-transform: translate(0.1em, 0.1em);
  -ms-transform: translate(0.1em, 0.1em);
  transform: translate(0.1em, 0.1em);
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}
/* Button 37 */

a.button37 {
  position: relative;
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  -webkit-transition: color 0.6s linear;
          transition: color 0.6s linear;
}

a.button37:before,
a.button37:after {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #d35823;
  border: 1px solid #000;
  box-shadow: inset 0 0 2px 2px #eee, 0 0 3px #777;
  -webkit-transform: skew(-15deg);
      -ms-transform: skew(-15deg);
          transform: skew(-15deg);
  -webkit-transition: all 0.3s linear;
          transition: all 0.3s linear;
}

a.button37:hover {
  color: #fafafa;
}

a.button37:after {
  background: rgba(255, 255, 255, 0.2);
  -webkit-transform: skew(-15deg) scaleX(0);
      -ms-transform: skew(-15deg) scaleX(0);
          transform: skew(-15deg) scaleX(0);
  -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
}

a.button37:hover:before {
  -webkit-transform: skew(15deg);
      -ms-transform: skew(15deg);
          transform: skew(15deg);
}

a.button37:hover:after {
  -webkit-transform: skew(15deg) scale(1);
      -ms-transform: skew(15deg) scale(1);
          transform: skew(15deg) scale(1);
}
/* a.button.37:focus, */

a.button37:active {
  color: #fff;
  text-shadow: 1px 1px 1px #fff;
  -webkit-transition: color 0s;
          transition: color 0s;
}
/* Button 38 */

a.button38 {
  position: relative;
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  background: #BDB76B;
  border-top: 1px solid #000;
  border-bottom: 3px solid #000;
  border-radius: 50% / 100% 100% 0 0;
  -webkit-filter: drop-shadow( 0 0 0.1em rgba(0, 0, 0, .5));
          filter: drop-shadow( 0 0 0.1em rgba(0, 0, 0, .5));
}

a.button38:before,
a.button38:after {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 100% 0 0 0;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transition: all 0.35s linear;
          transition: all 0.35s linear;
}

a.button38:after {
  left: 50%;
  border-radius: 0 100% 0 0;
  -webkit-transform-origin: 0% 50%;
      -ms-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
}

a.button38:hover:before {
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
}

a.button38:hover:after {
  -webkit-transform: rotateY(-90deg);
          transform: rotateY(-90deg);
}
/* a.button38:focus, */

a.button38:active {
  color: #eee;
  opacity: 0.8;
  -webkit-transition: all 0s;
          transition: all 0s;
}
/* Button 39 */

a.button39 {
  position: relative;
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  line-height: 2.5;
  margin-top: -10px;
  background: #daf4f5;
  border-radius: 0;
  box-shadow: 0 0.2em 0.32em #333;
  -webkit-transform: scale(1.1, 1.2) perspective(.5em) rotateX(2deg);
          transform: scale(1.1, 1.2) perspective(.5em) rotateX(2deg);
}

a.button39:before,
a.button39:after,
a.button39 > span:before {
  display: block;
  position: absolute;
  z-index: 1;
  content: attr(data-name);
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: right;
  background: #abcecf;
  box-shadow: inset 0.38em 0 #80a3a2;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-origin: 0 50%;
      -ms-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-transition: all 0.9s ease-in-out;
          transition: all 0.9s ease-in-out;
}

a.button39:after {
  content: attr(data-name2);
  left: 50%;
  text-align: left;
  box-shadow: inset -0.38em 0 #80a3a2;
  -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
}

a.button39 > span:before {
  z-index: -1;
  content: "";
  width: 70%;
  left: 15%;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: none;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: 50%;
      -ms-transform-origin: 50%;
          transform-origin: 50%;
}

a.button39:hover > span:before {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}

a.button39:hover:before {
  -webkit-transform: rotateY(-270deg);
          transform: rotateY(-270deg);
}

a.button39:hover:after {
  -webkit-transform: rotateY(270deg);
          transform: rotateY(270deg);
}
/* a.button39:focus, */

a.button39:active {
  box-shadow: none;
  -webkit-transform: translateY(0.2em);
  -ms-transform: translateY(0.2em);
  transform: translateY(0.2em);
  -webkit-transition: all 0.2s linear;
          transition: all 0.2s linear;
}
/* Button 40 */

a.button40 {
  position: relative;
  z-index: 0;
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;
  width: 5.3em;
  height: 5.3em;
  line-height: 5.3;
  background: #ddbc89;
  border-radius: 50%;
  box-shadow: 0 0 1em #888;
}

a.button40:before {
  display: block;
  position: absolute;
  z-index: 1;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 3px solid #aa512f;
  border-radius: 50%;
  border-left-color: #333;
  border-right-color: #333;
  background: transparent;
  -webkit-transition: all 0.5s linear;
          transition: all 0.5s linear;
}

a.button40:after {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: #ede7cf;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.5s linear;
          transition: all 0.5s linear;
}

a.button40:hover:before {
  -webkit-transform: rotate(720deg);
      -ms-transform: rotate(720deg);
          transform: rotate(720deg);
}

a.button40:hover:after {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}

a.button40:active {
  box-shadow: none;
}

/* 
The height is computed exclusively from the line-height of the <a> element
(which is inherited to the span as long as we set it as a block element).
The span element (as a block setted) inherits the width of its parent - the <a> element -
that's why the span takes all over the room we once described the <a> element.
(Of course this declaration is not necessary always, as we set the dimensions of span's pseudo elements,
these pseudo elements are absolutely positioned but relative to the <a> element, 
except if we declare position: relative to the span element )
)

The Inline Elements Which are Absolutely Positioned Behave as Block-level Elements

An inline element whose position is set to absolute or fixed, obtains the capabilities of the block-level elements. 
This table summarizes what types of elements are converted into block-level elements.
https://drafts.csswg.org/css-position-3/#dis-pos-flo

When a positioned absolute pseudo element takes the display: block property it is positioned as left: 0
If it's Only positioned absolute then it overlaps the element's content (in :before pseudo element).

The perspective CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user.
the perspective property doesn't affect how the element is rendered; it simply enables a 3D-space for children elements. 
This is the main difference between the transform: perspective() function and the perspective property.
The first gives element depth while the later creates a 3D-space shared by all its transformed children.
 
In fact,the only difference between the function and the property is that the value
supplied to the property applies only to its child elements, not to itself.
 
The transform-style property, when applied to an element, determines if that element's children are positioned in 3D space, or flattened. 
*/