/*
	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);
}