/*----------------------- about section -----------------------*/

.container_about {
	height: 650px;
	display: inline-block;
    transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transition: all 2s ease-in-out;
	-webkit-transition: all 0.8s ease-in-out;
	-mos-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
}
#about {
	width: 900px;
	height: 650px;
    line-height: 650px;
	position: absolute;
    top:0;bottom:0;right:0;left:0;
    margin:auto;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-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;
	-moz-transition: all 2s ease-in-out;
	-ms-transition: all 2s ease-in-out;
	-o-transition: all 2s ease-in-out;
	-webkit-animation: swaying-about 4s ease infinite;
	-moz-animation: swaying-about 4s ease infinite;
	-ms-animation: swaying-about 4s ease infinite;
	-o-animation: swaying-about 4s ease infinite;
	animation: swaying-about 4s ease infinite;
}
.button-rotate-about {
    top:30px;
    right:30px;
    position:absolute;
    cursor:pointer;
    line-height:1.2;
    font-weight:500;
    font-size:12px;
    color:#FFFFFF;
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
    transform:  scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
}
.button-rotate-about:hover {
    transform: scale(1.2);
	-webkit-transform:  scale(1.2);
	-moz-transform:  scale(1.2);
	-ms-transform:  scale(1.2);
	-o-transform:  scale(1.2);
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.button-rotate-about span {
    font-weight:700;
}
.container_about.show-back {
	transform: rotateX(-180deg);
	-webkit-transform: rotateX(-180deg);
	-moz-transform: rotateX(-180deg);
	-ms-transform: rotateX(-180deg);
	-o-transform: rotateX(-180deg);
}
.container_about.show-front {
	transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
}
#about:hover .button-rotate-about {
	color: #000000;
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}

/*   keyframes swaying-about   */

@-webkit-keyframes swaying-about {
 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-about {
 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-about {
 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-about {
 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-about {
 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);
}
}
#about .face {
	text-align: center;
	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;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
}
#about:hover .face {
	background: #FFFFFF;
	border: 1px solid #000000;
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-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   */

#about .front, #about .back {
	width: 900px;
	height: 650px;
}
#about .right, #about .left {
	width: 150px;
	height: 650px;
}
#about .top, #about .bottom {
	width: 900px;
	height: 150px;
}
/*   faces positions   */

#about .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);
}
#about .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);
}
#about .right {
	transform: rotateY(90deg) translateZ(825px);
	-webkit-transform: rotateY(90deg) translateZ(825px);
	-moz-transform: rotateY(90deg) translateZ(825px);
	-ms-transform: rotateY(90deg) translateZ(825px);
	-o-transform: rotateY(90deg) translateZ(825px);
}
#about .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);
}
#about .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);
}
#about .bottom {
	transform: rotateX(-90deg) translateZ(575px);
	-webkit-transform: rotateX(-90deg) translateZ(575px);
	-moz-transform: rotateX(-90deg) translateZ(575px);
	-ms-transform: rotateX(-90deg) translateZ(575px);
	-o-transform: rotateX(-90deg) translateZ(575px);
}
/*----------------------- about content -----------------------*/

#about_content {
	font-weight: 700;
	line-height: 1.2;
	vertical-align: middle;
	display: inline-block;
	width: 80%;
	text-align: left;
	font-size: 30px;
	color: #000000;
}
/*----------------------- logo -----------------------*/

#about svg {
	left: 30px;
	top: 30px;
	position: absolute;
	width: 200px;
	height: 70px;
}
#about svg text {
	baseline-shift: -0.5ex;
	text-anchor: middle;
	font-weight: 700;
	font-size: 55px;
	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;
}
 @-moz-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;
}
}