@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
button.icon-slide-left, button.icon-slide-right, button.increase-letter-space, button.flip-horizontal, button.flip-vertical, button.skew-vertical, button.skew-horizontal, button.button-rotate-shrink, button.button-rotate-grow, button.button-rotate, button.float-right, button.float-left, button.float-up, button.float-down, button.scale-decrease, button.scale-increase, button.shadow-decrease, button.shadow-increase, button.shadow-float, button.text-color, button.bg-color, button.text-blur, button.button-blur, button.grayscale-decrease, button.grayscale-increase, button.opacity-decrease, button.opacity-increase, button.bg-text-show-bg:hover, button.bg-text, button.bg-show:hover, button.bg-hide {
  color: #FFF;
  background: #2196F3;
  border-color: #2196F3;
}

button.swipe-overlay, button.swipe-overlay-out, button.border-color, button.border-text-color, button.border-dotted, button.border-dashed, button.radius-decrease, button.radius-increase, button.slide-down, button.slide-left, button.slide-right, button.slide-up, button.radial-out, button.radial-in, button.bg-text-show-border:hover, button.bg-show, button.bg-hide:hover {
  color: #2196F3;
  border-color: #2196F3;
  background: transparent;
}

button.bg-text-show-border, button.bg-text-show-bg, button.bg-text:hover {
  color: #2196F3;
  border-color: transparent;
  background: transparent;
}

button.swipe-overlay::after, button.swipe-overlay-out::after, button.slide-down::after, button.slide-left::after, button.slide-right::after, button.slide-up::after, button.radial-out::after, button.radial-in::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #2196F3;
  width: 150%;
  padding-top: 150%;
  transition: 0.25s ease;
}

button.icon-slide-left::after, button.icon-slide-right::after, button.slide-down::after, button.slide-left::after, button.slide-right::after, button.slide-up::after, button.radial-out::after, button.radial-in::after, .wrap div em {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

button.icon-slide-left, button.icon-slide-right, button.swipe-overlay, button.swipe-overlay-out, button.slide-down, button.slide-left, button.slide-right, button.slide-up, button.radial-out, button.radial-in {
  position: relative;
  overflow: hidden;
}

button.shadow-decrease, button.shadow-increase:hover, button.shadow-float:hover {
  box-shadow: 0 5px 5px -5px rgba(33, 150, 243, 0.15), 0 10px 10px -5px rgba(33, 150, 243, 0.15), 0 15px 15px -5px rgba(33, 150, 243, 0.15), 0 20px 20px -5px rgba(33, 150, 243, 0.15);
}

.wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 25px;
  padding: 25px;
}
@media screen and (max-width: 1000px) {
  .wrap {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 800px) {
  .wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .wrap {
    grid-template-columns: 1fr;
  }
}
.wrap div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 25px;
  position: relative;
  border: 1px solid rgba(33, 150, 243, 0.25);
}
.wrap div p {
  margin: 15px 0 0;
  font-family: "Ubuntu", sans-serif;
}
.wrap div em {
  position: absolute;
  top: 0;
  left: 50%;
  font-style: normal;
  font-size: 12px;
  padding: 5px 10px;
  background: #FFF;
  border: 1px solid rgba(33, 150, 243, 0.25);
}

