body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #483C32 !important; }
.bg-hero { background-color: #7952b3; }

/* 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 }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }
footer {
	z-index: 1000;
	position: relative;
}

body{
	height: 100vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #FFF2BB;
	background-size: cover;
	max-width: 100%;
	overflow-wrap: break-word;
  }

body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #483C32 !important; }
.bg-hero { background-color: #7952b3; }

/* 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 }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }
footer {
	z-index: 1000;
	position: relative;
}

p{
	font-family: lesschonk;
	font-size: 120%;
	color: rgba(0, 0, 0, 1);
	padding-top: 0.5vw;
	text-align: justify;
	padding-left: 9%;
}

.pw_image
{
	font-family: pFont;
	font-size: 120%;
	color: rgba(0, 0, 0, 1);
	padding-right:4vw;
	padding-left: 4vw;
	padding-top: 0.5vw;
}

h1{
	font-family: chonk; 
	font-size: 900%;
	letter-spacing: 0.3px;
	font-weight: 800; 
	text-align: center;
}


h2
{
	font-family: chonk; 
	font-size: 350%;
	font-weight: 600;
}

.h2design 
{
	margin-top: 10%;
    margin-bottom: 2%;
	scroll-margin-top: 5rem;
	text-align: left;
	font-family: chonk;
}

h3
{
	font-family: lesschonk; 
	font-size: 200%;
	font-weight: 700;
	padding-top: 7%;
	text-align: left;
	scroll-margin-top: 2rem;
	padding-left: 4%;

}

h4{
	font-family: lesschonk;
	padding-top: 10%;
	padding-bottom: 2%;
	font-size: 190%;
	scroll-margin-top: 2rem;
	padding-left: 9%;
	text-align: justify;
}

@font-face{
	font-family: chonk; 
	src: url(https://static.igem.wiki/teams/4137/wiki/members-page-draft-1/home-page-fonts/glacialindifference-bold.otf);
}

@font-face{
	font-family: lesschonk; 
	src: url(https://static.igem.wiki/teams/4137/wiki/members-page-draft-1/home-page-fonts/glacialindifference-regular.otf);
}

@media all and (min-width: 992px) {
	.navbar .dropdown-menu-end{ right:0; left: auto;  }
	.navbar .nav-item .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.3s; margin-top:0;  }
	.navbar .nav-item:hover .nav-link{ color: rgb(234, 158, 5) !important; }
	.navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
	.navbar .dropdown-menu.fade-up{ top:180%;  }
	.navbar .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }
    .navbar .btn:hover{ background-color: rgb(234, 158, 5) !important; }
}
.navbar {
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    font-size: 1.2rem;
	font-family: chonk;
}
.dropdown-item:active {
    background-color: rgb(234, 158, 5) !important;
}
.navbar-brand:hover {
    transition: 0.3s;
    opacity: 0.5;
}
.navbar-brand {
    transition: 0.3s;
    opacity: 1;
}
.dropdown-toggle::after {
    content: none;
}
.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 21%;
  }


#myBackgroundOverlay{
		background-color: rgba(255, 255, 255, 0);
        background-size: cover;
        background-blend-mode: lighten;
        background-attachment: fixed;
        position: absolute;
        top: 0;
		width: 100%;
  }

#subtitle_description{
	height: 200px;
	background: url(https://static.igem.wiki/teams/4137/wiki/group-16.png);
	background-size: cover;
	background-repeat: no-repeat;
  }

figcaption
{
	font-family: lesschonk;
	/* font-size: 120%; */
	font-size: 100%;
	color: rgba(0, 0, 0, 1);
	text-align: center; 
}

a{
	color: #563d2d;
}
.sidenav {
	height: 100%; /* Full-height: remove this if you want "auto" height */
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	z-index: 1; /* Stay on top */
	top: 0; /* Stay at the top */
	left: 0;
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 10vh;
	padding-left: 3vh;
	background-color: #464d80;
	font-style:white;
  }

  /* The navigation menu links */
.sidenav a {
	padding: 6px 8px 6px 16px;
	text-decoration: none;
	font-size: 25px;
	color: #ffffff;
	display: block;
	transition: 0.3s;
  }
  
.background_color{
	background-color: #E8D6FA;
}


  
  /* When you mouse over the navigation links, change their color */
.sidenav a:hover {
	color: rgb(234, 158, 5);
	transition: 0.3s;
	opacity: 0.5;
  }
  
  /* Style page content */
