:root {
	--wrap: 1120px;
	--mh: 1000px;
	--y: #fb09;
	--g: #0c8b74b2;
	--pad: 50px;
}

html,body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.2;
}

#bodyCss {
	font-family: Arial, Helvetica, sans-serif;
	background: #fff;
}

a {
	text-decoration: none;
	color: inherit;
}

sup {
	line-height: 1;
}

.wrapper {
	width: var(--wrap);
	margin: 0 auto;
}

#topbar {
	padding: 1rem 0 3.5rem;
	font-size: 0;
	background: #000; /* gradient green */
}

#main {
	position: relative;
	text-align: center;
	min-height: calc(100% - 10.5rem);
}

	#main .content {
		min-height: var(--mh);
		padding: 1rem;
	}

	.container {
		position: relative;
		width: 70%;
		margin: 0 auto;
		padding: 10px;
		background: var(--y);
		z-index: 10;
	}

		.details {
			padding: calc(var(--pad) + 10px) 10px;
			color: #fff;
			background: var(--g);
		}

		.details h2 em,
		.details h2 {
			display: inline-block;
			min-width: 15rem;
			margin: 1rem auto;
			padding: .65rem 1rem;
			font-style: italic;
			border: 1px solid #50a35d;
		}

		.details dl.twoCols {
			margin: 0;
			padding: 0 1rem .25rem;
			text-align: left;
			font-size: 1.2rem;
			line-height: 1.4;
		}

			dt,
			dd {
				display: inline-block;
				margin: .5rem auto;
				vertical-align: top;
			}

			dt {
				width: 35%;
				font-size: 1em;
			}

			dd {
				width: 63%;
				padding-left: 2%;
				font-size: .8em;
			}

	.x-large {
		font-size: 1.5em;
	}

	.large {
		font-size: 1.25em;
	}

	.med {
		font-size: inherit;
	}

	.text,
	.small {
		font-size: .75em;
	}

	.x-small {
		font-size: .65em;
	}

		.header {
			position: relative;
			font-size: 0;
			z-index: 10;
		}

			.header > div {
				display: inline-block;
				font-size: initial;
				vertical-align: top;
			}

		.header .logo,
		.header .profile-pic {
			width: 23%;
		}

			.logo img {
				width: 100%;
				height: auto;
			}

			.profile-pic img {
				width: calc(100% - 10px);
				height: auto;
			}

			.header > .heading {
				width: 54%;
				text-align: center;
				font-weight: bold;
				font-size: 1.55rem;
				line-height: 1;
				padding: 1rem 0;
			}

			.heading em {
				display: inline-block;
				padding: .5em;
				font-size: .55em;
				font-weight: normal;
			}

			.heading b {
				font-size: .7em;
				font-weight: 700;
			}

#bottombar {
	padding: 0 0 2rem;
	font-size: 0;
}	


.icn {
	display: inline-block;
	margin: -.2em .25em 0 0;
	width: 1.2em;
	height: 1.2em;
	font-style: normal;
	vertical-align: middle;
	background-image: url('../images/icons.png');
	background-repeat: no-repeat;
}

.icn.big {
	width: 5em;
	height: 5em;
}

	.icn-user {
		background-position: 0 0;
	}

	.icn-briefcase {
		background-position: -1.2em 0;
	}

	.icn-envelope {
		background-position: -2.4em 0;
	}

	.icn-phone {
		background-position: 0 -1.2em;
	}

	.icn-industry {
		background-position: -1.2em -1.2em;
	}

	.icn-globe {
		background-position: -2.4em -1.2em;
	}

	.icn-warning {
		background-position: 0 -10em;
	}

.footnote {
	padding: 1em 0 .5em;
	font-size: .85rem;
	text-align: center;
}

.notfound .heading {
	display: block;
	width: auto;
	padding: 1em 0;
}

	.notfound .message {
		width: 70%;
		margin: 0 auto;
	}

