@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: normal;
  src: local('Dosis Regular'), local('Dosis-Regular'), url('Dosis-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: bold;
  src: local('Dosis SemiBold'), local('Dosis-SemiBold'), url('Dosis-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Mate';
  font-style: normal;
  font-weight: normal;
  src: local('Mate Regular'), local('Mate-Regular'), url('Mate-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Mate';
  font-style: italic;
  font-weight: normal;
  src: local('Mate Italic'), local('Mate-Italic'), url('Mate-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Mate Small Caps';
  font-style: normal;
  font-weight: normal;
  src: local('MateSC Regular'), local('MateSC-Regular'), url('MateSC-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'CCIcons';
  font-style: normal;
  font-weight: normal;
  src: local('CC Icons'), local('CC-Icons'), url('cc-icons.ttf') format('truetype');
}
@media screen {
  body {
    background-color: white;
    margin: 0;
    padding: 0;
    border: 0;
  }
  #frontPage {
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 100%;
    background-color: #d7d7d7;
    background-image: url('thamesBuildings.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -ms-justify-content: flex-end;
    justify-content: flex-end;
  }
  #frontPage #title {
    margin: 80px 10% auto 10%;
    padding: 0 12px 0 12px;
    text-align: right;
    color: black;
    text-shadow: 0 0 0.3em #d7d7d7;
  }
  #frontPage #title h1 {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 70px;
  }
  #frontPage #title h2 {
    margin: 0.5em 0 0 0;
    padding: 0;
    border: 0;
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 38px;
    line-height: 40px;
  }
  #frontPage #title h2 strong {
    font-weight: normal;
    padding-bottom: 0;
    border-bottom: 2px solid #f75e25;
  }
  #frontPage #title h2 em {
    font-style: normal;
    font-size: 34px;
    color: #f75e25;
  }
  #frontPage #features {
    margin: 0 10% 2% 10%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
  }
  #frontPage #features .featureBlock {
    background-color: #474a51;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 25%;
    padding: 10px;
    border: 2px solid white;
    position: relative;
    color: white;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    overflow: hidden;
  }
  #frontPage #features .featureBlock h3 {
    padding: 0;
    margin: 0 0 1em 0;
    border: 0;
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 20px;
  }
  #frontPage #features .featureBlock img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    padding: 0;
    margin: 0;
  }
  #frontPage #features .featureBlock a {
    text-decoration: none;
    color: inherit;
  }
  #frontPage #features .featureBlock a span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #frontPage #features .featureBlock:hover {
    border: 2px solid #f75e25;
  }
  #frontPage #imperial {
    margin: 0 10% 20px 10%;
    padding: 3px 10px 3px 10px;
    border: 0;
    background-color: #474a51;
  }
  #frontPage #imperial ul {
    padding: 0;
    margin: 0;
    border: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    list-style: none;
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 17px;
    color: white;
  }
  #frontPage #imperial ul li {
    padding: 0;
    margin: 0;
    border: 0;
  }
  #frontPage #imperial a {
    color: white;
    text-decoration: none;
  }
  #frontPage #imperial a:hover {
    color: #f75e25;
  }
  #imageRights {
    position: absolute;
    bottom: 2px;
    left: 2px;
    text-align: right;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 10px;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(-90deg) translateX(-10px);
    -moz-transform: rotate(-90deg) translateX(-10px);
    -ms-transform: rotate(-90deg) translateX(-10px);
    -o-transform: rotate(-90deg) translateX(-10px);
    transform: rotate(-90deg) translateX(-10px);
  }
  #imageRights a {
    text-decoration: none;
    color: #d7d7d7;
  }
  #imageRights span.ccIcon {
    font-family: 'CCIcons', sans-serif;
    font-size: 11px;
  }
  #ieWarning {
    display: none;
  }
  #header {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
    left: 0px;
    right: 0px;
    min-height: 350px;
    background-color: #d7d7d7;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  #header h1 {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 50px;
    color: white;
    text-shadow: 0 0 0.8em black;
    margin-left: 25%;
    margin-right: 25%;
    text-align: left;
    position: absolute;
    bottom: 75px;
  }
  #spacer {
    margin: 0;
    padding: 0;
    border: 0;
  }
  #main {
    margin: 1em 25% 1em 25%;
    padding: 0;
    border: 0;
    font-family: 'Mate', serif;
    font-weight: normal;
    font-size: 16px;
    color: #202020;
    line-height: 21px;
  }
  #main p {
    margin: 1em 0 1em 0;
    padding: 0;
    border: 0;
  }
  #main a {
    color: #f75e25;
  }
  #main h3 {
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 20px;
    color: black;
    margin: 2em 0 1em 0;
    padding-bottom: 3px;
    border-bottom: 1px solid #d7d7d7;
  }
  sup,
  sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
  }
  sub {
    top: 0.4em;
  }
  div.aboutUs {
    border: 0;
    margin: 0;
    padding: 0;
  }
  div.aboutUs a {
    text-decoration: none;
    font-family: 'Mate Small Caps', serif;
    font-weight: normal;
    font-size: 16.5px;
    color: #f75e25;
  }
  div.person {
    border: 0;
    margin: 1em 0 0 0;
    padding: 0;
    overflow: hidden;
  }
  div.person h4 {
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 19px;
    color: black;
    margin: 0 0 0.5em 0;
    padding-bottom: 3px;
    border-bottom: 1px solid #d7d7d7;
  }
  div.person h4 span.name::after {
    content: ',';
  }
  div.person img {
    width: 160px;
    height: 160px;
    float: left;
    border: 0;
    padding: 0;
    margin: 0.3ex 1.5ex 1.5ex 0;
  }
  div.person p {
    margin: 0em 0 1em 0;
  }
  div.person p span.name,
  div.person a,
  div.person p span.keyPhrase {
    text-decoration: none;
    font-family: 'Mate Small Caps', serif;
    font-weight: normal;
    font-size: 16.5px;
    color: #f75e25;
  }
  div.person .more {
    display: none;
  }
  div.person div.thesis {
    font-style: italic;
  }
  div.person div.thesis .thesisTitle {
    text-decoration: none;
    font-family: 'Mate Small Caps', serif;
    font-weight: normal;
    font-size: 16.5px;
    color: #f75e25;
  }
  div.person.shrink:hover {
    cursor: pointer;
  }
  div.person.shrink h4 {
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 16px;
    float: left;
    padding: 0;
    border: 0;
    margin: 0;
    max-width: calc(100% - 100px);
  }
  div.person.shrink h4 span.name {
    display: block;
  }
  div.person.shrink h4 span.info {
    display: block;
  }
  div.person.shrink img {
    width: 60px;
    height: 60px;
    float: right;
    padding: 0;
    margin: 0;
    border: 3px solid white;
  }
  div.person.shrink p,
  div.person.shrink .publication,
  div.person.shrink .gallery {
    display: none;
  }
  div.person.shrink .more {
    height: 60px;
    line-height: 60px;
    padding: 0 3px 0 3px;
    border: 3px solid white;
    text-align: center;
    display: block;
    float: right;
    font-size: 20px;
    color: #d7d7d7;
  }
  div.person.shrink .more:hover {
    color: #f75e25;
  }
  div.project {
    border: 0;
    margin: 1em 0 0 0;
    padding: 0;
    overflow: hidden;
  }
  div.project h4 {
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 19px;
    color: black;
    margin: 0 0 0.5em 0;
    padding-bottom: 3px;
    border-bottom: 1px solid #d7d7d7;
  }
  div.project h4 span.name::after {
    content: ',';
  }
  div.project img {
    width: 160px;
    height: 160px;
    float: left;
    border: 0;
    padding: 0;
    margin: 0.3ex 1.5ex 1.5ex 0;
  }
  div.project p {
    margin: 0em 0 1em 0;
  }
  div.project p span.name,
  div.project a,
  div.project p span.keyPhrase {
    text-decoration: none;
    font-family: 'Mate Small Caps', serif;
    font-weight: normal;
    font-size: 16.5px;
    color: #f75e25;
  }
  div.project .more {
    display: none;
  }
  div.project div.thesis {
    font-style: italic;
  }
  div.project div.thesis .thesisTitle {
    text-decoration: none;
    font-family: 'Mate Small Caps', serif;
    font-weight: normal;
    font-size: 16.5px;
    color: #f75e25;
  }
  div.project.shrink:hover {
    cursor: pointer;
  }
  div.project.shrink h4 {
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 16px;
    float: left;
    padding: 0;
    border: 0;
    margin: 0;
    max-width: calc(100% - 100px);
  }
  div.project.shrink h4 span.name {
    display: block;
  }
  div.project.shrink h4 span.info {
    display: block;
  }
  div.project.shrink img {
    width: 60px;
    height: 60px;
    float: right;
    padding: 0;
    margin: 0;
    border: 3px solid white;
  }
  div.project.shrink p,
  div.project.shrink .publication,
  div.project.shrink .gallery {
    display: none;
  }
  div.project.shrink .more {
    height: 60px;
    line-height: 60px;
    padding: 0 3px 0 3px;
    border: 3px solid white;
    text-align: center;
    display: block;
    float: right;
    font-size: 20px;
    color: #d7d7d7;
  }
  div.project.shrink .more:hover {
    color: #f75e25;
  }
  div.gallery {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0px auto 0px auto;
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    padding: 3px 0 3px 0;
  }
  div.gallery div.galleryPic {
    float: left;
    width: 16%;
    border: 0;
    padding: 0;
    margin: 2%;
  }
  div.gallery div.galleryPic img {
    max-width: 100%;
  }
  div.vacancy {
    border: 0;
    margin: 1.5em 0 0 0;
    padding: 0;
    overflow: hidden;
  }
  div.vacancy img {
    width: 160px;
    height: 160px;
    float: left;
    border: 0;
    padding: 0;
    margin: 0.3ex 1.5ex 1.5ex 0;
  }
  div.vacancy h4 {
    font-family: 'Mate Small Caps', serif;
    font-weight: normal;
    font-size: 18px;
    color: black;
    margin: 1em 0 0em 0;
    padding: 0;
    border: 0;
  }
  div.vacancy ul.vacancyAction {
    clear: both;
    padding: 0;
    margin: 1.3em 0 0 0;
    border: 0;
    list-style: none;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
  }
  div.vacancy ul.vacancyAction li {
    padding: 2px 6px 2px 6px;
    margin: 0;
    border: 0;
    background-color: #474a51;
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 16px;
  }
  div.vacancy ul.vacancyAction li a {
    text-decoration: none;
    color: white !important;
  }
  div.vacancy ul.vacancyAction li a:hover {
    color: #f75e25 !important;
  }
  div.vacancy ul.vacancyAction li i {
    margin-right: 4px;
  }
  div.publication {
    border: 0;
    margin: 0 0 1em 0;
    padding: 0;
  }
  div.publication .pubTitle {
    font-style: italic;
  }
  div.publication span::after {
    content: ',';
  }
  div.publication span:last-child::after {
    content: '.';
  }
  address {
    font-style: normal;
  }
  address div {
    margin-bottom: 1ex;
  }
  div.twitterFollow {
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 20px;
    color: black;
    margin: 2em 0 2em 0;
    padding: 0;
    border: 0;
  }
  div.twitterFollow a {
    text-decoration: none;
  }
  #twitter {
    padding: 0;
    margin: 1em 0 0 0;
    border: 0;
    color: #202020;
  }
  #twitter div.tweet {
    border-top: 1px solid #d7d7d7;
    padding: 10px 0 0 0;
    margin: 1em 0 1em 0;
    overflow: hidden;
  }
  #twitter div.tweet div.tweetDate {
    display: inline;
    float: left;
    font-style: italic;
  }
  #twitter div.tweet div.tweetLink {
    display: inline;
    float: right;
    font-size: 20px;
  }
  #twitter div.tweet div.tweetLink a {
    text-decoration: none;
    color: #55acee;
  }
  #twitter div.tweet div.tweetContent {
    clear: both;
    margin: 1em 0 0 0;
    padding: 1ex 0 0 0;
    border: 0;
  }
  #twitter div.tweet img.tweetMedia {
    display: block;
    margin: 1em 0 0 0;
    padding: 0;
    border: 0;
  }
  #twitter div.tweetError {
    font-style: italic;
    color: #f75e25;
  }
  #epilogue {
    height: 32px;
    width: 32px;
    margin-top: 1.5em;
    margin-bottom: 1em;
    margin-right: 10%;
    margin-left: auto;
    background-color: #f75e25;
  }
  #topMenu {
    background-color: #474a51;
    position: fixed;
    left: 10%;
    right: 10%;
    top: 20px;
    margin: 0;
    border: 0;
    padding: 5px 20px 5px 20px;
  }
  #topMenu ul {
    padding: 0;
    margin: 0;
    border: 0;
    list-style: none;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    font-family: 'Dosis', sans-serif;
    font-weight: normal;
    font-size: 17px;
    color: white;
  }
  #topMenu ul li i {
    font-size: 20px;
  }
  #topMenu ul li {
    padding: 0;
    margin: 0;
    border: 0;
  }
  #topMenu a {
    color: white;
    text-decoration: none;
  }
  #topMenu a:hover {
    color: #f75e25;
  }
}