/* GANTRY5 DEVELOPMENT MODE ENABLED.
 *
 * WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost!
 *
 * For more information on modifying CSS, please read:
 *
 * http://docs.gantry.org/gantry5/configure/styles
 * http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
 */

#g-main .button {
  position: relative;
  border-radius: 0px;
  display: inline-block;
  text-align: center;
  border: none;
  background: none;
  z-index: 1;
  font-size: 0.85rem;
  line-height: 18px;
  background: #2345774a;
  background: linear-gradient(-45deg, transparent 10px, #2345774a 10px);
  padding: 1.6rem 3.1rem;
  transform: translateX(0px);
  color: #00f5ff;
  text-transform: uppercase;
  opacity: 1;
}
#g-main .button.button-outline {
  color: white;
  background: linear-gradient(-45deg, transparent 10px, #2345774a 10px) !important;
}
#g-main .button.button-outline:hover {
  background: linear-gradient(-45deg, transparent 10px, white 10px) !important;
}
#g-main .button i.fa, #g-main .button i.fas {
  font-size: 18px;
  vertical-align: bottom;
  transition: 0.2s all;
  margin-left: 5px;
}
#g-main .button:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: white;
  border-radius: 0px;
  clip-path: inset(50% 50% 50% 50%);
  background: linear-gradient(to right, #00e6f6 2%, white 2%, white 90%, transparent 90%), linear-gradient(-45deg, transparent 3%, #00e6f6 3%, #00e6f6 5%, #fff 5%, #fff 95%);
  z-index: -1;
}
#g-main .button:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 1px 100%, 1px calc(100% - 1px), calc(100% - 14px) calc(100% - 1px), calc(100% - 1px) calc(100% - 14px), calc(100% - 1px) 1px, 1px 1px, 1px 100%, 0 100%);
  /*clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 0);
            box-shadow: inset 0px 0px 0px 1px #00f5ff;
            background: linear-gradient(-45deg, #00f5ff 10px, transparent 10px);*/
  background: #00f5ff;
}
#g-main .button.button-primary {
  background: linear-gradient(-45deg, transparent 10px, #00f5ff 10px);
  color: #122138 !important;
}
#g-main .button:hover {
  background: #2345774a;
  color: #424753 !important;
  transform: translateX(10px);
  background: linear-gradient(-45deg, transparent 10px, white 10px);
}
#g-main .button:hover:before {
  /*transform:translateX(0%) skewX(-45deg) scaleX(1.3);*/
  animation: 1s shadowAppear infinite alternate;
  animation-timing-function: steps(5, end);
}
#g-main .button:hover:after {
  /*transform:translateX(0%) skewX(-45deg) scaleX(1.3);*/
  opacity: 0;
}
#g-main .button.button-dense {
  padding: 0.9rem 1.6rem;
}
#g-main .button.button-icon:not(.button-dense):hover {
  padding-left: 2.125rem;
  padding-right: 4.125rem;
}
#g-main .button.button-icon.button-dense:hover {
  padding-left: 0.4rem;
  padding-right: 2.4rem;
}
#g-main .button .icon-before {
  margin-right: 5px;
}
#g-main .button .icon-after {
  margin-left: 5px;
}
@keyframes buttonHover {
  0% {
    padding-left: 3.125rem;
    padding-right: 3.125rem;
  }
  100% {
    padding-left: 2.125rem;
    padding-right: 4.125rem;
  }
}
@keyframes buttonDenseHover {
  from {
    padding-left: 0.4rem;
    padding-right: 2.4rem;
  }
  to {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
}
@keyframes buttonBlinkHover {
  0% {
    transform: translateX(-70%) skewX(45deg) scaleX(0.3);
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    transform: translateX(70%) skewX(45deg) scaleX(0.3);
    opacity: 0;
  }
}
@keyframes shadowAppear {
  0% {
    opacity: 1;
    transform: translateZ(0);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  2% {
    clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
    transform: translate(-5px);
  }
  6% {
    clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
    transform: translate(5px);
  }
  8% {
    clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
    transform: translate(-5px);
  }
  9% {
    clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
    transform: translate(0);
  }
  10% {
    clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
    transform: translate3d(5px, 0, 0);
  }
  13% {
    clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
    transform: translateZ(0);
  }
  13.1% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    transform: translate3d(5px, 0, 0);
  }
  15% {
    clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
    transform: translate3d(5px, 0, 0);
  }
  20% {
    clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
    transform: translate3d(-5px, 0, 0);
  }
  20.1% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    transform: translate3d(5px, 0, 0);
  }
  25% {
    clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
    transform: translate3d(5px, 0, 0);
  }
  30% {
    clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
    transform: translate3d(-5px, 0, 0);
  }
  30.1% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
  35% {
    clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
    transform: translate(-5px);
  }
  40% {
    clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
    transform: translate(5px);
  }
  45% {
    clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
    transform: translate(-5px);
  }
  50% {
    clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
    transform: translate(0);
  }
  55% {
    clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0);
    transform: translate3d(5px, 0, 0);
  }
  60% {
    clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0);
    transform: translateZ(0);
    opacity: 1;
  }
  60.1% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 1;
  }
  to {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 1;
  }
}
/*# sourceMappingURL=button_13.css.map */