.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 }


.tithome {
	 text-align: center;
	 font-size:2.5vw  ;
	 top:2vh;
	 position: absolute;
	 color: #54428E;
}


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

.progress-wrap {
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset  0 0 0 2px rgba(255,255,255,0.2);
	z-index: 10000;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap svg path { 
	fill: none; 
}
.progress-wrap svg.progress-circle path {
	stroke: #1D61B7;
	stroke-width: 4;
	box-sizing: border-box;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

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

.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
}
.cursor{
	background-color: #080808;
	z-index: 99999;
	height: 0;
	width: 0;
}
.cursor2,.cursor3{
	height: 46px;
	width: 46px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(1.4) translateX(-35%) translateY(-35%);
	transform:scale(1.4) translateX(-35%) translateY(-35%);
	border:none
}
.cursor2{
}
.cursor2.hover{
	background: rgba(255,255,255,0.1);
}
.cursor2.hover .progress-wrap {
	box-shadow: inset  0 0 0 2px rgba(255,255,255,0);
}
.cursor2.hover .progress-wrap svg.progress-circle path {
	opacity: 0.4;
}


@-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%; } 
}  


#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;
}










/* Responsive stuff */

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

}

@media only screen and (max-width: 768px) {
  #ball .purple-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 .purple-circle {
    display: none;
  }
  #ball .blue-circle {
    display: none;
  }
  .emphasis-text {
    font-size: 1.125em;
  }
}


/*home*/

.frhome{
position: relative;
width: 100%;
}

.conhome {
	position: relative;
	width: 100%;
	height: 100vh;
}


.consvg {
	position: absolute;
	width: 50vw;
	height: 60vh;
	top:25vh;
right: 0.1em;
}
.imghome{
	position: relative;
	width: 97vw;
	bottom: 0px !important;
	max-height: 100vh;

	
}

.imgdiv{
	position: absolute;
	max-height: 100vh;
	bottom: 0px;

}
 
.super{
position: relative;
width: 100vw;
top:0px;
z-index: -1;
background-color: #2e2272;
}



@import url('https://fonts.googleapis.com/css?family=ccupupandaway:700');


body {
	overflow-x: hidden; /* Hide horizontal scrollbar */
  }
.fadehome {
  background-color: #ffffff;
  background-image:  #ffffff;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color:#54428E ;
  text-align: center;
  width: 100vw;
  font-weight: 700;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}

#fly-in {
  font-size: 4em;
  height: 20vh; 
  text-transform: uppercase;
}

#fly-in span {
  display: block;
  font-size: .4em;
  opacity: .8;
}

#fly-in div {
 position: absolute; <!--codepen.io/h-kod/-->
  margin: 2vh 0;
  opacity: 0;
  width: 50vw;
  right:0px;
  animation: switch 32s linear infinite;
}

#fly-in div:nth-child(2) { animation-delay: 4s}
#fly-in div:nth-child(3) { animation-delay: 8s}
#fly-in div:nth-child(4) { animation-delay: 12s}
#fly-in div:nth-child(5) { animation-delay: 16s}
#fly-in div:nth-child(6) { animation-delay: 20s}
#fly-in div:nth-child(7) { animation-delay: 24s}
#fly-in div:nth-child(8) { animation-delay: 28s}

