.mega-creative-btn a {

	position: relative;

	display: inline-block;

	margin: 15px 25px;

	outline: none;

	color: #000;

	text-decoration: none;

	text-transform: uppercase;

	letter-spacing: 1px;

	font-weight: 400;

	text-shadow: 0 0 1px rgba(255,255,255,0.3);

	font-size: 15px;

	text-align: center;

}



.mega-creative-btn a:hover,

.mega-creative-btn a:focus {

	outline: none;

}



/* Effect 1: Brackets */

.cl-effect-1 a::before,

.cl-effect-1 a::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-effect-1 a::before {

	margin-right: 10px;

	content: '[';

	-webkit-transform: translateX(20px);

	-moz-transform: translateX(20px);

	transform: translateX(20px);

}



.cl-effect-1 a::after {

	margin-left: 10px;

	content: ']';

	-webkit-transform: translateX(-20px);

	-moz-transform: translateX(-20px);

	transform: translateX(-20px);

}



.cl-effect-1 a:hover::before,

.cl-effect-1 a:hover::after,

.cl-effect-1 a:focus::before,

.cl-effect-1 a:focus::after {

	opacity: 1;

	-webkit-transform: translateX(0px);

	-moz-transform: translateX(0px);

	transform: translateX(0px);

}



/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */

.cl-effect-2 a {

	line-height: 44px;

	-webkit-perspective: 1000px;

	-moz-perspective: 1000px;

	perspective: 1000px;

}



