/* Enter Your Custom CSS Here */
.widget_cube3d {
	padding: 20px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background: #eee;
	box-shadow: 0 5px 7px 0 #000;
	border-radius: 15px;
}

.widget_cube3d .content {
	display: flex;
	justify-content: center;
	align-items: center;
}

.widget_cube3d .content .number {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.widget_cube3d .content .number span {
	font-weight: bold;
	font-size: 54px;
}

.f_cube__wrap {
	width: 250px;
	height: 213px;
	margin: 20px auto;
}

.f_cube {
	width: 113px;
	height: 113px;
	top: 50px;

	transform-style: preserve-3d;
	margin: auto;
	position: relative;

	transition: all 0.5s ease-in-out;
}

.transform_1 { transform: rotateX(270deg) rotateY(270deg) rotateZ(0deg); }
.transform_2 { transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg); }
.transform_3 { transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg); }
.transform_4 { transform: rotateX(270deg) rotateY(180deg) rotateZ(270deg); }
.transform_5 { transform: rotateX(0deg) rotateY(180deg) rotateZ(270deg); }
.transform_6 { transform: rotateX(270deg) rotateY(180deg) rotateZ(180deg); }

/* Standard syntax */
@keyframes cubeRotation_1 {
	0%   {	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);	}
	50%   {	transform: rotateX(90deg) rotateY(90deg) rotateZ(0deg);	}
	100%   {	transform: rotateX(270deg) rotateY(270deg) rotateZ(0deg);	}
}

@keyframes cubeRotation_2 {
	0%   {	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);	}
	50%   {	transform: rotateX(90deg) rotateY(90deg) rotateZ(0deg);	}
	100%   {	transform: rotateX(270deg) rotateY(180deg) rotateZ(90deg);	}
}

@keyframes cubeRotation_3 {
	0%   {	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);	}
	50%   {	transform: rotateX(90deg) rotateY(90deg) rotateZ(0deg);	}
	100%   {	transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);	}
}

@keyframes cubeRotation_4 {
	0%   {	transform: rotateX(90deg) rotateY(0deg) rotateZ(90deg);	}
	50%   {	transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg);	}
	100%   {	transform: rotateX(270deg) rotateY(180deg) rotateZ(270deg);	}
}

@keyframes cubeRotation_5 {
	0%   {	transform: rotateX(270deg) rotateY(0deg) rotateZ(90deg);	}
	50%   {	transform: rotateX(90deg) rotateY(90deg) rotateZ(180deg);	}
	100%   {	transform: rotateX(0deg) rotateY(180deg) rotateZ(270deg);	}
}

@keyframes cubeRotation_6 {
	0%   {	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);	}
	50%   {	transform: rotateX(90deg) rotateY(90deg) rotateZ(0deg);	}
	100%   {	transform: rotateX(270deg) rotateY(180deg) rotateZ(180deg);	}
}

.f_cube > div {
	position: absolute;
	transition: all 0.5s ease-in-out;
	width: 113px;
	height: 113px;
	float: left;
	overflow: hidden;
	border: 2px solid #000;
}

.side_1 { transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px); }
.side_2 {	transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px); }
.side_3 { transform: translateX(0px) translateY(0px) translateZ(56px); }
.side_4 { transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px); }
.side_5 {	transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px); }
.side_6 {	transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px); }

/* Customize */
.f_cube > div {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.side_1 {	background-image: url('http://www.nnics.tneu.edu.ua/wp-content/uploads/2020/03/cube_1.png'); }
.side_2 { background-image: url('http://www.nnics.tneu.edu.ua/wp-content/uploads/2020/03/cube_2.png'); } 
.side_3 {	background-image: url('http://www.nnics.tneu.edu.ua/wp-content/uploads/2020/03/cube_3.png'); }
.side_4 {	background-image: url('http://www.nnics.tneu.edu.ua/wp-content/uploads/2020/03/cube_4.png'); } 
.side_5 {	background-image: url('http://www.nnics.tneu.edu.ua/wp-content/uploads/2020/03/cube_5.png'); } 
.side_6 { background-image: url('http://www.nnics.tneu.edu.ua/wp-content/uploads/2020/03/cube_6.png'); }