/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 versions
*/

/*Global styles */
*, p, h1, h2, h3, ul, ol {
    margin: 0;
    padding: 0;
  }

  @font-face {
    font-family: 'Centrale Sans Regular';
    src: url(https://static.igem.org/mediawiki/2020/5/5e/T--Leiden--CentraleSansRegular.eot);
    src: url(https://static.igem.org/mediawiki/2020/5/5e/T--Leiden--CentraleSansRegular.eot?#iefix) format('embedded-opentype'),
    url(https://static.igem.org/mediawiki/2020/9/97/T--Leiden--CentraleSansRegular.woff) format('woff'),
    url(https://static.igem.org/mediawiki/2020/1/1b/T--Leiden--CentraleSansRegular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
    }

ul {
  list-style-type:none;
  list-style-image: none;
}
body {
  background-color: #fff;
  font-family:  'Centrale Sans Regular', Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: normal;
} 

h1 {
  border-bottom:none;
}
h1, h2, h3, h4 {
font-family:  'Centrale Sans Regular', Arial, Helvetica, sans-serif;
}

a, a:hover, a:visited, a:focus{
  text-decoration: none;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 75px;
}

html, body {
 height: 100%;
}

.grid-normal {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(10px, 1fr) (minmax(50px, 300px))[5] minmax(10px, 1fr);
  grid-template-columns: minmax(10px, 1fr) repeat(5, minmax(50px, 300px)) minmax(10px, 1fr);
}
.hyperlink {
  color: #007972;
  text-decoration: underline;
}

.hyperlink:visited{
  color: #007972;
}
.hyperlink:hover{
  color:#63cabc;
  text-decoration: underline;
}

.hyperlink-dark {
  color: #63cabc;
  text-decoration: underline;
}

.hyperlink-dark:visited{
  color: #63cabc;
}
.hyperlink-dark:hover{
  color:#007972;
  text-decoration: underline;
}
.orange {
  color: #FE9901;
}

.highlight {
  font-weight: bold;
  color: #fe9901;
}
.green-highlight {
  font-weight: bold;
  color: #007972;
}

.margin-normal{
  margin:auto;
}
/************ Skip-main ****************/
a.skip-main {
  left: -999px;
  position: absolute;
  top: 3em;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -999;
  -webkit-transition: 0.3s all;
  -o-transition: 0.3s all;
  transition: 0.3s all;
}
a.skip-main:focus {
  left: 3em;
  top: 3em;
  width: 30%;
  height: auto;
  overflow: auto;
  padding: 5px;
  font-size: 1.2em;
  color: #212832;
  background-color: #ffffff;
  text-align: center;
  z-index: 999;
  -webkit-transition: 0.3s all;
  -o-transition: 0.3s all;
  transition: 0.3s all;
}
/*********** static switch ***********/

div.StatDynSwitch {
  position: fixed;
  display: block;
  bottom: 5em;
  right: 8em;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: -10px 10px;
}

.switch input {
  display: none
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5e5e5;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  -webkit-box-shadow: 0px 0px 5px #ffffff;
  box-shadow: 0px 0px 5px #ffffff;
}


.switch-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #ffffff;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
}

input:checked+.switch-slider {
  background-color: #212832;
}

input:checked+.switch-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
      transform: translateX(26px);
}

.switch-slider {
  border-radius: 34px;
}

.switch-slider:before {
  border-radius: 50%;
}

.StatDynSwitch>span {
  display: inline-block;
  font-size: 20px;
  text-shadow: 0px 0px 5px #f7f7f7;
}
/************Circles / crowdfunding *************/
.circle {
  border-radius: 50%;
  
}
.crowdfunding-text-container {
  background-color: #ffffffab;
  border-radius: 10px;
  width:80%;
  margin: auto;
  padding: 2em;
  border: solid 3px #e5e5e5;
}
.crowdfunding-container {
  width: 70%;
  margin: auto;
}

#donate-button {
  font-size: 1.375em;
  font-weight: bold;
  background-color: #ffffff;
  color: #212832;
  padding: 0.5em;
  border: solid 3px #212832;
  border-radius: 10px;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  display: inline;
}
#donate-button:hover, #donate-button:active{
  background-color: #212832;
  color: #ffffff;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.donate-button-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 1em;
}

#main-body-crowd {
  max-width: none;
}

/*************** LOADER *************************/
.loader-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffffff;
  z-index: 10000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

}
.loader-wrapper h2 {
  font-size: 5em;
  color: #FE9901;
  text-align: center;
  position: relative;
  top: -1em;
}

.loader {
  color: #FE9901;
  width: 40%;
}

.loader img {
  width: 100%;

}

@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
  }
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
  }
}
/********PAGE TRANSITIONS ************/
.animate-in {
  -webkit-animation: fadeIn 0.5s ease-in;
  animation: fadeIn 0.5s ease-in;
}

.animate-out {
  -webkit-transition: all 3s;
  -o-transition: all 3s;
  transition: all 3s;
  opacity: 0;
}

@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/******* HOME PAGE *****************/
.video-div { 
  padding: 0 6em;
  background-color: #212832;
}
#video-banner{
  width: 100%;
}

.arrow-down {
  position: absolute;
  top: -5em;
  left: 49%;
  opacity: 0;
  -webkit-transition: 2s all;
  -o-transition: 2s all;
  transition: 2s all; 
}

.arrow-down-scroll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  top:-50px;
  font-size: 6em;
  color: #fff;
}
.arrow-down-scroll2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  font-size: 4em;
  color: #fff;
}

.pulse {
  position: absolute;
  -webkit-animation: pulse 2s linear infinite;
          animation: pulse 2s linear infinite; 
}


