.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%;
  }
  
  th, td {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #DDD;
	color: #2e2272;
	
  }
  
  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;
}

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




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

/* header*/
@charset "UTF-8";/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}.
@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopLeft{-webkit-animation-name:fadeInTopLeft;animation-name:fadeInTopLeft}@-webkit-keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopRight{-webkit-animation-name:fadeInTopRight;animation-name:fadeInTopRight}@-webkit-keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomLeft{-webkit-animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}@-webkit-keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomRight{-webkit-animation-name:fadeInBottomRight;animation-name:fadeInBottomRight}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}

#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 {
  padding-top: 1rem;
  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: 95%;
  border-radius: 2rem;
  z-index: -1;
  padding-top: 2.5rem;
  padding-bottom: 2.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*/

.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, yellowgreen);
}

.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;
}
 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%;
}
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: 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;
	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: 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: 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: 1000px) {
.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;}
}
@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;
    }
}







/* General Demo Style  attributions*/
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Gorditas:400,700);


@font-face {
	font-family: 'fontawesome-selected';
	src: url("font/fontawesome-selected.eot");
	src: 
	url("font/fontawesome-selected.eot?#iefix") format('embedded-opentype'), 
	url("font/fontawesome-selected.woff") format('woff'), 
	url("font/fontawesome-selected.ttf") format('truetype'), 
	url("font/fontawesome-selected.svg#fontawesome-selected") format('svg');
	font-weight: normal;
	font-style: normal;
}

.timeline {
	position: relative;
	list-style-type: none;
	padding: 30px 0 50px 0;
	font-family: 'Gorditas', Arial, sans-serif;
}

.timeline:before {
	content: '';
	position: absolute;
	width: 5px;
	height: 100%;
	top: 0;
	left: 165px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);
}

.event {
	position: relative;
	margin-bottom: 80px;
	padding-right: 40px;
	padding-bottom: 10%;
}

.thumb {
	position: absolute;
	width: 200px;
	height: 200px;
	box-shadow: 
		0 0 0 8px #1D61B7, 
		0 1px 1px rgba(255,255,255,0.5);
	background-repeat: no-repeat;
	border-radius: 10%;
	-webkit-transform: scale(0.8) translateX(24px);
	-moz-transform: scale(0.8) translateX(24px);
	-o-transform: scale(0.8) translateX(24px);
	-ms-transform: scale(0.8) translateX(24px);
	transform: scale(0.8) translateX(24px);

	
}

.thumb {
	position: absolute;
	width: 200px;
	height: 200px;
	box-shadow: 
		0 0 0 8px #1D61B7, 
		0 1px 1px rgba(255,255,255,0.5);
	background-repeat: no-repeat;
	border-radius: 10%;
	-webkit-transform: scale(0.8) translateX(24px);
	-moz-transform: scale(0.8) translateX(24px);
	-o-transform: scale(0.8) translateX(24px);
	-ms-transform: scale(0.8) translateX(24px);
	transform: scale(0.8) translateX(24px);
	overflow: hidden;
	
}
.thumb:before {
	content: '';
	position: absolute;
	height: 8px;
	z-index: -1;
	background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC);
	width: 51px;
	top: 42px;
	left: 100%;
	margin-left: 8px;
}

.thumb span {
	color: #1D61B7; 
	width: 100%;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	position: absolute;
	top: -30px;
}
.bgteam{
    z-index: -9;
	width: 100%;
}
.user-1 {
	background-image: url(../images/hela.jpg);
}

/* Transparent Checkbox/radio hack: leave the checkbox on top, hide it with opacity 0 */

.event label,
.event input[type="radio"] {
	width: 24px;
	height: 24px;
	left: 158px;
	top: 36px;
	position: absolute;
	display: block;
}

.event input[type="radio"] {
	opacity: 0;
	z-index: 10;
	cursor: pointer;
}

.event label:after {
	font-family: 'fontawesome-selected';
	content: '\e702';
	background: #fff;
	border-radius: 50%;
	color: #1D61B7;
	font-size: 26px;
	height: 100%;
	width: 100%;
	left: -2px;
	top: -3px;
	line-height: 24px;
	position: absolute;
	text-align: center;
}

.content-perspective {
	margin-left: 230px;
	position: relative;

	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	-o-perspective: 600px;
	-ms-perspective: 600px;
	perspective: 600px;
}

.content-perspective:before {
	content: '';
	width: 37px;
	left: -51px;
	top: 45px;
	position: absolute;
	height: 1px;
	z-index: -1;
	background: #fff;
}

