/* 
seitenbreite:1283 px (ENDE SCHRIFTBALKEN)
ipad : 990 px, 925px (ende Schriftbalken)
bettina düesberg, ist roboto- google fonts, 24pt, medium (glaube es sind 20px) 
und gesperrt(auseinandergezogene schrift) mit AV  75
der rest Text, auf work sans regular 18/ (12px)
ALL Portrait etc ist in roboto light, 18pt, Groß/kleinbuchstaben
All unten angehängt ist in work sans semi bold
schrift ist meist in 14 pt
datum in 18pt

ipad BEttina Düesberg in 24pt, AV 75
the work etc. ist in 16 pt 
*/

 /* roboto medium (wght 500) + roboto light (wght 300) + work sans regular (wght 400) + work sans semi bold (wght 600) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Work+Sans:wght@400;600&display=swap');

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    color: #000;
    background-color: #FFF;
    font-family: 'Work Sans', sans-serif;
    font-size: 14pt;
}

a {
    text-decoration: none;
    color: black;
}

@media screen and (max-width: 66em) {

    .top-bar {
        display: flex!important;
        flex-direction: column!important;
        align-items: center!important;
    }
    .navs {
        margin-top: 1em!important;
        align-self: center!important;
    }
    /* .work-menu {
        margin-left: -8.6em!important;
    } */
    /* .about-menu {
        margin-left: -9.6em!important;
    }
    .about-title {
        max-width: 100%!important;
    } */
    /* .front-page {
        height: calc(100vh - 10em)!important;
    }
    .front-page img {
        max-height: calc(100vh - 10em)!important;
    } */
}

@media screen and (max-width: 44em) {
    .about-year {
        min-width: 0!important;
        margin-right: 1em;
    }
}

@media screen and (max-width: 38em) {
    .modal-close-btn {
        font-size: 5vmin!important;
    }
    .slider-left-btn, .slider-right-btn {
        font-size: 5vmin!important;
    }
    #bettina{
        font-size: 5vmin!important;
    }
    .main-menu {
        font-size: 3vmin!important;
    }
    .sub-menu, .work-year-box, .slider-year, .slider-title {
        font-size: 3vmin!important;
    }
    .footer img {
        width: 3vmin!important;
    }
    .page-top-btn {
        font-size: 9vmin!important;
    }
    .about-title {
        font-size: 3vmin!important;
    }
}

@media screen and (max-width: 33em) {
    .modal-close-btn {
        font-size: 4vmin!important;
    }
    .slider-left-btn, .slider-right-btn {
        font-size: 4vmin!important;
    }
    #bettina{
        font-size: 4vmin!important;
    }
}

@media screen and (max-width: 25em) {
    .modal-close-btn {
        font-size: 6vmin!important;
    }
    .slider-left-btn, .slider-right-btn {
        font-size: 6vmin!important;
    }
    #bettina {
        font-size: 4vmin!important;
    }
    .main-menu {
        font-size: 3vmin!important;
    }
    .sub-menu, .work-year-box, .slider-year, .footer, .slider-title {
        font-size: 2.5vmin!important;
    }
    .footer img {
        width: 2.5vmin!important;
    }
    .page-top-btn {
        font-size: 8vmin!important;
    }
    .about-title {
        font-size: 4vmin!important;
    }
}

.roboto-medium {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    opacity: .9;
}

.roboto-light {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 300;
    opacity: .9;
}

.roboto-light-14 {
    font-size: 14pt;
}

.work {
    opacity: .9;
}

.work-regular {
    font-weight: 400;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.content {
    margin: 3em;
    margin-bottom: 0;
    position: relative;
}

#bettina {
    font-size: 20pt;
}

.top-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: baseline;
    margin-bottom: 2em;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
}

li a {
    text-decoration: none;
    color: #000;
}

li:hover {
    /* border-bottom: 1px solid #000; */
    opacity: 1!important;
}

.underline {
    border-bottom: 1px solid #000;
}

.navs {
    justify-self: end;
    align-self: baseline;
}

.main-menu {
    display: flex;
    gap: 3em;
}

.sub-menu {
    justify-content: start;
    gap: 1.5em;
}

.front-page {
    /* margin-top: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 9em); */
    display: none;
}

.footer {
    display: flex;
    flex-direction: row;
    gap: 1em;
    margin: .5vw 0;
    opacity: .6;
    text-transform: uppercase;
    font-size: 13px;
}

.footer div {
    cursor: pointer;
}

.footer img {
    width: 14px;
}

.fade-in {
    animation: fade-in 2s ease-out forwards;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-out {
    animation: fade-out 2s ease-in forwards;
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.work-wrap {
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin-top: 4.5em;
    margin-bottom: 2em;
}

.work-year {
    display: flex;
    flex-direction: row;
}

.work-year-box {
    width: 7em;
    min-width: 7em;
    font-size: 10pt;
}

.work-year-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3em;
}

.work-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 163px;
    background-color: #FAFAFA;
    cursor: pointer;
}

