@font-face {
	font-family: 'montserrat-light';
	src: url("https://static.igem.wiki/teams/5329/fonts/montserrat-light.ttf");
  }


body {
	padding-top: 56px;
	color:#343a40;
	font-family: 'montserrat-light';
}

a{
	color:#343a40;
}
a:active{
	color:#343a40;
}
a:visited{
	color:#343a40;
}
a:hover{
	color:#2d5fa2;
}



/*MENU*/

/*progress bar*/
#progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 5px;
	background-color: #6bbce5; 
	width: 0%;
	z-index: 9999;
  } 


/* Navbar */
.navbar-hidden {
	transition: top 0.3s ease;
  }
  
  
  /* Navbar style */
  .navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 70px; 
	background-color: #333; 
	z-index: 1000;
	transition: top 0.3s ease; 
  }







.left-aligned {
	margin-left: auto;
}

.bg-dark {
	background-color: #343a40 !important;
}

.bg-hero {
	background-color: #45b06c;
}

.bg-darkBlue {
	background-color: #2d5fa2 !important;
	opacity: 1;
}

.bg-lightBlue {
	background-color: #2d9bd2; /*#6bbce5;  #269dd9*/
}

/* CALLOUT */
.bd-callout {
	padding: 1.25rem;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	border: 1px solid #e9ecef;
	border-left-width: .25rem;
	border-radius: .25rem
}

.bd-callout h4 {
	margin-bottom: .25rem
}

.bd-callout p:last-child {
	margin-bottom: 0
}

.bd-callout code {
	border-radius: .25rem
}

.bd-callout+.bd-callout {
	margin-top: -.25rem
}

.bd-callout-info {
	border-left-color: #5bc0de
}

.bd-callout-warning {
	border-left-color: #f0ad4e
}

.bd-callout-danger {
	border-left-color: #d9534f
}



/* PAGES */

/* team */

.bg_blue1{

	background: rgba(45, 95, 162, 0.4);
	padding: 1vW 2vW;
	border-radius: 3rem;
}
.bg_blue2{

	background: rgba(45, 95, 162, 0.65);
	padding: 1vW 2vW;
	border-radius: 3rem;
}
.bg_blue3{

	background: rgba(45, 95, 162, 0.5);
	padding: 1vW 2vW;
	border-radius: 3rem;
}
.bg_blue4{

	background: rgba(45, 95, 162, 0.3);
	padding: 1vW 2vW;
  	border-radius: 3rem;
}
.bg_lightblue1{

	background: rgba(107, 188, 229, 0.4);
	padding: 1vW 2vW;
  	border-radius: 3rem;
}
.bg_lightblue2{

	background: rgba(107, 188, 229, 0.65);
	padding: 1vW 2vW;
  	border-radius: 3rem;
}
.bg_lightblue3{

	background: rgba(107, 188, 229, 0.5);
	padding: 1vW 2vW;
  	border-radius: 3rem;
}

.bg_green1{

	background: rgba(69, 176, 108, 0.4);
	padding: 1vW 2vW;
	border-radius: 3rem;
}
.bg_green2{

	background: rgba(69, 176, 108, 0.65);
	padding: 1vW 2vW;
	border-radius: 3rem;
}
.bg_green3{

	background: rgba(69, 176, 108, 0.5);
	padding: 1vW 2vW;
	border-radius: 3rem;
}
.bg_green4{

	background: rgba(69, 176, 108, 0.3);
	padding: 1vW 2vW;
	border-radius: 3rem;
}

.participation_legend ul{
	list-style-type: none;
	display: grid;
	grid-template-columns: auto auto;
}
.participation_legend ul li{
	display: inline;
}

.participation_legend_img{
	width: 3vW;
	height: 3vW;
	
}

.team{
	background: #fff;
}

.team_heading{
	font-size: 3vW;
	text-align: center;
	color: #343a40;
}

.team_member{
	padding:  2vW;
	margin: 2vH 0;
	display: grid;
	grid-template-columns: auto auto;
}

.team_member img{
	width: 15vW;
	height: auto;
	margin: 0.5vW;
	border: 1rem double #2d5fa2;
	border-radius: 3rem;
}
.member_name{
	text-align: center;
}

.member_description{
	padding: 5vW 5vW 5vW 2.5vW;
	margin: auto 0;
}

.team_member_info{
	margin: auto;
}

.team_participation{
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
}

.team_participation img{
	height: 6vW;
	width: 6vW;
	border: none;
}

/* funding */