.content {
	-webkit-transform: rotateY(10deg);
	-moz-transform: rotateY(10deg);
	-o-transform: rotateY(10deg);
	-ms-transform: rotateY(10deg);
	transform: rotateY(10deg);

	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.content-inner {
	position: relative;
	padding: 20px;
	color: #333;
	border: none;
	border-left: 5px solid #1D61B7;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	background: #fff;
}

.content-inner h3 {
	font-size: 26px;
	padding: 5px 0 5px 0;
	color: #1D61B7;
}

.content-inner p {
	font-size: 18px;
	max-height: 0px;
	overflow: hidden;
	color: transparent;
	color: rgba(0,0,0,0);
	text-align: left;
}

.content-inner:before {
	font-family: 'fontawesome-selected';
	content: '\25c2';
	font-weight: normal;
	font-size: 54px;
	line-height: 54px;
	position: absolute;
	width: 30px;
	height: 30px;
	color: #1D61B7;
	left: -22px;
	top: 19px;
	z-index: -1;
}

/* Transitions */

.thumb,
.thumb span,
.content-inner h3 {
	-webkit-transition: all 0.6s ease-in-out 0.2s;
	-moz-transition: all 0.6s ease-in-out 0.2s;
	-o-transition: all 0.6s ease-in-out 0.2s;
	-ms-transition: all 0.6s ease-in-out 0.2s;
	transition: all 0.6s ease-in-out 0.2s;
}

.content-inner {
	-webkit-transition: box-shadow 0.8s linear 0.2s;
	-moz-transition: box-shadow 0.8s linear 0.2s;
	-o-transition: box-shadow 0.8s linear  0.2s;
	-ms-transition: box-shadow 0.8s linear 0.2s;
	transition: box-shadow 0.8s linear 0.2s;
}

.content {
	-webkit-transition: -webkit-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
	-moz-transition: -moz-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
	-o-transition: -o-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
	-ms-transition: -ms-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
	transition: transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
}

.content-inner p {
	-webkit-transition: max-height 0.5s linear, color 0.3s linear;
	-moz-transition: max-height 0.5s linear, color 0.3s linear;
	-o-transition: max-height 0.5s linear, color 0.3s linear;
	-ms-transition: max-height 0.5s linear, color 0.3s linear;
	transition: max-height 0.5s linear, color 0.3s linear;
}

/* Checked */

.event input[type="radio"]:checked + label:after {
	content: '\2714';
	color: #54428E;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8);
}

.event input[type="radio"]:checked ~ .content-perspective:before {
	background: #54428E;
}

.event input[type="radio"]:checked ~ .content-perspective .content-inner h3 {
	color: #54428E;
}

.event input[type="radio"]:checked ~ .content-perspective .content {
	-webkit-transform: rotateY(-5deg);
	-moz-transform: rotateY(-5deg);
	-o-transform: rotateY(-5deg);
	-ms-transform: rotateY(-5deg);
	transform: rotateY(-5deg);
	padding-bottom: 10vh;

}

.event input[type="radio"]:checked ~ .content-perspective .content-inner {
	border-color: #54428E;
	box-shadow: 10px 0px 10px -6px rgba(0, 0, 0, 0.1);
}

.event input[type="radio"]:checked ~ .content-perspective .content-inner p {
	max-height: 260px; /* Add media queries */
	color: rgba(0,0,0,0.6);
	-webkit-transition-delay: 0s, 0.6s;
	-moz-transition-delay: 0s, 0.6s;
	-o-transition-delay: 0s, 0.6s;
	-ms-transition-delay: 0s, 0.6s;
	transition-delay: 0s, 0.6s;
}

.event input[type="radio"]:checked ~ .content-perspective .content-inner:before {
	color: #54428E;
}

.event input[type="radio"]:checked ~ .thumb {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	box-shadow: 
		0 0 0 8px #54428E, 
		0 1px 1px rgba(255,255,255,0.5);
}

.event input[type="radio"]:checked ~ .thumb span {
	color: #54428E;
}

.event input[type="radio"]:checked ~ .thumb:before {
	background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAOfUjX+882+wYgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQBbNyaHFmzEqgAAAABJRU5ErkJggg==);
}

.content-inner p,
.thumb span,
.event label {
	-webkit-backface-visibility: hidden;
}

@media screen and (max-width: 850px) { 
	.content-inner h3 {
		font-size: 20px;
	}

	.content-inner p {
		font-size: 14px;
		text-align: justify;
	}

	.event input[type="radio"]:checked ~ .content-perspective .content-inner p {
		max-height: 500px; 
	}
}

@media screen and (max-width: 2540px) {
	.timeline::before {
		left: 50px;
	}

	.event { 
		padding-right: 0px;
		margin-bottom: 200px;
	}


	.thumb {
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
		-o-transform: scale(0.8);
		-ms-transform: scale(0.8);
		transform: scale(0.8);
	}

	.event input[type="radio"] {
		width: 100%;
		height: 250px;
		left: 0px;
		top: 0px;
	}

	.thumb:before,
	.event input[type="radio"]:checked ~ .thumb:before {
		background: none;
		width: 0;
	}

	.event label {
		display: none;
	}

	.content-perspective {
		margin-left: 0px; 
		top: 200px;
	}

	.content-perspective:before {
		height: 0px; 
	}

	.content {
		-webkit-transform: rotateX(-10deg);
		-moz-transform: rotateX(-10deg);
		-o-transform: rotateX(-10deg);
		-ms-transform: rotateX(-10deg);
		transform: rotateX(-10deg);
	}

	.event input[type="radio"]:checked ~ .content-perspective .content {
		-webkit-transform: rotateX(10deg);
		-moz-transform: rotateX(10deg);
		-o-transform: rotateX(10deg);
		-ms-transform: rotateX(10deg);
		transform: rotateX(10deg);
	}

	.content-inner {
		border-left: none;
		border-top: 5px solid #1D61B7;
	}

	.event input[type="radio"]:checked ~ .content-perspective .content-inner {
		border-color: #54428E;
		box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1);
	}

	.content-inner:before {
		content: '\25b4';
		left: 33px;
		top: -32px;
	}

	.event input[type="radio"]:checked ~ .content-perspective .content-inner p {
		max-height: 300px; 
	}
}
@media screen and (max-width: 540px) {
	.event { 
		padding-right: 0px;
		margin-bottom: 200px;
		padding-top: 5vh;
	}
	.event input[type="radio"] {
		width: 100%;
		height: 100%;
		left: 0px;
		top: 5vh;
	}
}