@-webkit-keyframes pulse {
  0% {
       opacity: 1;
       -webkit-transform: scale(1);
               transform: scale(1);
  }
  40% {
    opacity: 0.8;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  80% {
    opacity: 0.5;
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
   
  }
}


@keyframes pulse {
  0% {
       opacity: 1;
       -webkit-transform: scale(1);
               transform: scale(1);
  }
  40% {
    opacity: 0.8;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  80% {
    opacity: 0.5;
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
   
  }
}
.figure-wrapper-align-start{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.main-page-home-section {
  position: relative;
  max-width: 1300px;
  margin: auto;
  padding: 3em 3em 0 3em ;
}

.home{
  background-image: url(https://static.igem.org/mediawiki/2020/0/09/T--Leiden--BackgroundContinuous1.png);
  background-repeat: repeat;
  background-size: 1200px;
}
.circle-box{
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: -1;
}


#circle-small{
  top: 10em;
  left: -3em;
  z-index: -1
}


#circle-green{
  background-color:#007972; 
  border:  #0d5450 solid 10px;
  z-index: -1;
  margin: -5em;
  right: 3em;
}

.circle-content{
  color: #212832;
  text-align: justify;
  padding: 3em;
}

.circle-content h3{
  text-align: center;
  padding-bottom: 1em;
  font-size:2em;
 
}

.arrow .figure-container img{
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.arrow {
  margin: -9% 0;
}
.arrow .figure-container {
  width: 15%;
  margin: auto;
}
#arrow1 {
  margin: -10% 0;
}
#arrow2 .figure-container img, #arrow4 .figure-container img {
  -webkit-transform: rotate(190deg);
      -ms-transform: rotate(190deg);
          transform: rotate(190deg);
}

#arrow2  img{
  position: relative;
  left: 12em;
}

#arrow3 img {
  position: relative;
  left: -9em;
}
#arrow4 img {
  position: relative;
  left: 12em;
}

#arrow3 .figure-container {
  width: 10%;
}

