.content {
	width: calc(100vw - 230px - 90px);
	height: 100vh;
	background-color:lighten($clouds, 5%);
	color: transparentize($black, 0.3);
	float: left;
	padding: 20px;
	padding-top: 90px;
	transition: all 0.3s ease-in-out;
	word-wrap: break-word;
	overflow: hidden;
	opacity: 1;

	@include breakpoint(0, 1024px) {
		width: calc(100vw - 25px - 90px);
	}
	@include breakpoint(xs) {
		width: 100%;
	}
	&.active {
		opacity: 0.7;
	}
	&-inner {
		display: block;
		position: relative;
	}
	&-full {
		width: 100%;
	}
	&-stretch {
		padding: 0;
		padding-top: 70px;
	}
	&-inner {
		padding: 0 10px;
	}
	&-flex {
		width: 100%;
		height: calc(100vh - 100px);
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	&-loading {
		position: fixed;
		width: 100%;
		height: 100vh;
		z-index: 320;
		background-color: $white;
		display: flex;
		align-items: center;
		justify-content: center;

		.loading-bar {
			overflow: hidden;
		}
	}
}