.blue-glow{
    /*box-shadow: #A0CFD3 0px 10px 36px 0px, #A0CFD3 0px 0px 0px 1px;*/
    box-shadow:  #A0CFD3 0px 2px 8px 0px;
    padding: 5%;
    margin:2%;
    /* background:#F2F3F7; */
    background: #F2F3F7
  }

  .blue-glow-dark{
    /*box-shadow: #A0CFD3 0px 10px 36px 0px, #A0CFD3 0px 0px 0px 1px;*/
    box-shadow:  #A0CFD3 0px 2px 8px 0px;
    padding: 5%;
    margin:2%;
    /* background:#F2F3F7; */
    background: #272635
  }
  
  .white-glow{
    /*box-shadow: #F2F3F7 0px 10px 36px 0px, #F2F3F7 0px 0px 0px 1px;*/
    box-shadow: #F2F3F7 0px 2px 8px 0px;
    padding: 5%;
    margin:2%;
    background:#F2F3F7;
}

.white-glow-dark{
  /*box-shadow: #F2F3F7 0px 10px 36px 0px, #F2F3F7 0px 0px 0px 1px;*/
  box-shadow: #F2F3F7 0px 2px 8px 0px;
  padding: 5%;
  margin:2%;
  background:#272635;
}

  .yellow-glow{
    /*box-shadow: #FFEBB3 0px 10px 36px 0px,  #FFEBB3 0px 0px 0px 1px;*/
    box-shadow:  #FFEBB3 0px 2px 8px 0px;
    padding:5%;
    margin:2%;
    background:#F2F3F7;
  }
  .yellow-glow-dark{
    /*box-shadow: #FFEBB3 0px 10px 36px 0px,  #FFEBB3 0px 0px 0px 1px;*/
    box-shadow:  #FFEBB3 0px 2px 8px 0px;
    padding:5%;
    margin:2%;
    background:#272635;
  }

  .teal-glow{
    /*box-shadow: #007A74 0px 10px 36px 0px,  #007A74 0px 0px 0px 1px;*/
    box-shadow:  #007A74 0px 2px 8px 0px;
    padding:5%;
    margin:2%;
    background:#F2F3F7;
  }

  .teal-glow-dark{
    /*box-shadow: #007A74 0px 10px 36px 0px,  #007A74 0px 0px 0px 1px;*/
    box-shadow:  #007A74 0px 2px 8px 0px;
    padding:5%;
    margin:2%;
    background:#272635;
  }

  .pink-glow{
    /*box-shadow: #A0CFD3 0px 10px 36px 0px, #A0CFD3 0px 0px 0px 1px;*/
    box-shadow:  var(--pink) 0px 2px 8px 0px;
    padding: 5%;
    margin:2%;
    background:#F2F3F7;
    text-align:justify;
  }

  .pink-glow-dark{
    /*box-shadow: #A0CFD3 0px 10px 36px 0px, #A0CFD3 0px 0px 0px 1px;*/
    box-shadow:  var(--pink) 0px 2px 8px 0px;
    padding: 5%;
    margin:2%;
    background:#272635;
    text-align:justify;
  }

  .raisin-glow{
    /*box-shadow: #A0CFD3 0px 10px 36px 0px, #A0CFD3 0px 0px 0px 1px;*/
    box-shadow:  var(--raisin) 0px 2px 8px 0px;
    padding: 5%;
    margin:2%;
    background:#F2F3F7;
    text-align:justify;
  }

  .raisin-glow-dark{
    /*box-shadow: #A0CFD3 0px 10px 36px 0px, #A0CFD3 0px 0px 0px 1px;*/
    box-shadow:  var(--raisin) 0px 2px 8px 0px;
    padding: 5%;
    margin:2%;
    background:#272635;
    text-align:justify;
  }



  /*human practices page*/
    /*teal boxes*/
    .teal-solid{
      float: left;
      width: 40%;
      text-align:center;
      height: 100vh; /* Should be removed. Only for demonstration */
      background:var(--teal);
      color:var(--white);
      padding:1%;
    }
  
    .teal-glow-right{
      float: left;
      width: 58%;
      text-align:center;
      height: 95vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: #A0CFD3 0px 10px 36px 0px, #A0CFD3 0px 0px 0px 1px;*/
      box-shadow: var(--teal) 0px 2px 8px 0px;
      padding:0%;
      background:var(--white);
      margin: 2.5vh 0% 2.5vh 2%;
    }
  
    .teal-glow-left{
      float: left;
      width: 58%;
      text-align:center;
      height: 95vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: #A0CFD3 0px 10px 36px 0px, #A0CFD3 0px 0px 0px 1px;*/
      box-shadow: var(--teal) 0px 2px 8px 0px;
      padding:0%;
      background:var(--white);
      margin: 2.5vh 2% 2.5vh 0%;
    }

    .teal-glow-right-dark{
      float: left;
      width: 58%;
      text-align:center;
      height: 95vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: #A0CFD3 0px 10px 36px 0px, #A0CFD3 0px 0px 0px 1px;*/
      box-shadow: var(--teal) 0px 2px 8px 0px;
      padding:0%;
      background:var(--raisin);
      margin: 2.5vh 0% 2.5vh 2%;
    }
  
    .teal-glow-left-dark{
      float: left;
      width: 58%;
      text-align:center;
      height: 95vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: #A0CFD3 0px 10px 36px 0px, #A0CFD3 0px 0px 0px 1px;*/
      box-shadow: var(--teal) 0px 2px 8px 0px;
      padding:0%;
      background:var(--raisin);
      margin: 2.5vh 2% 2.5vh 0%;
    }
  
  /*yellow boxes*/
  
  .yellow-solid{
      float: left;
      width: 40%;
      text-align:center;
      height: 90vh; /* Should be removed. Only for demonstration */
      background:var(--yellow);
      color:var(--raisin);
      padding:1%;
    }
  
    .yellow-glow-right{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--yellow) 0px 10px 36px 0px, var(--yellow) 0px 0px 0px 1px;*/
      box-shadow: var(--yellow) 0px 2px 8px 0px;
      padding:0%;
      background:var(--white);
      margin: 2.5vh 0% 2.5vh 2%;
    }
  
    .yellow-glow-left{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--yellow) 0px 10px 36px 0px, var(--yellow) 0px 0px 0px 1px;*/
      box-shadow: var(--yellow) 0px 2px 8px 0px;
      padding:0%;
      background:var(--white);
      margin: 2.5vh 2% 2.5vh 0%;
    }


    .yellow-glow-right-dark{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--yellow) 0px 10px 36px 0px, var(--yellow) 0px 0px 0px 1px;*/
      box-shadow: var(--yellow) 0px 2px 8px 0px;
      padding:0%;
      background:var(--raisin);
      margin: 2.5vh 0% 2.5vh 2%;
    }
  
    .yellow-glow-left-dark{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--yellow) 0px 10px 36px 0px, var(--yellow) 0px 0px 0px 1px;*/
      box-shadow: var(--yellow) 0px 2px 8px 0px;
      padding:0%;
      background:var(--raisin);
      margin: 2.5vh 2% 2.5vh 0%;
    }
  
  /* raisin boxes*/
  .raisin-solid{
      float: left;
      width: 40%;
      text-align:center;
      height: 90vh; /* Should be removed. Only for demonstration */
      background:var(--raisin);
      color:var(--white);
      padding:1%;
    }
  
    .raisin-glow-right{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--raisin) 0px 10px 36px 0px, var(--raisin) 0px 0px 0px 1px;*/
      box-shadow: var(--raisin) 0px 2px 8px 0px;
      padding:0%;
      background:var(--white);
      margin: 2.5vh 0% 2.5vh 2%;
    }
  
    .raisin-glow-left{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--raisin) 0px 10px 36px 0px, var(--raisin) 0px 0px 0px 1px;*/
      box-shadow: var(--raisin) 0px 2px 8px 0px;
      padding:0%;
      background:var(--white);
      margin: 2.5vh 2% 2.5vh 0%;
    }


    .raisin-glow-right-dark{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--raisin) 0px 10px 36px 0px, var(--raisin) 0px 0px 0px 1px;*/
      box-shadow: var(--raisin) 0px 2px 8px 0px;
      padding:0%;
      background:var(--raisin);
      margin: 2.5vh 0% 2.5vh 2%;
    }
  
    .raisin-glow-left-dark{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--raisin) 0px 10px 36px 0px, var(--raisin) 0px 0px 0px 1px;*/
      box-shadow: var(--raisin) 0px 2px 8px 0px;
      padding:0%;
      background:var(--raisin);
      margin: 2.5vh 2% 2.5vh 0%;
    }
  
  /*pink boxes*/
  .pink-solid{
      float: left;
      width: 40%;
      text-align:center;
      height: 90vh; /* Should be removed. Only for demonstration */
      background:var(--pink);
      color:var(--raisin);
      padding:1%;
    }
  
    .pink-glow-right{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--pink) 0px 10px 36px 0px, var(--pink) 0px 0px 0px 1px;*/
      box-shadow: var(--pink) 0px 2px 8px 0px;
      padding:0%;
      background:var(--white);
      margin: 2.5vh 0% 2.5vh 2%;
    }
  
    .pink-glow-left{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--pink) 0px 10px 36px 0px, var(--pink) 0px 0px 0px 1px;*/
      box-shadow: var(--pink) 0px 2px 8px 0px;
      padding:0%;
      background:var(--white);
      margin: 2.5vh 2% 2.5vh 0%;
    }

    .pink-glow-right-dark{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--pink) 0px 10px 36px 0px, var(--pink) 0px 0px 0px 1px;*/
      box-shadow: var(--pink) 0px 2px 8px 0px;
      padding:0%;
      background:var(--raisin);
      margin: 2.5vh 0% 2.5vh 2%;
    }
  
    .pink-glow-left-dark{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--pink) 0px 10px 36px 0px, var(--pink) 0px 0px 0px 1px;*/
      box-shadow: var(--pink) 0px 2px 8px 0px;
      padding:0%;
      background:var(--raisin);
      margin: 2.5vh 2% 2.5vh 0%;
    }
  
  /*blue boxes*/
  
  .blue-solid{
      float: left;
      width: 40%;
      text-align:center;
      height: 90vh; /* Should be removed. Only for demonstration */
      background:var(--blue);
      color:var(--raisin);
      padding:1%;
    }
  
    .blue-glow-right{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--blue) 0px 10px 36px 0px, var(--blue) 0px 0px 0px 1px;*/
      box-shadow: var(--blue) 0px 2px 8px 0px;
      padding:0%;
      background:var(--white);
      margin: 2.5vh 0% 2.5vh 2%;
    }
  
    .blue-glow-left{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--blue) 0px 10px 36px 0px, var(--blue) 0px 0px 0px 1px;*/
      box-shadow: var(--blue) 0px 2px 8px 0px;
      padding:0%;
      background:var(--white);
      margin: 2.5vh 2% 2.5vh 0%;
    }
  

    .blue-glow-right-dark{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--blue) 0px 10px 36px 0px, var(--blue) 0px 0px 0px 1px;*/
      box-shadow: var(--blue) 0px 2px 8px 0px;
      padding:0%;
      background:var(--raisin);
      margin: 2.5vh 0% 2.5vh 2%;
    }
  
    .blue-glow-left-dark{
      float: left;
      width: 58%;
      text-align:center;
      height: 85vh; 
      /*background: #F2F3F7;*/
      /*background-image: url("https://static.igem.wiki/teams/4694/wiki/human-practices-docs/squiggle-reversed3.svg");
      background-size: cover;*/
      /*box-shadow: var(--blue) 0px 10px 36px 0px, var(--blue) 0px 0px 0px 1px;*/
      box-shadow: var(--blue) 0px 2px 8px 0px;
      padding:0%;
      background:var(--raisin);
      margin: 2.5vh 2% 2.5vh 0%;
    }


    .info-panel-dark{
      width:100%;
      height:20px;
      color:var(--white);
      background:var(--raisin);
      z-index:1000;
    }

    .info-panel{
      width:100%;
      height:30px;
      color:var(--raisin);
      /*background:var(--white);*/
      z-index:1000;
    }

    .info {
      width:50px;
      height:50px;
      border-radius:50%;
      /*background:var(--pink);*/
      color:var(--white);
      cursor:pointer;
      animation:color-change 3s infinite;
    
    }
    @keyframes color-change{
      0% {fill: var(--pink);}
      50% {fill: var(--yellow);}
      100% {fill: var(--pink);}
    }
  
    .info:hover {
      background:var(--blue);
    }
  
  
  
    .info-hide{
      visibility:hidden;
    }
  
    .info-open{
      visibility:visible;
    }
  
    .info-column1{
      width:10%;
      /*float:left;*/
      height:100px;
      padding:1%;
    }
  
    .info-column2{
      width: 85%;
      /*float:left;*/
      height:100px;
      padding:1%;
    }
  

