/*----------------------- first section -----------------------*/

.container_home {
	width: 450px;
	display: inline-block;
}
#home {
	width: 450px;
	height: 250px;
	position: absolute;
    top:0;bottom:0;right:0;left:0;
    margin:auto;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-mos-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transition: all 2s ease-in-out;
	-webkit-transition: all 2s ease-in-out;
	-mos-transition: all 2s ease-in-out;
	-ms-transition: all 2s ease-in-out;
	-o-transition: all 2s ease-in-out;
	-webkit-animation: swaying-home 4s ease infinite;
	-moz-animation: swaying-home 4s ease infinite;
	-ms-animation: swaying-home 4s ease infinite;
	-o-animation: swaying-home 4s ease infinite;
	animation: swaying-home 4s ease infinite;
}

/*   keyframes swaying-home   */

@-webkit-keyframes swaying-home {
 0%, 100% {
-webkit-transform:  rotateX(-5deg) rotateY(5deg);
}
 25% {
-webkit-transform:  rotateX(-5deg) rotateY(-5deg);
}
 50% {
-webkit-transform: rotateX(5deg) rotateY(-5deg);
}
 75% {
-webkit-transform:  rotateX(-5deg) rotateY(-5deg);
}
}
@-moz-keyframes swaying-home {
 0%, 100% {
-moz-transform:  rotateX(-5deg) rotateY(5deg);
}
 25% {
-moz-transform:  rotateX(-5deg) rotateY(-5deg);
}
 50% {
-moz-transform: rotateX(5deg) rotateY(-5deg);
}
 75% {
-moz-transform:  rotateX(-5deg) rotateY(-5deg);
}
}
@-ms-keyframes swaying-home {
 0%, 100% {
-ms-transform:  rotateX(-5deg) rotateY(5deg);
}
 25% {
-ms-transform:  rotateX(-5deg) rotateY(-5deg);
}
 50% {
-ms-transform: rotateX(5deg) rotateY(-5deg);
}
 75% {
-ms-transform:  rotateX(-5deg) rotateY(-5deg);
}
}
@-o-keyframes swaying-home {
 0%, 100% {
-o-transform:  rotateX(-5deg) rotateY(5deg);
}
 25% {
-o-transform:  rotateX(-5deg) rotateY(-5deg);
}
 50% {
-o-transform: rotateX(5deg) rotateY(-5deg);
}
 75% {
-o-transform:  rotateX(-5deg) rotateY(-5deg);
}
}
@keyframes swaying-home {
 0%, 100% {
transform:  rotateX(-5deg) rotateY(5deg);
}
 25% {
transform:  rotateX(-5deg) rotateY(-5deg);
}
 50% {
transform: rotateX(5deg) rotateY(-5deg);
}
 75% {
transform:  rotateX(-5deg) rotateY(-5deg);
}
}
#home .face {
	cursor: pointer;
	display: block;
	position: absolute;
	border: 1px solid #FFFFFF;
	background: #000000;
	transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-mos-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
}
#home:hover .face {
	background: #FFFFFF;
	border: 1px solid #000000;
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-mos-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
/*   faces size   */

#home .front, #home .back {
	width: 450px;
	height: 250px;
}
#home .right, #home .left {
	width: 150px;
	height: 250px;
}
#home .top, #home .bottom {
	width: 450px;
	height: 150px;
}
/*   faces positions   */

#home .front {
	transform: rotateY(0deg) translateZ(75px);
	-webkit-transform: rotateY(0deg) translateZ(75px);
	-moz-transform: rotateY(0deg) translateZ(75px);
	-ms-transform: rotateY(0deg) translateZ(75px);
	-o-transform: rotateY(0deg) translateZ(75px);
}
#home .back {
	transform: rotateX(180deg) translateZ(75px);
	-webkit-transform: rotateX(180deg) translateZ(75px);
	-moz-transform: rotateX(180deg) translateZ(75px);
	-ms-transform: rotateX(180deg) translateZ(75px);
	-o-transform: rotateX(180deg) translateZ(75px);
}
#home .right {
	transform: rotateY(90deg) translateZ(375px);
	-webkit-transform: rotateY(90deg) translateZ(375px);
	-moz-transform: rotateY(90deg) translateZ(375px);
	-ms-transform: rotateY(90deg) translateZ(375px);
	-o-transform: rotateY(90deg) translateZ(375px);
}
#home .left {
	transform: rotateY(-90deg) translateZ(75px);
	-webkit-transform: rotateY(-90deg) translateZ(75px);
	-moz-transform: rotateY(-90deg) translateZ(75px);
	-ms-transform: rotateY(-90deg) translateZ(75px);
	-o-transform: rotateY(-90deg) translateZ(75px);
}
#home .top {
	transform: rotateX(90deg) translateZ(75px);
	-webkit-transform: rotateX(90deg) translateZ(75px);
	-moz-transform: rotateX(90deg) translateZ(75px);
	-ms-transform: rotateX(90deg) translateZ(75px);
	-o-transform: rotateX(90deg) translateZ(75px);
}
#home .bottom {
	transform: rotateX(-90deg) translateZ(175px);
	-webkit-transform: rotateX(-90deg) translateZ(175px);
	-moz-transform: rotateX(-90deg) translateZ(175px);
	-ms-transform: rotateX(-90deg) translateZ(175px);
	-o-transform: rotateX(-90deg) translateZ(175px);
}
/*----------------------- logo -----------------------*/


#home svg text {
	baseline-shift: -0.5ex;
	text-anchor: middle;
	font-weight: 700;
	font-size: 100px;
	fill: #000000;
	stroke:#FFFFFF;
	stroke-width: 1px;
	stroke-dasharray: 0, 0, 50, 190;
	stroke-dashoffset: 0;
	stroke-linecap: round;
	stroke-linejoin: round;
	-webkit-animation: spin 2s infinite linear;
	-moz-animation: spin 2s infinite linear;
	-ms-animation: spin 2s infinite linear;
	-o-animation: spin 2s infinite linear;
	animation: spin 2s infinite linear;
}

/*   keyframes spin   */

@-webkit-keyframes spin {
 0% {
stroke: #FFFFFF;
}
 100% {
stroke-dashoffset: -240;
 stroke: #FFFFFF;
}
@-ms-keyframes spin {
 0% {
stroke: #FFFFFF;
}
 100% {
stroke-dashoffset: -240;
 stroke: #FFFFFF;
}
@keyframes spin {
 0% {
stroke: #FFFFFF;
}
 100% {
stroke-dashoffset: -240;
 stroke: #FFFFFF;
}
}