@font-face { font-family: "Museo"; src: url('/fonts/museo300.otf'); } 
@font-face { font-family: "MuseoFat"; src: url('/fonts/museo700.otf'); } 
@font-face { font-family: "helveticaBold"; src: url('/fonts/helveticaBold.otf'); } 
@font-face { font-family: "helveticaBlack"; src: url('/fonts/helveticaBlack.otf'); } 


.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}


.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


/**** Base styles ****/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  padding: 20px;
  font-family:  Arial, sans-serif;
  font-size: 13px;
  line-height: 1.7em;
  background: #939393;
  color: #000;
  background-image:url(/images/bggrad.png);
  background-repeat:repeat-x;
}

h2, h3, p, ul, ol, pre, dl {
  margin-bottom: 0.6em;
}



h2, h3 { font-weight: bold; }

h1 {
  font-size: 48px;
  color: #be3636;
  font-family:'Museo';
}

h2 {
  font-size: 24px;
  line-height: 1.0em;
}

ul, ol {
  margin-left: 1.5em;
}

a,
a:visited,
a code {
  color: #FB4;
  text-decoration: none;
}

a:hover,
a:hover code { 
  color: #4BF; 
}

a:active,
a:active code {
  color: #1FB;
}

a img { border: none; }

em { font-style: italic; }
strong { font-weight: bold; }

blockquote {
  padding-left: 1.0em;
  margin-left: 1.0em;
  border-left: 1px solid #333;
  font-style: italic;
}

/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */
html,
body {
  height: 100%;
}


#mainFrame{
	max-width: 1150px;
	margin:auto;
	
}

#container {
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 10px;
	-moz-border-radius: 10px;
  padding: 5px;
  top:40px;
  margin-bottom: 100px;
  width:930px;
  display:none;
}

.element {
  width: 350px;
  height: 150px;
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
  background: white;
  color: #5b5b5b;
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  
  -webkit-transition: -webkit-box-shadow 0.3s  !important;
  -moz-transition: -moz-box-shadow 0.3s  !important;
  transition: box-shadow 0.3s !important;  
}


.element.smoove{
	-webkit-transition: all 0.3s  !important;
	-moz-transition: all 0.3s  !important;
	-o-transition: all 0.3s  !important;
	-ms-transition: all 0.3s !important ;
	transition: all 0.3s !important; 
	
}


.element:hover{
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.61);	
	-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.61);
	/*left: -6px !important;
	top: -6px !important;
	border: 6px solid rgb(178, 217, 243);*/
		
}



.element h2 {
	font-family: 'Oswald', sans-serif;
	/*font-family: 'Roboto', sans-serif;*/
	color:black;
	font-size:18px;
	top:0px;
	
}

.element.tall {
  height:310px;
}



.element.tall h2 {
	
	top:0px;
	left:0px;
 	
}

.element.tall .projectBody {
	position:absolute;
	top:210px;
	left:20px;
 	
}

.element.tall.large .projectBody {
	top:20px;
}


.element.tall .smallThumb{
	position:absolute;
	width:100%;
	height:195px;

}


.element.small {
  width:165px;
}

.element.small .projectBody {
	position:absolute;
	top:20px;
	left:20px;
 	
}


.element.wide {
	width:538px;
	height:252px;
}


.element.wide .projectBody {
	position:absolute;
	top:10px;
	left:330px;
 	
}


.element.wide .smallThumb{
	position:absolute;
	width:330px;
	height:100%;
	

}


.element .closeBtn{
	display:none;
	width:50px;
	height:50px;
	top:0px;
	right:0px;
	position:absolute;
	background-color: rgb(255, 195, 129);
	cursor:pointer;
}

.element .closeBtn:hover{
	background-color:rgb(255, 231, 205);	
}

.element.large .closeBtn{
	display:none;
}


.element.large {
 	display:table-cell;
	cursor: default !important;
	box-shadow:none !important;
	moz-box-shadow:none !important;
}

.element.large .bigThumb{
 	display:block;
	margin-left:38px;
}

.element.large .smallThumb{
 	display:none;
}

.element .bigThumb{
 	display:none;
}

.element .handle{
	
	
	width: 8px;
	background-color: rgb(255, 195, 129);
	position: absolute;
	transition: width .3s;
	background-position: center top;
	
	
	height: 100%;
	z-index: 9;
	
}

.element:hover .handle{
	width: 100%;
	background-image:url(/images/anzeigen.png);
	background-position: center center;
	background-repeat: no-repeat;
	
}

.element.large .handle{
	background-image:none;

}
.element .smallThumb{
 	display:block;
	height:100%;
	background-repeat:no-repeat;
}

.element.large .handle{
	width: 8px !important;
}

.element.large .symbol {
  font-size: 4.5em;
}

.element.fake .symbol {
  color: #000;
}


.element .description {
	
	height:100%;
	overflow:hidden;
	top:26px;
	line-height:15px;
}


