.cl-style-1:before, .cl-style-1:after {
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s
}

.cl-style-1:before {
  margin-right: 10px;
  content: '[';
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  transform: translateX(20px)
}

.cl-style-1:after {
  margin-left: 10px;
  content: ']';
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  transform: translateX(-20px)
}

.cl-style-1:hover::before, .cl-style-1:hover::after, .cl-style-1:focus::before, .cl-style-1:focus::after {
  opacity: 1;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px)
}

.cl-style-2 {
  line-height: 44px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px
}

.cl-style-2 {
  position: relative;
  display: inline-block;
  padding: 0;
  background: #2195de;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d
}

.cl-style-2::before {
  position: absolute;
  padding: 20px 25px;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0965a0;
  content: attr(data-hover);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0
}

.cl-style-2:hover, .cl-style-2:focus {
  -webkit-transform: rotateX(90deg) translateY(-22px);
  -moz-transform: rotateX(90deg) translateY(-22px);
  transform: rotateX(90deg) translateY(-22px)
}

.cl-style-2:hover::before, .cl-style-2:focus::before {
  background: #28a2ee;
  padding: 20px 25px
}

.cl-style-3 {
  padding: 8px 0;
  position: relative;
  display: inline-block
}

.cl-style-3::after {
  position: absolute;
  top: calc(100% - 14px);
  left: 0;
  width: 100%;
  height: 4px;
  background: #28a2ee;
  content: '_';
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  transform: translateY(10px)
}

.cl-style-3:hover::after, .cl-style-3:focus::after {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px)
}

.cl-style-4 {
  padding: 0 0 10px;
  position: relative;
  display: inline-block
}

.cl-style-4::after {
  position: absolute;
  top: calc(100% - 10px);
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  content: '';
  opacity: 0;
  -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
  transition: height 0.3s, opacity 0.3s, transform 0.3s;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  transform: translateY(-10px)
}

.cl-style-4:hover::after, .cl-style-4:focus::after {
  height: 5px;
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px)
}

.cl-style-5 {
  overflow: hidden
}

.cl-style-5 {
  position: relative;
  display: inline-block;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s
}

.cl-style-5::before {
  position: absolute;
  top: 100%;
  width: 100%;
  left: 0;
  right: 0;
  content: attr(data-hover);
  font-weight: 700;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.cl-style-5:hover, .cl-style-5:focus {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%)
}

.cl-style-6 {
  margin: 0 10px;
  padding: 10px 20px;
  position: relative;
  display: inline-block
}

.cl-style-6::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: '';
  -webkit-transition: top 0.3s;
  -moz-transition: top 0.3s;
  transition: top 0.3s
}

.cl-style-6::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: #fff;
  content: '';
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  transition: height 0.3s
}

.cl-style-6:hover::before {
  top: 100%;
  opacity: 1
}

.cl-style-6:hover::after {
  height: 100%
}

.cl-style-7 {
  padding: 12px 10px 10px;
  color: #566473;
  text-shadow: none;
  font-weight: 700;
  position: relative;
  display: inline-block
}

.cl-style-7::before, .cl-style-7::after {
  position: absolute;
  top: calc(100% - 10px);
  left: 0;
  width: 100%;
  height: 3px;
  background: #566473;
  content: '';
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: scale(0.85);
  -moz-transform: scale(0.85);
  transform: scale(0.85)
}

.cl-style-7::after {
  opacity: 0;
  -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
  transition: top 0.3s, opacity 0.3s, transform 0.3s
}

.cl-style-7:hover::before, .cl-style-7:hover::after, .cl-style-7:focus::before, .cl-style-7:focus::after {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1)
}

.cl-style-7:hover::after, .cl-style-7:focus::after {
  top: calc(0% + 10px);
  opacity: 1
}

.cl-style-8 {
  padding: 10px 20px;
  position: relative;
  display: inline-block
}

.cl-style-8::before, .cl-style-8::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #354856;
  content: '';
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s
}

.cl-style-8::after {
  border-color: #fff;
  opacity: 0;
  -webkit-transform: translateY(-7px) translateX(6px);
  -moz-transform: translateY(-7px) translateX(6px);
  transform: translateY(-7px) translateX(6px)
}

