html {
    height:100%;
    scroll-behavior: smooth;
}

body {
    font-family: Trebuchet MS, sans-serif;
    width:100%;
    height:100%;
    margin: 0px;
    padding:0px;
}

nav {
    width: 100%;
    overflow: auto;
    position:fixed;
    background-color:#F9F9F9;
    z-index: 1;
    height:8em;
}

.logo {
    float:left;
    width: 9em;
    padding-left:2em;
    padding-top:2em;
}

.logo img {
    max-width:100%;
}

#links {
    display: inline-block;
    width:65%;
    height:100%;
    transition:all 0.1s linear;
}

#links ul {
    margin: auto;
    list-style: none;
    display: flex;
    height:100%;
    justify-content: space-between;
    align-items: center;
    align-content:space-between;
    list-style: none;
}

#links li {
    display:inline-block;
    width: 24%;
    text-align: center;
    line-height: 100%;
}

#links a {
    color:#000000;
}

#links li a:hover {
    text-decoration: none;
}

.navbar a {
    color:#000000;
}

.lang {
    height:100%;
    width:10em;
    float:right;
    text-align: center;
    border-left: 1px solid #77AF9C;
}

.lang p {
    text-decoration:underline;
    display:inline-block;
}

.lang p:hover {
    text-decoration: none;
}

#burger {
    display:none;
    float:right;
    padding-right:2em;
    padding-top:2em;
}

#burger div {
    width: 30px;
    height: 5px;
    margin:5px;
    background-color:#000000;
    transition: all 0.1s linear;
}

.whitespace {
    width: 100%;
    height:8em;
}

.banner {
    width:100%;
    min-height: 20em;
    height:84.5%;
}

.banner img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.banner h1 {
    max-width: 12em;
    position:relative;
    bottom: 7.5em;
    left: 5%;
}

.banner a {
    text-decoration:none;
}

.banner h2 {
    max-width: 5.5em;
    position:relative;
    bottom: 9em;
    left: 5%;
    color:#77AF9C;
    border: 4px solid #77AF9C;
    padding: 5px 20px;
}

.marker {
    display: block;
    position:relative;
    bottom:8em;
    visibility: hidden;
    height: 0px;
}

#who {
    width:100%;
    height:84.5%;
    min-height:20em;
}

.whotext {
    display:inline-block;
    float:left;
    width: 39.8%;
    padding-left:5%;
    padding-top: 4%;
    padding-right: 5%;    
}

.line {
    width: 150px;
    height:1px;
    background-color: #77AF9C;
    margin: 30px 0px;
}

.whotext p {
    color: #C4C4C4;
}

h3 {
    font-size:2em;
}

.whoimage {
    display: inline-block;
    width:49.8%;
    float:right;
    height:100%;
    min-height:36em;
}

.whoimage img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.license {
    font-size: 0.5em;
    color:#EBEBEB;
    position:relative;
    bottom: 3em;
}

.license a {
    color:#EBEBEB;
}

#values {
    width:100%;
    background-color: #EBEBEB;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    height:84.5%;
    min-height:30em;
}

.onevalue {
    margin-top: 8%;
}

.valuetext {
    width: 14em;
    display:inline-block;
    float:right;
}

strong {
    color: #77AF9C;
}

.icon {
    width:60px;
    display:inline-block;
    float:left;
    margin-top:30%;
}

#services {
    width:100%;
    height:84.5%;
    min-height:20em;
}

.servtext {
    display:inline-block;
    float:right;
    width: 39.8%;
    padding-left:5%;
    padding-top: 4%;
    padding-right: 5%;    
}

.servtext li {
    margin:1.5em 0em;
}

.line {
    width: 150px;
    height:1px;
    background-color: #77AF9C;
    margin: 30px 0px;
}

.servimage {
    display: inline-block;
    width:49.8%;
    float:left;
    height: 100%;
    min-height:36em;
}

.servimage img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    display: block;
}

#contact {
    width:100%;
    background-color: #EBEBEB;
    display:inline-block;
}

.adress {
    padding : 5em;
    display: inline-block;
    max-width: 12em;
}

.adress h5 {
    padding: 0.5em 0;
}

.adress p {
    padding: 0.1em 0;
}

.contactdetails {
    max-width: 12em;
    display: inline-block;
    padding: 5em;
}

.email {
    width: 12em;
}

.smallicon {
    width:1.2em;
    display:inline-block;
    float:left;
    padding-right: 0.5em;
}

@keyframes fade-in {
    from {opacity: 0; transform: scale(.7,.7)}
    to {opacity: 1;}
}

.fade-in-element {
  animation: fade-in 0.5s;
}

.hidden {
    opacity: 0;
}

@media only screen and (max-width: 1000px) {
    .links {
        width:45%;
    }
    
    .lang {
        width:10%;
    }
}

@media only screen and (max-width: 780px) {
    body {
        min-width:426px;
    }
    
    nav {
        overflow: visible;
    }
    
    #links {
        position:absolute;
        right:0px;
        top: 8em;
        height:auto;
        width: auto;
        background-color:#F9F9F9;
        transform: translateX(100%);
    }
    
    #links.active {
        transform:none;
    }
    
    #links ul{
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        align-content:flex-start;
        padding:0;

    }
    
    #links li {
        margin: 0;
        width:6em;
        padding: 1em 3em;
        border:1px solid #FFFFFF;
    }
    
    #links li:hover{
        background-color:#F3F3F3;
    }
    

    #burger {
        display: inline-block;
    }
    
    #burger.active .line1 {
        position:relative;
        transform: rotate(45deg);
        top:9px;
    }
    
    #burger.active .line2 {
        position: relative;
        transform: rotate(135deg);

    }
    
    #burger.active .line3 {
        display:none;
    }
    
    .whoimage {
        display:none;
    }
    .servimage {
        display:none;
    }
    
    #who {
        height:auto;
        text-align: center;
    }
    .whotext {
        float:none;
        width:80%;
    }
    #services {
        height:auto;
        text-align: center;
    }
    
    #services ul {
        text-align:left;
    }
    
    .servtext {
        float:none;
        width: 80%;
    }
    #values {
        height:auto;
    }
    .line {
        margin:auto;
    }
}