/* ========================================================================== */

.grid {
	display: table;
	width: 100%;
}

.grid-tiles {
	padding-bottom: 0px;
	padding-top: 0px; 
}

.grid-tiles:after {
	clear: both;
	content: "";
	display: table; 
}

.grid-tile {
	display: block;
	float: left;
	position: relative;
}

.grid-tile-featured {
	display: block;
	float: left;
	position: relative;
}

.grid-tile-primary {
	display: block;
	float: left;
	position: relative;
}

.grid-tile-secondary {
	display: block;
	float: left;
	position: relative;
}


/* ========================================================================== */

.grid-image {
	position: relative;
	width: 100%;
	height: auto;
    margin: 0px;
    padding: 0px;
    -webkit-transform: translateZ(0);
}

.grid-image:before {
    content: '';
    display: block;
    width: 100%; 
	/* padding-bottom: 100%; */
}

.grid-image:after {
	content: '';
	display: block;
	width: 100%; 
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
    background-color: #000000;
    opacity: 0;

	/*
	-webkit-transition: background-color 0.2s ease, opacity 0.2s ease;
	-moz-transition: background-color 0.2s ease, opacity 0.2s ease;
	-ms-transition: background-color 0.2s ease, opacity 0.2s ease;
	transition: background-color 0.2s ease, opacity 0.2s ease;
	*/
}

.grid-image-square {
	position: relative;
    padding-top: 100%;
    overflow: hidden;
    width: 100%;
	height: 100%;
}

.grid-image-square img {
	position: absolute;

	width: auto;
	height: 100%;
	border: 0;
	top: 50%;
	left: 50%;

 	-webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

	opacity: 0;	
	
	-webkit-transition: opacity 1s ease-out;
	-moz-transition: opacity 1s ease-out;
	-ms-transition: opacity 1s ease-out;
	transition: opacity 1s ease-out;
}

.grid-image-square img.portrait {
	width: 100%;
	height: auto;
}

.grid-image-square.loaded img {
	opacity: 1; 
}

.grid-image-featured {
	position: relative;
    padding-top: 33%;
    overflow: hidden;
    width: 100%;
	height: 100%;
}

.grid-image-featured img {
	position: absolute;

	width: 100%;
	height: 100%;
	border: 0;
	top: 50%;
	left: 50%;

 	-webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

	opacity: 0;	
	
	-webkit-transition: opacity 1s ease-out;
	-moz-transition: opacity 1s ease-out;
	-ms-transition: opacity 1s ease-out;
	transition: opacity 1s ease-out;
}

.grid-image-featured img.portrait {
	width: 100%;
	height: auto;
}

.grid-image-featured.loaded img {
	opacity: 1; 
}



/* MOBILE
   ========================================================================== */

@media (max-width: 480px) { 

	.grid {
		padding: 0px;
	}

	.grid-tile {
		width: 100%; 
		margin-right: 0%;
		padding-bottom: 10px;
	}

	.grid-tile-primary {
		margin-right: 0%;
		width: 100%; 
		padding-bottom: 10px;
	}

	.grid-tile-secondary {
		margin-right: 0%;
		width: 100%; 
		padding-bottom: 10px;
	}

	.grid-tile-featured {
		margin-right: 0%;
		width: 100%; 
		padding-bottom: 10px;
	}

	.grid-image-featured {
		position: relative;
    	padding-top: 100%;
    	overflow: hidden;
    	width: 100%;
		height: 100%;
	}

	.grid-image-featured img {
		position: absolute;

		width: 100%;
		height: 100%;
		border: 0;
		top: 50%;
		left: 50%;

 		-webkit-transform: translate(-50%,-50%);
    	-moz-transform: translate(-50%,-50%);
    	-ms-transform: translate(-50%,-50%);
    	transform: translate(-50%,-50%);
	}

}


/* TABLET
   ========================================================================== */

@media (min-width: 481px) and (max-width: 960px) { 

	.grid {
		padding-left: 35px;
		padding-right: 35px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.grid-tile {
		margin-right: 0%;
		width: 50%;
		padding: 5px; 
		background-color: #ffffff;
	}

    .grid-tile:nth-child(2n+1) {
    	clear: left; 
    } 

	.grid-tile-primary {
		margin-right: 0%;
		width: 100%;
		padding: 5px; 
		clear: both; 
	}	

	.grid-tile-secondary {
		margin-right: 0%;
		width: 50%;
		padding: 5px; 
	}

	.grid-tile-featured {
		margin-right: 0%;
		width: 100%; 
		height: 100%;
		padding: 5px; 
		clear: both; 
	}

	.grid-image-featured {
		position: relative;
    	padding-top: 50%;
    	overflow: hidden;
    	width: 100%;
		height: 100%;
	}

	.grid-image-featured img {
		position: absolute;

		width: 100%;
		height: auto;
		border: 0;
		top: 0%;
		left: 0%;

 		-webkit-transform: translate(0%,-25%);
    	-moz-transform: translate(0%,-25%);
    	-ms-transform: translate(0%,-25%);
    	transform: translate(0%,-25%);
	}
}


/* LAPTOP
   ========================================================================== */

@media (min-width: 961px) and (max-width: 1440px) { 

	.grid {
		padding-left: 35px;
		padding-right: 35px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.grid-tile {
		margin-right: 0%;
		width: 33.33333%; 
		padding: 5px; 
		background-color: #ffffff;
	}
    
    .grid-tile:nth-child(3n+1) {
    	clear: left;
    } 

	.grid-tile-primary {
		margin-right: 0%;
		width: 100%; 
		padding: 5px; 
	}

	.grid-tile-secondary {
		margin-right: 0%;
		width: 33.33333%; 
		padding: 5px; 
	}
	
	.grid-tile-featured {
		margin-right: 0%;
		width: 100%; 
		height: 100%;
		padding: 5px; 
	}

	.grid-image-featured {
		position: relative;
    	padding-top: 40%;
    	overflow: hidden;
    	width: 100%;
		height: 100%;
	}

	.grid-image-featured img {
		position: absolute;

		width: 100%;
		height: auto;
		border: 0;
		top: 0%;
		left: 0%;

 		-webkit-transform: translate(0%,-30%);
    	-moz-transform: translate(0%,-30%);
    	-ms-transform: translate(0%,-30%);
    	transform: translate(0%,-30%);
	}
	
}


/*	WIDESCREEN
	==============================================================================================================
*/

@media (min-width: 1441px) { 

	.grid {
		padding-left: 35px;
		padding-right: 35px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.grid-tile {
		margin-right: 0;
		width: 33.33333%; 
		padding: 5px; 
		background-color: #ffffff;
	}
    
    .grid-tile:nth-child(3n+1) {
    	clear: left;
    } 
	
	.grid-tile-primary {
		margin-right: 0%;
		width: 100%; 
		padding: 5px; 
	}

	.grid-tile-secondary {
		margin-right: 0%;
		width: 33.33333%; 
		padding: 5px; 
	}
	
	.grid-tile-featured {
		margin-right: 0%;
		width: 100%; 
		height: 100%;
		padding: 5px; 
	}

	.grid-image-featured {
		position: relative;
    	padding-top: 33%;
    	overflow: hidden;
    	width: 100%;
		height: 100%;
	}

	.grid-image-featured img {
		position: absolute;

		width: 100%;
		height: auto;
		border: 0;
		top: 0%;
		left: 0%;

 		-webkit-transform: translate(0%,-33%);
    	-moz-transform: translate(0%,-33%);
    	-ms-transform: translate(0%,-33%);
    	transform: translate(0%,-33%);
	}

}


/*
*
*
*
*
*
*
* 
*
*/