html, body, * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
}

h1, h2, h3, h4, h5 {
  color: #293036;
  font-family: 'Lora', serif;
  margin: 0;
  font-weight: 500;
}

h1 {
  font-size: 56px;
  line-height: 76px;
}

h2 {
  font-size: 42px;
  line-height: 56px;
}

h3 {
  font-size: 24px;
  line-height: 32px;
}

h4 {
  font-family: 'Muli', sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 24px;
}

a,
p {
  color: #707980;
  font-family: 'Muli', sans-serif;
  margin: 0;
  opacity: 0.8;
}

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

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

.container {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  max-width: 640px;
  padding: 24px;
}

#hero {
  background-color: #2D2B1F;
  /*background-image: url('../img/pattern.png');*/
  height: 100vh;
}

#hero h1,
#hero p,
#hero a {
  color: #fff;
}

#hero nav {
  display: flex;
  justify-content: space-between;
  padding: 24px;
}

#hero nav p {
  flex-basis: calc(100% - 64px);
}

#hero nav .icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
  display: block;
  height: 24px;
  margin-left: 16px;
  width: 24px;
}

#hero .linkedin {
  background-image: url('../img/icon-linkedin.svg');
}

#hero .linkedin:active,
#hero .linkedin:hover {
  background-image: url('../img/icon-linkedin-pink.svg');
}

#hero .twitter {
  background-image: url('../img/icon-twitter.svg');
}

#hero .twitter:active,
#hero .twitter:hover {
  background-image: url('../img/icon-twitter-pink.svg');
}

#hero .social {
  display: none;
}

#hero .copyright {
  display: none;
}

#hero .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(90vh - 72px);
}

#hero .info h1 {
  margin-bottom: 16px;
}

#hero .info p {
  margin-bottom: 24px;
  opacity: .6;
}

#hero .info a:after {
  background-image: url('../img/icon-add.svg');
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  height: 18px;
  margin-left: 4px;
  position: absolute;
  width: 24px;
}

#hero .info a:active,
#hero .info a:hover {
  color: #DA247F;
  cursor: pointer;
}

#hero .info a:active::after,
#hero .info a:hover::after {
  background-image: url('../img/icon-add-pink.svg');
}

#bio .container {
  flex-direction: column;
}

#bio .info {
  margin-top: 32px;
}

#bio .info h2 {
  margin-bottom: 24px;
}

#bio .info p {
  margin-bottom: 16px;
}

#bio .info span {
  color: #707980;
  display: block;
  font-family: 'Muli', sans-serif;
  font-size: 14px;
  line-height: 24px;
  opacity: 0.6;
}

#bio .info a {
  color: #DA247F;
  font-size: 18px;
  line-height: 24px;
}

#bio .video {
  margin-top: 32px;
  /*max-width: 560px;*/
  width: 100%;
}

#selected-talks .container {
  flex-direction: column;
  padding-top: 0;
}

#selected-talks h2 {
  text-align: center;
  margin-top: 32px;
  padding: 0 24px;
}

#selected-talks .talk {
  margin-top: 48px;
  max-width: 460px;
}

#selected-talks .talk img {
  margin-bottom: 24px;
  width: 100%;
}

#selected-talks .talk span {
  color: #707980;
  display: block;
  font-family: 'Muli', sans-serif;
  font-size: 14px;
  line-height: 24px;
  opacity: 0.6;
}

#selected-talks .talk h3 {
  margin-bottom: 16px;
}

#selected-talks .talk .date {
  margin-top: 16px;
}

#talks-list .container {
  flex-flow: column;
}

#talks-list h4 {
  text-align: center;
  margin-bottom: 48px;
}

#talks-list ol {
  display: flex;
  flex-flow: column;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#talks-list ol h3 {
  color: #DA247F;
  margin-bottom: 8px;
}

#talks-list ol ul {
  border-top: 1px solid #E9EAEA;
  list-style: none;
  padding: 24px 0;
}

#talks-list .talk {
  display: flex;
  flex-flow: column;
  margin-bottom: 32px;
}

#talks-list .talk .event {
  color: #707980;
  font-family: 'Muli', sans-serif;
  font-size: 18px;
  line-height: 24px;
}

#talks-list .talk .title {
  color: #293036;
  font-family: 'Lora', serif;
  font-size: 18px;
  line-height: 24px;
  margin-top: 12px;
}

#talks-list .talk .date {
  color: #707980;
  font-family: 'Lora', serif;
  font-size: 14px;
  line-height: 24px;
  margin-top: 12px;
  opacity: 0.8;
}

#experience h2 {
  text-align: center;
}

#experience .container {
  padding-top: 0;
}

#experience ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin-top: 48px;
  padding: 0;
  width: 100%;
}

#experience ul .company {
  margin-bottom: 24px;
}

