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

.bg-dark {
    background-color: #343a40 !important;
}

.bg-hero {
    background-color: #7952b3;
}

body {
    overflow-x: hidden;
    width: 100vw;
}

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


/* index bg */
.bg {
    z-index: -2;
}

.bg2 {
    height: 110vh;
    width: 110vw;
    background: url("https://static.igem.wiki/teams/4115/wiki/starry3.svg") repeat;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
}

.bg1 {
    height: 110vh;
    width: 110vw;
    background: url("https://static.igem.wiki/teams/4115/wiki/starry-back.svg") repeat;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
}

.bg3 {
    height: 110vh;
    width: 110vw;
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -3;
}

@media only screen and (min-width: 1000px) {
    .progressBar {
        position: fixed;
        left: 55px;
        height: 100vh;
        width: 40px;
        z-index: 3;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        flex-wrap: nowrap;
        align-content: center;
    }
}

@media only screen and (max-width: 1000px) {
    .progressBar {
        position: fixed;
        left: 0;
        height: 100vh;
        width: 40px;
        z-index: 3;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        flex-wrap: nowrap;
        align-content: center;
    }
}

@media only screen and (max-width: 600px) {
    .progressBar {
        display: none;
    }
}


.home-content-box-img {
    position: relative;
    margin-top: 3vw;
    display: flex;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    z-index: 3;
}

.home-content-box-img-div {
    margin-right: 1vw;
    margin-left: 1vw;
    position: relative;
    display: block;
    z-index: 9;
}

