@font-face { 
  font-family: SpaceGroteskBold;
  src: url('/fonts/SpaceGrotesk-Bold.ttf');
}

@font-face {
  font-family: SpaceGroteskRegular;
  src: url('/fonts/SpaceGrotesk-Regular.ttf');
}

@font-face {
  font-family: SpaceGrotesk;
  src: url('/fonts/SpaceGrotesk-Medium.ttf');
}

:root {
  --light-blue: #4f81bd;
  --dark-blue: #385d8a;
  --orange: #ff2a25;
  --black: #000000;
  --white: #ffffff;
  --mushroom: #E7E7E7;
  --graytext: #a8a7a7;
  --gray: #a8a7a7;
  --tmp-img: #909090;
  --purple: #8700FF;
}

html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  width: 100%;
  max-width: 1500px;
  margin: auto;
  margin-top: 0;
  font-family: SpaceGrotesk;
}

#fullarea {
  margin-left: 15%;
  margin-right: 15%;
}




/**** HEADER ****/

div.header {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  padding-top: calc(1vh + 4px);
}

div.spacer {
  flex-grow: 100;
}

div.menu {
  margin-left: 25px;
}

span.menuitem {
  padding-left: 15px;
}

body.a {
  color: var(--dark-blue);
  -moz-transition: color 450ms ease;
  -o-transition: color 450ms ease;
  -webkit-transition: color 450ms ease;
  transition: color 450ms ease;
}

body.a:hover{
  color: var(--purple);
}

div.logo {
  display:inline-block;
  padding-top: 0;
  padding-left: 0;
  height: calc(3vh + 50px);
  float: left;
}

img.logo{
  object-fit: contain;
  object-position: 0% 100%;
  height: calc(3vh + 50px);
}

a.menu {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 31px;
  color: var(--dark-blue);
  -moz-transition: color 450ms ease;
  -o-transition: color 450ms ease;
  -webkit-transition: color 450ms ease;
  transition: color 450ms ease;
}

a.menu:hover{
  color: var(--purple);
}



/**** LAYOUT ****/
div.row {
  display: flex;
  flex-direction: row;
}



/**** CONTENT ****/

#content {
  margin-top: 4vh;
}

div.important {
  margin-top:10px;
  border:solid;
  border-width:5px;
  padding-left:8px;
  padding-right:8px;
  background-color:#ff4040;
}

a {
  color: var(--light-blue);
  -moz-transition: color 450ms ease;
  -o-transition: color 450ms ease;
  -webkit-transition: color 450ms ease;
  transition: color 450ms ease;
  text-decoration: none;
}

a:hover{
  color: var(--purple);
  text-decoration: none;
}

a.markdown{
  color: var(--light-blue);
  -moz-transition: color 450ms ease;
  -o-transition: color 450ms ease;
  -webkit-transition: color 450ms ease;
  transition: color 450ms ease;
  text-decoration: none;
}

a.markdown:hover{
  color: var(--purple);
}

#home-image{
  object-fit: cover;
}

p {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: var(--black);
  text-align:justify;

  font-size: 20px;
  line-height: 25px;
}

img.markdown{
  width:100%;
}

hr {
  color: var(--light-blue);
  background-color: var(--light-blue);
  border: none;
  height: 2px;
  margin-top: 20px;
  margin-bottom: 20px;
}

a.navigation {
  font-size: 30px;
  line-height:40px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: var(--light-blue);
}

a.navigation:hover{
  color: var(--purple);
}

a.box {
  display: inline-block;
}

h1.subpage {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: var(--black);

  margin-top: 30px;
  margin-bottom: 40px;
  font-size: 50px;
  line-height: 55px;
}

h2.subpage {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;

  margin-top: 48px;
  font-size: 25px;
  line-height: 30px;
}

img.person {
  object-fit: cover;
  height: 90%;
  width: 90%;
}

div.person_entry {
  vertical-align:top;
  display:inline-block;
  height:18vw;
  width:12vw;
  max-width:160px;
  max-height:240px;
  margin-bottom: 50px;
}

div.person_entry_small {
  vertical-align:top;
  display:inline-block;
  min-width:80px;
  max-width:80px;
  max-height:120px;
  padding-right: 40px;
}

div.partner_entry {
  vertical-align:top;
  display:inline-block;
  margin-top:50px;
  margin-right:80px;
}

span.person_name {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: var(--black);
  word-wrap: break-word;
}

span.person_role {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: var(--graytext);
}

span.publication{
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: var(--black);
}