#experience .company .role {
  color: #707980;
  display: block;
  font-family: 'Lora', serif;
  font-size: 14px;
  line-height: 18px;
  margin-top: 16px;
}

#experience .company p {
  color: #707980;
  font-family: 'Muli', sans-serif;
  font-size: 18px;
  line-height: 24px;
  margin-top: 16px;
}

#latest-publications {
  background-color: #111111;
  padding-top: 80px;
}

#latest-publications *,
#footer * {
  color: #fff;
}

#latest-publications h2 {
  text-align: center;
  padding: 0 24px;
}

#latest-publications ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#latest-publications .publication {
  margin-top: 48px;
}

#latest-publications .publication img {
  width: 100%;
}

#latest-publications .publication p {
  margin-top: 24px;
  text-align: center;
}

#footer {
  background-color: #111111;
  padding-top: 72px;
}

#footer .container {
  flex-direction: column;
}

#footer h3 {
  font-size: 32px;
  line-height: 42px;
  margin-bottom: 8px;
}

#footer .left,
#footer .right {
  margin-bottom: 24px;
}

#footer .right p {
  opacity: 0.6;
}

#footer .right a {
  font-size: 18px;
  line-height: 24px;
  text-decoration: none;
}

#footer .bottom {
  border-top: 1px solid #404040;
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
}

#footer .bottom span {
  font-family: 'Muli', sans-serif;
  font-size: 14px;
  line-height: 24px;
}

@media (min-width: 375px) {

  #bio .video {
    min-height: 50vw;
  }
}

@media (min-width: 768px) {
  #hero {
    background-image: url('../img/hero.png');
    background-position: center;
    background-size: cover;
  }

  #hero .info {
    flex-basis: 50%;
  }

  #bio .video {
    min-height: 45vw;
  }

  #selected-talks .container {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #selected-talks h2 {
    margin-bottom: 24px;
  }

  #selected-talks .talk {
    flex-basis: calc(50% - 24px);
    margin: 24px 12px;
  }

  #selected-talks .talk h3 {
    height: 64px;
    margin-bottom: 16px;
  }

  #selected-talks .talk p {
    height: 120px;
  }

  #experience ul {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #experience ul .company {
    margin: 0 16px 32px;
    width: calc(50% - 32px);
  }

  #latest-publications ul {
    flex-direction: row;
  }

  #latest-publications .publication {
    flex-basis: calc(33.33% - 8px);
  }

  #latest-publications .publication:nth-child(2) {
    margin: 48px 16px 0;
  }

  #footer .container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #footer .left,
  #footer .right {
    flex-basis: 50%;
  }

  #footer .right {
    text-align: right;
  }

  #footer .right p {
    margin-top: 16px;
  }

  #footer .bottom {
    flex-basis: 100%;
  }
}

@media (min-width: 1024px) {

  .container {
    max-width: 1280px;
  }

  #hero .container {
    padding: 0 0 0 90px;
  }

  #bio .container {
    flex-direction: row;
    padding: 24px 90px;
  }

  #bio .info {
    flex-basis: 50%;
  }

  #bio .info h2,
  #bio .info p {
    max-width: 480px;
  }

  #bio .video {
    flex-basis: 50%;
    margin-top: 88px;
    max-height: 315px;
    min-height: 0;
  }

  #selected-talks {
    margin-top: 60px;
  }

  #selected-talks .container {
    flex-wrap: nowrap;
    padding: 0 90px;
  }

  #selected-talks h2 {
    margin: 0;
  }

  #selected-talks .talk {
    flex-basis: 33.33%;
    margin: 48px 12px;
  }

  #selected-talks .talk h3 {
    height: 96px;
  }

  #selected-talks .talk p {
    height: 96px;
  }

  #talks-list {
    margin-top: 60px;
  }

  #talks-list .container {
    padding: 0 90px;
  }

  #talks-list .talk {
    flex-direction: row;
  }

  #talks-list .talk .event,
  #talks-list .talk .date {
    flex-basis: 25%;
  }

  #talks-list .talk .title,
  #talks-list .talk .date {
    margin-left: 24px;
    margin-top: 0;
  }

  #talks-list .talk .title {
    flex-basis: 50%;
  }

  #talks-list .talk .date {
    text-align: right;
  }

  #experience {
    margin-top: 60px;
    margin-bottom: 80px;
  }

  #experience .container {
    padding: 0 90px;
  }

  #experience ul .company {
    margin: 0;
    width: calc(33% - 8px);
  }

  #experience ul .company:nth-of-type(2){
    margin: 0 16px;
  }

  #latest-publications .container {
    padding: 0 90px;
  }

  #footer .container {
    padding: 0 90px 32px;
  }
}

@media (min-width: 1440px) {
  #hero .container {
    padding: 0 90px;
  }

  #selected-talks .talk h3 {
    height: 64px;
  }
}