Team:Leiden/css/main cssstyle

/*

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

}

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, #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, #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, #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

}

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, #side-box-3 {

 float: right;
 width: 35%;

}

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

}

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, #figure4, #figure5, #figure7, #ed-figure4 {

 width: 45%;

}

1. ed-figure1, #ed-figure2, #ed-figure4 {

 width: 35%

}

1. figure8 {

 width: 15%;

}

1. contr-figure3, #contr-figure4, #contr-figure5, #contr-figure6 {

width: 50%; }

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

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, #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, #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, #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 **********/

1. med-figure1, #med-figure2, #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%;

}

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

}

1. gear1{

 top: 33%;
 left: 0%;

}

1. gear2{

 top: 40%;
 left: 23%;

}

1. gear4{

 top: 30%;
 right: 25%;

}

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

1. arrow3 img {

 left: -5em;

}

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

}