body {
    padding-top: 56px;
}

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

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

/*.bg-hero { background-color: #45b06cff; }*/
.bg-hero {
    background-image: linear-gradient(#3e59a8, #f5f3ef);
}

body {
    background-color: #f5f3ef;
}

/* 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 a {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

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

@font-face {
    font-family: 'Play';
    src: url('https://static.igem.wiki/teams/5196/fonts/play-bold.woff');
}


@font-face {
    font-family: 'Lexend';
    src: url('https://static.igem.wiki/teams/5196/fonts/lexend-variablefont-wght.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@media (min-width: 767px) {
    header h1.text-center {
        color: #ffffff;
        font-family: 'Play';
        font-size: 5em
    }

    header img {
        width: 100%;
        height: 100%;
    }

}


@media (max-width: 767px) {
    header h1.text-center {
        color: #ffffff;
        font-family: 'Play';
        font-size: 3em
    }

    header img {
        width: 100%;
        height: 100%;
    }

}

.header {
    z-index: -1;
    position: sticky;
}

.content {
    position: relative;
    z-index: 1;
}

.sticky-top {
    top: 100px;
}


.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

html {
    scroll-padding-top: 100px;
}

h2{
    color: #3E59A8;
    font-family: 'Lexend';
    font-weight: bold;
}

h3{
    color: #F05A28;
    font-family: 'Lexend';
    font-weight: 500;
}

h4{
    font-family: 'Lexend';
    color: #3c2415;
    /*font-weight: bold;*/
}


.Other-image{
    width: 50vi;
}