html {
    scroll-padding-top: 60pt;
}
body {
    padding: 0%;
    margin: 0%;
    font-size: 16pt;
    text-align: justify;
    font-family: 'Times New Roman', Times, serif;
}
.dark {
    background-color: rgb(7, 23, 38);
    color: white;
}
.light {
    background-color: white;
    color: black;
}
#menu a {
    text-decoration: none;
    color: white;
}
header {
    z-index: 1;
    position: fixed;
    height: 60pt;
}
.flex-row, section div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}
section div {
    align-items: flex-start;
}
#contact-section div {
    align-items: center;
}
.item {
    flex: 1 1 0; /* flex-grow, flex-shrink, flex-basis */
    margin: 5pt 0;
    margin-right: auto;
}
.single-column {
    width: 50%;
}
img.person {
    padding-top: 10pt;
    /*width: 128px;
    height: 128px;*/
}
header.flex-row {
    justify-content: space-between !important;
}
.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#logo-mobile, #logo-tablet {
    display: none;
}
#menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    letter-spacing: 2pt;
    line-height: 42pt;
    width: 100%;
}
h2 {
    font-size: 20pt;
    border-bottom: solid 1pt;
    padding-bottom: 5pt;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
    font-weight: normal;
}
h3 {
    font-size: 18pt;
    letter-spacing: 0.2em;
    text-align: center;
    font-weight: normal;
}
h1, .pretitle {
    letter-spacing: 0.2em;
    line-height: 1.6em;
    color: white;
    font-weight: normal;
}
h1 {
    max-width: 50%;
    font-size: 50pt;
    text-align: center;
    font-weight: lighter;
}
#menu a, #logo, #logo-mobile, #logo-tablet, #language, #mobile-menu-open, p, #mobile-menu-close {
    padding: 0 20pt;
}
section {
    padding: 2% 10% 5% 10%;
}
footer {
    padding: 10pt 0;
    text-align: center;
}
/*POCETAK - dugme menija za mobilni*/
#mobile-menu-open:hover, #mobile-menu-close:hover, .lang {
    cursor: pointer;
}
#mobile-menu-open, #mobile-menu-close {
    display: none;
}
#mobile-menu-open div, #mobile-menu-close div {
    width: 28pt;
    height: 2pt;
    background-color: white;
}
#open1 {
    margin-bottom: 7pt;
}
#open2 {
    margin-top: 7pt;
}
#close1 {
    transform: translateY(1pt) rotateZ(45deg);
}
#close2 {
    transform: translateY(-1pt) rotateZ(-45deg);
}
#ctrl {
    display: none;
}
@keyframes menu-anim-open {
    0% {
        transform: translateX(-100%)
    }
    100% {
        transform: translateX(0%)
    }
}
@keyframes menu-anim-close {
    0% {
        transform: translateX(0%)
    }
    100% {
        transform: translateX(-100%)
    }
}
/*KRAJ - dugme menija za mobilni*/
.lang img{
    height: 18pt;
}
.lang.selected {
    display: none;
}
#more-lang {
    position: absolute;
    display: none;
}
#home-section {
    height: 100vh;
    position: relative;
    padding: 0;
    margin: 0;
}
#contact-section {
    height: 70vh;
    position: relative;
    margin: 0;
    padding: 2% 0 0 0;
}

#home-section  {
    z-index: -1;
}
video {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
}
#map {
    width: 100%;
    height: 100%;   
    filter: grayscale(100%);
}
#email-address-mobile, #envelope-24-img, #phone-24-img, #email-24-img, #twitter-24-img, #linkedin-24-img, #researchgate-24-img, #github-24-img {
    display: none;
}
.phone-link, a {
    text-decoration: underline;
    color: currentColor;
}
@media screen and (max-width: 1500px) {
    #logo-mobile, #logo {
        display: none;
    }
    #logo-tablet {
        display: block;
    }
}
@media screen and (max-width: 1090px) {
    body {
        font-size: 12pt;
        text-align: left;
    }
    section {
        padding: 2% 5% 5% 5%;
    }
    h2 {
        font-size: 16pt;
    }
    h3 {
        font-size: 14pt;
        letter-spacing: 0.2em;
    }
    h1 {
        max-width: 100%;
        font-size: 25pt;
    }
    #logo-mobile {
        display: block;
    }
    #logo, #logo-tablet {
        display: none;
    }
    #mobile-menu-open{
        display: block;
    }
    #menu {
        display: none;
        position: absolute;
        top: 60pt;
        width: 70%;
    }
    #ctrl:checked ~ #menu {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        animation: menu-anim-open 0.5s forwards;
    }
    #ctrl:checked ~ #mobile-menu-close {
        display: block;
    }
    #ctrl:checked ~ #mobile-menu-open {
        display: none;
    }
    #ctrl:not(:checked) ~ #menu {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        animation: menu-anim-close 0.5s forwards;
    }
    #ctrl:not(:checked) ~ #mobile-menu-close {
        display: none;
    }
    #ctrl:not(:checked) ~ #mobile-menu-open {
        display: block;
    }
    video {
        display: none;
    }
    #home-section {
        background-image: url('../images/laboratory.png');
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
    }
    .flex-column, section div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .item {
        margin-right: auto;
    }
    .single-column {
        width: 100%;
    }
    #email-address-mobile, #envelope-24-img, #phone-24-img, #email-24-img, #twitter-24-img, #linkedin-24-img, #researchgate-24-img, #github-24-img {
        display: block;
        text-align: right;
    }
    #email-address, #envelope-32-img, #phone-32-img, #email-32-img, #twitter-32-img, #linkedin-32-img, #researchgate-32-img, #github-32-img {
        display: none;
    }
    #contact-section {
        height: 90vh;
    }
    canvas {
        position: absolute !important;
        top: 0 !important;
    }
}