body {
	background-color: #000;
}

/* Header */

/*media screen default*/
	.header {
		padding: 20px;
		background-color: rgb(47, 47, 47);
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 10px;
		/*minimal width for different browsers*/
		min-width: 400px;
    	width: auto !important;
    	width: 400px;
	}
	
	.right {
		display: none;
	}

@media screen and (min-width: 800px) {
	.header {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 10px;
	}
	
	.right {
		display: inline;
	}
}

.name {
	font-family: "Arial", Arial, sans-serif;
	font-size: x-large;
	color: #efefef;
	margin-top: 0pt;
	margin-bottom: 0pt;
}

.title {
	font-family: "Arial", Arial, sans-serif;
	font-size: x-large;
	color: #afafaf;
	margin-top: 0pt;
	margin-bottom: 0pt;
	text-align: right;
}

.button {
	color: #efefef;
	font-size:25px;
	cursor:pointer;
	float: left;
}



/* Footer */

.footer {
	padding: 15px;
	background-color: #2F2F2F;
}

.footer a {
	font-family: "Arial", Arial, sans-serif;
	font-size: large;
	color: #dfdfdf;
	text-decoration: none;
}

.footer a:hover {
	color: #fff;
}

.footer a:active {
	color: #afafaf;
}



/* Navigation */

.navigation {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

.navigation .al1 {
  padding: 4px 4px 4px 8px;
  margin-top: 4px;
  margin-bottom: 4px;
  text-decoration: none;
  font-family: "Arial", Arial, sans-serif;
  font-size: 24px;
  color: #efefef;
  display: block;
  transition: 0.3s;
}

.navigation .al2 {
  padding: 4px 4px 4px 16px;
  margin-top: 4px;
  margin-bottom: 4px;
  text-decoration: none;
  font-family: "Arial", Arial, sans-serif;
  font-size: 20px;
  color: #efefef;
  display: block;
  transition: 0.3s;
}

.navigation .al3 {
  padding: 4px 4px 4px 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  text-decoration: none;
  font-family: "Arial", Arial, sans-serif;
  font-size: 16px;
  color: #efefef;
  display: block;
  transition: 0.3s;
}

.navigation .pl1 {
  padding: 4px 4px 4px 8px;
  margin-top: 4px;
  margin-bottom: 4px;
  font-family: "Arial", Arial, sans-serif;
  font-size: 24px;
  color: #afafaf;
  display: block;
  transition: 0.3s;
}

.navigation .pl2 {
  padding: 4px 4px 4px 16px;
  margin-top: 4px;
  margin-bottom: 4px;
  font-family: "Arial", Arial, sans-serif;
  font-size: 20px;
  color: #afafaf;
  display: block;
  transition: 0.3s;
}

.navigation .pl3 {
  padding: 4px 4px 4px 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  font-family: "Arial", Arial, sans-serif;
  font-size: 16px;
  color: #afafaf;
  display: block;
  transition: 0.3s;
}

.navigation .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  text-decoration: none;
  font-family: "Arial", Arial, sans-serif;
  font-size: 36px;
  color: #dfdfdf;
  margin-left: 50px;
}



/* Info */

/*media screen default*/
	.info_columns {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 20px;
		padding: 20px;
		background-color: #eee;
	}
	
@media screen and (min-width: 1000px) {
	.info_columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 1600px) {
	.info_columns {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

.info_entry {
	padding: 20px;
	background-color: #eee;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
}



/* Abstracts */

/*media screen default*/
	.post_columns {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 20px;
	}
	
@media screen and (min-width: 800px) {
	.post_columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 1200px) {
	.post_columns {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media screen and (min-width: 1600px) {
	.post_columns {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

.post_frame {
	padding: 20px;
	background-color: #eee;
}



/* Posts Abstract*/

.post_abstract {
	padding: 10px;
	background-color: #eee;
	text-decoration: none;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
}



/* Posts Content*/

.post_content {
	padding: 10px;
	background-color: #eee;
}

.post_content h1 { 
	font-family: Arial, sans-serif;
	font-size: xx-large;
	color: #2F2F2F;
}

.post_content h2 {
	font-family: Arial, sans-serif;
	font-size: x-large;
	color: #2F2F2F;
	margin-top: 50px;
}

.post_content h3 {
	font-family: Arial, sans-serif;
	font-size: large;
	color: #2F2F2F;
	margin-top: 30px;
}

.post_content p {
	font-family: Arial, sans-serif;
	color: #000;
}

.post_content a {
  	text-decoration: none;
}

.post_content li {
	font-family: Arial, sans-serif;
	color: #000;
	margin-bottom: 10px;
	line-height: normal;
}



/* Images */

.photo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
}

/*media screen default*/
	.grafic {
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 5px;
		height: auto;
		max-width: 95%;
		cursor: pointer
	}

@media screen and (min-width: 1200px) {
	.grafic {
		max-width: 1050px;
	}
}



/* General */

h1 { 
	font-family: Arial, sans-serif;
	font-size: xx-large;
	color: #2F2F2F;
}

h2 {
	font-family: Arial, sans-serif;
	font-size: x-large;
	color: #2F2F2F;
}

p {
	font-family: Arial, sans-serif;
	color: #000;
}

li {
	font-family: Arial, sans-serif;
	color: #000;
	margin-bottom: 10px;
	line-height: normal;
}