.lazyload, .lazyloaded{
	width: 100%;
}
.buttons {
	position: absolute;
	display: flex;
	flex-direction: column;
}
.buttons.left {
	left: 0;
	align-items: flex-start;
}
.buttons.right {
	right: 0;
	align-items: flex-end;
}
.button {
	position: relative;
	display: flex;
	align-items: center;
	background-color: #B48669;
	color: transparent;
	white-space: nowrap;
	padding: .5vmin 2vmin;
	margin: 1vmin 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transition: color 0.3s ease-in-out, width 0.3s ease-in-out, background-color 0.3s ease-in-out;
	-moz-transition: color 0.3s ease-in-out, width 0.3s ease-in-out, background-color 0.3s ease-in-out;
	-o-transition: color 0.3s ease-in-out, width 0.3s ease-in-out, background-color 0.3s ease-in-out;
	-ms-transition: color 0.3s ease-in-out, width 0.3s ease-in-out, background-color 0.3s ease-in-out;
	transition: color 0.3s ease-in-out, width 0.3s ease-in-out, background-color 0.3s ease-in-out;
	overflow: hidden;
}
.button:hover {
	background-color: #9B5D37;
}
.left .button {
	border-right: 1px solid #fff;
}
.right .button {
	border-left: 1px solid #fff;
}
.button.button1 {
	font-size: 24pt;
	width: 24pt;
}
.button.button2 {
	font-size: 16pt;
	width: 16pt;
}
.icon1, .icon2 {
	color: #fff;
	-webkit-transition: color 0.3s ease-in-out, margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
	-moz-transition: color 0.3s ease-in-out, margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
	-o-transition: color 0.3s ease-in-out, margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
	-ms-transition: color 0.3s ease-in-out, margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
	transition: color 0.3s ease-in-out, margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
}

