.id7-left-border, .id7-right-border {
    background: #3f4246;
}
		
.img {
	width: 200px;
	height: 200px;
	background-size: cover;
	border: 1px solid #ddd;
	box-shadow: 0 1px 1px rgba(0,0,0,.05);
	margin-left: auto;
	margin-right: auto;
	background-position: center;
	position: relative;
}

.panel {
	display: flex;
	padding: 15px;
	background: linear-gradient(135deg, #fff 70%, rgba(216,239,233,0.7));
}

.roles {
	flex: 3 3 auto;
	display: flex;
	flex-direction: column;
}

.contact {
	flex: 2 2 auto;
	text-align: right;
	display: flex;
	flex-direction: column;
}

.person {
	vertical-align:top;
	min-height: 120px;
}
a.person {
	display: block;
	padding: 10px;
	text-decoration: none;
}
@media screen and (min-width: 768px) {
	a.person {
		width: 50%;
		display: inline-block;
	}
}

.personholder {
	background: #fafafa;
    border: 1px solid #ddd;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
	border-radius: 10px;
	min-height: 120px;
	padding: 10px;
}

.pthesis {
	font-size: 75%;
	font-style: italic;
	padding-top: 10px;
	padding-left: 110px;
}

.person .img {
	width: 100px;
	height: 100px;
	margin: 0 10px 0 0;
	float: left;
	border-radius: 5px;
}

.name {
	font-size: 150%;
	color: #8c6e96;
	font-weight: bold;
}

.letters {
	font-style: italic;
	margin-top: -0.5em;
	position: relative;
}

.photo {
	margin-right: 15px;
	position: relative;
}

.edit {
	opacity: 0.8;
	position: absolute;
	bottom: 0;
	right: 0;
	font-style: normal;
}

.room {
	flex: 1 1 auto;
}

.email {
	white-space: nowrap;
}

.job {
	font-size: 110%;
}

.pjob {
	font-size: 70%;
}

.cv {
	position: relative;
	font-size: 75%;
}

.ta, .textbox, .office_hour, .imp {
	position: relative;
}

.info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

#deets {
	display: flex;
	flex-direction: column;
}

#tabs ul {
	margin: 0;
	list-style-type: none;
	padding: 0;
	position: relative;
	z-index: 1;
}

#tabs li {
	display: inline-block;
	background: #eee;
	margin-bottom: -1px;
	border: 1px solid #ddd;
	padding: 2px 10px;
	color: rgba(0,0,0,0.6);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	cursor: pointer;
}

#tabs li.active {
	background: white;
	border-bottom-color: white;
	color: #383838;
}


#tabcontent {
	flex: 1 1 auto;
	display: flex;
}

.panel.content {
	flex: 1 1;
	flex-direction: column;
}

textarea {
	width: 100%;
	min-height: 10vw;
}

input {
	width: 100%;
}

.peeps>div {
	margin-bottom: 22px;
}


.cluster, .centre {
	font-size: 80%;
	margin-bottom: 3px;
	padding: 2px 5px;
	opacity: 0.5;
	display: none;
}

.cluster.active, .centre.active {
	display: block;
		opacity: 1;
}
.cluster.editable, .centre.editable {
	display: block;
	cursor: pointer;
	border: 1px solid #eee;
	border-radius: 5px;
	background: white;
}

.cluster.active.editable, .centre.active.editable {
	background: #5b3069;
	color: white;
}



#deets .col-sm-8 {
	display: flex;
	flex-direction: column;
}

#deets .row {
	display: flex;
	margin-bottom: 22px;
}


.keyword {
	display: inline-block;
	font-size: 70%;
	background: #e4dee7;
	border: 1px solid rgba(91,48,105,0.3);
	border-radius: 5px;
	padding: 2px 5px;
	margin-right: 3px;
	margin-bottom: 3px;
}

.person .keyword {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	margin-bottom: -2px;
}

.person .keywords {
	display: flex;
	flex-direction: column;
}

.imp .text {
	padding-bottom: 11px;
	border-bottom: 1px solid #eee;
	margin-bottom: 11px;
	
}

	.ta, .textbox {
		margin-bottom: 11px;
	}
