@font-face {
    font-family: MontserratLight;
    src: url(fonts/Montserrat-Light.ttf);
}

html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
}
* {
    box-sizing: border-box;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

#logo {
    position: fixed;
    margin: 3vw;
    z-index: 2;
}
#logo-image {
    width: 13vw;
    height: 5vw;
    margin: 1vw;
    background-image: url(img/logo.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#contacts-button {
    position: absolute;
    right: 3vw;
    top: 3vw;
    color: #717171;
    font-family: Segoe UI Light;
    letter-spacing: 5px;
    font-size: 2vh;
    line-height: 10vh;
}
#contacts-button:hover {
    cursor: pointer;
}

.section {
    float: left;
    height: 100vh;
    width: 100%;
}
#bg-image {
    position: relative;
    background-image: url(img/bg.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    width: 65%;
    height: 100vh;
    opacity: 0.8;
}

#title-top {
    position: absolute;
    top: 70vh;
    left: 10%;
    color: white;
    font-size: 2.2vh;
    line-height: 4.5vh;
    font-family: MontserratLight;
    padding: 0.75%;
    backdrop-filter: blur(5px) saturate(50%);
    border: 1px solid;
    text-shadow: 2px 2px black;
    text-transform: uppercase; 
    letter-spacing: 1px;}

#scroll-down {
    position: absolute;
    width: 2.5vw;
    right: 8%;
    top: 70vh;
}
#scroll-down:hover {
    top: 72vh;
}

.slideshow {
    list-style-type: none;
}
.slideshow, .slideshow:after {
    position: absolute;
    width: 72%;
    height: 76vh;
    left: 8%;
    top: 12vh;
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.slideshow li span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 60s linear infinite 0s; 
}
.slideshow li:nth-child(1) span {background-image: url(img/slide01.jpg);}
.slideshow li:nth-child(2) span {background-image: url(img/slide02.jpg); animation-delay: 6s;}
.slideshow li:nth-child(3) span {background-image: url(img/slide03.jpg); animation-delay: 12s;}
.slideshow li:nth-child(4) span {background-image: url(img/slide04.jpg); animation-delay: 18s;}
.slideshow li:nth-child(5) span {background-image: url(img/slide05.jpg); animation-delay: 24s;}
.slideshow li:nth-child(6) span {background-image: url(img/slide06.jpg); animation-delay: 30s;}
.slideshow li:nth-child(7) span {background-image: url(img/slide07.jpg); animation-delay: 36s;}
.slideshow li:nth-child(8) span {background-image: url(img/slide08.jpg); animation-delay: 42s;}
.slideshow li:nth-child(9) span {background-image: url(img/slide09.jpg); animation-delay: 48s;}
.slideshow li:nth-child(10) span {background-image: url(img/slide10.jpg); animation-delay: 54s;}

@keyframes imageAnimation {
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

.no-cssanimations .cb-slideshow li span {
    opacity: 1;
}

#services {
    position: relative;
    font-family: Segoe UI Light;
    color: black;
    padding: 10vh 10vw;
    border-top: 2px solid #008b44;
    background-color: white;
    float: left;
}
#services-title {
    text-align: center;
    font-size: 4vh;
    letter-spacing: 7px;
    margin: 2vh 0 5vh;
    color: #008b44;
    font-weight: 900;
}
.service {
    padding: 4vh 1vw;
    width: 100%;
    float: left;
    font-size: 4vh;
    line-height: 6vh;
    border-bottom: 1px solid lightgrey;
    letter-spacing: 1px;
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    -ms-transition: color 0.5s;
    -o-transition: color 0.5s;
    transition: color 0.5s;
}
.service:hover {
    color: #008b44;
}
            
#bg {
    position: absolute;
    background-color: #0000000a;
    width: 110%;
    height: 100%;
    top: 60%;
    transform: rotateZ(-10deg);
}
#contacts {
    display: none;
    position: fixed;
    top: 2vw;
    left: 2vw;
    right: 2vw;
    bottom: 2vw;
    background-color: white;
    font-family: MontserratLight;
}
#contact-us {
    font-size: 2em;
}
#center {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;

}
#mail {
    font-size: 4.2em;
    font-weight: 100;
    letter-spacing: 4px;
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    -ms-transition: color 0.5s;
    -o-transition: color 0.5s;
    transition: color 0.5s;
}
#mail:hover {
    color: #008b44;
}
#contacts-bottom {
    position: absolute;
    bottom: 5vh;
    width: 100%;
}
#separation {
    width: 20%;
    margin: 3vh auto;
}
#phone {
    float: left;
    font-size: 2.2em;
    line-height: 50px;
}
#phone:hover {
    color: #008b44;
}
#address {
    float: left;
    width: 45%;
    font-size: 1.2em;
    line-height: 25px;
    font-style: normal;
}
#map {
    width: 6%;
    margin: 0 2% 0 42%;
    float: left;
    text-align: center;
    border-right: 1px solid #008b44;
}
#icon {
    width: 30px;
    text-align: center;
}
#close {
    position: absolute;
    right: 3vw;
    top: 3vw;
    font-size: 60px;
    line-height: 24px;
    font-weight: 500;
}
#close:hover {
    cursor: pointer;
}
            
#footer {
    position: fixed;
    font-family: MontserratLight;
    color: #717171;
    font-size: 1.5vh;
    bottom: 2vw;
    right: 2vw;
}
            
@media only screen and (max-width: 1200px) {
    .service {
        padding: 2vh 1vw;
        font-size: 2vh;
        line-height: 3vh;
    }
}
@media only screen and (max-width: 1000px) {
    #title-top {
        top: 50vh;
        right: 30%;
    }
}
@media screen and (max-width: 1000px) and (max-height: 480px) {
    #title-top {
        top: 60vh;
        right: unset;
        font-size: 3.8vh;
        line-height: 9vh;
    }
    #contacts-button {
        font-size: 3.5vh;
    }
    #services-title {
        font-size: 6vh;
    }
    .service {
        padding: 4vh 1vw;
        font-size: 4vh;
        line-height: 6vh;
    }
    #contact-us {
        font-size: 1.5em;
    }
    #map {
        width: 10%;
        margin: 0 2% 0 38%;
        float: left;
        text-align: center;
        border-right: 1px solid #008b44;
    }
    #address {
        float: left;
        width: 45%;
        font-size: 1.2em;
        line-height: 25px;
        font-style: normal;
    }
    #mail {
        font-size: 2.2em;
    }
    #phone {
        font-size: 1.4em;
    }
    #address {
        font-size: 0.7em
    }
    #footer {
        font-size: 2.5vh;
    }
}
@media screen and (max-height: 1000px) and (max-width: 480px) {
    #logo-image {
        width: 25vw;
        height: 10vw;
    }
    #title-top {
        top: 60vh;
        right: 30%;
        font-size: 2vh;
        line-height: 4.5vh;
    }
    #contacts-button {
        font-size: 2vh;
        line-height: 5vh;
    }
    #contact-us {
        font-size: 1.5em;
    }
    .service {
        padding: 2vh 1vw;
        font-size: 2.5vh;
        line-height: 4.5vh;
    }
    #mail {
        font-size: 1.6em;
        line-height: 1.4em;
    }
    #phone {
        font-size: 1.2em;
    }
    #map {
        width: 100%;
        margin: 2vw auto;
        border-right: unset;
    }
    #address {
        font-size: 0.8em;
        text-align: center;
        width: 100%;
    }
    #contacts-bottom {
        width: calc(100% - 2vw);
    }
    #footer {
        font-size: 1.8vh;
    }
}