/* Pseudo */
#main .wrapper:before,
#main:before,
#main:after,
#topbar:before {
	content: '\00a0';
	font-size: 0;
	display: block;
}

	#topbar:before {
		height: 2rem;
		width: auto;
		background: #03672e;
	}

	#main .wrapper:before,
	#main:before,
	#main:after {
		position: absolute;
		width: 100%;
		z-index: 1;
	}

	#main:before {
		bottom: -2rem;
		height: 500px;
		background-image: url('../images/w1.png');
		background-position: center -90%;
	}

	#main:after {
		bottom: -2rem;
		height: 435px;
		background-image: url('../images/w2.png');
		background-position: center 0;
	}

	#main .wrapper:before {
		left: calc(50% - (var(--wrap) / 2));
		top: 0;
		width: var(--wrap);
		height: calc(100% + 2rem);
		background-image: url('../images/w3.png');
		background-position: left top;
	}


/* CSS 3 */
#main .content {
	box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.25);
}

#bodyCss {
	background-size: 100% auto;
}

#topbar {
	background: linear-gradient(90deg,#02672d 0%, #00451e 70%, #000 100%);
}

#main .wrapper:before,
#main:before,
#main:after {
	background-repeat: no-repeat;
	filter: brightness(50%) saturate(10) opacity(0.2);
	background-size: 100% auto;
}

	#main .wrapper:before {
		background-size: 125% 125%;
	}


	.container,
	.details {
		clip-path: polygon(0 var(--pad), 50% 0, 100% var(--pad), 100% calc(100% - var(--pad)), 50% 100%, 0 calc(100% - var(--pad)));
	}

	.details {
		text-shadow: 1px 2px 5px #0005;
	}

	.header img {
		box-shadow: 3px 5px 5px 0px rgba(0,0,0,0.5);
		-webkit-box-shadow: 3px 5px 5px 0px rgba(0,0,0,0.5);
		-moz-box-shadow: 3px 5px 5px 0px rgba(0,0,0,0.5);
	}

	.logo img {
		border-radius: 50%;
	}

	.profile-pic img {
		border-radius: .5rem;
		border: 5px solid white;
	}

	.details h2 {
		border-radius: 2rem;
		background: linear-gradient(0deg, #35a735 0%, #67d067 100%);
		box-shadow: inset 0 0 10px 0 #cf5b, 0 0 5px 3px #efc7;
	}

	.notfound .details h2 {
		padding: 5px 7px 7px 5px;
		font-weight: normal;
		background: #fff;
		border-radius: 3rem;
		border: unset;
		box-shadow: unset;
	}

	.notfound .details h2 > em {
		margin: 0;
		background: linear-gradient(90deg, #f3a004 0%, #ebcb42 100%);
		border-radius: 2rem;
		display: block;
		border: unset;
		box-shadow: 2px 2px 3px 0 #a16902;
	}


.icn {
	filter: drop-shadow(1px 1px 3px #0003);
	background-size: 300% 300%; /* 3x3 */
}

.clearFix:after {
	content: "\0020";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

@media only screen and (max-width: 1180px) {
	:root {
		--wrap: 95%;
		--mh: 100vh;
	}

	html, body {
		font-size: 3vw;
	}

	.container {
		width: 95%;
	}

	.header .heading {
		font-size: 1.1rem;
	}

	#main .wrapper:before {
		height: calc(100% + 2rem);
	}

	.details h2 em,
	.details h2 {
		min-width: 12rem;
		font-size: 1rem;
		padding: .25rem 1rem;
	}

	.icn {
		margin-right: .15em;
	}

	.details dl.twoCols {
		padding: 0;
		font-size: .85em;
	}

	.message {
		width: 90%;
	}

	.message p br {
		display: none !important;
	}
}

@media only screen and (max-width: 640px) {
	:root {
		--pad: 35px;
	}

	html, body {
		font-size: 3.5vw;
	}

	.header .heading {
		font-size: .85rem;
	}

	.heading em {
		font-size: .6em;
	}

	.notfound .logo {
		width: 35%;
	}

	.notfound .header .heading {
		font-size: 1.25rem;
	}

	.icn {
		margin-right: 0;
	}

	.details h2 em,
	.details h2 {
		margin: 1em 0 .5em;
	}

	dt, dd {
		margin: 0;
	}

	.twoCols dt {
		width: 28%;
		text-align: right;
		padding: .35em 2% 0 0;
		font-size: 1em;
	}

	br + strong {
		display: inline-block;
		margin-top: .5em;
	}

	.twoCols dd {
		width: 68%;
		padding: .35em 0 0 2%;
		font-size: 1em;
	}

	.notfound .message {
		width: 90%;
	}

	.header img {
		box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.5);
		-webkit-box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.5);
		-moz-box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.5);
	}
}