.home-content-box-img-div div {
    height: 15vw;
    width: 15vw;
    border-style: dashed;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.text-edge-icon {
    width: 5vw;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 1000px) {
    .home-content-box-img {
        width: 100%;
    }

    .home-content-box-img-div div{
        height: 150px;
        width: 150px;
    }

    .text-edge-icon {
        width: 50px;
    }
}

@media only screen and (max-width: 800px) {
    .hidden-when-small{
        display: none;
    }
}

.home-start-button {
    background: url(https://static.igem.wiki/teams/4115/wiki/home-start-button.svg);
    position: relative;
    transform: translate(-11vw, 0);
}

.home-start-button:hover {
    background: url(https://static.igem.wiki/teams/4115/wiki/home-start-button1.svg);
}

.progressBar-contain {
    position: relative;
}

/* content */
@media only screen and (min-width: 1000px) {
    .main-content {
        margin-left: 315px;
        margin-right: 96px;
        margin-bottom: 0vh;
        color: #fff;
        font-size: 1em;
        font-weight: 100;
        text-align: center;
        position: relative;
        z-index: 2;
    }
}

@media only screen and (max-width: 1000px) {
    .main-content {
        margin-left: 60px;
        margin-right: 60px;
        margin-bottom: 0vh;
        color: #fff;
        font-size: 1em;
        font-weight: 100;
        text-align: center;
        position: relative;
        z-index: 2;
    }
}

@media only screen and (max-width: 500px) {
    .main-content {
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 0vh;
        color: #fff;
        font-size: 1em;
        font-weight: 100;
        text-align: center;
        position: relative;
        z-index: 2;
    }
}


.content {
    position: sticky;
    margin-bottom: 100vh;
    font-weight: 400;
    font-size: large;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    opacity: 0;
    line-height: 1.333;
}

.content-box {
    font-size: 1.3em;
    text-align: center;
    font-weight: 400;
}

.content-box p {
    font-size: max(1.5vw, 1em);
}

.font2 p {
    font-size: 2em;
}

.flex-change {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}

.flex-change div p {
    font-size: max(1.5vw, 1em);
}

@media only screen and (max-width: 1200px) {
    .flex-change {
        flex-direction: column;
    }
}


@media only screen and (max-width: 1320px) {
    .font2 p {
        font-size: 1em;
    }
}


@keyframes animation-fadeInRight {
    from {
        opacity: 0;
        transform: translate(25%, 0);
    }

    to {
        opacity: 1;
        transform: translate(-25%, 0);
    }
}

@keyframes cloud-astronaut-animation-1 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes cloud-astronaut-animation-2 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes cloud-astronaut-animation-3 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.cloud-astronaut-1 {
    opacity: 0;
    animation: cloud-astronaut-animation-1 3s ease-in 0s infinite forwards;
}

.cloud-astronaut-2 {
    opacity: 0;
    animation: cloud-astronaut-animation-2 3s ease-in 0s infinite forwards;
}

.cloud-astronaut-3 {
    opacity: 0;
    animation: cloud-astronaut-animation-3 3s ease-in 0s infinite forwards;
}

/* footer */
footer {
    /* background-color: #2E1C13; */
    position: relative;
    color: #fff;
    display: block;
    padding-top: 100px;
    padding-bottom: 20px;
    text-align: center;
}

footer a {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

footer a:hover {
    color: white;
    text-decoration: underline;
}


@keyframes spin_g {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* page-index */

/* @media only screen and (min-width: 1000px) { */

@keyframes ZeroToOne {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes OneToZero {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


/* } */

/* @media only screen and (min-width: 200px) { */
@keyframes rocket_up {
    from {}

    to {
        top: 0px;
        opacity: 0;
    }
}

@keyframes rocket_low {
    from {}

    to {
        top: 100vh;
        opacity: 0;
    }
}

@keyframes rocket_to_land {
    from {}

    to {}
}

@keyframes rocket_to_land_flame {
    from {}

    to {
        opacity: 0;

    }
}

@keyframes fire_flame {
    0% {
        transform: translate(-7px, -10px) scaleY(0.05);
    }

    25% {
        transform: translate(-7px, -8px) scaleY(0.1);
    }

    50% {
        transform: translate(-7px, -4px) scaleY(0.2);
    }

    75% {
        transform: translate(-7px, 42px) scaleY(1.5) scaleX(2);
    }

    100% {
        transform: translate(-7px, 15px);
    }
}

@keyframes rocket_wobble {
    0% {
        transform: translate(0.5px, -34.5px);
    }

    25% {
        transform: translate(0.5px, -35.5px);
    }

    50% {
        transform: translate(-0.5px, -35.5px);
    }

    100% {
        transform: translate(-0.5px, -34.5px);
    }
}


@media only screen and (min-width: 1000px) {
    .rocket-display {
        display: block;
    }
}

@media only screen and (max-width: 1000px) {
    .rocket-display {
        display: none;
    }
}

.home_main_rocket_shell,
.home_main_rocket_landing {
    width: 77px;
    height: 70px;
    position: fixed;
    top: 50vh;
    left: 134px;
    transform: translate(0, -35px);
    padding: 0;
    z-index: 1;
    display: none;
    animation: rocket_wobble 0.1s linear 0s infinite;
}


.home_main_rocket_up {
    width: 77px;
    height: 55px;
    position: fixed;
    top: 50vh;
    left: 134px;
    transform: translate(0, -34.5px);
    padding: 0;
    z-index: 2;
    display: none;
}

.home_main_rocket_low {
    width: 77px;
    height: 17px;
    position: fixed;
    top: 50vh;
    left: 134px;
    transform: translate(0, 18.5px);
    padding: 0;
    z-index: 2;
    display: none;
}

.home_main_flame1,
.home_main_flame2 {
    width: 116px;
    /* height: 150px; */
    position: fixed;
    top: 50vh;
    left: 134px;
    transform: translate(-20px, -52px);
    padding: 0;
    z-index: 3;
    display: none;
}


.home_main_flame {
    width: 90px;
    position: fixed;
    top: 50vh;
    left: 134px;
    transform: translate(-7px, 15px);
    padding: 0;
    z-index: 0;
    display: none;

}

.home_main_flame_left {
    width: 40px;
    position: fixed;
    top: 50vh;
    left: 123px;
    transform: translate(0px, 15px);
    padding: 0;
    z-index: 0;
    display: none;
}

.home_main_flame_right {
    width: 40px;
    position: fixed;
    top: 50vh;
    left: 182px;
    transform: translate(0, 15px);
    padding: 0;
    z-index: 0;
    display: none;
}

@keyframes hardware-button-rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        tranform: rotate(360deg)
    }
}

@keyframes humanpractice-button-rotation {
    0% {
        transform: translate(-0.05vw, -0.9vw) rotate(0deg);
    }

    5% {
        transform: translate(0.05vw, -0.8vw) rotate(4deg);
    }

    10% {
        transform: translate(0.15vw, -0.8vw) rotate(8deg);
    }

    15% {
        transform: translate(0.22vw, -0.7vw) rotate(12deg);
    }

    20% {
        transform: translate(0.25vw, -0.7vw) rotate(14deg);
    }

    25% {
        transform: translate(0.25vw, -0.6vw) rotate(15deg);
    }

    35% {
        transform: translate(0.25vw, -0.7vw) rotate(14deg);
    }

    40% {
        transform: translate(0.22vw, -0.7vw) rotate(12deg);
    }

    45% {
        transform: translate(0.15vw, -0.8vw) rotate(8deg);
    }

    50% {
        transform: translate(-0.05vw, -0.9vw) rotate(0deg);
    }

    55% {
        transform: translate(-0.15vw, -0.9vw) rotate(-4deg);
    }

    60% {
        transform: translate(-0.23vw, -1.0vw) rotate(-8deg);
    }

    65% {
        transform: translate(-0.3vw, -1.1vw) rotate(-12deg);
    }

    70% {
        transform: translate(-0.4vw, -1.1vw) rotate(-14deg);
    }

    75% {
        transform: translate(-0.45vw, -1.1vw) rotate(-15deg);
    }

    80% {
        transform: translate(-0.4vw, -1.1vw) rotate(-14deg);
    }

    85% {
        transform: translate(-0.3vw, -1.1vw) rotate(-12deg);
    }

    90% {
        transform: translate(-0.23vw, -1.0vw) rotate(-8deg);
    }

    95% {
        transform: translate(-0.15vw, -0.9vw) rotate(-4deg);
    }

    100% {
        transform: translate(-0.05vw, -0.9vw) rotate(0deg);
    }
}

.main-button {
    overflow: hidden;
}

@media only screen and (max-width: 1100px) {
    .main-button span {
        display: none;
        white-space: nowrap;
    }
}

@media only screen and (max-width: 1105px) {
    .font-control {
        font-size: 1em;
        white-space: nowrap;
        margin-top: 0.5em;
        line-height: 1;
    }
}

@media only screen and (min-width: 1105px) {
    .font-control {
        font-size: 1.5em;
        white-space: nowrap;
        margin-top: 0.75em;
        line-height: 1;
    }
}

#hardware_button:hover {
    background: url('https://static.igem.wiki/teams/4115/wiki/hardware-button.png') no-repeat;
    background-size: cover;
}

#hardware_button:hover .hardware-img {
    animation: hardware-button-rotation 4s linear 0s infinite forwards;
}

#humanpractice_button:hover {
    background: url('https://static.igem.wiki/teams/4115/wiki/humanpractice-button.png') no-repeat;
    background-size: cover;
}

#humanpractice_button:hover .humanpractice-button-img {
    animation: humanpractice-button-rotation 1s linear 0s infinite forwards;
}

#modeling_button:hover {
    background: url('https://static.igem.wiki/teams/4115/wiki/modeling-button.png') no-repeat;
    background-size: cover;
}

#parts_button:hover {
    background: url('https://static.igem.wiki/teams/4115/wiki/parts-button.png') no-repeat;
    background-size: cover;
}

#project_button:hover {
    background: url('https://static.igem.wiki/teams/4115/wiki/project-button.png') no-repeat;
    background-size: cover;
}

.contact-us {
    position: absolute;
    top: 105vw;
    width: 100vw;
    color: #fff;
}

.contact-us-div {
    display: flex;
    justify-content: center;
}

.contact-us-content {
    width: 80%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

/* } */