/* Main overlay container */
.overlay-loading-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	text-align: center;
	line-height: 50vh;
	background-color: rgba(245, 247, 249,0.7);
	z-index: 999;
}

/* Overlay loading helix */
.overlay-loading-helix {
	display: inline-block;
	position: relative;
    margin-top: 50%;
	transform: scale(0.20);
}

.overlay-loading-helix-nucleobase {
	display: inline-block;
	position: relative;
	vertical-align: middle;
}

.overlay-loading-helix-nucleobase:not(:last-child) {
	margin-right: 4.86vh;
}

.overlay-loading-helix-nucleobase:before, .overlay-loading-helix-nucleobase:after {
	content: "";
	display: inline-block;
	width: 3vh;
	height: 3vh;
	border-radius: 50%;
	position: absolute;
}

.overlay-loading-helix-nucleobase:nth-child(1) {
	animation-delay: -1.869s;
}

.overlay-loading-helix-nucleobase:nth-child(1):before {
	animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -1.869s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(1):after {
	animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -1.869s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(2) {
	animation-delay: -3.738s;
}

.overlay-loading-helix-nucleobase:nth-child(2):before {
	animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -3.738s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(2):after {
	animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -3.738s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(3) {
	animation-delay: -5.607s;
}

.overlay-loading-helix-nucleobase:nth-child(3):before {
	animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -5.607s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(3):after {
	animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -5.607s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(4) {
	animation-delay: -7.476s;
}

.overlay-loading-helix-nucleobase:nth-child(4):before {
	animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -7.476s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(4):after {
	animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -7.476s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(5) {
	animation-delay: -9.345s;
}

.overlay-loading-helix-nucleobase:nth-child(5):before {
	animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -9.345s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(5):after {
	animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -9.345s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(6) {
	animation-delay: -11.214s;
}

.overlay-loading-helix-nucleobase:nth-child(6):before {
	animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -11.214s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(6):after {
	animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -11.214s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(7) {
	animation-delay: -13.083s;
}

.overlay-loading-helix-nucleobase:nth-child(7):before {
	animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -13.083s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(7):after {
	animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -13.083s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(8) {
	animation-delay: -14.952s;
}

.overlay-loading-helix-nucleobase:nth-child(8):before {
	animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -14.952s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(8):after {
	animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -14.952s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(9) {
	animation-delay: -16.821s;
}

.overlay-loading-helix-nucleobase:nth-child(9):before {
	animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -16.821s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(9):after {
	animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -16.821s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(10) {
	animation-delay: -18.69s;
}

.overlay-loading-helix-nucleobase:nth-child(10):before {
	animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -18.69s;
	background-color: #3ec1f0;
}

.overlay-loading-helix-nucleobase:nth-child(10):after {
	animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
	animation-delay: -18.69s;
	background-color: #3ec1f0;
}

@keyframes animBefore {
	0% {
		top: -6vh;
		z-index: 1;
	}

	25% {
		transform: scale(1.2);
		z-index: 1;
	}

	50% {
		top: 6vh;
		z-index: -1;
	}

	75% {
		background-color: white;
		transform: scale(0.8);
		z-index: -1;
	}

	100% {
		top: -6vh;
		z-index: -1;
	}
}

@keyframes animAfter {
	0% {
		top: 6vh;
		z-index: -1;
	}

	25% {
		background-color: white;
		transform: scale(0.8);
		z-index: -1;
	}

	50% {
		top: -6vh;
		z-index: 1;
	}

	75% {
		transform: scale(1.2);
		z-index: 1;
	}

	100% {
		top: 6vh;
		z-index: 1;
	}
}

@keyframes animDotBar {
	0% {
		height: 8.25vh;
	}

	25% {
		height: 0;
	}

	50% {
		height: 8.25vh;
	}

	75% {
		height: 0;
	}

	100% {
		height: 8.25vh;
	}
}

@keyframes superscript {
	0% {
		opacity: 0;
		transform: translateY(-1em);
	}

	100% {
		opacity: 1;
		transform: translateY(0em);
	}
}