:root {
    --navbar-height: 40px;
    --captionSize: 13pt;
    --titleSize: 12pt;
    --textSize: 11pt;
}

.oko-button {
    padding-top:0px;
}

.cookie-container > div:nth-of-type(2) {
    margin-left:20px;
}

.navbar {
    height: var(--navbar-height);
    padding:0px;
    margin: 0px;
}

.navbar-nav {
    justify-content:left;
    margin-left: 20px;
}

.nav-item {
    margin-right: 20px;
    margin-bottom: 0px;
}

.navbar-collapse {
    height: 100%;
    margin:0px;
    padding: 0px;
    background-color: transparent;
}

#navbar-social {
    position: absolute;
    top:8px;
    right:20px;
    margin:0px;
}

#intro-logo {
    background-size: clamp(350px,33vw,525px) auto;
}

#intro-text {
    width:clamp(480px, 33vw, 430px);
    text-align: center;
    text-transform: uppercase;
}

.far-logo {
    background-size: clamp(400px, 25%, 500px) auto;
}

.herdling-logo {
    background-size: clamp(400px, 25%, 500px) auto;
    background-position: center 25%;
}


.team-person .name .title {
    font-size: calc(var(--captionSize) *1.1);
    margin-bottom: 5px;
}

.team-person .description .title {
    font-size: var(--captionSize);
}

.team-person:hover .overlay {
    display:block;
    animation: fadeIn 0.5s ease-in;
 }

 .team-person:hover .picture {
    opacity: 0.75;
 }

#contact {
    column-gap: clamp(1px, 15%, 150px);
}

#contact .oko-button {
    padding-top:0px;
    line-height: 1;
}

.hide-mg {
    display:none !important;
}


@keyframes move-background {
    from {
        object-position: left center;
    }
    to {
        object-position: right bottom;
    }
}

@media (orientation: landscape) {
    @keyframes move-background-center {
        from {
            object-position: left 0%;
        }
        to {
            object-position: right 140%;
        }
    }
}

@media (orientation: portrait) {
    @keyframes move-background-center {
        from {
            object-position: 40% 0%;
        }
        to {
            object-position: 60% 140%;
        }
    }
}