@media screen and (max-width: 767px) {
	
	#person .panel {
		display: block;
	}
	
	.img {
		width: 25vw;
		height: 25vw;
	}
	
	.photo {
		float: left;
	}
	
	.panel:after {
		display: table;
		content: '';
		clear: both;
	}
	
	#deets {
		flex-direction: row;
	}
	
	#tabcontent .content {
		margin-bottom: -1px;
	}
	
	
	#tabs li {
		display: block;
		border-top-left-radius: 5px;
		border-top-right-radius: 0;
		border-bottom-left-radius: 5px;
		text-align: right;
		margin-right: -1px;
		padding: 2px 5px;
	}
	
	#tabs li.active {
		border-bottom-color: #ddd;
		border-right-color: white;
	}
	

	
	#deets .row {
		flex-direction: column;
	}
	
	#deets .col-sm-8 {
		margin-bottom: 22px;
	}
	
	#publications .col-sm-8 {
		order: 2;
	}
}

a.module {
	display: block;
	font-size: 80%;
	text-decoration: none;
}

.office_hour input {
	width: 15%;
}

.office_hour .notes input {
	width: 35%;
	background: rgba(255,255,255,0.6);
}

h4:first-child {
	margin-top: 22px;
}

.col-sm-8 > div:first-child > h4:first-child, .col-sm-8 > h4:first-child, .col-sm-4 > div:first-child > h4:first-child, .col-sm-4 > h4:first-child, #projects h4:first-child, #phd h4:first-child, #impact h4:first-child  {
	margin-top: 0;
}


.notes {
	padding: 2px 8px;
	background: #ccc;
	border-radius: 3px;
	border: 1px solid #aaa;
	font-size: 70%;
	margin-left: 5px;
}

.fa-times {
	cursor: pointer;
	color: red;
}

#add_office_hours {
	width: 100%;
}

.publications {
	display: flex;
	flex-direction: column;
}

.pub {
	margin-bottom: 11px;
	font-size: 90%;
	padding: 5px 10px 11px 10px;
	position: relative;
	border-bottom: 1px solid #ccc;
}

.pub.disabled {
	opacity: 0.5;
}

.pub a {
	text-decoration: none;
}

.pub input[type='checkbox']{
	width: 20px;
}

.publications .pub .img {
	display: none;
}

.showabs {
	font-size: 70%;
	background: #eee;
	white-space: nowrap;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px 5px;
	cursor: pointer;
}

.abstract {
	display: none;
	margin-left: 10px;
	padding: 5px 10px;
	font-size: 90%;
}

.btn-link {
	color: #8c6e96;
	padding: 2px 4px;
	margin-left: 5px;
}

.btn-link:hover {
	background: #eee;
	text-decoration: none !important;
}

.featuredpublications {
	display: flex;
	flex-direction: column-reverse;
}

.featuredpublications .makefeature, .featuredpublications input[type='checkbox'], .featuredpublications .showabs {
	display: none;
}

.featuredpublications .abstract {
	display: block;
}

.featuredpublications .img {
	margin-bottom: 11px;
	box-shadow: none;
	border: 0;
	background-size: contain;
    background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

.featuredpubsbit .edit, .featuredpubsbit {
	display: none;
}

.featuredpubsbit.editable .edit {
	display: block;
}

.edit.top {
	bottom: auto;
	top: 0;
}


.project {
	display: flex;
	padding-bottom: 22px;
	border-bottom: 1px solid #eee;
	margin-bottom: 22px;
	position: relative;
	align-items: center;
}



.project .img {
	margin-left: 0;
	margin-right: 22px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;

}

@media screen and (max-width: 767px) {
	.project {
		flex-direction: column;
	}
	
	.project .img {
		margin-right: 0;
		margin-bottom: 11px;
	}
}

.projectinfo {
	flex: 1 1 auto;
}

.projectinfo .title {
	margin-bottom: 
}

.projectinfo > * {
	position: relative;
}


#addproject {
	margin-bottom: 22px;
}

.phdstudent {
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 1px dotted #ddd;
}

.phdstudent:last-child {
	margin-bottom: 0;
	border-bottom: 0;
	padding-bottom: 0;
}

.supervision {
	position: relative;
	margin-left: 22px;
}

h4 .thesissuper.small {
	font-size: 65%;
	margin-top: 3px;
	font-style: italic;
}

.social_media {
	display: flex;
	justify-content: flex-end;
}

.extras {
	display: flex;
	flex-direction: column;
}

.links a {
	text-decoration: none;
	text-align: center;
}
.links a h6 {
	text-align: center;
	padding: 2px 5px;
	margin-bottom: 1px;
	margin-top: 1px;
	display: block !important;
}

.admin_roles {
	font-size: small;
	font-style: italic;
	color: #666;
	flex: 1;
}