/* 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: bottom line slides/fades in */
.cl-effect-2 a { padding: 8px 0; }
.cl-effect-2 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-2 a:hover::after, .cl-effect-2 a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); }
/* Effect 3: bottom border enlarge */
.cl-effect-3 a { padding: 0 0 10px; }
.cl-effect-3 a::after { position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: rgba(0,0,0,0.1); 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-3 a:hover::after, .cl-effect-3 a:focus::after { height: 5px; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); }

/* Effect 4: same word slide in */
.cl-effect-4 a { overflow: hidden; padding: 0 4px; height: 2em; }
.cl-effect-4 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-4 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-4 a:hover span, .cl-effect-4 a:focus span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); }
/* Effect 5: second border slides up */
.cl-effect-5 a { padding: 12px 10px 10px; color: #566473; text-shadow: none; font-weight: 700; }
.cl-effect-5 a::before, .cl-effect-5 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-5 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-5 a:hover::before, .cl-effect-5 a:hover::after, .cl-effect-5 a:focus::before, .cl-effect-5 a:focus::after { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }
.cl-effect-5 a:hover::after, .cl-effect-5 a:focus::after { top: 0%; opacity: 1; }
/* Effect 6: reveal, push out */
.cl-effect-6 { position: relative; z-index: 1; }
.cl-effect-6 a { overflow: hidden; margin: 0 15px; color:#fff }
.cl-effect-6 a span { display: block; padding: 10px 20px; background: #128ec2; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; }
.cl-effect-6 a::before { position: absolute; top: 0; left: 0; z-index: -1; padding: 10px 20px; width: 100%; height: 100%; background: #fff; color: #128ec2; 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-6 a:hover span, .cl-effect-6 a:focus span { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); }
.cl-effect-6 a:hover::before, .cl-effect-6 a:focus::before { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); }

/* Effect 7: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */
.cl-effect-7 a { padding: 10px 0; border-top: 2px solid #0972b4; color: #0972b4; text-shadow: none; }
.cl-effect-7 a::before { position: absolute; top: 0; left: 0; overflow: hidden; padding: 10px 0; max-width: 0; border-bottom: 2px solid #566473; color: #566473; content: attr(data-hover); -webkit-transition: max-width 0.5s; -moz-transition: max-width 0.5s; transition: max-width 0.5s; }
.cl-effect-7 a:hover::before, .cl-effect-7 a:focus::before { max-width: 100%; }
/* Effect 8: fall down */
.cl-effect-8 a { color: #6f8686; text-shadow: 0 0 1px rgba(111,134,134,0.3); }
.cl-effect-8 a::before { color: #128ec2; 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-8 a:hover::before, .cl-effect-8 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 9: 3D side */
.cl-effect-9 a { line-height: 2em; -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px;color:#fff }
.cl-effect-9 a span { position: relative; display: inline-block; padding: 3px 15px 0; background: #128ec2; 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-9 a span::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #e5e6e6; 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-9 a:hover span, .cl-effect-9 a:focus span { background: #128ec2; color:#fff }
.cl-effect-9 a:hover span::before, .cl-effect-9 a:focus span::before { -webkit-transform: rotateX(10deg); -moz-transform: rotateX(10deg); transform: rotateX(10deg); }
/* Effect 10: borders slight translate */
.cl-effect-10 a { padding: 10px; color: #128ec2; font-weight: 700; text-shadow: none; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; }
.cl-effect-10 a::before, .cl-effect-10 a::after { position: absolute; left: 0; width: 100%; height: 2px; background: #128ec2; 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-10 a::before { top: 0; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); }
.cl-effect-10 a::after { bottom: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); }
.cl-effect-10 a:hover, .cl-effect-10 a:focus { color: #6f8686; }
.cl-effect-10 a:hover::before, .cl-effect-10 a:focus::before, .cl-effect-10 a:hover::after, .cl-effect-10 a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); }





/* Common button styles */
.button { display:inline-block;min-width: 150px; max-width: 250px; margin: 1em; padding: 1em 2em; border: none; background: none; color: inherit; vertical-align: middle; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; }
.button:focus { outline: none; }
.button > span { vertical-align: middle; }
/* Borders */
.button--border-thin { border: 1px solid; }
.button--border-medium { border: 2px solid; }
.button--border-thick { border: 3px solid; }
/* Individual button styles */

/* Tamaya */
.button--tamaya { overflow: hidden; color: #128ec2; min-width: 180px; }
.button--tamaya.button--inverted { color: #37474f; border-color: #128ec2; }
.button--tamaya::before, .button--tamaya::after { content: attr(data-text); position: absolute; width: 100%; height: 50%; left: 0; background: #128ec2; color: #fff; overflow: hidden; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
.button--tamaya.button--inverted::before, .button--tamaya.button--inverted::after { background: #fff; color: #37474f; }
.button--tamaya::before { top: 0; padding-top: 1em; }
.button--tamaya::after { bottom: 0; line-height: 0; }
.button--tamaya > span { display: block; -webkit-transform: scale3d(0.2, 0.2, 1); transform: scale3d(0.2, 0.2, 1); opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); }
.button--tamaya:hover::before { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
.button--tamaya:hover::after { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
.button--tamaya:hover > span { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

/* Nina */
.button--nina { padding: 0 2em; background: #128ec2; color: #fff; overflow: hidden; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.button--nina.button--inverted { background: #fff; color: #7986cb; }
.button--nina > span { display: inline-block; padding: 1em 0; opacity: 0; color: #fff; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); }
.button--nina::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 1em 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); }
.button--nina:hover { background-color: #3f51b5; }
.button--nina:hover::before { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
.button--nina:hover > span { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.button--nina:hover > span:nth-child(1) { -webkit-transition-delay: 0.045s; transition-delay: 0.045s; }
.button--nina:hover > span:nth-child(2) { -webkit-transition-delay: 0.09s; transition-delay: 0.09s; }
.button--nina:hover > span:nth-child(3) { -webkit-transition-delay: 0.135s; transition-delay: 0.135s; }
.button--nina:hover > span:nth-child(4) { -webkit-transition-delay: 0.18s; transition-delay: 0.18s; }
.button--nina:hover > span:nth-child(5) { -webkit-transition-delay: 0.225s; transition-delay: 0.225s; }
.button--nina:hover > span:nth-child(6) { -webkit-transition-delay: 0.27s; transition-delay: 0.27s; }
.button--nina:hover > span:nth-child(7) { -webkit-transition-delay: 0.315s; transition-delay: 0.315s; }
.button--nina:hover > span:nth-child(8) { -webkit-transition-delay: 0.36s; transition-delay: 0.36s; }
.button--nina:hover > span:nth-child(9) { -webkit-transition-delay: 0.405s; transition-delay: 0.405s; }
.button--nina:hover > span:nth-child(10) { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; }
/* Nanuk */
.button--nanuk { padding: 0 2em; overflow: hidden; background: #128ec2; color:#fff; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.button--nanuk.button--inverted { background: #fff; color: #7986cb; }
.button--nanuk > span { display: inline-block; padding: 1em 0; }
.button--nanuk:hover { background-color: #3f51b5; }
.button--nanuk:hover > span:nth-child(odd) { -webkit-animation: anim-nanuk-1 0.5s forwards; animation: anim-nanuk-1 0.5s forwards; }
.button--nanuk:hover > span:nth-child(even) { -webkit-animation: anim-nanuk-2 0.5s forwards; animation: anim-nanuk-2 0.5s forwards; }
.button--nanuk:hover > span:nth-child(odd), .button--nanuk:hover > span:nth-child(even) { -webkit-animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-animation-function: cubic-bezier(0.75, 0, 0.125, 1); }
@-webkit-keyframes anim-nanuk-1 {  0%,  100% {
 opacity: 1;
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 49% {
 opacity: 1;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
 50% {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
 color: inherit;
}
 51% {
 opacity: 0;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 color: #fff;
}
 100% {
 color: #fff;
}
}
@keyframes anim-nanuk-1 {  0%,  100% {
 opacity: 1;
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 49% {
 opacity: 1;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
}
 50% {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
 color: inherit;
}
 51% {
 opacity: 0;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 color: #fff;
}
 100% {
 color: #fff;
}
}
@-webkit-keyframes anim-nanuk-2 {  0%,  100% {
 opacity: 1;
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 49% {
 opacity: 1;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
}
 50% {
 opacity: 0;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 color: inherit;
}
 51% {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
 color: #fff;
}
 100% {
 color: #fff;
}
}
@keyframes anim-nanuk-2 {  0%,  100% {
 opacity: 1;
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
 49% {
 opacity: 1;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
}
 50% {
 opacity: 0;
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 color: inherit;
}
 51% {
 opacity: 0;
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
 color: #fff;
}
 100% {
 color: #fff;
}
}
.button--nanuk:hover > span:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; }
.button--nanuk:hover > span:nth-child(2) { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; }
.button--nanuk:hover > span:nth-child(3) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.button--nanuk:hover > span:nth-child(4) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
.button--nanuk:hover > span:nth-child(5) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.button--nanuk:hover > span:nth-child(6) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
.button--nanuk:hover > span:nth-child(7) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.button--nanuk:hover > span:nth-child(8) { -webkit-animation-delay: 0.35s; animation-delay: 0.35s; }
.button--nanuk:hover > span:nth-child(9) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.button--nanuk:hover > span:nth-child(10) { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; }
.button--nanuk:hover > span:nth-child(11) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }