/*--- ScrollFade Specific ---*/

.scrollFade {
	opacity: 1;
	pointer-events: all;
}

.scrollFade--hidden {
	opacity: 0;
	pointer-events: none;
}

.scrollFade--visible {
	opacity: 1;
	pointer-events: all;
}

.scrollFade--animate {
	transition: opacity 0.8s ease-in-out;
}
 

.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !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 }

.secball{
	position:fixed;

	left: 0;
	width:100%;
	height:100vh;
	background-attachment:   fixed ;
	background: #fff  ;
	clip-path: circle(0px at center);
	z-index: 9;
}

table {
	border-collapse: collapse;
	width: 100%;
	border: solid 2px #2e2272;
	border-radius: 10%;
  }
  
  th {
	padding: 8px;
	text-align: left;
	border-bottom: 2px solid #54428E;
	color: #2e2272;
	
  }
 td {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #DDD;
	color: #4231a0;
	
  }
  
  tr:hover {background-color: #D6EEEE;}
.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
}
.title{
margin-top:45vh ;
	z-index:1;
	font-size:3em;
	text-align:center;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	width:97.9vw;

	overflow: hidden;
	-webkit-text-stroke: solid 3px white;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: white;

	animation: float 2s ease-in-out infinite;
	transition:0.5s all;
}
@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}
.revealball{
	position:absolute;
	z-index:1;
	overflow: hidden;
}




/* #Progress
================================================== */

.progress-wrap {
	height: 24px;
	width: 24px;
	cursor: pointer;
	display: block;
	border-radius: 24px;
	box-shadow: inset  0 0 0 2px rgba(255,255,255,0.2);
	z-index: 99999999;

}
.progress-wrap svg path { 
	fill: none; 
}
.progress-wrap svg.progress-circle path {
	stroke: #1D61B7;
	stroke-width: 4;
	box-sizing: border-box;

}

/* #Cursor
================================================== */

.circle {
	height: 24px;
	width: 24px;
	border-radius: 24px;
	background-color: black;
	position: fixed; 
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 99999999; /* so that it stays on top of all other elements */
  }



@-webkit-keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
@keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}  

/* header*/

.headbg{
	position: fixed;
	top: 0px;
	z-index: -1;
	height: 100vh;
	width: 100vw;
}

.stickymodel{
position: sticky;

}



