.action-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 600px;

	margin: 3% auto 0;
}

.mediaOnly {
	display: hidden;
}

.box {
	width: 50px;
	height: 50px;
	margin: 10px 0;
}

.box:nth-child(odd) {
	transition: 2s ease-out;
}
.action-box:hover .box:nth-child(odd) {
	transform: translateX(250px) rotate(-360deg) scale(2.5);
}

.box:nth-child(even) {
	transition: 4s ease-in;
}
.action-box:hover .box:nth-child(even) {
	transform: scale(0.5) translateX(-1000px) rotate(-360deg);
}

.b1 {
	background-color: black;
}
.b2 {
	background-color: grey;
}

.b3 {
	background-color: red;
}
.b4 {
	background-color: black;
}
.b5 {
	background-color: grey;
}
.b6 {
	background-color: red;
}
.b7 {
	background-color: black;
}
.b8 {
	background-color: grey;
}
.b9 {
	background-color: red;
}
.b10 {
	background-color: black;
}
.b11 {
	background-color: grey;
}

.b12 {
	background-color: red;
}