/*new sidebars*/
:root {
  --yellow: #FFEBB3;
  --pink: #FFB5B3;
  --blue: #A0CFD3;
  --white: #F2F3F7;
  --teal: #007A74;
  --raisin: #272635; 
  --sidebar-width: 25%;
  --sidebar-width-close:25%;
  --main-width:75%;
  --main-display:block;
  --main-move:25%;
}

@media (max-width: 600px) {
        :root{
        	--sidebar-width:99%;
            --sidebar-width-close:0%
            --main-display:none;
            --main-width:100%;
            --blue: #FFEBB3;
            --main-move:0%;
           }
        }
      
@media (max-width: 768px) and (min-width:600px) {
        :root{
        	--sidebar-width:35%;
            --sidebar-width-close:0%
            --main-display:block;
            --main-width:65%;
            --teal:pink;
            --main-move:35%;
           }
        }

.sidebar2 {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  /*background-color: var(--teal);*/
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar2 a {
  /*padding: 4px 8px 4px 32px;*/
  text-decoration: none;
  /*font-size: 16px;
  color: var(--raisin);*/
  display: block;
  transition: 0.3s;
}

/*.sidebar2 a:hover {
  color: #f1f1f1;
}*/

.sidebar2 .closebtn {
  position: absolute;
  right: 25px;
  font-size: 20px;
  margin-left: 50px;
}

.sidebar2{
  top:5%;
}
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: var(--white);
  color: var(--teal);
  padding: 10px 15px;
  border: none;
}


.openbtn:hover {
  background-color: var(--teal);
}



#main {
  transition: margin-left .5s;
  
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar2 {padding-top: 15px;}
  .sidebar2 a {font-size: 18px;}
}

.hide-button{
  visibility:hidden;
}

@media (max-width: 600px) {
  .openbtn{
    font-size:30px;
  }
  .sidebar2{
    font-size:23px;
  }
}

@media (min-width: 600px) and (max-width: 768px) {
  .openbtn{
    font-size:20px;
  }
  .sidebar2{
    font-size:16px;
  }
}