.cmk-downup,
.cmk-updown {
	display: inline-block;
    position: relative;
	overflow: hidden;
	text-decoration: none;
    z-index: 1;
}
.cmk-downup:before {
    content: "";
    width: 50%;
    height: 100%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    left: 0;
    top: -100%;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-downup:after {
    content: "";
    width: 50%;
    height: 100%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    right: 0;
    bottom: -100%;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-updown:before {
    content: "";
    width: 50%;
    height: 100%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-updown:after {
    content: "";
    width: 50%;
    height: 100%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    right: 0;
    bottom: 100%;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-downup:hover,
.cmk-updown:hover {
	color: #fff;
}
.cmk-downup:hover:before,
.cmk-updown:hover:before {
	top: 0;
	transition: .5s;
	opacity: 1;
}
.cmk-downup:hover:after,
.cmk-updown:hover:after {
	bottom: 0;
	transition: .5s;
	opacity: 1;
}

.cmk-slide-in-vertical,
.cmk-slide-in-horizontal,
.cmk-slide-out-vertical,
.cmk-slide-out-horizontal {
	display: inline-block;
    color: #fff;
    position: relative;
	overflow: hidden;
	text-decoration: none;
    z-index: 1;
}
.cmk-slide-out-vertical:hover,
.cmk-slide-out-horizontal:hover {
	transition: .5s;
}
.cmk-slide-in-vertical:hover,
.cmk-slide-in-horizontal:hover {
	transition: .5s;
}
.cmk-slide-out-horizontal:before {
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    content: "";
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    transition: .5s;
    opacity: 1;
}
.cmk-slide-out-horizontal:after {
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    content: "";
    width: 50%;
    height: 100%;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: .5s;
    opacity: 1;
}
.cmk-slide-out-horizontal:hover:before {
	left: -50%;
	transition: .5s;
	opacity: 0;
}
.cmk-slide-out-horizontal:hover:after {
	right: -50%;
	transition: .5s;
	opacity: 0;
}
.cmk-slide-out-vertical:before {
    content: "";
    width: 100%;
    height: 50%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transition: .5s;
    opacity: 1;
}
.cmk-slide-out-vertical:after {
    content: "";
    width: 100%;
    height: 50%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: .5s;
    opacity: 1;
}
.cmk-slide-out-vertical:hover:before {
	top: -50%;
	transition: .5s;
	opacity: 0;
}
.cmk-slide-out-vertical:hover:after {
	bottom: -50%;
	transition: .5s;
	opacity: 0;
}
.cmk-slide-in-vertical:before {
    content: "";
    width: 100%;
    height: 50%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    left: 0;
    top: -100%;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-slide-in-vertical:after {
    content: "";
    width: 100%;
    height: 50%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    right: 0;
    bottom: -100%;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-slide-in-vertical:hover:before {
	top: 0;
	transition: .5s;
	opacity: 1;
}
.cmk-slide-in-vertical:hover:after {
	bottom: 0;
	transition: .5s;
	opacity: 1;
}
.cmk-slide-in-horizontal:before {
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    content: "";
    width: 50%;
    height: 100%;
    left: -50%;
    top: 0;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-slide-in-horizontal:after {
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    content: "";
    width: 50%;
    height: 100%;
    right: -50%;
    bottom: 0;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-slide-in-horizontal:hover:before {
	left: 0;
	transition: .5s;
	opacity: 1;
}
.cmk-slide-in-horizontal:hover:after {
	right: 0;
	transition: .5s;
	opacity: 1;
}

.cmk-slide-left,
.cmk-slide-right,
.cmk-slide-up,
.cmk-slide-down {
	display: inline-block;
    color: #fff;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    z-index: 5;
}
.cmk-slide-left:hover,
.cmk-slide-right:hover,
.cmk-slide-up:hover,
.cmk-slide-down:hover {
	color: #fff;
	transition: .5s;
}
.cmk-slide-left:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    left: -100%;
    top: 0;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-slide-left:hover:before {
	left: 0;
	transition: .5s;
	opacity: 1;
}
.cmk-slide-right:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    right: -100%;
    top: 0;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-slide-right:hover:before {
	right: 0;
	transition: .5s;
	opacity: 1;
}
.cmk-slide-up:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: -100%;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-slide-up:hover:before {
	bottom: 0;
	transition: .5s;
	opacity: 1;
}
.cmk-slide-down:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    left: 0;
    top: -100%;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-slide-down:hover:before {
	top: 0;
	transition: .5s;
	opacity: 1;
}

.cmk-slideout-horizontal,
.cmk-slideout-vertical, 
.cmk-rotate-left,
.cmk-rotate-right {
	color: #fff;
	display: inline-block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transition: 1s all ease;
    z-index: 5;
}
.cmk-slideout-horizontal:before,
.cmk-slideout-vertical:before, 
.cmk-rotate-left:before,
.cmk-rotate-right:before {
	background-color: #f2295b;
    color: #fff;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	transition: all 0.6s ease;
}
.cmk-slideout-horizontal:hover,
.cmk-slideout-vertical:hover, 
.cmk-rotate-left:hover,
.cmk-rotate-right:hover {
	color: #fff;
	transition: 1s all ease;
}
.cmk-slideout-horizontal:before {
	width: 0;
	height: 100%;
}
.cmk-slideout-horizontal:hover:before {
	width: 100%;
}
.cmk-slideout-vertical:before {
	width: 100%;
	height: 0;
}
.cmk-slideout-vertical:hover:before {
	height: 100%;
}
.cmk-rotate-left::before {
	width: 100%;
	height: 0;
	transform: translate(-50%, -50%) rotate(45deg);
}
.cmk-rotate-left:hover:before {
	height: 300%;
}
.cmk-rotate-right:before {
	width: 100%;
	height: 0;
	transform: translate(-50%, -50%) rotate(-45deg);
}
.cmk-rotate-right:hover:before {
	height: 300%;
}

.cmk-bounce-left,
.cmk-bounce-right,
.cmk-bounce-up,
.cmk-bounce-down {
	position: relative;
    background-color: #f2295b;
    color: #fff;
	text-decoration: none;
	transition: color 0.4s linear;	
    z-index: 5;
}
.cmk-bounce-left:hover,
.cmk-bounce-right:hover,
.cmk-bounce-up:hover,
.cmk-bounce-down:hover {
	color: #fff;
}
.cmk-bounce-left:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #f2295b;
    color: #fff;
	z-index: -1;
	transition: transform 0.5s;
	transform-origin: 0 0;
	transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
	transform: scaleX(0);
}
.cmk-bounce-right:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #f2295b;
    color: #fff;
	z-index: -1;
	transition: transform 0.5s;
	transform-origin: 100% 0;
	transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
	transform: scaleX(0);
}
.cmk-bounce-up:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #f2295b;
    color: #fff;
	z-index: -1;
	transition: transform 0.5s;
	transform-origin: 0 100%;
	transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
	transform: scaleY(0);
}
.cmk-bounce-down::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #f2295b;
    color: #fff;
	z-index: -1;
	transition: transform 0.5s;
	transform-origin: 0 0;
	transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
	transform: scaleY(0);
}
.cmk-bounce-left:hover:before,
.cmk-bounce-right:hover:before {
	transform: scaleX(1);
}
.cmk-bounce-up:hover:before,
.cmk-bounce-down:hover:before {
	transform: scaleY(1);
}

.cmk-double-slide-left,
.cmk-double-slide-right,
.cmk-double-slide-up,
.cmk-double-slide-down {
	display: inline-block;
    color: #fff;
	text-decoration: none;
	position: relative;
    overflow: hidden;
    z-index: 5;
    transition: .3s;
}
.cmk-double-slide-left:hover,
.cmk-double-slide-right:hover,
.cmk-double-slide-up:hover,
.cmk-double-slide-down:hover {
	color: #fff;
}
.cmk-double-slide-left:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #f2295b;
    color: #fff;
	opacity: .5;
	top: 0;
	left: -100%;
	transition: .3s;
	z-index: -1;
}
.cmk-double-slide-left:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #f2295b;
    color: #fff;
	top: 0;
	left: -100%;
	transition: .3s;
	transition-delay: .2s;
	z-index: -1;
}
.cmk-double-slide-left:hover:before,
.cmk-double-slide-left:hover:after {
	left: 0;
}
.cmk-double-slide-right:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #f2295b;
    color: #fff;
    opacity: .5;
    right: -100%;
    bottom: 0;
    transition: .3s;
    z-index: -1;
}
.cmk-double-slide-right:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #f2295b;
    color: #fff;
	right: -100%;
    bottom: 0;
	transition: .3s;
	transition-delay: .2s;
	z-index: -1;
}
.cmk-double-slide-right:hover:before,
.cmk-double-slide-right:hover:after {
	right: 0;
}
.cmk-double-slide-up:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #f2295b;
    color: #fff;
	opacity: .5;
	top: 100%;
	left: 0;
	transition: .3s;
	z-index: -1;
}
.cmk-double-slide-up:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #f2295b;
    color: #fff;
	top: 100%;
	left: 0;
	transition: .3s;
	transition-delay: .2s;
	z-index: -1;
}
.cmk-double-slide-up:hover:before,
.cmk-double-slide-up:hover:after {
	top: 0;
}
.cmk-double-slide-down:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #f2295b;
    color: #fff;
	opacity: .5;
	top: -100%;
	left: 0;
	transition: .3s;
	z-index: -1;
}
.cmk-double-slide-down:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #f2295b;
    color: #fff;
	top: -100%;
	left: 0;
	transition: .3s;
	transition-delay: .2s;
	z-index: -1;
}
.cmk-double-slide-down:hover:before,
.cmk-double-slide-down:hover:after {
	top: 0;
}

