*,

*:after,

*::before {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}







nav a {

	position: relative;

	display: inline-block;

	margin: 15px 25px;

	outline: none;

	color: #fff;

	text-decoration: none;

	letter-spacing: 1px;

	font-weight: 400;

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

	font-size: 1.35em;

}



nav a:hover,

nav 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 span {

	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;

}



.csstransforms3d .cl-effect-2 a span::before {

	position: absolute;

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

.cl-effect-2 a:focus span {

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

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

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

}



.csstransforms3d .cl-effect-2 a:hover span::before,

.csstransforms3d .cl-effect-2 a:focus span::before {

	background: #28a2ee;	

}



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

.cl-effect-3 a {

	padding: 8px 0;

}



.cl-effect-3 a::after {

	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::after,

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

	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::after {

	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::after,

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

	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 span {

	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 span::before {

	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 span,

.cl-effect-5 a:focus span {

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

	top: 100%;

	opacity: 1;

}



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

	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::before,

.cl-effect-7 a::after {

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

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

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

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

	-webkit-transform: scale(1);

	-moz-transform: scale(1);

	transform: scale(1);

}



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

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

	top: 0%;

	opacity: 1;

}



/* Effect 8: border slight translate */

.cl-effect-8 a {

	padding: 10px 20px;

}



.cl-effect-8 a::before,

.cl-effect-8 a::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-effect-8 a::after  {

	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::before,

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

	opacity: 0;

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

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

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

}



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

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

	opacity: 1;

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

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

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

}



/* Effect 9: second text and borders */

.cl-effect-9 a {

	margin: 0 20px;

	padding: 18px 20px;

}



.cl-effect-9 a::before,

.cl-effect-9 a::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-effect-9 a::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-effect-9 a span:first-child {

	z-index: 2;

	display: block;

	font-weight: 300;

}



.cl-effect-9 a span: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-effect-9 a:hover::before,

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

	height: 6px;

}



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

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

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

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

	opacity: 1;

	-webkit-transform: translateY(0px);

	-moz-transform: translateY(0px);

	transform: translateY(0px);

}



.cl-effect-9 a:hover span:last-child,

.cl-effect-9 a:focus span:last-child {

	opacity: 1;

	-webkit-transform: translateY(0%);

	-moz-transform: translateY(0%);

	transform: translateY(0%);

}



/* 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 span {

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

.cl-effect-10 a:focus span {

	-webkit-transform: translateX(100%);

	-moz-transform: translateX(100%);

	transform: translateX(100%);

}



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

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

	-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::before {

	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::before,

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

	max-width: 100%;

}



/* Effect 12: circle */

.cl-effect-12 a::before,

.cl-effect-12 a::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-effect-12 a::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-effect-12 a:hover::before,

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

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

.cl-effect-12 a: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);

}



/* 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 ul li a {

	padding: 0 20px;

	/*height: 50px;*/

	line-height: 45px;

}



.cl-effect-14 ul li a::before,

.cl-effect-14 ul li a::after {

	position: absolute;

	width: 45px;

	height: 1px;

	background: #f9f9f9;

	content: '';

	opacity: 0.2;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

	pointer-events: none;

}



