/* -=-=-=-=-=-=-{  FONTS! }=-=-=-=-=-=-=-=-*/
@font-face {
    font-family: 'Helvetica_thin';
    src: url('../fonts/HelveticaNeueLTPro-Th.eot');
    src: url('../fonts/HelveticaNeueLTPro-Th.eot?#iefix') format('embedded-opentype'),
         url('../fonts/HelveticaNeueLTPro-Th.woff') format('woff'),
         url('../fonts/HelveticaNeueLTPro-Th.ttf') format('truetype'),
         url('../fonts/HelveticaNeueLTPro-Th.svg#Helvetica_thin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Helvetica_light';
    src: url('../fonts/HelveticaNeueLTPro-Lt.eot');
    src: url('../fonts/HelveticaNeueLTPro-Lt.eot?#iefix') format('embedded-opentype'),
         url('../fonts/HelveticaNeueLTPro-Lt.woff') format('woff'),
         url('../fonts/HelveticaNeueLTPro-Lt.ttf') format('truetype'),
         url('../fonts/HelveticaNeueLTPro-Lt.svg#Helvetica_light') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'Helvetica_bold';
    src: url('../fonts/HelveticaNeueLTPro-Bd.eot');
    src: url('../fonts/HelveticaNeueLTPro-Bd.eot?#iefix') format('embedded-opentype'),
         url('../fonts/HelveticaNeueLTPro-Bd.woff') format('woff'),
         url('../fonts/HelveticaNeueLTPro-Bd.ttf') format('truetype'),
         url('../fonts/HelveticaNeueLTPro-Bd.svg#Helvetica_bold') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'Garamon_It_Bd';
    src: url('../fonts/agaramondpro-bolditalic.eot');
    src: url('../fonts/agaramondpro-bolditalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/agaramondpro-bolditalic.woff') format('woff'),
         url('../fonts/agaramondpro-bolditalic.ttf') format('truetype'),
         url('../fonts/agaramondpro-bolditalic.svg#Garamon_It_Bd') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Garamon_It';
    src: url('../fonts/agaramondpro-italic.eot');
    src: url('../fonts/agaramondpro-italic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/agaramondpro-italic.woff') format('woff'),
         url('../fonts/agaramondpro-italic.ttf') format('truetype'),
         url('../fonts/agaramondpro-italic.svg#Garamon_It') format('svg');
    font-weight: normal;
    font-style: normal;

}
h1, h2, h3, h4, h5, h6{
	font-family:'HelveticaNeue-Bold', 'Helvetica_bold', 'Helvetica Neue Bold', 'Helvetica Neue', Helvetica, Arial,'Lucida Grande', sans-serif;
	font-weight:500;
}
p {
	font-family: Arial, Helvetica, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Lucida Grande", sans-serif; 
	font-weight: 300;
}


/* -=-=-=-=-=-=-{  Lets get BUSY! }=-=-=-=-=-=-=-=-*/

html {}
body {
	
	color:#fff;
	
	padding:0;
}
#container{	
	background:url(../images/sand_1.jpg) center center fixed;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;


	overflow:hidden;
	overflow-y:auto;
    z-index:-3;
}

h1 {
	background-color:rgba(0,0,0,0.3);
	color:#FFF;
	font-size:32px;
	padding:16px 8px 16px 3vw;
	margin:0;
}
div.projekt {
	position:relative;
	
	width:30%;
	width:30vw;
	height:30%;
	height:30vw;
	margin-left:2.5%;
	margin-left:2.5vw;
	margin-top:2.5%;
	margin-top:2.5vw;
	
	padding:0px;
	
background: rgba(0,0,0,0.5);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.27) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.27)));
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.27) 100%);
background: -o-linear-gradient(-45deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.27) 100%);
background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.27) 100%);
background: linear-gradient(135deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.27) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );

   transition: background .25s .25s ease-in-out;
   -moz-transition: background .25s .25s ease-in-out;
   -webkit-transition: background .25s .25s ease-in-out;
	
	cursor:pointer;	
	
	overflow:hidden;
    text-overflow: ellipsis;
	
	float:left;
}
div.projekt:hover {
	/*background-color:rgba(0,0,0,0.7);*/
	
	background: rgba(0,0,0,0.91);
	background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.91) 0%, rgba(0,0,0,0.54) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,0,0,0.91)), color-stop(100%, rgba(0,0,0,0.54)));
	background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.91) 0%, rgba(0,0,0,0.54) 100%);
	background: -o-linear-gradient(-45deg, rgba(0,0,0,0.91) 0%, rgba(0,0,0,0.54) 100%);
	background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.91) 0%, rgba(0,0,0,0.54) 100%);
	background: linear-gradient(135deg, rgba(0,0,0,0.91) 0%, rgba(0,0,0,0.54) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
	
   transition: background .25s .25s ease-in-out;
   -moz-transition: background .25s .25s ease-in-out;
   -webkit-transition: background .25s .25s ease-in-out;
}
div.projekt h2{
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Lucida Grande", sans-serif; 
	font-size:24px;
	padding:8px 20% 8px 8px;
	margin:0px;
}
div.projekt p{
	display:block;
	margin:0px;
	padding:8px;	
	
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	
	font-size:13px;
	line-height:20px;
}
div.projekt:hover p, div.projekt:hover h2{
	
	background-color:rgba(0,0,0,0.3);/**/
	transition: background-color .25s ease-in-out;
   -moz-transition: background-color .25s ease-in-out;
   -webkit-transition: background-color .25s ease-in-out;
}
div.projekt img{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	

   height: 100%;
   
   opacity:0;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   
	z-index: -1;
}
div.projekt:hover img{
	opacity:1;
	z-index: -1;
}
div.projekt a{
	display:block;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
	
	
@media only screen and (min-width: 481px) and (max-width: 800px){
	div.projekt {
		width:46%;
		width:46.25vw;
		height:46%;
		height:46.25vw;
	}
}
@media only screen and (max-width: 480px) {
	div.projekt {
		width:85%;
		width:85vw;
		height:85%;
		height:85vw;
	margin-left:7.5%;
	margin-left:7.5vw;
	margin-top:7.5%;
	margin-top:7.5vw;
	}
}