/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

#loading-screen {
    position: fixed; /* Or 'absolute' if 'fixed' causes issues */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: white; /* Or any color that suits your design */
    z-index: 9999; /* Ensure it's above other content */
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loading-screen img {
    animation: spin 2s linear infinite;
}


body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato", sans-serif;
    caret-color: transparent !important;
}


/* width */

::-webkit-scrollbar {
    width: 0px;
    background-color: transparent;
}


/* Track */

 ::-webkit-scrollbar-track {
    background-color: transparent;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
    background: rgb(206, 206, 206);
    border-radius: 5px;
    background-clip: content-box;

}


/* Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

body,
html {
    color: #777;
    line-height: 1.8;
    scroll-behavior: smooth;
    width: 100% !important;
    background: white;
    
}

body {
    overflow: overlay !important;
}

#wrapper {
    margin-left: 20vw !important;
    margin-right: 20vw !important;
}



.w3-wide {
    letter-spacing: 10px;
}

.w3-hover-opacity {
    cursor: pointer;
}

#headerimg {
    min-height: 40vh;
    background-size: cover;
    background-position: center;
    transition: 1.5s ease-in;
}

nav {
    z-index: 6;
    overflow: hidden;
    position: sticky !important;
    top: 0 !important;
    width: 100%;
    -webkit-box-shadow: 0px 10px 22px -20px rgba(0, 0, 0, 0.31);
    box-shadow: 0px 10px 22px -20px rgba(0, 0, 0, 0.31);
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

#myNavbar a {
    text-decoration: none;
    padding: 20px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

#myNavbar a:hover {
    color: black;
}

#myNavbar img {
    max-height: 25px;
    max-width: 160px;
}

#navbar {
    background: rgba(255, 255, 255, 0.104) !important;
}

footer {
    margin-top: 10vw;
    padding: 5vh 0vw 5vh;
    position: relative;
    background-color: white;
    z-index: 1;
    text-align: right;
    -webkit-box-shadow: 0px -10px 22px -9px rgba(0, 0, 0, 0.18);
    box-shadow: 0px -20px 10px -25px rgba(0, 0, 0, 0.18);
}

footer p {
    font-size: 50%;
    margin: 0;
    color: black;
}

footer a {
    text-decoration: none;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    color: rgb(158, 158, 158);
}

footer a:hover {
    color: black;
}

#headerid {
    max-height: 40vh;
    padding: 0 !important;
    -webkit-filter: blur(.2px);
    filter: blur(.2px);
    background-size: cover;
    background-repeat: no-repeat;
    position: static;
    overflow: hidden;
}

#myVideo {
    position: relative;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -20;
}

.videowrapper {
    margin-top: 10px;
}

.videowrapper .w3-col .p-top {
    padding-top: 100%;
    font-weight: bold;
}

.videowrapper .w3-col p {
    padding-left: 5%;

}


.wrapper {
    background-color: white;
    position: relative;
    z-index: 0;
    padding: 1vh 0;
}

.comingSoon {
    padding-top: 10vh;
    min-height: 30vh !important;
}

.comingSoon h1 {
    color: black;
    font-size: 10vw;
    line-height: 120%;
}

.w3-third {
    width: 100%;
}



.iframeContainer {
    width: 100%;
    position: relative;
    z-index: 1;
}

.iframe16by9 {
    caret-color: transparent;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.iframe43by18 {
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    caret-color: transparent;
}

.iframeResponsive {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
    padding: 0 0px;
}

.currentSite {
    color: black;
    font-weight: bold;
}

.padding-right-24 {
    padding-left: 40px !important;
}

.padding-left-24 {
    padding-right: 40px !important;
}

@media screen and (max-width: 600px) {
    #navbar .w3-quarter {
        display: none;
    }
    .padding-right-24 {
        padding-left: 0px !important;
    }
    .padding-left-24 {
        padding-right: 0px !important;
    }
    .iframeResponsive {
        padding: 2%;
    }

    .videowrapper .w3-col .p-top {
        padding: 0;
    
    }

    .videowrapper {
        text-align: center;

    }

    .videowrapper .w3-col p {
        padding-left: 0;
    
    }
}

h2 {
    font-size: 90%;
    font-weight: bolder;
}

.logos {
    padding-top: 6%;
}

.logos img {
    opacity: 1;
    
}

.logos img {
    max-width: 130px;
    margin: auto !important;
}

.logos .w3-col,
.m3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 160px;
}

.whatIDo {
    padding-top: 6%;
}

.portfoliogrid img {
    padding: 5px;
}

.linklist {
    padding-top: 8%;
}

.linklist a {
    padding: 15px !important;
    background: rgb(38, 38, 38);
    border-radius: 20px;
    text-decoration: none;
    color: white;
    caret-color: transparent;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.aboutme {
    padding-top: 3vh;
}

.linklist a:hover {
    background: rgb(90, 90, 90);
}

.linklist p {
    padding: 15px !important;
}

.imgbig {
    max-height: 60vh;
    caret-color: transparent;
}

::-moz-selection {
    /* Code for Firefox */
    color: rgb(255, 255, 255);
    background: rgb(0, 0, 0);
}

 ::selection {
    color: rgb(255, 255, 255);
    background: rgb(0, 0, 0);
}


.overlaysli {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(255, 255, 255); /* Dunkler machen für bessere Sichtbarkeit */
    z-index: 999; /* Hoch genug, um über den meisten Inhalten zu sein */
}


.sm-slider.in-focus {
    position: fixed;
    top: 50%; /* Startet in der Mitte des Bildschirms vertikal */
    left: 0; /* Streckt sich von ganz links... */
    right: 0; /* ...bis ganz rechts */
    z-index: 9999; /* Stelle sicher, dass der Slider im Vordergrund ist */
    height: 50vh !important; /* Erlaubt dem Slider, seine Höhe basierend auf dem Inhalt anzupassen */
    transform: translateY(-50%); /* Verschiebt den Slider nach oben um die Hälfte seiner eigenen Höhe, um ihn zentriert zu machen */
    max-width: 100%; /* Stellt sicher, dass das Bild vollständig in der Breite angezeigt wird */
    max-height: 90vh; /* Erhöht die maximale Höhe des Bildes, um es größer zu machen */
    object-fit: contain; /* Stellt sicher, dass das gesamte Bild sichtbar ist, passt das Bild innerhalb der gegebenen Grenzen an, ohne das Seitenverhältnis zu verzerren */
}


.sm-slider li span.in-focus {
    height: 50vh !important;
}