/*
	Inspired by http://www.justinaguilar.com/animations/index.html
*/

:root {
	--normal-border-color: #d0d3d4;
	--highlighted-border-color: #00B4E1;
	--normal-caption-color: #53575a;
	--highlighted-caption-color: #00B4E1;
}
/*
==============================================
pulse
==============================================
*/

.pulse {
	animation 			: pulse 1.5s 7;
	-webkit-animation	: pulse 1.5s 7;
}

@keyframes pulse { /* IE does not support css variables*/
	0%, 100% {
		transform: scale(1);
		border-color: #d0d3d4; /*normal border color*/
		color: #53575a;	/*normal caption color*/
	}
	50% {
		transform: scale(1.1);
		border-color: #00B4E1;/*highlighted border color*/
		color: #00B4E1;	/*highlighted border color*/
	}
}

@-webkit-keyframes pulse {
	0%, 100% {
		-webkit-transform: scale(1);
		-webkit-border-color: var(--normal-border-color);
		-webkit-color: var(--normal-caption-color);
	}
	50% {
		-webkit-transform: scale(1.05);
		-webkit-border-color: var(--highlighted-border-color);
		-webkit-color: var(--highlighted-caption-color);
	}
}

.rotate_down {
	transition: 0.5s;
	-webkit-transition: 0.5s;
}

.rotate_up {
	transition: 0.5s;
	-webkit-transition: 0.5s;
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}