.cl-style-8:hover::before, .cl-style-8:focus::before {
  opacity: 0;
  -webkit-transform: translateY(5px) translateX(-5px);
  -moz-transform: translateY(5px) translateX(-5px);
  transform: translateY(5px) translateX(-5px)
}

.cl-style-8:hover::after, .cl-style-8:focus::after {
  opacity: 1;
  -webkit-transform: translateY(0px) translateX(0px);
  -moz-transform: translateY(0px) translateX(0px);
  transform: translateY(0px) translateX(0px)
}

.cl-style-9 {
  margin: 0 20px;
  padding: 18px 20px;
  position: relative;
  display: inline-block
}

.cl-style-9::before, .cl-style-9::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  content: '';
  opacity: 0.2;
  -webkit-transition: opacity 0.3s, height 0.3s;
  -moz-transition: opacity 0.3s, height 0.3s;
  transition: opacity 0.3s, height 0.3s
}

.cl-style-9::after {
  top: 100%;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  transform: translateY(-10px)
}

.cl-style-9:first-child {
  z-index: 2;
  display: block;
  font-weight: 300
}

.cl-style-9:last-child {
  z-index: 1;
  display: block;
  padding: 8px 0 0 0;
  color: rgba(0, 0, 0, 0.4);
  text-shadow: none;
  text-transform: none;
  font-style: italic;
  font-size: 0.75em;
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%)
}

.cl-style-9:hover::before, .cl-style-9:focus::before {
  height: 6px
}

.cl-style-9:hover::before, .cl-style-9:hover::after, .cl-style-9:focus::before, .cl-style-9:focus::after {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px)
}

.cl-style-9:hover span:last-child, .cl-style-9:focus span:last-child {
  opacity: 1;
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  transform: translateY(0%)
}

.cl-style-10 {
  position: relative;
  z-index: 1
}

.cl-style-10 {
  overflow: hidden;
  margin: 0 15px
}

.cl-style-10 {
  display: inline-block;
  padding: 10px 20px;
  background: #0f7c67;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s
}

.cl-style-10::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  padding: 10px 20px;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #0f7c67;
  content: attr(data-hover);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(-25%)
}

.cl-style-10:hover, .cl-style-10:focus {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  transform: translateX(100%)
}

.cl-style-10:hover::before, .cl-style-10:focus::before {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  transform: translateX(0%)
}

.cl-style-11 {
  text-shadow: none;
  position: relative
}

.cl-style-11::before {
  position: absolute;
  display: inline-block;
  top: auto;
  bottom: auto;
  left: 0;
  right: 0;
  overflow: hidden;
  padding: 0;
  max-width: 0;
  border-bottom: 2px solid #fff;
  color: #fff;
  content: attr(data-hover);
  -webkit-transition: max-width 0.5s;
  -moz-transition: max-width 0.5s;
  transition: max-width 0.5s
}

.cl-style-11:hover::before, .cl-style-11:focus::before {
  max-width: 100%;
  padding: 10px 0 8px 25px;
  transition: max-width 0.5s
}

.cl-style-12::before, .cl-style-12::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  content: '';
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
  -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
  transform: translateX(-50%) translateY(-50%) scale(0.2)
}

.cl-style-12::after {
  width: 90px;
  height: 90px;
  border-width: 6px;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
  -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
  transform: translateX(-50%) translateY(-50%) scale(0.8)
}

.cl-style-12:hover::before, .cl-style-12:hover::after, .cl-style-12:focus::before, .cl-style-12:focus::after {
  opacity: 1;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  -moz-transform: translateX(-50%) translateY(-50%) scale(1);
  transform: translateX(-50%) translateY(-50%) scale(1)
}

.cl-style-13 {
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  transition: color 0.3s
}

.cl-style-13::before {
  position: absolute;
  top: 60%;
  left: 50%;
  color: transparent;
  content: '\2022';
  text-shadow: 0 0 transparent;
  font-size: 1.2em;
  -webkit-transition: text-shadow 0.3s, color 0.3s;
  -moz-transition: text-shadow 0.3s, color 0.3s;
  transition: text-shadow 0.3s, color 0.3s;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none
}

.cl-style-13:hover::before, .cl-style-13:focus::before {
  color: #fff;
  text-shadow: 10px 0 #fff, -10px 0 #fff
}

.cl-style-13:hover, .cl-style-13:focus {
  color: #ba7700
}

.cl-style-14 {
  position: relative
}

