@font-face {
    font-family: "Karrik";
    src: url(Karrik-Regular.ttf);
}

*{
    box-sizing: border-box;
}

html, body {
    --MainBlue: rgb(48, 75, 193);

    margin: 0;
    padding: 0;
    background: grey;
}

h2 {
    font-family: "Karrik";
    color: var(--MainBlue);
    font-size: 1.7em;
    letter-spacing: 3%;
}

p {
    font-family: "Karrik";
    color: var(--MainBlue);
    font-size: 1.2em;
}

/* banner */
.banner {
    position: fixed;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 20vh;
    z-index: 2;
    /* justify-content: center;
    align-items: center;
    flex-shrink: 0; */
}
.sitename {
    flex-basis: 75vw;
    height: 20vh;
    background-color: var(--MainBlue);
    border: 1px solid var(--MainBlue);
    justify-content: flex-start;
    contain: content;
    overflow: hidden;
}
.sitename img {
    position: relative;
    top: 4em;
    left: 2em;
    z-index: 2;
}
#bannermedia {
    width: 100%;
    height: 20vh;
    z-index: 1;
}
#bannermedia video {
    display: inline-block;
    position: relative;
    bottom: 17em;
    min-width: 100%; 
    min-height: 100%;
    object-fit: cover;
    /* bottom: 17em; */
}
#bannermedia .hidden {
    display: none;
}

.indicator {
    /* display: flex; */
    flex-basis: 25vw;
    flex-direction: row;
    height: 20vh;
    padding: 2em;
    overflow: hidden;
    white-space: nowrap;
    background-color: white;
    border: 1px solid var(--MainBlue);
    justify-content: space-evenly;
}
.indicator img.face {
    width: 50%;
    display: inline-block;
    margin-inline: auto;
    position: relative;
    vertical-align: top;
    left: 100%;
    animation-name: scrollLeft;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
@keyframes scrollLeft {

    to {
        left: -25vw;
    }
}
.indicator img.face1 {
    animation-delay: calc(15s / 6 * (6 - 1) * -1);
}
.indicator img.face2 {
    animation-delay: calc(15s / 6 * (6 - 2) * -1);
}
.indicator img.face3 {
    animation-delay: calc(15s / 6 * (6 - 3) * -1);
}
.indicator img.face4 {
    animation-delay: calc(15s / 6 * (6 - 4) * -1);
}
.indicator img.face5 {
    animation-delay: calc(15s / 6 * (6 - 5) * -1);
}
.indicator img.face6 {
    animation-delay: calc(15s / 6 * (6 - 6) * -1);
}

/* for both pages */
section.content {
    position: relative;
    display: flex;
    width: 100%;
    height: calc(100vh - 20vh);
    top: 20vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
section.content .page {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
section.content .page .smlHalf {
    box-sizing: border-box;
    padding: 5vh;
    flex-basis: 25vw;
    height: calc(100vh - 20vh);
    border: 1px solid var(--MainBlue);
    background-color: white;
    word-wrap: normal;
    contain: strict;

}


/* first page */
section.content-F .page .bigHalf {
    flex-basis: 75vw;
    height: calc(100vh - 20vh);
    background-color: white;
    border: 1px solid var(--MainBlue);
    padding: 20px;
    contain: strict;
}
section.content-F .page .bigHalf img {
    position: absolute;
}
/* draggable demo */
.drgbl {
    position: relative;
    width: 35%;
    cursor: move;
}


/* second page */
.divider {
    display: flex;
    width: 100%;
    height: 10vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative
}
.lineOne {
    width: 100%;
    height: 2.5vh;
    flex-shrink: 0;
    background-color: #4B6DFF;
}
.lineTwo {
    width: 100%;
    height: 2.5vh;
    flex-shrink: 0;
    background-color: #829AFF;
}
.lineThree {
    width: 100%;
    height: 2.5vh;
    flex-shrink: 0;
    background-color: #C1CDFF;
}
.lineFour {
    width: 100%;
    height: 2.5vh;
    flex-shrink: 0;
    background-color: #EAEEFF;
}

section.content-S .page .bigHalf {
    flex-basis: 75vw;
    height: calc(100vh - 20vh);
    background-color: white;
    border: 1px solid var(--MainBlue);
    contain: strict;
}

.biolink {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    top: 2rem;
    left: 27rem;
}

img.Contact {
    position: relative;
    width: 50%;
}


img.overlay2 {
    scale: 1.5;
}

.images-overlay {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 6.25vw;
    height: 60vh;
    flex-basis: 20vw;
}

img.overlay {
    vertical-align: top;
    display: inline-block;
    width: 15%;
    position: relative;
    opacity: 0;
}