@font-face {

 font-family: arnamu;

 src: url("arnamu.eot") /* EOT file for IE */

}

@font-face {

 font-family: arnamu;

 src: url("arnamu.ttf") /* TTF file for CSS3 browsers */

}



@font-face {

 font-family: bakhum;

 src: url("bakhum.eot") /* EOT file for IE */

}

@font-face {

 font-family: bakhum;

 src: url("bakhum.ttf") /* TTF file for CSS3 browsers */

}



body {

	font-family: arnamu;
height: 100%;

}



h1 {

	font-size: 20px;

	font-weight: bold;

}



h2 {

	font-size: 15px;

	font-weight: bold;

}



a {

	color: #5589c4;

}



a:hover {

	color: #ab0101;


}

strong {
	font-weight: normal;

}

.menu hover{
	font-weight: bold;

}



.preserve-3d {

			transform-style: preserve-3d;

			-webkit-transform-style: preserve-3d;

		}



.header {

	background: linear-gradient(to bottom, #4f72bf, #ffffff);

	border-radius:20px;

}



.header p {

	font-family: bakhum;

	font-size: 70px;

	color: ffffff;

	text-shadow: 0 4px 0 #000; color: #fff;

}



		.back {

			width: 33%;

			height: 200px;

			float: left;

			background-color: #F0E8FF;

			border: 10px;

			border-color: #ffffff;

			border-style: solid;

			box-sizing: border-box;

			-webkit-box-sizing: border-box;

			-moz-box-sizing: border-box;

			counter-increment: bc;

			padding: 0px 5px 5px 5px;

		}



		.back:before {

			position: absolute;

			padding: 0px;

		}



		@media screen and (max-width: 1260px) {

			.back {

				width: 50%;

			}

		}



		@media screen and (max-width: 840px) {

			.back {

				width: 100%;

			}

		}



		.button_base {

			margin: 0;

			border: 0;

			font-size: 18px;

			position: relative;

			top: 50%;

			left: 50%;

			margin-top: 5px;

			margin-bottom: 5px;

			margin-left: -100px;

			width: 200px;

			height: 70px;

			text-align: center;

			box-sizing: border-box;

			-webkit-box-sizing: border-box;

			-moz-box-sizing: border-box;

			-webkit-user-select: none;

			cursor: default;

		}



		.button_base:hover {

			cursor: pointer;

		}







		/* ### ### ### 07 */

		.b07_3d_double_roll {

			perspective: 500px;

			-webkit-perspective: 500px;

			-moz-perspective: 500px;

			transform-style: preserve-3d;

			-webkit-transform-style: preserve-3d;

		}



		.b07_3d_double_roll div {

			position: absolute;

			text-align: center;

			padding: 10px;

			border: #4f72bf solid 1px;

			pointer-events: none;

			box-sizing: border-box;

			-webkit-box-sizing: border-box;

			-moz-box-sizing: border-box;

		}



		.b07_3d_double_roll div:nth-child(1) {

			color: #2856a2;

			background-color: #ffffff;

			z-index: 0;

			width: 100%;

			height: 70px;

			clip: rect(0px, 100px, 70px, 0px);

			position: absolute;

			transition: all 0.2s ease;

			-webkit-transition: all 0.2s ease;

			-moz-transition: all 0.2s ease;

			transform: rotateX(0deg);

			-webkit-transform: rotateX(0deg);

			-moz-transform: rotateX(0deg);

			transform-origin: 50% 50% -25px;

			-webkit-transform-origin: 50% 50% -25px;

			-moz-transform-origin: 50% 50% -25px;

		}



		.b07_3d_double_roll div:nth-child(2) {

			color: #2856a2;

			background: #4f72bf;

			background: -moz-linear-gradient(top,  #4f72bf 0%, #7097c2 47%, #598ac2 100%);

			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f72bf), color-stop(47%,#7097c2), color-stop(100%,#598ac2));

			background: -webkit-linear-gradient(top,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			background: -o-linear-gradient(top,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			background: -ms-linear-gradient(top,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			background: linear-gradient(to bottom,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f72bf', endColorstr='#598ac2',GradientType=0 );



			z-index: -1;

			width: 100%;

			height: 70px;

			clip: rect(0px, 100px, 70px, 0px);

			position: absolute;

			transform: rotateX(90deg);

			-webkit-transform: rotateX(90deg);

			-moz-transform: rotateX(90deg);

			transition: all 0.2s ease;

			-webkit-transition: all 0.2s ease;

			-moz-transition: all 0.2s ease;

			transform-origin: 50% 50% -25px;

			-webkit-transform-origin: 50% 50% -25px;

			-moz-transform-origin: 50% 50% -25px;

		}



		.b07_3d_double_roll div:nth-child(3) {

			color: #2856a2;

			background-color: #ffffff;

			z-index: 0;

			width: 100%;

			height: 70px;

			clip: rect(0px, 200px, 70px, 100px);

			position: absolute;

			transition: all 0.2s ease 0.1s;

			-webkit-transition: all 0.2s ease 0.1s;

			-moz-transition: all 0.2s ease 0.1s;

			transform: rotateX(0deg);

			-webkit-transform: rotateX(0deg);

			-moz-transform: rotateX(0deg);

			transform-origin: 50% 50% -25px;

			-webkit-transform-origin: 50% 50% -25px;

			-moz-transform-origin: 50% 50% -25px;

		}



		.b07_3d_double_roll div:nth-child(4) {

			color: #2856a2;

			background: #4f72bf;

			background: -moz-linear-gradient(top,  #4f72bf 0%, #7097c2 47%, #598ac2 100%);

			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f72bf), color-stop(47%,#7097c2), color-stop(100%,#598ac2));

			background: -webkit-linear-gradient(top,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			background: -o-linear-gradient(top,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			background: -ms-linear-gradient(top,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			background: linear-gradient(to bottom,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f72bf', endColorstr='#598ac2',GradientType=0 );



			z-index: -1;

			width: 100%;

			height: 70px;

			clip: rect(0px, 200px, 70px, 100px);

			position: absolute;

			transform: rotateX(-90deg);

			-webkit-transform: rotateX(-90deg);

			-moz-transform: rotateX(-90deg);

			transition: all 0.2s ease 0.1s;

			-webkit-transition: all 0.2s ease 0.1s;

			-moz-transition: all 0.2s ease 0.1s;

			transform-origin: 50% 50% -25px;

			-webkit-transform-origin: 50% 50% -25px;

			-moz-transform-origin: 50% 50% -25px;

		}



		.b07_3d_double_roll:hover div:nth-child(1) {

			background: #4f72bf;

			background: -moz-linear-gradient(top,  #4f72bf 0%, #7097c2 47%, #598ac2 100%);

			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f72bf), color-stop(47%,#7097c2), color-stop(100%,#598ac2));

			background: -webkit-linear-gradient(top,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			background: -o-linear-gradient(top,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			background: -ms-linear-gradient(top,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			background: linear-gradient(to bottom,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f72bf', endColorstr='#598ac2',GradientType=0 );



			transition: all 0.2s ease;

			-webkit-transition: all 0.2s ease;

			-moz-transition: all 0.2s ease;

			transform: rotateX(-90deg);

			-webkit-transform: rotateX(-90deg);

			-moz-transform: rotateX(-90deg);

		}



		.b07_3d_double_roll:hover div:nth-child(2) {

			color: #ffffff;

			transition: all 0.2s ease;

			-webkit-transition: all 0.2s ease;

			-moz-transition: all 0.2s ease;

			transform: rotateX(0deg);

			-webkit-transform: rotateX(0deg);

			-moz-transform: rotateX(0deg);

		}



		.b07_3d_double_roll:hover div:nth-child(3) {

			background: #4f72bf;

			background: -moz-linear-gradient(top,  #4f72bf 0%, #7097c2 47%, #598ac2 100%);

			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f72bf), color-stop(47%,#7097c2), color-stop(100%,#598ac2));

			background: -webkit-linear-gradient(top,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			background: -o-linear-gradient(top,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			background: -ms-linear-gradient(top,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			background: linear-gradient(to bottom,  #4f72bf 0%,#7097c2 47%,#598ac2 100%);

			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f72bf', endColorstr='#598ac2',GradientType=0 );



			transition: all 0.2s ease 0.1s;

			-webkit-transition: all 0.2s ease 0.1s;

			-moz-transition: all 0.2s ease 0.1s;

			transform: rotateX(90deg);

			-webkit-transform: rotateX(90deg);

			-moz-transform: rotateX(90deg);

		}



		.b07_3d_double_roll:hover div:nth-child(4) {

			color: #ffffff;

			transition: all 0.2s ease 0.1s;

			-webkit-transition: all 0.2s ease 0.1s;

			-moz-transition: all 0.2s ease 0.1s;

			transform: rotateX(0deg);

			-webkit-transform: rotateX(0deg);

			-moz-transform: rotateX(0deg);

		}