.cl-style-14::before, .cl-style-14::after {
  position: absolute;
  width: 45px;
  height: 2px;
  background: #fff;
  content: '';
  opacity: 0.2;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  pointer-events: none
}

.cl-style-14::before {
  top: 10%;
  left: 0;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
  margin-left: 8px
}

.cl-style-14::after {
  right: 0;
  bottom: 5%;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  transform-origin: 100% 0;
  margin-right: 8px
}

.cl-style-14:hover::before, .cl-style-14:hover::after, .cl-style-14:focus::before, .cl-style-14:focus::after {
  opacity: 1;
  margin: 0
}

.cl-style-14:hover::before, .cl-style-14:focus::before {
  left: 50%;
  -webkit-transform: rotate(0deg) translateX(-50%);
  -moz-transform: rotate(0deg) translateX(-50%);
  transform: rotate(0deg) translateX(-50%)
}

.cl-style-14:hover::after, .cl-style-14:focus::after {
  right: 50%;
  -webkit-transform: rotate(0deg) translateX(50%);
  -moz-transform: rotate(0deg) translateX(50%);
  transform: rotate(0deg) translateX(50%)
}

.cl-style-15 {
  color: rgba(0, 0, 0, 0.2);
  font-weight: 700;
  text-shadow: none
}

.cl-style-15::before {
  color: #fff;
  content: attr(data-hover);
  position: absolute;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s
}

.cl-style-15:hover::before, .cl-style-15:focus::before {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  transform: scale(0.9);
  opacity: 0
}

.cl-style-16 {
  text-shadow: 0 0 1px rgba(111, 134, 134, 0.3)
}

.cl-style-16::before {
  color: #fff;
  content: attr(data-hover);
  position: absolute;
  opacity: 0;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
  -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  pointer-events: none
}

.cl-style-16:hover::before, .cl-style-16:focus::before {
  -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  opacity: 1
}

.cl-style-17 {
  text-shadow: none;
  position: relative;
  display: inline-block
}

.cl-style-17::before {
  color: #fff;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
  content: attr(data-hover);
  position: absolute;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  pointer-events: none
}

.cl-style-17::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 100%;
  height: 2px;
  background: #fff;
  opacity: 0;
  -webkit-transform: translateY(5px);
  -moz-transform: translateY(5px);
  transform: translateY(5px);
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  pointer-events: none
}

.cl-style-17:hover::before, .cl-style-17:focus::before {
  opacity: 0;
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  transform: translateY(-2px)
}

.cl-style-17:hover::after, .cl-style-17:focus::after {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px)
}

.cl-style-18 {
  position: relative;
  z-index: 1
}

.cl-style-18 {
  padding: 0 5px;
  color: #b4770d;
  font-weight: 700;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  transition: color 0.3s
}

.cl-style-18::before, .cl-style-18::after {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #b4770d;
  content: '';
  z-index: -1;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  pointer-events: none
}

.cl-style-18::before {
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  transform: translateY(-20px)
}

.cl-style-18::after {
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  transform: translateY(20px)
}

.cl-style-18:hover, .cl-style-18:focus {
  color: #fff
}

.cl-style-18:hover::before, .cl-style-18:hover::after, .cl-style-18:focus::before, .cl-style-18:focus::after {
  opacity: 0.7
}

.cl-style-18:hover::before, .cl-style-18:focus::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg)
}

.cl-style-18:hover::after, .cl-style-18:focus::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

.cl-style-19 {
  line-height: 2em;
  margin: 15px;
  width: 200px
}

.cl-style-19 {
  position: relative;
  display: inline-block;
  padding: 0 14px;
  background: #e35041;
  -webkit-transition: -webkit-transform 0.4s, background 0.4s;
  -moz-transition: -moz-transform 0.4s, background 0.4s;
  transition: transform 0.4s, background 0.4s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50% -100px;
  -moz-transform-origin: 50% 50% -100px;
  transform-origin: 50% 50% -100px
}

.cl-style-19::before {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background: #b53a2d;
  content: attr(data-hover);
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  transition: background 0.4s;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  transform-origin: 0 50%;
  pointer-events: none;
  padding: 20px 25px
}

.cl-style-19:hover, .cl-style-19:focus {
  background: #b53a2d;
  -webkit-transform: rotateY(-90deg);
  -moz-transform: rotateY(-90deg);
  transform: rotateY(-90deg)
}