@keyframes switch {
    0% { opacity: 0;filter: blur(20px); transform:scale(12)}
    3% { opacity: 1;filter: blur(0); transform:scale(1)}
    10% { opacity: 1;filter: blur(0); transform:scale(.9)}
    13% { opacity: 0;filter: blur(10px); transform:scale(.1)}
    80% { opacity: 0}
    100% { opacity: 0}
}


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);
}
  #learn-more {
	fill-opacity: 0;
	fill: #fff;
	stroke: #fff;
	stroke-width: 2;
	border-radius: 5px;
	stroke-linejoin: round;
	transition: all 250ms ease-in;
	cursor: pointer;
  }
  #learn-more:hover {
	fill-opacity: 1;
  }
  #learn-more:hover ~ .learn-more-text {
	fill: #005fa4;
  }
  
  .learn-more-text {
	font-family: "Roboto";
	fill: #fff;
	pointer-events: none;
	font-size: 14px;
	transition: all 250ms ease-in;
  }
  
  .center {
	fill: #005fa4;
  }
  
  .pointer {
	fill: #fff;
	stroke: #3b8fc0;
	stroke-width: 2;
  }
  
  .nav-copy {
	font-family: "Roboto";
	fill: #fff;
	fill-opacity: 1;
	transition: all 250ms ease-in;
  }
  .nav-copy.changing {
	fill-opacity: 0;
  }
  
  .service {
	cursor: pointer;
  }
  .service text {
	font-size: 14px;
	font-family: "Roboto";
	text-anchor: middle;
  }
  .service .icon-wrapper {
	transform-origin: 50% 50%;
  }
  .service .icon-wrapper, .service .icon-wrapper > * {
	transition: all 250ms ease-in;
  }
  .service circle {
	fill: #005fa4;
  }
  .service circle.shadow {
	fill-opacity: 0;
	filter: url(#service-shadow);
  }
  .service use {
	fill: #fff;
  }
  .service text {
	fill: #4d4d4d;
  }
  .service.active .icon-wrapper, .service:hover .icon-wrapper {
	transform: scale(1.15) translateY(-5px);
  }
  .service.active .icon-wrapper, .service.active .icon-wrapper > *, .service:hover .icon-wrapper, .service:hover .icon-wrapper > * {
	transition: all 250ms ease-out;
  }
  .service.active .icon-wrapper circle.shadow, .service:hover .icon-wrapper circle.shadow {
	fill-opacity: 0.4;
  }
  .service.active text, .service:hover text {
	fill: #005fa4;
	font-weight: bold;
  }

/* Function for getting colors from list
if we need quantity of colors more than colors in array  */
/* Function for painting matrix with box-shadow */
/* Other stuff */

  
  /* Main stuff */
  .box-with-text {
	position: relative;
	overflow: hidden;
	text-align: center;
	text-transform: uppercase;
	font: 12vw/1 Open ;
	font-weight: 800;
	font-family: ccupupandaway ;
	/* Hack to hide thin transparent lines while resize objects */ }
	.box-with-text:before {
	  content: '';
	  display: block;
	  position: absolute;
	  border-radius: 50%;
	  box-shadow: 0vmax 0vmax 10vmax 10vmax purple, 15vmax 0vmax 10vmax 10vmax violet, 30vmax 0vmax 10vmax 10vmax teal, 45vmax 0vmax 10vmax 10vmax navy, 60vmax 0vmax 10vmax 10vmax purple, 75vmax 0vmax 10vmax 10vmax crimson, 90vmax 0vmax 10vmax 10vmax navy, 105vmax 0vmax 10vmax 10vmax purple, 120vmax 0vmax 10vmax 10vmax darkturquoise, 135vmax 0vmax 10vmax 10vmax #54428E, 0vmax 15vmax 10vmax 10vmax steelblue, 15vmax 15vmax 10vmax 10vmax #1D61B7, 30vmax 15vmax 10vmax 10vmax darkviolet, 45vmax 15vmax 10vmax 10vmax #1D61B7, 60vmax 15vmax 10vmax 10vmax darkviolet, 75vmax 15vmax 10vmax 10vmax blue, 90vmax 15vmax 10vmax 10vmax purple, 105vmax 15vmax 10vmax 10vmax violet, 120vmax 15vmax 10vmax 10vmax teal, 135vmax 15vmax 10vmax 10vmax purple, 0vmax 30vmax 10vmax 10vmax blue, 15vmax 30vmax 10vmax 10vmax crimson, 30vmax 30vmax 10vmax 10vmax navy, 45vmax 30vmax 10vmax 10vmax purple, 60vmax 30vmax 10vmax 10vmax darkturquoise, 75vmax 30vmax 10vmax 10vmax #54428E, 90vmax 30vmax 10vmax 10vmax steelblue, 105vmax 30vmax 10vmax 10vmax #1D61B7, 120vmax 30vmax 10vmax 10vmax darkviolet, 135vmax 30vmax 10vmax 10vmax #1D61B7, 0vmax 45vmax 10vmax 10vmax darkviolet, 15vmax 45vmax 10vmax 10vmax blue, 30vmax 45vmax 10vmax 10vmax darkslateblue, 45vmax 45vmax 10vmax 10vmax purple, 60vmax 45vmax 10vmax 10vmax violet, 75vmax 45vmax 10vmax 10vmax teal, 90vmax 45vmax 10vmax 10vmax purple, 105vmax 45vmax 10vmax 10vmax blue, 120vmax 45vmax 10vmax 10vmax crimson, 135vmax 45vmax 10vmax 10vmax navy, 0vmax 60vmax 10vmax 10vmax purple, 15vmax 60vmax 10vmax 10vmax darkturquoise, 30vmax 60vmax 10vmax 10vmax #54428E, 45vmax 60vmax 10vmax 10vmax steelblue, 60vmax 60vmax 10vmax 10vmax #1D61B7, 75vmax 60vmax 10vmax 10vmax darkviolet, 90vmax 60vmax 10vmax 10vmax #1D61B7, 105vmax 60vmax 10vmax 10vmax darkviolet, 120vmax 60vmax 10vmax 10vmax blue, 135vmax 60vmax 10vmax 10vmax darkslateblue;
	  -webkit-animation: shadows-cells 2.5s linear infinite;
	  animation: shadows-cells 2.5s linear infinite; }
	.box-with-text:after {
	  content: '';
	  position: absolute;
	  top: -2px;
	  right: -2px;
	  bottom: -2px;
	  left: -2px;
	  display: block;
	  border: none; }
  
  .texts {
	position: relative;
	display: block;
	background: white;
	color: black;
	mix-blend-mode: lighten; }
  
  @-webkit-keyframes shadows-cells {
	25% {
	  box-shadow: 0vmax 0vmax 10vmax 10vmax darkviolet, 15vmax 0vmax 10vmax 10vmax #1D61B7, 30vmax 0vmax 10vmax 10vmax darkviolet, 45vmax 0vmax 10vmax 10vmax blue, 60vmax 0vmax 10vmax 10vmax purple, 75vmax 0vmax 10vmax 10vmax violet, 90vmax 0vmax 10vmax 10vmax teal, 105vmax 0vmax 10vmax 10vmax purple, 120vmax 0vmax 10vmax 10vmax blue, 135vmax 0vmax 10vmax 10vmax crimson, 0vmax 15vmax 10vmax 10vmax navy, 15vmax 15vmax 10vmax 10vmax purple, 30vmax 15vmax 10vmax 10vmax darkturquoise, 45vmax 15vmax 10vmax 10vmax #54428E, 60vmax 15vmax 10vmax 10vmax steelblue, 75vmax 15vmax 10vmax 10vmax #1D61B7, 90vmax 15vmax 10vmax 10vmax darkviolet, 105vmax 15vmax 10vmax 10vmax #1D61B7, 120vmax 15vmax 10vmax 10vmax darkviolet, 135vmax 15vmax 10vmax 10vmax blue, 0vmax 30vmax 10vmax 10vmax darkslateblue, 15vmax 30vmax 10vmax 10vmax purple, 30vmax 30vmax 10vmax 10vmax violet, 45vmax 30vmax 10vmax 10vmax teal, 60vmax 30vmax 10vmax 10vmax purple, 75vmax 30vmax 10vmax 10vmax blue, 90vmax 30vmax 10vmax 10vmax crimson, 105vmax 30vmax 10vmax 10vmax navy, 120vmax 30vmax 10vmax 10vmax purple, 135vmax 30vmax 10vmax 10vmax darkturquoise, 0vmax 45vmax 10vmax 10vmax #54428E, 15vmax 45vmax 10vmax 10vmax steelblue, 30vmax 45vmax 10vmax 10vmax #1D61B7, 45vmax 45vmax 10vmax 10vmax darkviolet, 60vmax 45vmax 10vmax 10vmax #1D61B7, 75vmax 45vmax 10vmax 10vmax darkviolet, 90vmax 45vmax 10vmax 10vmax blue, 105vmax 45vmax 10vmax 10vmax darkslateblue, 120vmax 45vmax 10vmax 10vmax purple, 135vmax 45vmax 10vmax 10vmax violet, 0vmax 60vmax 10vmax 10vmax teal, 15vmax 60vmax 10vmax 10vmax purple, 30vmax 60vmax 10vmax 10vmax blue, 45vmax 60vmax 10vmax 10vmax crimson, 60vmax 60vmax 10vmax 10vmax navy, 75vmax 60vmax 10vmax 10vmax purple, 90vmax 60vmax 10vmax 10vmax darkturquoise, 105vmax 60vmax 10vmax 10vmax #54428E, 120vmax 60vmax 10vmax 10vmax steelblue, 135vmax 60vmax 10vmax 10vmax #1D61B7; }
	45% {
	  box-shadow: 0vmax 0vmax 10vmax 10vmax navy, 15vmax 0vmax 10vmax 10vmax purple, 30vmax 0vmax 10vmax 10vmax darkturquoise, 45vmax 0vmax 10vmax 10vmax #54428E, 60vmax 0vmax 10vmax 10vmax steelblue, 75vmax 0vmax 10vmax 10vmax #1D61B7, 90vmax 0vmax 10vmax 10vmax darkviolet, 105vmax 0vmax 10vmax 10vmax #1D61B7, 120vmax 0vmax 10vmax 10vmax darkviolet, 135vmax 0vmax 10vmax 10vmax blue, 0vmax 15vmax 10vmax 10vmax purple, 15vmax 15vmax 10vmax 10vmax violet, 30vmax 15vmax 10vmax 10vmax teal, 45vmax 15vmax 10vmax 10vmax purple, 60vmax 15vmax 10vmax 10vmax blue, 75vmax 15vmax 10vmax 10vmax crimson, 90vmax 15vmax 10vmax 10vmax navy, 105vmax 15vmax 10vmax 10vmax purple, 120vmax 15vmax 10vmax 10vmax darkturquoise, 135vmax 15vmax 10vmax 10vmax #54428E, 0vmax 30vmax 10vmax 10vmax steelblue, 15vmax 30vmax 10vmax 10vmax #1D61B7, 30vmax 30vmax 10vmax 10vmax darkviolet, 45vmax 30vmax 10vmax 10vmax #1D61B7, 60vmax 30vmax 10vmax 10vmax darkviolet, 75vmax 30vmax 10vmax 10vmax blue, 90vmax 30vmax 10vmax 10vmax darkslateblue, 105vmax 30vmax 10vmax 10vmax purple, 120vmax 30vmax 10vmax 10vmax violet, 135vmax 30vmax 10vmax 10vmax teal, 0vmax 45vmax 10vmax 10vmax purple, 15vmax 45vmax 10vmax 10vmax blue, 30vmax 45vmax 10vmax 10vmax crimson, 45vmax 45vmax 10vmax 10vmax navy, 60vmax 45vmax 10vmax 10vmax purple, 75vmax 45vmax 10vmax 10vmax darkturquoise, 90vmax 45vmax 10vmax 10vmax #54428E, 105vmax 45vmax 10vmax 10vmax steelblue, 120vmax 45vmax 10vmax 10vmax #1D61B7, 135vmax 45vmax 10vmax 10vmax darkviolet, 0vmax 60vmax 10vmax 10vmax #1D61B7, 15vmax 60vmax 10vmax 10vmax darkviolet, 30vmax 60vmax 10vmax 10vmax blue, 45vmax 60vmax 10vmax 10vmax darkslateblue, 60vmax 60vmax 10vmax 10vmax purple, 75vmax 60vmax 10vmax 10vmax violet, 90vmax 60vmax 10vmax 10vmax teal, 105vmax 60vmax 10vmax 10vmax purple, 120vmax 60vmax 10vmax 10vmax blue, 135vmax 60vmax 10vmax 10vmax crimson; }
	75% {
	  box-shadow: 0vmax 0vmax 10vmax 10vmax teal, 15vmax 0vmax 10vmax 10vmax purple, 30vmax 0vmax 10vmax 10vmax blue, 45vmax 0vmax 10vmax 10vmax crimson, 60vmax 0vmax 10vmax 10vmax navy, 75vmax 0vmax 10vmax 10vmax purple, 90vmax 0vmax 10vmax 10vmax darkturquoise, 105vmax 0vmax 10vmax 10vmax #54428E, 120vmax 0vmax 10vmax 10vmax steelblue, 135vmax 0vmax 10vmax 10vmax #1D61B7, 0vmax 15vmax 10vmax 10vmax darkviolet, 15vmax 15vmax 10vmax 10vmax #1D61B7, 30vmax 15vmax 10vmax 10vmax darkviolet, 45vmax 15vmax 10vmax 10vmax blue, 60vmax 15vmax 10vmax 10vmax darkslateblue, 75vmax 15vmax 10vmax 10vmax purple, 90vmax 15vmax 10vmax 10vmax violet, 105vmax 15vmax 10vmax 10vmax teal, 120vmax 15vmax 10vmax 10vmax purple, 135vmax 15vmax 10vmax 10vmax blue, 0vmax 30vmax 10vmax 10vmax crimson, 15vmax 30vmax 10vmax 10vmax navy, 30vmax 30vmax 10vmax 10vmax purple, 45vmax 30vmax 10vmax 10vmax darkturquoise, 60vmax 30vmax 10vmax 10vmax #54428E, 75vmax 30vmax 10vmax 10vmax steelblue, 90vmax 30vmax 10vmax 10vmax #1D61B7, 105vmax 30vmax 10vmax 10vmax darkviolet, 120vmax 30vmax 10vmax 10vmax #1D61B7, 135vmax 30vmax 10vmax 10vmax darkviolet, 0vmax 45vmax 10vmax 10vmax blue, 15vmax 45vmax 10vmax 10vmax darkslateblue, 30vmax 45vmax 10vmax 10vmax purple, 45vmax 45vmax 10vmax 10vmax violet, 60vmax 45vmax 10vmax 10vmax teal, 75vmax 45vmax 10vmax 10vmax purple, 90vmax 45vmax 10vmax 10vmax blue, 105vmax 45vmax 10vmax 10vmax crimson, 120vmax 45vmax 10vmax 10vmax navy, 135vmax 45vmax 10vmax 10vmax purple, 0vmax 60vmax 10vmax 10vmax darkturquoise, 15vmax 60vmax 10vmax 10vmax #54428E, 30vmax 60vmax 10vmax 10vmax steelblue, 45vmax 60vmax 10vmax 10vmax #1D61B7, 60vmax 60vmax 10vmax 10vmax darkviolet, 75vmax 60vmax 10vmax 10vmax #1D61B7, 90vmax 60vmax 10vmax 10vmax darkviolet, 105vmax 60vmax 10vmax 10vmax blue, 120vmax 60vmax 10vmax 10vmax darkslateblue, 135vmax 60vmax 10vmax 10vmax purple; } }
  @keyframes shadows-cells {
	25% {
	  box-shadow: 0vmax 0vmax 10vmax 10vmax darkviolet, 15vmax 0vmax 10vmax 10vmax #1D61B7, 30vmax 0vmax 10vmax 10vmax darkviolet, 45vmax 0vmax 10vmax 10vmax blue, 60vmax 0vmax 10vmax 10vmax purple, 75vmax 0vmax 10vmax 10vmax violet, 90vmax 0vmax 10vmax 10vmax teal, 105vmax 0vmax 10vmax 10vmax purple, 120vmax 0vmax 10vmax 10vmax blue, 135vmax 0vmax 10vmax 10vmax crimson, 0vmax 15vmax 10vmax 10vmax navy, 15vmax 15vmax 10vmax 10vmax purple, 30vmax 15vmax 10vmax 10vmax darkturquoise, 45vmax 15vmax 10vmax 10vmax #54428E, 60vmax 15vmax 10vmax 10vmax steelblue, 75vmax 15vmax 10vmax 10vmax #1D61B7, 90vmax 15vmax 10vmax 10vmax darkviolet, 105vmax 15vmax 10vmax 10vmax #1D61B7, 120vmax 15vmax 10vmax 10vmax darkviolet, 135vmax 15vmax 10vmax 10vmax blue, 0vmax 30vmax 10vmax 10vmax darkslateblue, 15vmax 30vmax 10vmax 10vmax purple, 30vmax 30vmax 10vmax 10vmax violet, 45vmax 30vmax 10vmax 10vmax teal, 60vmax 30vmax 10vmax 10vmax purple, 75vmax 30vmax 10vmax 10vmax blue, 90vmax 30vmax 10vmax 10vmax crimson, 105vmax 30vmax 10vmax 10vmax navy, 120vmax 30vmax 10vmax 10vmax purple, 135vmax 30vmax 10vmax 10vmax darkturquoise, 0vmax 45vmax 10vmax 10vmax #54428E, 15vmax 45vmax 10vmax 10vmax steelblue, 30vmax 45vmax 10vmax 10vmax #1D61B7, 45vmax 45vmax 10vmax 10vmax darkviolet, 60vmax 45vmax 10vmax 10vmax #1D61B7, 75vmax 45vmax 10vmax 10vmax darkviolet, 90vmax 45vmax 10vmax 10vmax blue, 105vmax 45vmax 10vmax 10vmax darkslateblue, 120vmax 45vmax 10vmax 10vmax purple, 135vmax 45vmax 10vmax 10vmax violet, 0vmax 60vmax 10vmax 10vmax teal, 15vmax 60vmax 10vmax 10vmax purple, 30vmax 60vmax 10vmax 10vmax blue, 45vmax 60vmax 10vmax 10vmax crimson, 60vmax 60vmax 10vmax 10vmax navy, 75vmax 60vmax 10vmax 10vmax purple, 90vmax 60vmax 10vmax 10vmax darkturquoise, 105vmax 60vmax 10vmax 10vmax #54428E, 120vmax 60vmax 10vmax 10vmax steelblue, 135vmax 60vmax 10vmax 10vmax #1D61B7; }
	45% {
	  box-shadow: 0vmax 0vmax 10vmax 10vmax navy, 15vmax 0vmax 10vmax 10vmax purple, 30vmax 0vmax 10vmax 10vmax darkturquoise, 45vmax 0vmax 10vmax 10vmax #54428E, 60vmax 0vmax 10vmax 10vmax steelblue, 75vmax 0vmax 10vmax 10vmax #1D61B7, 90vmax 0vmax 10vmax 10vmax darkviolet, 105vmax 0vmax 10vmax 10vmax #1D61B7, 120vmax 0vmax 10vmax 10vmax darkviolet, 135vmax 0vmax 10vmax 10vmax blue, 0vmax 15vmax 10vmax 10vmax purple, 15vmax 15vmax 10vmax 10vmax violet, 30vmax 15vmax 10vmax 10vmax teal, 45vmax 15vmax 10vmax 10vmax purple, 60vmax 15vmax 10vmax 10vmax blue, 75vmax 15vmax 10vmax 10vmax crimson, 90vmax 15vmax 10vmax 10vmax navy, 105vmax 15vmax 10vmax 10vmax purple, 120vmax 15vmax 10vmax 10vmax darkturquoise, 135vmax 15vmax 10vmax 10vmax #54428E, 0vmax 30vmax 10vmax 10vmax steelblue, 15vmax 30vmax 10vmax 10vmax #1D61B7, 30vmax 30vmax 10vmax 10vmax darkviolet, 45vmax 30vmax 10vmax 10vmax #1D61B7, 60vmax 30vmax 10vmax 10vmax darkviolet, 75vmax 30vmax 10vmax 10vmax blue, 90vmax 30vmax 10vmax 10vmax darkslateblue, 105vmax 30vmax 10vmax 10vmax purple, 120vmax 30vmax 10vmax 10vmax violet, 135vmax 30vmax 10vmax 10vmax teal, 0vmax 45vmax 10vmax 10vmax purple, 15vmax 45vmax 10vmax 10vmax blue, 30vmax 45vmax 10vmax 10vmax crimson, 45vmax 45vmax 10vmax 10vmax navy, 60vmax 45vmax 10vmax 10vmax purple, 75vmax 45vmax 10vmax 10vmax darkturquoise, 90vmax 45vmax 10vmax 10vmax #54428E, 105vmax 45vmax 10vmax 10vmax steelblue, 120vmax 45vmax 10vmax 10vmax #1D61B7, 135vmax 45vmax 10vmax 10vmax darkviolet, 0vmax 60vmax 10vmax 10vmax #1D61B7, 15vmax 60vmax 10vmax 10vmax darkviolet, 30vmax 60vmax 10vmax 10vmax blue, 45vmax 60vmax 10vmax 10vmax darkslateblue, 60vmax 60vmax 10vmax 10vmax purple, 75vmax 60vmax 10vmax 10vmax violet, 90vmax 60vmax 10vmax 10vmax teal, 105vmax 60vmax 10vmax 10vmax purple, 120vmax 60vmax 10vmax 10vmax blue, 135vmax 60vmax 10vmax 10vmax crimson; }
	75% {
	  box-shadow: 0vmax 0vmax 10vmax 10vmax teal, 15vmax 0vmax 10vmax 10vmax purple, 30vmax 0vmax 10vmax 10vmax blue, 45vmax 0vmax 10vmax 10vmax crimson, 60vmax 0vmax 10vmax 10vmax navy, 75vmax 0vmax 10vmax 10vmax purple, 90vmax 0vmax 10vmax 10vmax darkturquoise, 105vmax 0vmax 10vmax 10vmax #54428E, 120vmax 0vmax 10vmax 10vmax steelblue, 135vmax 0vmax 10vmax 10vmax #1D61B7, 0vmax 15vmax 10vmax 10vmax darkviolet, 15vmax 15vmax 10vmax 10vmax #1D61B7, 30vmax 15vmax 10vmax 10vmax darkviolet, 45vmax 15vmax 10vmax 10vmax blue, 60vmax 15vmax 10vmax 10vmax darkslateblue, 75vmax 15vmax 10vmax 10vmax purple, 90vmax 15vmax 10vmax 10vmax violet, 105vmax 15vmax 10vmax 10vmax teal, 120vmax 15vmax 10vmax 10vmax purple, 135vmax 15vmax 10vmax 10vmax blue, 0vmax 30vmax 10vmax 10vmax crimson, 15vmax 30vmax 10vmax 10vmax navy, 30vmax 30vmax 10vmax 10vmax purple, 45vmax 30vmax 10vmax 10vmax darkturquoise, 60vmax 30vmax 10vmax 10vmax #54428E, 75vmax 30vmax 10vmax 10vmax steelblue, 90vmax 30vmax 10vmax 10vmax #1D61B7, 105vmax 30vmax 10vmax 10vmax darkviolet, 120vmax 30vmax 10vmax 10vmax #1D61B7, 135vmax 30vmax 10vmax 10vmax darkviolet, 0vmax 45vmax 10vmax 10vmax blue, 15vmax 45vmax 10vmax 10vmax darkslateblue, 30vmax 45vmax 10vmax 10vmax purple, 45vmax 45vmax 10vmax 10vmax violet, 60vmax 45vmax 10vmax 10vmax teal, 75vmax 45vmax 10vmax 10vmax purple, 90vmax 45vmax 10vmax 10vmax blue, 105vmax 45vmax 10vmax 10vmax crimson, 120vmax 45vmax 10vmax 10vmax navy, 135vmax 45vmax 10vmax 10vmax purple, 0vmax 60vmax 10vmax 10vmax darkturquoise, 15vmax 60vmax 10vmax 10vmax #54428E, 30vmax 60vmax 10vmax 10vmax steelblue, 45vmax 60vmax 10vmax 10vmax #1D61B7, 60vmax 60vmax 10vmax 10vmax darkviolet, 75vmax 60vmax 10vmax 10vmax #1D61B7, 90vmax 60vmax 10vmax 10vmax darkviolet, 105vmax 60vmax 10vmax 10vmax blue, 120vmax 60vmax 10vmax 10vmax darkslateblue, 135vmax 60vmax 10vmax 10vmax purple; } }
  
  /*# sourceMappingURL=style19.css.map */
  

  /*comic*/
.comic {
  display:flex;
  flex-wrap:wrap;
  font-family:'Comic Sans', cursive;
  padding:1vmin;
}

.panel {
  background-color:#fff;
  border:solid 2px #000;
  box-shadow:0 6px 6px -6px #000;
  display:inline-block;
  flex:1 1;
  height:200px;
  margin:1vmin;
  overflow:hidden;
  position:relative;
}

.text {
  background-color:#fff;
  border:solid 2px #000;
  margin:0;
  padding:3px 10px;
}

.top-left {
  left:-6px;
  position:absolute;
  top:-2px;
  transform:skew(-15deg);
}

.bottom-right {
  bottom:-2px;
  position:absolute;
  right:-6px;
  transform:skew(-15deg);
}

.speech {
  background-color:#fff;
  border:solid 2px #000;
  border-radius:12px;
  display:inline-block;
  margin:.5em;
  padding:.5em 1em;
  position:relative;
}

.speech:before {
  border:solid 12px transparent;
  border-left:solid 12px #000;
  border-top:solid 12px #000;
  bottom:-24px;
  content:"";
  height:0;
  left:24px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.speech:after {
  border:solid 10px transparent;
  border-left:solid 10px #fff;
  border-top:solid 10px #fff;
  bottom:-19px;
  content:"";
  height:0;
  left:27px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.panel:nth-child(1) {
  flex-basis: 400px;
}
.panel:nth-child(2) {
  flex-basis: 200px;
}
.panel:nth-child(3) {
  flex-basis: 200px;
}
.panel:nth-child(4) {
  flex-basis: 200px;
}
.panel:nth-child(5) {
  flex-basis: 200px;
}
.panel:nth-child(6) {
  flex-basis: 200px;
}
.panel:nth-child(7) {
  flex-basis: 400px;
}
.panel:nth-child(8) {
  flex-basis: 200px;
}
.panel:nth-child(9) {
  flex-basis: 200px;
}

/* background colours */

.panel:nth-child(4n+1) {
  background-image:radial-gradient(circle, purple, rgb(146, 7, 173));
}

.panel:nth-child(4n+2) {
  background-image:radial-gradient(circle, lightblue, deepskyblue);
}

.panel:nth-child(4n+3) {
  background-image:radial-gradient(circle, palegreen, navy);
}

.panel:nth-child(4n+4) {
  background-image:radial-gradient(circle, lightcoral, tomato);
}


  #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: 1.5vw;
	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);
	transition:0.5s all;
}
.back-to-top:hover img {
	transform:translateY(-10px) rotate(180deg);
}

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:#c5deff;
	font-size: 1.2em;
	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:10px 30px 30px 10px;
	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;
}

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

figure img {
	width:80%;
	position:relative;
	left:10%;
	max-width: 1500px;
}
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;
}

#cursor-1{
	position:fixed;
	z-index:9999999;
	left:0;
	top:0;
	width: 30px;
	height: 30px;
	filter: drop-shadow(0px 0px 2px #2f86f8);
	background-image: url(https://static.igem.wiki/teams//wiki/webpage/navbar/cursor-2.svg);
	background-size: contain;
  }

/* div#cursor-1 {
	position:relative;
	z-index:999999;
	width:30px;
	height:30px;
	/* background-image:  url('https://static.igem.wiki/teams//wiki/webpage/navbar/cursor-1.svg');
	background-size:100%; */
/* }
div#cursor-1 > img {
	width:30px;height:30px
} */ 

.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: 0;
	z-index: 1;
	position: relative;
    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;
	scrollbar-width: none;
	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: #54428E-line-ani 0.5s ease-in-out forwards;
	
}
@keyframes #54428E-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-#54428E 0.5s ease-in 0.3s 1 forwards;
}

@keyframes font-turn-#54428E {
	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: 65vh;
	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: 1.4vw;
	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:relative;
	width:90%;
	left:5%;
	display: flex;
	flex-wrap: nowrap;
	justify-content:space-evenly;
}
.icon-container > div {
 	width:130px;
}
.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:130px;
	transition: 0.5s;
}
.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;
		}
	}
@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;
	}
}