* {
    
    margin: 0;
    padding: 0;
    font-family: "TruenoRegular";
    
}

body, html {
  height: 100%;
    
}

html.menu {
    
    overflow-y: hidden !important;
    
}

#background {
    
    width: 100%;
    height: 100%;
    background-image: url(../img/background.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    z-index: -1;
    
}

nav {
    
    background-color: transparent;
    position: fixed;
    width: 100%;
    z-index: 5;
    
}

nav.scroll {
    
    background-color: white;
    transition-duration: 0.4s;
    transition-delay: 0.1s;
    box-shadow: 0 0 15px 0.5px black;
    
} 

nav.scroll ul li {
    
    color: #121420;
    transition-duration: 0.7s;
    transition-delay: 0.1s;
    cursor: pointer;
    
    
}

#logo {
    
    background-color: white;
    margin: 0.7em;
    padding-right: 20px;
    height: 4em;
    
}

nav ul {
    
    float: right;
    width: 60em;
    margin-left: 1em;
    margin-right: 1em;
    position: absolute;
    bottom: 0;
    right: 0;
    
}

nav ul li {
    
    float: left;
    color: white;
    list-style: none;
    width: 10em;
    text-align: center;
    vertical-align: middle;
    height: 3em;
    color: #D5D5D5;
    cursor: pointer;
    border-bottom: 0.25em solid transparent;
    
}

nav ul li:hover {
    
    color: white;
    
}

nav.scroll ul li:hover {
    
    color: black;
    
}

nav.scroll ul li.active {
    
    color: black;
    
}

nav ul li.active {
    
    border-bottom: 0.25em solid #0EB1D2;
    color: white;
    
}

#home {
    
    height: 100%;
    
}

#home h1 {
    
    background-color: #2B82AA;
    border-radius: 100em;
    width: 25em;
    text-align: center;
    color: white;
    padding: 0.3em;
    font-weight: 300;
    left: calc(50% - 12.5em);
    top: 35%;
    position: absolute;
    font-size: 2.5em;
    box-shadow: 0 0 15px 1px rgba(0,0,0,0.5);
    
}

#home h2 {
    
    position: absolute;
    top: 50%;
    text-align: center;
    color: white;
    font-weight: 300;
    font-size: 1.3em;
    width: 70%;
    left: 15%;
    
}

#leistungen {
    
    padding-top: 4em;
    padding-bottom: 4em;
    background: linear-gradient(0deg, #2B82AA,#0EB1D2);
    width: 100%;
    height: 30em;
    box-shadow: 0 0 15px 1px rgba(0,0,0,0.5);
    
}

.wrapper {
    
    width: 100%;
    height: 10em;
    
}

.box_s {
    
    width: 15em;
    border-radius: 1em;
    border: 0.2em solid #FBFBFB;
    text-align: center;
    height: 6em;
    float: left;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    vertical-align: middle;
    position: relative;
    background-color: #FBFBFB;
    margin-right: 2em;
    
    
}

.box_s:hover {
    
    box-shadow: 0 0 7px 1px rgba(0,0,0,0.2);
    transition-duration: 0.2s;
    cursor: default;
    border-color: #053C5E;
    
}

.sidebar.white {
    
    border-top: 0.1em solid white;
    
}

.sidebar {
    
    width: 5em;
    border-top: 0.1em solid #0EB1D2;
    height: 100%;
    float: left;
    position: relative;
    margin-top: 1.2em;
    margin-right: 2em;
    
}

.impress_text {
    
    margin-left: 6.7em;
    
}

#portfolio, #kontakt, #impress, #galerie {
    
    height: 35em;
    padding-top: 4em;
    padding-bottom: 4em;
    background-color: white;
    margin-top: 10em;
    padding-right: 7em;
    box-shadow: 0 0 15px 1px rgba(0,0,0,0.5);
    
}

#portfolio > h1 {
    
    margin-bottom: 2em;
    
}

.box {
    
    width: 40em;
    float: left;
    padding: 2em;
    border-radius: 1em;
    height: 20em;
    border: 0.2em solid #FBFBFB;
    
}

.box h1{
    
    text-align: center;
    margin-bottom: 1em;
    
}

.box:hover {
    
    box-shadow: 0 0 7px 1px rgba(0,0,0,0.2);
    transition-duration: 0.2s;
    cursor: default;
    background-color: #FBFBFB;
    border-color: #0EB1D2;
    
}

.box:hover h1 {
    
    color: 
    
}

.box:last-of-type {
    
    float: right;
    
}

#kontakt {
    
    height: 10em;
    
}

#impress {
    
    height: auto;
    
}

