@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
    font-family: sans-serif;
}

body {
    background: url(/images/travelux2.jpg) no-repeat fixed;
    background-size: cover;
}

header {
    text-align: center;
}
header img {
    width: 70vw;
}

section h2 {
    font-size: 3.4vw;
    color: black;
    -webkit-text-stroke: 1.4px white;
    text-align: center;
    font-weight: bold;
}

.wrapper {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 4vw;
    margin: 4vw;
}

.jetit {
    background: url(/images/jetit3_copy.jpeg) -0 0 no-repeat;
    background-size: cover;
    width: 28vw;
    height: 28vw;
    display: block;
    cursor: pointer;
    border-radius: 2em;
}

.jetit:hover div{
    visibility: visible;
    backdrop-filter: grayscale(50%) blur(2px);
}

.hiddentext {
    position: relative;
    font-weight: bold;
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    -webkit-text-stroke: 1.4px black;
    visibility: hidden;
    text-align: center;
    font-size: 2.5vw;
    border-radius: 2rem;
    padding-top: 3em;
}

.veneet {
    background: url(/images/sunseeker_keilassa.jpg) -0 0 no-repeat;
    background-size: cover;
    width: 28vw;
    height: 28vw;
    display: block;
    cursor: pointer;
    border-radius: 2em;
}

.veneet:hover div{
    visibility: visible;
    backdrop-filter: grayscale(50%) blur(2px);
}

.juhlat {
    background: url(/images/limusiiniulko1.jpg) -0 0 no-repeat;
    background-size: cover;
    width: 28vw;
    height: 28vw;
    display: block;
    cursor: pointer;
    border-radius: 2em;
}

.juhlat:hover div{
    visibility: visible;
    backdrop-filter: grayscale(50%) blur(2px);
}

.paviljonki {
    background: url(/images/paviljonki.JPG) -0 0 no-repeat;
    background-size: cover;
    width: 28vw;
    height: 28vw;
    display: block;
    cursor: pointer;
    border-radius: 2em;
}

.paviljonki:hover div{
    visibility: visible;
    backdrop-filter: grayscale(50%) blur(2px);
}

.sauna {
    background: url(/images/sauna.JPG) -0 0 no-repeat;
    background-size: cover;
    width: 28vw;
    height: 28vw;
    display: block;
    cursor: pointer;
    border-radius: 2em;
}

.sauna:hover div{
    visibility: visible;
    backdrop-filter: grayscale(50%) blur(2px);
}

.yhteystiedot {
    background: url(/images/Logo_nettisivuille.png) -0 0 no-repeat;
    background-size: cover;
    width: 28vw;
    height: 28vw;
    display: block;
    cursor: pointer;
    border-radius: 2em;
}

.yhteystiedot:hover div{
    visibility: visible;
    backdrop-filter: grayscale(50%) blur(2px);
}

footer {
    background:rgba(20,20,20, 1);
    position: absolute;
    width: 100%;
    font-family: 'Quattrocento Sans';
    font-size: small;
    text-align: center;
    color: #cccccc;
    line-height: 180%;
    padding: 1.3em 0 1.3em 0;
}

.footer-box {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    align-items: center;
    grid-template-areas: ". in  mid last .";
    grid-gap:1em;
}

.footer-in {
    justify-items: end;
    grid-area: in;
}

.footer-mid {
    grid-area: mid;
}

.footer-end {
    grid-area: last;
    display:inline-block;
    white-space:nowrap;
}

@media (max-width: 1500px) {
    .wrapper {
        grid-template-columns: 1fr 1fr;
    }
    .jetit {
        width: 42vw;
        height: 42vw;
    }
    .veneet {
        width: 42vw;
        height: 42vw;
    }
    .juhlat {
        width: 42vw;
        height: 42vw;
    }
    .paviljonki {
        width: 42vw;
        height: 42vw;
    }
    .sauna {
        width: 42vw;
        height: 42vw;
    }
    .yhteystiedot {
        width: 42vw;
        height: 42vw;
    }
    .hiddentext {
        visibility: visible;
        font-size: 3.75vw;
        padding-top: 1em;
    }
    section h2 {
        font-size: 5.1vw;
    }
}

@media (max-width: 800px) {
    .wrapper {
        grid-template-columns: 1fr;
    }
    .jetit {
        width: 80vw;
        height: 80vw;
    }
    .veneet {
        width: 80vw;
        height: 80vw;
    }
    .juhlat {
        width: 80vw;
        height: 80vw;
    }
    .paviljonki {
        width: 80vw;
        height: 80vw;
    }
    .sauna {
        width: 80vw;
        height: 80vw;
    }
    .yhteystiedot {
        width: 80vw;
        height: 80vw;
    }
    .hiddentext {
        visibility: visible;
        font-size: 7.5vw;
        padding-top: 1em;
    }
    .footer-box {
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas:    "in in in in in"
                            " . mid . last . ";
    }
}