#base {
	background-color: $color__navy-light;
	color: $color__offwhite;

	.wrap {
		max-width: 795px;
		position: relative;

		&::before,
		&::after {
			content: "";
			display: table;
		}

		&::after {
			clear: both;
		}
	}

	h2 {
		color: $color__teal-light;
	}

	.theme-type {
		padding-top: 95px;
	}

	.theme-text {
		width: 45%;
	}

	.theme-image {
		width: 50%;

		.large-robot {
			left: 0;
			height: 120%;
			width: 40%;
		}

		.type-layout {
			float: right;
			max-height: 90%;
			width: auto;
		}
	}
}

#types {
	background-color: $color__navy;
	color: $color__offwhite;
	overflow: hidden;
	padding-top: 40px;

	a {
		color: $color__offwhite;
	}

	h2 {
		color: $color__teal-light;
	}

	& > .wrap {
		max-width: 1400px;
		padding-left: 35px;
		padding-right: 35px;
		position: relative;

		&::before,
		&::after {
			content: "";
			display: table;
		}

		&::after {
			clear: both;
		}
	}

	.types-row {
		padding-bottom: 0;
		padding-top: 0;

		&:last-of-type {
			padding-bottom: 60px;
		}
	}
}

.theme-type {
	position: relative;

	&::before,
	&::after {
		content: "";
		display: table;
	}

	&::after {
		clear: both;
	}
}

.theme-image {
	float: left;
	position: relative;
	width: 44%;

	.type-layout {
		max-height: 90%;
		max-width: 100%;
		position: relative;
	}

	.large-robot {
		bottom: -20px;
		height: 110%;
		left: -25%;
		position: absolute;
	}

	.mobile-robot {
		display: none;
	}
}

.theme-text {
	float: right;
	width: 52%;

	p {
		margin-top: 0;
	}
}

/**
 * Media Queries
 */

@include desktop {
	#types .types-row {
		padding-bottom: 3em;

		.theme-type {
			width: 47%;

			&:nth-of-type(1) {
				float: left;
			}

			&:nth-of-type(2) {
				float: right;
			}
		}
	}

	.types-row:nth-of-type(even) {
		.theme-image {
			float: right;
		}

		.theme-text {
			float: left;
		}

		.large-robot {
			filter: FlipH;
			-ms-filter: "FlipH";
			left: auto;
			right: -25%;
			-webkit-transform: scaleX(-1);
			-moz-transform: scaleX(-1);
			-o-transform: scaleX(-1);
			transform: scaleX(-1);

		}
	}
}

@media only screen and (max-width: 1460px) {
	.theme-image .large-robot {
		left: -10%;
	}

	.types-row:nth-of-type(even) .large-robot {
		right: -10%;
	}
}

@include laptop-max {
	// things get pretty crowded on 13" screens, so here's some small tweaks for that
	.theme-image {
		width: 40%;

	}
	.theme-text {
		width: 56%;
	}

	.types-row:nth-of-type(even) .large-robot {
		filter: FlipH;
		-ms-filter: "FlipH";
		left: auto;
		-webkit-transform: scaleX(-1);
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		transform: scaleX(-1);

	}
}



@include desktop-max {
	#types .wrap {
		padding-left: 20px;
		padding-right: 20px;
	}

	#types .theme-type {
		float: none;
		padding-bottom: 4em;
		width: 100%;

		.large-robot {
			filter: none;
			-ms-filter: none;
			left: -5%;
			max-height: 90%;
			-webkit-transform: none;
			-moz-transform: none;
			-o-transform: none;
			transform: none;
		}

		.type-layout {
			float: right;
		}

		&:nth-of-type(even) {
			.theme-image {
				float: right;
			}

			.theme-text {
				float: left;
			}

			.large-robot {
				filter: FlipH;
				-ms-filter: "FlipH";
				left: auto;
				right: -5%;
				-webkit-transform: scaleX(-1);
				-moz-transform: scaleX(-1);
				-o-transform: scaleX(-1);
				transform: scaleX(-1);
			}

			.type-layout {
				float: left;
			}
		}
	}
}


@include mobile {

	#base {
		h2,
		.theme-text {
			text-align: center;
		}

		p {
			text-align: left;
		}
	}

	#base .theme-text,
	.theme-text {
		float: none;
		width: 100%;
	}

	.theme-type-title,
	.theme-text {
		text-align: center;
	}

	.theme-text p {
		text-align: left;
	}

	#base .theme-image,
	.theme-image {
		background-color: rgba(80, 158, 163, 0.8);
		border-radius: 150px;
		float: none !important;
		height: 150px;
		overflow: hidden;
		margin: 0 auto 10px;
		position: relative;
		width: 150px;

		.standard-robot {
			display: none;
		}

		.mobile-robot {
			display: block;

			svg {
				bottom: 0;
				height: 150px;
				left: 0;
				margin: 0;
				max-height: 100%;
				width: 150px;
			}
		}
	}

	#types {
		.theme-type {
			padding-bottom: 2em;
		}
		.types-row:last-of-type {
			padding-bottom: 0;
		}
	}

	.download.button {
		display: none;
	}
}