*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}
@media (min-width: 2000px)
{
  .toggle
  {
    opacity: 0;
  }
}
.secback
  {
    width: 100%;
    background-repeat: no repeat;
    background-size: cover;
    display: block;
    margin: auto;
    padding: 0px;
  }





.learnmore
{
  position: relative;
  width: 260px;
  height: 152px;
}
.lmb
{
  margin: -225px 0px 90px 50px;
}
@media (max-width: 1500px)
{
  .learnmore
{
  position: relative;
  width: 220px;
  height: 128px;
}
.lmb
{
  margin: -195px 0px 90px 40px;
}
}
@media (max-width: 1400px)
{
  .learnmore
{
  position: relative;
  width: 200px;
  height: 116px;
}
.lmb
{
  margin: -185px 0px 90px 40px;
}
}
@media (max-width: 1300px)
{
  .learnmore
{
  position: relative;
  width: 180px;
  height: 104px;
}
.lmb
{
  margin: -170px 0px 90px 35px;
}
}
@media (max-width: 1200px)
{
  .learnmore
{
  position: relative;
  width: 160px;
  height: 92px;
}
.lmb
{
  margin: -155px 0px 90px 35px;
}
}
@media (max-width: 1050px)
{
  .learnmore
{
  position: relative;
  width: 140px;
  height: 80px;
}
.lmb
{
  margin: -135px 0px 90px 35px;
}
}
@media (max-width: 900px)
{
  .learnmore
{
  position: relative;
  width: 120px;
  height: 68px;
}
.lmb
{
  margin: -115px 0px 90px 35px;
}
}
@media (max-width: 800px)
{
  .learnmore
{
  position: relative;
  width: 100px;
  height: 56px;
}
.lmb
{
  margin: -100px 0px 90px 25px;
}
}
@media (max-width: 700px)
{
  .learnmore
{
  position: relative;
  width: 80px;
  height: 44px;
}
.lmb
{
  margin: -75px 0px 90px 20px;
}
}
@media (max-width: 600px)
{
  .learnmore
{
  position: relative;
  width: 60px;
  height: 32px;
}
.lmb
{
  margin: -60px 0px 90px 20px;
}
}
@media (max-width: 500px)
{
  .learnmore
{
  position: relative;
  width: 60px;
  height: 32px;
}
.lmb
{
  margin: -50px 0px 90px 20px;
}
}
@media (max-width: 300px)
{
  .learnmore
{
  opacity: 0;
  position: relative;
  width: 60px;
  height: 32px;
}
.lmb
{
  opacity: 0;
  margin: -125px 0px 90px 145px;
}
}






.learnmore2
{
  position: relative;
  width: 260px;
  height: 152px;
}
.lmb2
{
  margin: -250px 0px 90px -440px;
}
@media (max-width: 1500px)
{
  .learnmore2
{
  position: relative;
  width: 220px;
  height: 128px;
}
.lmb2
{
  margin: -225px 0px 90px -370px;
}
}
@media (max-width: 1400px)
{
  .learnmore2
{
  position: relative;
  width: 200px;
  height: 116px;
}
.lmb2
{
  margin: -210px 0px 90px -335px;
}
}
@media (max-width: 1300px)
{
  .learnmore2
{
  position: relative;
  width: 180px;
  height: 104px;
}
.lmb2
{
  margin: -190px 0px 90px -318px;
}
}
@media (max-width: 1200px)
{
  .learnmore2
{
  position: relative;
  width: 160px;
  height: 92px;
}
.lmb2
{
  margin: -180px 0px 90px -290px;
}
}
@media (max-width: 1050px)
{
  .learnmore2
{
  position: relative;
  width: 140px;
  height: 80px;
}
.lmb2
{
  margin: -170px 0px 90px -260px;
}
}
@media (max-width: 900px)
{
  .learnmore2
{
  position: relative;
  width: 120px;
  height: 68px;
}
.lmb2
{
  margin: -160px 0px 90px -210px;
}
}
@media (max-width: 800px)
{
  .learnmore2
{
  position: relative;
  width: 100px;
  height: 56px;
}
.lmb2
{
  margin: -150px 0px 90px -190px;
}
}
@media (max-width: 700px)
{
  .learnmore2
{
  position: relative;
  width: 80px;
  height: 44px;
}
.lmb2
{
  margin: -137px 0px 90px -150px;
}
}
@media (max-width: 600px)
{
  .learnmore2
{
  position: relative;
  width: 60px;
  height: 32px;
}
.lmb2
{
  margin: -120px 0px 90px -120px;
}
}
@media (max-width: 500px)
{
  .learnmore2
{
  position: relative;
  width: 60px;
  height: 32px;
}
.lmb2
{
  margin: -125px 0px 90px -105px;
}
}
@media (max-width: 300px)
{
  .learnmore2
{
  opacity: 0;
  position: relative;
  width: 60px;
  height: 32px;
}
.lmb2
{
  opacity: 0;
  margin: -125px 0px 90px 145px;
}
}






