/* Desktop version */
@media only screen and (min-width: 900px) {

    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
    }

    img {
        pointer-events: none;
    }

    .container {
        width: 80%;
        margin: 0 auto;
    }

    header {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #fff;
        box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
    }

    header::after {
        content: "";
        display: table;
        clear: both;
    }

    #logo {
        float: left;
        width: 20%;
        height: auto;
        padding: 10px 0;
    }

    #menuButton {
        display: none;
    }

    nav {
        float: right;
    }

    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    nav li {
        display: inline-block;
        margin-left: 70px;
        padding-top: 35px;
        position: relative;
    }

    nav a {
        font-family: 'Oswald', sans-serif; 
        color: #444;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 20px;
    }

    nav a:hover {
        color: black;
    }

    nav a::before {
        content: "";
        display: block;
        height: 5px;
        width: 100%;
        background-color: red;
        position: absolute;
        top: 0;
        width: 0%;
        transition: all ease-in-out 150ms;
    }

    nav a:hover::before {
        width: 100%;
    }
    #imageContainer {
        position: relative;
    }
    #bigImage {
        padding: 0;
        margin-top: 65px;
        margin-bottom: 0;
        height: 50vh;
        width: 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover;
        object-fit: cover;
        pointer-events: none;
    }
    #imageGradient {
        /* position: absolute;
        height: 50vh;
        width: 100%;
        margin-top: 65px;
        background-image: linear-gradient(to left, rgba(255,255,255,0.5), rgba(255,255,255,0.01), rgba(255,255,255,0.5));
        z-index: 5; */
    }
    /* * {
        box-sizing: border-box
    } */

    /* Slideshow container */
    .slideshow-container {
        max-width: 1000px;
        position: relative;
        margin: auto;
    }

    /* Hide the images by default */
    .mySlides {
        display: none;
    }

    /* Next & previous buttons */
    .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

    /* Caption text */
    .text {
        color: #f2f2f2;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .active,
    .dot:hover {
        background-color: #717171;
    }

    /* Fading animation */
    .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
        from {
            opacity: .4
        }

        to {
            opacity: 1
        }
    }

    @keyframes fade {
        from {
            opacity: .4
        }

        to {
            opacity: 1
        }
    }

    #content {
        width: 95%;
        margin: auto;
        padding: 0;
        box-sizing: border-box;
        text-align: justify;
        font-family: 'Montserrat', sans-serif;
        line-height: 24px;
        clear: both;
    }

    #content h1,
    h2,
    h3 {
        font-family: 'Raleway', sans-serif;
        font-weight: lighter;
    }

    #content h1 {
        color: red;
    }

    .card {
        margin-bottom: 25px;
        padding: 5px 20px 15px 20px;
        box-sizing: border-box;
        border-radius: 4px;
        background-color: rgb(245, 245, 245);
        /* background: linear-gradient(white, rgba(255, 196, 113, 0.5)); */
        background: linear-gradient(white, rgb(244, 244, 244) 80%);
        /* background-color: rgb(102, 148, 255); */
        box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
        transition: all 0.5s ease;
    }

    #yhteystiedot h3,
    #asiakkaat h3 {
        margin: 0;
        padding: 0;
    }

    .yritys {
        margin: auto;
        padding-left: 10px;
    }

    #yhteystiedot ul,
    #asiakkaat ul {
        margin: 5px;
        padding: 0;
        list-style: none;
    }

    #yhteystiedot li,
    #asiakkaat li {
        margin: 0;
        margin-top: 7px;
        padding: 0;
        text-indent: 0;
        font-family: 'Montserrat', sans-serif;

    }

    .post,
    .address,
    .phone,
    .email {
        display: inline-block;
        width: 24%;
        padding: 10px 20px;
        box-sizing: border-box;
    }


    #yhteystiedot ul a,
    #asiakkaat ul a {
        color: #000000;
    }

    #yhteystiedot i,
    #asiakkaat i {
        font-size: 18px;
        vertical-align: middle;
    }

    #logos {
        /* padding-left: 30px;
        padding-right: 30px; */
        display: flex;
    }
    #logos a {
        display: inline-block;
        width: 13%;
        /* max-width: 20%; */
        margin: auto;
        padding: 2%;
        vertical-align: middle;
    }

    .logo {
        display: inline-block;
        width: 110%;
        margin: auto;
        padding-right: 10%;
        vertical-align: middle;
    }

    #footer {
        width: 100%;
        margin: 0;
        padding: 20px 15px;
        font-family: Oswald, sans-serif;
        box-sizing: border-box;
        position: relative;
        bottom: 0;
        color: white;
        background-color: rgb(24, 24, 24);
        box-shadow: -5px 0 5px rgba(0, 0, 0, 0.5);
        text-align: center;
    }

    #footer ul {
        margin: 5px auto 2px auto;
        padding: 0px;
    }

    #footer li {
        text-indent: none;
        list-style-type: none;
    }

}

