/* Style the entire webpage */
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: 'RobotoSlab', sans-serif;
  margin: 0;
  color: #333;
}

/* Paragraph */
p {
	padding-bottom: 0.5em;
	font-family: 'Roboto';
	font-size: 15px;
	line-height: 1.5;
}

/* Item in lists */
ul li {
	font-family: 'Roboto';
	font-size: 15px;
	line-height: 1.5;
}

/* Hyperlink */
a {
	color: black;
}

	/* Hyperlink when cursor is hover*/
	a:hover {
		color: #e3000b;
	}


/* Header/logo Title */
.header {
  padding: 0.5em 1.5em;
  text-align: center;
  background: #ffffe0;
  color: #231F20;
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 30px;
  color: #e3000b;
}

/* Style the top navigation bar */
.nav-bar {
  overflow: hidden;
  background: #ffffe0;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

/* Style the navigation bar links */
.nav-bar a {
  float: left;
  display: block;
  color: #e3000b;
  text-align: center;
  padding: 14px 2%;
  text-decoration: none;
}

	/* Right-aligned link */
	.nav-bar a.right {
	  float: right;
	}
	
	/* Hyperlink when hover */
	.nav-bar a:hover {
	  color: #000000;
	}

/* Add space around menu links */
.nav-link {
	padding: 0 2%;
}

/* Column container */
.content {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  background-color: #ffffe0;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.sidebar {
  -ms-flex: 26%; /* IE10 */
  flex: 26%;
  background-color: #e3000b;
  color: #fff;
  margin: 2%;
  padding: 2%;
}
.sidebar a {
	color: white;
}

	/* Hyperlink when cursor is hover*/
	.sidebar a:hover {
  		color: #000000;
	}

/* Main column */
.main {   
  -ms-flex: 62%; /* IE10 */
  flex: 66%;
  background-color: #ffffe0;
  padding: 2% 4%;
}

/* Images */
img{
	padding: 0.5em;
	max-height:140px;
}

/* Center profile picture on side bar */
.img-profile img{
	max-height:200px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Customize list for news */
ul.news{
	list-style: none;
	padding-bottom: 0.5em;
	padding-left: 0;
}

	/* Customize item category for news */
	ul.news li.category{
		font-style: italic;
		/* color: #e3000b; */
		font-size: 13px;
		margin-bottom: 0.2em
	}


/* Customize list for publications */
ul.publication{
	list-style: none;
	padding-bottom: 0.5em;
}

	/* Customize item for publications */
	ul.publication li.title{
		font-style: italic;
	}
	
	/* Customize item for publications */
	ul.publication li.editor{
		font-weight: bold;
	}
	
	/* Customize link for publications */
	ul.publication li.link{
	margin-top: 0.4em;
	}
	
		/* Effect button-link for publications when cursor is hover */
		ul.publication li.link a:hover{
			background: #000000;
			text-decoration: none;
		}
			
		/* Customize button-link for publications */
		ul.publication li.link .button{
			font-family: 'Roboto';
			vertical-align: text-bottom;
			margin: 0em 0.3em;
			padding: 0.1em 0.6em;
			background: #ffffe0;
			color:#e3000b;
			text-align: center;
			border: 1.5px solid #e3000b;
			text-decoration: none;
		}
		
/* Footer */
.footer {
  padding: 2%;
  text-align: center;
  background: #2e2f32;
  color: #ffffe0;
}

/* Footer menu */
ul.footer-bar{
	list-style: none;
}
	/* Footer menu items */
	ul.footer-bar li.text {
		padding-top: 1.2em;
		font-size: 13px;
	}
	
	/* Footer menu items */
	ul.footer-bar li.link {
		padding: 0.3em 0;
	}
	
		/* Footer menu items */
		ul.footer-bar li.link a {
			color: #ffffe0;
		}
		
		/* Hyperlink when hover */
		ul.footer-bar li.link a:hover {
		  color: #e3000b;
		}

/* Responsive layout - Small devices -  
* when the screen is less than 48em */
@media (max-width: 48em) {
	
	/* Make the two columns stack on top of each other instead of next to each other */
	.content {   
		flex-direction: column;
	}
}

/* Responsive layout - Small devices -  
* when the screen is less than 40em */
@media (max-width: 40em) {
	/* Make the navigation links stack on top of each other instead of next to each other */
	.nav-bar a {
	float: none;
	width: 100%;
 }
}

/* Responsive layout - Laptops size screen and higher -  
* when the screen is more than 48em, 
* refine some style */
@media (max-width: 48em) {
}

/* Responsive layout - Large screens -  
* when the screen is more than 90em, 
* refine some style */
@media (min-width: 90em){
}