.cl-effect-14 ul li a::before {

	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 ul li a::after {

	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 ul li a:hover::before,

.cl-effect-14 ul li a:hover::after,

.cl-effect-14 ul li a:focus::before,

.cl-effect-14 ul li a:focus::after {

	opacity: 1;

}



.cl-effect-14 ul li a:hover::before,

.cl-effect-14 ul li a:focus::before {

	left: 50%;

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

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

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

}



.cl-effect-14 ul li a:hover::after,

.cl-effect-14 ul li a:focus::after {

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

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

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

.cl-effect-16 a: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;

}



/* Effect 17: move up fade out, push border */

.cl-effect-17 a {

	color: #10649b;

	text-shadow: none;

	padding: 10px 0;

}



.cl-effect-17 a::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-effect-17 a::after {

	content: '';

	position: absolute;

	left: 0;

	bottom: 0;

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

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

	opacity: 0;

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

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

	transform: translateY(-2px);

}



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

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

	opacity: 1;

	-webkit-transform: translateY(0px);

	-moz-transform: translateY(0px);

	transform: translateY(0px);

}



/* 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::before,

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

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

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

	transform: translateY(-20px);

}



.cl-effect-18 a::after {

	-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::before,

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

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

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

	opacity: 0.7;

}



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

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

	-webkit-transform: rotate(45deg);

	-moz-transform: rotate(45deg);

	transform: rotate(45deg);

}



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

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

	-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 span {

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

}



.cl-effect-19 a:hover span,

.cl-effect-19 a:focus span {

	background: #b53a2d;

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

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

	transform: rotateY(-90deg);

}



.csstransforms3d .cl-effect-19 a:hover span::before,

.csstransforms3d .cl-effect-19 a:focus span::before {

	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 span {

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

}



.cl-effect-20 a:hover span,

.cl-effect-20 a:focus span {

	background: #2f4351;

}



.cl-effect-20 a:hover span::before,

.cl-effect-20 a:focus span::before {

	-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::before,

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

	top: 0;

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

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

	transform: translateY(-10px);

}



.cl-effect-21 a::after {

	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::before,

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

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

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

	opacity: 1;

	-webkit-transform: translateY(0px);

	-moz-transform: translateY(0px);

	transform: translateY(0px);

}







/* Global Button Styles */

a.animated-button:link, a.animated-button:visited {

	position: relative;

	display: block;

	margin: 30px auto 0;

	padding: 14px 15px;

	color: #fff;

	font-size:17px;

	

	text-align: center;

	text-decoration: none;

	text-transform: uppercase;

	overflow: hidden;

	letter-spacing: .08em;

	border-radius: 0;

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

	-webkit-transition: all 1s ease;

	-moz-transition: all 1s ease;

	-o-transition: all 1s ease;

	transition: all 1s ease;

}

a.animated-button:link:after, a.animated-button:visited:after {

	content: "";

	position: absolute;

	height: 0%;

	left: 50%;

	top: 50%;

	width: 150%;

	z-index: -1;

	-webkit-transition: all 0.75s ease 0s;

	-moz-transition: all 0.75s ease 0s;

	-o-transition: all 0.75s ease 0s;

	transition: all 0.75s ease 0s;

}

a.animated-button:link:hover, a.animated-button:visited:hover {

	color: #FFF;

	text-shadow: none;

	border: 2px solid #c7c7c7;

}

a.animated-button:link:hover:after, a.animated-button:visited:hover:after {

	height: 450%;

}





/* Victoria Buttons */



a.animated-button.victoria-one {

	border: 2px solid #FFF;

	z-index:99;

}

a.animated-button.victoria-one:after {

	background: transparent;

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

	-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);

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

	transform: translateX(-50%) translateY(-50%) rotate(-25deg);

	

}

a.animated-button.victoria-two {

	border: 2px solid #D24D57;

}

a.animated-button.victoria-two:after {

	background: #D24D57;

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

	-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);

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

	transform: translateX(-50%) translateY(-50%) rotate(25deg);

}

a.animated-button.victoria-three {

	border: 2px solid #D24D57;

}

a.animated-button.victoria-three:after {

	background: #D24D57;

	opacity: .5;

	-moz-transform: translateX(-50%) translateY(-50%);

	-ms-transform: translateX(-50%) translateY(-50%);

	-webkit-transform: translateX(-50%) translateY(-50%);

	transform: translateX(-50%) translateY(-50%);

}

a.animated-button.victoria-three:hover:after {

	height: 140%;

	opacity: 1;

}

a.animated-button.victoria-four {

	border: 2px solid #D24D57;

}

a.animated-button.victoria-four:after {

	background: #D24D57;

	opacity: .5;

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

	-ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);

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

	transform: translateY(-50%) translateX(-50%) rotate(90deg);

}

