html {
    font-size: 4vw;
}


body {
    background-image: url("/img/floral.png");
    color: white;
    font-family: Verdana, Geneva, sans-serif;
    margin: 0;
    text-align: center;
}

#logo {
    margin: 0;
}

#logo a {
    display: inline-block;
    width: 90%;
    margin-top: 5vmin;
    margin-bottom: 3vmin;
}

#logo, #container {
    width: 100%;
    display: inline-block;
    background-color: white
}

.wide_promo {
    width: 100%;
    height: 80vw;
    background:  linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("/img/P1450789.JPG"); background-size: cover; background-position: center center;
    color: white;
    text-align: center;
    border-top: 1.2vmin solid black;
    border-bottom: 1.2vmin solid black;
}

.text {
    display: inline-block;
}

.promo {
    width: 100%;
    height: 80vw;
}

.low {
    height: 40vw;
}


#soundi { background:  linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("/img/P1450567 (Medium).JPG"); background-size: cover; background-position: center center; }
#selko { background:  linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("/img/P1450666.JPG"); background-size: cover; background-position: center center; }
#treeni { background:  linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("/img/P1450703.JPG"); background-size: cover; background-position: center center; }
#rumpu { background:  linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("/img/P1450773.JPG"); background-size: cover; background-position: center center; }
#yhteys { background:  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("/img/P1450575.JPG"); background-size: cover; background-position: center center; }
#kiitos { background:  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("/img/P1450678.JPG"); background-size: cover; background-position: center center; }


.promo h2 {
    width: 100%;
    color: white;
    padding: 9% 0%;
    margin: 0;
    background-size: cover;
    background-position: center center;
    background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));
}



h2 {
    text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
}

.promo p {
    margin: 0;
    padding: 2vmin;
}

.small_promo {
    position: relative;
    width: 50%;
}

.small_promo:after {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    box-shadow: inset 0 0 6em black;
}

.promo, .small_promo {
    float: left;
}


.map {
    position: relative;
}

.map a::after {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0, #fff 100%);
    height: 25%;
    width: 100%;
}


.news {
    color: black;
}

.news h2 {
    color: black;
    background-image: none;
    text-shadow: none;
}


.button {
    display: inline-block;
    text-decoration: none;
    background-color: #C70025;
    color: white;
    padding: 2vmin;
    border: 0.2vmin solid black;
    margin: 2vmin;
}

img {
    width: 100%;
}

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


form {
    background-color: white;
    color: black;
    text-align: left;
}

.error {
    display: block;
    margin: 2vmin;
    background-color: white;
    color: #C70025;
}


/* Form elements */

label {
  margin-top: 3vmin;
}

fieldset {
  margin-bottom: 3vmin;
  border-style: none;
}

fieldset legend {
    font-weight: bold;
    color: #C70025;
}

label, textarea {
  display: block;
}

input[type='text'], textarea {
  padding: 1vmin;
  width: 95%;
  max-width: 90vmin;
}

input[type='text'] {
  outline: 0;
  border-width: 0 0 2px;
  border-color: black;
}
input:focus {
  border-color: #C70025;
}


input[type='checkbox'] {
  margin: 1em;
  -ms-transform: scale(3); /* IE */
  -moz-transform: scale(3); /* FF */
  -webkit-transform: scale(3); /* Safari and Chrome */
  -o-transform: scale(3); /* Opera */
}


input[type='submit'] {
    background: none;
    border: none;
    color: white;
}


.required {
  color: #C70025;
}


div.form {
    display: inline-block;
    width: 49%;
    vertical-align: top;
}

input[type='text'], input[type='submit'], textarea {
    font-size: 1em;
}




/* Landscape mode */
@media screen and (min-aspect-ratio: 13/9) {
    
    html {
        font-size: 12pt;
    }
    
    
    body {
        background-image: url("/img/floral.png");
    }

    
    #logo, #container {
        max-width: 1000px;
    }

    #box {
        display: inline-block;
        max-width: 1000px;
        border-width: 0px 1px 1px 1px;
        border-style: solid;
        border-color: black;


        -webkit-box-shadow: 0 0 50vmin 10vmin rgba(199, 0, 37, 0.25); 
        -moz-box-shadow: 0 0 50vmin 10vmin rgba(199, 0, 37, 0.25); 
        box-shadow: 0 0 50vmin 10vmin rgba(199, 0, 37, 0.25);
        
/*
        -webkit-box-shadow: 0 0 50vmin 10vmin rgba(255, 255, 255, 0.2); 
        -moz-box-shadow: 0 0 50vmin 10vmin rgba(255, 255, 255, 0.2); 
        box-shadow: 0 0 50vmin 10vmin rgba(255, 255, 255, 0.2);
*/
    }

    .text {
        width: 65%;
    }
    .wide_promo {
        height: auto;
        max-width: 1000px;
        display: inline-block;
        background:  linear-gradient(rgba(102,0,0,0.6), rgba(102,0,0,0.6)), url("/img/P1450703 (Large).JPG"); background-size: cover; background-position: center center;
 /*       background:  linear-gradient(rgba(95,0,130,0.25), rgba(95,0,130,0.25)), url("/img/P1450703 (Large).JPG"); background-size: cover; background-position: center center; */
        font-size: 1.2em;
    }
    .promo {
        width: 49%;
        margin: 0.5%;
        max-height: 350px;
    }
    
    .map {
        border: 0px solid green;
        height: 0; padding-bottom: 36.75%;
        overflow: hidden;
    }
    
    
    .small_promo {
        width: 24%;
        margin: 0.5%;
    }
    .bodytext {
        height: auto;
        width: 100%;
        max-width: 1000px;
        display: inline-block;
        background-color: black;
    }
    
    #treeni { background:  linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("/img/P1450789.JPG"); background-size: cover; background-position: center center; }
    
    form {
        display: inline-block;
        width: 60%;
    }
    
    input[type='checkbox'] {
        margin: 1em;
        -ms-transform: scale(2); /* IE */
        -moz-transform: scale(2); /* FF */
        -webkit-transform: scale(2); /* Safari and Chrome */
        -o-transform: scale(2); /* Opera */
    }

}