body {
	/* background-color: #000000; */
	overflow-x: hidden;
	font-family: arial,sans-serif;
	margin: 0;
	padding: 0;
	color: black;
}

section#portfolio-items {
   border-top: 1px solid gray;
   padding-top: 20px;
}

article.project {
	border-bottom: 1px solid gray;
	padding-bottom: 20px;
	margin-bottom: 20px;
	/* display: flex; */
	width: 100%;
}

article img.thumb {
	height: auto;
	max-height: 200px;
	width: 300px;
}

article img.thumb.pdf {
	height: auto;
	max-height: 200px;
	width: auto;
}

article.paper .thumbnail {
   width: auto;
   text-align: center;
}

article.book .thumbnail {
   width: auto;
   text-align: center;
   padding: 0 83px;
}

article.book img {
   border: 1px solid #ededed;
}

.project .project-description {
   margin-left: 20px;
   margin-right: 20px;
   line-height: 22px;
   font-size: 16px;
   width: auto;
}

h3.project-name {
   color: black;
   font-weight: bold;
   font-size: 20px;
   padding: 0;
   margin: 0 0 5px 0;
   line-height: 28px;
}

.desc-txt {
	padding: 5px 0;
	color: #313131;
}

.authors {
   font-size: 14px;
   margin-top: 4px;
}

.thumbnail {
	border: 0px solid transparent;
	box-shadow: 0;
	display: none;
}

img#portrait {
	display: inline;
	margin-right: 1em;
	float: left;
	border-radius: 4px;
}

section#content {
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
}

ul#portfolio-filter {
   list-style-type: none;
   margin: 1em 0;
   padding: 0;
   text-align: center;
   clear: both;
}

ul#portfolio-filter a {
   display: inline-block;
   background-color: #424242;
   padding: 5px 10px;
   border-radius: 4px;
   font-size: 13px;
}

ul#portfolio-filter a {
   text-decoration: none;
   color: white;
   margin-right: 15px;
}

ul#portfolio-filter a:last-of-type {
   margin-right: 0;
}

ul#portfolio-filter a.active {
   background-color: #C31E3D;
}

ul#portfolio-filter a:hover {
   opacity: 0.85;
   color: white;
}

ul#portfolio-filter .active {
   color: white;
}

a.hkslogo {
   text-decoration: none !important;
   border-bottom: 0 !important;
}

footer {
   text-align: center;
   color: #313131;
   font-size: 12px;
   margin: 0 0 20px 0;
}

.projDate {
   float: right;
   font-size: 13px;
   color: black;
}

.project-name a {
   text-decoration: none;
   color: black;
   border-bottom: 1px solid gray;
}

.project-name a:hover {
   color: black;
   border-bottom: 1px dotted #313131;
}

header#header {
   display: flex;
   margin-bottom: 20px;
   max-width: 1200px;
   margin-right: auto;
   margin-left: auto;
}

header #halfLeft {
   background-image: url(../images/PLCportrait.jpg);
   height: 800px;
   background-repeat: no-repeat;
   background-position: center top;
   background-size: cover;
   width: 50%;
}

header #halfRight {
   color: black;
   width: 50%;
   padding: 25px;
}

header #halfRight p {
   font-size: 16px;
   line-height: 22px;
}

header #hdrName {
   font-size: 54px;
   font-weight: bold;
   width: auto;
   padding: 0;
   margin: 0;
}

#portfolio {
   margin: 0;
}

header img#logo {
   height: 80px;
   width: auto;
   float: right;
   position: absolute;
   top: 25px;
   right: 20px;
}

p a, p a.visited, .desc-txt a {
   color: black;
   text-decoration: none;
   border-bottom: 1px solid black;
}

p a:hover, .desc-txt a:hover {
   color: black;
   border-bottom: 1px dotted #313131;
}

img#hks {
   max-width: 250px;
}

.btnSep {
    padding: 0 12px;
    color: gray;
    font-size: 22px;
    vertical-align: unset;
}

.doctype {
   margin-bottom: 5px;
   font-size: 14px;
}

a.twitter-follow-button {
    background-color: #059FF5;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: white;
	text-decoration: none;
}

a.twitter-follow-button:hover {
	text-decoration: underline;
}

a.twitter-follow-button:focus {
	outline: 1px dotted gray;
}

a.filter {
   margin-bottom: 5px;
}

a.filter:focus {
   outline: 1px dotted gray;
}

.twitter-follow-button svg {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 5px;
    vertical-align: bottom;
    height: 14px;
}

ul#portfolio-filter a:first-of-type {
   margin-right: 0;
}

/* BOOKS ROW */

#booksWrapper {
   text-align: center;
}

.bookRow {
    display: inline-block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

img.book {
    height: 170px;
    width: 110px;
	border: 1px solid lightgray;
	margin-top: 5px;
	margin-bottom: 5px;
}

.bookLnk {
    margin-right: 10px;
    height: 170px;
    width: 110px;
}

a.bookLnk:focus img, a.bookLnk:hover img {
   border: 1px solid #424242;
}

#photosWrapper {
   clear: both;
   padding: 15px;
   text-align: center;
   margin-top: 20px;
   margin-bottom: 20px;
   border-top: 1px solid gray;
   border-bottom: 1px solid gray;
}

#photosWrapper img {
   height: 120px;
   width: auto;
   margin: 10px;
}

#corr {
   display: inline-block;
   margin-left: 20px;
   color: black;
   font-size: 14px;
}
 
@media only screen and (max-width: 1200px) {

	header #hdrName {
	   font-size: 32px;
	}
	
	header #halfRight p, .project .project-description {
		font-size: 15px;
	}
	
	#portfolio {
	   margin: 0 15px;
	}

}

@media only screen and (max-width: 900px) {

	header#header {
	   display: block;
	}
	
	header #halfLeft {
	   width: 100% !important;
	   height: 300px;
	   background-image: url(../images/plc_mobile.png);
	}
	
	header .hdrHalf#halfRight {
		width: calc(100% - 30px) !important;
    }
	
	header #halfRight {
	   padding: 15px;
	}
	
	.projDate {
		float: left;
		margin-right: 20px;
	}
	
	.doctype {
		font-size: 13px;
	}
	
}


@media only screen and (max-width: 760px) {

	article.project {
		display: block;
	}

	.project .project-description {
		margin-left: 0px;
		margin-top: 5px;
	}
	
	article.paper .thumbnail {
	   width: auto;
	   text-align: left;
	   padding: 0;
	}

	header #hdrName {
	   font-size: 28px;
	}
	
	#corr {
	   display: block;
	   margin-left: 0;
	   margin-top: 20px;
	}
	
}

@media only screen and (max-width: 450px) {

	article img.thumb {
		height: auto;
		max-height: none;
		width: 100%;
	}
	
}