/* Mobile version */
@media only screen and (max-width: 899px) {

    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: auto;
    }

    header {
        width: 100%;
        padding: 5px;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #fff;
        box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
        z-index: 3;
    }

    #logo {
        display: block;
        width: 75%;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }

    header h1 {
        font-family: 'Righteous', cursive;
        font-weight: lighter;
    }

    #menuButton {
        display: block;
        position: fixed;
        font-size: 2em;
        top: 22px;
        right: 22px;
        z-index: 3;
    }

    #menuToggler {
        display: none;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
    }

    #navButtons {
        display: none;
        transition: all ease-in 300ms;
        text-align: center;
        z-index: 3;
    }

    #navButtons ul {
        margin: 0;
        padding: 0;
        list-style: none;
        z-index: 3;
    }

    #navButtons li {
        display: block;
        margin: auto;
        font: 2.5em;
        padding: 9px;
        position: relative;
        z-index: 3;
    }

    #navButtons a {
        color: #444;
        font-family: 'Oswald', sans-serif; 
        text-decoration: none;
        text-transform: uppercase;
        font-size: 20px;
        z-index: 3;
    }

    header h1,
    header p {
        margin: 0;
        font-size: 100px;
        text-align: center;
        color: orange;
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
        filter: none;
        z-index: 2;
    }

    header h1 {
        font-size: 70px;
    }

    header p {
        color: white;
        font-size: 20px;
        font-style: italic;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    }

    #navBg {
        display: flex;
        width: 100%;
        height: 30px;
        margin-top: -30px;
        box-sizing: border-box;
        text-align: center;
        position: sticky;
        top: 0;
        left: 0;
        background-color: rgb(0, 0, 0);
        z-index: 1;
    }

    .navButton {
        height: 100%;
        width: 50%;
        padding: 3px;
        box-sizing: border-box;
        border-right: solid 1px rgb(55, 55, 55);
        border-left: solid 1px rgb(55, 55, 55);
        font-size: 21px;
        background: radial-gradient(#2b2b2b 50%, #000000);
        color: red;
        /* background-color: orange; */
        transition: all 0.1s ease-in;
        text-decoration: none;
    }

    #bigImage {
        height: 40vh;
        width: 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover;
        object-fit: cover;
    }

    #content {
        display: block;
        width: 90%;
        margin: auto;
        /* text-align: ; */
        font-family: 'Montserrat', sans-serif;

    }

    #content h1,
    h2,
    h3 {
        font-family: 'Raleway', sans-serif;
    }

    #contacts,
    #services {
        transition: all 0.5s ease;
    }

    #yhteystiedot h1,
    #palvelut h1,
    #asiakkaat h1 {
        text-align: center;
    }

    #footer {
        width: 100%;
        margin: 0;
        padding: 20px 15px;
        box-sizing: border-box;
        position: relative;
        bottom: 0;
        font-family: Oswald, sans-serif;
        color: white;
        background-color: rgb(24, 24, 24);
        box-shadow: -5px 0 5px rgba(0, 0, 0, 0.5);
        text-align: center;
    }

    #footer ul {
        margin: 5px auto 2px auto;
        padding: 0px;
    }

    #footer li {
        text-indent: none;
        list-style-type: none;
    }

    #yhteystiedot h3,
    #asiakkaat h3 {
        margin: 0;
        padding: 0;
    }

    .yritys {
        margin-bottom: 10px;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 5px;
        background-color: rgb(245, 245, 245);

    }

    .yritys h2 {
        margin: 3px 0 7px 0;
        color: red;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
    }

    #yhteystiedot ul {
        margin: 6px;
        padding: 0;
        list-style: none;
    }

    #yhteystiedot li {
        margin-top: 7px;
        padding: 0;
        text-indent: 0;
    }

    #yhteystiedot ul a {
        color: #000000;
    }

    #yhteystiedot i {
        font-size: 18px;
        vertical-align: middle;
    }

    #logos {
        padding-left: 30px;
        padding-right: 30px;
    }

    .logo {
        display: block;
        width: 80%;
        margin: auto;
        margin-bottom: 25px;
        vertical-align: middle;
    }
}