@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
 
* {
	box-sizing: border-box;
}
 
body {
	 font-family: 'Source Sans Pro', sans-serif;
	 font-weight: 300;
	 font-size: 18px;
	 margin: 8px;
}

h1 {
	 font-weight: 400;
	 text-align: center;
	 font-size: 46px;
	 color: #5c6380;
	 margin-top: 0.7em;
	 margin-bottom: 0.7em;
}

h2 {
	 font-weight: 400;
	 text-align: center;
	 font-size: 34px;
	 color: #878787;
}

h3 {
	 font-weight: 400;
	 text-align: center;
}

h2, h3 {
	 margin-top: 1.0em;
	 margin-bottom: .5em;
}

h6 {
	text-align: center;
	font-weight: 400;
	font-size: 14px;
}

a {
	color: #3795ae;
	text-decoration: inherit;
}

a:hover {
	color: #775c6d;
}

p {
	margin: 0;
}

p + p {
	margin-top: 1em;
}

.top-bar {
	position: relative;
	width: 100%;
	height: 32px;
	font-size: 18px;
	font-weight: 400;
}

.enlightware-text {
	position: absolute;
	color: #f2643e;
	letter-spacing: .8px;
	left: 64px;
	top: 4px;
}

.languages {
	position: absolute;
	right: 16px;
	top: 4px;
}

.enlightware-logo {
	width: 32px;
	height: 32px;
	margin-left: 16px;
}

@media (max-width: 320px) {
	.top-bar {
		height: 50px;
	}
	.enlightware-text {
		left: initial;
		right: 15px;
	}
	.languages {
		top: 22px;
	}
}

@media (min-width: 1024px) {
	h1 {
		margin-top: 1em;
		margin-bottom: 1em;
	}
}

.logo {
	max-width: 256px;
	min-width: 192px;
	max-height: 72px;
	display: block;
	border: 0;
}

.logo-box {
	margin: 16px;
}

.logo-container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.sketch {
	width: calc(100% + 48px);
	margin-left: -24px;
	margin-right: -24px;
}

.banner {
	width: 100%;
	margin-bottom: 8px;
}

.banner-50 {
	max-width: 584px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.form-size {
	display: block;
	width: 100%;
	margin: 16px auto;
}

.form-feedback {
	text-align: center;
	font-weight: 400;
	width: 0;
	height: 0;
	overflow: hidden;
	margin: 0;
}

.form-feedback-success {
	color: #6eb66e;
}

.form-feedback-failure {
	color: salmon;
}

@keyframes showElement {
	from {
		width: auto;
		height: auto;
		margin: 24px auto 72px;
	}
}

@keyframes hideElement {
	from {
		width: 0;
		height: 0;
		overflow: hidden;
		padding: 0;
		margin: 0;
	}
}

.form-input {
	max-width: 35em;
	border: 1px solid #ddd;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.06); 
	border-radius: .1875rem;
	padding: .425rem .425rem;
	border-left: 3px solid;
}
.form-input:invalid {
	border-left-color: salmon;
}

.form-input:valid {
	border-left-color: palegreen;
}

.form-button {
	display: block;
	padding: 7px 20px;
	margin: 0 auto 16px;
	background: #fff;
	color: #3795ae;
	border: 1px solid #3795ae;
	border-radius: 3px;
	cursor: pointer;
	font-weight: 400;
}
.form-button:hover {
	background: #3795ae;
	color: #fff;
}


/* from https://www.w3schools.com/css/css_rwd_grid.asp */

/* For mobile phones: */
[class*="col-"] {
	width: 100%;
	float: left;
	padding: 12px 16px;
}

.team-photoname {
	width: calc(100% - 	32px);
	float: left;
	margin: 0 16px 16px 16px;
	text-align: right;
}

.team-photoname > a:focus {
	outline: none; 
}

.team-photo {
	width: 152px;
	float: left;
	margin-right: 24px;
}

.team-bio {
	width: calc(100% - 	32px);
	float: left;
	margin: 0 16px;
}

/*.committee-photoname {
	width: calc(100% - 	32px);
	float: left;
	margin: 0 16px 16px 16px;
	text-align: right;
}*/

.committee-photoname {
/* 	width: calc(33% - 32px); */
	width: 192px;
	margin: 16px 8px 16px 8px;
	text-align: center;
}

.committee-photoname > a {
	color: black;
}

.committee-photoname > a:focus {
	outline: none; 
}

/*.committee-photo {
	width: 152px;
	float: left;
	margin-right: 24px;
}*/

.committee-photo {
	display: block;
	width: 152px;
	float: none;
	margin: 0 auto 8px auto;
}


@media only screen and (min-width: 768px) {
	/* For desktop: */
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
	[class*="col-"] {
		padding-top: 8px;
		padding-bottom: 8px;
	}
	
	.sketch {
		width: calc(100% + 16px);
		margin-left: -8px;
		margin-right: -8px;
	}

	.team-photoname {
		width: 328px;
		margin: 0 16px;
	}

	.team-bio {
		width: calc(100% - 384px);
		margin: 0 16px 0 8px;
	}
	
	/*.committee-photoname {
		width: calc(33% - 32px);
		margin: 0 16px 0 16px;
		text-align: center;
	}

	.committee-photo {
		display: block;
		width: 152px;
		float: none;
		margin: 0 auto 8px auto;
	}*/
}

.row {
	max-width: 1200px;
	margin: 0 auto;
}

.row::after {
	content: "";
	clear: both;
	display: table;
}

.row-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.video {
	margin-top: 16px;
	width: 100%;
	height: 100%;
}