:root{ 
    --dark: #0f3b60;
    --light: #1ca4a6;
    --active: #98c01e; 
    --dl-grad: linear-gradient(270deg,#0f3b60, #1ca4a6);
    --field: #f6f6f6;
    --field-header: linear-gradient(to top, #f6f6f6, #1ca4a6);    
    --1: #000000;
    --2: #abb8c3;
    --3: #FFF;
    --4: #f78da7;
    --5: #cf2e2e;
    --6: #ff6900;
    --7: #fcb900;
    --8: #7bdcb5;
    --9: #00d084;
    --10: #8ed1fc;
    --11: #0693e3;
    --12: #9b51e0;
    --13: #98c01e;
    --14: #111;
    --15: #767676;
    --16: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
    --17: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
    --18: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
    --19: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
    --20: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
    --21: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
    --22: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
    --23: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
    --24: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
    --25: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
    --26: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
    --27: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);       
  }

  @font-face {
    font-family: Nunito;
    src: url(fonts/Nunito/Nunito-VariableFont_wght.ttf);
  }

  @font-face {
    font-family: Nunito;
    src: url(fonts/Nunito/Nunito-Italic-VariableFont_wght.ttf);
    font-style: italic;
  }


  *{
    margin: 0;
    padding: 0;
    font-family: Nunito;
    text-align: justify;
	/*border: 1px solid red; */
  }

  body{
    margin:0;
  }


.header-image{
  width:100%; 
  height:10rem; 
  background:var(--dark); 
  display: inline-flex; align-items: center;
}

.header-text{
  width: 100%;  
  background: var(--dark);
  color: white;
  font-size: x-large;
  margin-top: -1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.header-text p{
  text-align: center;
  text-justify: auto;
  clear: both;
}

  .menu{
    width:100%;
    height: 5rem;
    position: sticky;
    background-color: white;
    top:0;
    z-index: 1;
    box-shadow: 0 0 15px 1px var(--2); 
    margin-bottom:5em; 
  }
  
  .menu-item{
    font-size: large;
    text-align: left;
  }
  
  .vl{
    border-left: 2px solid var(--dark);
    height:40%;
  }

  .menu ul {
    list-style-type: none;
    margin-left: 10rem;
    margin-right: 10rem;
    padding: 0;
    height: 5rem;
    display: inline-flex;
    justify-content: space-around;
  }
  
  .menu ul li {
    display: inline-flex;
    height: 5rem;
    align-items: center;
    margin-left: 3rem;
    margin-right: 3rem;
  }

  .menu {
    font-weight: bold;
    color: var(--dark);
    transition:0.3s;
  }

  .menu ul li div a{
    text-decoration: none;
    color: var(--dark);
  }

  .menu ul li div a.menu-active{
    color: var(--active);
    border-bottom: 2px solid var(--active);
  }


  .menu ul li div a:hover{
    color: var(--active);
    border-bottom: 2px solid var(--active);
    transform: scaleX(1);
    transform-origin: center;
  }

  div.content{
    padding-left: 20rem;
    padding-right: 20rem;
  }

  .item{
    background-color: var(--field);
    padding:2rem;
  }

  h1.item{
    margin: 1rem 0 0 0;
    padding: 1rem 0 2rem 2rem;
    color: var(--dark);
    background: var(--field-header);
  }

  .item-link{
    display:block;
    margin-top:2rem;
    color: var(--active);
    font-weight: bold;
    text-decoration: none;
    transition:0.3s;
  }

  .item-link:hover{
    text-decoration: underline;
  }

  .arrow-right{
    border: solid var(--active);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }


.palette{
  display: flex;
  flex-wrap: wrap;
  margin:5rem;
}

.view-all-container{
  width: 100%;
  background-color: var(--dark);
  height: 6rem;
  margin-top: 5rem;
}

.view-all{
  background-color: var(--dark);
  color: white;
  border: 2px solid white;
  font-weight: bold;
  padding:1rem;
  border-radius: 0.5rem;
  min-width:fit-content;
  display: flex;
  float: right;
  margin-right: 2rem;
  margin-top: 2rem; 
  text-decoration: none;
}

.view-all:hover{
  color:var(--dark);
  background-color: var(--active);
}

.news-header{
  color: white;
  position: relative;
}

.news-header p{
  display: flex;
  float: left;
  margin-left: 2rem;
  margin-top: 2rem;
  font-weight: bold;
  font-size: xx-large;
}

.slideshow-container {
  box-sizing: border-box;
  background-color: var(--dark);
  position:relative;
  width: 100%;
  min-height:fit-content;
  margin: 0 auto 5rem auto;
  overflow: hidden;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  padding:2rem;
}

.slide {
  display: none;
  background-color: white;
  border:1px solid white;
  box-shadow: 2px 2px 5px white;
  width: 30%;
  height: fit-content;
}

.slide-picture{
  width:100%;
  position: relative;
  margin-bottom:0.1rem;
}

.slide-picture-img{
  width: 100%
}

.news-date{
  position:absolute;
  background-color: white;
  color: var(--dark);
  border-radius: 1rem;
  text-align: center;
  display:flex;
  width: fit-content;
  padding: 0.5rem;
  margin-right: 1rem;
  margin-top: 1rem;
  top:0;
  right:0;
  font-weight:900;
  display: block;
}

.news-date p{
  text-align: center;
  padding: 0.1rem;
  margin: 0;
  
}

.day{
  font-size: x-large;
  border-top:1px solid var(--active);
  border-bottom: 1px solid var(--active);
}

.slide-header{
  color: var(--dark);
  margin-left:1.5rem;
  font-weight: bold;
  font-size: large;
  margin-top:0;
  margin-bottom:0;
  position: relative;
  text-align: left;
}

.slide-text{
  position: relative;
  padding:  0.5rem 1.5rem 0 1.5rem;
  overflow-y: hidden;
}

.slide .item-link{
  margin-left: 0;
  margin-bottom:1.5rem;
  margin-top:0.5rem;
  position: relative;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: var(--dark);
  background-color: var(--active);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;  
}

.prev{
  left:0;
  border-radius: 0 3px 3px 0;
}

.next{
  right: 0;
  border-radius: 3px 0 0 3px;
}

.social-media{
  width: 100%;
  margin-top:5rem;
  display: inline-flex;
  align-items: center;  
  justify-content: space-around;
}

.smbutton{
  margin-right:2rem;
}

.smbutton:hover .smimage{
  height:6rem;
}

.smimage{
  height: 5rem;
}


/*---------------NEWS----------------*/

.row{
  margin-top:5rem;
  margin-left: 20rem;
  margin-right: 20rem;
  display: flex;
}

.leftcolumn h1{
  font-size: x-large;
  
}

.leftcolumn div.item{
  margin-bottom:3rem;
}

.leftcolumn{
  box-sizing: border-box;
  background-color: var(--field);
  float:left;
  width: 75%;
  padding:2rem;
  margin-right: 2rem;
}

.rightcolumn{
  box-sizing: border-box;
  background-color: var(--field);
  float:right;
  width: 22%;
  padding:2rem;
}

ul.news{
  list-style-type: none;
}

li.news{
  margin-bottom: 1rem;
}

a.news{
  text-decoration: none;
  color: var(--active);
  font-weight:400;
  font-size: large;
  text-align: left;
}

a.news:hover{
  text-decoration: underline;
}


/*---------------ABOUT US----------------*/

.photo-box{
  width: 90%;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.photo-credit{
  position: absolute;
  right:0.25rem;
  bottom:0.5rem;    
}

.photo-credit p{
  background: var(--dark);
  opacity: 0.5;
  color: var(--field);
  padding:0.5rem;
  border-radius: 0.5rem;
}

.spacer{
  height: 10rem;
  background-color: white;
}

div.content-aboutus{
  padding-left: 20rem;
  padding-right: 20rem;
}

.item-aboutus{
  background-color: var(--field);
  padding:2rem;
}

h1.item-aboutus{
  margin: 2rem 0 0 0;
  padding: 1rem 0 2rem 2rem;
  color: var(--dark);
  background: var(--field-header);
  text-align: left;
}

details{
  margin-top: 2rem;
}

summary{
  font-weight: bold;
  color:var(--active);
  list-style-image: none;
}

.lead{
  margin-top: 0.5rem;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;  
}

.flag{
  height: 1.5rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.institution{
  height:5rem;
  margin-left: 2rem;
  vertical-align: middle;
}

.person{
  overflow: auto;
}

.person-pic{
  height: 10rem;
  float: right;
  margin: 0 0 0 2rem ;
  border: 2px solid var(--active);
  box-shadow: 0 0 15px 1px var(--2); 
}

.participants{
  table-layout: auto;
}

.participants td{
  padding: 0.5rem;
}

.participants td:first-child{
  width: 60%;
}

.funders{  
  background: var(--dl-grad);
  margin-left: 20rem;
  margin-right: 20rem;
}

.funders-container{
  display:flex;
  flex-wrap: wrap;
  padding: 2rem;
  justify-content: space-around;
  align-content: space-around;
}

.funder-logo{
  height:5rem;
  padding:1rem;
}


/*--------------PEOPLE-----------*/

.people{
  table-layout: auto;
  text-align: start;
  padding-left: 2rem;
  padding-right: 2rem;
}

.people th{
  padding: 1rem;
  background: var(--dark);
  color: white;
  font-weight: bolder;
  text-align: left;
}

.people td{
  padding:1rem;
  text-align: left; 
  border-bottom: 1px solid var(--dark);
}

.people td div{
  text-align: left;
}

.people td div:not(:last-child){
  margin-bottom: 1rem;
}

.people td:nth-child(3){
  text-align: center;
}

.people td:nth-child(5) div{
  text-decoration: dashed;
}

.portrait{
  width: 100%;
  height: 4rem;
  width: 4rem;
}

.twitter-feed{
  margin-bottom:5rem;
}


@media only screen and (max-width: 1800px) {

  div.content, div.content-aboutus {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .funders{      
    margin-left: 5rem;
    margin-right: 5rem;
  }
}

@media only screen and (max-width: 1200px) {

  .menu ul li div a{
    text-decoration: none;
    color: var(--dark);
    font-size: smaller;
  }

  .menu ul {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .menu ul li {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  
  .day, .month, .year{
    font-size: smaller;
  }

  div.content, div.content-aboutus {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .institution{
    height:3rem;
  }

  .funders{
    margin-left: 1rem;
    margin-right: 1rem;
  }
}