.cl-effect-2 a .creativelink {

	position: relative;

	display: inline-block;

	padding: 0 14px;

	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-effect-2 .creativelink- {

	position: absolute;

	top: 100%;

	left: 0;

	width: 100%;

	height: 100%;

	background: red;

	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-effect-2 a:hover .creativelink,

.cl-effect-2 a:focus .creativelink {

	-webkit-transform: rotateX(90deg) translateY(-22px);

	-moz-transform: rotateX(90deg) translateY(-22px);

	transform: rotateX(90deg) translateY(-22px);

}



.csstransforms3d .cl-effect-2 a:hover .creativelink .creativelink-,

.csstransforms3d .cl-effect-2 a:focus .creativelink .creativelink- {

	background: orange;	

}



/* Effect 3: bottom line slides/fades in */

.cl-effect-3 a {

	padding: 8px 0;

}



.cl-effect-3 a .creativelink {

	position: absolute;

	top: 100%;

	left: 0;

	width: 100%;

	height: 4px;

	background: rgba(0,0,0,0.1);

	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-effect-3 a:hover .creativelink,

.cl-effect-3 a:focus .creativelink {

	opacity: 1;

	-webkit-transform: translateY(0px);

	-moz-transform: translateY(0px);

	transform: translateY(0px);

}



/* Effect 4: bottom border enlarge */

.cl-effect-4 a {

	padding: 0 0 10px;

}



.cl-effect-4 a .creativelink {

	position: absolute;

	top: 100%;

	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-effect-4 a:hover .creativelink,

.cl-effect-4 a:focus .creativelink {

	height: 5px;

	opacity: 1;

	-webkit-transform: translateY(0px);

	-moz-transform: translateY(0px);

	transform: translateY(0px);

}



/* Effect 5: same word slide in */

.cl-effect-5 a {

	overflow: hidden;

	padding: 0 4px;

	/*height: 1em;*/

}



.cl-effect-5 a .creativelink {

	position: relative;

	display: inline-block;

	-webkit-transition: -webkit-transform 0.3s;

	-moz-transition: -moz-transform 0.3s;

	transition: transform 0.3s;

}



.cl-effect-5 a .creativelink .creativelink- {

	position: absolute;

	top: 100%;

	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-effect-5 a:hover .creativelink,

.cl-effect-5 a:focus .creativelink {

	-webkit-transform: translateY(-100%);

	-moz-transform: translateY(-100%);

	transform: translateY(-100%);

}



/* Effect 5: same word slide in and border bottom */

.cl-effect-6 a {

	margin: 0 10px;

	padding: 10px 20px;

}



.cl-effect-6 a .creativelink {

	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-effect-6 a .creativelink- {

	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-effect-6 a:hover .creativelink {

	top: 100%;

	opacity: 1;

}



.cl-effect-6 a:hover .creativelink- {

	height: 100%;

} 



/* Effect 7: second border slides up */

.cl-effect-7 a {

	padding: 12px 10px 10px;

	color: #566473;

	text-shadow: none;

	font-weight: 700;

}



.cl-effect-7 a .creativelink,

.cl-effect-7 a .creativelink- {

	position: absolute;

	top: 100%;

	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-effect-7 a .creativelink- {

	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-effect-7 a:hover .creativelink,

.cl-effect-7 a:hover .creativelink-,

.cl-effect-7 a:focus .creativelink,

.cl-effect-7 a:focus .creativelink- {

	-webkit-transform: scale(1);

	-moz-transform: scale(1);

	transform: scale(1);

}



.cl-effect-7 a:hover .creativelink-,

.cl-effect-7 a:focus .creativelink- {

	top: 0%;

	opacity: 1;

}



/* Effect 8: border slight translate */

.cl-effect-8 a {

	padding: 10px 20px;

}



.cl-effect-8 a .creativelink,

.cl-effect-8 a .creativelink-  {

	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-effect-8 a .creativelink-  {

	border-color: #fff;

	opacity: 0;

	-webkit-transform: translateY(-7px) translateX(6px);

	-moz-transform: translateY(-7px) translateX(6px);

	transform: translateY(-7px) translateX(6px);

}



.cl-effect-8 a:hover .creativelink,

.cl-effect-8 a:focus .creativelink {

	opacity: 0;

	-webkit-transform: translateY(5px) translateX(-5px);

	-moz-transform: translateY(5px) translateX(-5px);

	transform: translateY(5px) translateX(-5px);

}



.cl-effect-8 a:hover .creativelink-,

.cl-effect-8 a:focus .creativelink-  {

	opacity: 1;

	-webkit-transform: translateY(0px) translateX(0px);

	-moz-transform: translateY(0px) translateX(0px);

	transform: translateY(0px) translateX(0px);

}





/* Effect 10: reveal, push out */

.cl-effect-10  {

	position: relative;

	z-index: 1;

}



.cl-effect-10 a {

	overflow: hidden;

	margin: 0 15px;

}



.cl-effect-10 a .creativelink- {

	display: block;

	padding: 10px 20px;

	background: #0f7c67;

	-webkit-transition: -webkit-transform 0.3s;

	-moz-transition: -moz-transform 0.3s;

	transition: transform 0.3s;

}



.cl-effect-10 a .creativelink {

	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-effect-10 a:hover .creativelink-,

.cl-effect-10 a:focus .creativelink- {

	-webkit-transform: translateX(100%);

	-moz-transform: translateX(100%);

	transform: translateX(100%);

}



.cl-effect-10 a:hover .creativelink,

.cl-effect-10 a:focus .creativelink {

	-webkit-transform: translateX(0%);

	-moz-transform: translateX(0%);

	transform: translateX(0%);

}



/* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */

.cl-effect-11 a {

	padding: 10px 0;

	border-top: 2px solid #0972b4;

	color: #0972b4;

	text-shadow: none;

} 



.cl-effect-11 a .creativelink {

	position: absolute;

	top: 0;

	left: 0;

	overflow: hidden;

	padding: 10px 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-effect-11 a:hover .creativelink,

.cl-effect-11 a:focus .creativelink {

	max-width: 100%;

}





/* Effect 13: three circles */

.cl-effect-13 a {

	-webkit-transition: color 0.3s;

	-moz-transition: color 0.3s;

	transition: color 0.3s;

}



.cl-effect-13 a::before {

	position: absolute;

	top: 100%;

	left: 50%;

	color: transparent;

	content: '•';

	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-effect-13 a:hover::before,

.cl-effect-13 a:focus::before {

	color: #fff;

	text-shadow: 10px 0 #fff, -10px 0 #fff;

}



.cl-effect-13 a:hover,

.cl-effect-13 a:focus {

	color: #ba7700;

}



/* Effect 14: border switch */

.cl-effect-14 a {

	padding: 0 20px;

	height: 45px;

	line-height: 45px;

}



.cl-effect-14 a .creativelink,

.cl-effect-14 a .creativelink- {

	position: absolute;

	width: 45px;

	height: 2px;

	background: #fff;

	content: '';

	opacity: 0.4;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

	pointer-events: none;

}



.cl-effect-14 a .creativelink {

	top: 0;

	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;

}



.cl-effect-14 a .creativelink- {

	right: 0;

	bottom: 0;

	-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;

}



.cl-effect-14 a:hover .creativelink,

.cl-effect-14 a:hover .creativelink-,

.cl-effect-14 a:focus .creativelink,

.cl-effect-14 a:focus .creativelink- {

	opacity: 1;

}



.cl-effect-14 a:hover .creativelink,

.cl-effect-14 a:focus .creativelink {

	left: 50%;

	-webkit-transform: rotate(0deg) translateX(-50%);

	-moz-transform: rotate(0deg) translateX(-50%);

	transform: rotate(0deg) translateX(-50%);

}



.cl-effect-14 a:hover .creativelink-,

.cl-effect-14 a:focus .creativelink- {

	right: 50%;

	-webkit-transform: rotate(0deg) translateX(50%);

	-moz-transform: rotate(0deg) translateX(50%);

	transform: rotate(0deg) translateX(50%);

}



/* Effect 15: scale down, reveal */

.cl-effect-15 a {

	color: rgba(0,0,0,0.2);

	font-weight: 700;

	text-shadow: none;

}



.cl-effect-15 a .creativelink {

	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-effect-15 a:hover .creativelink,

.cl-effect-15 a:focus .creativelink {

	-webkit-transform: scale(0.9);

	-moz-transform: scale(0.9);

	transform: scale(0.9);

	opacity: 0;

}



/* Effect 16: fall down */

.cl-effect-16 a {

	color: #6f8686;

	text-shadow: 0 0 1px rgba(111,134,134,0.3);

}



.cl-effect-16 a .creativelink {

	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-effect-16 a:hover .creativelink,

.cl-effect-16 a:focus .creativelink {

	-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;

}



/* Effect 18: cross */

.cl-effect-18 {

	position: relative;

	z-index: 1;

}



.cl-effect-18 a {

	padding: 0 5px;

	color: #b4770d;

	font-weight: 700;

	-webkit-transition: color 0.3s;

	-moz-transition: color 0.3s;

	transition: color 0.3s;

}



.cl-effect-18 a .creativelink,

.cl-effect-18 a .creativelink- {

	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-effect-18 a .creativelink {

	-webkit-transform: translateY(-20px);

	-moz-transform: translateY(-20px);

	transform: translateY(-20px);

}



.cl-effect-18 a .creativelink- {

	-webkit-transform: translateY(20px);

	-moz-transform: translateY(20px);

	transform: translateY(20px);

}



.cl-effect-18 a:hover,

.cl-effect-18 a:focus {

	color: #fff;

}



.cl-effect-18 a:hover .creativelink,

.cl-effect-18 a:hover .creativelink-,

.cl-effect-18 a:focus .creativelink,

.cl-effect-18 a:focus .creativelink- {

	opacity: 0.7;

}



.cl-effect-18 a:hover .creativelink,

.cl-effect-18 a:focus .creativelink {

	-webkit-transform: rotate(45deg);

	-moz-transform: rotate(45deg);

	transform: rotate(45deg);

}



.cl-effect-18 a:hover .creativelink-,

.cl-effect-18 a:focus .creativelink- {

	-webkit-transform: rotate(-45deg);

	-moz-transform: rotate(-45deg);

	transform: rotate(-45deg);

}



/* Effect 19: 3D side */

.cl-effect-19 a {

	line-height: 2em;

	margin: 15px;

	-webkit-perspective: 800px;

	-moz-perspective: 800px;

	perspective: 800px;

	width: 200px;

}



.cl-effect-19 a .creativelink {

	position: relative;

	display: inline-block;

	width: 100%;

	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;

}



.csstransforms3d .cl-effect-19 a .creativelink .creativelink- {

	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;

}



.cl-effect-19 a:hover .creativelink,

.cl-effect-19 a:focus .creativelink {

	background: #b53a2d;

	-webkit-transform: rotateY(-90deg);

	-moz-transform: rotateY(-90deg);

	transform: rotateY(-90deg);

}



.csstransforms3d .cl-effect-19 a:hover .creativelink .creativelink-,

.csstransforms3d .cl-effect-19 a:focus .creativelink .creativelink- {

	background: #ef5e50;	

}



/* Effect 20: 3D side */

.cl-effect-20 a {

	line-height: 2em;

	-webkit-perspective: 800px;

	-moz-perspective: 800px;

	perspective: 800px;

}



.cl-effect-20 a .creativelink {

	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-effect-20 a .creativelink .creativelink- {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: #fff;

	color: #fff;

	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;

}



.cl-effect-20 a:hover .creativelink,

.cl-effect-20 a:focus .creativelink {

	background: #2f4351;

}



.cl-effect-20 a:hover .creativelink .creativelink-,

.cl-effect-20 a:focus .creativelink .creativelink- {

	-webkit-transform: rotateX(10deg);	

	-moz-transform: rotateX(10deg);

	transform: rotateX(10deg);

}



/* Effect 21: borders slight translate */

.cl-effect-21 a {

	padding: 10px;

	color: #237546;

	font-weight: 700;

	text-shadow: none;

	-webkit-transition: color 0.3s;

	-moz-transition: color 0.3s;

	transition: color 0.3s;

}



.cl-effect-21 a .creativelink,

.cl-effect-21 a .creativelink- {

	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-effect-21 a .creativelink {

	top: 0;

	-webkit-transform: translateY(-10px);

	-moz-transform: translateY(-10px);

	transform: translateY(-10px);

}



.cl-effect-21 a .creativelink- {

	bottom: 0;

	-webkit-transform: translateY(10px);

	-moz-transform: translateY(10px);

	transform: translateY(10px);

}



.cl-effect-21 a:hover,

.cl-effect-21 a:focus {

	/*color: #fff;*/

}



.cl-effect-21 a:hover .creativelink,

.cl-effect-21 a:focus .creativelink,

.cl-effect-21 a:hover .creativelink-,

.cl-effect-21 a:focus .creativelink- {

	opacity: 1;

	-webkit-transform: translateY(0px);

	-moz-transform: translateY(0px);

	transform: translateY(0px);

}