.bacteria {
  border-style: solid;
  border-width: 100px;
  border-image-source: url(https://static.igem.org/mediawiki/2020/8/8c/T--Leiden--BacteriumBoxFilled.png);
  border-image-slice: 33.3333333333333333333333% fill ;
  border-image-repeat: round;
  border-image-width: 1.5;
 
  

  
  
}

.virus {
  border-style: solid;
  border-width: 50px;
  border-image-source: url(https://static.igem.org/mediawiki/2020/d/d0/T--Leiden--VirusBox.png);
  border-image-slice: 27% fill ;
  border-image-repeat: round;
  border-image-width: 2;
  padding: 0
}

.virus-transparent{
  border-style: solid;
  border-width: 40px;
  border-image-source: url(https://static.igem.org/mediawiki/2020/d/dd/T--Leiden--VirusBoxTransparent.png);
  border-image-slice: 27% fill ;
  border-image-repeat: round;
  border-image-width: 2;
  padding: 0;
}
.bacteria-transparent {
  border-style: solid;
  border-width: 100px;
  border-image-source: url(https://static.igem.org/mediawiki/2020/7/7e/T--Leiden--BacteriumBoxTransparent.png);
  border-image-slice: 33.3333333333333333333333% fill ;
  border-image-repeat: round;
  border-image-width: 1.5;
}

.bacteria-transparent.figure-container, .virus-transparent.figure-container {
  margin: auto;
}

.gear-information {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.gear-text-box {
  max-width: 30%;
  min-width: 400px;
  border-radius: 150px;
  margin: 1.5em 0;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.gear-text-box:nth-child(even) {
  border: 10px solid #63cabc;
  background-color: #b8eee7;
}
.gear-text-box:nth-child(odd) {
  border: 10px solid #fe9901;
  background-color: #ffd8a1;
}

.gear-text-box-content{
  padding: 4em;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.gear-text-box h2{
  text-align: center;
  margin-bottom: 0.5em;
}

.gear-text-box p {
  text-align: justify
}
.corner-gear img {
width:100%;
}
.corner-gear {
  position: absolute;
  right: 100%;
  bottom: 100%;
  width: 30%;
  margin:-6em;
}

.corner-gear:hover{
  -webkit-animation: spin 4s infinite linear;
          animation: spin 4s infinite linear
}
/**** Readmore Home buttons ******/
.more-button {
  padding: 2em 0 ;
  margin-top: auto;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  }
.more-content {
  padding: 1em;
  border: solid 3px #212832;
  border-radius:30px; 
  -webkit-transition: all 0.3s; 
  -o-transition: all 0.3s; 
  transition: all 0.3s;
  z-index: 1;
}
a.more-content{
  font-weight: bold;
  color: #212832;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor:pointer;
  z-index: 10;
}
    
a.more-content:hover{
  color: #ffffff;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.more-content:hover { 
  background-color: #212832;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.references-box {
  background-color: #fff;
  padding: 3em;
  margin-bottom: 0;
  border-top-left-radius: 70px;
  border-top-right-radius: 70px;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  grid-column: 3/6

}
/******* HOME SEGMENTS ****************/
.grey-segment {
  background-color: #e5e5e5;
  overflow-x: hidden;
}
.darkgrey-segment {
  background-color: #666666;
  color: #fff;
  overflow-x: hidden;
}

.whiteread {
  color: #fff;
  border: #fff;
}

.whiteread:hover {
  background-color: #fff;
}

.segment-container {
  width: 80%;
  margin: auto;
  padding: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.segment-figure, .segment-text {
  width: 35%;
  margin: 1em;
}
.segment-figure img {
  width: 100%;
  border-radius: 10px;
}

.segment-text h1{
  padding-bottom: 0.3em;
  font-size: 1.5em;
}

.segment-text {
  text-align: justify;
}

.from-left{
  -webkit-transform: translateX(-80%);
      -ms-transform: translateX(-80%);
          transform: translateX(-80%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}

.from-right{
  -webkit-transform: translateX(80%);
      -ms-transform: translateX(80%);
          transform: translateX(80%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}

.from-left.appear, .from-right.appear{
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
  opacity: 1;
}

/************************ HEADER ******************************/
header {
  background: url(https://static.igem.org/mediawiki/2020/f/f1/T--Leiden--banner-min.png);
 min-height: 140px;
 max-height: 360px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/****** Navbar ******/
nav {
  background-color: #2128323d;
  -webkit-box-shadow:  10px 0 5px #2128327a;
          box-shadow:  10px 0 5px #2128327a;
  width: 100%;
  position: fixed;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 1000
}

#normal-nav {
  display: block;
}


.dark-nav{
  background-color:  #212832;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.logo {
  position: absolute;
  top: 5px;
  padding-left: 1em;
  z-index: -1;
}

.hidden-logo {
  opacity: 0;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  padding: 1em;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  width: 70%;
  margin: auto;
}

.hidden-logo img{
  width: 100%;
 
}

.hidden-logo:hover {
  opacity: 1;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
#nav-logo {
  width: 13%;
} 

.chapters {
  padding-top: 1.6em;
  padding-right: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  
}

.chapter-content {
  padding-right: 1em;
  padding-left: 1em;
  padding-bottom: 1em;
  color: #fff;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
}

.chapter-nav {
  z-index: 2;
}


a.chapter-nav, 
a:active.chapter-nav,
a:visited.chapter-nav  {
  color: white;
}

.chapter-icon {
  padding-left: 0.5em;
  position: relative;
  top: -3px;
}

.chapter-active {
  font-weight: bold;
}
#chapter-award {
  font-size: 1.5em;
  position: relative;
  top: -9px;
}

/******* Mobile nav-bar styles *******/
#mobile-nav {
  display: none;
  z-index: 2;
}

.hamburger {
  color: #fff;
  font-size: 1.8em;
  padding: 0.3em;
  float: right;
  z-index: 2;
  cursor: pointer;
 
}

.mobile-nav {
  padding: 0.5em;
  z-index: 2;
  
}

.mobile-sidenav{
  height: 100%;
  width:0;
  position: fixed;
  z-index: 1;
  top:5.1em;
  right: 0;
  background-color: #e5e5e5;
  overflow-x: hidden;
  padding-top: 60px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  opacity: 97%;
}

.mobile-sidenav a{
  padding: 0.8em 0.8em 0.8em 2em;
  font-size: 1em;
  color: #212832;
  display: block;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.mobile-sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 1em;
  font-size: 1.375em;
  margin-left: 2em;
  padding-bottom: 0
}

#mob-chapter-award{
  font-size: 1.5em;
}
/* Change size for lower screens */
@media only screen and (max-height: 500px) {
  .mobile-sidenav a{
    padding-top: 0;
    font-size: 0.8em;
  }
}

/********Mobile dropdown menu ******/
.mobile-dropdown-content{
  padding-left: 2em;
  list-style: none;
  font-style: italic;
  display: none;  
}

/* Dropdown menu */ 
.dropdown-menu {
  z-index: 3;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  top: 4em;
  background-color: #e5e5e5;
  opacity: 0;
  min-width: 160px;
  max-width: 220px;
  z-index: -2;
  padding: 0.8em 0;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #212832;
  padding: 0.5em  1em;
  text-decoration: none;
  display: block;
}


/* Show the dropdown menu on hover */
.dropdown-menu:hover .dropdown-content {
  display: block;
  -webkit-animation: dropdown 1s forwards;
          animation: dropdown 1s forwards;
}

@-webkit-keyframes dropdown {
  100% {
    opacity: 0.95;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  0% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
}

@keyframes dropdown {
  100% {
    opacity: 0.95;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  0% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
}

/********* cool link **************/
.cool-link::after {
  content: "";
  display: block;
  position: relative;
  width: 0;
  top: -0.5em;
  opacity: 0;
  height: 3px;
  background: #FE9901;
  margin: auto;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.cool-link:hover::after {
  width: 90%;
  height: 3px;
  opacity: 1;
  position: relative;
  margin: auto;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}


.cool-link2::after {
  content: "";
  display: block;
  position: relative;
  width: 0;
  height: 3px;
  background: #FE9901;
  margin: auto;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.cool-link2:hover::after {
  width: 90%;
  height: 3px;
  position: relative;
  opacity: 1;
  margin: auto;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

/****** Page-title******/

.page-title {
  padding-top:5em;
}
.page-title-content h1 {
  color: white;
  font-size: 4em;
  font-weight: normal;
  text-align: center;
}

/**************** Introduction **********************/

.introduction {
  width: 100%;
  background-color: #212832;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
  grid-column: 1 / 8;
  border-bottom: 10px solid #FE9901;
 
}

.introduction-content {
  color: white;
  -ms-grid-column: 3;
  -ms-grid-column-span: 3;
  grid-column: 3/6;
  padding: 2em 1em;
  text-align: justify;
}
/******************* Arrow ******************/
.triangle-down {
  width: 0;
  height: 0;
  position: relative;
  right: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 40px solid #FE9901;
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  z-index: 0;
}
/********************* Buttons ************************/
.buttons {
    margin-left: 270px;
    margin-right: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.button-name {
  width: 20%;
  text-align: center;
  cursor: pointer;
  background-color: #ffe6c4;
  border-radius: 10px;
}

.button-name a {
  color: #212832;
  font-size: 1.375em;
  cursor: pointer;
  display: block;
  padding: 1em 0;
}
.active{
  font-weight: bold;
}
/*********************** READ MORE BUTTON ************/
.readmore-button {
padding: 2em 0 ;
}

.odd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
 
}

.even {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.readmore-content {
padding: 1em;
border: solid 3px #212832;
border-radius:30px; 
-webkit-transition: all 0.3s; 
-o-transition: all 0.3s; 
transition: all 0.3s;
z-index: 1;

}
a.readmore-content{
  font-weight: bold;
  color: #212832;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor:pointer;
  z-index: 10;
}
  
a.readmore-content:hover{
  color: #ffffff;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.readmore-content:hover { 
  background-color: #212832;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.readmore-white {
  padding: 1em;
  border: solid 3px #fff;
  border-radius:30px; 
  -webkit-transition: all 0.3s; 
  -o-transition: all 0.3s; 
  transition: all 0.3s;
}
a.readmore-white{
  font-weight: bold;
  color: #fff;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor:pointer;}
    
a.readmore-white:hover{
  color: #212832;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.readmore-white:hover { 
  background-color: #fff;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
} 
/************ Sub navigation  *********************/
aside {
  width: 240px;
  float: left;
  padding-top: 5em;
}

.grid-aside {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -ms-grid-row: 1;
      grid-row-start: 1;
}

.sub-navigation-content {
  padding:2em 0;
  border-right: solid 3px #FE9901;
  max-width: 220px
}

.sub-navigation-chapter a{
  color: #212832;
  font-size: 1.2em;
  padding: 0.3em 0.3em 0 0.5em;
  display: block
}

a.main-nav-link.active {
  font-weight: normal;
  color: #fe9901;
}

.main-nav-link {
  cursor: pointer;
}

#to-top-arrow a, #to-top-arrow a:visited, #to-top-arrow a:active{
  color: #FE9901;
  font-size: 2em;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  padding: 1em 2em 0 2em;
  display: block
}

#to-top-arrow a:hover{
  color: #ffb444;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

/* Class that is added to subnav by JS to keep it sticky */
.sticky {
  position: -webkit-sticky; 
  position: sticky;
  top: 1em;
}

/************ Carousel ***********************/
.sections-container{
  width: 90%;
  margin:  auto;
}

.carousel {
  overflow: hidden;
  position: relative;
  -ms-grid-column: 3;
  -ms-grid-column-span: 4;
  grid-column: 3/7;
  -ms-grid-row: 1;
      grid-row-start: 1;
}

.slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 400%;
  height: 100%;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.slider section {
    width: 25%;
}
/************* Main-body with content **********************/


.main-body {
  padding: 0 1em 1em 1em;
  max-width: 1000px;
}

.main-body p {
    text-align:justify;
    padding-bottom: 1em;
}

.main-body h2 {
  font-size: 2.5em;
  padding: 0.5em 0 0.5em 0;
  color: #FE9901;
  scroll-margin-top: 79px;
}

.main-body h3 {
  padding-bottom: 0.5em;
}

.main-body h4 {
  font-style: italic;
}
.main-body li {
  text-align:justify;
  list-style-position: outside;
  padding: 0.2em 0;
}

.references li{
  text-align: left;
  font-size: 0.9em;
}

.main-body ul, .main-body ol {
  padding-left: 1em;
  padding-bottom: 0.8em;
}
.side-box-content {
  background-color: #e5e5e5;
  padding: 1.5em;
  margin-bottom: 1em;
}

.side-box-content p{
  padding-bottom: 0;
}

#side-box-1, #side-box-3 {
  float: right;
  width: 35%;
}
#side-box-2, #side-box-4 {
  width: 90%;
}

/********** FIGURES *****************/ 
.figure-container {
  padding: 1em;
  position: relative;
}
.figure-container p, .figure-container-no-padding p, .figure-container2 p{
  color: #636262;
  font-size: 0.8em;
}
.figure-container-no-padding, .figure-container2 {
  position: relative;

}
.figure-container img, .figure-container2 img{
  width: 100%;
}
.figure-container-no-padding img{
  width:140%;
}



.figure-container video  {
  width: 100%;
}

.figure-container svg {
  width: 100%;
  height: auto;
  

}
.figure-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex ;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.figure-wrapper-stay-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex ;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.figure-wrapper-stay-flex-no-space {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex ;
}
.auto-margin{
  width: 80%;
  margin: auto;
}

.width15-no-margin{
  width:15%;
}

.width20, .width20-2 {
  width: 20%;
  margin: auto;
}

.width25 {
  width: 25%;
  margin: auto;
}

.width30, .width30-text, .width30-2{
  width: 30%;
  margin: auto;
}

.width35 {
  width: 35%;
  margin: auto;
}
.width40, .width40-text, .width40-2  {
  width: 40%;
  margin: auto;
}

.width40-text.no-margin-top {
  margin: 0 auto;
}

.width45-no-margin-text, .width45-no-margin {
  width: 45%;
}
.width50, .width50-text,  .width50-2 {
  width: 50%;
  margin: auto;
}

.width50-stay-flex {
  width: 45%;
}

.width40-no-margin, .width40-no-margin-text {
  width:40%;
}
.width50-no-margin, .width50-no-margin-text {
  width:50%;
}

.width60, .width60-no-margin-text {
  width: 60%
}

.width60-margin,  .width60-2{
  width: 60%;
  margin: auto;
}
.width75 {
  width: 75%;
  margin: auto;
}

.only-mobile, .only-mobile-flex, .only-mobile-home {
  display:none
}


#wrap2{
  width: 40%;
  padding-top: 1em;
  padding-right: 1em;
  float: left;
}

.side-figure {
  float: right;
}
.side-figure-odd {
  float: left;
}

/*********** FIGURES*********/
#collab-figure1, #figure4, #figure5, #figure7, #ed-figure4 {
  width: 45%;
}
#ed-figure1, #ed-figure2, #ed-figure4 {
  width: 35%
}

#figure8 {
  width: 15%;
}

#contr-figure3, #contr-figure4, #contr-figure5, #contr-figure6 {
width: 50%;
}

#ed-figure-wrapper1, #ed-text1, #ed-text2 {
  width: 60%;
}

.vertical-figure-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
/************8 TabLe ***************/
table.model {
  border-collapse: collapse;
  width: 100%;
  margin-top: 1em;
  
}
table.model tbody {
  overflow-x: auto;
}

table.model td, table.model th {
  text-align: left;
  padding: 8px;
}

table.model th {
  border-bottom: #212832 3px solid;
}

table.model tr:nth-child(even) {
  background-color: #ffe6c4;
}

.table-model {
  overflow-x: auto;
}

.table-model li {
  text-align: left;
}

.break-words {
  max-width: 550px;
  min-width: 150px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
}
/*********** POP-OUTS ********************/
.popout{
width: 100%;
margin: 1.5em auto;
position: relative;
-webkit-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
scroll-margin-top: 79px;
max-width: 1000px;
padding-top: 1em;

}

.collapsible {
  display: block;
  font-size: 2em;
  padding: 0.8em 1.5em;
  position: relative;
  color: #ffffff;
  cursor: pointer;
}


.popout:first-child {
  padding-top: 2em;
}
.collapsible::before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  height: 5px;
  width: 95%;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  background: #FE9901;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

}



.collapsible:hover::before{
  height: 25px;
}

.collapsible {
  outline : none !important;
}

.collapsible-content {
    max-height: 0;
    position: relative;
    overflow-y: hidden;
    width:95%;
    -webkit-transition: all 0s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.collapsible-content-wrapper {
  margin: auto;
  text-align: justify;
  width: 80%;
  padding: 1em  0;
} 
.collapsible-content-wrapper h2 {
  font-size: 1.5em;

}


.collapsible::after {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #212832;
  border-radius: 3px;
  width: 95%;
  z-index: -1;
}

.closed {
  max-height: 0;
  -webkit-box-shadow: 0;
          box-shadow: 0;
}
.newsletter {
  font-size: 1.7em;
  padding: 0.2em;
  color: #fff;
}
/*****  newsletter *****/
.newsletter-table{
  margin: auto;
}

.newsletter-title span {
  position: relative;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
  font-size: 0.8em;
}

p.newsletter-title{
   display:block;
   padding: 0;
}
.newsletter-title span {
   display:block;
   float:right;
   padding-right:1em;
   text-align: right;
  }

.collapsible:hover .newsletter-title span{
  opacity: 1;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

/********** RESULTS READ MORES ***********/
.results-collapsible-content {
  max-height: 0;
  opacity:0;
  -webkit-transition: 1s all;
  -o-transition: 1s all;
  transition: 1s all;
  position: relative;
  z-index: -1;
}

/*************** feature Boxes ***************/
.featured-flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-top: 2em;
}

.featured-box {
  width: 48%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
 
}

.scroll-box {
  overflow-x: hidden; 
  overflow-y: auto; 
  height: 300px;
  border: 3px solid #FE9901;
  border-radius: 5px;
  margin-top: auto;
}
.featured-box .figure-container {
  margin-top: auto;
}

.featured-box img {
  width: 100%;
}
/*************** NEXT-BUTTONS ************/
.next-buttons{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  z-index: 10;
}

a.single-button, a.single-button:visited{
  font-size: 1.375em;
  font-weight: bold;
  background-color: #ffffff;
  color: #212832;
  padding: 0.5em;
  border: solid 3px #212832;
  border-radius: 10px;
  margin: 1em;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 10
}

a.single-button:hover, a.single-button:active{
  background-color: #212832;
  color: #ffffff;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 10;
  
}
/********* To top arrow for mobile versions ***************/
#mobile-to-top-arrow {
  display:none;
}
.to-top {
    
    position: fixed;
    bottom: 1em;
    right:0.3em;
    border-radius: 100%;
    font-size:32px;
    color:#FE9901;
    opacity:0; 
    -webkit-transition: all .4s; 
    -o-transition: all .4s; 
    transition: all .4s;
    cursor: default;
  }
  
  a.to-top.active1 {
      cursor:pointer;
  }
    .active1 {
    bottom:32px;
    opacity:1;
  }
 
#mobile-to-top-arrow.to-top:visited i{
  color:#FE9901;
} 
#mobile-to-top-arrow.active1:hover i {
    cursor: pointer;
}

#mobile-to-top-arrow:active i{
    color: #ffb444;
    cursor: pointer;
}

#mobile-to-top-arrow.to-top:hover i{
  color: #FE9901;
}
/********************************* Footer ***************************************/

.contact-info {
  background-color: #212832;
  
}

.contact-info-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: 1.9em 1em;

}