.main {
	margin-left: 160px; /* Same as the width of the sidebar */
	padding: 0px 10px;
  }
  
  /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px;}
  }

 .img-fluid{
	/* padding-left: 12vw;
	padding-right: 12vw; */
	padding-bottom: 1px;
}

.my_sidebar {
	font-size: 1rem;
	font-family: lesschonk;
	font-weight: bold;
	width: auto;
	overflow-y: auto;
	position: sticky;
	top: 0;
	padding-top: 0%;
	/* background-color: #464d80; */
	padding-left: 0%;
	padding-right: 0%;
	transform: translate(0px,100px);
	color: white;
	display: block;
}

.my_sidebar li>ul{
	font-size: 0.9rem;
	font-weight: initial;
}

.my_sidebar a{
	color: rgb(0, 0, 0) !important;
}

.my_sidebar a:hover, .my_sidebar a:active{
	/* background-color: rgb(234, 158, 5) !important; */
	background-color: #B49AEB !important;
}

.myfigure-lg{
	/*background-color: rgba(232, 214, 250, 0.8); */
	background-color: #ffd78c;
	width: 45vw;
	display: inline-block;
	text-align: center;
	/* position: relative; */
	/* left: 50vw;
	transform: translateX(-50%); */
}

.myfigure-lg img, .myfigure-md img, .myfigure-sm img{
	padding-top: 2rem;
	padding-left: 2rem;
	padding-right: 2rem;
}

.myfigcaption{
	padding-left: 2rem;
	padding-right: 2rem;
	padding-bottom: 2rem;
	padding-top: 1rem;
	color:rgb(0, 0, 0);
}

.myfigure-sm{
	/*background-color: rgba(232, 214, 250, 0.8); */
	background-color: #ffd78c;
	width: 25vw;
	display: inline-block;
	text-align: center;
}

.myfigure-md{
	/*background-color: rgba(232, 214, 250, 0.8); */
	background-color: #ffd78c;
	width: 35vw;
	display: inline-block;
	text-align: center;
}

footer h4, footer p{
	color: white;
}

.cited_p{
	font-family: lesschonk;
	font-size: 90%;
	color: rgba(0, 0, 0, 1);
	padding-top: 0.5vw;
	text-align: justify;
}

.tableyesborder
{
	border:1px solid black;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	overflow: auto;
}

.thwithb, .tdwithb {
	border:1px solid black;
	text-align: left;
	padding: 8px;
	overflow: auto;
}

.thwithob, .tdwithob {
	/* border:1px solid black; */
	text-align: left;
	padding: 8px; 
}

.tablenoborder
{
	border:1px solid transparent;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	width: auto;
}

button.carousel-control-next{
    right: -10%;
}

button.carousel-control-prev {
	left: -10%;
}

table, th, td {
	border:1px solid black;
	width: 1px;
	font-family: lesschonk;
  }

.caption{
	color: #000000!important;
}
/* #table{
	width: 100%; 
} */

#descriptionpagetest{
	background-image: url(https://static.igem.wiki/teams/4137/wiki/title-page-photos/fasdjkl.jpg);
	background-size: cover;
}

@media screen and (max-width: 992px) {  
	h1 {font-size:400%;}
	h2 {font-size:275%}
	h3 {font-size:150%}
	p {font-size: 100%;}
	figcaption {font-size: 80%;}
	.myfigure-lg, .myfigure-md, .myfigure-sm{
		width:auto;
	}
}
#titleText{
	font-size: 8vw;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: fixed;
	color: rgb(0, 0, 0);
  }

 
  .footerline {
	border-left: 2px solid rgb(155, 149, 149);
	height: 270px;
	position: absolute;
	left: 24%;
	margin-left: -3px;
	margin-top: 25px;
	top: 0;
  }

#imgInPartsChart 
{
	width:auto;
	height:auto;
	overflow:auto; 
}

  /* button {
	background-image: url(https://static.igem.wiki/teams/4137/wiki/instagram.png);
  } */
  .fadeIn {
	opacity: 0;
}

.fadeInAfter {
	opacity: 100;
	transform: translateY(40px);
	transition: all .5s cubic-bezier(0.25, 0.1, 0.25, 1);
	margin-bottom: 40px
}
strong{
	font-family:chonk;
}
.homepage_treatment{
	background-image: url(https://static.igem.wiki/teams/4137/wiki/home-page-diagrams/homepage-banner2.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.btn:hover{
	background-color: rgb(234, 158, 5) !important; 
}
* {
	overflow-wrap: break-word !important;
}