@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/roboto-regular.ttf');
  }

   @font-face
  {
    font-family: 'merriweather-bold';
    src: url('https://static.igem.wiki/teams/4339/wiki/fonts/roboto-bold.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;
    letter-spacing: 3px;
  }

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

   .strong
  {
    font-family: 'merriweather-bold';
    color: #fff;
    font-size: 1.5 rem;
    font-weight: 700;
    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;
  }


  ol
  {
    font-family: 'merriweather';
    font-size: 1.5 rem;
    font-weight: 500;
    line-height: 1.5 rem;
  }

  li ol
  {
    font-family: 'merriweather';
    font-size: 1.5 rem;
    font-weight: 500;
    line-height: 1.5 rem;
  }

  #references
  {
    font-size: 0.5 rem;
  }

  
*
{
  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 screen and (min-width: 768px) {
  html {
    font-size: 110%;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 120%;
  }
}

@media screen and (min-width: 1200px) {
  html {
    font-size: 130%;
  }
}



body
{overflow-x: hidden;
  height: 100%;
  background: linear-gradient(#152b40, #4b97c8);
  background-size: cover;
}
.bar
{
  position: relative;
  top: 400px;
  width: auto;
  height: 225px;
  align-items: center;
  background-color: #0f212f;
  box-shadow: 0 0 20px rgb(255, 255, 255);
  opacity: 60%;
}
.name
{
  position: relative;
  font-size: 3rem;
  margin-left: auto;
  margin-right: 10px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  opacity: 100%;
}
.name h1
{
  position: relative;
  font-size: 3em;
  opacity: 100%;
}
/* 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;
}
.slide0 h1
{
    color: #0f212f;
    font-weight: 800;
    text-align: right;
    padding: 10px 0;
    padding-right: 30px;
    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: "";
}
input
{
  display: none;
  visibility: hidden;
  -webkit-appearance: none;
}

/*needs a margin in order to center it - so far is only a test*/
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:#152b40;
  margin: 800px 0px -65px 0px;
}
@media (max-width: 1300px)
{
  .sec
  {
    margin: 900px 0px -50px 0px;
  }
}
.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: 300px 0px -100px 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;
  }
.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%;
  transition: 1s ease;
}

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);
}
.toggle .common
{
  transition: 2s ease;
}
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: 300px 0px -100px 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;
}