footer {
    
    margin-top: 5em;
    padding: 2em;
    background: linear-gradient(90deg, #121420, #053C5E);
    width: calc(100% - 4em);
    color: white;
    font-weight: 300;
    
}

tr td:first-of-type {
    
    padding-right: 2em;
    color: #2B82AA;
    
}

.last td {
    
    padding-bottom: 1em;
    
}



#nav_bt {
    
    right: 0.7em;
    top: 0.7em;
    position: absolute;
    cursor: pointer;
    display: none;
    
}

nav.scroll #nav_bt {
    
    stroke: #0EB1D2;
    
}

#nav_small {
    
    display: none;
    
}

.noselect {
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.gallery_img {
    max-width: 15em;
    max-height: 15em;
}

#galerie h1 {
    
    margin-bottom: 1em;
    
}

#cookie_msg {
    
    position: fixed;
    bottom: 0;
    background-color: white;
    box-shadow: 0 0 15px 0.5px rgba(0,0,0,0.2);
    padding: 1em;
    text-align: center;
    
}

#cookie_msg button {
    
    margin-top: 1em;
    border: 0.15em solid #0EB1D2;
    background-color: transparent;
    outline-width: 0;
    padding: 0.5em;
    
}

#cookie_msg button:hover {
    
    cursor: pointer;
    background-color: #0EB1D2;
    color: white;
    
}

#kontakt h1 {
    
    margin-bottom: 1em;
    
}


@media screen and (max-height: 1000px), screen and (max-width: 1800px) {

}

@media screen and (max-width: 1650px) {

    .box {
        
        width: 25em;
        font-size: 0.9em;
        height: 23em;
        
    }
    
}

@media screen and (max-width: 1200px) {

    #logo {
        
        height: 2.5em;
        padding-right: 0.6em;
        margin: 0.7em;
        
    }
    
    #nav_bt {
        
        display: block;
        
    }
    
    nav ul {
        
        display: none;
        
    }
    
    #nav_small {
        
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: white;
        z-index: 4;
        border-top: 1px solid lightgrey;
        bottom: 0;
        
    }
    
    #nav_small li:first-of-type {
        
        margin-top: 5.5em;
        
    }
    
     #nav_small li:last-of-type {
        
        border-bottom: 1px solid #D5D5D5;
        
    }
    
    #nav_small li {
        
        border-top: 1px solid #D5D5D5;
        width: 100%;
        text-align: center;
        padding-top: 1em;
        padding-bottom: 1em;
        cursor: pointer;
        
    }
    
    #home h1 {
        
        width: 60%;
        left: 10%;
        padding-left: 10%;
        padding-right: 10%;
        border-radius: 1em;
        top: 20%;
        font-size: 1.5em;
        
    }
    
    #home h2 {
        
        top: 50%;
        font-size: 0.9em;
        
    }
    
    .sidebar {
        
        width: 0.7em;
        margin-right: 1em;
        position: absolute;
        left: 0;
        
    }
    
    .side {
        
        height: auto !important;
        padding-left: 1em;
        padding-top: 1em !important;
        padding-right: 1em !important;
        width: calc(100% - 2em) !important;
        margin-top: 5em !important;
        
    }
    
    .side h1 {
        
        font-size: 1.7em;
        
    }
    
    .box_s {
        
        width: calc(100% - 2.4em);
        margin-bottom: 2em;
        height: auto;
        padding-bottom: 1em;
        
    }
    
    #home {
        
        height: 100% !important;
        margin-top: 0em !important;
        
    }
    
    #portfolio {
        
        height: 47em !important;
        
    }
    
    #portfolio h1 {
        
        margin-bottom: 1em;
        
    }
    
    .box {
        
        position: relative;
        float: left !important;
        margin-bottom: 1em;
        margin-top: 0;
        width: calc(100% - 4.4em);
        height: auto;
        font-size: 0.8em;
        
    }
    
    .box h1 {
        
        margin-bottom: 0.5em !important;
        font-size: 1.5em;
         
    }
    
    footer {
        padding: 1em;
        width: calc(100% - 2em);
        
    }
    
    .gallery_img {
        
        max-width: calc(50% - 0.2em);
        max-height: 15em;
        
    }
    
    .impress_text {
        
        margin-left: 0.3em;
        
    }
    
}

@media screen and (max-width: 550px) {

}


@media screen and (max-height: 700px) and (min-width: 550px) {

}

@media screen and (max-height: 800px) and (min-width: 550px) {

}

@media screen and (max-width: 1200px) {

}

@media screen and (max-height: 600px) and (min-width: 550px) {
   
    
    
}

@media screen and (max-height: 450px) {
    
}

@media screen and (max-height: 1000px) {
  
}

@media screen and (max-height: 900px) {
   
}