/* Globals */
	body
	{
		background-color: white;
		color: #838181;
		font: 14px/20px 'Open Sans', sans-serif;
	}

	a
	{
		text-decoration: none;
		color: inherit;
	}
	a:hover
	{
		color: red;
	}

	ul
	{
		padding: 0;
	}

/* header */
	header
	{
		padding: 32px;
		border-bottom: 1px solid #C2C2C2;
		box-shadow: 0 5px 3px #F7F7F7;
		height: 75px;
		margin-bottom: 50px;
	}

	/* Left logo */
		#header_container
		{
			display: block;
			margin-left: 50px;
			float: left;
			cursor: pointer;
		}
	
		/* 3D Cube */
			@-webkit-keyframes rotate3d-cube
			{
				0%		{ transform: rotateX(-10deg) rotateY(0deg) rotateZ(-10deg); }
				50%		{ transform: rotateX(10deg) rotateY(720deg) rotateZ(10deg); }
				100%	{ transform: rotateX(-10deg) rotateY(1440deg) rotateZ(-10deg); }
			}
			@-moz-keyframes rotate3d-cube
			{
				0%		{ transform: rotateX(-10deg) rotateY(0deg) rotateZ(-10deg); }
				50%		{ transform: rotateX(10deg) rotateY(720deg) rotateZ(10deg); }
				100%	{ transform: rotateX(-10deg) rotateY(1440deg) rotateZ(-10deg); }
			}
			@-o-keyframes rotate3d-cube
			{
				0%		{ transform: rotateX(-10deg) rotateY(0deg) rotateZ(-10deg); }
				50%		{ transform: rotateX(10deg) rotateY(720deg) rotateZ(10deg); }
				100%	{ transform: rotateX(-10deg) rotateY(1440deg) rotateZ(-10deg); }
			}
			@keyframes rotate3d-cube
			{
				0%		{ transform: rotateX(-10deg) rotateY(0deg) rotateZ(-10deg); }
				50%		{ transform: rotateX(10deg) rotateY(720deg) rotateZ(10deg); }
				100%	{ transform: rotateX(-10deg) rotateY(1440deg) rotateZ(-10deg); }
			}
			
			.scene3D-cube
			{
				-webkit-perspective: 1000px;
				-moz-perspective: 1000px;
				-o-perspective: 1000px;
				perspective: 1000px;
				width: 200px;
				height: 55px;
				margin-left: 70px;
				margin-top: -15px;
			}
			.object3D-cube
			{
				-webkit-transform-style: preserve-3d;
				-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				-moz-transform-style: preserve-3d;
				-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				-o-transform-style: preserve-3d;
				-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				transform-style: preserve-3d;
				transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				position: absolute;
				width: 50%;
				height: 50%;
				-webkit-animation: rotate3d-cube linear infinite 30s;
				-moz-animation: rotate3d-cube linear infinite 30s;
				-o-animation: rotate3d-cube linear infinite 30s;
				animation: rotate3d-cube linear infinite 30s;
			}
			.face-cube
			{
				position: absolute;
				left: 16px;
				top: 1px;
				width: 50px;
				height: 50px;
			}
			#im1
			{
				-webkit-transform: translateZ(30px);
				-moz-transform: translateZ(30px);
				-o-transform: translateZ(30px);
				transform: translateZ(30px);
			}
			#im2
			{
				-webkit-transform: translateZ(-30px);
				-moz-transform: translateZ(-30px);
				-o-transform: translateZ(-30px);
				transform: translateZ(-30px);
			}
			#im3
			{
				-webkit-transform: translateX(30px) rotateY(90deg);
				-moz-transform: translateX(30px) rotateY(90deg);
				-o-transform: translateX(30px) rotateY(90deg);
				transform: translateX(30px) rotateY(90deg);
			}
			#im4
			{
				-webkit-transform: translateX(-30px) rotateY(-90deg);
				-moz-transform: translateX(-30px) rotateY(-90deg);
				-o-transform: translateX(-30px) rotateY(-90deg);
				transform: translateX(-30px) rotateY(-90deg);
			}
			#im5
			{
				-webkit-transform: translateY(30px) rotateX(90deg);
				-moz-transform: translateY(30px) rotateX(90deg);
				-o-transform: translateY(30px) rotateX(90deg);
				transform: translateY(30px) rotateX(90deg);
			}
			#im6
			{
				-webkit-transform: translateY(-30px) rotateX(-90deg);
				-moz-transform: translateY(-30px) rotateX(-90deg);
				-o-transform: translateY(-30px) rotateX(-90deg);
				transform: translateY(-30px) rotateX(-90deg);
			}

		/* Name */
			@font-face
			{
				font-family: myFont;
				src: url(fonts/trench100free.otf);
			}
			#title
			{
				font-family: myFont;
				font-size: 30px;
			}

	/* Nav bar */
		nav
		{
			display: block;
			float: right;
		}
		li
		{
			margin-left: 50px;
			float: left;
			font-size: 1.5em;
			line-height: 36px;
			list-style-type: none;
			text-align: center;
			color: #4F4D4D;
		}
		li:hover
		{
			color: #468C6B;
			cursor: pointer;
		}

