.about p {
  font-size: 2rem;
}
.example .block {
  border: 2px solid #444;
  font-family: GothamPro, sans-serif;
  font-size: 1.5rem;
  overflow: hidden;
}
.example .block + .block {
  margin-top: 1rem;
}
.example .transition_1 {
  -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -o-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.example .transition_1:hover {
  border-color: transparent;
  background: #41c4e0;
  transform: scale(1.1);
}
.example .transition_prop_1,
.example .transition_prop_2,
.example .transition_prop_3,
.example .transition_prop_4 {
  width: 100%;
  height: 100px;
}
.example .transition_prop_1:hover,
.example .transition_prop_2:hover,
.example .transition_prop_3:hover,
.example .transition_prop_4:hover {
  width: 350px;
  background: #41c4e0;
  border-color: transparent;
}
.example .transition_prop_1 {
  -webkit-transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -moz-transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -o-transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.example .transition_prop_2 {
  -webkit-transition: background 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -moz-transition: background 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -o-transition: background 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: background 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.example .transition_prop_3 {
  -webkit-transition: background 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -moz-transition: background 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -o-transition: background 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: background 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition-property: width, border;
}
.example .transition_prop_4 {
  -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -o-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.example .transition_dur_1,
.example .transition_dur_2,
.example .transition_dur_3 {
  -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -o-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.example .transition_dur_1:hover,
.example .transition_dur_2:hover,
.example .transition_dur_3:hover {
  background: #41c4e0;
}
.example .transition_dur_1 {
  transition-duration: 1s;
}
.example .transition_dur_2 {
  transition-duration: 2.5s;
}
.example .transition_dur_3 {
  transition-duration: 0s;
}
.example .transition_del_1,
.example .transition_del_2,
.example .transition_del_3 {
  -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -o-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.example .transition_del_1:hover,
.example .transition_del_2:hover,
.example .transition_del_3:hover {
  background: #41c4e0;
}
.example .transition_del_1 {
  transition-delay: 0s;
}
.example .transition_del_2 {
  transition-delay: 0.5s;
}
.example .transition_del_3 {
  transition-delay: 2s;
}
.example .transition_func:hover > div {
  width: 100%;
}
.example .transition_func_1,
.example .transition_func_2,
.example .transition_func_3,
.example .transition_func_4,
.example .transition_func_5 {
  -webkit-transition: all 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -moz-transition: all 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -o-transition: all 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: all 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  width: 0;
  height: 100px;
}
.example .transition_func_1 {
  transition-timing-function: linear;
}
.example .transition_func_2 {
  transition-timing-function: ease;
}
.example .transition_func_3 {
  transition-timing-function: ease-in;
}
.example .transition_func_4 {
  transition-timing-function: ease-out;
}
.example .transition_func_5 {
  transition-timing-function: ease-in-out;
}
@keyframes example_1 {
  from {
    background: #ddd;
    width: 50%;
    color: #000;
  }
  to {
    background: darkgreen;
    width: 75%;
    color: white;
  }
}
.example .animation_1:hover {
  animation: example_1 2s;
}
@keyframes example_2 {
  0% {
    background: #1d1d1d;
  }
  50% {
    background: red;
  }
  100% {
    background: yellow;
  }
}
.example .animation_2:hover {
  animation: example_2 2s;
}
.example .animation_it_count_1:hover {
  animation: example_2 2s 3;
}
.example .animation_it_count_2:hover {
  animation: example_2 2s infinite;
}
.example .animation_dir_1:hover {
  animation: example_2 2s;
}
.example .animation_dir_2:hover {
  animation: example_2 2s reverse;
}
.example .animation_dir_3:hover {
  animation: example_2 2s alternate 2;
}
.example .animation_dir_4:hover {
  animation: example_2 2s alternate-reverse 2;
}
.example .animation_fill_1:hover {
  animation: example_2 2s;
}
.example .animation_fill_2:hover {
  animation: example_2 2s forwards;
}
.example .animation_fill_3:hover {
  animation: example_2 2s reverse forwards;
}
/*# sourceMappingURL=css_animations.css.map */