html,
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        background-color: #eff9fb;
        /*background-color: #e0f4f7;*/
        font-size: 1.5rem;
    }

    html {
        box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
        box-sizing: inherit;
    }

    .container-fluid {
        max-width: 1280px;
    }

    .navbar-brand {
        font-size: 1.6rem;
    }

    .navbar {
        padding-left: 2.0rem;
    }

    i {
        margin: 0 1.0rem 0 0;
    }

    a i {
        color: #000000;
    }

    strong {
        margin-right: 1rem;
    }

    .text-top {
        margin-top: 1rem;
    }

    .left {
        padding-left: 2rem;
    }

    footer a,
    footer i,
    footer span,
    footer p {
        font-size: 1.2rem;
        color: #000000;
    }

    p,
    h1,
    h2,
    h3,
    th,
    td {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    p,
    h1,
    h2,
    h3,
    form div.form-group,
    #content {
        color: #000000;
    }

    p.note {
        color: #000000;
    }

    form .form-control::-moz-placeholder {
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.5rem;
    }

    form .form-control:-ms-input-placeholder {
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.5rem;
    }

    form .form-control::-webkit-input-placeholder {
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.5rem;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"] {
        height: 4.0rem;
        font-size: 1.5rem;
    }

    input[type="submit"] {
        color: #EAEAEA;
    }

    textarea#form_message {
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.5rem;
    }

    a#koulu {
        overflow: visible;
        text-overflow: initial;
    }

    a.nav-link {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #my-navigation {
        /*background-color: #1F3A93;*/
        background-color: #0099b3;
        color: #FFFFFF;
        width: 18.0rem;
        height: auto;
        line-height: 2.0;
    }

    table {
        table-layout: fixed;
    }

    thead {
        background-color: #5E5E5E;
        color: #FFFFFF;
    }

    tr td {
        background-color: #BFBFCC;
        color: #000000;
        font-size: 1.2rem;
    }

    tr:hover td {
        color: #FFFFFF;
        border-top: 1px solid #22262e;
        border-bottom: 1px solid #22262e;
        background-color: #9797a1;
    }

    h1,
    h2 {
        letter-spacing: 0.1rem;
        margin: 0;
        font-family: "Quicksand", sans-serif;
        font-weight: 400;
        line-height: 1.5;
    }

    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 2.0rem;
    }

    p,
    li,
    footer,
    form,
    table,
    .Microdata,
    .btn-send {
        font-family: "Quicksand", sans-serif;
        font-weight: 400;
    }

    .Microdata {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .Microdata span,
    .Microdata a {
        display: block;
        margin: 0.6rem 0;
    }

    p span {
        margin-left: 2.0rem;
    }

    .carousel-inner img {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .bg-1 {
        width: 100%;
    }

    .sticky-social {
        left: 0;
        position: fixed;
        top: 12.5rem;
        z-index: 1;
    }

    .sticky-social a i {
        height: 3.0rem;
        width: 3.0rem;
        line-height: 3.0rem;
        color: #FFFFFF;
        text-align: center;
    }

    .logo {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        background-color: #FFFFFF;
    }

    .photo {
        width: 420px;
    }

    .photo img {
        display: block;
        margin: 0 auto;
    }

    .name {
        flex: 1;
    }

    .fa-twitter {
        background: #00aced;
    }

    .fa-facebook {
        background: #3b5998;
    }

    aside .fa-envelope {
        background: #118822;
    }

    .fa-bars {
        background: #992288;
    }

    .color-1 {
        background-color: #009BBA;
        color: #FFFFFF;
    }

    .color-2 {
        /*background-color: #cceef3;*/
        background-color: #e0f4f7;
        color: #ffffff;
    }

    .color-3 {
        /*background-color: #7fd5e3;*/
        background-color: #4cb9ce;
    }

    .padd-1 {
        padding: 1.0rem 0;
        margin: 0;
        width: 100%;
    }

    #map {
        width: 100%;
        height: 25rem;
        background-color: #CCCCCC;
    }

    a:link {
        color: #000000;
        text-decoration: none;
    }

    a:visited {
        color: #666666;
        text-decoration: none;
    }

    a:hover {
        color: #FF0000;
        text-decoration: none;
    }

    a:active {
        color: #EE0000;
        text-decoration: none;
    }

    a.blue:link {
        color: #0000EE;
        text-decoration: none;
    }

    a.blue:visited {
        color: #551A8B;
        text-decoration: none;
    }

    a.blue:hover {
        color: #FF0000;
        text-decoration: none;
    }

    a.blue:active {
        color: #EE0000;
        text-decoration: none;
    }

    a.white:link {
        color: #FFFFFF;
        text-decoration: none;
    }

    a.white:visited {
        color: #e5e5e5;
        text-decoration: none;
    }

    a.white:hover {
        color: #FF0000;
        text-decoration: none;
    }

    a.white:active {
        color: #EE0000;
        text-decoration: none;
    }

    ul.navbar-nav {
        display: flex;
        justify-content: space-evenly;
        flex-flow: row wrap;
        width: 100%;
    }

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

    ol {
        list-style-position: inside;
        margin: 0;
        padding: 0;
    }

    li span {
        position: relative;
        left: 1.0rem;
    }

    .nGY2 .toolbar .label .description {
        font-size: 1.5rem;
    }

    .nav-item:hover {
        background-color: #FFC936;
    }

    @media only screen and (max-width: 479px) {

        #rc-imageselect,
        .g-recaptcha {
            transform: scale(0.60);
            -webkit-transform: scale(0.60);
            transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
        }
    }

    @font-face {
        font-family: "Note-this";
        src: url("Note-this.ttf");
        /* TTF file for CSS3 browsers */
    }

    .note {
        font-family: 'Note-this';
        font-size: 1.6rem;
        letter-spacing: 0.2rem;
    }

    /*Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap
    Small devices (landscape phones, 576px and up)*/

    html {
        font-size: 0.625rem;
    }

    @media screen and (min-width: 20rem) {
        html {
            font-size: calc(0.625rem + 0.375 * ((100vw - 20rem) / 80));
        }
    }

    @media screen and (min-width: 100rem) {
        html {
            font-size: 1.0rem;
        }
    }

    h1.mod_scale_fluid {
        font-size: 1.5rem;
    }

    @media screen and (min-width: 20rem) {
        h1.mod_scale_fluid {
            font-size: calc(1.5rem + 0.7 * ((100vw - 20rem) / 80));
        }
    }

    @media screen and (min-width: 100rem) {
        h1.mod_scale_fluid {
            font-size: 2.2rem;
        }
    }

    h2.mod_scale_fluid {
        font-size: 1.3rem;
    }

    @media screen and (min-width: 20rem) {
        h2.mod_scale_fluid {
            font-size: calc(1.3rem + 0.7 * ((100vw - 20rem) / 80));
        }
    }

    @media screen and (min-width: 100rem) {
        h2.mod_scale_fluid {
            font-size: 2.0rem;
        }
    }