@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
	margin: 0;
	background: #f3f3f3 url(../img/bkl.jpg);
	/*background: #f3f3f3 url(../img/background.png);*/
	text-align: center;
	font-family: "Open Sans";
}

.demo-menu {
	list-style-type: none;
	margin: 1em auto;
	text-align: center;
}

	.demo-menu li {
		display: inline-block;
		height: 30px;
		width: 170px;
		background: rgba(204,204,204,0.5);
		border-radius: 3px;
		cursor: pointer;
		-webkit-transition: 0.5s linear;
		-moz-transition: 0.5s linear;
		-ms-transition: 0.5s linear;
		-o-transition: 0.5s linear;
		transition: 0.5s linear;
	}
	
	.demo-menu li:hover {
		background: rgba(204,204,204,0.8);
	}
	
		.demo-menu li a, .demo-menu li a:visited {
			text-decoration: none;
			color: #1f6db5;
			text-shadow: none;
		}

#header-wrapper {
	display: block;
	
	width: 100%;
	height: 60px;
	color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#cbcbcb));
	background-image: -webkit-linear-gradient(top, #fefefe, #cbcbcb);
	background-image:    -moz-linear-gradient(top, #fefefe, #cbcbcb); 
   background-image:     -ms-linear-gradient(top, #fefefe, #cbcbcb); 
   background-image:      -o-linear-gradient(top, #fefefe, #cbcbcb); 
   background-image:         linear-gradient(to bottom, #fefefe, #cbcbcb);
	box-shadow: rgba(214,214,214,0.6) 0px 6px 0px;
	color: #444;
	text-shadow: rgba(255,255,255,0.5) 1px 1px 0px;
}

#content-wrapper {
	color: #414141;
	line-height: 1.5em;
	text-shadow: #fff 1px 1px 0px;
	font-size: 15px;
}

	#home, #about, #blog, #tweet, #contact {
		display: block;
	}
	
		.preface {
			margin: 0;
			font-size: 40px;
			color: #414141;
			line-height: 1.2em;
		}
	
	hr {
		margin: 1em 0;
		border-right: 0;
		border-left: 0;
		border-top: 0;
		border-bottom: 4px solid #dadcdd;
	}	
	
	.subtitle {
		color: #3b3c35;
		text-transform: uppercase;
		font-size: 20px;
		margin: .5em 0;
	}
	
		.blog-img {
			display: inline-block;
			margin-right: 4em;
			vertical-align: top;
			float: left;
		}

.wrapper, #content-wrapper {
	
	text-align: left;
}
	
	.title {
		display: inline-block;
		font-size: 20px;
		margin-top: 15px;
	}
	
	.pointer {
		position: absolute;
	}
	
	.navigation {
		font-size: 13px;
		text-transform: uppercase;
		display: inline-block;
		margin: 0;
		list-style-type: none;
		vertical-align: top;
	}
	
		.navigation li {
			display: inline-block;
			width: 100px;
			height: 16px;
			padding: 22px 0;
			text-align: center;
			cursor: pointer;
		}
			
		.navigation li:hover, .selected-nav {
			background-image: -webkit-gradient(linear, left top, left bottom, from(/*#7bbbf7*/#BE1014), to(/*#338cdf*/#FE0A0A));
			background-image: -webkit-linear-gradient(top, /*#7bbbf7*/ #BE1014, /*#338cdf*/#FE0A0A);
			background-image:    -moz-linear-gradient(top, /*#7bbbf7*/#BE1014, /*#338cdf*/#FE0A0A); 
   		background-image:     -ms-linear-gradient(top, /*#7bbbf7*/#BE1014, /*#338cdf*/#FE0A0A); 
   		background-image:      -o-linear-gradient(top, /*#7bbbf7*/#BE1014, /*#338cdf*/#FE0A0A); 
   		background-image:         linear-gradient(to bottom, /*#7bbbf7*/#BE1014, /*#338cdf*/#FE0A0A);
			border-bottom: 6px solid /*#1f6db6*/ #999;
		}
			
			.navigation li a {
				position: relative;
				z-index: 1px;
				color: #444;
				text-decoration: none;
			}
			
			.navigation li:hover a, .selected-nav a, .selected-nav2 a, .top a {
				color: #fff !important;
				text-shadow: #335f87 1px 1px 0px;
			}
		
		
		.cube {
			-webkit-perspective : 1200px;
			-moz-perspective : 1200px;
			-ms-perspective : 1200px;
			perspective : 1200px;
			padding: 0 !important;
			vertical-align: top;
		}
		
			.cube-wrapper-show {
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
				-webkit-animation: showMenu 0.5s ease-in-out;
				-moz-animation: showMenu 0.5s ease-in-out;
				-ms-animation: showMenu 0.5s ease-in-out;
				height: 60px;		
			}
			
			.cube-wrapper-hide {
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
				-webkit-animation: hideMenu 0.5s ease-in-out;
				-moz-animation: hideMenu 0.5s ease-in-out;
				-ms-animation: hideMenu 0.5s ease-in-out;
				height: 60px;		
			}
			
				.top, .front {
					display: block;
					width: 70px;
					height: 16px;
					padding: 22px 0;
					vertical-align: middle;
					position: absolute;
				}
			
				.front {
					background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#cbcbcb));
					background-image: -webkit-linear-gradient(top, #fefefe, #cbcbcb);
					background-image:    -moz-linear-gradient(top, #fefefe, #cbcbcb); 
   				background-image:     -ms-linear-gradient(top, #fefefe, #cbcbcb); 
   				background-image:      -o-linear-gradient(top, #fefefe, #cbcbcb); 
   				background-image:         linear-gradient(to bottom, #fefefe, #cbcbcb);
				}
				
				.front-before-rotate {
					box-shadow: rgba(214,214,214,0.6) 0px 6px 0px;
					-webkit-transform:  translateZ(25px);
					-moz-transform:  translateZ(25px);
					-ms-transform:  translateZ(25px);
					transform:  translateZ(25px);
				}
			
				.top {
					background-image: -webkit-gradient(linear, left top, left bottom, from(#7bbbf7), to(#338cdf));
					background-image: -webkit-linear-gradient(top, #7bbbf7, #338cdf);
					background-image:    -moz-linear-gradient(top, #7bbbf7, #338cdf); 
   				background-image:     -ms-linear-gradient(top, #7bbbf7, #338cdf); 
   				background-image:      -o-linear-gradient(top, #7bbbf7, #338cdf); 
   				background-image:         linear-gradient(to bottom, #7bbbf7, #338cdf);
					border-bottom: 6px solid #1f6db6;	
					-webkit-transform: rotate3d(1,0,0,90deg) 
											 translateZ(30px);
					-moz-transform: rotate3d(1,0,0,90deg) 
											 translateZ(30px);
					-ms-transform: rotate3d(1,0,0,90deg) 
											 translateZ(30px);
					transform: rotate3d(1,0,0,90deg) 
											 translateZ(30px);
				}
				
				.hide-front {
					display: none;
				}

				.show-front {
					display: block;
				}

				.show-top {
					display: block;
				}
				
				.showed-top {
					display: block;
					-webkit-transform: rotate3d(1,0,0,0deg);
					-moz-transform: rotate3d(1,0,0,0deg);
					-ms-transform: rotate3d(1,0,0,0deg);
					transform: rotate3d(1,0,0,0deg);
				}

				.hidden-top {
					-webkit-transform:	rotate3d(1,0,0,90deg) 
												translateZ(30px);
					-moz-transform:	rotate3d(1,0,0,90deg) 
												translateZ(30px);
					-ms-transform:	rotate3d(1,0,0,90deg) 
												translateZ(30px);
					transform:	rotate3d(1,0,0,90deg) 
												translateZ(30px);
				}

@-webkit-keyframes showMenu {
	0% { -webkit-transform: rotate3d(1,0,0,0); }
	100% { -webkit-transform: rotate3d(1,0,0,-90deg); }
}

		
@-webkit-keyframes hideMenu {
	0% { -webkit-transform: rotate3d(1,0,0,-90deg); }
	100% { -webkit-transform: rotate3d(1,0,0,0); }
}

@-moz-keyframes showMenu {
	0% { -moz-transform: rotate3d(1,0,0,0); }
	100% { -moz-transform: rotate3d(1,0,0,-90deg); }
}

		
@-moz-keyframes hideMenu {
	0% { -moz-transform: rotate3d(1,0,0,-90deg); }
	100% { -moz-transform: rotate3d(1,0,0,0); }
}

@-ms-keyframes showMenu {
	0% { -ms-transform: rotate3d(1,0,0,0); }
	100% { -ms-transform: rotate3d(1,0,0,-90deg); }
}

		
@-ms-keyframes hideMenu {
	0% { -ms-transform: rotate3d(1,0,0,-90deg); }
	100% { -ms-transform: rotate3d(1,0,0,0); }
}