body {
	/* background: url(../img/bg2_8x1500.png); */
	background: url(../img/bck_02_016r.gif);
}

p {
	font-family: 'exo_2.0light', Arial, sans-serif;
}


@font-face {
    font-family: 'exo_2.0light';
    src: url('Exo2.0-Light-webfont.eot');
    src: url('Exo2.0-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Exo2.0-Light-webfont.woff') format('woff'),
         url('Exo2.0-Light-webfont.ttf') format('truetype'),
         url('Exo2.0-Light-webfont.svg#exo_2.0light') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* .contentLayer offsets projects index */
/*
.contentLayer
{
	position:absolute; 
	left: 60px; 
	top: 165px;
}
*/


#indexlogo {
	/* display: table-cell; // this says treat this element like a table cell
    vertical-align: middle; //now we can center vertically like in a TD 
	width: 100%;
	height: 100%;
	vertical-align: middle;*/
	
	position: absolute;
	top: 33%;
	width: 100%;
	align: center;
	
	/* border:1px solid black; */
}

#indexmain {
	/* width: 600px; */
	/* margin: 0 auto; */
	/* margin-top: 10px; */
	/* position: absolute;
	top: 5%; */
	
	position: fixed;
	/*bottom: 40px;*/
	width: 100%;
	top: calc(100vh - 80px);
	
	font-family: 'exo_2.0light', Arial, sans-serif;
	font-size: 18px;	/*24px;*/
	/*color: #cbf917;*/
	color: #339966;
	
	text-align: center;
	text-decoration: none;
	/* border: 1px solid black; */
}

#indexmain a{
	color: #339966;
	text-decoration: none;
}

#indexmain a:hover {
	background-color:#ffff00;
}

#indexfooter {
	
	/*position: absolute;
	top: 95%;
	width: 100%;*/
	
	position: fixed;
	/*bottom: 15px;*/
	top: calc(100vh - 50px);
	width: 100%;
  
	font-family: 'exo_2.0light', Arial, sans-serif;
	font-size: 16px;
	color: #339966;
	
	text-align: center;
	/* border: 1px solid black; */
}



#projects_footer {
	font-family: 'exo_2.0light', Arial, sans-serif;
	font-size: 14px;
	text-align: right;
	/*color: #ff0000;*/
	height: 30px;
	background-color: transparent; 
	padding-top: 2px;
}

#everything {
	background-color:#ffff00;
	/*color:#00ff00;*/
	position:absolute;
	z-index:0;
	left:0px;
	top:0px;
	/*width:100px;
	height:100px;
	border:2px;
	border-color:#000000;
	transform:scale(1.2);*/
}

div#projects_menu {
	position:absolute; 
	z-index: 3; 
	left: 45px; 	/*335px; */
	top: 110px; 
	width: 720px;
	font-family: 'exo_2.0light', Arial, sans-serif;
	font-size: 22px;
	color: #ffffff;
	text-align: right;
}

div#projects_menu a {
	color: #ccff00;
	text-decoration: none;
}

div#projects_index font 
{ 
	font-family: 'exo_2.0light', Arial, sans-serif;
	font-size: 14px; 
	line-height: 16px; 
	color:#000000;
}



/*

div {
  height: 100px;
  background-color: red;
  background-image:
    linear-gradient(
      red, #f06d06
    );
}
*/
/*
.gradient {
  background-image:
    linear-gradient(
      red, #f06d06
    );
}
*/



#indexlink {

	position: fixed;
	bottom: 125px;
	width: 100%;
  
	font-family: 'exo_2.0light', Arial, sans-serif;
	font-size: 18px;	/*24px;*/
	/*color: #cbf917;*/
	color: black;
	
	text-align: center;
	/* border: 1px solid black; */
}


#logoimg {
	display: block; 
	margin-left:auto; 
	margin-right: auto; 
	width: 240px; 
	height: 180px; 
}


/* div#projects_footer font, */
div#projects_textmain font, 
div#projects_textmain a
{
	color: #333333;
	font-family: 'exo_2.0light', helvetica, verdana, arial, sans-serif; 
	font-size: 16px;
}

div#projects_textmain {
	padding-left: 40px; 
	padding-right: 40px;
	padding-top: 25px;
	padding-bottom: 10px;
	text-align: justify;
}

div#projects_index {
	position:absolute; 
	left: 60px; 
	top: 165px;
	
	width:720px; 
	left:60px;
	/* transform:scale(1.2); */
	z-index: 11;
}

/*
div#projects_testbar {
	background-color:#ff0000; 
	position:absolute;
	top:5px;
	width:720px; 
	height:10px; 
	left:60px; 
	z-index:12;
	
	transform-origin: top left;		
}
*/

@media (min-width:1000px) {
    
	/*
	div#projects_testbar {
		width:calc(100vw - 120px); 
	}	
	*/
	
	div#projects_index {
		/*transform:scale(1.2); */
	}
	 
	div#everything {
		/*width: calc(100vw - 120px); */
		/*transform:scale( calc( 10vw ) );	/*(calc((100vw - 100px) / 100));*/
	}
}

@media only screen and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2)  
{ 

	body {
		background: url(../img/bg2_8x3000.png);
	}
	
	#logoimg {
		width: 360px; 
		height: 240px; 
	}
	
	#indexmain {
		/*bottom: 45px;*/
		font-size: 24px;
	}
	
	#indexfooter {
		font-size: 22px;
	}
}