.cl-style-19:hover::before, .cl-style-19:focus::before {
  background: #ef5e50
}

.cl-style-20 {
  line-height: 2em;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px
}

.cl-style-20 {
  position: relative;
  display: inline-block;
  padding: 3px 15px 0;
  background: #587285;
  box-shadow: inset 0 3px #2f4351;
  -webkit-transition: background 0.6s;
  -moz-transition: background 0.6s;
  transition: background 0.6s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  transform-origin: 0% 50%
}

.cl-style-20::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #2f4351;
  content: attr(data-hover);
  -webkit-transform: rotateX(270deg);
  -moz-transform: rotateX(270deg);
  transform: rotateX(270deg);
  -webkit-transition: -webkit-transform 0.6s;
  -moz-transition: -moz-transform 0.6s;
  transition: transform 0.6s;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
  pointer-events: none;
  padding: 20px 25px
}

.cl-style-20:hover, .cl-style-20:focus {
  background: #2f4351
}

.cl-style-20:hover::before, .cl-style-20:focus::before {
  -webkit-transform: rotateX(10deg);
  -moz-transform: rotateX(10deg);
  transform: rotateX(10deg)
}

.cl-style-21 {
  padding: 10px;
  color: #237546;
  font-weight: 700;
  text-shadow: none;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  transition: color 0.3s;
  position: relative;
  display: inline-block
}

.cl-style-21::before, .cl-style-21::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  transform: translateY(-10px)
}

.cl-style-21::before {
  top: 8px;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  transform: translateY(-10px)
}

.cl-style-21::after {
  bottom: 8px;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  transform: translateY(10px)
}

.cl-style-21:hover, .cl-style-21:focus {
  color: #fff
}

.cl-style-21:hover::before, .cl-style-21:focus::before, .cl-style-21:hover::after, .cl-style-21:focus::after {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px)
}

.grayscale img:hover {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
  -webkit-filter: grayscale(1);
  filter: grayscale(1)
}

.color img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
  -webkit-filter: grayscale(1);
  filter: grayscale(1)
}

.color img:hover {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /></filter></svg>#filter');
  -webkit-filter: grayscale(0);
  filter: grayscale(0)
}

.dive img:hover {
  -webkit-transform: scale(3);
  transform: scale(3)
}

.zoom-in, .zoom-out {
  overflow: hidden
}

.zoom-in img {
  -webkit-transform: scale(1);
  transform: scale(1)
}

.zoom-in:hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2)
}

.zoom-out img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2)
}

.zoom-out:hover img {
  -webkit-transform: scale(1);
  transform: scale(1)
}

.zoom-out-in, .zoom-in-out {
  overflow: hidden
}

.zoom-in-out img:hover {
  animation: zoom-in-out 0.6s ease;
  -webkit-animation: zoom-in-out 0.6s ease
}

@-webkit-keyframes zoom-in-out {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes zoom-in-out {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.zoom-out-in img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2)
}

.zoom-out-in img:hover {
  animation: zoom-out-in 0.6s ease;
  -webkit-animation: zoom-out-in 0.6s ease
}

@-webkit-keyframes zoom-out-in {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }
}

@keyframes zoom-out-in {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }
}

.blur:hover img {
  -webkit-filter: blur(2px);
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="2" /></filter></svg>#filter');
  filter: blur(2px)
}

.rotate, .scale-rotate-right, .scale-rotate-left {
  overflow: hidden
}

.rotate img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3)
}

.rotate:hover img, .scale-rotate-right:hover img {
  -webkit-transform: scale(1.3) rotate(5deg);
  transform: scale(1.3) rotate(5deg)
}

.scale-rotate-left:hover img {
  -webkit-transform: scale(1.3) rotate(-5deg);
  transform: scale(1.3) rotate(-5deg)
}

.move-up img, .move-down img, .move-right img, .move-left img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1)
}

.move-up, .move-down, .move-right, .move-left {
  overflow: hidden
}

.move-down:hover img {
  -webkit-transform-origin: top;
  transform-origin: top
}

.move-up:hover img {
  -webkit-transform-origin: bottom;
  transform-origin: bottom
}

.move-right:hover img {
  -webkit-transform-origin: left;
  transform-origin: left
}

.move-left:hover img {
  -webkit-transform-origin: right;
  transform-origin: right
}

