/* STYLE FOR KIMBENTE.COM 3.0 */
@import url(//db.onlinewebfonts.com/c/08fd6ffb87aac63ca5d4a4da848f4b86?family=Wolpe+Pegasus);
@font-face {font-family: "Wolpe Pegasus"; src: url("//db.onlinewebfonts.com/t/08fd6ffb87aac63ca5d4a4da848f4b86.eot"); src: url("//db.onlinewebfonts.com/t/08fd6ffb87aac63ca5d4a4da848f4b86.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/08fd6ffb87aac63ca5d4a4da848f4b86.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/08fd6ffb87aac63ca5d4a4da848f4b86.woff") format("woff"), url("//db.onlinewebfonts.com/t/08fd6ffb87aac63ca5d4a4da848f4b86.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/08fd6ffb87aac63ca5d4a4da848f4b86.svg#Wolpe Pegasus") format("svg"); }


*{
  margin: 0;
  padding: 0;
}

body{
  font-family: "Rubik", Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
}

/**/
p{
  font-family: "Rubik", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.8em;
  /*text-align: justify;*/
}

a{
  /* Don't change color because it is a link */
  /*color: inherit; */
  text-decoration: none;
}

/* Links in sections */
section a:hover{
  color: #5B3BF9;
}

section a{
  color: #5B3BF9;
}

/* Footer logo */
h2 a:hover{
  color: black;
}

/**/
/* Kim Bente logo */
h1{
  font-family: 'Wolpe Pegasus', Times, serif;
  font-weight: 700;
  /* font size relative to viewport width */
  font-size: 12vw;
  color: #fcfaf7;
  line-height: 1.0;
}

/* Footer logo */
h2{
  font-family: 'Wolpe Pegasus', Times, serif;
  font-weight: 700;
  font-size: 5vw;
  color: #fcfaf7;
  display: inline;
}

/* Section headings */
h3{
  font-family: 'Wolpe Pegasus', Times,  serif;
  font-weight: 400;
  /* 2.5 vw */
  font-size: 2.5rem;
  color: black;
  display: inline;
  line-height: 1.3;
}

/* Section headings */
h4{
  font-family: 'Courier New', Courier, monospace;
  font-weight: 400;
  font-size: 1rem;
  color: black;
  display: inline;
  line-height: 1.3;
}

/* subtitle lists */
h5{
  font-family: "Rubik", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.8em;
  color: black;
  display: inline;
  line-height: 1.3;
}

/* top  navigation bar */
.topnav{
  /* stays when scrolling */
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  height: 60px;
  justify-content: space-evenly;
  z-index: 0;
}

.topnav a{
  font-family: 'Raleway', Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  color: #fcfaf7;
  text-align: center;
  vertical-align: middle;
  padding-top: 25px;
  justify-content: space-between;
}

.topnav a:hover{
  color: #5B3BF9;
}


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

/**/

.container_all{
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.column-wrapper{
  display: flex;
}

section{
  display: flex;
  padding-top: 4em;
  margin-left: auto;
  margin-right: auto;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  text-align: left;
  width: 80%;
}

header.topbar{
  overflow: hidden;
  padding: 16px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
}

.full_height{
  height: 100vh;
}

.container-logo{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  height: 75%;
  vertical-align: middle;
}

/* Centered text */
.center{
  position: relative;
  top: 50%;‚
  left: 50%;
  text-align: center;
}

.main{
  margin-top: 100px;
  padding: 12px;
}

.active{
  color: black
}

.loader{
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader.hidden{
  animation: faceOut 1s;
  animation-fill-mode: forwards;
}

.column-left{
  flex: 30%;
}

.column-right {
  flex: 70%;
  padding-top: 0.5em;
  padding-left: 3em;
}

@keyframes faceOut {
  100%{
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes background_fading {
  0% {
    background-color: #f7cf20;
  }
  50% {
    background-color: #e4c3a6;
  }
  100% {
    background-color: #f7cf20;
  }
}

.color_trainsition_background {
    transition: background-color 10s linear;
    animation: background_fading 5s infinite;
}

#footerwrapper{
  width: 80%;
  margin: auto;
  margin-top: 5%;
  margin-bottom: 5%;
  /* margin on the sides of the content. auto to have the space equally divided to both sides */
}

#about p{
    padding-right: 4em;
    margin-bottom: 1.8em;
}

#aboutmail {
    color: #5B3BF9;
}

/* FAVOURITES */
.favourites-list{
    list-style-type: none;
    line-height: 1.8;
    padding-top: 2em;
}
.favourites-list li{
    padding-top: 1.5em;
}

.favourites-list a:link{
    color: #5B3BF9;
}


.favourites-list #showlinks{
    color: #464451;
}

/* Education */
.education-list {
  list-style-type: none;
  line-height: 1.8;
}

.education-list li{
  font-weight: 400;
  margin-bottom: 1.5em;
}

/* Publications */
.publications-list{
  list-style-type: none;
  line-height: 1.8;
}

.publications-list li{
  font-weight: 300;
  margin-bottom: 1.5em;
}

/* Conferences */
.conferences-list{
  list-style-type: none;
  line-height: 1.8;
}

.conferences-list li{
  font-weight: 300;
  margin-bottom: 1.5em;
}


/* Research Interests */
.researchinterests-list {
    list-style-type: none;
    font-weight: 300;
}

.researchinterests-list li{
  font-weight: 400;
  margin-bottom: 1.5em;
}

/* Education */
.contact-list{
    list-style-type: none;
}

.text_centered{
  text-align: center;
}
.sections_container{
  z-index: 1;
}

#legal-footer{
  position: relative;
  display: flex;
  padding-left: 40px;
  padding-bottom: 20px;
  font-family: 'Wolpe Pegasus', Times, serif;
  font-weight: 400;
  font-size: 70%;
}

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

/* 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: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding-right: 30px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    padding-left: 20px;
  }

  .topnav.responsive {
    float: none;
    display: block;
    text-align: left;
  }
}

/* used for JS */
.hide-navbar{
 display: none;
}

img{
    width: 45%;
    padding-bottom: 1em;
    padding-left: 1.5em;
    padding-top: 0.5em;
    float: right;
}

/* buttons */
.social.fa {
  padding-top: 20px;
  padding-right: 15px;
  font-size: 40px;
  width: 60px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

/* buttons */
.social.ai {
  padding-top: 20px;
  padding-right: 15px;
  font-size: 40px;
  width: 60px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}