.box {
  width: 30%;
  text-align: justify;
}

.box h3 {
  font-size: 1.875em;
  padding: 0.5em;
  color: white;
}

.box p{
  color: white;
  font-size: 1em;
  padding: 0 1em;
}

.social-media-icons {
  padding: 0 0.3em ;
  font-size: 3em;
}

.social-media-icons a, .social-media-icons a:active, .social-media-icons a:visited, .box a, .box a:active, .box a:visited{
  color: white;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.social-media-icons a:hover,  .box a:hover{
  color: #FE9901;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

/********** SPonsors *******************/
.sponsorsh2 h2{
  text-align: center;
}
.sponsors {
  background-color: #fff;
}

.main-sponsors, .sub-sponsors {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
  -webkit-box-pack: start; 
      -ms-flex-pack: start; 
          justify-content: flex-start;
}

.image-main-sponsor {
  width: 20%;
  padding: 1em 1em;
}
.image-main-sponsor img {
  width: 100%;
}  


.image-sub-sponsor img {
  width: 100%;
}
.image-sub-sponsor{
  width: 8%;
  padding: 1em;
}

#IDElogo{
  width: 4%;
}
/***** HOVER EFFECT SPONSORS***************/

.image-main-sponsor a{
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.image-main-sponsor a:hover {
  -webkit-filter: none;
          filter: none;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.image-sub-sponsor a{
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.image-sub-sponsor a:hover {
  -webkit-filter: none;
          filter: none;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

/***************** MODEL STYLES ************************/
.eq {
  text-align: left;
}
.model-container {
  display: block;

}
.canvas-container {
  display: block;
}

.input-container form {
  font-size: 1em !important;
}

.chart {
  position: relative;
}
#chartPop, #chartI {

}

.parameters-model {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.center-button-model {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/*** added by Marijn ***/

input[type=number]{
  width: 60px;
} 
input[type=range]{
  width: 80px;
} 

.stateprob {
  padding-right: 1em;
}
#stateprobI {
  padding-right: 1.4em;
}

#param1 {
  padding-right: 4em;
}
#param2 {
  padding-right: 0.5em;
}
#param3 {
  padding-right: 1.8em;
}
#param4 {
  padding-right: 3.6em;
}
#param5 {
  padding-right: 1.6em;
}
#param6 {
  padding-right: 1em;
}
#param7 {
  padding-right: 2.3em;
}
#param8 {
  padding-right: 1.9em;
}
#param9 {
  padding-right: 1.4em;
}
#param10 {
  padding-right: 1em;
}

