.animated {
	transition: 0.2s;
}

.scale0 {
	transform: scale(0,0);
}

.scale1 {
	transform: scale(1,1);
}


/* - - - - - - - - - - - - - - -
	
	АНИМАЦИИ
	
- - - - - - - - - - - - - - - - */

.an-zoom-in {
	animation: zoom-in 0.2s;
}

@keyframes zoom-in {
	0% {
		opacity: 0;
		transform: scale(0, 0);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

.an-show-op {
	animation: show-op 0.2s;
}

@keyframes show-op {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.an-slide-r {
	animation: slide-r 0.2s;
}

@keyframes slide-r {
	0% {
		opacity: 0;
		transform: translateX(+50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.an-slide-l {
	animation: slide-l 0.2s;
}

@keyframes slide-l {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.an-slide-t {
	animation: slide-t 0.2s;
}

@keyframes slide-t {
	0% {
		opacity: 0;
		transform: translateY(-50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.an-slide-b {
	animation: slide-b 0.2s;
}

@keyframes slide-b {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.an-flare-red {
	animation: flare-red;
}

@keyframes flare-red {
	0% {
		box-shadow: 0px 0px 0px 10px rgba(255, 42, 42, 0.0);
	}
	30% {
		box-shadow: 0px 0px 0px 25px rgba(255, 42, 42, 0.2);
	}
	100% {
		box-shadow: 0px 0px 0px 50px rgba(255, 42, 42, 0.0);
	}
}

.an-flare-green {
	animation: flare-green;
}

@keyframes flare-green {
	0% {
		box-shadow: 0px 0px 0px 10px rgba(54, 215, 146, 0.0);
	}
	30% {
		box-shadow: 0px 0px 0px 25px rgba(54, 215, 146, 0.2);
	}
	100% {
		box-shadow: 0px 0px 0px 50px rgba(54, 215, 146, 0.0);
	}
}

.an-flare-glam {
	animation: flare-glam;
}

@keyframes flare-glam {
	0% {
		box-shadow: 0px 0px 0px 10px rgba(210, 95, 210, 0.0);
	}
	30% {
		box-shadow: 0px 0px 0px 25px rgba(210, 95, 210, 0.25);
	}
	100% {
		box-shadow: 0px 0px 0px 50px rgba(210, 95, 210, 0.0);
	}
}

.an-flare-orange {
	animation: flare-orange;
}

@keyframes flare-orange {
	0% {
		box-shadow: 0px 0px 0px 10px rgba(255, 173, 64, 0.0);
	}
	30% {
		box-shadow: 0px 0px 0px 25px rgba(255, 173, 64, 0.25);
	}
	100% {
		box-shadow: 0px 0px 0px 50px rgba(255, 173, 64, 0.0);
	}
}

.an-flare-blue {
	animation: flare-blue;
}

@keyframes flare-blue {
	0% {
		box-shadow: 0px 0px 0px 10px rgba(31,225,227, 0.0);
	}
	30% {
		box-shadow: 0px 0px 0px 25px rgba(31,225,227, 0.25);
	}
	100% {
		box-shadow: 0px 0px 0px 50px rgba(31,225,227, 0.0);
	}
}



.an0-25 {
	animation-duration: 0.25s;
}

.an0-5 {
	animation-duration: 0.5s;
}

.an0-75 {
	animation-duration: 0.75s;
}

.an1 {
	animation-duration: 1s;
}

.an1-5 {
	animation-duration: 1.5s;
}

.an2 {
	animation-duration: 2s;
}

.an2-5 {
	animation-duration: 2.5s;
}

.an-linear {
	animation-timing-function: linear;
}

.an-infinite {
	animation-iteration-count: infinite;	
}

/* точечный спиннер */

.spinner {
	text-align: center;
}

.spinner > div {
	width: 0.5em;
	height: 0.5em;
	margin: 0.25em;
	background-color: #dedede;
	border-radius: 100%;
	display: inline-block;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		transform: scale(0);
	} 40% { 
		transform: scale(1.0);
	}
}