.learnmore3
{
  position: relative;
  width: 260px;
  height: 152px;
}
.lmb3
{
  margin: -250px 0px 90px 545px;
}
@media (max-width: 1500px)
{
  .learnmore3
{
  position: relative;
  width: 220px;
  height: 128px;
}
.lmb3
{
  margin: -220px 0px 90px 450px;
}
}
@media (max-width: 1400px)
{
  .learnmore3
{
  position: relative;
  width: 200px;
  height: 116px;
}
.lmb3
{
  margin: -210px 0px 90px 428px;
}
}
@media (max-width: 1300px)
{
  .learnmore3
{
  position: relative;
  width: 180px;
  height: 104px;
}
.lmb3
{
  margin: -195px 0px 90px 390px;
}
}
@media (max-width: 1200px)
{
  .learnmore3
{
  position: relative;
  width: 160px;
  height: 92px;
}
.lmb3
{
  margin: -180px 0px 90px 360px;
}
}
@media (max-width: 1050px)
{
  .learnmore3
{
  position: relative;
  width: 140px;
  height: 80px;
}
.lmb3
{
  margin: -170px 0px 90px 330px;
}
}
@media (max-width: 900px)
{
  .learnmore3
{
  position: relative;
  width: 120px;
  height: 68px;
}
.lmb3
{
  margin: -160px 0px 90px 280px;
}
}
@media (max-width: 800px)
{
  .learnmore3
{
  position: relative;
  width: 100px;
  height: 56px;
}
.lmb3
{
  margin: -150px 0px 90px 240px;
}
}
@media (max-width: 700px)
{
  .learnmore3
{
  position: relative;
  width: 80px;
  height: 44px;
}
.lmb3
{
  margin: -138px 0px 90px 190px;
}
}
@media (max-width: 600px)
{
  .learnmore3
{
  position: relative;
  width: 60px;
  height: 32px;
}
.lmb3
{
  margin: -125px 0px 90px 160px;
}
}
@media (max-width: 600px)
{
  .learnmore3
{
  position: relative;
  width: 60px;
  height: 32px;
}
.lmb3
{
  margin: -125px 0px 90px 145px;
}
}
@media (max-width: 300px)
{
  .learnmore3
{
  opacity: 0;
  position: relative;
  width: 60px;
  height: 32px;
}
.lmb3
{
  opacity: 0;
  margin: -125px 0px 90px 145px;
}
}





@font-face 
  {
    font-family: 'fjalla-one';
    src: url('https://static.igem.wiki/teams/4339/wiki/fonts/fjalla-one-v13-latin-regular.ttf'); 
  }

  @font-face
  {
    font-family: 'merriweather';
    src: url('https://static.igem.wiki/teams/4339/wiki/fonts/merriweathersans-variablefont-wght.ttf');
  }

   @font-face
  {
    font-family: 'merriweather-bold';
    src: url('https://static.igem.wiki/teams/4339/wiki/fonts/merriweather-sans-v22-latin-700.ttf');
  }

  h1
  {
    font-family: 'fjalla-one';
    font-weight: 700;
    font-size: 3 rem;
    color: #fff;
    line-height: 1.5 em;
    letter-spacing: 3px;
  }


  h2
  {
    font-family: 'fjalla-one';
    font-weight: 400; 
    color: #fff;
    font-size: 2.5 rem; 
    line-height: 1.5 em;
  }

  h3
  {
    font-family: 'fjalla-one';
    color: #fff;
    font-size: 2 rem;
    font-weight: 400;
    line-height: 1.5 em;
  }

  h4
  {
    font-family: 'fjalla-one';
    color: #fff;
    font-size: 1.5 rem;
    font-weight: 500;
    line-height: 1.5 em;
  }
  
  p
  {
    font-family: 'merriweather';
    color: #fff;
    font-size: 1.5 rem;
    font-weight: 500;
    line-height: 1.5 em;
  }

  strong
  {
    font-family: 'merriweather-bold';
    color: #fff;
    font-size: 1.5 rem;
    font-weight: 700;
    line-height: 1.5 em;
  }
