/* CSS Document */


.cbutton {
	position: relative;
	display: inline-block;
	margin: auto;
	padding: 0;
	border: none;
	background: none;
 	transition: color 0.7s;
}

.cbutton {padding: 0 0.2em;}

.cbutton.cbutton--click,
.cbutton:focus {
	outline: none;
	color: rgba(0, 144, 255, 1)
}

.cbutton::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -35px 0 0 -35px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

/* 400px */
@media only screen and (min-width: 25em) {
	
.cbutton {
    padding: 0 0.6em;
}	
}   /* 400px */









/* Nikola */
.cbutton--effect-nikola::after {
	background: rgba(111,148,182,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(111,148,182,0.07);
}

.cbutton--effect-tamara.cbutton--click::after {
	-webkit-animation: anim-effect-tamara 0.5s ease-out forwards 1;
	animation: anim-effect-tamara 0.5s ease-out forwards 1;
}

@-webkit-keyframes anim-effect-tamara {
	0% {
		box-shadow: 0 0 0 3px rgba(111,148,182,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(111,148,182,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(111,148,182,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(111,148,182,0);
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(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(111,148,182,0.5);
}

.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 {
	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 {
	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);
	}
}




/* Effect Boris */
.cbutton--effect-boris::after {
	background: rgba(0, 144, 255, 0.3);
}

.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);
	}
}