button {
  padding: 10px 20px;
  border-radius: 6px;
  border-width: 2px;
  border-style: solid;
  font-size: 20px;
  font-family: "Ubuntu", sans-serif;
  cursor: pointer;
  transition: 0.25s ease;
}
button > span {
  position: relative;
  z-index: 1;
}
button.radial-out, button.radial-in {
  color: #FFF;
}
button.radial-out::after, button.radial-in::after {
  border-radius: 999px;
  top: 100%;
}
button.radial-out:hover, button.radial-in:hover {
  color: #2196F3;
}
button.radial-out:hover:after, button.radial-in:hover:after {
  top: 300%;
}
button.radial-in {
  color: #2196F3;
}
button.radial-in::after {
  top: 300%;
}
button.radial-in:hover {
  color: #FFF;
}
button.radial-in:hover:after {
  top: 100%;
}
button.slide-down, button.slide-left, button.slide-right, button.slide-up {
  color: #FFF;
}
button.slide-down:hover, button.slide-left:hover, button.slide-right:hover, button.slide-up:hover {
  color: #2196F3;
}
button.slide-down:hover:after, button.slide-left:hover:after, button.slide-right:hover:after, button.slide-up:hover:after {
  top: 300%;
}
button.slide-up {
  color: #2196F3;
}
button.slide-up::after {
  top: 300%;
}
button.slide-up:hover {
  color: #FFF;
}
button.slide-up:hover:after {
  top: 50%;
}
button.slide-left:hover:after, button.slide-right:hover:after {
  left: -90%;
  top: 50%;
}
button.slide-right:hover:after {
  left: 190%;
}
button.radius-increase:hover {
  border-radius: 30px;
}
button.radius-decrease {
  border-radius: 30px;
}
button.radius-decrease:hover {
  border-radius: 6px;
}
button.border-dashed:hover {
  border-style: dashed;
}
button.border-dotted:hover {
  border-style: dotted;
}
button.opacity-increase {
  opacity: 0.75;
}
button.opacity-increase:hover {
  opacity: 1;
}
button.opacity-decrease:hover {
  opacity: 0.75;
}
button.grayscale-increase:hover {
  filter: grayscale(1);
}
button.grayscale-decrease {
  filter: grayscale(1);
}
button.grayscale-decrease:hover {
  filter: grayscale(0);
}
button.button-blur:hover {
  filter: blur(6px);
}
button.text-blur:hover span {
  filter: blur(6px);
}
button.bg-color:hover {
  background: #FF4081;
  border-color: #FF4081;
}
button.text-color:hover {
  color: #FF4081;
}
button.border-color:hover, button.border-text-color:hover {
  border-color: #FF4081;
}
button.border-text-color:hover {
  color: #FF4081;
}
button.shadow-decrease:hover {
  box-shadow: none;
}
button.shadow-float:hover {
  transform: translateY(-6px);
}
button.scale-increase:hover {
  transform: scale(1.1);
}
button.scale-decrease:hover {
  transform: scale(0.9);
}
button.float-down:hover {
  transform: translateY(6px);
}
button.float-up:hover {
  transform: translateY(-6px);
}
button.float-left:hover {
  transform: translateX(-6px);
}
button.float-right:hover {
  transform: translateX(6px);
}
button.button-rotate:hover {
  transform: rotate(-6deg);
}
button.button-rotate-grow:hover {
  transform: rotate(-6deg) scale(1.1);
}
button.button-rotate-shrink:hover {
  transform: rotate(-6deg) scale(0.9);
}
button.skew-horizontal:hover {
  transform: skewX(-6deg);
}
button.skew-vertical:hover {
  transform: skewY(-6deg);
}
button.flip-horizontal, button.flip-vertical {
  transition: 0.5s ease;
}
button.flip-horizontal:hover, button.flip-vertical:hover {
  transform: rotateY(360deg);
}
button.flip-vertical:hover {
  transform: rotateX(360deg);
}
button.increase-letter-space:hover {
  letter-spacing: 5px;
}
button.swipe-overlay::after, button.swipe-overlay-out::after {
  transform: rotate(25deg);
  top: -100%;
  left: -190%;
}
button.swipe-overlay:hover, button.swipe-overlay-out:hover {
  color: #FFF;
}
button.swipe-overlay:hover:after, button.swipe-overlay-out:hover:after {
  left: -30%;
}
button.swipe-overlay-out::after {
  transition: 0.5s ease;
}
button.swipe-overlay-out:hover {
  color: #2196F3;
}
button.swipe-overlay-out:hover:after {
  left: 130%;
}
button.icon-slide-left::after, button.icon-slide-right::after {
  content: "👨‍🚀";
  position: absolute;
  left: -20%;
  transition: 0.25s ease;
}
button.icon-slide-left span, button.icon-slide-right span {
  transition: 0.25s ease;
}
button.icon-slide-left:hover span, button.icon-slide-right:hover span {
  margin-left: 20px;
}
button.icon-slide-left:hover:after, button.icon-slide-right:hover:after {
  left: 20px;
}
button.icon-slide-right::after {
  left: 120%;
}
button.icon-slide-right:hover span {
  margin-left: 0;
  margin-right: 20px;
}
button.icon-slide-right:hover:after {
  left: calc(100% - 20px);
}