/********* TEAM STYLES **************************/

.team-picture-modal {
  width: 30%;
  margin: auto;
}
.supervisor-square {
  width: 90%;
  height: auto;
  margin:auto; 
  border-radius: 50%;
  overflow: hidden;
  
}
.supervisor-pic {
  width:100% ;
}

.supervisor-pic img {
  width: 100%;
}

.supervisor-box {
  width: 20%
}
.supervisor-box p{
  display: block;
  position: relative;
  margin-top: 1em;
  margin-bottom: 2em;
  text-align: center;
}

.supervisor-flexbox{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.team-square {
  cursor: pointer;
}
.team-pic {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
  -webkit-transition: .3s all;
  -o-transition: .3s all;
  transition: .3s all;
}  

.team-square:hover .team-pic{
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  -webkit-transition: .3s all;
  -o-transition: .3s all;
  transition: .3s all;
}

.team-pic img {
  width: 100%;
}

.team-box {
  width: 33%;
  
}
.team-box p{
  display: block;
  position: relative;
  font-size: 1em;
  margin-top: 1em;
  margin-bottom: 2em;
  text-align: center;
}

.team-flexbox{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}



/*********** MODAL STYLES *************/
.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 100px ; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  color: #333333;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 6px;
  width: 60%;
  overflow: auto;
}

