/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

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

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

/**** Isotope CSS3 transitions ****/

.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;
}

/**** disabling Isotope CSS3 transitions ****/

.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;
}



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

/* required for containers to inherit vertical size from window */
.module {
  width: 209px;
  min-height: 292px; 
  padding: 9px 11px 3px 11px;
  margin: 0 0 18px 18px;
  float: left;
  position: relative;
  background: #fff;
}

	.module.large {
		width: 458px;
	}
	
	.module.tweetfeed {
		min-height: 540px;
	}
	
	.module.heightadjust {
		min-height: 150px;
	}

.module img {
	max-width: 100%;
	height: auto;
}

p.date {
	display: none;
}
		
		/* Hover effects */
		div.module a {
			display: block;
			border-bottom: none;
			color: inherit;
			height: 100%;
			width: 100%;
		}
		
		div.active {
			display: block;
			position: relative;
		}
		
		.hover {
			position:absolute;
			top:0;
			left:0;
			width: 100%;
			height: 100%;
			opacity: 0;
			
			
			/* Fade out */
			transition: opacity;
			transition-timing-function: ease-out;
			transition-duration: 250ms;
			
			-ms-transition: opacity;
			-ms-transition-timing-function: ease-out;
			-ms-transition-duration: 250ms;
			
			-moz-transition: opacity;
			-moz-transition-timing-function: ease-out;
			-moz-transition-duration: 250ms;
			
			-webkit-transition: opacity;
			-webkit-transition-timing-function: ease-out;
			-webkit-transition-duration: 250ms;
		}
		
		div.module a:hover .hover {
			opacity: 1;
			
			/* Fade in */
			transition: opacity;
			transition-timing-function: ease-out;
			transition-duration: 250ms;
			
			-ms-transition:opacity;
			-ms-transition-timing-function: ease-out;
			-ms-transition-duration: 250ms;
			
			-moz-transition:opacity;
			-moz-transition-timing-function: ease-out;
			-moz-transition-duration: 250ms;
			
			-webkit-transition: opacity;
			-webkit-transition-timing-function: ease-out;
			-webkit-transition-duration: 250ms;
		}

/* grey boxes */		
.social {
  text-align: center;
  width: 209px;
  height: 126px;
  background: #AEB2B2;
  font-family: 'KingsCaslonDisplayTypoItalic', Times, Times New Roman, Georgia, serif;
  margin-bottom: 12px;
}

.social:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.social p {
  display: inline-block;
  vertical-align: middle;
  width: 120px;
  font-size: 24px;
}

/* colour definitions for category boxes */
.module.behindthescenes           { border-top: 2px solid #fe2a5d; color: #fe2a5d; }
	.module.behindthescenes a:hover .hover { background: rgb(255, 43, 94); background: rgba(255, 43, 94, .80); }
.module.artistsprojects, .module.audio-artistsprojects		    { border-top: 2px solid #02e1ab; color: #02e1ab; }
	.module.artistsprojects a:hover .hover, .module.audio-artistsprojects a:hover .hover { background: rgb(2, 225, 171); background: rgba(2, 225, 171, .80); }
.module.thebuildingproject     { border-top: 2px solid #dc5aee; color: #dc5aee; }
	.module.thebuildingproject a:hover .hover { background: rgb(220, 90, 238); background: rgba(220, 90, 238, .80); }
.module.newsbites        { border-top: 2px solid #00d0ea; color: #00d0ea; }
	.module.newsbites a:hover .hover { background: rgb(0, 208, 234); background: rgba(0, 208, 234, .80); }
.module.offsite         { border-top: 2px solid #fec214; color: #fec214; }
	.module.offsite a:hover .hover { background: rgb(254, 194, 20); background: rgba(254, 194, 20, .80); }
.module.contact		    { border-top: 2px solid #c0b214; color: #c0b214; }
	.module.contact a:hover .hover { background: rgb(192, 178, 20); background: rgba(192, 178, 20, .80); }
.module.static		    { border-top: 2px solid #aeb2b2; color: #aeb2b2; }
	.module.static a:hover .hover { background: rgb(174, 178, 178); background: rgba(174, 178, 178, .80); }







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



/* Mobile phones landscape and lower and up to tablet size */
@media screen and (max-width : 480px), screen and (max-width : 640px) {
		
	.module {
	  width: 100%;
	  margin-left: 0;
	  /*width: 97%; notice big images display oddly - if this is required, assign a class to post_thumbnail within index.php */
	}
		
	.hover {
		border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; display: none !important;
	}
	
	.module:last-child {
		margin-bottom: 50px;
	}
		
} 

/* Mobile phones portrait only */
 @media screen and (max-width : 479px) { 

 	.module {
 	  margin-left: 0; width: 94%; padding-right: 9px; padding-left: 9px;
   }
 	  
 	  
 	
}