.fund_plat_sponsors,
.fund_gold_sponsors,
.fund_silver_sponsors,
.fund_bronze_sponsors,
.fund_inkind_sponsors {
	list-style-type: none;
}

ul.fund_plat_sponsors,
ul.fund_gold_sponsors,
ul.fund_silver_sponsors,
ul.fund_bronze_sponsors,
ul.fund_inkind_sponsors{
	display: grid;
  	grid-template-columns: auto auto auto;
	justify-content: space-evenly;
}

@media only screen and (max-width: 800px) {
	.bg_blue1,.bg_blue2,.bg_blue3,.bg_blue4,
	.bg_green1,.bg_green2,.bg_green31{
		border-radius: 1.5rem;
	}

	ul.fund_plat_sponsors,
	ul.fund_gold_sponsors,
	ul.fund_silver_sponsors,
	ul.fund_bronze_sponsors,
	ul.fund_inkind_sponsors{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: space-evenly;
	}

	.sponsor {
		display:block;
		width: 20vw;
		height: 20vw;
	}
	.team_member img{
		width: 25vW;
		height: auto;
		margin: 0.5vW;
		border: 0.5rem double #2d5fa2;
		border-radius: 3rem;
	}
	
	/*team*/
	.team_participation img{
		height: 10vW;
		width: 10vW;
		border: none;
	}

	/*DRY LAB*/
	/*table design*/
	table{
		text-align:center;
	}
	
	table th{
		padding:2rem;
		background:#2d5fa2;
		color:#fff;
		border-bottom: 5px solid #123e78;
	}
	table td{
		padding:1rem 2rem;
		background:#bbd1f0;
	}
	table caption{
		width: 60vW;
	}

	/*HUMAN PRACTICES*/

	.survey_structure ul li{
		border-radius: 1rem; 
	}

	/*education*/
	.edu_li_marker{
		font-size: 3vW;
		font-weight: bold;
		margin: auto 5vW auto 0;
	}
}

.sponsor {
	position: relative;
	width: 15vw;
	height: 15vw;
	margin-top: 5vh;
}

.fund_sponsor_logo {
	display: block;
	padding: auto;
	width: 15vW;
	height: auto;
	margin: auto;
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: #2d5fa2;
  }

  .sponsor:hover .overlay {
	opacity: 1;
  }

.text {
  color: white;
  font-size: 1.5vw;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* engineering success */

/* copy-paste start*/
#tab1:checked ~ section .tab1,
#tab2:checked ~ section .tab2,
#tab3:checked ~ section .tab3,
#tab4:checked ~ section .tab4{
  display: block;
}

#tab1:checked ~ section > div .col-lg-8,
#tab2:checked ~ section > div .col-lg-8,
#tab3:checked ~ section > div .col-lg-8,
#tab4:checked ~ section > div .col-lg-8{
  animation-duration: 0.5s;
  animation-name: fadeInRight;
}
/* copy-paste start*/
#note1:checked ~ section .note1,
#note2:checked ~ section .note2,
#note3:checked ~ section .note3,
#note4:checked ~ section .note4{
  display: block;
}

#note1:checked ~ section > div .col-lg-8,
#note2:checked ~ section > div .col-lg-8,
#note3:checked ~ section > div .col-lg-8,
#note4:checked ~ section > div .col-lg-8{
  animation-duration: 0.5s;
  animation-name: fadeInRight;
}

.pc-tab {
	width: 100%;
	margin: auto;
  }
  .pc-tab ul {
	list-style: none;
	margin: 0;
	padding: 0;
  }
  .pc-tab ul li label {
	float: left;
	padding: 15px 25px;
	border: 1px solid #ddd;
	border-bottom: 0;
	background: #eee;
	color: #444;
	cursor: pointer;
  }
  .pc-tab ul li label:hover {
	background: #ddd;
  }
  .pc-tab ul li label:active {
	background: #fff;
  }
  .pc-tab ul li:not(:last-child) label {
	border-right-width: 0;
  }
  .pc-tab section {
	clear: both;
  }
  .pc-tab section div {
	padding: 1px;
  }
  
  #tab1:checked ~ nav .tab1 label,
  #tab2:checked ~ nav .tab2 label,
  #tab3:checked ~ nav .tab3 label,
  #tab4:checked ~ nav .tab4 label{
	background: #fff;
	position: relative;
  }
  #tab1:checked ~ nav .tab1 label:after,
  #tab2:checked ~ nav .tab2 label:after,
  #tab3:checked ~ nav .tab3 label:after,
  #tab4:checked ~ nav .tab4 label:after{
	content: "";
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	background: #ffffff;
	left: 0;
	bottom: -1px;
  }
  #note1:checked ~ nav .note1 label,
  #note2:checked ~ nav .note2 label,
  #note3:checked ~ nav .note3 label,
  #note4:checked ~ nav .note4 label{
	background: #fff;
	position: relative;
  }
  #note1:checked ~ nav .note1 label:after,
  #note2:checked ~ nav .note2 label:after,
  #note3:checked ~ nav .note3 label:after,
  #note4:checked ~ nav .note4 label:after{
	content: "";
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	background: #ffffff;
	left: 0;
	bottom: -1px;
  }

  /* tabs menu design */
