Team:LZU-HS-CHINA/Plant

/*

• 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;

}

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;

}

1. 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;

}

1. donate-button:hover,
2. 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;

}

1. 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;

}

1. 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();
   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;

}

1. circle-small {

   top: 10em;
   left: -3em;
   z-index: -1

}

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;

}

1. arrow1 {

   margin: -10% 0;

}

1. arrow2 .figure-container img,
2. arrow4 .figure-container img {

   -webkit-transform: rotate(190deg);
   -ms-transform: rotate(190deg);
   transform: rotate(190deg);

}

1. arrow2 img {

   position: relative;
   left: 12em;

}

1. arrow3 img {

   position: relative;
   left: -9em;

}

1. arrow4 img {

   position: relative;
   left: 12em;

}

1. arrow3 .figure-container {

   width: 10%;

}

.bacteria {

   border-style: solid;
   border-width: 100px;
   border-image-source: url();
   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();
   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();
   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();
   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();
   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

}

1. 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;

}

1. 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;

}

1. chapter-award {

   font-size: 1.5em;
   position: relative;
   top: -9px;

}

/******* Mobile nav-bar styles *******/

1. 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

}

1. 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;

}

1. to-top-arrow a,
2. to-top-arrow a:visited,
3. 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

}

1. 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;

}

1. side-box-1,
2. side-box-3 {

   float: right;
   width: 35%;

}

1. side-box-2,
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

}

1. wrap2 {

   width: 40%;
   padding-top: 1em;
   padding-right: 1em;
   float: left;

}

.side-figure {

   float: right;

}

.side-figure-odd {

   float: left;

}

/*********** FIGURES*********/

1. collab-figure1,
2. figure4,
3. figure5,
4. figure7,
5. ed-figure4 {

   width: 45%;

}

1. ed-figure1,
2. ed-figure2,
3. ed-figure4 {

   width: 35%

}

1. figure8 {

   width: 15%;

}

1. contr-figure3,
2. contr-figure4,
3. contr-figure5,
4. contr-figure6 {

   width: 50%;

}

1. ed-figure-wrapper1,
2. ed-text1,
3. 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 ***************/

1. 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;

}

1. mobile-to-top-arrow.to-top:visited i {

   color: #FE9901;

}

1. mobile-to-top-arrow.active1:hover i {

   cursor: pointer;

}

1. mobile-to-top-arrow:active i {

   color: #ffb444;
   cursor: pointer;

}

1. 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;

}

1. 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;

}

1. chartPop,
2. 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;

}

1. stateprobI {

   padding-right: 1.4em;

}

1. param1 {

   padding-right: 4em;

}

1. param2 {

   padding-right: 0.5em;

}

1. param3 {

   padding-right: 1.8em;

}

1. param4 {

   padding-right: 3.6em;

}

1. param5 {

   padding-right: 1.6em;

}

1. param6 {

   padding-right: 1em;

}

1. param7 {

   padding-right: 2.3em;

}

1. param8 {

   padding-right: 1.9em;

}

1. param9 {

   padding-right: 1.4em;

}

1. 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;

}

1. roadmapimg .modal-content {

   width: 80%;

}

1. rapidemicimg .modal-content,
2. 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 *****/

1. roadmapimg .figure-container,
2. rapidemicimg .figure-container,
3. 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 **********/

1. med-figure1,
2. med-figure2,
3. med-figure3 {

   width: 25%;

}

/********* Engineering ************/

1. 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

}

1. gear1 {

   top: 34%;
   left: 1%;

}

1. gear2 {

   top: 42%;
   left: 24%;

}

1. gear4 {

   top: 33%;
   right: 25%;

}

1. 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;

}

1. number1 {

   top: 32%;
   right: 27%

}

1. number2 {

   top: 22%;
   left: 50%;

}

1. number3 {

   top: 28%;
   left: 25%

}

1. number4 {

   top: 50%;
   left: 30%

}

1. number5 {

   top: 62%;
   left: 38%

}

1. number6 {

   top: 75%;
   left: 46%

}

1. 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();
           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%;
           }
       }
   }

}

Plant Synthetic Biology

Best Plant Synthetic Biology Special Prize

This award is designed to celebrate exemplary work done in plant synthetic biology. Did you build a project in a plant chassis? Did you submit plant parts to the Registry? This award could also be given to a team working with algae or another photosynthetic chassis.

To compete for the Best Plant Synthetic Biology prize, please describe your work on this page and also fill out the description on the judging form.

Inspiration

You can look at what other teams did to get some inspiration!
Here are a few examples:

• 2018 Cardiff Wales
• 2019 Sorbonne U Paris
• 2019 TU Kaiserslautern
• 2019 Humboldt Berlin
• 2020 Sorbonne U Paris