.slide-up, .slide-down, .slide-left, .slide-right, .slide-top-left, .slide-top-right, .slide-bottom-left, .slide-bottom-right {
  overflow: hidden
}

.slide-up:hover img {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%)
}

.slide-down:hover img {
  -webkit-transform: translateY(100%);
  transform: translateY(100%)
}

.slide-left:hover img {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%)
}

.slide-right:hover img {
  -webkit-transform: translateX(100%);
  transform: translateX(100%)
}

.slide-top-left:hover img {
  -webkit-transform: translate(-100%, -100%);
  transform: translate(-100%, -100%)
}

.slide-top-right:hover img {
  -webkit-transform: translate(100%, -100%);
  transform: translate(100%, -100%)
}

.slide-bottom-left:hover img {
  -webkit-transform: translate(-100%, 100%);
  transform: translate(-100%, 100%)
}

.slide-bottom-right:hover img {
  -webkit-transform: translate(100%, 100%);
  transform: translate(100%, 100%)
}

.hinge-up, .hinge-down, .hinge-left, .hinge-right {
  -webkit-perspective: 50em;
  perspective: 50em;
  overflow: hidden
}

.hinge-up img {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%
}

.hinge-up:hover img {
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg)
}

.hinge-down img {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%
}

.hinge-down:hover img {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg)
}

.hinge-left img {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%
}

.hinge-left:hover img {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg)
}

.hinge-right img {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%
}

.hinge-right:hover img {
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg)
}

.flip-hor, .flip-vert, .flip-diag-left, .flip-diag-right {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 50em;
  perspective: 50em;
  overflow: hidden
}

.flip-vert:hover img {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg)
}

.flip-hor:hover img {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg)
}

.flip-diag-left:hover img {
  -webkit-transform: rotate3d(-1, 1, 0, 180deg);
  transform: rotate3d(-1, 1, 0, 180deg)
}

.flip-diag-right:hover img {
  -webkit-transform: rotate3d(-1, -1, 0, 180deg);
  transform: rotate3d(-1, -1, 0, 180deg)
}

.fold-up, .fold-down, .fold-left, .fold-right {
  overflow: hidden
}

.fold-up img {
  -webkit-transform-origin: 49% 0%;
  transform-origin: 49% 0%
}

.fold-up:hover img {
  -webkit-transform: rotateX(90deg) scale(0.6) translateY(50%);
  transform: rotateX(90deg) scale(0.6) translateY(50%)
}

.fold-down img {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%
}

.fold-down:hover img {
  -webkit-transform: rotateX(-90deg) scale(0.6) translateY(-50%);
  transform: rotateX(-90deg) scale(0.6) translateY(-50%)
}

.fold-left img {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%
}

.fold-left:hover img {
  -webkit-transform: rotateY(-90deg) scale(0.6) translateX(50%);
  transform: rotateY(-90deg) scale(0.6) translateX(50%)
}

.fold-right img {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%
}

.fold-right:hover img {
  -webkit-transform: rotateY(90deg) scale(0.6) translateX(-50%);
  transform: rotateY(90deg) scale(0.6) translateX(-50%)
}

.zoom-out-slide-up, .zoom-out-slide-down, .zoom-out-slide-left, .zoom-out-slide-right {
  overflow: hidden
}

.zoom-out-slide-up img, .zoom-out-slide-down img, .zoom-out-slide-left img, .zoom-out-slide-right img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2)
}