/*********** CONTENT ***********/
.typeList {
	position: relative;
   	width: 100%;
}
.typeElement {
	position: relative;
	width: 100%;
}
.noDescriptionDisplay {
	position: relative;
}
.noDescriptionButtons {
	top: 10%;
}
.defaultDisplay {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Template CSS */

.twoColumnDisplay {
	display: flex;
	flex-direction: column;
	position: relative;
}
.twoColumnDisplay.reverse {
	flex-direction: column-reverse;
}
.twoColumnImage {
	width: 50%;
	margin: 0 auto;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.twoColumnImage a {
	font-size: 0;
}
.columnDescriptions {
	display: flex;
}
.columnDescription {
	position: relative;
	width: 100%;
	text-align: center;
}
.columnImages {
	display: flex;
	height: 100%;
	width: 100%;
}
.descCentered {
	position: absolute;
	color: white;
}
div.twoColumnImage div.desc {
	font-size: 44pt;
}

/* Hack to make space-between behave like space-evenly on unsupported browsers */
.defaultDisplay::before, .defaultDisplay::after {
	content: '';
}
.defaultDisplay.reverse {
	flex-direction: row-reverse;
}
.defaultContainer {
	width: 55%;
}
.defaultDescription {
	width: 35%;
}
.defaultButtons {
	top: 50%;
	transform: translateY(-50%);
}
.twoImagesDisplay {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* Hack to make space-between behave like space-evenly on unsupported browsers */
.twoImagesDisplay::before, .twoImagesDisplay::after {
	content: '';
}
.twoImagesDisplay.reverse {
	flex-direction: row-reverse;
}
.twoImagesDescription {
	width: 100%; /* Fixes viewing issue in IE */
	min-height: 1px; /* Allows proper re-sizing in IE */
	margin-bottom: 2vmin;
}
.twoImagesContainer {
	width: 45%;
}
.twoImagesContainer.flex {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.twoImagesButtons {
	top: 50%;
	transform: translateY(-50%);
}
.twoImagesSmallImage {
	width: 20%;
	height: 100%; /* Fixes viewing issue in IE */
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.twoImagesSmallImage:hover {
	transition: all .1s ease-in-out;
	transform: scale(1.1);
}
.twoImagesSmallImage:focus-within {
	transition: all .1s ease-in-out;
	transform: scale(1.1);
}
.twoDescDisplay {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* Hack to make space-between behave like space-evenly on unsupported browsers */
.twoDescDisplay::before, .twoDescDisplay::after {
	content: '';
}
.twoDescDisplay.reverse {
	flex-direction: row-reverse;
}
.twoDescDescriptions {
    width: 55%;
}
.twoDescDescription {
	margin-bottom: 2vmin;
}
.twoDescContainer {
	width: 35%;
}
.twoDescButtons {
	top: 50%;
	transform: translateY(-50%);
}
.calculatorDisplay {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* Hack to make space-between behave like space-evenly on unsupported browsers */
.calculatorDisplay::before, .calculatorDisplay::after {
	content: '';
}
.calculatorDisplay.reverse {
	flex-direction: row-reverse;
}
.calculatorImage {
	width: 35%;
}
.calculatorContainer {
	width: 35%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.calculatorDescription {
	text-align: center;
	margin-bottom: 2vmin;
	width: 100%;
}
.calculatorScript {
	display: flex;
	background-color: #d3d3d3;
	padding: 2vmin;
	width: 100%;
}

/*********** RESPONSIVE ***********/
@media only screen and
	(min-width: 0px) and
	(max-width: 1366px)
{
	.buttons {
		max-width: 300px;
		margin: 0 auto;
	}
	.button {
		color: white;
		background-color: #9B5D37;
		white-space: inherit;
		text-align: center;
	}
	.button.button1 {
		font-size: 18pt;
		width: auto;
	}
	.button.button2 {
		font-size: 12pt;
		width: auto;
	}
	.icon1, .icon2 {
		display: none;
	}
	.twoImagesButtons {
		position: relative;
		transform: none;
	}
	.twoImagesButtons .button {
		border: 1px solid #fff;
	}
	.twoImagesButtons.left {
		align-items: center;
	}
	.twoImagesButtons.right {
		align-items: center;
	}
	.twoDescButtons {
		position: relative;
		transform: none;
	}
	.twoDescButtons .button {
		border: 1px solid #fff;
	}
	.twoDescButtons.left {
		align-items: center;
	}
	.twoDescButtons.right {
		align-items: center;
	}
	/* Template CSS */
		div.desc {
		font-size: 25pt;
	}
}

@media only screen and
	(min-width : 0) and
	(max-width : 640px)
{
	.buttons {
		max-width: 100%;
	}
	.button {
		display: table;
		margin: 0;
	}
	.button.button1 {
		font-size: 14pt;
	}
	.button.button2 {
		font-size: 14pt;
	}
	.noDescriptionImage {
		width: 95%;
		margin: 0 auto;
	}
	.noDescriptionButtons {
		position: relative;
		flex-direction: row;
		justify-content: space-between;
		margin: 4vmin 0 2vmin;
	}
	/* Hack to make space-between behave like space-evenly on unsupported browsers */
	.noDescriptionButtons::before, .noDescriptionButtons::after {
		content: '';
	}
	.noDescriptionButtons .button {
		border: 1px solid #fff;
	}
	.defaultDisplay {
		flex-direction: column;
	}
	.defaultDisplay.reverse {
		flex-direction: column;
	}
	.defaultContainer {
		width: 95%;
	}
	.defaultDescription {
		width: 95%;
		margin-bottom: 2vmin;
	}
	.defaultButtons {
		position: relative;
		transform: none;
		flex-direction: row;
		justify-content: space-between;
		margin: 4vmin 0;
	}
	/* Hack to make space-between behave like space-evenly on unsupported browsers */
	.defaultButtons::before, .defaultButtons::after {
		content: '';
	}
	.defaultButtons .button {
		border: 1px solid #fff;
	}
	.twoImagesDisplay {
		flex-direction: column;
	}
	.twoImagesDisplay.reverse {
		flex-direction: column;
	}
	.twoImagesContainer {
		width: 95%;
	}
	.twoImagesSmallImage {
		display: none;
	}
	.twoImagesButtons {
		flex-direction: row;
		justify-content: space-between;
		margin: 4vmin 0;
	}
	/* Hack to make space-between behave like space-evenly on unsupported browsers */
	.twoImagesButtons::before, .twoImagesButtons::after {
		content: '';
	}
	.twoDescDisplay {
		flex-direction: column;
	}
	.twoDescDisplay.reverse {
		flex-direction: column;
	}
	.twoDescContainer {
		width: 95%;
	}
	.twoDescDescriptions {
		width: 95%;
	}
	.twoDescButtons {
		flex-direction: row;
		justify-content: space-between;
		margin: 4vmin 0;
	}
	/* Hack to make space-between behave like space-evenly on unsupported browsers */
	.twoDescButtons::before, .twoDescButtons::after {
		content: '';
	}
	.calculatorContainer {
		width: 70%;
	}
	.calculatorImage {
		display: none;
	}
	.blankDisplay {
		display: inline-block;
	}
	/* Template CSS */
	.columnImages {
		flex-direction: row;
	}
	.twoColumnImage {
		width: 100%;
		margin: 0 auto;
	}
	.columnDescription {
		padding: 0;
		color: white;
		background: transparent;
		text-align: center;
	}
	.columnDescription.dropShadow {
		box-shadow: none;
	}
}