/*
photogallery.css
================


FLOW
----
1) General
2) Media queries (responsive)
*/


/*
1) General
==========
*/

	.photos-row
	{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
			-ms-flex-direction: row;
				flex-direction: row;
		-webkit-box-pack: start;
			-ms-flex-pack: start;
				justify-content: flex-start;
		-webkit-box-align: center;
			-ms-flex-align: center;
				align-items: center;
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
		padding-bottom: 32px;
	}

	.listing-image
	{
		position: relative;
		height: 100%;
		-webkit-box-flex : calc(33.3333333333%);
			-ms-flex : calc(33.3333333333%);
				flex : calc(33.3333333333%);
		width: calc(33.3333333333%);
		max-width: calc(33.3333333333%);
		padding-left: 8px;
		padding-right: 8px;
		padding-top: 8px;
		padding-bottom: 16px;
	}


	.listing-image:hover
	{
		cursor: pointer;
		opacity : 0.9;
	}

	.listing-image .listing-image-inner
	{
		position : relative;
		overflow : hidden;
		width: 100%;
		padding-bottom: 100%;
		background-position: center;
		background-repeat: no-repeat;
	}


	.listing-image-left {
		padding-left: 0;
		padding-right: 16px;
	}

	.listing-image-right{
		padding-right: 0;
		padding-left : 16px;
	}
	

	/*
	display images as square or to-fit based on website settings
	*/
		.square {
			background-size: cover;
		}

		.original{
			background-size: contain;
		}


/*
2) Media queries (responsive)
=============================
*/


	@media screen and (max-width : 1200px)
	{

		.listing-image
		{
			-webkit-box-flex : calc(50%);
				-ms-flex : calc(50%);
					flex : calc(50%);
			width: calc(50%);
			max-width: calc(50%);
			padding: 16px;
		}

		.listing-image:nth-child(2n-1) {
			padding: 16px 16px 16px 0px!important;
		}

		.listing-image:nth-child(2n) {
			padding: 16px 0px 16px 16px!important;
		}

		.listing-image-left {
			padding-left: 16px;
			padding-right: 16px;
		}
		
		.listing-image-right{
			padding-right: 16px;
			padding-left : 16px;
		}


		.listing-image .listing-image-inner
		{
			padding-bottom: 100%;
		}

	}



	@media screen and (max-width : 568px)
	{
		.photos-row
		{
			max-width: 100%;
			width: 100%;
		}

		.listing-image
		{
			-webkit-box-flex : 100%;
				-ms-flex : 100%;
					flex : 100%;
			width: 100%;
			max-width: 100%;
		}

		.listing-image:nth-child(2n-1),
		.listing-image:nth-child(2n),
		.listing-image
		{
			padding: 16px 0px 16px 0px!important;
		}

	}