/* Component Needs */
@-webkit-keyframes fadeInRight {
	0% {
	 opacity:0;
	 -webkit-transform:translateX(20px)
	}
	100% {
	 opacity:1;
	 -webkit-transform:translateX(0)
	}
   }
   @-moz-keyframes fadeInRight {
	0% {
	 opacity:0;
	 -moz-transform:translateX(20px)
	}
	100% {
	 opacity:1;
	 -moz-transform:translateX(0)
	}
   }
   @-o-keyframes fadeInRight {
	0% {
	 opacity:0;
	 -o-transform:translateX(20px)
	}
	100% {
	 opacity:1;
	 -o-transform:translateX(0)
	}
   }
   @keyframes fadeInRight {
	0% {
	 opacity:0;
	 transform:translateX(20px)
	}
	100% {
	 opacity:1;
	 transform:translateX(0)
	}
   }
   .pc-tab > input,
   .pc-tab section > div {
	 display: none;
   }
/* copy-paste end */  

/*HUMAN PRACTICES*/
.hp_overview{
	background: rgba(45, 95, 162, 0.8);
	padding: 1vW 2vW;
  	border-radius: 3rem;
	color: #fff;
	text-align: center;
}
.hp_overview ul{
	list-style-type: none;
}
.hp_overview a, .hp_overview a:active{
	color: #fff;
}
.survey_heading{
	font-size: 3vW;
	color: #343a40;
}

.survey_structure ol{
	list-style-position: inside;
}

.survey_structure ol li{
	margin: 5vH 0;
	text-align: center;
}

.hp_heading{
	font-size: 3vW;
	color: #343a40;
	margin-top: 5vW;
}

.hp_interview_text ul{
	list-style-type: none;
}
.hp_interview_text ul li{
	margin: 2.5 0;
}

/* SAFETY */
.safety_heading{
	text-align: center;
	font-size: 3vW;
}
.safety_subheading{
	font-weight: bold;
	font-size: 2vW;
}
.safety_organism_heading{
	font-weight: bold;
}
.safety_organisms{
	border-radius: 2rem;
	margin: 2.5 0;
	padding: 2.5;
}

.safety_handling{
	margin-top: 5vW;
}


/* AWARDS */

/* medals */

.medals_heading{
	text-align: center;
	font-weight: bold;
}

.bg_bronze1{
	background: rgba(149, 67, 0, 0.5);
	padding: 1vW 2vW;
	border-radius: 3rem;
	margin: 2.5vW 0;
}
.bg_bronze2{
	background: rgba(149, 67, 0, 0.3);
	padding: 1vW 2vW;
	border-radius: 3rem;
	margin: 2.5vW 0;
}
.bg_bronze3{
	background: rgba(149, 67, 0, 0.4);
	padding: 1vW 2vW;
	border-radius: 3rem;
	margin: 2.5vW 0;
}

.bg_silver1{
	background: rgba(138, 147, 150, 0.5);
	padding: 1vW 2vW;
	border-radius: 3rem;
	margin: 2.5vW 0;
}
.bg_silver2{
	background: rgba(138, 147, 150, 0.3);
	padding: 1vW 2vW;
	border-radius: 3rem;
	margin: 2.5vW 0;
}

.bg_gold1{
	background: rgba(255, 196, 0, 0.5);
	padding: 1vW 2vW;
	border-radius: 3rem;
	margin: 2.5vW 0;
}
.bg_gold2{
	background: rgba(255, 196, 0, 0.3);
	padding: 1vW 2vW;
	border-radius: 3rem;
	margin: 2.5vW 0;
}
.bg_gold3{
	background: rgba(255, 196, 0, 0.4);
	padding: 1vW 2vW;
	border-radius: 3rem;
	margin: 2.5vW 0;
}



/* education*/

.edu_objective{
	background: rgba(45, 95, 162, 1);
	color: #fff;
	padding: 1vW 2vW;
	margin: 3vW 0;
	border-radius: 3rem;
}

.edu_objective ul {
	list-style-type: none;
}

.edu_objective ul li {
	display: grid;
	grid-template-columns: auto auto;
	margin: 2.5vH 0;
}

.edu_initiative ul {
	list-style-type: none;
}

.edu_initiative ul li {
	margin: 2.5vH 0;
}

.edu_li_marker{
	font-size: 3vW;
	font-weight: bold;
	margin: auto 3vW auto 0;
}

.edu_heading{
	text-align: center;
	font-size: 3vW;
}
.edu_subheading{
	font-weight: bold;
	font-size: 2vW;
}
.text_col{
	display: grid;
	grid-template-columns: auto auto;
	margin: 2.5vH 0;
}

/*inclusivity*/
.inclu_objective{
	background: rgba(45, 95, 162, 1);
	color: #fff;
	padding: 1vW 2vW;
	margin: 3vW 0;
	border-radius: 3rem;
}

.inclu_objective ul {
	list-style-type: none;
}

.inclu_objective ul li {
	display: grid;
	grid-template-columns: auto auto;
	margin: 2.5vH 0;
}

.inclu_initiative ul {
	list-style-type: none;
}

.inclu_initiative ul li {
	margin: 2.5vH 0;
	padding:2.5vW;
}

.inclu_li_marker{
	font-size: 3vW;
	font-weight: bold;
	margin: auto 3vW auto 0;
}

.inclu_heading{
	text-align: center;
	font-size: 3vW;
}
.inclu_subheading{
	font-weight: bold;
	font-size: 2vW;
}

/* FOOTER */
footer{
	padding:0;
	margin-bottom: 0;
}

footer a {
	color: white;
	font-weight: bold;
	text-decoration: none;
}

footer a:hover {
	color: white;
	text-decoration: underline;
}

.footer_icon_list{
	display: grid;
	grid-template-columns: 10vW 10vW;
	grid-template-rows: auto auto auto;
}

/* wave animation*/
footer section {
	position: relative;
	width: 100%;
	height: 20vh;                     /*100vH*/
	overflow: hidden;
	margin-bottom: 0;
}

footer section .wave {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 90px;
	background: url("https://static.igem.wiki/teams/5329/footer/wave.png");
	background-size: 1000px 100px;
}


footer section .wave.wave1 {
	animation: animate1 45s linear infinite;
	z-index: 800;
	opacity: 1;
	animation-delay: 0s;
	bottom: 0;
}

footer section .wave.wave2 {
	animation: animate2 25s linear infinite;
	z-index: 801;
	opacity: 0.7;
	animation-delay: -10s;
	bottom: 0;
}

footer section .wave.wave3 {
	animation: animate3 20s linear infinite;
	z-index: 799;
	opacity: 0.6;
	animation-delay: -1s;
	bottom: 0;
}

footer section .wave.wave4 {
	animation: animate4 30s linear infinite;
	z-index: 798;
	opacity: 0.5;
	animation-delay: -5s;
	bottom: 0;
}

@keyframes animate1 {
	0% {
		background-position-x: 0;
	}

	100% {
		background-position-x: 1000px;
	}
}

@keyframes animate2 {
	0% {
		background-position-x: 0;
	}

	100% {
		background-position-x: 1000px;
	}
}

@keyframes animate3 {
	0% {
		background-position-x: 0;
	}

	100% {
		background-position-x: 1000px;
	}
}

@keyframes animate4 {
	0% {
		background-position-x: 0;
	}

	100% {
		background-position-x: -1000px;
	}
}

/* styling on mobile phones (screens under 426px width)  */
@media only screen and (max-width: 426px) {
 
	/* team */


	img.group_photo{
		width: 100vW;
		border-radius: 0.5rem;
		margin: 0 auto;
	}

	.team_heading{
		font-size: 5vW;
		text-align: center;
		color: #343a40;
	}

	.participation_legend_img{
		width: 5vW;
		height: 5vW;
	}

	.team_member{
		padding:  2vW;
		margin: 2vH 0;
		display: grid;
		grid-template-columns: auto;
		
	}

	img.member_pic{
		width: 30vW;
		height: auto;
		margin: 5vW;
		border: 0.5rem double #2d5fa2;
		border-radius: 1.5rem;
	}
	.member_name{
		text-align: center;
	}

	.member_description{
		padding: 5vW 5vW 5vW 2.5vW;
		margin: auto 0;
	}

	.team_member_info{
		margin: auto;
	}

	.team_participation{
		display: inline-block;
		justify-content: center;
	}

	.team_participation img{
		height: 10vW;
		width: 10vW;
		border: none;
	}
}