#roadmapimg .modal-content {
  width:80%;
}
#rapidemicimg .modal-content, #safetyimg .modal-content{
  width:70%;
}
.modal-content h3{
    padding-bottom: 0;
    text-align: center;
}
.sub{
  font-weight: normal;  
  padding-bottom: 1em;
  padding-top: 0;
}
.modal-content img{
  padding-bottom: 1em;
}

.modal-content h4, .modal-content p{
    padding-bottom: 0;
    padding-top: 0;
    margin: 0;
    padding: 0 4em;
    text-align: justify;
}


/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* Animation*/
@-webkit-keyframes animatetop {
  from { opacity:0}
  to {opacity:1}
}

@keyframes animatetop {
  from { opacity:0}
  to { opacity:1}
}
/**********Experiments styles *********/
.experiments {
  cursor: pointer;
}

/*********** HP STYLES ***************/
.content-wrap{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1em
}
.content-wrap h2 {
  font-size: 1.3em;
}

.content-wrap p{
  padding-top: 0.3em;
}
.integration-hp {
  width: 45%;
}
.question-content{

  display: block;
  border-right: solid 3px #FE9901;
  padding-right: 2em;
}

.text-hp {
  width: 85%;
}
.profile-pic-hp{
  width:13%;

}
.profile-pic-hp img {
  width:100%;  
  border-radius: 50%;
}
.question-hp {
  width: 53%;
}

.time-line-hp {
  background-color: #e5e5e5;

}

.time-line-content {
  padding: 1em;
}

/******* ENTRe Styles *****/
#roadmapimg .figure-container, #rapidemicimg .figure-container, #safetyimg .figure-container {
  margin: 2em;
  margin-bottom:5em;
  padding-bottom: 2em;
}
.profile {
  cursor: pointer;
}

/********* CONTRIBUTION STYLES *************/
.main-body ul {
  list-style: disc;
}

/********* SPONSOR PAGE STYLES **************/
.first-row{
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2em 0;
}

.first-row-sponsors {
  width: 60%;
  margin: auto;
}

.first-row-sponsors  img{
  width: 100%;
}

.second-row{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 2em 0;
}
.second-row-container {
  width: 30%;
}
.second-row-sponsors {
  width: 100%;
}

.second-row-sponsors  img{
  width: 100%;
}

.third-row{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 2em 0;
}

.third-row-sponsors {
  width: 30%;
}
.third-row-sponsors  img{
  width: 100%;
}
/*************** PUBLIC ENGAGMENT PAGE STYLES *************/

 .video-wrapper {
  width: 80%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.video, .video-description {
  width: 50%;
  padding: 1em 1em;
}
.video img {
  width: 100%;
  border-radius: 10px;
}
.video video {
  width: 100%;
  border-radius: 10px;
}

.video-description {
  text-align: justify;
}

.video-description:nth-child(odd){
  border-right: 3px solid #FE9901;
}
.video-description:nth-child(even){
  border-left: 3px solid #FE9901;
}

/********** Medal Criteria styles **********/
#med-figure1, #med-figure2, #med-figure3 {
  width: 25%;
}

/********* Engineering ************/
#eng-figure1{
  width: 80%;
  position: relative;
  margin: auto
}
.gear-with-text {
  width: 20%; 
  position: relative; 
  top: 30px
}

.gear {
  position: absolute;
  width: 23%;
  
}

.gear:hover {
  -webkit-animation: spin 4s infinite linear;
          animation: spin 4s infinite linear
}

#gear1{
  top: 34%;
  left: 1%;
}

#gear2{
  top: 42%;
  left: 24%;
}

#gear4{
  top: 33%;
  right: 25%;
}

#gear3{
  top: 38%;
  right: 1%;
}




@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
  }
}




@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
  }
}

/************** Implementation *************/
.column-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}


.column-wrapper {
  width: 48%;
}

.column-wrapper p {
  padding-top: 1em;
}
.column-wrapper  h3{
  background-color: #0d5450;
  border-radius: 50%;
  border: solid 3px #0d5450;
  color: #FFF;
  padding: 0.3em 0.5em;
  display:inline;
}

.numbers h3{
  background-color: #0d5450;
  border-radius: 50%;
  border: solid 3px #0d5450;
  color: #FFF;
  padding: 0.3em 0.5em;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  font-size: 1.3em;
}
.numbers {
  position: absolute;
}
#number1{
  top:32%;
  right:27%
}

#number2 {
  top: 22%;
  left:50%;
}

