@charset "utf-8";
/* CSS Document */

.cbutton {
	position: relative;
	display: inline-block;
	padding: 0;
	border: none;
	background: none;
	color: #286aab;
	font-size: 1.4em;
	overflow: visible;
	-webkit-transition: color 0.7s;
	transition: color 0.7s;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.cbutton.cbutton--click,
.cbutton:focus {
	outline: none;
	color: #3c8ddc;
}
.cbutton__icon {
	display: block;
}
.cbutton__text {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
 .cbutton::after {
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -35px 0 0 -35px;
 width: 70px;
 height: 70px;
 border-radius: 50%;
 content: '';
 opacity: 0;
 pointer-events: none;
}
.cbutton--box {
	width: 24px;
	height: 24px;
	border: 4px solid rgb(22, 35, 47);
}
.cbutton--box-color-1 {
	background: #ff8b00;
}
.cbutton--box-color-2 {
	background: #b61854;
}
.cbutton--box-color-3 {
	background: #1d5cab;
}
.cbutton--box-color-4 {
	background: #f2438c;
}
.cbutton--box-color-5 {
	background: #ff6414;
}
.cbutton--box-color-6 {
	background: #5ed500;
}
.cbutton--box-color-7 {
	background: #0077ff;
}
.cbutton--box-color-8 {
	background: #7bff00;
}
.cbutton--box-color-9 {
	background: #fff;
}

/* Individual Effects */

/* Effect Boris */
.cbutton--effect-boris::after {
 background: rgba(170, 170, 170, 0.1);
}
 .cbutton--effect-boris.cbutton--click::after {
 -webkit-animation: anim-effect-boris 0.3s forwards;
 animation: anim-effect-boris 0.3s forwards;
}
 @-webkit-keyframes anim-effect-boris {
 0% {
 -webkit-transform: scale3d(0.3, 0.3, 1);
 transform: scale3d(0.3, 0.3, 1);
}
 25%, 50% {
 opacity: 1;
}
to {
	opacity: 0;
	-webkit-transform: scale3d(1.2, 1.2, 1);
	transform: scale3d(1.2, 1.2, 1);
}
}
 @keyframes anim-effect-boris {
 0% {
 -webkit-transform: scale3d(0.3, 0.3, 1);
 transform: scale3d(0.3, 0.3, 1);
}
 25%, 50% {
 opacity: 1;
}
to {
	opacity: 0;
	-webkit-transform: scale3d(1.2, 1.2, 1);
	transform: scale3d(1.2, 1.2, 1);
}
}

/* Jelena */
.cbutton--effect-jelena::after {
 border: 2px solid rgba(170, 170, 170, 0.5);
}
 .cbutton--effect-jelena.cbutton--click::after {
 -webkit-animation: anim-effect-jelena 0.3s ease-out forwards;
 animation: anim-effect-jelena 0.3s ease-out forwards;
}
 @-webkit-keyframes anim-effect-jelena {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.5, 0.5, 1);
 transform: scale3d(0.5, 0.5, 1);
}
to {
	opacity: 0;
	-webkit-transform: scale3d(1.2, 1.2, 1);
	transform: scale3d(1.2, 1.2, 1);
}
}
 @keyframes anim-effect-jelena {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.5, 0.5, 1);
 transform: scale3d(0.5, 0.5, 1);
}
to {
	opacity: 0;
	-webkit-transform: scale3d(1.2, 1.2, 1);
	transform: scale3d(1.2, 1.2, 1);
}
}

