* {
    --indexButtonSize: 7vw;
    --indexButtonText: 1.7vw;
}

body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #075502 !important; }
.bg-hero { background-color: #05930f; }

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

/* For Cenetered Elements */

.centered {
    text-align: center;
}
.centerv {
    vertical-align: middle;
}
.centerall {
    text-align: center;
    vertical-align: middle; 
}
.lrMargins {
    margin-left: 20%;
    margin-right: 20%;
}
.teamMargins {
    margin-left: 15%;
    margin-right: 15%;
}
.partMargins {
    margin-left: 10%;
    margin-right: 10%;
}
/* For Buttons */
.round {
    border-radius: 50%;
    width: var(--indexButtonSize);
    height: var(--indexButtonSize);
    border: solid;
    border-color: #183642;
    padding: 0vw 0vw;
    border-width: 0.2vw;
}

.round .oneLine {
    text-align: center;
    padding: 2.028vw 0vw;
    margin-bottom: 0px;
    width: var(--indexButtonSize);
    height: var(--indexButtonSize);
}

.round .twoLine {
    text-align: center;
    padding: 1vw 0vw;
    margin-bottom: 0px;
    width: var(--indexButtonSize);
    height: var(--indexButtonSize);
}

#teamButton {
    background-image: url( https://static.igem.wiki/teams/4262/wiki/web.jpg);
    background-size: auto 100%;
    background-color: #a0a0a0;
    background-blend-mode: multiply;
    background-position: center;
}
 
#teamButton h3 {
    color: white;
    font-size: var(--indexButtonText);
}

#projectButton {
    background-image: url(https://static.igem.wiki/teams/4262/wiki/pexels-pixabay-248152.jpg);
    background-size: auto 100%;
    background-color: #a0a0a0;
    background-blend-mode: multiply;
    background-position: center;
}


#projectButton h3 {
    color: white;
    font-size: var(--indexButtonText);
}

#humanPracticesButton {
    /*background-image: url(https://static.igem.wiki/teams/4262/wiki/pexels-pixabay-248152.jpg); */
    background-size: auto 100%;
    background-color: #a0a0a0;
    background-blend-mode: multiply;
    background-position: center;
}

#humanPracticesButton h3 {
    color: white;
    font-size: calc(var(--indexButtonText) * 0.9);
}

#awardButton {
    /*background-image: url(https://static.igem.wiki/teams/4262/wiki/pexels-pixabay-248152.jpg); */
    background-size: auto 100%;
    background-color: #a0a0a0;
    background-blend-mode: multiply;
    background-position: center;
}

#awardButton h3 {
    color: white;
    font-size: var(--indexButtonText);
}

#partsButton {
    /*background-image: url(https://static.igem.wiki/teams/4262/wiki/pexels-pixabay-248152.jpg); */
    background-size: auto 100%;
    background-color: #a0a0a0;
    background-blend-mode: multiply;
    background-position: center;
}

#partsButton h3 {
    color: white;
    font-size: var(--indexButtonText);
}

#safetyButton {
    /*background-image: url(https://static.igem.wiki/teams/4262/wiki/pexels-pixabay-248152.jpg); */
    background-size: auto 100%;
    background-color: #a0a0a0;
    background-blend-mode: multiply;
    background-position: center;
}

#safetyButton h3 {
    color: white;
    font-size: var(--indexButtonText);
}

/* Adding a Blank space */

.whiteSpaceBelow {
    margin-bottom: 60px;
}

/* MOTHY Banner */

#MOTHY {
    margin-top: 2%;
}

/* Overlapping Elements */

.overlapper {
    position: relative;
    width: 70%;
    --imgHeight: 900px;
    /*height: 900px;*/
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 40%;
}

.overlapper img {
    position: absolute;
    top: 0%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.overlapper .row1 {
    position: absolute;
    top: 4%;
    width: 100%;
}

.overlapper .row2 {
    position: absolute;
    top: 31%;
    width: 100%;
}

.overlapper .row3 {
    position: absolute;
    top: 65%;
    width: 100%;
}

.overlapper .row1 .right {
    position: absolute;
    left: 67%;
}

.overlapper .row2 .right {
    position: absolute;
    left: 76%;
}

.overlapper .row3 .right {
    position: absolute;
    left: 62%;
}

.overlapper .row1 .left {
    position: absolute;
    left: 32%;
}

.overlapper .row2 .left {
    position: absolute;
    left: 18%;
}

.overlapper .row3 .left {
    position: absolute;
    left: 30%;
}

.left {
    text-align: center;
}

.right {
    text-align: center;
}

.crop {
    width: 150%;
    height: 150%;
    overflow: hidden;
}