.work-thumbnail img {
    max-height: 163px;  /* for cases when original img height close to img width (see utils.php) */
    max-width: 190px;
    pointer-events: none;   /* dismiss click (and any other) events triggered on img (see main.js) */
}

.page-top-btn {
    position: absolute;
    bottom: -.25em;
    right: 0;
    text-decoration: navajowhite;
    color: black;
    opacity: .6;
    font-size: 2.5em;
}

/*
    Slider themes
*/

.slider-modal {
    position: relative;
    background-color: #FFF;
    display: none;
}

.slider-display {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.slider-year{
    position: absolute;
    top: 0;
    left: -1.25em;
    font-size: 10pt;
    /* max-width: 4.1em; */
    z-index: 10;
}

.slider-left-btn, .slider-right-btn {
    opacity: .9;
    border-radius: 50%;
    padding: 0.25em;
    cursor: pointer;
    user-select: none;
}
.slider-left-btn:hover, .slider-right-btn:hover {
    background-color: #cdcdcd;
    transition: .25s ease-out;
}

.slider-right-btn {
    text-align: right;
}
.slider-btn-disabled {
    opacity: .6;
    cursor: default!important;
}

.slider-display-frame {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    position: relative;
    height: calc(100vh - 13em); /* avoids flickering when moving slides */
}

.slider-display-frame img {
    min-width: 100%;
    max-height: calc(100vh - 13em);  /* force aspect-ratio */
}

.monkey-loader {
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}
.monkey-loader-show {
    display: block;
}

.slider-title {
    text-align: center;
    padding-top: 1em;
    font-size: 10pt;
}

.slider-nav {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: .5em;
}
.slider-thumbs {
    display: flex;
    flex-direction: row;
    gap: 1px;
    align-items: center;
    position: relative;
    width: 100%;
}
.slider-thumb-btn {
    position:absolute;
    border-radius: 50%;
    padding: 0.25em;
    cursor: pointer;
    background-color: #cdcdcd;
    opacity: .7;
    display: none;
    user-select: none;
}
.slider-thumb-btn:hover {
    opacity: 1;
    transition: .25s ease-in;
}
.thumb-btn-right {
    text-align: right;
    right: 0;
}
.thumb-btn-left {
    left: 0;
    z-index: 100;
}
.slider-thumbs img {
    max-height: 100px;
    cursor: pointer;
    opacity: .7;
}
.slider-thumbs img:hover, .slider-thumbs img.slider-thumb-selected {
    opacity: 1;
    transition: .25s ease-out;
}

.hide-scrollbar {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    overflow: scroll;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.bounce-loader {
    width: auto;
    height: 8em;
    display: none;
    align-content: space-between;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}
.bouncer {
    width: 18px;
    height: 18px;
    background-color: yellow;
    border-radius: 50%;
    margin: 8px;
    animation: bounce .6s cubic-bezier(.68,.01,.63,.99) alternate infinite;
}
.bounce-loader  div:nth-child(2) {
    animation-delay: .2s;
}
.bounce-loader  div:nth-child(3) {
    animation-delay: .4s;
}
.bounce-loader  div:nth-child(4) {
    animation-delay: .6s;
}

@keyframes bounce {
    0% {
        transform: rotateX(0) translateY(0);
    }
    100% {
        transform: rotateX(45deg) translateY(100px);
    }
}

.modal-open {
    display: block!important;
    animation: scale-in .2s cubic-bezier(.2,0,.13,1.5);
}
@keyframes scale-in {
    0% {
        zoom: .1;
    }
    80% {
        zoom: 1.2;
    }
    100% {
        zoom: 1;
    }
}

.modal-close-btn {
    position: absolute;
    right: .125em;
    top: .125em;
}

.round-btn {
    color: black;
    opacity: .8;
    cursor: pointer;
}
.round-btn:hover {
    opacity: 1;
}

.legal-bold {
    /* font-weight: bold; */
    font-size: 14px;
}

.legal-text {
    /* font-size: 14px; */
    padding-top: .5em;
}

.contact-headline {
    font-size: 14px;
}

.contact-text {
    font-size: 14px;
    padding-top: 1em;
}

/*      'about' stuff       */

.about-menu {
    margin-left: 6em;
}

.about-list {
    list-style: none;
    display: block;
    margin: 0;
    margin-top: 5em;
    padding: 0;
    font-size: 12pt;
}

.about-title {
    max-width: 60%;
    opacity: .9;
}

.about-img-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: .5em;
}

.about-img-wrapper img {
    max-width: calc(100vw - 10em);
}