@keyframes swing{
    20%{transform: rotate(25deg);}
    40%{transform: rotate(-20deg)}
    60%{transform: rotate(15deg);}
    80%{transform: rotate(-10deg);}
    100%{transform: rotate(0deg);}
}

.swinging:hover{
		transform-origin: center center;
		/*animation-duration: 1s;
		animation: swing 3.5s ease-in-out forwards infinite;*/
    	animation: swing 1s ease-in-out;
}
.wrapper>.circles:hover{
	animation: swing 1s ease-in-out;
	transform-origin: center top;
}
/********/
.wrapper{
	position: relative;
    top: -46px;
	text-align: center;
	margin-bottom: -45px;
}
.circles:before{
	font-size: 1.75em;
	border:1px solid #6c757d;
	background-color: rgba(255,255,255,1);/* white;*/
	border-radius: 40%;
	width:2em;
	height: 2em;
	line-height: 2em;
	display: block;
/*	margin: 0 auto 0.35em auto;
	cursor: pointer;*/
	text-align: center;
	color: #6c757d;
	transition: all 0.3s ease-in-out;
}

.circles-warning:before{
	background-color:#ffefb7;
	border-color: #d8a306;
	color:#ad8100;
}
.circles-info:before{
	background-color: #bee5eb;
	border-color:#13899c;
	color:#006b7b;
}
.circles-secondary:before{
	background-color: #d6d8db;
	border-color:#6c757d;
}
a > div {
    font-family: Lato;

}