/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* Table of Content
==================================================
	#Reset & Basics
	#Basic Styles
	#Site Styles
	#Typography
	#Links
	#Lists
	#Images
	#Buttons
	#Forms
	#Misc */


/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
        font: inherit;
		font-size: 17px;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }


/* #Basic Styles
================================================== */
	body {
		background: #fff;
		font: 14px/21px "Raleway", "HelveticaNeue-Light", Arial, sans-serif;
		color: #444;
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;
 }


/* #Typography
================================================== */
	h1, h2, h3, h4, h5, h6 {
		font-weight: 300; }
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 30px; line-height: 50px; margin-bottom: 14px;}
	h2 { font-size: 28px; line-height: 40px; margin-bottom: 10px; }
	h3 { font-size: 26px; line-height: 34px; margin-bottom: 8px; }
	h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
	h5 { font-size: 17px; line-height: 24px; }
	h6 { font-size: 14px; line-height: 21px; }
	.subheader { color: #777; }

	p { margin: 0 0 20px 0; }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }

	em { font-style: italic; }
	strong { font-weight: bold; }
	small { font-size: 80%; }

/*	Blockquotes  */
	blockquote, blockquote p { line-height: 24px; color: #777; font-style: italic; }
	blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
	blockquote cite { display: block; font-size: 12px; color: #555; }
	blockquote cite:before { content: "\2014 \0020"; }
	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }


/* #Links
================================================== */
	a, a:visited { text-decoration: underline; outline: 0; }
	a:hover, a:focus { }
	p a, p a:visited { line-height: inherit; }


/* #Lists
================================================== */
	ul, ol { margin-bottom: 20px; }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ul, ul.square { list-style: square outside; }
	ul ul, ul.circle { list-style: circle outside; }
	ul ul ul, ul.disc { list-style: disc outside; }
	ul ul li, ul ol li,
	ol ol li, ol ul li { margin-bottom: 6px; }
	li { line-height: 18px; margin-bottom: 12px; }
	ul.large li { line-height: 21px; }
	li p { line-height: 21px; }

/* #Images
================================================== */

	img.scale-with-grid {
		max-width: 100%;
		height: auto; }


/* #Forms
================================================== */

	form {
		margin-bottom: 20px; }
	fieldset {
		margin-bottom: 20px; }
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #777;
		margin: 0;
		width: 210px;
		max-width: 100%;
		display: block;
		margin-bottom: 20px;
		background: #fff; }
	select {
		padding: 0; }
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {
		border: 1px solid #aaa;
 		color: #444;
 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2); }
	textarea {
		min-height: 60px; }
	label,
	legend {
		display: block;
		font-weight: bold;
		font-size: 13px;  }
	select {
		width: 220px; }
	input[type="checkbox"] {
		display: inline; }
	label span,
	legend span {
		font-weight: normal;
		font-size: 13px;
		color: #444; }

/* #Misc
================================================== */
	.remove-bottom { margin-bottom: 0 !important; }
	.half-bottom { margin-bottom: 10px !important; }
	.add-bottom { margin-bottom: 20px !important; }


/* -----------------------------------*/
/* ----- 1000px wide fancy grid! ----- */
/* -----------------------------------*/

/* by tim o'brien, t413.com
 * based on getskeleton.com
 */


/* ----- base grid----- */

.container               { position: relative; width: 1000px; margin: 0 auto; padding: 0; }
.container .column       { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row                     { margin-bottom: 20px; }

.container .small.column { width: 300px; }
.container .half.column  { width: 460px; }
.container .big.column   { width: 620px; }
.container .full.column  { width: 940px; }


/* ----- Tablet (Portrait) -- 768px ----- */
  @media only screen and (min-width: 768px) and (max-width: 959px) {
    .container               { width: 768px; }
    .topnav .container        { width:  100%; }

    .container .small.column { width: 236px; }
    .container .half.column  { width: 364px; }
    .container .big.column   { width: 488px; }
    .container .full.column  { width: 748px; }
  }


/* ----- Mobile (Portrait) ----- */
  @media only screen and (max-width: 767px) {
    .container                { width:  96%; }
    .topnav .container        { width:  100%; }
    .container .column        { margin:  1%; }

    .container .small.column { width: 48%; }
    .container .half.column  { width: 48%; }
    .container .big.column   { width: 98%; }
    .container .full.column  { width: 98%; }
  }


/* ----- Mobile (Landscape) -- 480px ----- */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .container                { width:  92%; }
    .topnav .container        { width:  100%; }
    .container .column        { margin:  2%; }

    .container .small.column { width: 46%; }
    .container .half.column  { width: 46%; }
    .container .big.column   { width: 96%; }
    .container .full.column  { width: 96%; }
  }



/* ----- Clearing ----- */

  /* Self Clearing Goodness */
  .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

  /* Use clearfix class on parent to clear nested columns,
  or wrap each row of columns in a <div class="row"> */
  .clearfix:before,
  .clearfix:after,
  .row:before,
  .row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0; }
  .row:after,
  .clearfix:after {
    clear: both; }
  .row,
  .clearfix {
    zoom: 1; }

  /* You can also use a <br class="clear" /> to clear columns */
  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* ---------------------------*/