a.animated-button.victoria-four:hover:after {

	opacity: 1;

	height: 600% !important;

}

/* Sandy Buttons */



a.animated-button.sandy-one {

	border: 2px solid #AEA8D3;

	color: #FFF;

}

a.animated-button.sandy-one:after {

	border: 3px solid #AEA8D3;

	opacity: 0;

	-moz-transform: translateX(-50%) translateY(-50%);

	-ms-transform: translateX(-50%) translateY(-50%);

	-webkit-transform: translateX(-50%) translateY(-50%);

	transform: translateX(-50%) translateY(-50%);

	

}

a.animated-button.sandy-one:hover:after {

	height: 120% !important;

	opacity: 1;

	color: #FFF;

}

a.animated-button.sandy-two {

	border: 2px solid #AEA8D3;

	color: #FFF;

}

a.animated-button.sandy-two:after {

	border: 3px solid #AEA8D3;

	opacity: 0;

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

	-ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);

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

	transform: translateY(-50%) translateX(-50%) rotate(90deg);

}

a.animated-button.sandy-two:hover:after {

	height: 600% !important;

	opacity: 1;

	color: #FFF;

}

a.animated-button.sandy-three {

	border: 2px solid #AEA8D3;

	color: #FFF;

}

a.animated-button.sandy-three:after {

	border: 3px solid #AEA8D3;

	opacity: 0;

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

	-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);

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

	transform: translateX(-50%) translateY(-50%) rotate(-25deg);

}

a.animated-button.sandy-three:hover:after {

	height: 400% !important;

	opacity: 1;

	color: #FFF;

}

a.animated-button.sandy-four {

	border: 2px solid #AEA8D3;

	color: #FFF;

}

a.animated-button.sandy-four:after {

	border: 3px solid #AEA8D3;

	opacity: 0;

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

	-ms-transform: translateY(-50%) translateX(-50%) rotate(25deg);

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

	transform: translateY(-50%) translateX(-50%) rotate(25deg);

}

a.animated-button.sandy-four:hover:after {

	height: 400% !important;

	opacity: 1;

	color: #FFF;

}

/* Gibson Buttons */



a.animated-button.gibson-one {

	border: 2px solid #65b37a;

	color: #FFF;

}

a.animated-button.gibson-one:after {

	opacity: 0;

	background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);

	background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);

	background-size: 10px 10px;

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

	-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);

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

	transform: translateX(-50%) translateY(-50%) rotate(25deg);

}

a.animated-button.gibson-one:hover:after {

	height: 600% !important;

	opacity: 1;

	color: #FFF;

}

a.animated-button.gibson-two {

	border: 2px solid #65b37a;

	color: #FFF;

}

a.animated-button.gibson-two:after {

	opacity: 0;

	background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);

	background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);

	background-size: 10px 10px;

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

	-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);

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

	transform: translateX(-50%) translateY(-50%) rotate(-25deg);

}

a.animated-button.gibson-two:hover:after {

	height: 600% !important;

	opacity: 1;

	color: #FFF;

}

a.animated-button.gibson-three {

	border: 2px solid #65b37a;

	color: #FFF;

}

a.animated-button.gibson-three:after {

	opacity: 0;

	background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);

	background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);

	background-size: 10px 10px;

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

	-ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);

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

	transform: translateX(-50%) translateY(-50%) rotate(90deg);

}

a.animated-button.gibson-three:hover:after {

	height: 600% !important;

	opacity: 1;

	color: #FFF;

}

a.animated-button.gibson-four {

	border: 2px solid #65b37a;

	color: #FFF;

}

a.animated-button.gibson-four:after {

	opacity: 0;

	background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);

	background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);

	background-size: 10px 10px;

	-moz-transform: translateX(-50%) translateY(-50%);

	-ms-transform: translateX(-50%) translateY(-50%));

	-webkit-transform: translateX(-50%) translateY(-50%);

	transform: translateX(-50%) translateY(-50%);

}

