@charset "utf-8";
/* CSS Document */
<style type="text/css">
@font-face {
    font-family: ankaclmbold; 
     src: url('webfonts/ankaclmbold.ttf') format('truetype')
    url('webfonts/ankaclmbold.woff') format('woff'),
     url('webfonts/ankaclmbold.ttf') format('truetype'),
     url('webfonts/ankaclmbold.svg') format('svg');
   }
		.block-menu {
			display: block;
			background: #000;
		}

		.block-menu li {
			display: inline-block;
			
		}

		.block-menu li a {
			color: #fff;
			display: block;
			text-decoration: none;
			font-family: 'ankaclmbold';
			-webkit-font-smoothing: antialiased;
			-moz-font-smoothing: antialiased;
			-ms-font-smoothing: antialiased;
			font-smoothing: antialiased;
			text-transform: uppercase;
			overflow: visible;
			line-height: 20px;
			font-size: 22px;
			padding: 15px 10px;right:130px;
		}

	
		.three-d {
			-webkit-perspective: 200px;
			-moz-perspective: 200px;
			-ms-perspective: 200px;
			perspective: 200px;
			-webkit-transition: all .07s linear;
			-moz-transition: all .07s linear;
			-ms-transition: all .07s linear;
			transition: all .07s linear;
			position: relative;
		}

			.three-d:not(.active):hover {
				cursor: pointer;
			}

			.three-d:not(.active):hover .three-d-box, 
			.three-d:not(.active):focus .three-d-box {
				-moz-transform: translateZ(-25px) rotateX(90deg);
				-ms-transform: translateZ(-25px) rotateX(90deg);
				-webkit-transform: translateZ(-25px) rotateX(90deg);
				-o-transform: translateZ(-25px) rotateX(90deg);
				transform: translateZ(-25px) rotateX(90deg);
			}

		.three-d-box {
			-webkit-transition: all .3s ease-out;
			-moz-transition: all .3s ease-out;
			-ms-transition: all .3s ease-out;
			-o-transition: all .3s ease-out;
			transition: all .3s ease-out;
			-webkit-transform: translatez(-25px);
			-moz-transform: translatez(-25px);
			-ms-transform: translatez(-25px);
			-o-transform: translatez(-25px);
			transform: translatez(-25px);
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
			pointer-events: none;
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;
		}

		.front1 {
			-webkit-transform: rotatex(0deg) translatez(25px);
			-moz-transform: rotatex(0deg) translatez(25px);
			-ms-transform: rotateX(0deg) translateZ(25px);
			-o-transform: rotatex(0deg) translatez(25px);
			transform: rotatex(0deg) translatez(25px);
		}

		.back1 {
			-webkit-transform: rotatex(-90deg) translatez(25px);
			-moz-transform: rotatex(-90deg) translatez(25px);
			-ms-transform: rotateX(-90deg) translateZ(25px);
			-o-transform: rotatex(-90deg) translatez(25px);
			transform: rotatex(-90deg) translatez(25px);
			color: #FFE7C4;
		}
		.front2 {
			-webkit-transform: rotatex(0deg) translatez(25px);
			-moz-transform: rotatex(0deg) translatez(25px);
			-ms-transform: rotateX(0deg) translateZ(25px);
			-o-transform: rotatex(0deg) translatez(25px);
			transform: rotatex(0deg) translatez(25px);
		}

		.back2 {
			-webkit-transform: rotatex(-90deg) translatez(25px);
			-moz-transform: rotatex(-90deg) translatez(25px);
			-ms-transform: rotateX(-90deg) translateZ(25px);
			-o-transform: rotatex(-90deg) translatez(25px);
			transform: rotatex(-90deg) translatez(25px);
			color: #FFE7C4;
		}
		.front3 {
			-webkit-transform: rotatex(0deg) translatez(25px);
			-moz-transform: rotatex(0deg) translatez(25px);
			-ms-transform: rotateX(0deg) translateZ(25px);
			-o-transform: rotatex(0deg) translatez(25px);
			transform: rotatex(0deg) translatez(25px);
		}

		.back3 {
			-webkit-transform: rotatex(-90deg) translatez(25px);
			-moz-transform: rotatex(-90deg) translatez(25px);
			-ms-transform: rotateX(-90deg) translateZ(25px);
			-o-transform: rotatex(-90deg) translatez(25px);
			transform: rotatex(-90deg) translatez(25px);
			color: #FFE7C4;
		}

		.front1 {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: #004F00;
			padding: 15px 10px;
			color: white;
			pointer-events: none;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			box-sizing: border-box;
		}
		.back1 {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: #E8D813;
			padding: 15px 10px;
			color: white;
			pointer-events: none;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			box-sizing: border-box;
		}
		.front2 {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: #FF8000;
			padding: 15px 10px;
			color: white;
			pointer-events: none;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			box-sizing: border-box;
		}
		.back2 {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: #F00;
			padding: 15px 10px;
			color: white;
			pointer-events: none;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			box-sizing: border-box;
		}
		.front3 {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: #B000B0;
			padding: 15px 10px;
			color: white;
			pointer-events: none;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			box-sizing: border-box;
		}
		.back3 {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: #0080FF;
			padding: 15px 10px;
			color: white;
			pointer-events: none;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			box-sizing: border-box;
		}
			
	</style>

