#infobuttons {
	position: relative;
	width: 100%;
	height: 218px;
	margin-top: 27px;
}

#infobuttons > .button {
	position: absolute;
	width: 175px;
	height: 175px;
	border: 8px solid #EBEBEB;
	border-radius: 50%;
	font-family: "MavenPro", sans-serif;
	color: white;
	font-weight: bold;
	transition: border-radius 0.5s;
}

#infobuttons > .button > div {
	position: absolute;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	top: 0;
	left: 0;
	padding: 60px 9px 0 9px;
	transition: padding-top 0.5s;
}

#infobuttons > .button > div.shrinked {
	display: none;
	padding: 0 16px 0 16px;
}

#infobuttons > .button > div > span {
	position: relative;
	top: 0;
	display: block;
	white-space: nowrap;
	width: 100%;
	font-size: 11pt;
	text-align: center;
	transition: width 0.5s;
}

#infobuttons > .button > div.shrinked > span {
	text-align: left;
	font-size: 10pt;
}

#infobuttons > .button > p {
	position: absolute;
	bottom: 0px;
	padding: 0 10px 0 10px;
	margin-top: 45px;
	opacity: 0;
	font-weight: normal;
	font-size: 10pt;
	width: 160px;
	text-align: left;
	transition: opacity 0.5s;
}

#infobuttons > .button:hover {
	border-radius: 0;
}

#infobuttons > .button:hover > div.normal {
	padding-top: 14px;
}

#infobuttons > .button:hover > div.normal > span {
	width: 0;
}

#infobuttons > .button:hover > p {
	opacity: 1;
}

@media only screen and (max-width: 940px) {
	#infobuttons > .button > div {
		transition: padding-top 0.5s, opacity 0.5s;
	}

	#infobuttons > .button > div.normal {
		opacity: 0;
		padding-top: 69px;
	}

	#infobuttons > .button > div.normal > span {
		width: 0;
	}

	#infobuttons > .button > div.shrinked {
		opacity: 1;
		display: flex;
		align-items: center;
		align-content: center;
		flex-wrap: wrap;
	}

	#infobuttons > .button:hover {
		z-index: 1;
	}

	#infobuttons > .button:hover > div.shrinked {
		opacity: 0;
	}

	#infobuttons > .button:hover > div.normal {
		opacity: 1;
		padding-top: 18px;
	}
}

#infobuttons > .button#I {
	left: calc((100% - 191px) * 0.0);
	background: linear-gradient(45deg, #354F73, #6598D9);
}

#infobuttons > .button#II {
	left: calc((100% - 191px) * 0.25);
	background: linear-gradient(45deg, #442159, #AA6DBF);
}

#infobuttons > .button#III {
	left: calc((100% - 191px) * 0.5);
	background: linear-gradient(45deg, #7E8C07, #DBCC31);
}

#infobuttons > .button#IV {
	left: calc((100% - 191px) * 0.75);
	background: linear-gradient(45deg, #8C2D1A, #EC654E);
}

#infobuttons > .button#V {
	left: calc((100% - 191px) * 1);
	background: linear-gradient(45deg, #BF5A19, #F2B23B);
}