#number3{
  top:28%;
  left:25%
}
#number4{
  top:50%;
  left:30%
}

#number5{
  top:62%;
  left:38%
}

#number6{
  top:75%;
  left:46%
}
#number7{
  bottom: 5%;
  left:46%;
}



.numbers:hover h3{
  font-size: 1.8em;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.empty-filler {
  padding: 3em;
}

/*************INCLUSION PAGE ****************/
.img-comp-container {
  position: relative;
  height: 20vw; 
}



.img-comp-img {
  position: absolute;
  overflow:hidden;
  width: auto;
  height: auto;
  
}

.img-comp-img img {
  display:block;
  width: 30vw  ;
  height: 15vw;
}

.img-comp-slider {
  position: absolute;
  z-index:9;
  cursor: ew-resize;
  width: 40px;
  height: 40px;
  background-color: #fe9901;
  opacity: 0.7;
  border-radius: 50%;
}
.img-comp-slider::before {
  content:"";
  display: block;
  position: relative;
  top:-6vw;
  right: -19px;
  height: 15vw;
  background-color: #fe9901;
  width: 2px;
  z-index: -1;
}
.figure-wrapper-inclusion {
  width: 50%;
}

.incl-slider-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}
.color-slider-legenda span {
  display: block;
  float: right;
  padding-right: 3em;
  text-align: right;
}

.inclusion-p {
  font-size: 1em;
  font-weight: bold;
}

/**********NEW STYLES AWARDS *************/
.figure-wrapper-center {
  display: flex;
  justify-content: center;
  align-items: center;
}



.figure-wrapper-awards {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.figure-wrapper-column {
  align-items: center;
}

.figure-wrapper-column {
  display: flex;
  flex-direction: column;
}

.absolute-figure-container{
  position: absolute;
  bottom: -10%;
  right: -7%;
  width: 20%;
}

a:visited.prize-hyperlink h3, a:hover.prize-hyperlink h3, .a:active.prize-hyperlink h3 {
  color: #212832;
}

a:hover.prize-hyperlink {
  opacity:70%;
}

.announcement {
  position: absolute;
  top: 54px;
  right:2px;
  width: 15%;
  z-index: 1;
}


.announcement-block {
  animation: announcement 19s infinite;
}



@keyframes announcement { 
  0% {
    opacity: 0
}
10% {
  opacity: 0
}
30% {
 opacity: 1
}
95% {
 opacity: 1
}
100% {
 opacity: 0;

}


}


@media only screen and (max-width: 800px) {
  .announcement {
    top: 24px;
    right:20px;
    width: 19%;
  }
}


/**********MEDIA QUERIES ************/
@media only screen and (min-width: 1440px){
  .loader-wrapper h2 {
    font-size: 6em;
    top: -1em;
  }
}

@media only screen and (max-width: 1024px){
  .bacteria, .bacteria-transparent {
    border-width: 50px;
  }

  .chapter-content{
    padding-right: 0.05em;
    font-size: 0.9em;
  }

  .loader-wrapper h2 {
    font-size: 4em;
    top: -1em;
  }
  .newsletter-title span {
    display:none;
  }

  
  .only-mobile-flex {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
  }

  .only-mobile {
    display: block;
  }

  .only-desktop {
    display:  none;
  }

  .dropdown-content {
    top: 3.8em;
  }

  aside {
    width: 200px;
  }
  .sections-container aside div div a {
    font-size: 1em;
 }

 .main-body p, ol li, ul li {
     font-size: 0.9em;
 }
 .featured-flexbox {
   display: block
 }
 
 .featured-box, #ed-text1, #ed-text2 {
   width: 100%;
 }

 .team-box {
   width: 45%;
 }

 .supervisor-box {
  width: 30%
}

.figure-wrapper {
  display: block;
 
}

.width50-no-margin-text, .width50-text, .width40-text, .width40-no-margin-text, .width30-text, .width60-no-margin-text, .width45-no-margin-text, .width75 {
  width:100%;
}

#figure4, #figure5, #ed-figure4, .width40, .width40-no-margin, .width50, .width50-no-margin, .width30, .width20, .width35,  .width60, .width60-margin, .width45-no-margin   {
  width: 80%;
  margin: auto;
}

.width25 {
  width: 40%;
}

.side-box-content{
  margin-bottom: 1em;
}

.content-wrap{
  display: block;
}
.question-hp{
  width: 100%;
  padding-bottom: 1em;
}
.integration-hp{
  width: 100%;
  border-top: solid 3px #FE9901;
}

.question-content {
border-right: none;
}

.question-content .width40-no-margin{
  width:40%;
  margin: 0
}

#gear1{
  top: 33%;
  left: 0%;
}

#gear2{
  top: 40%;
  left: 23%;
}

#gear4{
  top: 30%;
  right: 25%;
}

#gear3{
  top: 36%;
  right: 1%;
}

.video-wrapper {
  display: block;
}
.video, .video-description{
  width: 80%;
  margin: auto;
}

.video-description:nth-child(even), .video-description:nth-child(odd) {
  border-left: none;
  border-right: none;
  border-top: solid 3px #fe9901;
}

.virus{
margin-top: 1em;
}

#arrow3 img {
  left: -5em;
}

#arrow4 img{
  left: 6em;
}

