/* RWD-Flex */
/* Copyright 2018 Andrew Porter */

* {
	box-sizing: border-box;
}

:root {
	width: 100%;
	height: 100%;
}

body {
	display: -webkit-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flexbox;
	display: flex;
	
	margin: 0;
	min-width: inherit;
	min-height: inherit;
	width: auto;
	height: auto;

	flex-flow: column nowrap;
}

/* Desktop */
@media only screen and (min-width: 768px){

	.row {
		display: -webkit-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flexbox;
		display: flex;
		flex-flow: row nowrap;
	}
	
	.row.reverse {
		flex-direction: row-reverse;
	}
	
	.column {
		display: -webkit-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flexbox;
		display: flex;
		flex-flow: column nowrap;
	}
	
	.column.reverse {
		flex-direction: column-reverse;
	}
	
	.wrap {
		flex-wrap: wrap;
	}
	
	.wrap-reverse {
		flex-wrap: wrap-reverse;
	}
	
	div.image {
		min-width: 0;
		min-height: 0;
	}
	
	div.image > img {
		max-width: 100%;
		max-height: 100%;
		height: auto;
	}

	img {
		object-fit: contain;
		-webkit-object-fit: contain;
		-o-object-fit: contain;	
	}
	
	.dummy {
		flex: 1 0 auto;
		visibility: hidden;
	}

}

/* Mobile */
@media only screen and (max-width: 768px) {
	
	.row {
		display: -webkit-flex;
		display: flex;
		flex-flow: row wrap;
		width: 100%;
		flex: 0 0 auto;
	}
	
	.column {
		flex: 0 1 auto;
		flex-grow: 1;
	}
	
	div.image {
		min-width: 0;
		min-height: 0;
	}

	div.image > img {
		max-width: 100%;
		max-height: 100%;
		height: auto;
	}

	img {
		object-fit: contain;
		-webkit-object-fit: contain;
		-o-object-fit: contain;	
	}
	
	.dummy {
		display: none;
	}
	
}