/*
Create tiles of any width that match height according to a ratio.
The parent container should have relative positioning to allow the psuedo element to create proportional height.
Use the ratio classes in the parent element and insert the content in the child element.

The HTML should look like this:

<div class='tile ratio-1-1'>
	<div class='tile-content'>Content goes here</div>
</div>
*/

.tile-content{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.ratio-1-1, .ratio-1-2, .ratio-1-3, .ratio-1-6, .ratio-2-1, .ratio-2-3, .ratio-3-1, .ratio-4-1, .ratio-5-1, .ratio-6-1, .ratio-7-1, .ratio-8-1, .ratio-9-1, .ratio-10-1, .ratio-15-1, .ratio-20-1 .ratio-16-9, .ratio-4-3{
	position: relative;
}

.desktop-ratio-2-1{
	position: relative;
}

.mobile-ratio-1-1, .mobile-ratio-2-3, .mobile-ratio-3-1{
	position: relative;
}

.tablet-ratio-1-1, .tablet-ratio-2-3, .tablet-ratio-1-2, .tablet-ratio-1-2, .tablet-ratio-2-3, .tablet-ratio-3-1, .tablet-ratio-6-1{
	position: relative;
}

.ratio-1-2:before{
	content: "";
	display: block;
	padding-top: 199.9%; /* ratio of 1x:2y, corrected for matching two square heights*/
}

@media (max-width: 768px) {
	.ratio-1-2:before{
		content: "";
		display: block;
		padding-top: 200%; /* ratio of 1x:2y*/
	}
}

.ratio-1-3:before{
	content: "";
	display: block;
	padding-top: 300%; /* ratio of 1x:3y*/
}

.ratio-1-6:before{
	content: "";
	display: block;
	padding-top: 300%; /* ratio of 1x:6y*/
}
.ratio-2-3:before{
	content: "";
	display: block;
	padding-top: 66.66666666667%; /* ratio of 2x:3y*/
}

.ratio-1-1:before{
	content: "";
	display: block;
	padding-top: 100%; /* ratio of 1x:1y*/
}

.ratio-2-1:before{
	content: "";
	display: block;
	padding-top: 50.0%; /* ratio of 2x:1y*/
}

.ratio-3-1:before{
	content: "";
	display: block;	
	padding-top: 33.3333333333333%; /*ratio of 3x:1y*/
}

.ratio-4-1:before{
	content: "";
	display: block;
	padding-top: 25.0%; /*ratio of 4x:1y*/
}

.ratio-5-1:before{
	content: "";
	display: block;
	padding-top: 20%; /*ratio of 4x:1y*/
}

.ratio-6-1:before{
	content: "";
	display: block;
	padding-top: 16.6666666667%; /*ratio of 4x:1y*/
}

.ratio-7-1:before{
	content: "";
	display: block;
	padding-top: 14.285%; /*ratio of 4x:1y*/
}

.ratio-8-1:before{
	content: "";
	display: block;	
	padding-top: 12.5%; /*ratio of 8x:1y*/
}

.ratio-9-1:before{
	content: "";
	display: block;	
	padding-top: 11.111111%; /*ratio of 9x:1y*/
}

.ratio-10-1:before{
	content: "";
	display: block;	
	padding-top: 10%; /*ratio of 10x:1y*/
}

.ratio-15-1:before{
	content: "";
	display: block;	
	padding-top: 7.5%; /*ratio of 10x:1y*/
}


.ratio-20-1:before{
	content: "";
	display: block;	
	padding-top: 5%; /*ratio of 20x:1y*/
}

.ratio-4-3:before{
	content: "";
	display: block;	
	padding-top: 75%; /*ratio of 4x:3y*/
}

.ratio-16-9:before{
	content: "";
	display: block;	
	padding-top: 56.25%; /*ratio of 16x:9y*/
}

@media (max-width: 960px) {
	.desktop-ratio-2-1:before{
		content: "";
		display: block;	
		padding-top: 50%; /* ratio of 2x:1y*/
	}
}

@media (max-width: 768px) {
	.tablet-ratio-1-1:before{
		content: "";
		display: block;	
		padding-top: 100%; /* ratio of 1x:1y*/
	}

	.tablet-ratio-1-2:before{
		content: "";
		display: block;	
		padding-top: 200%; /* ratio of 1x:2y*/
	}

	.tablet-ratio-2-3-:before{
		content: "";
		display: block;	
		padding-top: 66.666666666%; /* ratio of 2x:3y*/
	}

	.tablet-ratio-2-1:before{
		content: "";
		display: block;	
		padding-top: 50%; /* ratio of 2x:1y*/
	}

	.tablet-ratio-3-1:before{
		content: "";
		display: block;	
		padding-top: 33.333333%; /* ratio of 3x:1y*/		
	}

	.tablet-ratio-6-1:before{
		content: "";
		display: block;	
		padding-top: 16.666666667%; /* ratio of 3x:1y*/		
	}
}

@media (max-width: 460px) {

	.mobile-ratio-2-3:before{
		content: "";
		display: block;	
		padding-top: 66.666666667%; /* ratio of 2x:3y*/
	}

	.mobile-ratio-1-1:before{
		content: "";
		display: block;	
		padding-top: 100%; /* ratio of 1x:1y*/
	}

	.mobile-ratio-3-1:before{
		content: "";
		display: block;	
		padding-top: 33.333333%; /* ratio of 3x:1y*/		
	}
}