.video-div {
  padding: 0;
}
/**** Phones max width 800px********/
@media only screen and (max-width: 800px) {
.circle-box {
padding: 1em;
}

  .bacteria {
    background-color: #ffd8a1;
    border: solid 8px #fe9901;
    border-radius: 150px; 
  }
  .bacteria:first-child {
    margin-top: 1em;
  }
  
  .virus {
    /*border-image-source*/
   background-color: #b8eee7;
    border: solid 8px #63cabc;
    border-radius: 150px; 
  }
  
  .virus-transparent{
   border:  solid 8px #63cabc;
    border-radius: 150px;
    background: #fff; 
    -webkit-box-sizing: border-box; 
            box-sizing: border-box;
    padding: 3em;
  }
  .bacteria-transparent {
   border: solid 8px #FE9901;
    border-radius: 150px;
    background: #fff;
    padding: 3em;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  .arrow-down-scroll {
    display:none;
  }

  .arrow-down-scroll2 {
    top: 30px;
  }
  .only-mobile-home, .incl-slider-container{
    display:block;
  }
 

  .only-desktop-home{
    display: none;
  }

  /****Mobile nav *******/
  .loader-wrapper h2 {
    font-size: 3em;
    top: -1em;
  }

   .width60-2, .width50-2, .width40-2, .width20-2, .width30-2 {
     width: 80%
   }

   .virus-transparent.figure-container {
    width:50%;
    margin-top: 1em;
  }
  .bacteria-transparent.figure-container {
    width:50%;
    margin-top: 1em;
  }

  .gear-text-box:nth-child(even) .corner-gear {
    position: absolute;
    left: 98%;
    bottom: 100%;
  }

  .gear-text-box:nth-child(odd) .corner-gear {
    position: absolute;
    right: 98%;
    bottom: 100%;
  }

  .gear-text-box{
    min-width: 300px;
  }

  .numbers h3 {
    font-size: 1.2em
  }

  #arrow2 .figure-container img, #arrow4 .figure-container img{
    -webkit-transform: rotate(160deg);
        -ms-transform: rotate(160deg);
            transform: rotate(160deg)
  }
  #arrow2 img, #arrow4 img{
    left: 5em;
  }

  #arrow3 img{
    left: 0
  }

  .main-page-home-section{
    padding: 0;
  }
  .figure-wrapper-align-start {
    display: block;
  }
  .circle-content {
    padding:3em;
  }

  .numbers:hover h3 {
    font-size: 1.2em
  }

  #number5{
    top:62%;
    left:33%
  } 
  .arrow-down {
    top:-6em;
    left: 45%;
    
  }

  .gear-with-text {
    width:50%;
  }


  /******* HOME SEGMENTS ****************/
  .grey-segment {
    background-color: #e5e5e5;
    overflow-x: hidden;
  }
  .darkgrey-segment {
    background-color: #666666;
    color: #fff;
    overflow-x: hidden;
  }
  
  .whiteread {
    color: #fff;
    border: #fff;
  }
  
  .whiteread:hover {
    background-color: #fff;
  }
  
  .segment-container {
    width: 80%;
    margin: auto;
    padding: 1em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .segment-figure, .segment-text {
    width: 35%;
    margin: 1em;
  }
  .segment-figure img {
    width: 100%;
    border-radius: 10px;
  }
  
  .segment-text h1{
    padding-bottom: 0.3em;
    font-size: 1.5em;
  }
  
  .segment-text {
    text-align: justify;
  }
  
  .from-left{
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    opacity: 0;
  }
  
  .from-right{
    -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
            transform: translateX(50%);
    opacity: 0;
  }
  
  .from-left.appear, .from-right.appear{
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 1;
  }
  
  #gear1{
    top: 33%;
    left: 1%;
  }
  
  #gear2{
    top: 41%;
    left: 24%;
  }
  
  #gear4{
    top: 30%;
    right: 25%;
  }
  
  #gear3{
    top: 36%;
    right: 1%;
  }

  /************************ HEADER ******************************/
  header {
    background: url(https://static.igem.org/mediawiki/2020/f/f1/T--Leiden--banner-min.png);
   min-height: 140px;
   max-height: 360px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  body {
    font-size: 0.8em;
  }
  #nav-logo {
    width: 3.2em;
  }

   #normal-nav{
     display: none;
   }
 
   #mobile-nav {
     display: block; 
   }
 
   aside {
    display: none;
  } 
 
  .buttons a{
      font-size: 1em;
  }
 
  .main-body, .buttons {
    margin: auto;
  }
 
  .main-body h2 {
      font-size: 1.8em;
  }
 
  a.single-button  .button-content-wrapper {
      font-size: 0.8em;    
  }
   .contact-info-content {
     display: block;
   }
 
   .box:first-child {
     display: none;
   }
   .box h3, .empty-filler {
       display: none;
   }
 
   .box {
     padding-bottom: 1em;
     width: 100%;
   }
 
   .introduction-content{
     -ms-grid-column: 2;
     -ms-grid-column-span: 5;
     grid-column: 2/7;
   }
 
   .page-title-content h1 {
     font-size: 3em;
   }
 
   .main-body h2 {
     padding-top: 1em;
   }
 
   #mobile-to-top-arrow, .first-row, .second-row  {
     display:block;
   }
   .team-flexbox {
     display: block;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
   }
 
   .supervisor-box,  .second-row-container {
     width: 80%;
     margin: auto;
   }
   .second-row-container{
     padding-bottom: 1em;
   }
   .team-box, .column-wrapper {
     width: 100%;
   }

   .collapsible {
     font-size: 1.8em;
   }

  #contr-figure3, #contr-figure4, #contr-figure5, #contr-figure6, .first-row-sponsors, .figure-wrapper-inclusion{
    width: 95%;
  }
  .img-comp-img img {
    display:block;
    width: 80vw  ;
    height: 40vw;
  }
  .img-comp-container {
    height: 45vw;
  }
  .img-comp-slider::before {
    content:"";
    display: block;
    position: relative;
    top:-18.5vw;
    right: -19px;
    height: 45vw;
    background-color: #fe9901;
    width: 2px;
    z-index: -1;
  }

.inclusion-p {
  font-size: 1em;
  font-weight: bold;
}

  .collapsible:hover::before {
    height: 17px;
  
    }

    .gear:hover {
    -webkit-animation: none;
            animation: none;
    }

    a.readmore-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between
    }

    @media only screen and (max-width: 500px) {
      .loader-wrapper h2 {
        font-size: 2em;
        top: -1em;
      }
      .gear {
        width: 23%;
      }
      #gear1 {
        top:31%;
      }
      #gear2 {
        top:38%;
        left:22%;
      }
      #gear4{
        left: 45%;
        top:29%;
      }
      #gear3 {
        top:33%;
      }
    }
  }
}