.cmk-line-in-vertical,
.cmk-line-out-vertical,
.cmk-line-in-horizontal,
.cmk-line-out-horizontal {
	display: inline-block;
    color: #fff;
    position: relative;
	overflow: hidden;
	text-decoration: none;
    z-index: 1;
}
.cmk-line-out-vertical {
	color: #fff;
}
.cmk-line-in-vertical:hover,
.cmk-line-out-vertical:hover,
.cmk-line-in-horizontal:hover,
.cmk-line-out-horizontal:hover {
	color: #fff;
	transition: .5s;
}
.cmk-line-in-vertical:before {
    content: "";
    width: 100%;
    height: 5%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    left: 0;
    top: -100%;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-line-in-vertical:after {
    content: "";
    width: 100%;
    height: 5%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    right: 0;
    bottom: -100%;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-line-in-vertical:hover:before {
	top: 0;
	transition: .5s;
	opacity: 1;
}
.cmk-line-in-vertical:hover:after {
	bottom: 0;
	transition: .5s;
	opacity: 1;
}
.cmk-line-out-vertical:before {
    content: "";
    width: 100%;
    height: 50%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transition: .5s;
    opacity: 1;
}
.cmk-line-out-vertical:after {
    content: "";
    width: 100%;
    height: 50%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: .5s;
    opacity: 1;
}
.cmk-line-out-vertical:hover:before {
    height: 5%;
    top: 0;
    transition: .5s;
    opacity: 1;
}
.cmk-line-out-vertical:hover:after {
	height: 5%;
	bottom: 0;
	transition: .5s;
	opacity: 1;
}
.cmk-line-in-horizontal:before {
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    content: "";
    width: 50%;
    height: 5%;
    left: -50%;
    bottom: 0;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-line-in-horizontal:after {
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    content: "";
    width: 50%;
    height: 5%;
    right: -50%;
    bottom: 0;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-line-in-horizontal:hover:before {
	left: 0;
	transition: .5s;
	opacity: 1;
}
.cmk-line-in-horizontal:hover:after {
	right: 0;
	transition: .5s;
	opacity: 1;
}
.cmk-line-out-horizontal:before {
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    content: "";
    width: 50%;
    height: 5%;
    left: 0;
    bottom: 0;
    z-index: -1;
    transition: .5s;
    opacity: 1;
}
.cmk-line-out-horizontal:after {
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    content: "";
    width: 50%;
    height: 5%;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: .5s;
    opacity: 1;
}
.cmk-line-out-horizontal:hover:before {
	left: -50%;
	transition: .5s;
	opacity: 0;
}
.cmk-line-out-horizontal:hover:after {
	right: -50%;
	transition: .5s;
	opacity: 0;
}

.cmk-line-left,
.cmk-line-right {
	display: inline-block;
    color: #fff;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    z-index: 5;
}
.cmk-line-left:hover,
.cmk-line-right:hover {
	transition: .5s;
}
.cmk-line-left:before {
    content: "";
    width: 100%;
    height: 5%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    left: -100%;
    bottom: 0;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-line-left:hover:before {
	left: 0;
	transition: .5s;
	opacity: 1;
}
.cmk-line-right:before {
    content: "";
    width: 100%;
    height: 5%;
    background-color: #f2295b;
    color: #fff;
    position: absolute;
    right: -100%;
    bottom: 0;
    z-index: -1;
    transition: .5s;
    opacity: 0;
}
.cmk-line-right:hover:before {
	right: 0;
	transition: .5s;
	opacity: 1;
}

.cmk-lineout-horizontal {
	color: #fff;
	display: inline-block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transition: 1s all ease;
}
.cmk-lineout-horizontal:before {
    background: #f2295b;
    color: #fff;
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    transition: all 0.6s ease;
}
.cmk-lineout-horizontal:hover {
	transition: 1s all ease;
}
.cmk-lineout-horizontal:before {
	width: 0;
	height: 5%;
}
.cmk-lineout-horizontal:hover:before {
	width: 100%;
}

.cmk-line-bounce-left,
.cmk-line-bounce-right {
	position: relative;
	text-decoration: none;
    z-index: 6;
	transition: color 0.4s linear;	
}
.cmk-line-bounce-left:hover,
.cmk-line-bounce-right:hover {
	color: #fff;
}
.cmk-line-bounce-left:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 5%;
    bottom: 0;
    background-color: #f2295b;
    color: #fff;
    z-index: -1;
    transition: transform 0.5s;
    transform-origin: 0 0;
    transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
    transform: scaleX(0);
}
.cmk-line-bounce-right:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5%;
    background-color: #f2295b;
    color: #fff;
    z-index: -1;
    transition: transform 0.5s;
    transform-origin: 100% 0;
    transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
    transform: scaleX(0);
}
.cmk-line-bounce-left:hover:before,
.cmk-line-bounce-right:hover:before {
	transform: scaleX(1);
}

.cmk-double-line-left,
.cmk-double-line-right {
	display: inline-block;
    color: #fff;
	text-decoration: none;
	position: relative;
    overflow: hidden;
    transition: .3s;
}
.cmk-double-line-left:hover,
.cmk-double-line-right:hover {
	color: #fff;
}
.cmk-double-line-left:before {
    content: '';
    width: 100%;
    height: 5%;
    position: absolute;
    background: #f2295b;
    color: #fff;
    opacity: .5;
    left: -100%;
    bottom: 0;
    transition: .3s;
    z-index: -1;
}
.cmk-double-line-left:after {
	content: '';
	width: 100%;
	height: 5%;
	position: absolute;
	background: #f2295b;
    color: #fff;
	left: -100%;
	bottom: 0;
	transition: .3s;
	transition-delay: .2s;
	z-index: -1;
}
.cmk-double-line-left:hover:before,
.cmk-double-line-left:hover:after {
	left: 0;
}
.cmk-double-line-right:before {
    content: '';
    width: 100%;
    height: 5%;
    position: absolute;
    background: #f2295b;
    color: #fff;
    opacity: .5;
    right: -100%;
    bottom: 0;
    transition: .3s;
    z-index: -1;
}
.cmk-double-line-right:after {
	content: '';
	width: 100%;
	height: 5%;
	position: absolute;
	background: #f2295b;
    color: #fff;
	right: -100%;
    bottom: 0;
	transition: .3s;
	transition-delay: .2s;
	z-index: -1;
}
.cmk-double-line-right:hover:before,
.cmk-double-line-right:hover:after {
	right: 0;
}

.cmk-wave {
    display: inline-block;
    position: relative;
    text-decoration: none;
    box-sizing: border-box;
    overflow: hidden;
}
.cmk-wave-text {
	position: relative;
	z-index: 5;
	color: #fff;
}
.wave {
	position: absolute;
	left: 0;
	top: -80px;
	width: 200px;
	height: 200px;
	background-color: #f2295b;
    color: #fff;
	box-shadow: inset 0 0 50px rgba(0,0,0,.5);
	transition: 0.5s;
}
.cmk-wave:hover .wave {
	top: -120px;
}
.wave:before,
.wave:after {
	content: '';
	position: absolute;
	width: 200%;
	height: 200%;
	top: 0;
	left: 50%;
	transform: translate(-50%, -75%);
}

.wave:before {
	border-radius: 45%;
	background-color: rgba(20,20,20,1);
    color: #fff;
	animation: animate 5s linear infinite;
}
.wave:after {
	border-radius: 40%;
	background-color: rgba(20,20,20,0.5);
    color: #fff;
	animation: animate 10s linear infinite;
}
@keyframes animate {
	0% 
	{
		transform: translate(-50%, -75%) rotate(0deg);
	}
	100% 
	{
		transform: translate(-50%, -75%) rotate(360deg);
	}
}