/* ============================================================
  COLOR
============================================================ */
.cmn-t-colour {
  color: #ff3296;
}
.cmn-t-colour:hover {
  color: #98004a;
}

/* ============================================================
  BACKGROUND
============================================================ */
.cmn-t-bg {
  padding: 20px 40px;
  color: #fff;
  background-color: #ff3296;
}
.cmn-t-bg:hover {
  color: #fff;
  background-color: #98004a;
}

/* ============================================================
  BORDER RADIUS
============================================================ */
.cmn-t-border-radius {
  padding: 20px 40px;
  color: #fff;
  background-color: #ff3296;
}
.cmn-t-border-radius:hover {
  color: #fff;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  border-radius: 40px;
}

/* ============================================================
  SCALE
============================================================ */
.cmn-t-scale {
  padding: 20px 40px;
  color: #fff;
  background-color: #ff3296;
}
.cmn-t-scale:hover {
  color: #fff;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

/* ============================================================
  TRANSLATE & BOX SHADOW
============================================================ */
.cmn-t-translate-bshadow {
  padding: 20px 40px;
  color: #fff;
  background-color: #ff3296;
}
.cmn-t-translate-bshadow:hover {
  color: #fff;
  -webkit-box-shadow: -10px -10px 0 #98004a;
  -moz-box-shadow: -10px -10px 0 #98004a;
  box-shadow: -10px -10px 0 #98004a;
  -webkit-transform: translate(10px, 10px);
  -moz-transform: translate(10px, 10px);
  -ms-transform: translate(10px, 10px);
  -o-transform: translate(10px, 10px);
  transform: translate(10px, 10px);
}

/* ============================================================
  INNER BORDER
============================================================ */
.cmn-t-border {
  padding: 20px 40px;
  color: #fff;
  background-color: #ff3296;
}
.cmn-t-border:hover {
  color: #fff;
  -webkit-box-shadow: inset 0 0 0 10px #98004a;
  -moz-box-shadow: inset 0 0 0 10px #98004a;
  box-shadow: inset 0 0 0 10px #98004a;
}

 /*============================================================
  LATERAL SHAKE
============================================================ */

.cmn-t-shake {
  padding: 20px 20px;
  color: #fff;

}
.cmn-t-shake:hover {
  color: #fff;
  -webkit-animation: shake .1s ease-in-out;
  -moz-animation: shake .1s ease-in-out;
  -ms-animation: shake .1s ease-in-out;
  -o-animation: shake .1s ease-in-out;
  animation: shake .1s ease-in-out;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
  }

  20% {
    -webkit-transform: translateX(-2px);
  }

  40% {
    -webkit-transform: translateX(2px);
  }

  60% {
    -webkit-transform: translateX(-2px);
  }

  80% {
    -webkit-transform: translateX(2px);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes shake {
  0% {
    -moz-transform: translateX(0);
  }

  20% {
    -moz-transform: translateX(-2px);
  }

  40% {
    -moz-transform: translateX(2px);
  }

  60% {
    -moz-transform: translateX(-2px);
  }

  80% {
    -moz-transform: translateX(2px);
  }

  100% {
    -moz-transform: translateX(0);
  }
}

@-ms-keyframes shake {
  0% {
    -ms-transform: translateX(0);
  }

  20% {
    -ms-transform: translateX(-2px);
  }

  40% {
    -ms-transform: translateX(2px);
  }

  60% {
    -ms-transform: translateX(-2px);
  }

  80% {
    -ms-transform: translateX(2px);
  }

  100% {
    -ms-transform: translateX(0);
  }
}

@-o-keyframes shake {
  0% {
    -o-transform: translateX(0);
  }

  20% {
    -o-transform: translateX(-2px);
  }

  40% {
    -o-transform: translateX(2px);
  }

  60% {
    -o-transform: translateX(-2px);
  }

  80% {
    -o-transform: translateX(2px);
  }

  100% {
    -o-transform: translateX(0);
  }
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-2px);
  }

  40% {
    transform: translateX(2px);
  }

  60% {
    transform: translateX(-2px);
  }

  80% {
    transform: translateX(2px);
  }

  100% {
    transform: translateX(0);
  }
}

