.container {
	max-width: 1600px;
	margin: 0 auto;
}

.group { @include clearfix; }

img.alignleft { 
	display: block;
	margin: 1em auto;

	@media only screen and (min-width:800px) {
		float: left;
		margin: 0 1rem 1rem 0;
	}
}
img.alignright { 
	display: block;
	margin: 1em auto;

	@media only screen and (min-width:800px) {
		float: right; 
	}
}

/*
	Flex Box

 */
.flex-box {
	@include clearfix;

	display: flex;
	flex-direction: row; // row, row-reverse, column, column-reverse
	flex-wrap: wrap; // nowrap, wrap, wrap-reverse
	justify-content: center; // flex-start, flex-end, center, space-between, space-around (for horizontal spacing of all items)
	align-items: center; // flex-start, flex-end, center, stretch, baseline (for vertical alignment of all individual items)
	align-content: stretch; // flex-start, flex-end, center, stretch, space-between, space-around (for horizontal spacing of all items)

	.item {
		/*
			flex: 1 1 8em; // shorthand of flex-grow, flex-shrink, flex-basis
			flex-grow: 1; // number, 0 default
			flex-shrink: 1; // number, 0 default
			flex-basis: 8em; // default size before space is distributed
			align-self: auto; // This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
		 */
		flex: 1 1 12em; // shorthand of flex-grow, flex-shrink, flex-basis
	}
}


/* .googlemap */
.googlemap { position: relative; height: 0; padding-bottom: 56.25%; margin-bottom: 20px; max-width: 100%; height: auto; overflow: hidden; border: 1px solid #555; }
.googlemap iframe, 
.googlemap object, 
.googlemap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* embedresponsively */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, 
.embed-container object, 
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }