/* Collingwood Buildings Website */

/* ------------ GALLERY WITH THUMBNAILS ------------- */




/* ------------ MEDIA GALLERY ------------- */

	.flexsliderContainer {
		width: 100%;
		padding: 2em 37px 1em;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;  
		box-sizing: border-box;
	}
	
	.flex-control-paging li a.flex-active {
		background-color: #7F7F7F;
	}
	
	.htmlContent .flexsliderContainer .slides img {
		border: none;
		float: none;
		margin: 0;
	}
	
	.htmlContent .flexsliderContainer ul,
	.htmlContent .flexsliderContainer ol {
		margin-left: 0;
  		padding: 0;
	}
	
	.htmlContent .flexsliderContainer ul li,
	.htmlContent .flexsliderContainer ol li {
		list-style: none;
	}
	
/* ------------ Navigation ----------- */
	
	.flex-direction-nav li a.flex-prev,
	.flex-direction-nav li a.flex-next {
		background: url(../i/global/galleryArrows.png); 
	}
	
	.flex-direction-nav li a { 
		height: 74px; 
		width: 37px;
		display: block;
		position: absolute; 
		top: 50%;
		margin-top: -37px;
		text-indent: 50px;
		overflow: hidden;
		text-indent: -9999px; 
		cursor: pointer; 
		z-index: 20;
		opacity: 0.8;
		filter: alpha(opacity=80); /* For IE8 and earlier */
	}
	
	.flex-direction-nav li a:hover { 
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
	
	.flex-direction-nav li a.flex-prev {
		left: -37px;
	}
	
	.flex-direction-nav li a.flex-next { 
		right: -37px;
		background-position: bottom;
	}
	
	.flex-direction-nav li a.flex-disabled { 
		display: none;
	}
	
	.flex-control-paging {
		text-align: center;
		padding-top: 1em;
	}
	
	.flex-control-paging li {
		height: 1.5em;
		width: 1.5em;
		display: inline-block;
		margin: 0 0.5em;
	}
	
	.flex-control-paging li a {
		display: block;
		border-radius: 50%;
		background-color: #ccc;
		text-indent: -9999px;
	}


/* --------------------------------------
	Top image
-------------------------------------- */	

	.flexslider {
		position: relative;
		background: url('../i/global/ajax-loader.gif') no-repeat center;
		margin-bottom: 2em;
	}
	
	.flexslider .caption {
		background-color: #E7E4E9; 
		padding: 0.5em 0.7em;
	}
	
	.flexslider .caption.hidden {
		padding: 0;
	}
	


/* --------------------------------------
	Thumbnails
-------------------------------------- */		
	
	.flexsliderThumbs {
		position: relative;
	}
	
	.flexsliderThumbs li {
		border: 3px solid #fff;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;  
		margin-right: 0.5em;
	}
	
	.flexsliderThumbs li.flex-active-slide {
		border: none;
		border: 3px solid #4f2668;
	}
	
	.htmlContent .flexsliderThumbs img {
		width: 100%;
		border: none;
	}
	
	.htmlContent .flexsliderContainer .flex-direction-nav li {
		border: none;
	}
	
	
	
@media screen and (max-width: 660px) {
	
	.flexslider {
		margin-bottom: 1em;
	}
	
	.flexsliderContainer {
		padding: 2em 0 1em;
	}
	
	.flex-direction-nav li a {
		position: relative;
	}
	
	.flex-direction-nav li a.flex-prev,
	.flex-direction-nav li a.flex-next {
		right: auto;
		left: auto;
		text-indent: 0;
		top: auto;
		margin-top: 1em;
		height: auto;
		width: auto;
		padding: 0.8em 1.2em;
		background: #1f0132;
		background-repeat: no-repeat;
		color: #fff;
		background-image: url(../i/global/mobileGalleryArrows.png);
	}
	
	.flex-direction-nav li a.flex-prev {
		float: left;
		padding-left: 2em;
		background-position: left -2.5em;
	}
	
	.flex-direction-nav li a.flex-next {
		float: right;
		background-position: right 0.9em;
		padding-right: 2em;
	}
	
	.htmlContent .flexsliderContainer .flexslider .flex-direction-nav {
		display: none;
	}
	
	.flexsliderThumbs li {
		margin-right: 0;
	}
		
}