span.publication-info{
  color: var(--graytext);
}

#navbutton {
  display: none;
}

h3.topic{
  display: inline;
}

ul {
  padding-left: 2em;
  font-size: 20px;
}

ol {
  font-size: 20px;
}

div#intro-text p {
  font-weight: 800;
}

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

img.image-scaled-height {
  object-position: 0% 100%;
  object-fit:contain;
  height: 12vw;
  max-height: 100px;
}

.image-label {
  margin-top:20px;
}

.news-date {
  color: #888;
  font-size: 0.6em;
}

h2.news {
  margin-top: 50px;
  color: #888;
}

h2.student-blog {
  margin-top: 0;
  color: #444;
}

h3.news {
  margin-bottom: 8px;
}

.news-item {
  margin-top: 0;
}

.news-item > ul > li {
  margin-bottom: 2px;
}

ol > li {
  margin-bottom: 8px;
}

p.news {
  margin-top: 0;
}

div.news-image {
  display: inline-block;
}

img.news-image {
  max-width: 450px;
  padding: 0 20px 20px 0;
}

img.news-image-wide {
  max-width: 600px;
  padding: 0 20px 20px 0;
}

img.news-image-portrait {
  max-width: 450px;
  padding: 0 20px 20px 0;
}

/**** FOOTER ****/

#footer {
  display: flex;
  color: var(--dark-blue);
  width: 100%;
  position: relative;
  height: auto;
  margin-top: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #131313;
}

div.foot-head{
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: #5c5c5c;

  font-size: 14px;
  line-height: 18px;
}

div.foot-content{
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: var(--white);

  margin-top:8px;
  font-size: 13px;
  line-height: 18px;
}

#contact{
  vertical-align:top;
  margin-left: 5vw;
}

#legal{
  vertical-align:top;
  margin-left: 12px;
}

#foot-logo {
  margin-right: 5vw;
  maring-left: 12px;
}

img.logo-foot{
  object-fit:contain;
  display:inline-block;

  width: 120px;
}

a.foot-link {
  color: var(--white);
}

img.logo-rss{
  height: 40px;
}

p.mission {
  text-align: center;
  margin-bottom: 10px;
  margin-left: 20%;
  margin-right: 20%;
}

div.pbem2 {
  padding-bottom: 2em;
}

/**** RESPONSIVENESS ****/

@media screen and (min-width: 1500px) {
}

@media screen and (min-width: 1250px and (max-width: 1499px)) {
}

@media screen and (min-width: 789px) and (max-width: 1249px) {
  #fullarea {
    margin-left: 20%;
    margin-right: 10%;
  }

  div.person_entry {
    height: 24vw;
    width: 16vw;
  }
}

@media screen and (min-width: 630px) and (max-width: 788px) {
  #fullarea {
    margin-left: 10%;
    margin-right: 5%;
  }

  div.person_entry {
    height: 30vw;
    width: 20vw;
  }
}

@media screen and (max-width: 629px) {
  #fullarea {
    margin-left: 5%;
    margin-right: 5%;
  }

  div.person_entry {
    height: 42vw;
    width: 28vw;
  }

  span.person_name {
    font-size: 12px;
    line-height: 15px;
  }
}

/* collapsed menu */
@media screen and (max-width: 788px) {
  #navbutton {
    display: inline-block;
    margin-top:8px;
    width: 38px;
    margin-right:8px;
  }

  span.menuitem {
    display: block;
  }

  span.menu {
    display:none;
    z-index: 1;
    background-color: var(--light-blue);
    position: absolute;
    margin-left:-100px;
    width:137px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding-left: 15px;
    float: right;
  }

  a.menu {
    font-size: 13px;
    letter-spacing: 0.35px;
    color:#ffffff;
  }

  a.menu-bright {
    font-size: 13px;
    letter-spacing: 0.35px;
  }

  div.header:hover span.menu {
    display: block;
  }

  #footer {
    margin-top: 50px;
  }

  div.foot-head {
    margin-top: 0;
  }
}

/* text */
@media screen and (max-width: 788px) {
  h1.subpage {
    margin-top: 17px;
    margin-bottom: 29px;
    font-size: 35px;
    line-height: 40px;
  }

  h2.subpage {
    margin-top: 17px;
    margin-bottom: 29px;
    font-size: 25px;
    line-height: 30px;
  }

  p {
    font-size: 18px;
    line-height: 22px;
  }

  ul {
    font-size: 18px
    line-height: 22px;
  }

  ol {
    font-size: 18px
    line-height: 22px;
  }
}