.element .description a.button{
	
	display:none;
} 

.element.large .customer{
	font-size: 30px;
}

.element.large .description {
	
	overflow:show;
	margin-top:30px;
	line-height: 1.1em;
	font-size: .9em;
}

.element.large .description a.button{
	
	display: table;
	background-color: #BE7D36;
	padding: 2px 6px;
	font-size: 30px;
	line-height: 20px;
	color: white;
	margin-top: 15px;
	font-size: 30px;
	font-weight: normal;
	padding: 15px 30px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
	transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	
	clear: both;
}

.element.large .description a.button:visited{
	color: white;
	
}

.element.large .description a.button:hover{
	color: white;
	background-color: rgb(255, 197, 92);
}

.element .year {
 	font-size: 11px;
	font-weight: bold;
	color: hsla(0,0%,0%,.5);
	right: 2px;
	top: 4px;
	line-height: 10px;
	margin-bottom: 3px;
}



.element .smallThumb{
	height:100%;
	width:170px;
	background-position:center;
	background-repeat:no-repeat;
	position:absolute;

}

.element .projectBody{
	height:50%;
	left:160px;	
	display:table-cell;
	padding-right:20px;
	padding-bottom:20px;
	position:absolute;
	top:17px;
	text-overflow:ellipsis;
	

}

.element.large .projectBody{
	
	left:380px;	
	height:100%;
	

}

.sub{
	font-size:.4em;
}


.variable-sizes .element.width2 { width: 230px; }

.variable-sizes .element.height2 { height: 230px; }

.variable-sizes .element.width2.height2 {
  font-size: 2.0em;
}

.element.large,
.variable-sizes .element.large,
.variable-sizes .element.large.width2.height2 {
  font-size: 2.2em;
  width: 800px;
  height: 350px;
  z-index: 100;
}

.clickable .element:hover {
  cursor: pointer;
}


.clickable .element:hover h2 {
  color: #333333;
}


/* Color shapes */

.color-shape {
  width: 70px;
  height: 70px;
  margin: 5px;
  float: left;
}
 
.color-shape.round {
  -webkit-border-radius: 35px;
     -moz-border-radius: 35px;
          border-radius: 35px;
}
 
.color-shape.big.round {
  -webkit-border-radius: 75px;
     -moz-border-radius: 75px;
          border-radius: 75px;
}
 
.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }
 
.color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }

.color-shape a {
  display: block;
  height: 100%;
}

.color-shape a:hover {
  background: white;
  background: hsla( 0, 0%, 100%, 0.5 );
}


footer {
  font-size: 12px;
  font-style: italic;
  border-top: 1px solid white;
  padding: 0.8em 0;
  color:white;
  max-width:1052px;
}

#content {
  margin-left: 210px;
  margin-top:0px;
}

#site-nav{
	position:absolute;
	margin-top:-20px;
	
}
.storeBtns{margin-top:20px;}

#infoBox{
	width: 180px;
	margin-top: 60px;

}

#infoBox #head{
	height:55px;
	background-color:white;
	background-image:url(/images/nav-grad.png);
	background-position:bottom;
	background-repeat:repeat-x;
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
	color:#c4930f;
	padding-left:10px;
	padding-top:28px;
}

#infoBox #body{
	height:289px;
	background-color:black;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;
	color:white;
	padding:15px;
	padding-bottom: 0px;
	font-size:11px;
	/*font-family:"helveticaBold";*/
}

#infoBox .contrast{
	background-color: #BE7D36;
	/*-moz-border-radius: 10px;
	border-radius: 10px;*/
	color: white;
	padding: 6px 8px;
	line-height: 15px;
	font-size: 10px;
	margin-top: 25px;
	/* font-family: "helveticaBlack"; */
	font-weight: bold;
}

#infoBox h1{
	font-size:24px;
	font-family: 'Oswald', sans-serif;
	color:#c4930f;

	
}

#infoBox h2{
	font-size:12px;
	/*font-family:"Museo";*/
	color: #ccc;
}


#loaderMessage{
	font-family: 'Oswald';
	font-size: 30px;
	color: white;
	text-align: center;
	margin-top: 300px;
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
}

#loaderMessage.fadeOut{
	
	-webkit-animation:none;
	margin-top: 350px;
	opacity:0;
}






@-webkit-keyframes pulse {
    from { 
        opacity           : 1;
    }
   	50% { 
        opacity           : 0.5;
    }
    to { 
        opacity           : 1;
    }
}

#profilePic{
	height: 238px;
	width: 180px;
	background-color: black;
	margin-top: 20px;
	overflow:hidden;
	background-image:url(/images/me.png);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	
}

#previewDialog{
	display:none;
	
}
.videoPreview{
	
	
	display:none;
	
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 

	#container{width:750px;}
	.element:hover .handle{width:8px;}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
	#container{width:555px;}
	.element:hover .handle{width:8px;}	
}



/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }