@charset "utf-8";

@-ms-viewport{
	width: device-width;
}

@-o-viewport{
    width: device-width;
}

@viewport{
    width: device-width;
}

::-moz-selection {
    background:#0000ff;
    text-shadow:none;
	color:#fff;
}

::selection {
	background:#0000ff;
	text-shadow:none;
	color:#fff;
}

*, *:before, *:after {
    outline:none;
    box-sizing:border-box;
}

:root {
    -webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust:none;
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, ul, li {
    display: block;
    padding:0;
    margin:0;
}

html {
    background:#fff;
}

html, body {
    padding:0;
	margin:0;
    width:100%;
    min-height:100.2vh;
    overflow-x:hidden;
}

body {
    position:relative;
}

.header {
    position:fixed;
    top:0;
    left:0;
    color:#0000ff;
    width:100%;
    z-index:2;
}

.menunappi, .mobiilimenu {
    display:none;
}

.ylavalikko {
    width:100%;
    font-weight:bold;
    font-size:calc( 8px + (22 - 8) * (100vw - 320px) / (1920 - 320) );
    background:#0000ff;
    padding:0;
    color:#fff;
}

.ylavalikko a:link, .ylavalikko a:visited {
    color:#fff;
}

.ylavalikko a:hover, .ylavalikko a:active, .ylavalikko a:focus  {
    color:#fff;
    text-decoration:underline;
}

.ylavalikko > ul {
    display:flex;
    justify-content:space-around;
    width:60vw;
    margin:0 auto;
}

.ylavalikko > ul > li {
    display:inline-block;
    padding:1vw 0;
    transition:0.15s ease-in-out;
}

.ylavalikko > ul > li.pieni {
    padding:.4vw 0;
}

h1 {
    width:100%;
    font-weight:900;
    font-size:calc( 18px + (45 - 18) * (100vw - 320px) / (1920 - 320) );
    padding:.5vw 0;
    margin:0;
    border-bottom:calc( 1px + (4 - 1) * (100vw - 320px) / (1920 - 320) ) solid #000;
    background:#fff;
    text-align:center;
    transition:0.15s ease-in-out;
}

h1.pieni {
    padding:0 0;
}

.otsikko {
    margin:11vw auto 3vw auto;
    width:80%;
    max-width:1100px;
    min-width:650px;
    font-size:calc( 10px + (21 - 10) * (100vw - 320px) / (1920 - 320) );
}

article {
    width:65%;
    max-width:900px;
    min-width:600px;
    margin:0 auto;
    font-size:calc( 10px + (20 - 10) * (100vw - 320px) / (1920 - 320) );
    padding-bottom:8vw;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	padding-bottom: constant(safe-area-inset-bottom);
}

.alasivu-article {
    margin-top:11vw;
}

article > p {
    padding-bottom:.4vw;
}

article > p > a {
    font-weight:bold;
}

article img {
    float:left;
    width:auto;
    height:auto;
    max-width:100%;
    padding:0 calc( 4px + (18 - 4) * (100vw - 320px) / (1920 - 320) ) calc( 2px + (11 - 2) * (100vw - 320px) / (1920 - 320) ) 0;
}

.alasivu-article > ul > li {
    padding:0 0 .5vw 6vw;
}

.ohjelmat-nav {
    position:fixed;
    display:flex;
	justify-content:center;
	flex-direction:column;
    left:0;
    top:0;
    width:10.5vw;
    height:100%;
    background:#000;
    font-weight:bold;
    font-size:calc( 8px + (28 - 8) * (100vw - 320px) / (1920 - 320) );
}

.ohjelmat-nav a:link, .ohjelmat-nav a:visited {
    color:#fff;
}

.ohjelmat-nav a:hover, .ohjelmat-nav a:active {
    color:#fff;
    text-decoration:underline;
}

.ohjelmat-nav > ul > li {
    padding:.5vw 0 .5vw 2vw;
}

.ohjelmat-section {
    width:100%;
}

.ohjelmat-section > h2 {
    color:#005c6d;
    font-size:calc( 20px + (33 - 20) * (100vw - 320px) / (1920 - 320) );
    text-align:center;
    margin-bottom:calc( 20px + (36 - 20) * (100vw - 320px) / (1920 - 320) );
}

.ohjelmat-section img {
    width:100%;
    max-width:635px;
    margin:0 auto 1vw auto;
    display:block;
    float:none;
}

.pupa {
    margin-bottom:6.5vw;
}

.ohjelmat-article1 {
    padding-bottom:1vw;
}

.ohjelmat-article2 {
    padding-bottom:0;
}

.ohjelmat-article2 > section {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:100vh;
}

.button-teksti {
    font-weight:bold;
    font-size:105%;
}

.ohjelmat-section > a > button {
    border:0px solid transparent;
    border-radius:0px;
    background:#005c6d;
    padding:.5vw 2vw;
    color:#fff;
    font-weight:bold;
    font-size:calc( 11px + (22 - 11) * (100vw - 320px) / (1920 - 320) );
    margin:.8vw 0 2vw 0;
    transition:0.1s ease-in-out;
    cursor:pointer;
}

.ohjelmat-section > a > button:hover {
    background:#0000ff;
}
.hinnasto {
    padding-bottom:3.5vw;
}

.nuoli-ylos {
    position:fixed;
    right:-6.5vh;
    bottom:14vh;
    width:6vh;
    height:6vh;
    background:#000;
    transition:0.11s ease-in-out;
    z-index:3;
}

.nuoli-ylos.nuoli-esiin {
    right:2vh;
}

.nuoli-ylos > a > svg {
    width:100%;
    height:auto;
    fill:#fff;
    cursor:pointer;
}

.nuoli-ylos > a > svg:hover {
    fill:#005c6d;
}

.footer {
    position:absolute;
    left:0;
    bottom:0;
    padding:1vw 0;
    width:100%;
    color:#fff;
    background:#000;
    font-size:calc( 10px + (17 - 10) * (100vw - 320px) / (1920 - 320) );
    z-index:2;
}

.footer > ul {
    width:55%;
    margin:0 auto;
    display:flex;
    justify-content:space-around;
}

.footer > ul > li {
    display:inline-block;
}

.footer a:link, .footer a:visited {
    color:#fff;
}

.footer a:hover, .footer a:active {
    color:#005c6d;
}

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

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

a:hover {
    text-decoration: none;
    color:#0000ff;
    text-decoration:underline;
}

a:active {
    text-decoration:none;
    color:#0000ff;
    text-decoration:underline;
}

a {
	outline:0;
}
	
a img {
	outline:0;
}

img {
    border:0;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;
}

input::-moz-focus-inner {
	border:0;
}

textarea:focus, input:focus {
	outline:none;
}

*:focus {
	outline:none;
}

@media (min-width: 3600px)
{
    .otsikko {
        max-width:2500px;
    }

    article {
        max-width:2200px;
    }
}

@media (min-width: 2700px)
{
    .otsikko {
        max-width:1250px;
    }

    article {
        max-width:1100px;
    }
}

@media (min-width: 2200px)
{
}

@media (max-width: 1700px)
{
}

@media (max-width: 1580px) and (orientation: landscape) 
{
}

@media (max-width: 1300px) and (orientation: landscape) 
{
}

@media (max-width: 1300px) and (orientation: landscape) 
{
}

@media (max-width: 1250px) and (orientation: landscape) 
{  
}

@media (max-width: 900px) and (orientation: landscape) 
{
}

@media (max-width: 900px)
{
    .ohjelmat-nav {
        font-size:calc( 8px + (13 - 8) * (100vw - 320px) / (900 - 320) );
    }

    .ohjelmat-article2 > section {
        display:block;
        min-height:90vh;
    }

    .demo {
        padding-bottom:2vw;
    }

    .nuoli-ylos {
        bottom:16vh;
    }

    .footer > ul {
        width:60%;
    }
}

@media (max-width: 780px) and (orientation: landscape) 
{
    .ohjelmat-nav {
        display:none;
    }

    .ohjelmat-section > a > button {
        padding:1vw 3vw;
    }

    .hinnasto {
        padding-bottom:8vw;
    }

    .footer > ul {
        width:80%;
    }
}

@media (max-width: 680px) and (orientation: landscape) 
{
}

@media (max-width: 650px)
{
    .otsikko {
        margin:13vw auto 3vw auto;
    }

    .alasivu-article {
        margin-top:13vw;
    }
}

@media (max-width: 560px) 
{
    .otsikko {
        width:90%;
        min-width:280px;
    }

    article {
        width:90%;
        min-width:250px;
        padding-bottom:10vw;
    }

    .hinnasto {
        padding-bottom:10vw;
    }

    .footer > ul {
        width:90%;
    }
}

@media (max-width: 500px) and (orientation: landscape) 
{
}

@media screen and (orientation: portrait) 
{
}

@media screen and (max-width: 1100px) and (orientation: portrait) 
{
    .otsikko {
        margin:13vw auto 3vw auto;
    }

    .alasivu-article {
        margin-top:13vw;
    }

    .ohjelmat-article2 > section {
        display:block;
        min-height:25vh;
    }

    .demo {
        padding:5vw 0 6vw 0;
    }

    .hinnasto {
        padding-bottom:18vw;
    }

    .footer > ul {
        width:72%;
    }
}

@media screen and (max-width: 900px) and (orientation: portrait) 
{
    .ylavalikko > ul > li, .ylavalikko > ul > li.pieni {
        padding:1.5vw 0;
    }
    
    h1, h1.pieni {
        padding:1vw 0;
    }

    .otsikko {
        margin:15vw auto 3vw auto;
    }

    .alasivu-article {
        margin-top:15vw;
    }

    .ohjelmat-nav {
        display:none;
    }

    .ohjelmat-section > a > button {
        padding:1vw 3vw;
    }

    .nuoli-ylos {
        bottom:10vh;
        width:6vw;
        height:6vw;
    }

    .footer {
        padding:2.5vw 0;
    }

    .footer > ul {
        width:85%;
    }
}

@media screen and (max-width: 772px) and (orientation: portrait) 
{
}

@media screen and (max-width: 680px) and (orientation: portrait) 
{
    .otsikko {
        width:90%;
        min-width:280px;
        margin:18vw auto 3vw auto;
    }

    article {
        width:90%;
        min-width:250px;
    }

    .hinnasto {
        padding-bottom:22vw;
    }
}

@media screen and (max-width: 500px) and (orientation: portrait)
{
    .ylavalikko > ul {
        display:none;
    }

    .menunappi {
        display:block;
        width:8vw;
        height:8vw;
        margin:0 auto;
    }

    .menunappi > svg {
        width:100%;
        height:auto;
        fill:#fff;
    }

    .mn1.mn1x {
        display:none;
    }

    .mn2 {
        display:none;
    }

    .mn2.mn2x {
        display:block;
    }

    .mobiilimenu {
        position:relative;
        display:block;
        height:0.1px;
        margin-top:-1px;
        padding:0;
        overflow:hidden;
        transition:0.08s ease-in-out;
        background:#0000ff;
        text-align:center;
        font-weight:bold;
        font-size:calc( 14px + (18 - 14) * (100vw - 320px) / (500 - 320) );
        line-height:calc( 35px + (40 - 35) * (100vw - 320px) / (500 - 320) );
    }

    .mobiilimenu a:link, .mobiilimenu a:visited {
        color:#fff;
    }

    .mobiilimenu a:hover, .mobiilimenu a:active {
        color:#fff;
        text-decoration:underline;
    }

    .mobiilimenu.mmx {
        height:auto;
        margin-top:0;
        padding:.5vw 0 1.5vw 0;
    }

    .otsikko {
        margin:22vw auto 3vw auto;
        font-size:12px;
    }

    article {
        font-size:12px;
        padding-bottom:200px;
    }

    .alasivu-article {
        margin-top:22vw;
    }

    .demo {
        padding:11vw 0 10vw 0;
    }

    .ohjelmat-section > a > button {
        padding:1.5vw 4vw;
        font-size:15px;
    }

    .hinnasto {
        padding-bottom:250px;
    }

    .nuoli-ylos {
        bottom:25vh;
    }

    .footer > ul {
        width:100%;
        display:block;
    }

    .footer > ul > li {
        display:block;
        text-align:center;
        font-size:13px;
        padding:7px 0;
    }
}

@media screen and (max-width: 400px)
{
    .menunappi {
        width:9vw;
        height:9vw;
    }

    .alasivu-article {
        margin-top:27vw;
    }

    .ohjelmat-section > a > button {
        margin:2.5vw 0 8vw 0;
    }

    .hinnasto {
        padding-top:50px;
        padding-bottom:190px;
    }

    .nuoli-ylos {
        bottom:170px;
        width:8vw;
        height:8vw;
    }
}

@media screen and (max-width: 330px)
{
    .menunappi {
        width:9.5vw;
        height:9.5vw;
    } 

    .alasivu-article {
        margin-top:30vw;
    }
}