/* Radomir */
.cbutton--effect-radomir::after {
 box-shadow: inset 0 0 0 35px rgba(170, 170, 170, 0);
}
 .cbutton--effect-radomir.cbutton--click::after {
 -webkit-animation: anim-effect-radomir 0.5s ease-out forwards;
 animation: anim-effect-radomir 0.5s ease-out forwards;
}
 @-webkit-keyframes anim-effect-radomir {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.4, 0.4, 1);
 transform: scale3d(0.4, 0.4, 1);
}
 80% {
 box-shadow: inset 0 0 0 2px rgba(170, 170, 170, 0.8);
 opacity: 0.1;
}
 100% {
 box-shadow: inset 0 0 0 2px rgba(170, 170, 170, 0.8);
 opacity: 0;
 -webkit-transform: scale3d(1.2, 1.2, 1);
 transform: scale3d(1.2, 1.2, 1);
}
}
 @keyframes anim-effect-radomir {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.4, 0.4, 1);
 transform: scale3d(0.4, 0.4, 1);
}
 80% {
 box-shadow: inset 0 0 0 2px rgba(170, 170, 170, 0.8);
 opacity: 0.1;
}
 100% {
 box-shadow: inset 0 0 0 2px rgba(170, 170, 170, 0.8);
 opacity: 0;
 -webkit-transform: scale3d(1.2, 1.2, 1);
 transform: scale3d(1.2, 1.2, 1);
}
}

/* Sanja */
.cbutton--effect-sanja::after {
 background: rgba(170, 170, 170, 0.1);
}
 .cbutton--effect-sanja.cbutton--click::after {
 -webkit-animation: anim-effect-sanja 1s ease-out forwards;
 animation: anim-effect-sanja 1s ease-out forwards;
}
 @-webkit-keyframes anim-effect-sanja {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.5, 0.5, 1);
 transform: scale3d(0.5, 0.5, 1);
}
 25% {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}
 @keyframes anim-effect-sanja {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.5, 0.5, 1);
 transform: scale3d(0.5, 0.5, 1);
}
 25% {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}

/* Novak */
.cbutton--effect-novak::after {
 background: rgba(170, 170, 170, 0.25);
}
 .cbutton--effect-novak.cbutton--click::after {
 -webkit-animation: anim-effect-novak 0.5s forwards;
 animation: anim-effect-novak 0.5s forwards;
}
 @-webkit-keyframes anim-effect-novak {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.1, 0.1, 1);
 transform: scale3d(0.1, 0.1, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale3d(8, 8, 1);
 transform: scale3d(8, 8, 1);
}
}
 @keyframes anim-effect-novak {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.1, 0.1, 1);
 transform: scale3d(0.1, 0.1, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale3d(8, 8, 1);
 transform: scale3d(8, 8, 1);
}
}

