@charset "UTF-8";
/* CSS Document */

/* Rhombenkuboktaeder ##### ##### ----------------------------------------------------- ##### #####*/

.form_wrap_3d {
	width:520px;
	height:520px;
	position:absolute;
    top:calc(50% - 260px);
	left:calc(50% - 260px);	
    transform-style:preserve-3d;
	perspective: 5000px;
    perspective-origin: 0% 0%;
    overflow:hidden;
}

.rhombenkuboktaeder_wrap {
	width:346px;
	height:346px;
	position: absolute;
	top:calc(50% - 173px);
	left:calc(50% - 173px);	
	transform-style: preserve-3d;
	transform: translateY(0px) translateX(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1.0) scaleY(1.0) scaleZ(1.0);
}

.rhombenkuboktaeder {
	position: absolute;
	width: 346px;
	height: 346px;
	transform-style: preserve-3d;
	
	display: flex ;
	flex-direction: row ;
	flex-wrap: wrap ;
	justify-content: center ;
	align-items: center ;
	align-content: center ;
}

.rhombenkuboktaeder:hover {transform: scaleX(1.2) scaleY(1.2) scaleZ(1.2);}

.face {
	position: absolute;
	transform-origin: center;
}

.square {
	width: 90px;
	height: 90px;
	background-image:url("../src/textures/tlu_texture_square_02.svg");
	background-size: cover;
	background-position: 50% 50%;
}

.hexagon {
	width: 180px;
	height: 155.88px;
	background-image:url("../src/textures/tlu_texture_hexagon_02.svg");
	background-size: cover;
	background-position: 50% 50%;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.octagon {
	width: 217.2815px;
	height: 217.2815px;
	background-image:url("../src/textures/tlu_texture_octagon_02.svg");
	background-size: cover;
	background-position: 50% 50%;
	clip-path: polygon(
    30% 0%, 70% 0%,
    100% 30%, 100% 70%,
    70% 100%, 30% 100%,
    0% 70%, 0% 30%
  );
}

.f_01 {transform: translateX(0px) translateY(-140px) translateZ(140px) rotateX(45deg) rotateY(0deg) rotateZ(0deg);}
.f_02 {transform: translateX(0px) translateY(0px) translateZ(172px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.f_03 {transform: translateX(0px) translateY(140px) translateZ(140px) rotateX(-45deg) rotateY(0deg) rotateZ(0deg);}

.f_04 {transform: translateX(-140px) translateY(0px) translateZ(140px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg);}
.f_05 {transform: translateX(-108px) translateY(-108px) translateZ(108px) rotateX(45deg) rotateY(-35deg) rotateZ(30deg);}
.f_06 {transform: translateX(0px) translateY(-172px) translateZ(0px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);} /*TOP*/
.f_07 {transform: translateX(-108px) translateY(108px) translateZ(108px) rotateX(-45deg) rotateY(-35deg) rotateZ(30deg);}
.f_08 {transform: translateX(0px) translateY(172px) translateZ(0px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);} /*BOTTOM*/

.f_09 {transform: translateX(-172px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(-90deg) rotateZ(0deg);}
.f_10 {transform: translateX(0px) translateY(-140px) translateZ(-140px) rotateX(-45deg) rotateY(0deg) rotateZ(0deg);}
.f_11 {transform: translateX(0px) translateY(140px) translateZ(-140px) rotateX(45deg) rotateY(0deg) rotateZ(0deg);}

.f_12 {transform: translateX(-140px) translateY(0px) translateZ(-140px) rotateX(0deg) rotateY(45deg) rotateZ(0deg);}
.f_13 {transform: translateX(108px) translateY(108px) translateZ(108px) rotateX(-45deg) rotateY(35deg) rotateZ(-30deg);}
.f_14 {transform: translateX(108px) translateY(108px) translateZ(-108px) rotateX(45deg) rotateY(-35deg) rotateZ(30deg);}

.f_15 {transform: translateX(172px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);}
.f_16 {transform: translateX(140px) translateY(140px) translateZ(0px) rotateX(90deg) rotateY(-45deg) rotateZ(0deg);}
.f_17 {transform: translateX(140px) translateY(-140px) translateZ(0px) rotateX(90deg) rotateY(45deg) rotateZ(0deg);}

.f_18 {transform: translateX(140px) translateY(0px) translateZ(-140px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg);}
.f_19 {transform: translateX(108px) translateY(-108px) translateZ(108px) rotateX(45deg) rotateY(35deg) rotateZ(30deg);}
.f_20 {transform: translateX(-108px) translateY(-108px) translateZ(-108px) rotateX(-45deg) rotateY(35deg) rotateZ(30deg);}

.f_21 {transform: translateX(0px) translateY(0px) translateZ(-172px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);}
.f_22 {transform: translateX(-140px) translateY(140px) translateZ(0px) rotateX(90deg) rotateY(45deg) rotateZ(0deg);}
.f_23 {transform: translateX(-140px) translateY(-140px) translateZ(0px) rotateX(90deg) rotateY(-45deg) rotateZ(0deg);}

.f_24 {transform: translateX(140px) translateY(0px) translateZ(140px) rotateX(0deg) rotateY(45deg) rotateZ(0deg);}
.f_25 {transform: translateX(-108px) translateY(108px) translateZ(-108px) rotateX(45deg) rotateY(35deg) rotateZ(30deg);}
.f_26 {transform: translateX(108px) translateY(-108px) translateZ(-108px) rotateX(-45deg) rotateY(-35deg) rotateZ(30deg);}

/* Rhombenkuboktaeder ANIMATION ##### ##### ----------------------------------------------------- ##### #####*/

input.hidden {display:none;}

input#form-001:checked ~ .rhombenkuboktaeder_wrap {
	animation:RKTAnimation01 10s linear infinite;
	-webkit-animation:RKTAnimation01 10s linear infinite;
	-moz-animation:RKTAnimation01 10s linear infinite;
	-ms-animation:RKTAnimation01 10s linear infinite;
	-o-animation:RKTAnimation01 10s linear infinite;
	
	transform: translateY(0px) translateX(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}

input#form-001:checked ~ .rhombenkuboktaeder_wrap:hover{
	animation-play-state:paused;
}

/*RKTAnimation01*/
@-webkit-keyframes RKTAnimation01 {
	0% {transform: translateY(0px) translateX(0px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);}
	100% {transform: translateY(0px) translateX(0px) rotateX(360deg) rotateY(30deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);}
}

/* Rhombenkuboktaeder LABEL ##### ##### ----------------------------------------------------- ##### #####*/

.oct_label {
	width:90%;
	height:auto;
	margin:0 5%;
	float:left;
	text-align:center;
	color:rgba(244,246,250,1);
}

.oct_label .icon {
	width:80px;
	height:80px;
	margin-top:40px;
	margin-bottom:10px;
	margin-left:calc( 50% - 40px);
}

.oct_label span {
	font-family: 'scotch-display';
	font-weight: 600;
    font-style: normal;
    font-size: 1.0em;
    line-height: 1.0em;
}

@media screen and (min-width:1920px) {
	
	.form_wrap_3d {transform: scaleX(1.3) scaleY(1.3) scaleZ(1.3);}
}

@media screen and (max-width:920px) {
	
	.form_wrap_3d {
		width:100%;
		left:0px;	
		top:-30px;
	}
	
}