a.animated-button.gibson-four:hover:after {

	height: 600% !important;

	opacity: 1;

	color: #FFF;

}

/* Thar Buttons */



a.animated-button.thar-one {

	color: #fff;

	cursor: pointer;

	display: block;

	position: relative;

	border: 2px solid #F7CA18;

	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;

}

a.animated-button.thar-one:hover {

	color: #000 !important;

	background-color: transparent;

	text-shadow: none;

}

a.animated-button.thar-one:hover:before {

	bottom: 0%;

	top: auto;

	height: 100%;

}

a.animated-button.thar-one:before {

	display: block;

	position: absolute;

	left: 0px;

	top: 0px;

	height: 0px;

	width: 100%;

	z-index: -1;

	content: '';

	color: #000 !important;

	background: #F7CA18;

	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;

}

a.animated-button.thar-two {

	color: #fff;

	cursor: pointer;

	display: block;

	position: relative;

	border: 2px solid #F7CA18;

	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;

}

a.animated-button.thar-two:hover {

	color: #000 !important;

	background-color: transparent;

	text-shadow: ntwo;

}

a.animated-button.thar-two:hover:before {

	top: 0%;

	bottom: auto;

	height: 100%;

}

a.animated-button.thar-two:before {

	display: block;

	position: absolute;

	left: 0px;

	bottom: 0px;

	height: 0px;

	width: 100%;

	z-index: -1;

	content: '';

	color: #000 !important;

	background: #F7CA18;

	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;

}

a.animated-button.thar-three {

	color: #fff;

	cursor: pointer;

	display: block;

	position: relative;

	border: 2px solid #F7CA18;

	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);

0s;

}

a.animated-button.thar-three:hover {

	color: #000 !important;

	background-color: transparent;

	text-shadow: nthree;

}

a.animated-button.thar-three:hover:before {

	left: 0%;

	right: auto;

	width: 100%;

}

a.animated-button.thar-three:before {

	display: block;

	position: absolute;

	top: 0px;

	right: 0px;

	height: 100%;

	width: 0px;

	z-index: -1;

	content: '';

	color: #000 !important;

	background: #F7CA18;

	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);

0s;

}

a.animated-button.thar-four {

	color: #fff;

	cursor: pointer;

	display: block;

	position: relative;

	border: 2px solid #F7CA18;

	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);

0s;

}

a.animated-button.thar-four:hover {

	color: #000 !important;

	background-color: transparent;

	text-shadow: nfour;

}

a.animated-button.thar-four:hover:before {

	right: 0%;

	left: auto;

	width: 100%;

}

a.animated-button.thar-four:before {

	display: block;

	position: absolute;

	top: 0px;

	left: 0px;

	height: 100%;

	width: 0px;

	z-index: -1;

	content: '';

	color: #000 !important;

	background: #F7CA18;

	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);

0s;

}







/* ===== Buttons ======= */

/* Icon Forward */

.hvr-icon-forward {

  display: inline-block;

  vertical-align: middle;

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -moz-osx-font-smoothing: grayscale;

  position: relative;

  padding-right: 2.2em;

  -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    -ms-transition: all 0.5s ease;

    transition: all 0.5s ease;

}

.hvr-icon-forward:before {

  content: "\f138";

  position: absolute;

  right: 1em;

  padding: 0 1px;

  font-family: FontAwesome;

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

  -webkit-transition-duration: 0.5s;

  transition-duration: 0.5s;

  -webkit-transition-property: transform;

  transition-property: transform;

  -webkit-transition-timing-function: ease-out;

  transition-timing-function: ease-out;

}

.hvr-icon-forward:hover:before, .hvr-icon-forward:focus:before, .hvr-icon-forward:active:before {

  -webkit-transform: translateX(4px);

  transform: translateX(4px);

  -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    -ms-transition: all 0.5s ease;

    transition: all 0.5s ease;

}