/*@font-face {
    font-family: 'league_gothicregular';
    src: url('../fonts/leaguegothic-regular-webfont.eot');
    src: url('../fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguegothic-regular-webfont.woff') format('woff'),
         url('../fonts/leaguegothic-regular-webfont.ttf') format('truetype'),
         url('../fonts/leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;
}*/

* {
	font-family: 'Raleway', sans-serif;
	}

body, html { /* set size of body to full page and remove margins */
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;    
	}
	
hr {
	background-color:#5c5c5c;  /* Farbe f�r Opera und Firefox */
	color:#5c5c5c; /* Farbe f�r Internet Explorer (IE) */
	border: 0;
	height: 1px;
	}	
	
#link
{
	
	text-decoration:none;
	color:#3b3b3b;
	font-weight: 400;
	}
	
/*#link a:active #hover		????!
{
   opacity:1;
	filter:alpha(opacity=100);
	}*/


#link a:link
{
	text-decoration:none;
	color:#3b3b3b;
	}


#link a:visited
{
	text-decoration:none;
	color:#3b3b3b;
	}

#link a:hover 
{	
	text-decoration:none;
	color:#dddddd;
	}

#link a:active
{
	text-decoration:none;
	color:#3b3b3b;
	}


#titel
{	
	text-align: center;
	color:#3b3b3b;	
	}
	
#titel a
{
	text-decoration: none;
	color:#3b3b3b;
	padding-left: 10px;
	}
	
#titel a:link
{
	text-decoration: none;
	color:#3b3b3b;
	padding-left: 10px;
	}

#titel a:visited
{
	text-decoration: none;
	color:#3b3b3b;
	padding-left: 10px;
	}

#titel a:hover
{
	text-decoration: none;
	color:#dddddd;
	padding-left: 10px;
	}
	
#titel a:active
{
	text-decoration: none;
	color:#3b3b3b;
	padding-left: 10px;
	}
	
#contentwrapper
{
	padding-top:50px;
	width:100%;
	max-width:736px;
	margin-left: auto ;
  	margin-right: auto ;
	}

#filters
{
	width 100%;
	text-align: center;
	margin: 0 auto;
	}	
	
#filters a
{
	display: inline-block;
	margin: 0 auto;
	text-decoration:none;
	color:#3b3b3b;
	font-weight: 400;
	}	

#filters a:hover 
{	
	text-decoration:none;
	color:#cccccc;
	}	
	
#projects
{
	margin-top:20px;
	overflow: hidden;
	-moz-box-shadow: 0 0 200px #eeeeee;
	-webkit-box-shadow: 0 0 200px #eeeeee;
	box-shadow: 0 0 200px #eeeeee;
	}

#project {
	float: left;
	width: 180px;
	height: 200px;
	border-color: white;
	border-right-style: solid;
	border-width: 4px;	
	overflow: hidden;
	-moz-box-shadow: 0 0 200px #d4d4d4;
	-webkit-box-shadow: 0 0 200px #d4d4d4;
	box-shadow: 0 0 200px #d4d4d4;
	}
	
#project div {
	color: black;
	}

#hover {
	z-index: 1;
	position: absolute;
	width: 180px;
	height: 200px; 
   opacity:0.6;
	filter:alpha(opacity=60);
	background-color: white;
	display: none;
	}

#project:hover #hover {
   display:block;
   position:absolute;
	}

	
	  /*	Single Project Page  */
	
#projectVideo {
	width: 100%;
	height: 414px;	
	-moz-box-shadow: 0 0 200px #d4d4d4;
	-webkit-box-shadow: 0 0 200px #d4d4d4;
	box-shadow: 0 0 200px #d4d4d4;
	}
	
#projectVideo iframe {
	width: 100%;
	height: 100%;
	}
	
#projectText {
	z-index: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	}
	
#projectImg {
	float: left;
	width: 50%;
	height: 207px;
	overflow: hidden;
	-moz-box-shadow: 0 0 100px #d4d4d4;
	-webkit-box-shadow: 0 0 100px #d4d4d4;
	box-shadow: 0 0 100px #d4d4d4;
	}
	
#projectImg img {
	height: 100%;
	}	
	
#about {
	font-weight: 200;
	padding-left: 20%;
	padding-right: 20%;
	-moz-box-shadow: 0 0 200px #f1f1f1;
	-webkit-box-shadow: 0 0 200px #f1f1f1;
	box-shadow: 0 0 200px #f1f1f1;	
	}
	

	  /*	Media Screen */

/*@media screen and (max-width: 920px) {
  #contentwrapper {
   width: 736px;
  }*/
  
@media screen and (max-width: 736px) {
  #contentwrapper {
   width: 552px; 
  }

  #about  {
	padding-left: 0;
	padding-right: 0;
  }
  
  #projectVideo {
	height: 288px;
	}
  
  
@media screen and (max-width: 552px) {
  #contentwrapper {
   width: 368px;
  }

  #about  {
   font-size: 20px;  
	padding-left: 0;
	padding-right: 0;
  }
  
  #projectVideo {
	height: 207px;
	}
  

  