/* ============================================================
  PULSE
============================================================ */
.cmn-t-pulse {
	font-size:40px!important;
  padding: 20px 40px;
  color: #000000;
  background-color: #ffffff;
  -webkit-animation: pulse 1s ease infinite;
  -moz-animation: pulse 1s ease infinite;
  -ms-animation: pulse 1s ease infinite;
  -o-animation: pulse 1s ease infinite;
  animation: pulse 1s ease infinite;
}
.cmn-t-pulse:hover {
  color: #000000;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }

  25% {
    -webkit-transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
  }

  25% {
    -moz-transform: scale(1.1);
  }

  50% {
    -moz-transform: scale(1);
  }

  100% {
    -moz-transform: scale(1);
  }
}

@-ms-keyframes pulse {
  0% {
    -ms-transform: scale(1);
  }

  25% {
    -ms-transform: scale(1.1);
  }

  50% {
    -ms-transform: scale(1);
  }

  100% {
    -ms-transform: scale(1);
  }
}

@-o-keyframes pulse {
  0% {
    -o-transform: scale(1);
  }

  25% {
    -o-transform: scale(1.1);
  }

  50% {
    -o-transform: scale(1);
  }

  100% {
    -o-transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* ============================================================
  ANIMATED UNDERLINE
============================================================ */

.cmn-t-underline:after {
  text-align:center;
  display: block;
  position: absolute;
  left: 20%;
  bottom: -0px;
  width: 0;
  height: 5px;
  background-color: #4e5644;/* #5ba920; */
  content: "";
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}
.cmn-t-underline:hover {
text-align:center;
color: #4e5644;/* #5ba920; */
}
.cmn-t-underline:hover:after {
	text-align:center;
  width: 70%;

}









/* ============================================================
  LATERAL SHAKE
============================================================ */
@media screen (min-width: 480px) and (max-width: 990px)
{
.cmn-t-shake {
  padding: 20px 40px;
  color: #fff;

}
.cmn-t-shake:hover {
  color: #fff;
  -webkit-animation: shake .2s ease-in-out;
  -moz-animation: shake .2s ease-in-out;
  -ms-animation: shake .2s ease-in-out;
  -o-animation: shake .2s ease-in-out;
  animation: shake .2s ease-in-out;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
  }

  20% {
    -webkit-transform: translateX(-10px);
  }

  40% {
    -webkit-transform: translateX(10px);
  }

  60% {
    -webkit-transform: translateX(-10px);
  }

  80% {
    -webkit-transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes shake {
  0% {
    -moz-transform: translateX(0);
  }

  20% {
    -moz-transform: translateX(-10px);
  }

  40% {
    -moz-transform: translateX(10px);
  }

  60% {
    -moz-transform: translateX(-10px);
  }

  80% {
    -moz-transform: translateX(10px);
  }

  100% {
    -moz-transform: translateX(0);
  }
}

@-ms-keyframes shake {
  0% {
    -ms-transform: translateX(0);
  }

  20% {
    -ms-transform: translateX(-10px);
  }

  40% {
    -ms-transform: translateX(10px);
  }

  60% {
    -ms-transform: translateX(-10px);
  }

  80% {
    -ms-transform: translateX(10px);
  }

  100% {
    -ms-transform: translateX(0);
  }
}

@-o-keyframes shake {
  0% {
    -o-transform: translateX(0);
  }

  20% {
    -o-transform: translateX(-10px);
  }

  40% {
    -o-transform: translateX(10px);
  }

  60% {
    -o-transform: translateX(-10px);
  }

  80% {
    -o-transform: translateX(10px);
  }

  100% {
    -o-transform: translateX(0);
  }
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-10px);
  }

  40% {
    transform: translateX(10px);
  }

  60% {
    transform: translateX(-10px);
  }

  80% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0);
  }
}
}