/* Ilinka */
.cbutton--effect-ilinka::after {
 background: rgba(170, 170, 170, 0.25);
}
 .cbutton--effect-ilinka.cbutton--click::after {
 -webkit-animation: anim-effect-ilinka 0.5s ease-out forwards;
 animation: anim-effect-ilinka 0.5s ease-out forwards;
}
 @-webkit-keyframes anim-effect-ilinka {
 0% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
 @keyframes anim-effect-ilinka {
 0% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}

/* Marin */
.cbutton--effect-marin::after {
 box-shadow: inset 0 0 0 3px rgba(170, 170, 170, 0.05);
}
 .cbutton--effect-marin.cbutton--click::after {
 -webkit-animation: anim-effect-marin 0.5s ease-out forwards;
 animation: anim-effect-marin 0.5s ease-out forwards;
}
 @-webkit-keyframes anim-effect-marin {
 0% {
 opacity: 1;
}
 100% {
 box-shadow: inset 0 0 0 3px rgba(170, 170, 170, 0.8);
 opacity: 0;
 -webkit-transform: scale3d(0.75, 0.75, 1);
 transform: scale3d(0.75, 0.75, 1);
}
}
 @keyframes anim-effect-marin {
 0% {
 opacity: 1;
}
 100% {
 box-shadow: inset 0 0 0 3px rgba(170, 170, 170, 0.8);
 opacity: 0;
 -webkit-transform: scale3d(0.75, 0.75, 1);
 transform: scale3d(0.75, 0.75, 1);
}
}

/* Nikola */
.cbutton--effect-nikola::after {
 background: rgba(170, 170, 170, 0.1);
}
 .cbutton--effect-nikola.cbutton--click::after {
 -webkit-animation: anim-effect-nikola 0.5s forwards;
 animation: anim-effect-nikola 0.5s forwards;
}
 @-webkit-keyframes anim-effect-nikola {
 0% {
 opacity: 0;
 -webkit-transform: scale3d(0.2, 0.2, 1);
 transform: scale3d(0.2, 0.2, 1);
}
 50% {
 opacity: 1;
 -webkit-transform: scale3d(1.2, 1.2, 1);
 transform: scale3d(1.2, 1.2, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale3d(0.8, 0.8, 1);
 transform: scale3d(0.8, 0.8, 1);
}
}
 @keyframes anim-effect-nikola {
 0% {
 opacity: 0;
 -webkit-transform: scale3d(0.2, 0.2, 1);
 transform: scale3d(0.2, 0.2, 1);
}
 50% {
 opacity: 1;
 -webkit-transform: scale3d(1.2, 1.2, 1);
 transform: scale3d(1.2, 1.2, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale3d(0.8, 0.8, 1);
 transform: scale3d(0.8, 0.8, 1);
}
}

/* Tamara */
.cbutton--effect-tamara::after {
 box-shadow: 0 0 0 3px rgba(170, 170, 170, 0.05);
}
 .cbutton--effect-tamara.cbutton--click::after {
 -webkit-animation: anim-effect-tamara 0.5s ease-out forwards;
 animation: anim-effect-tamara 0.5s ease-out forwards;
}
 @-webkit-keyframes anim-effect-tamara {
 0% {
 box-shadow: 0 0 0 3px rgba(170, 170, 170, 0.3);
 opacity: 1;
 -webkit-transform: scale3d(0.6, 0.6, 1);
 transform: scale3d(0.6, 0.6, 1);
}
 100% {
 box-shadow: 0 0 0 100px rgba(170, 170, 170, 0);
 opacity: 0;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}
 @keyframes anim-effect-tamara {
 0% {
 box-shadow: 0 0 0 3px rgba(170, 170, 170, 0.3);
 opacity: 1;
 -webkit-transform: scale3d(0.6, 0.6, 1);
 transform: scale3d(0.6, 0.6, 1);
}
 100% {
 box-shadow: 0 0 0 100px rgba(170, 170, 170, 0);
 opacity: 0;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}

/* Zoran */
.cbutton--effect-zoran::after {
 background: rgba(170, 170, 170, 0.1);
}
 .cbutton--effect-zoran.cbutton--click::after {
 -webkit-animation: anim-effect-zoran 0.5s ease-out forwards;
 animation: anim-effect-zoran 0.5s ease-out forwards;
}
 @-webkit-keyframes anim-effect-zoran {
 0% {
 opacity: 0.2;
}
 50% {
 opacity: 1;
 -webkit-transform: scale3d(0.6, 1, 1);
 transform: scale3d(0.6, 1, 1);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 100% {
 opacity: 0.3;
 -webkit-transform: scale3d(1.1, 1.1, 1);
 transform: scale3d(1.1, 1.1, 1);
}
}
 @keyframes anim-effect-zoran {
 0% {
 opacity: 0.2;
}
 50% {
 opacity: 1;
 -webkit-transform: scale3d(0.6, 1, 1);
 transform: scale3d(0.6, 1, 1);
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 100% {
 opacity: 0.3;
 -webkit-transform: scale3d(1.1, 1.1, 1);
 transform: scale3d(1.1, 1.1, 1);
}
}

/* Ivana */
.cbutton--effect-ivana::before {
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -35px 0 0 -35px;
 width: 70px;
 height: 70px;
 border-radius: 50%;
 content: '';
 opacity: 0;
 pointer-events: none;
}
 .cbutton--effect-ivana::before, .cbutton--effect-ivana::after {
 box-shadow: 0 0 0 2px rgba(170, 170, 170, 0.8);
}
 .cbutton--effect-ivana.cbutton--click::before {
 -webkit-animation: anim-effect-ivana-1 0.5s forwards;
 animation: anim-effect-ivana-1 0.5s forwards;
}
 .cbutton--effect-ivana.cbutton--click::after {
 -webkit-animation: anim-effect-ivana-2 0.5s forwards;
 animation: anim-effect-ivana-2 0.5s forwards;
}
 @-webkit-keyframes anim-effect-ivana-1 {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.5, 0.5, 1);
 transform: scale3d(0.5, 0.5, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale3d(1.1, 1.1, 1);
 transform: scale3d(1.1, 1.1, 1);
}
}
 @keyframes anim-effect-ivana-1 {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.5, 0.5, 1);
 transform: scale3d(0.5, 0.5, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale3d(1.1, 1.1, 1);
 transform: scale3d(1.1, 1.1, 1);
}
}
 @-webkit-keyframes anim-effect-ivana-2 {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.5, 0.5, 1);
 transform: scale3d(0.5, 0.5, 1);
}
 50%, 100% {
 opacity: 0;
 -webkit-transform: scale3d(1.2, 1.2, 1);
 transform: scale3d(1.2, 1.2, 1);
}
}
 @keyframes anim-effect-ivana-2 {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.5, 0.5, 1);
 transform: scale3d(0.5, 0.5, 1);
}
 50%, 100% {
 opacity: 0;
 -webkit-transform: scale3d(1.2, 1.2, 1);
 transform: scale3d(1.2, 1.2, 1);
}
}

/* Marko */
.cbutton--effect-marko::after {
 box-shadow: inset 0 0 0 2px rgba(170, 170, 170, 0.3);
}
 .cbutton--effect-marko.cbutton--click::after {
 -webkit-animation: anim-effect-marko 0.5s forwards;
 animation: anim-effect-marko 0.5s forwards;
}
 @-webkit-keyframes anim-effect-marko {
 0% {
 opacity: 1;
}
 50% {
 box-shadow: inset 0 0 0 35px rgba(170, 170, 170, 0.1);
 opacity: 1;
}
 100% {
 box-shadow: inset 0 0 0 35px rgba(170, 170, 170, 0.1);
 opacity: 0;
 -webkit-transform: scale3d(1.1, 1.1, 1);
 transform: scale3d(1.1, 1.1, 1);
}
}
 @keyframes anim-effect-marko {
 0% {
 opacity: 1;
}
 50% {
 box-shadow: inset 0 0 0 35px rgba(170, 170, 170, 0.1);
 opacity: 1;
}
 100% {
 box-shadow: inset 0 0 0 35px rgba(170, 170, 170, 0.1);
 opacity: 0;
 -webkit-transform: scale3d(1.1, 1.1, 1);
 transform: scale3d(1.1, 1.1, 1);
}
}

/* Stoja */
.cbutton--effect-stoja::before {
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -35px 0 0 -35px;
 width: 70px;
 height: 70px;
 border-radius: 50%;
 content: '';
 opacity: 0;
 pointer-events: none;
}
 .cbutton--effect-stoja::before, .cbutton--effect-stoja::after {
 box-shadow: 0 0 0 2px rgba(170, 170, 170, 0.5);
}
 .cbutton--effect-stoja-left::before, .cbutton--effect-stoja-left::after {
 -webkit-clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%);
 clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%);
}
 .cbutton--effect-stoja-top::before, .cbutton--effect-stoja-top::after {
 -webkit-clip-path: polygon(10% 0%, 90% 0%, 50% 50%);
 clip-path: polygon(25% 0%, 75% 0%, 50% 50%);
}
 .cbutton--effect-stoja-right::before, .cbutton--effect-stoja-right::after {
 -webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 50% 50%);
 clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 50% 50%);
}
 .cbutton--effect-stoja.cbutton--click::before {
 -webkit-animation: anim-effect-stoja-1 0.5s forwards;
 animation: anim-effect-stoja-1 0.5s forwards;
}
 .cbutton--effect-stoja.cbutton--click::after {
 -webkit-animation: anim-effect-stoja-2 0.5s forwards;
 animation: anim-effect-stoja-2 0.5s forwards;
}
 @-webkit-keyframes anim-effect-stoja-1 {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.3, 0.3, 1);
 transform: scale3d(0.3, 0.3, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}
 @keyframes anim-effect-stoja-1 {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.3, 0.3, 1);
 transform: scale3d(0.3, 0.3, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}
 @-webkit-keyframes anim-effect-stoja-2 {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.5, 0.5, 1);
 transform: scale3d(0.5, 0.5, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale3d(1.5, 1.5, 1);
 transform: scale3d(1.5, 1.5, 1);
}
}
 @keyframes anim-effect-stoja-2 {
 0% {
 opacity: 1;
 -webkit-transform: scale3d(0.5, 0.5, 1);
 transform: scale3d(0.5, 0.5, 1);
}
 100% {
 opacity: 0;
 -webkit-transform: scale3d(1.5, 1.5, 1);
 transform: scale3d(1.5, 1.5, 1);
}
}