h2.ss-subtitle{
    padding: 10px 10px 40px;
    font-size: 52px;
    text-transform: uppercase;
    color: rgba(0,0,0,0.8);
	position: relative;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.ss-container{
    width: 98%;
    position: absolute;
    text-align: center;
    float: center;
	overflow: hidden;
	z-index: 9;
	
}
.ss-container h2{
    font-size: 40px;
    text-transform: uppercase;
    color: rgba(78,84,123,0.2);
	text-shadow: 0px 1px 1px #fff;
	padding: 20px 0px;
}
.ss-container:before{
    position: absolute;
    width: 4px;
    top: 0px;
    left: 50%;
	margin-left: -2px;
    content: '';
    height: 100%;
}
.ss-row{
    width: 100%;
    clear: both;
    float: left;
    position: relative;
    padding: 30px 0;
}
.ss-left{
    float: left;
    width: 30%;
    position: relative;
}

.ss-right{
    float: right;
    width: 37%;
    position: relative;
}
.ss-right{
    padding-left: 2%;
}
.ss-left{
    text-align: right;
    float: left;
    padding-right: 2%;
}
.ss-circle{
    text-indent: -9000px;
    text-align: left;

	background-size: 300px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;

}
.small{
	width: 400px;
}
.small-2{
	width: 250px;
}

.small-6{
	width: 350px;
}

.small-6{
	width: 450px;
}
.strip-1{
	position: absolute;
	top:-50px;
	width: 65vw;
	height:60vh;
}

.strip-2{
	position: absolute;
	top:160px;
	width: 35vw;
	height:30vh;
}
.strip-3{
	position: absolute;
	top:290px;
	width: 35vw;
	height:30vh;
}
.ss-small .ss-circle{
	width: 1000px;
	height: 100px;
}

.ss-large .ss-circle{
	width: 300px;
	height: 300px;
}


.ss-left .ss-circle-deco:before{
    right: 2%;   
}
.ss-right .ss-circle-deco:before{
    left: 2%;   
}
.ss-left .ss-circle-deco:after{
	right: 0;
	border-right: 10px solid rgba(17,17,22,0.8);
}
.ss-right .ss-circle-deco:after{
	left: 0;
	border-left: 10px solid rgba(17,17,22,0.8);
}
.ss-left .ss-circle{
    float: right;
    margin-right: 30%;
}
.ss-right .ss-circle{
    float: left;
    margin-left: 30%;
}
.ss-container h3{
    margin-top: 34px;
	padding: 10px 15px;
	background: rgba(26, 27, 33, 0.6);
	text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8)
}
.ss-container .ss-medium h3{
	margin-top: 82px;
}
.ss-container .ss-large h3{
	margin-top: 133px;
}
.ss-container .ss-left h3{
	border-right: 5px solid rgba(164,166,181,0.8);
}
.ss-container .ss-right h3{
	border-left: 5px solid rgba(164,166,181,0.8);
}
.ss-container h3 span{
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    display: block;
    padding-bottom: 5px;
}
.ss-container h3 a{
    font-size: 28px;
    color: rgba(255,255,255,0.9);
    display: block;
}
.ss-container h3 a:hover{
	color: rgba(255,255,255,1);
}
.ss-circle-1{
    background-image:url(https://static.igem.wiki/teams/4586/wiki/home/1strip.png);
}
.ss-circle-2{
    background-image: url(https://static.igem.wiki/teams/4586/wiki/home/strip6.svg);
}
.ss-circle-6{
    background-image: url(https://static.igem.wiki/teams/4586/wiki/home/strip6.svg);
}
.ss-circle-4{
    background-image: url(../images/4.jpg);
}


#loader{
	position: fixed;
	width: 100%;
	height: 100vh;
	background: #21242d url('https://cssauthor.com/wp-content/uploads/2018/06/Bouncy-Preloader.gif') no-repeat center;
	z-index: 999;
}

/* boot */


*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

.h1-flball{
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.mx-autoflball {
  margin-right: auto !important;
  margin-left: auto !important;
}

.d-flex-flball {
  display: flex !important;
}

.justify-content-center-flball {
  justify-content: center !important;
}
.pt-5-flball {
  padding-top: 3rem !important;
}

.col-sm-3-flball {
  flex: 0 0 auto;
  width: 25%;
}

.col-sm-6-flball {
  flex: 0 0 auto;
  width: 50%;
}

.my-3-flball {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.col-lg-10-flball {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.my-4-flball {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.align-items-center-flball {
  align-items: center !important;
}
.flex-row-flball {
  flex-direction: row !important;
}
.container,
.containerflball,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}
.rowflball > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}

.col-lg-12flball {
  flex: 0 0 auto;
  width: 100%;
}
.left-aligned {
margin-left: auto !important;
}

.strong {
  font-weight: bold;
}

.emphasis-text {
  font-size: 1.5em;
  line-height: 1.6em;
  text-align: center;
}

.break-line-short {
  background-color: #000000;
  background-position: center center;
  border-color: transparent;
  border-style: solid;
  border-width: 1px;
  width: 20%;
}

.break-line {
  background-color: #000000;
  background-position: center center;
  border-color: transparent;
  border-style: solid;
  border-width: 1px;
  width: 75%;
}


/* ball */
#ball {
	width: 100%;
	text-align: center;
	position: relative;
	
	z-index: 99;
  }
  
  #ball .bg-hero {
	background-image: url(https://static.igem.wiki/teams/4586/wiki/banner/banner.png);
	background-size: cover;
	background-position: center center;
	background-color: #f0f0f0;
	width: 100%;
	z-index: -1;
	padding-top: 15.5rem;
	padding-bottom: 15.5rem;
  }
  


#ball-title {
  color: white;
  font-family: "Kunika", "TildaSans", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 3.75em;
  display: inherit;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-style: none;
  margin-bottom: 0;
}

#ball .orange-circle {
  position: relative;
  height: 250px;
  width: 250px;
  background-color: #54428E;
  border-style: solid;
  border-color: transparent;
  border-radius: 50%;
  -moz-border-radius: 50%;
  z-index: -2;
  box-shadow: 0px 0px 20px 20px #54428E;
}

#ball .blue-circle {
  position: relative;
  height: 250px;
  width: 250px;
  background-color: #1D61B7 ;
  border-style: solid;
  border-color: transparent;
  border-radius: 50%;
  -moz-border-radius: 50%;
  z-index: -2;
  box-shadow: 0px 0px 20px 20px #1D61B7;
}

/* Parallax mouse cursor animation for circles in page ball */
.parallax-wrap {
  position: relative;
  display: flex;
}










/* Responsive stuff */

@media only screen and (max-width: 992px) {
  /* For smaller screens: */
  #subball {
    font-size: 1.5em;
  }
  #ball .orange-circle {
    height: 180px;
    width: 180px;
  }
  #ball .blue-circle {
    height: 180px;
    width: 180px;
  }

}

@media only screen and (max-width: 768px) {
  #ball .orange-circle {
    height: 110px;
    width: 110px;
  }
  #ball .blue-circle {
    height: 110px;
    width: 110px;
  }
  .emphasis-text {
    font-size: 1.35em;
  }
}

