:root { /* Color Palette Vars */
    /* Use by typing var(--var-name) as the property value */
    --dark-primary: #203051;
    --primary: #004AAD;
    --light-primary: #7695E8;
    --accent: #814D9D;
    --light-secondary: #E4EAF2;
    --dark-text: #1a1a1a;
    --light-text: #e0e0e0;
}

/* These fonts are variable fonts, so their weight can be changed programatically */
/* More about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide */
@font-face {
    font-family: Montserrat;
    src: url("https://static.igem.wiki/teams/4681/wiki/fonts/montserrat-variablefont-wght.ttf");
}

@font-face {
    font-family: Inter;
    src: url("https://static.igem.wiki/teams/4681/wiki/fonts/inter-variablefont-slnt-wght.ttf")
}

h1, h2, h3, h4, h5 {
    font-family: Montserrat;
}

p, a, li {
    font-family: Inter;
}

body { 
    padding-top: 56px; 
    background-color: var(--light-secondary);
}

.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: var(--light-primary); }

.overlay {
    position: fixed;
    display: block;
    width: 0%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
    transition: 0.4s;
    overflow-x: hidden;
}

.home-content {
    line-height: 2.5;
    font-size: 1.4rem;
}

.sidenav{
    list-style-type: none;
    top: 0;
    padding-top: 8rem !important;
}

.sidenav-item {
    font-size: 1rem;
    margin-top: 1em;
    margin-bottom: 1em;
    text-shadow: none;
    text-decoration: none;
}

.fig_cap {
    margin-top: 1.5em;
    font-size: 0.8em;
  }

.sidenav-item:hover {
    cursor: pointer;
    text-shadow: 0 0 3px #fff, 0 0 6px #0b78e4, 0 0 12px #0b78e4, 0 0 24px #0b78e4, 0 0 48px #0b78e4, 
    0 0 60px #0b78e4, 0 0 70px #0b78e4;
}

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

/* wsu - ha */
.dropdown-item:focus,
.dropdown-item:hover {
    background-color: #fff;
    text-shadow: 0 0 3px #fff, 0 0 6px #0b78e4, 0 0 12px #0b78e4, 0 0 24px #0b78e4, 0 0 48px #0b78e4, 
    0 0 60px #0b78e4, 0 0 70px #0b78e4;
}

.glow2 {
    text-shadow: 0 0 3px #fff, 0 0 6px #0b78e4, 0 0 12px #0b78e4, 0 0 24px #0b78e4, 0 0 48px #0b78e4, 
    0 0 60px #0b78e4, 0 0 70px #0b78e4;
}
.dropdown-menu {
	min-width: 200px;
}
.dropdown-menu.columns-2 {
	min-width: 400px;
}
.dropdown-menu.columns-3 {
	min-width: 600px;
}
.dropdown-menu li a {
	padding: 5px 15px;
	font-weight: 300;
}
.multi-column-dropdown {
	list-style: none;
  margin: 0px;
  padding: 0px;
}
.multi-column-dropdown li a {
	display: block;
	clear: both;
	line-height: 1.428571429;
	color: #333;
	white-space: normal;
}
.multi-column-dropdown li a:hover {
	text-decoration: none;
	color: #262626;
	background-color: #fff;
}

footer .carousel-item img {
    width: 100px;
    height: auto;
}
 
@media (max-width: 767px) {
	.dropdown-menu.multi-column {
		min-width: 240px !important;
		overflow-x: hidden;
	}
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #0b78e4;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
  }
  
  #myBtn:hover {
    background-color: #555;
  }

/* Polaroid */
.picture-container
{
    position: relative;
    background-color: var(--light-secondary);
    height: 3400px;
}

.picture-container img {
    height: 575px;
    width: 340px;
}

.picture-container .polaroid
{
    position: absolute;
    border: 1px solid darkgrey;
    background-color: white;
    padding: 15px 15px 60px 15px;
    box-shadow: 5px 10px 10px darkgrey;
}

.picture-container .polaroid:after{
    /*content: attr(polaroid-caption);*/
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 15px;
    text-align: center;
    font-family: 'Indie Flower', cursive;
}


.picture-container .image1
{
    left: 100px;
    top: 100px;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    z-index: 4;
}
.picture-container .image2
{
    left: 600px;
    top: 100px;
    transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
}

.picture-container .image3
{
    left: 120px;
    top: 730px;
    transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    z-index: 2;
}
.picture-container .image4
{
    left: 575px;
    top: 700px;
    transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
}

.picture-container .image5
{
    left: 90px;
    top: 1380px;
    transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
}
.picture-container .image6
{
    left: 600px;
    top:1380px;
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}

.picture-container .image7
{
    left: 90px;
    top: 2000px;
    transform: rotate(0deg);
    -ms-transform: rotate(0eg);
    -webkit-transform: rotate(0deg);
}

.picture-container .image8
{
    left: 600px;
    top: 2000px;
    transform: rotate(0deg);
    -ms-transform: rotate(0eg);
    -webkit-transform: rotate(0deg);
}

.picture-container .image9
{
    left: 90px;
    top: 2600px;
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}

.picture-container .image10
{
    left: 600px;
    top: 2590px;
    transform: rotate(20deg);
    -ms-transform: rotate(20eg);
    -webkit-transform: rotate(20deg);
}