/* ---------- */
/* BUTTONS */
.btn {
	width: 100%;
	margin-bottom: 15px;
	color: white;
	border-radius: 6px;
	border-style: none;
	font-family: "archivoNarrow","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: bold;
	font-size: 1em;
}

.btn--photo {
	margin-top: 15px;
	background-color: #B1810B;
}

.btn--facebook {
	background-color: #3b5998;
}

.btn--twitter {
	background-color: #1B95E0;
}

.btn.btn--facebook,
.btn.btn--twitter {
    cursor: default;
}

.btn.btn--facebook:hover,
.btn.btn--twitter:hover {
    color: #fff;
    cursor: default;
}
.imageContainer .mug-left {width:30%;}
.imageContainer .mug-right {width:30%;}


/* ---------- */
/* FLEXBOX */
.flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 15px;
}

.flex-item {
	display: flex;
	padding: 0;
}

.inner-content {
	background-color: lightgray;
	width: 100%;
}

#article-photo {
	width: 100%;
	text-align: center;
}

#article-photo .inner-content {
	display:flex;
    align-items: center;
}

#article-photo img {
	display:flex;
	margin: auto;
	max-width: 100%;
	max-height: 25em;
    object-fit: contain;
    /*flex: 1 0;*/
}

.flex-photo {
    flex-grow: 0;
    flex-shrink: 0;
}

#sidebar .inner-content {
	padding: 10px 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#sidebar {
	width: 100%;
}

@media screen and (min-width: 768px) {
	.flex-item {
		padding: 0 15px;
	}

	.flex-item:first-of-type {
	padding-left: 0;
	}

	.flex-item:last-of-type {
		padding-right: 0;
	}

	#article-photo {
		width: 65%;
	}

	#article-photo img {
		max-height: 38em;
	}

	#sidebar {
		width: 35%;
	}
}

@media screen and (min-width: 992px) {
	#article-photo img {
		max-height: 32em;
	}
}

@media screen and (min-width: 1200px) {
	#article-photo img {
		max-height: 35em;
	}
}

/* ---------- */
/* MISCELLANEOUS */
.container {
	padding: 0 15px;
}

.no-pad--xs {
	margin-left: -15px;
	margin-right: -15px;
}

.sidecontentbottom {
	/*margin-bottom: -30px;*/
}

@media screen and (min-width: 786px) {
	.no-pad--xs {
		margin-left: 0;
		margin-right: 0;
	}
}