/* Jagoda */
.cbutton--effect-jagoda::before {
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -25px 0 0 -25px;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 content: '';
 opacity: 0;
 pointer-events: none;
}
 .cbutton--effect-jagoda::after {
 margin: -25px 0 0 -25px;
 width: 50px;
 height: 50px;
}
 .cbutton--effect-jagoda::before, .cbutton--effect-jagoda::after {
 box-shadow: 0 0 0 2px rgba(170, 170, 170, 0.5);
}
 .cbutton--effect-jagoda.cbutton--click::before, .cbutton--effect-jagoda.cbutton--click::after {
 -webkit-animation-name: anim-effect-jagoda-2, anim-effect-jagoda-1;
 animation-name:anim-effect-jagoda-2, anim-effect-jagoda-1;
 -webkit-animation-duration: 1.2s;
 animation-duration: 1.2s;
 -webkit-animation-iteration-count: 5;
 animation-iteration-count: 5;
 -webkit-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}
 .cbutton--effect-jagoda.cbutton--click::after {
 -webkit-animation-delay: 0.6s;
 animation-delay: 0.6s;
}
 @-webkit-keyframes anim-effect-jagoda-1 {
 0%, 100% {
 opacity: 0;
}
 40%, 60% {
 opacity: 1;
}
}
 @keyframes anim-effect-jagoda-1 {
 0%, 100% {
 opacity: 0;
}
 40%, 60% {
 opacity: 1;
}
}
 @-webkit-keyframes anim-effect-jagoda-2 {
 0% {
 -webkit-transform: scale3d(0.5, 0.5, 1);
 transform: scale3d(0.5, 0.5, 1);
}
 100% {
 -webkit-transform: scale3d(1.4, 1.4, 1);
 transform: scale3d(1.4, 1.4, 1);
}
}
 @keyframes anim-effect-jagoda-2 {
 0% {
 -webkit-transform: scale3d(0.5, 0.5, 1);
 transform: scale3d(0.5, 0.5, 1);
}
 100% {
 -webkit-transform: scale3d(1.4, 1.4, 1);
 transform: scale3d(1.4, 1.4, 1);
}
}

/* Simo */
.cbutton--effect-simo::before {
 position: absolute;
 top: 50%;
 left: -20px;
 margin: -4px 0 0 0;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: rgba(170, 170, 170, 0.3);
 content: '';
 opacity: 0;
 -webkit-transform-origin: 35px 50%;
 transform-origin: 35px 50%;
}
 .cbutton--effect-simo::after {
 border: 8px solid rgba(170, 170, 170, 0.1);
}
 .cbutton--effect-simo.cbutton--click::after {
 -webkit-animation: anim-effect-simo-1 5s forwards;
 animation: anim-effect-simo-1 5s forwards;
}
 .cbutton--effect-simo.cbutton--click::before {
 -webkit-animation-name: anim-effect-simo-2, anim-effect-simo-3;
 animation-name: anim-effect-simo-2, anim-effect-simo-3;
 -webkit-animation-duration: 5s, 0.4s;
 animation-duration: 5s, 0.4s;
 -webkit-animation-iteration-count: 1, infinite;
 animation-iteration-count: 1, infinite;
 -webkit-animation-timing-function: ease, linear;
 animation-timing-function: ease, linear;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}
 @-webkit-keyframes anim-effect-simo-1 {
 0%, 100% {
 -webkit-transform: scale3d(0, 0, 1);
 transform: scale3d(0, 0, 1);
 opacity: 0;
}
 5%, 95% {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}
 @keyframes anim-effect-simo-1 {
 0%, 100% {
 -webkit-transform: scale3d(0, 0, 1);
 transform: scale3d(0, 0, 1);
 opacity: 0;
}
 5%, 95% {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}
 @-webkit-keyframes anim-effect-simo-2 {
 0%, 5%, 95%, 100% {
 opacity: 0;
}
 10%, 90% {
 opacity: 1;
}
}
 @keyframes anim-effect-simo-2 {
 0%, 5%, 95%, 100% {
 opacity: 0;
}
 10%, 90% {
 opacity: 1;
}
}
 @-webkit-keyframes anim-effect-simo-3 {
 100% {
 -webkit-transform: rotate3d(0, 0, 1, 360deg);
 transform: rotate3d(0, 0, 1, 360deg);
}
}
 @keyframes anim-effect-simo-3 {
 100% {
 -webkit-transform: rotate3d(0, 0, 1, 360deg);
 transform: rotate3d(0, 0, 1, 360deg);
}
}

/* Milan */
.cbutton--effect-milan::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -35px 0 0 -35px;
 width: 70px;
 height: 70px;
 border-radius: 50%;
 opacity: 0;
 pointer-events: none;
}
 .cbutton--effect-milan::after, .cbutton--effect-milan::before {
 border: 4px solid rgba(170, 170, 170, 0.1);
}
 .cbutton--effect-milan.cbutton--click::after {
 -webkit-animation-name: anim-effect-milan-3, anim-effect-milan-1;
 animation-name: anim-effect-milan-3, anim-effect-milan-1;
 -webkit-animation-duration: 5s, 2s;
 animation-duration: 5s, 2s;
 -webkit-animation-iteration-count: 1, infinite;
 animation-iteration-count: 1, infinite;
 -webkit-animation-timing-function: ease, linear;
 animation-timing-function: ease, linear;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}
 .cbutton--effect-milan.cbutton--click::before {
 -webkit-animation-name: anim-effect-milan-3, anim-effect-milan-2;
 animation-name: anim-effect-milan-3, anim-effect-milan-2;
 -webkit-animation-duration: 5s, 2s;
 animation-duration: 5s, 2s;
 -webkit-animation-iteration-count: 1, infinite;
 animation-iteration-count: 1, infinite;
 -webkit-animation-timing-function: ease, linear;
 animation-timing-function: ease, linear;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}
 @-webkit-keyframes anim-effect-milan-1 {
 0% {
 -webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
 transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
}
 100% {
 -webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
 transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
}
}
 @keyframes anim-effect-milan-1 {
 0% {
 -webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
 transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
}
 100% {
 -webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
 transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);
}
}
 @-webkit-keyframes anim-effect-milan-2 {
 0% {
 -webkit-transform: perspective(1000px) rotate3d(-1, -1, -1, 0deg);
 transform: perspective(1000px) rotate3d(-1, -1, -1, 0deg);
}
 100% {
 -webkit-transform: perspective(1000px) rotate3d(-1, -1, -1, 360deg);
 transform: perspective(1000px) rotate3d(-1, -1, -1, 360deg);
}
}
 @keyframes anim-effect-milan-2 {
 0% {
 -webkit-transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);
 transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);
}
 100% {
 -webkit-transform: perspective(1000px) rotate3d(1, -1, 1, 360deg);
 transform: perspective(1000px) rotate3d(1, -1, 1, 360deg);
}
}
 @-webkit-keyframes anim-effect-milan-3 {
 0%, 100% {
 opacity: 0;
}
 25%, 75% {
 opacity: 1;
}
}
 @keyframes anim-effect-milan-3 {
 0%, 100% {
 opacity: 0;
}
 25%, 75% {
 opacity: 1;
}
}


/* 
	play button custom width and height
 */
.play-btn.cbutton::after,
.play-btn.cbutton::before{
	margin:-70px 0 0 -70px;
	width:140px;
	height:140px;
}