*, *::before, *::after {
	box-sizing: border-box;
}
body {
	font-weight: 400;
	color: #949393;
	margin: 0;
}
a, button {
	transition: 0.3s all ease-out;
}
a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	color: #111;
}
.row {
	display: flex;
	min-height: 100%;
}
.container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 560px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 170px 0;
}
#body-wrap {
	position: relative;
	height: 100vh;
	overflow: auto;
}
#body-wrap .col-8 {
	width: 70%;
}
#body-wrap .col-4 {
	position: relative;
	top: -13px;
	width: 30%;
	min-height: calc(100vh + 13px);
	margin-bottom: -13px;
	overflow: visible;
}
header#header {
	margin-bottom: 80px;
}
.logo > img {
	width: auto;
	height: 159px;
}
.main-content {
	color: #666;
}
.main-content h1 {
	margin-bottom: 0;
	font-size: 1.5em;
	font-weight: 400;
}
.main-content p {
	font-size: 1.4em;
	width: 76%;
}
#footer .social-links {
	padding-top: 20px;
}
#footer .social-links ul {
	display: flex;
	list-style: none;
	padding: 0;
}
#footer .social-links li {
	padding-right: 20px;
}
#footer .social-links ul a {
	font-size: 1.6em;
	color: #626262;
	text-decoration: none;
}
#footer .social-links ul a:hover {
	color: #111;
}
.copyright p {
	display: flex;
	flex-direction: row;
	color: #626262;
}
.copyright span:not(:first-child):before {
	content: '\00B7';
	margin: 0 6px;
}
.sideimg {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
}

@media (max-width: 999px) {
	.container {
	    padding: 120px 70px;
	}
	#body-wrap .col-4 {
	    z-index: -1;
	}
	.logo > img {
		height: 135px;
	}
	.copyright p {
		flex-direction: column;
		gap: 3px;
	}
	.copyright span:not(:first-child):before {
		display: none;
	}
}

@media (max-width: 740px) {
	#body-wrap .col-8 {
	    width: 100%;
	}
	.container {
		width: 100%;
		margin: 0;
		padding: 120px 70px 120px 110px;
	}
	#body-wrap .page-title {
	    width: 98%;
	}
	#body-wrap .col-4 {
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		margin-left: 0;
		opacity: 0.1;
	}
	.main-content h1 {
		font-size: 1.3em;
	}
	.main-content p {
		font-size: 1.2em;
	}
}

@media (max-width: 540px) {
	.row {
		height: auto;
	}
	.container {
		padding: 70px 30px 70px 75px;
	}
	.logo > img {
		position: relative;
		top: 30px;
		height: 121px;
	}
	#body-wrap .col-4 {
		opacity: 0.2;
	}
}

@media (max-width: 385px) {
	.container {
		padding: 70px 30px 70px 56px;
	}
}

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
	#body-wrap .col-4 {
		top: 0;
		min-height: 100vh;
		margin-bottom: 0;
	}
}