/* Section */
	section
	{
		top: 200px;
		width: calc(100% - 115px);
		max-width: 1280px;
		margin: auto;
		padding: 0 50px;
		line-height: 1.5em;
	}

	section h2, section p
	{
		margin-bottom: 20px;
	}

	section h1
	{
		font-size: 2em;
		color: #404040;
		margin-bottom: 30px;
	}

	section h2
	{
		font-size: 1.5em;
		color: #404040;
	}
	
	/* Index */
		#photo
		{
			float: left;
			margin-right: 50px;
		}
		#index p a
		{
			text-decoration: underline;
		}
	
	/* Skills */
		#skills
		{
			width: 800px;
		}
		#skills-buttons
		{
			border: solid #F0F0F0 1px;
			border-bottom: none;
		}
		#skills-buttons div
		{
			width: 50%;
			height: 40px;
			padding-top: 20px;
			text-align: center;
			size: 16px;
		}
		#skills-buttons .highlight
		{
			cursor: pointer;
			background-color: #F8FFFF !important;
		}
		#social-button
		{
			float: left;
			border-right: solid #F0F0F0 1px;
			background-color: #F8FFFF;
		}
		#tech-button
		{
			margin-left: 50%;
			background-color: #FCFFFF;
		}
		.scene3D-skills
		{
		}
		.object3D-skills
		{
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.face-skills
		{
			position: absolute;
			background-color: white;
			padding: 20px;
			border: solid #F0F0F0 1px;
			border-top: none;
			margin-bottom: 10px;
		}
		#social
		{
			-webkit-transform: translateZ(10px);
			-moz-transform: translateZ(10px);
			-o-transform: translateZ(10px);
			transform: translateZ(10px);
		}
		#tech
		{
			-webkit-transform: translateZ(-10px) rotateY(180deg);
			-moz-transform: translateZ(-10px) rotateY(180deg);
			-o-transform: translateZ(-10px) rotateY(180deg);
			transform: translateZ(-10px) rotateY(180deg);
		}
		.face-skills div
		{
			clear: both;
			margin-bottom: 25px;
			display: table;
		}
		.face-skills div:last-of-type
		{
			margin-bottom: 0;
		}
		.face-skills div img
		{
			clear: left;
			float: left;
			height: 80px;
			margin-right: 20px;
		}
		.face-skills div p
		{
			display: table-cell;
			vertical-align: middle;
		}
	
	/* Career */
		#career
		{
			text-align: center;
		}
		table
		{
			border: none;
			margin: auto;
		}
		td:first-child
		{
			text-align: right;
		}
		td:last-child
		{
			text-align: left;
			padding-left: 10px;
		}
	
	/* Projects */
		#projects
		{
			text-align: center;
		}
		.projects-container
		{
			width: 900px;
			margin: auto;
			font-size: 1.5em;
		}
		.left-column
		{
			float: left;
		}
		.right-column
		{
			margin-left: 500px;
		}
		.left-column div, .right-column div
		{
			width: 400px;
			height: 200px;
			position: relative;
		}
		.end-column-container
		{
			margin-left: 250px;
			width: 400px;
			height: 200px;
			position: relative;
		}
		.projects-container div img, .projects-container div .project-details
		{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.project-details
		{
			background-color: black;
			opacity: 0.8;
			color: white;
			font-size: 14px;
			display: none;
			text-align: left;
		}
		.project-details p
		{
			margin: 10px;
		}
	
	/* Contact */
		#contact
		{
			text-align: center;
		}
		.contact-container:first-of-type
		{
			width: 562px;
			margin: auto;
		}
		#phone
		{
			float: left;
			margin-right: 50px;
		}
		.contact-container:last-of-type
		{
			width: 550px;
			margin: auto;
		}
		.contact-column
		{
			float: left;
			margin-right: 50px;
		}
		.contact-column:last-of-type
		{
			float: none;
			margin-left: 450px;
			margin-right: 0;
		}
		.contact-block 
		{
			float: none;
			position: relative;
			width: 100px;
			height: 100px;
			margin-bottom: 50px;
		}
		.contact-block img, .contact-details
		{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.contact-details
		{
			background-color: black;
			opacity: 0.8;
			color: white;
			font-size: 14px;
			display: none;
			text-align: center;
			line-height: 100px;
		}
		.contact-details p
		{
			margin: auto 10px;
			display: inline-block;
			vertical-align: middle;
			line-height: normal;
		}

@media only all and (max-width: 1050px)
{
    #header_container
	{
		display: none;
	}
	header
	{
		height: 25px;
	}
	li
	{
		line-height: 1px;
	}
	.projects-container
	{
		width: 400px;
	}
	.projects-container *
	{
		margin-right: auto;
		margin-left: auto;
		float: none;
	}
}

@media only all and (max-width: 800px)
{
	#photo
	{
		height: 400px;
	}
}

@media only all and (max-width: 700px)
{
	header
	{
		height: 120px;
		padding: 0;
	}
	li
	{
		margin: auto;
		margin-top: 30px;
		float: none;
		font-size: 1.2em;
	}
	nav
	{
		float: none;
	}
	#photo
	{
		height: 200px;
		margin-right: 20px;
	}
	.contact-container:first-of-type
	{
		width: 250px;
	}
	#phone
	{
		float: none;
		margin: auto;
		margin-bottom: 25px;
	}
	.contact-container:last-of-type
	{
		width: 250px;
	}
	.contact-column
	{
		float: left;
		margin-right: 50px;
	}
	.contact-column:nth-child(even)
	{
		float: none;
		margin-left: 150px;
		margin-right: 0;
	}
}