body
{overflow-x: hidden;
  height: 100%;
  background: linear-gradient(#183142, #0a141c);
  background-size: cover;
}
#hexbg
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1080px;
  background: url(https://static.igem.wiki/teams/4339/wiki/hexbg.png);
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
}

/* change hover to click */
.dropdown-toggle::after
{
  display:inline-block;
  margin-left:.255em;
  vertical-align:.255em;
  content:"";
  border-top:.3em solid;
  border-right:.3em solid transparent;
  border-bottom:0;
  border-left:.3em solid transparent
}
.slide0
{
        height: 100%;
    width: 300px;
    top: 10px;
    position: fixed;
    background-color: #fff;
    transition: 0.5s ease;
    transform: translateX(-300px);
    z-index: 10;
}
h1
{
    color: #0f212f;
    font-weight: 800;
    text-align: right;
    padding: 10px 0;
    padding-right: 50px;
    pointer-events: none;
}
ul li
{
    list-style: none;
    margin-left: 40px;
}
ul li a
{
    color: #0f212f;
    font-weight: 510;
    padding: 5px 0;
    display: block;
    text-transform: capitalize;
    text-decoration: none;
    transition: 0.2s ease-out;
}
.menu-bar
{
  padding-top: 40px;
}
ul li:hover a
{
    color: #fff;
    background-color: #0f212f;
}
input
{
    display: none;
    visibility: hidden;
    -webkit-appearance: none;
}
.toggle2
{
    position: fixed;
    height: 80px;
    width: 80px;
    top: 20px;
    left: 30px;
    cursor: pointer;
    border-radius: 2px;
    background-color: #0f212f;
    box-shadow: 0 0 10px rgb(255, 255, 255);
    z-index: 100;
}
.toggle2 .common2
{
    position: absolute;
    height: 4px;
    width: 65px;
    background-color: #fff;
    border-radius: 50px;
    transition: 0.3s ease;
    
}
.toggle2 .top_line
{
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.toggle2 .middle_line
{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.toggle2 .bottom_line
{
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}
input:checked ~ .toggle2 .top_line
{
    left: 1px;
    top: 37px;
    width: 80px;
    transform: rotate(45deg);
}
input:checked ~ .toggle2 .bottom_line
{
    left: 1px;
    top: 37px;
    width: 80px;
    transform: rotate(-45deg);
}
input:checked ~ .toggle2 .middle_line
{
    opacity: 0;
    transform: translateX(20px);
}
input:checked ~ .slide0
{
    transform: translateX(0);
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
label#menu
{
  content: "";
}
.hex_right
{
  display: block;
  position: fixed;

  top: 45%;
  left: 50%;
  width: 3025px;
  height: 200px;
  margin: -35px 0 0 -1490px;
  z-index: 10;
}
.hex_left
{
  display: block;
  position: fixed;
  top: 45%;
  left: 50%;
  width: 3025px;
  height: 200px;
  margin: -35px 0 0 -1480px;
  z-index: 10;
}
.bion
{
  display: block;
  position: fixed;
  top: 42.5%;
  left: 50%;
  width: 3525px;
  height: 250px;
  margin: -35px 0 0 -1735px;
  z-index: 11;
  -webkit-animation: spin 10s linear infinite;
  -moz-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}
@-webkit-keyframes spin{
  100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin{
  100%{-webkit-transform: rotate(360deg);}
}
@keyframes spin{
  100%{-webkit-transform: rotate(360deg);}
}
  .bionexe
{
  display: block;
  position: fixed;
  top: 45%;
  left: 50%;
  width: 3000px;
  height: 225px;
  margin: -45px 0 0 -1480px;
  z-index: 10;
  opacity: 0%;
}
.slide1
{
  display: block;
  position: fixed;
  top: 45%;
  left: 50%;
  width: 3000px;
  height: 200px;
  margin: -35px 0 0 -1000px;
  background-color: #070e16;
  box-shadow: 0 0 20px rgb(255, 255, 255);
}
input
{
  display: none;
  visibility: hidden;
  -webkit-appearance: none;
}

/*needs a margin in order to center it - so far is only a test*/
.toggle
{
  position: absolute;
  left: 150px;
  height: 40px;
  width: 200px;
  top: 20px;
  background-color: #0f212f;
  z-index: 1;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0 0 10px rgb(255, 255, 255);
}
.toggle .common
{
  transition: 0.75s ease;
}
.slide1
{
   transition: 0.75s ease;
}
.bionexe
{
   transition: 0.75s ease;
}
.bion
{
   transition: 0.75s ease;
}
.clickme
{
  margin: 2px 0 0 45px;
  color: rgb(255, 255, 255);
}
input:checked ~ .toggle .hex_left
{
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -120px 0 0 -120px;
  transform: translateX(-1000px);
  z-index: 10;
}
input:checked ~ .toggle .hex_right
{
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -120px 0 0 -120px;
  transform: translateX(990px);
  z-index: 10;
}

input:checked ~ .toggle .bion
{
  opacity: 0;
  /*transform: translateY(-3000px);*/
}

input:checked ~ .toggle .bionexe
{
  opacity: 100%;
  transform: translateZ(0)
}
.sec
{
	position: relative;
	background:#0c1721;
  margin: 800px 0px -90px 0px;
}
@media (max-width: 1300px)
{
  .sec
  {
    margin: 900px 0px -90px 0px;
  }
  .bion
{
  display: block;
  position: fixed;
  top: 42.5%;
  left: 50%;
  width: 3525px;
  height: 250px;
  margin: -35px 0 0 -1735px;
  z-index: 11;
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}
}
.sec h2
{
	font-size: 3.5em;
	margin-bottom: 10px;
	color: #fff;
}
.sec p
{
	font-size: 1em;
	color: #fff;
}
.sec ul li a 
{
  font-size: 1em;
	color: #fff;
}
.sec li
{
  font-size: 0.75em;
	color: #fff;
}
.sec ul li a:hover
{
  color: #fff;
  background-color: #0f212f;
}
.left-aligned 
{ 
  margin-left: auto; 
}
label .dropdown-menu
{
  position: absolute;
  display: none;
}
label .menu-bar>li:hover .dropdown-menu
{
  display: block;
  background-color: #0f212f;
  left: 70px;
  width: 200px;
}
.nav-item ul li a:hover
{
    color: #0f212f;
    background-color: #fff;
}
.footer
{
  background-color: #0f212f;
  position: relative;
  margin: 0px;
}
.footer h3
{
	font-size: 1.5em;
	margin-bottom: 10px;
	color: #fff;
}
.footer p
{
	font-size: 1em;
	color: #fff;
}
.footer ul li a
{
	font-size: 1em;
	color: #fff;
}
.footer ul li a:hover
{
  color: #fff;
  background-color: #0f212f;
}

@media (max-width: 600px)
{
  .bion
  {
    opacity: 0;
  }
  input:checked ~ .toggle .bion
  {
  opacity: 0;
  }
    .toggle .common
{
  transition: 1s ease;
}
.slide1
{
   transition: 1s ease;
}
.bionexe
{
   transition: 1s ease;
}
.bion
{
   transition: 1s ease;
}
.hex_right
{
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1525px;
  height: 100px;
  margin: -35px 0 0 -748px;
  z-index: 10;
}
.hex_left
{
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1525px;
  height: 100px;
  margin: -35px 0 0 -748px;
  z-index: 10;
}
.bion
{
  display: block;
  position: fixed;
  padding-top: 50%;
  left: 50%;
  width: 2000px;
  height: 100px;
  margin: -35px 0 0 -1000px;
  z-index: 11;
}
.bionexe
{
  display: block;
  position: fixed;
  top: 50%;
  left: 60%;
  width: 1525px;
  height: 110px;
  margin: -40px 0 0 -800px;
  z-index: 10;
  opacity: 0%;
}
.slide1
{
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 2000px;
  height: 100px;
  margin: -35px 0 0 -1000px;
  background-color: #070e16;
}

input
{
  display: none;
  visibility: hidden;
  -webkit-appearance: none;
}
/*needs a margin in order to center it - so far is only a test*/
.toggle
{
  position: absolute;
  height: 40px;
  width: 200px;
  top: 20px;
  left: 150px;
  background-color: #0f212f;
  z-index: 1;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0 0 10px rgb(255, 255, 255);
}
input:checked ~ .toggle .hex_left
{
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -60px 0 0 -60px;
  transform: translateX(-1000px);
  z-index: 10;
}
input:checked ~ .toggle .hex_right
{
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -60px 0 0 -60px;
  transform: translateX(990px);
  z-index: 10;
}
.toggle .bion
{
  top: 50%;
  left: 50%;
}
input:checked ~ .toggle .bion
{
  opacity: 0;
  transform: translateY(-600px);
}
.left-aligned { margin-left: auto; }
.footer
{
  background-color: #0f212f;
  position: relative;
  margin: 0px;
}
.footer h3
{
	font-size: 1.5em;
	margin-bottom: 10px;
	color: #fff;
}
.footer p
{
	font-size: 1em;
	color: #fff;
}
.footer ul li a
{
	font-size: 1em;
	color: #fff;
}
.footer ul li a:hover
{
  color: #fff;
  background-color: #0f212f;
}
.clickme
{
  margin: 2px 0 0 45px;
  color: rgb(255, 255, 255);
}
}



.container
{
  margin: auto;
  width: 10;
  padding-left: 0;
}
.container1
{
  padding: 100px 0 0 0;
  margin: -10px 0 0 0;
  margin: auto;
  width: 10;
  padding-left: 0;
}
.projectimg
{
  float: right;
  padding: 0 10px 0 0;
  width: 40%;
  max-width: 480px;
  min-width: 192px;
  text-align: center;
}
.projectdes
{
  margin-top: auto;
  width: 10;
  padding-left: 0;
}
.welcome
{
  text-align: center;
}