/* ----- Special Styles ----- */
/* ---------------------------*/

/* ----- colors (autogenerated from _config.yml)----- */


.border-darkblue { border-color: #0a4e80 !important; }
.text-darkblue   { color: #0a4e80; }
.text-darkblue a { color: #0a4e80; }
.bg-darkblue     { background-color: #0a4e80 !important; }

.border-mediumblue { border-color: #0f75bc !important; }
.text-mediumblue   { color: #0f75bc; }
.text-mediumblue a { color: #0f75bc; }
.bg-mediumblue     { background-color: #0f75bc !important; }

.border-brightblue { border-color: #00aeef !important; }
.text-brightblue   { color: #00aeef; }
.text-brightblue a { color: #00aeef; }
.bg-brightblue     { background-color: #00aeef !important; }

.border-green { border-color: #2ca296 !important; }
.text-green   { color: #2ca296; }
.text-green a { color: #2ca296; }
.bg-green     { background-color: #2ca296 !important; }

.border-black { border-color: #111111 !important; }
.text-black   { color: #111111; }
.text-black a { color: #111111; }
.bg-black     { background-color: #111111 !important; }

.border-white { border-color: #f8f8f8 !important; }
.text-white   { color: #f8f8f8; }
.text-white a { color: #f8f8f8; }
.bg-white     { background-color: #f8f8f8 !important; }

.border-bgwhite { border-color: #ffffff !important; }
.text-bgwhite   { color: #ffffff; }
.text-bgwhite a { color: #ffffff; }
.bg-bgwhite     { background-color: #ffffff !important; }

.border-bggray { border-color: #e9e9e9 !important; }
.text-bggray   { color: #e9e9e9; }
.text-bggray a { color: #e9e9e9; }
.bg-bggray     { background-color: #e9e9e9 !important; }

.border-bgblack { border-color: #2e2e2e !important; }
.text-bgblack   { color: #2e2e2e; }
.text-bgblack a { color: #2e2e2e; }
.bg-bgblack     { background-color: #2e2e2e !important; }


/* ----- per-post colors! ----- */

  
  
  
  nav .p-partners { border-color: #ffffff; }
  #partners { background-color: #ffffff !important; color: #111111; }
  #partners a { color: #111111; }

  
  
  
  nav .p-get-in-touch { border-color: #e9e9e9; }
  #get-in-touch { background-color: #e9e9e9 !important; color: #111111; }
  #get-in-touch a { color: #111111; }

  
  
  
  nav .p-msalab-post { border-color: #ffffff; }
  #msalab-post { background-color: #ffffff !important; color: #111111; }
  #msalab-post a { color: #111111; }

  
  
  
  nav .p-expert-group { border-color: #e9e9e9; }
  #expert-group { background-color: #e9e9e9 !important; color: #111111; }
  #expert-group a { color: #111111; }

  
  
  
  nav .p-affiliated-researchers { border-color: #ffffff; }
  #affiliated-researchers { background-color: #ffffff !important; color: #111111; }
  #affiliated-researchers a { color: #111111; }

  
  
  
  nav .p-people { border-color: #e9e9e9; }
  #people { background-color: #e9e9e9 !important; color: #111111; }
  #people a { color: #111111; }

  
  
  
  nav .p-publications { border-color: #ffffff; }
  #publications { background-color: #ffffff !important; color: #111111; }
  #publications a { color: #111111; }

  
  
  
  nav .p-pillars { border-color: #e9e9e9; }
  #pillars { background-color: #e9e9e9 !important; color: #111111; }
  #pillars a { color: #111111; }

  
  
  
  nav .p-news { border-color: #ffffff; }
  #news { background-color: #ffffff !important; color: #111111; }
  #news a { color: #111111; }

  
  
  
  nav .p-vision { border-color: #e9e9e9; }
  #vision { background-color: #e9e9e9 !important; color: #111111; }
  #vision a { color: #111111; }



/* ----- code, syntax highlighting, etc ----- */

code, pre { font-family: Monaco, Menlo, Consolas, "Courier New", monospace; }

/* spesifically inline code */
code, pre {
  background: rgba(255,255,255,0.2);
  display: inline;
  word-wrap: break-word;
}

/* block code */
pre code { background: none; display: block; }
pre {
  display: block;
  margin: 20px 5%;
  padding: 4px 8px;
  background: rgba(255,255,255,0.1);
  word-wrap: break-word;
}

.highlight { margin:20px 5%; }


/* ----- base elements ----- */

img {
  max-width:100%!important;
  height:auto;
  vertical-align:middle;
}

hr {
  margin:60px auto;
  width:50%;
  border-color: #111111;
}

.container { word-wrap: break-word; }
.center { text-align: center; }
.left, .container .left { text-align: left; }

.container h1, .container h2, .container h3, .container h4 {
  margin-bottom: 20px;
  text-align: center;
  padding: 0 4%;
}
.container h1 {
  text-transform:uppercase;
}
.container h1::after {
  background: none repeat scroll 0 0 #2ca296;
  bottom: -13px;
  content: "";
  display: block;
  height: 4px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  width: 50px;
}
.container p, .container ol, .container ul {
  padding: 0 5%;
}
.container ol, .container ul { padding: 0 8%; }
.container p:first-of-type {
    margin-top: 40px;
}

/* keep embedded videos fluid! */
.icontain {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%; /* keep 16x9 Aspect Ratio */
}
.i4x3 { padding-bottom: 75.00%; } /* keep 4x3 Aspect Ratio */
.icontain iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.inlineblock {
  display:-moz-inline-stack;
  display:inline-block;
  zoom:1;
  *display:inline;
}

/* ---------------------------*/
/* ----- Main Structure ----- */
/* ---------------------------*/

/* ----- top menu ----- */

 /* Add a black background color to the top navigation */
.topnav {
  overflow: hidden;
  width:100%;
  position:fixed;
  z-index:100;
  top:0;
  left:0;
  background: #2e2e2e;
  text-align:center;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 18px 20px;
  text-decoration: none;
  font-weight:600;
  text-transform:uppercase;
  display:block;
  color:#ccc;
  text-decoration:none;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #2da196;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: fixed;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


/* ----- sections/articles ----- */

.section {
  position:relative;
  display:block;
  width:100%;
  padding:40px 0;
}

.section:first-of-type {
    padding-top: 140px;
}


#footer {
  padding: 8px 0;
  min-height:0;
  text-align:center;
  background-color: #2e2e2e;
  background-image:none;
}
#footer .container p { font-size:13px; margin:0; }

.subtlecircle {
  text-align:center;
  z-index:3;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  box-shadow: 0px 1px 15px rgba(0,0,0,0.05);
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAF0lEQVQIHWP8//+/MQMaYELjg7kUCgIASm8DOqGzfp8AAAAASUVORK5CYII=);
}


.columned {
  -webkit-column-count: 3;
  -moz-column-count:    3;
  column-count:         3;

  -webkit-column-gap: 40px;
  -moz-column-gap:    40px;
  column-gap:         40px;

  -webkit-column-rule: 1px outset rgba(255,255,255,0.5);
  -moz-column-rule:    1px outset rgba(255,255,255,0.5);
  column-rule:         1px outset rgba(255,255,255,0.5);
}
.longlist { font-size: 14px !important; }
.longlist li { margin-bottom: 3px; }


/* anything not desktop */
@media only screen and (max-width: 767px) {
  .container h1 { font-size: 30px; }
  .container h2 { font-size: 24px; }
  .container h3 { font-size: 20px; }
  .container h4 { font-size: 18px; }


  /*.section { padding:130px 0; }*/

  .columned {
    -webkit-column-count: 2;
    -moz-column-count:    2;
    column-count:         2;
  }
}

.banner {
  padding-top: 70px;
  background-color: lightblue !important;
}

.spacer {
  padding-top: 40px;
}

.collaborator {
  vertical-align: text-top;
  width:190px;
  margin-left:10px;
  margin-right:10px;
  margin-bottom:30px;
  display: inline-block;
}

.collaborator img {
  padding:10px 20px 10px 20px;
  height:auto;
  border-radius:30%;
}

.collaborator figcaption {
  text-align:center;
}

.collaborator-name {
  font-weight: bold;
}

.affiliated-org {
  vertical-align: text-top;
  width:195px;
  margin-left:0px;
  margin-right:-200px;
  margin-bottom:-20px;
  display: inline-block;
  overflow: auto;
}

.affiliated {
  vertical-align: text-top;
  width:390px;
  margin-left:200px;
  margin-right:-200px;
  margin-bottom:10px;
  display: inline-block;
  overflow: auto;
}

.affiliated img {
  float: left;
  width:140px;
  padding:0px 20px 0px 20px;
  height:auto;
  border-radius:30%;
}

.affiliated figcaption {
  text-align:left;
}

.affiliated-name {
  font-weight: bold;
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

/*.active:after {*/
  /*content: "\2212";*/
/*}*/

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}

.vision-pillar-container {
  display: flex;
}

.vision-pillar-container > div {
  /*background-color: #f1f1f1;*/
  margin: 10px;
  /*padding: 20px;*/
}

.vision-pillar-container p {
  font-size: 1.2em;
  text-align: center;
}

.vision-pillar-container h2 {
  font-weight: bold;
  padding-top: 25px;
}

.vision-pillar-container fa-bold {
  font-size: 1.2em;
  font-weight: bold;
}

.pillar-container h3 {
  font-size: 1.2em;
  font-weight: bold;
}

.pillar-container {
  display: flex;
  text-align: center;
}

.pillar-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
}

.latestnews-container h3 {
  font-size: 1.2em;
  font-weight: bold;
}

.latestnews-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.3rem, 1fr));
  grid-gap: 0.5rem;
}

.latestnews-container > div {
  background-color: #2da196;
  margin: 10px;
  padding: 20px;
}

#latestnews .date {
  color: white;
  font-style: italic;
}

#latestnews .title {
  font-weight: bold;
  margin-top: 12px;
  height: 120px;
}

#latestnews .description {
}

.latestpub-container h3 {
  font-size: 1.2em;
  font-weight: bold;
}

.latestpub-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.3rem, 1fr));
  grid-gap: 0.5rem;
}

.latestpub-container > div {
  background-color: #e9e9e9;
  margin: 10px;
  padding: 20px;
}

#latestpub .date {
  /*color: white;*/
  font-style: italic;
}

#latestpub .title {
  font-weight: bold;
  margin-top: 12px;
  height: 100px;
}

#latestpub .description {
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 1000px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .pillar-container {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .vision-pillar-container {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

.label {
  text-transform: capitalize;
}
.news {background-color: #2da196;} /* Green */
.blog {background-color: ##1b75bc;} /* Medium Blue */

.conference {background-color: #00aeef;} /* Light Blue */
.presentation {background-color: #777777;} /* Grey */
.journal {background-color: #0d4e80;} /* Dark Blue */
.working-paper {background-color: #2da196;} /* Green */
.dissertation {background-color: #2da196;} /* Green */

b {
  font-weight: bold;
}

.sectiondivider {
  margin-top: -40px;
  height: 40px;
}

/*Style for the partnerlogos*/

.partnerlogo {
  background-color: white;
  border: 1px solid #dddddd;
  margin: 10px 10px 10px 10px;
  height: 160px;
  display: inline-block;
}

@media screen and (max-width: 600px) {
  .partnerlogo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }
}

.partnerlogo img {
  max-height: 100%;
}