.zoom-out-slide-up:hover img {
  -webkit-animation: zoom-out-slide-up 0.6s;
  animation: zoom-out-slide-up 0.6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

@-webkit-keyframes zoom-out-slide-up {
  50% {
    -webkit-transform: scale(1) translateY(0%);
    transform: scale(1) translateY(0%)
  }
  100% {
    -webkit-transform: scale(1) translateY(-100%);
    transform: scale(1) translateY(-100%)
  }
}

@keyframes zoom-out-slide-up {
  50% {
    -webkit-transform: scale(1) translateY(0%);
    transform: scale(1) translateY(0%)
  }
  100% {
    -webkit-transform: scale(1) translateY(-100%);
    transform: scale(1) translateY(-100%)
  }
}

.zoom-out-slide-down:hover img {
  -webkit-animation: zoom-out-slide-down 0.6s;
  animation: zoom-out-slide-down 0.6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

@-webkit-keyframes zoom-out-slide-down {
  50% {
    -webkit-transform: scale(1) translateY(0%);
    transform: scale(1) translateY(0%)
  }
  100% {
    -webkit-transform: scale(1) translateY(100%);
    transform: scale(1) translateY(100%)
  }
}

@keyframes zoom-out-slide-down {
  50% {
    -webkit-transform: scale(1) translateY(0%);
    transform: scale(1) translateY(0%)
  }
  100% {
    -webkit-transform: scale(1) translateY(100%);
    transform: scale(1) translateY(100%)
  }
}

.zoom-out-slide-left:hover img {
  -webkit-animation: zoom-out-slide-left 0.6s;
  animation: zoom-out-slide-left 0.6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

@-webkit-keyframes zoom-out-slide-left {
  50% {
    -webkit-transform: scale(1) translateX(0%);
    transform: scale(1) translateX(0%)
  }
  100% {
    -webkit-transform: scale(1) translateX(-100%);
    transform: scale(1) translateX(-100%)
  }
}

@keyframes zoom-out-slide-left {
  50% {
    -webkit-transform: scale(1) translateX(0%);
    transform: scale(1) translateX(0%)
  }
  100% {
    -webkit-transform: scale(1) translateX(-100%);
    transform: scale(1) translateX(-100%)
  }
}

.zoom-out-slide-right:hover img {
  -webkit-animation: zoom-out-slide-right 0.6s;
  animation: zoom-out-slide-right 0.6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

@-webkit-keyframes zoom-out-slide-right {
  50% {
    -webkit-transform: scale(1) translateX(0%);
    transform: scale(1) translateX(0%)
  }
  100% {
    -webkit-transform: scale(1) translateX(100%);
    transform: scale(1) translateX(100%)
  }
}

@keyframes zoom-out-slide-right {
  50% {
    -webkit-transform: scale(1) translateX(0%);
    transform: scale(1) translateX(0%)
  }
  100% {
    -webkit-transform: scale(1) translateX(100%);
    transform: scale(1) translateX(100%)
  }
}

.zoom-out-flip-hor:hover img {
  -webkit-transform: rotateX(-100deg) translateY(50%) scale(0);
  transform: rotateX(-100deg) translateY(50%) scale(0)
}

.zoom-out-flip-vert:hover img {
  -webkit-transform: rotateY(-100deg) translateX(50%) scale(0);
  transform: rotateY(-100deg) translateX(50%) scale(0)
}

.zoom-in-flip-hor:hover img {
  -webkit-transform: rotateX(90deg) translateY(-100%) scale(0);
  transform: rotateX(90deg) translateY(-100%) scale(0);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%
}

.zoom-in-flip-vert:hover img {
  -webkit-transform: rotateY(90deg) translate(50%, 0) scale(0);
  transform: rotateY(90deg) translate(50%, 0) scale(0);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%
}

.pivot-in-top-left, .pivot-in-top-right, .pivot-in-bottom-left, .pivot-in-bottom-right, .pivot-out-top-left, .pivot-out-top-right, .pivot-out-bottom-left, .pivot-out-bottom-right {
  overflow: hidden
}

.pivot-in-top-left img {
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0
}

.pivot-in-top-left:hover img {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.pivot-in-top-right img {
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0
}

.pivot-in-top-right:hover img {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg)
}

.pivot-in-bottom-left img {
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%
}

.pivot-in-bottom-left:hover img {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg)
}

.pivot-in-bottom-right img {
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%
}

.pivot-in-bottom-right:hover img {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.pivot-out-top-left img {
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0
}

.pivot-out-top-left img {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.pivot-out-top-left:hover img {
  -webkit-transform: rotate(0);
  transform: rotate(0)
}

.pivot-out-top-right img {
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0
}

.pivot-out-top-right img {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg)
}

.pivot-out-top-right:hover img {
  -webkit-transform: rotate(0);
  transform: rotate(0)
}

.pivot-out-bottom-left img {
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%
}

.pivot-out-bottom-left img {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg)
}

.pivot-out-bottom-left:hover img {
  -webkit-transform: rotate(0);
  transform: rotate(0)
}

.pivot-out-bottom-right img {
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%
}

.pivot-out-bottom-right img {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.pivot-out-bottom-right:hover img {
  -webkit-transform: rotate(0);
  transform: rotate(0)
}