@media only screen and (max-width: 576px) {
  /* For mobile phones: */
  #ball .orange-circle {
    display: none;
  }
  #ball .blue-circle {
    display: none;
  }
  .emphasis-text {
    font-size: 1.125em;
  }
}


/*home*/

.avatar {
	transform: translatey(0px);
	animation: float 2s ease-in-out infinite;

}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}





  #loader{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #000 url('https://static.igem.wiki/teams/4586/wiki/banner/wave-1.gif') no-repeat center;
    z-index: 99;
  }
  


i {
	font-weight: inherit;
}
* {
	font-weight:600;
}

.side-nav, .col-lg-9, h2, h3, footer, nav {
	font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}


::-webkit-scrollbar-thumb {
    background-color: #54428E;
    border-radius: 32px;
}


::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 32px;
}
::selection {
	color:#c5deff;
	background-color: #8568e2;
}
*{scrollbar-width:thin;
scrollbar-color:#54428E transparent;
}


.back-to-top {
	position:fixed;
	bottom:8vh;
	right: 1vw;
	text-align: center;
	background-image: linear-gradient(to right, #2f86f8 0%, #1D61B7 50%, #54428E 100%);
	background-size: contain;
	background-clip: text;
	-webkit-background-clip: text;
	transition:0.5s all;
}
.back-to-top > a {
	text-decoration:none;
}
.back-to-top:hover > a > div {
	transform:translateY(-5px);

}
.back-to-top > a > div {
	color:transparent;
	font-family: 'Montserrat';
	font-weight: 800;
	transition:0.5s all;
}
.back-to-top img {
	transform:translateY(0) rotate(180deg);

	transform: translatey(0px);
	animation: float 2s ease-in-out infinite;
	transition:0.5s all;
}
.back-to-top:hover img {
	transform:translateY(-10px) rotate(360deg);


}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

div.col-lg-9 {
	padding-left: 30PX;
}
div.col-lg-9 > section::before {
	content: "";
	display: block;
	height: 66px;
	margin: -66px 0 0;
	background-color: transparent;
}
.col-lg-9 h2 {
	color:#c5deff;
	font: size 2em;;
	font-family: "ButterSans-Rounded";
	line-height:60px;
	background-image: linear-gradient(to left, #54428E 0%, #1D61B7 100%);
	box-shadow: 0px 0px 5px #a4c7f580;
	width: fit-content;
	padding:15px 50px 15px 20px;
	margin: 20px 0 20px 0;
	border-radius:20px 20px 20px 20px;
	justify-content: center;
	align-items: center;
}
.col-lg-9 h3 {
	color:#f1eeff;
	font-size: 1.7em;
	font-family: 'Montserrat';
	font-weight: 700 !important;
	box-shadow: 0px 0px 2px #a4c7f580;
	background: #8568e2;
	padding:10px 30px 10px 10px;
	width: fit-content;
	border-radius:20px 20px 20px 20px;
	margin: 5px 0;
}
.col-lg-9 p {
	color:#2e2272;
	text-align: justify;
	font-weight:400;
	font-size: 19px;
	line-height: 35px;
}
.col-lg-9 li {
	color:#2e2272;
	text-align: justify;
	font-weight:400;
	font-size: 19px;
	line-height: 35px;
}

.collapsible {
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	color:#c5deff;
	font: size 2.5em;;
	font-family: "ButterSans-Rounded";
	text-align: center;
	background-image: linear-gradient(to left, #54428E 0%, #1D61B7 100%);
	box-shadow: 0px 0px 5px #a4c7f580;
	width: fit-content;
	padding:15px 50px 15px 20px;
	margin: 20px 0 20px 0;
	border-radius:20px 20px 20px 20px;
	justify-content: center;
	align-items: center;
		}
	
.active, .collapsible:hover {
	background-color: transparent;
		  }
		  
.content {
	padding: 0 18px;
	display: none;
	overflow: hidden;
	background-color: #f1f1f1;
		  }
	

mjx-container {
	font-family: 'TexGyrePagella'!important;
	font-weight:500;
	color:#474086;
}
mjx-math {
	font-family: 'TexGyrePagella'!important;
	font-weight:500;
	color:#474086;
}

.svgdesign {
	width:80%;
	position:relative;
	left:10%;
}

.smallimg{
	width:40%;
	position: relative;
    top: 50%;
    left: 50%;
    transform: translate( -50%);
	padding-top:25px;
}


.vsmallimg{
	width:20%;
	position: relative;
    top: 50%;
    left: 50%;
    transform: translate( -50%);
	padding-top:25px;
}

figure img {
	width:80%;
	max-width: 100%;
	position: relative;
    top: 50%;
    left: 50%;
    transform: translate( -50%);
	padding-top:25px;
}
figcaption .fig {
	font-weight:600;
	color: #54428E !important;
}
figcaption {
	font-weight: 400;
	color: #2e2272;
	font-size: 17px;
	width:80%;
	left:10%;
	position:relative;
	text-align: center;
	line-height:25px;
	margin-top: 20px;
}

div.hidden-content {
	overflow-y:hidden;
	height:65px;
	max-height:65px;
	background-image: linear-gradient(to bottom, #2e227280 0%, #2e227200 100%);
	background-clip: text;
	-webkit-background-clip: text;
	transition:1s max-height;
}
div.hidden-content p {
color:transparent;
}

.see-more-button {
	position:relative;
	width:fit-content;
	left: 40%;
	bottom: 25px;
	transition:1s all;
}
.see-less-button {
	position:relative;
	width:fit-content;
	left: 45%;
	bottom: 10px;
	transition:1s all;
}
.see-more-arrow {
	transition:0.5s;
}
.see-less-arrow {
	transition:0.5s;
	transform:rotate(180deg);
}
.see-more-text {
	color: #2f86f8;
	font-size: 20PX;
	font-weight: 700;
	text-align: center;
	position:relative;
	bottom:-3px;
	text-decoration:underline 3px;
	transition:0.5s;
}
.see-less-text {
	color: #54428E;
	font-size: 20PX;
	font-weight: 700;
	text-align: center;
	position:relative;
	bottom:-3px;
	text-decoration:underline 3px;
	transition:0.5s;
}
.see-more-button:hover {
	cursor:pointer;
}
.see-more-button:hover .see-more-arrow {
	transform:rotate(180deg)
}
.see-less-button:hover .see-less-arrow {
	transform:rotate(0deg)
}
.see-less-button:hover {
	cursor:pointer;
}
.see-more-button:hover .see-more-text {
	color: #54428E;
	text-decoration:none;
}
.see-less-button:hover .see-less-text {
	color: #2f86f8;
	text-decoration:none;
}
/* view more*/
.view-more-horizontal-button {
	background: linear-gradient(to bottom, #2f86f8 0%, #1D61B7 50%, #54428E 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color:transparent;
	width:fit-content;
	position:relative;
	left:40%;
	text-decoration:underline 3px !important;
}
.view-more-horizontal-button a {
	text-align: center;
	color:transparent;
	font-size: 20PX;
	font-weight: 700;
	text-decoration:underline 3px !important;
}
.view-more-horizontal-button:hover a {
	text-align: center;
	color:transparent;
	font-size: 20PX;
	font-weight: 700;
	text-decoration:underline 3px!important;
}
.view-more-horizontal-arrow {
	transform:translateX(0) rotate(-90deg);
	transition:1s;
}
.view-more-horizontal-button:hover .view-more-horizontal-arrow {
	transform:translateX(140px) rotate(-90deg);
}

div.hidden-content.unfold {
	max-height:2000px;
	transition:1s max-height;
	height:auto;
}
div.hidden-content.unfold p {
	color:#2e227280;
}
div.see-more-button.unfold {
	display:none;
}
/*REFERENCE*/
section#references li {
	padding: 5px;
	color:#54428E;
	font-weight: 600;
	list-style-type: decimal;
	list-style-position: outside;
}
.reference-text {
	color:#2e2272;
	text-align: justify;
	font-weight:400;
	font-size: 19px;
	line-height: 35px;
}
/*LOADING*/
#loading-page {
	background-color: #c5deff;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	opacity: 1;
	z-index: 9999;
}

/* Layout*/
/*cursor */

body { padding-top: 56px;
 	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
}

.team_logo_svg {
	height: 50px;
	margin-left: 40px;
}

#navbarSupportedContent {
	bottom: 20px;
}


.navbar {
	background-image: url(https://static.igem.wiki/teams/4586/wiki/banner/banner.png);
	background-size: cover;
	background-position: center center;
	background-color: #c5deff;
	box-shadow: 0px 0px 7px #a4c7f5;
}

.dropdown-menu {
	background:  #1D61B7 50%;
	border:2px solid #1D61B7;
	box-shadow: 0px 0px 5px #1a55a3;
	border-radius: 10px !important;
	right: 0px;
	display: none;
}

.dropdown-menu:hover {
	display:block !important;
}
ul.dropdown-menu {
	background:  #1D61B7 50%;
	border:2px solid #1D61B7;
	box-shadow: 0px 0px 5px #1a55a3;
	border-radius: 10px !important;
	right: 0px;
	display: none;
}
ul.dropdown-menu:hover {
	display:block !important;
}
li.nav-item.dropdown {
	height: 100%;
}

li.nav-item.dropdown:hover > ul.dropdown-menu {
	display: block !important;
	animation: float-up 0.5s ease;
	

}

@keyframes float-up {
	from {
		opacity: 0.8;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
} 

.dropdown-item:hover {
	color: #ffffff !important;
	text-shadow: 0px 0px 3px #a4c7f5;
	transform: translateX(2.5%) scale(1.05);
	background-color: rgba(255, 255, 255, 0) !important;
	display:block;
}


.nav-item.dropdown:hover {
	transform: translateY(-5px);
	transition:0.5s;
}
.nav-item.dropdown:hover img.arrow{
	transform: rotate(180deg);
	transition:0.2s;
}
.nav-item.dropdown:hover .nav-link {
	color: #a4cbfd !important;
}
.nav-item:hover .nav-link {
	color: #a4cbfd !important;
}
.dropdown-item {
	font-weight: 600 !important;
	color: #ffffff !important;
}


.nav-link {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #fff !important;
}


.arrow {
	margin-left: -3px;
}


#navbarSupportedContent {
	position: absolute;
	top: 20px;
	right: 100px;
	color: #9cc7ff;
}
/* NavBar  */

/*page stylesheet*/

/*Header*/

div.header-new {
	overflow-x: hidden;
	max-width:100vw;
	width:100vw;
}
div.page-title {
	font-family: "ButterSans-Rounded";
	left: 50vw;
	transform: translateX(-50%);
    font-weight: 600;
	font-size:8.8vw;
	color: #c5deff;
	text-align: center !important;
	text-shadow: 1px 1px 5px #c5deff40, -1px -1px 5px #af6effb0;
}

div.page-title-cut-2 {
	font-family: "ButterSans-Rounded";
	clip-path:polygon(0 0,49% 0,49% 100%, 0 100%);
	left: 50vw;
	transform: translateX(-50%);
    font-weight: 600;
	font-size:8.8vw;
	color: #c5deff;
	filter: drop-shadow(0px 0px 5px #b980ffD0);
	text-align: center !important;
	/*animation: glowing 2s ease-in-out infinite alternate;*/
}

div.page-title-cut {
	font-family: "ButterSans-Rounded";
	left: 50vw;
	clip-path:polygon(49% 0,100% 0,100% 100%, 49% 100%);
	transform: translateX(-50%);
    font-weight: 600;
	font-size:8.8vw;
	color: #c5deff;
	filter: drop-shadow(0px 0px 5px #b980ffD0);
	text-align: center !important;
	/*animation: glowing 2s ease-in-out infinite alternate;*/
}

@keyframes glowing {
	from {
		filter: drop-shadow(0px 0px 5px #b980ffD0);
		transform: translateX(-50%) translateY(0.3vw);
	}
	to {
		filter: drop-shadow(0px 0px 7px #b980ffA0);
		transform:translateX(-50%) translateY(-0.3vw);
	}
}

div.header-bg {
	filter: drop-shadow(0px 0px 2px #c5deff);

}
.header-objects {
	filter: drop-shadow(5px 5px 3px #b980ff40);
}
.header-shapes {
	filter: drop-shadow(5px 5px 3px #b980ff80);
}

.scroll-to-cut {
	animation: blick 2s ease-in-out infinite alternate;
}
.scroll-to-cut-scissor {
	animation: cut-down 1.5s ease-in-out infinite alternate-reverse;
}
@keyframes blick {
	from {
		opacity: 100%;
	}
	to {
		opacity: 50%;
	}
}
@keyframes cut-down {
	from {
		transform: translateY(0vw);
	}
	to {
		transform: translateY(3vw);
	}
}

.header-shapes img{
	animation: layered-3-ani 2s ease-in-out infinite alternate;
}
.header-objects img{
	animation: layered-1-ani 2s ease-in-out infinite alternate;
}

@keyframes layered-1-ani {
    from {
        transform: translateX(0) translateY(5px);
    }
    to {
        transform: translateX(10px) translateY(0);
    }
}

@keyframes layered-3-ani {
    from {
        transform: rotate(-2deg) translateX(2px) translateY(13px);
    }
    to {
        transform: rotate(2deg) translateX(-10px) translateY(0px);
    }
}
@keyframes layered-4-ani {
    0% {
        transform: translateX(-5px) translateY(0px);
    }
    50% {
        transform: rotate(2deg) translateY(5px);
    }
	100% {
		transform: translateX(10px) rotate(5deg) translateY(3px);
	}
}
.page-content {
	padding:0;
	max-width:100%;
	margin-top: 200vh;
	z-index: 10;
	position: absolute;
    background: #ffFF;
}
.the-real-page-content-idk-but-the-padding-got-a-little-glitchy-i-am-really-tired {
	padding:0 5vw 2vw 5vw;
	width:100vw;
	max-width:100%
}

.side-nav {
	list-style: none;
	position: sticky;
	top:15vh;
	display: block;
	height:75vh;
	overflow-y: scroll;
	margin-bottom: 150px;
	padding-top:20px;

	left: -40px;
}
.page-subtitle a {
	text-decoration: none;
	line-height:25px;
	color:#3dabfe;
}
.page-secondary-title a {
	text-decoration: none;
	line-height:20px;
	color:#9fd5ff;
}
.page-subtitle a:hover {
	text-decoration: none;
	color:#5CB8FF;
	text-shadow:0 0 2px #a6ddff;
}
.page-secondary-title a:hover {
	text-decoration: none;
	color:#86cbff;
	text-shadow:0 0 2px #cfedff;
}

/*

div.side-nav::before {
	content:'';
	position:absolute;
	left:11px;
	top:0;
	height:var(--progress-height);
	width:1px;
	border-left:4px solid #1D61B7;
	clip-path: inset(30px 0);
}
div.side-nav::after {
	content:'';
	position:absolute;
	left:11px;
	top:0;
	height:100%;
	width:1px;
	border-left:4px solid #5CB8FF;
	clip-path: inset(30px 0);
}*/


.side-nav div {
	margin:0;
}

div.page-subtitle > li {
	height:fit-content;
	padding-left:20px;
	border-left:4px solid #5CB8FF;
	transition:0.5s border-left;
	padding-top:0PX;
	padding-bottom:25px;
}

div.page-secondary-title > li {
	height:fit-content;
	padding-left:20px;
	border-left:4px solid #5CB8FF;
	transition:0.5s border-left;
	padding-top:0PX;
	padding-bottom:25px;
}


/*div.page-secondary-title > li {
	height:fit-content;
	padding-left:10px;
	border-left:4px solid #5CB8FF;
	padding-bottom:10px;
	padding-top:10px;
}*/

.page-subtitle {
	font-size: 20px;
	line-height: 20px;
	font-weight: 600;
}
.page-secondary-title {
	font-size:17px;
	line-height: 17px;
	font-weight: 600;
}


.page-subtitle::before {
	content:'';
	background: #c5deff;
	position:absolute;
	transform:translateX(-80%) translateY(-40%);
	box-shadow: inset 0PX 0PX 0PX 4PX #5CB8FF;
	margin: 10px;
	width: 27px;
	height: 27px;
	border-radius: 50%;
}
.page-secondary-title::before {
	content:'';
	background: #c5deff;
	position:absolute;
	transform:translateX(-92%) translateY(-53%);
	box-shadow: inset 0PX 0PX 0PX 4PX #86cbff;
	margin: 10px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
}

div.page-subtitle > li.active ::before{
	z-index:2;
	content:'';
	opacity: 0%;
	background: linear-gradient(to left, #2f86f8 0%, #1D61B7 50%, #54428E 100%);
	box-shadow: 0px 0px 5px #a4c7f5;
	position:absolute;
	transform:translateX(-168%) translateY(-40%);
	margin: 10px;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	animation: side-nav-circle-ani 1s ease-in-out 0.3s 1 forwards;
}
div.page-secondary-title > li.active ::before {
	z-index:2;
	content:'';
	opacity: 0;
	background: #1D61B7;
	position:absolute;
	transform:translateX(-218%) translateY(-53%);
	box-shadow: 0px 0px 5px #a4c7f5;
	margin: 10px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	animation: side-nav-circle-ani 0.5s ease-in 0.3s 1 forwards;
}
@keyframes side-nav-circle-ani {
	0% {
		opacity: 50%;
	}

	100% {
		opacity:100%;
	}
}

/*li.first-li ::after{
	display: none;
}
li.active ::after{
	z-index:0;
	content:'';
	position:absolute;
	left:11px;
	width:1px;
	height:35px;
	transform:translateY(-80%);
	transform-origin: left top;
	border-left:4px solid #1D61B7;
	box-shadow: 0px 0px 5px #a4c7f5;
	animation: pink-line-ani 0.5s ease-in-out forwards;
	
}
@keyframes pink-line-ani {
	from {
		transform-origin: left top;
		transform:translateY(-80%) scaleY(0.1);
	}
	to {
		transform-origin: left top;
		transform:translateY(-80%) scaleY(1);
	}
}
*/
div.page-subtitle > li.active a {
	animation: font-turn-purple 0.5s ease-in 0.3s 1 forwards;
}
div.page-secondary-title > li.active a {
	animation: font-turn-pink 0.5s ease-in 0.3s 1 forwards;
}

@keyframes font-turn-pink {
	from {color: #5CB8FF;}
	to {color: #54428E;text-shadow: 0px 0px 2px #a4c7f580;}
}
 
@keyframes font-turn-purple {
	from {color: #5CB8FF;}
	to {color: #2f86f8;text-shadow: 0px 0px 2px #a4c7f580;}
}

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

/*nav color*/
.bg-dark { background-color: #000000 !important; }
.bg-hero { background-color: #45b06cff; }

/* 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-bg {
	position:absolute;
	z-index:-1;
	left:0;
	bottom:0;
	width: 100vw;
	max-width:100%;
	margin:0;
	padding:0;
	filter: drop-shadow(0px 0px 2px #c5deff);
}
footer {
	position:relative;
	width:100vw;
	bottom:0;
	max-width:100%;
	display: block; z-index:30;
	color:#c5deff !important;
	height:17vw; 
	padding-bottom:0;
	padding-top: 550px;
	margin:0;
	overflow-y: hidden;
	background: transparent !important;
}
footer section.acknowledgements {
	position:absolute;
	left:1.4vw;
	bottom:4.2vw;
	z-index:2;
}
.acknowledgements {
	filter: drop-shadow(0px 0px 2px #c5deff);
}
section.footer-nav {
	position:absolute;
	bottom:1vw;
	left:57vw;
	width:30vw;
	height:10vw;
}
.footer-nav h5 {
	margin:0.1vw
}
.footer-links {
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	width:30vw;
	height:8vw;
}
.footer-links li {
	list-style:none;
	width:15vw;
}
.footer-links a {
	color:#54428E;
	font-size:1.2vw;
	text-decoration: none;
	align-items: center;
}
.footer-links a:hover {
	color:#1D61B7;
	text-shadow: 0px 0px 3px #c5deff;

}
footer section.copyright {
	font-size:1vw;
	position: absolute;
	left: 2.7vw;
	bottom:0vw;
}
.copyright p {
	font-weight:600 !important;
	color: #c5deff;
	line-height:1vw;
	font-weight:400;

}
.copyright a {
	color:#c5deff;
	text-decoration: none;
}
.copyright a:hover {
	color:#ffffff;
	text-shadow: 0px 0px 3px #c5deff;
}
section.contact-us {
 	position: absolute;
 	right: 3vw;
 	bottom:3vw;
}
.contact-icon {
	display:flex;
}
.contact-icon img{
	margin:0 0.5vw;
}
.contact-icon img:hover{
	filter: drop-shadow(0px 0px 1.5px #c5deff);
}

.contact-email {
	transform: translateY(0.2vw)
}

div.contact-wechat:hover::before {
	content:"";
	width:5vw;
	height:5vw;
	background-image: url(afcm-qrcode.svg);
	position:absolute;
	z-index:4;
	bottom:3.7vw;
	left:-1.3vw;
}
div.contact-wechat:hover::after {
	content:"";
	width:6.5vw;
	height:6.5vw;
	background-color: #c5deff;
	border-radius: 1vw;
	position:absolute;
	bottom:3vw;
	left:-2vw;
	box-shadow: 0px 0px 5px #a4c7f5;
}

div.contact-email:hover::before {
	content:"igem@afcm.edu.eg";
	text-align: center;
	font-size:1vw;
	line-height: 3vw;
	color:#54428E;
	width:17vw;
	height:3vw;
	background-color:#c5deff;
	box-shadow: 0px 0px 5px #a4c7f5;
	border-radius:1vw;
	position:absolute;
	z-index:4;
	bottom:3vw;
	left:-14vw;
}

.icon-container {
	position:sticky;
	width:90%;
	left:5%;
	display: flex;
	flex-wrap: nowrap;
	justify-content:space-evenly;
}
.icon-container > div {
 	width:330px;
}
.icon-container p {
	margin-top: 20px;
	text-align: center;
	color:#2f86f8;
	font-weight:600;
	line-height:20px;
	font-size: 17px;
	transition:0.5s;
}
.icon-container > div:hover p {
	color:#54428E;
	transform:translateY(-5px);
}
.icon-container img {
	width:330px;
	transition: 0.5s;
	padding-top: 2vh;
}
.icon-container > div:hover img{
	transform:scale(1.1);
}
/*Team 
section.self-introduction {
	margin:0 50px;
}
section.self-introduction svg {
	opacity:0;
	transition:1s;
}
section.self-introduction:hover svg {
	opacity:1;
}
section.self-introduction:hover div.text {
	transform:translateY(0px)
}
section.self-introduction div.text {
	transform: translateY(10PX);
	transition:0.5s;
}
section.self-introduction-container {
	flex-wrap: wrap;
	margin:0 50px;
    display: flex;
    justify-content: space-evenly;
}
section.self-introduction svg {
	fill:none;
	stroke-width: 2px;
	position:absolute;
	transform:translateX(-10%) translateY(-94%);
	
}
section.self-introduction {
    width:250px;
    padding:25px;
}
section.self-introduction img {
    width:200px;
	border-radius: 100px;
	box-shadow:  0px 0px 5px #a4c7f5;
}
section.self-introduction p {
    width:200px;
	color:#2e2272;
	font-family: 'Montserrat';
	font-weight: 500;
}
section.self-introduction h2 {
    text-align: center;
    color: #2f86f8;
	font-weight:600;
	margin:0;
	padding-top:20px;
    font-size: 1.5rem;
}

section.self-introduction h3 {
    text-align: center;
    white-space: nowrap;
	font-weight:600;
    font-size:1rem;
	margin:0;
	color:#54428E;
}
section.self-introduction p.quote-container {
	margin:10px 0px;
	padding:10px 20px;
	background:#54428E;
	border-radius: 20px;
	box-shadow: 0px 0px 5px #a4c7f5;
	text-align: left;
	color:#7748af;
}
section.self-introduction .quote {
	color:#c5deff;
}
*/
@media screen and (max-width: 860px) {
.side-nav {display: none;}
footer > section.footer-nav {display: none;}
footer > section.acknowledgements {display: none;}
footer > section.contact-us {display: none;}
footer > section.copyright {display: none;}
.navbar {height:fit-content;
background-color: #1D61B7;
}
button.navbar-toggler {position:absolute; right:10px;top:10px;color:#54428E;background-color: #1D61B7;}


.dropdown-menu {
	background:  #1D61B7 50%;
	border:2px solid #1D61B7;
	box-shadow: 0px 0px 5px #1a55a3;
	border-radius: 10px !important;
	right: 0px;
	display: none;
	background-color: #54428E;

}

.dropdown-menu:hover {
	display:block !important;
	background-color: #54428E;

}
ul.dropdown-menu {
	background:  #1D61B7 50%;
	border:2px solid #1D61B7;
	box-shadow: 0px 0px 5px #1a55a3;
	border-radius: 10px !important;
	right: 0px;
	display: none;
	background-color: #54428E;

}
ul.dropdown-menu:hover {
	display:block !important;
	background-color: #54428E;

}
li.nav-item.dropdown {
	height: 100%;
	background-color: #54428E;

}

li.nav-item.dropdown:hover > ul.dropdown-menu {
	display: block !important;
	animation: float-up 0.5s ease;
	

}

@keyframes float-up {
	from {
		opacity: 0.8;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
} 

.dropdown-item:hover {
	color: #ffffff !important;
	text-shadow: 0px 0px 3px #a4c7f5;
	transform: translateX(2.5%) scale(1.05);
	background-color: rgba(255, 255, 255, 0) !important;
	display:block;
}


.nav-item.dropdown:hover {
	transform: translateY(-5px);
	transition:0.5s;
	background-color: #54428E;

}
.nav-item.dropdown:hover img.arrow{
	transform: rotate(180deg);
	transition:0.2s;
	background-color: #54428E;

}
.nav-item.dropdown:hover .nav-link {
	color: #a4cbfd !important;
	background-color: #54428E;

}
.nav-item:hover .nav-link {
	color: #a4cbfd !important;
	background-color: #54428E;

}
.dropdown-item {
	font-weight: 600 !important;
	color: #ffffff !important;
	background-color: #54428E;

}


.nav-link {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #fff !important;
	background-color: #54428E;

}


.arrow {
	margin-left: -3px;
}


#navbarSupportedContent {
	position: absolute;
	top: 20px;
	right: 100px;
	color: #9cc7ff;
	background-color: #54428E;
}
}
@media screen and (max-width: 1080px) {
	li.nav-item {font-size: 0.85rem;}
} 
@media screen and (max-width: 860px) {
	.back-to-top > img {
		width:30px
	}
	.back-to-top div {
		font-size: 0.7rem;
	}
}


@media (max-width: 992px) {
    .dropdown-menu {
        display: none;
        visibility: visible;
    }
    .nav-item:hover .dropdown-menu {
        visibility: unset;
    }
}

.imgf {
	width:25%;
align-items:left;
	height:auto;
	    position: relative;
	object-fit: contain;
    align-self: flex-start;
	padding-top:15px;
	padding-right:15px;

	
}

.imgf2 {
	width:35%;
align-items:left;
	height:auto;
	    position: relative;
	object-fit: contain;
    align-self: flex-start;
	padding-top:15px;
	padding-right:15px;

	
}


.textf{
	align-items:right;
	justify-content:right;
	width:75%;
 
	float:right;
	display:inline;

	
}



.textf2{
	align-items:right;
	justify-content:right;
	width:65%;
 
	float:right;
	display:inline;

	
}