@charset "UTF-8";
/* CSS Document */
html, body 
{
	height: 100%;
	background-color: #333;
	letter-spacing: 2pt;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #FFF;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 8px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

span, a
{
	width:100%;
	display:block;
	text-decoration: none;
	color:#FFF;
}

a:hover
{
	color:#CCC;
}

#wrapper
{
	overflow: hidden;
	height: 100%;
}

.overlay
{
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: url(../includes/images/diagonal.png);
}

.container_project
{
	position: relative;
	width: 100%;
	height: 100%;
}

.project
{
	position:absolute;	
	width: 100%;
	height: 100%;	
}

.project_image
{
	position:absolute;
	width:100%;
	height: 100%;
	overflow: hidden;
}

.content
{
	position:absolute;
	overflow: hidden;
	top:0px;
	height: 100%;
	min-width:50%;
}

.content_title
{
	position: absolute;
	bottom:20%;
	width:100%;
}

.title_image{
	position:relative;
}

.using_these
{
	position: absolute;
    right: 10.3%;
    bottom: 13.5%;
    width: 18.4%;
    height: 18.4%;
	cursor: pointer;

}

.project_workItem
{
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
}

.project_back
{
	height:100%;
	width:100%;
	opacity:0;
	background-color:#000;
}

.project_cover
{
	position:absolute;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	opacity:0;
	visibility:hidden;
	background-color:#000;
}

.launch_button
{
	cursor:pointer;
	position: absolute;
	top:71.5%;
	left:30%;
	width:30%;
	min-width: 35%
}

img
{
	max-width:100%;
}

.menu_prompt
{
	cursor:pointer;
	position:fixed;
	top:-1px;
	right:120px;
	height:59px;
	width:120px;
	background-color:#FFF;
}

.container_menu
{
	position:absolute;
	overflow:hidden;
	top:0px;
	right:0px;
	width:35%;
	max-width:100%;
	height:100%;
	visibility:hidden;
}

.menu_item
{
	cursor:pointer;
	position:absolute;
	top:-13%;
	left:0px;
	width:100%;
	height:13%;	
}

.menu_image
{
	position:absolute;
	top:0px;
	width:100%;
	height:100%;
	background-color:#000;
}

.menu_cover
{
	width:100%;
	height:100%;
}

.closer
{
	cursor:pointer;
	position:absolute;
	top:0px;
	left:0px;
	opacity:0;
	width:5%;
}

.container_video
{
	position:absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	overflow:hidden;
	visibility:hidden;
}

.vidClass {
	position:absolute;
	opacity:0;
	visibility:hidden;
	background-color:#000000;
}

.vidClick{
	position:absolute;
	opacity:0;
	visibility:hidden;
	background-color:#A0A0A0;
}

.social_menu
{
	position:fixed;
	top:0px;
	left:0px;
	width:45px;
	height:125px;
}

#fb
{
	cursor:pointer;
	position:absolute;
	opacity:0.25;
	top:8px;
	left:6px;
	width:27px;
	height:27px;
}

#li
{
	cursor:pointer;
	position:absolute;
	opacity:0.25;
	top:41px;
	left:6px;
	width:27px;
	height:27px;
}

#email
{
	cursor:pointer;
	position:absolute;
	opacity:0.25;
	top:86px;
	left:7px;
	width:25px;
	height:25px;
}

.next_prompt
{
	cursor:pointer;
	position:fixed;
	bottom:0px;
	height:59px;
	width:120px;
	background-color:#FFF;
}

.image_div
{
	position:absolute;
}

#main_img00
{
	background-size:cover;
}

#main_img01
{
	background:url(../includes/images/_projectImages/proj01.jpg) right no-repeat;
	background-size:cover;
}

#main_img02
{
	background:url(../includes/images/_projectImages/proj02.jpg) center no-repeat;
	background-size:cover;
}

#main_img03
{
	background:url(../includes/images/_projectImages/proj03.jpg) right no-repeat;
	background-size:cover;
}

#main_img04
{
	background:url(../includes/images/_projectImages/proj04.jpg) center no-repeat;
	background-size:cover;
}

#main_img05
{
	background:url(../includes/images/_projectImages/proj05.jpg) center no-repeat;
	background-size:cover;
}

#main_img06
{
	background:url(../includes/images/_projectImages/proj06.jpg) center no-repeat;
	background-size:cover;
}

#main_img07
{
	background:url(../includes/images/_projectImages/proj07.jpg) center no-repeat;
	background-size:cover;
}

.preloader
{
	position:absolute;
	top:0px;
	width:100%;
	height:100%;
	background-color:#222222;
}

.spinner
{
	
  	position: absolute;
	width:58px;
	height:58px;
	margin: auto;
  	top: 0; 
	left: 0; 
	bottom: 0; 
	right: 0;
}
@media screen and (max-width: 480px)
{	
}