:root
{
    --my-orange:hsl(20, 100%, 60%); /* hue sat light */
    --my-blue:hsl(197, 90%, 11%);
    --my-grey:hsl(0, 0%, 85%);
}

/* unvisited link */
a:link
{
    color:var(--my-grey);
}

/* visited link */
a:visited
{
    color:var(--my-grey);
}

/* mouse over link */
a:hover
{
    color:var(--my-grey);
}

/* selected link */
a:active
{
    color:var(--my-grey);
}

body
{
    margin:0;
    padding:0;
    font-size:20px;
    color:var(--my-grey);
    background-color:var(--my-grey);
    line-height:1.7;
    height:100%;
    width:100%;
    overflow-y:scroll;
}

*
{
    box-sizing:border-box;
    padding:0;
    margin:0;
}

.background-logo-konecaos
{
    display:block;
    position:fixed;
    left:-5%;
    top:30%;
    margin:0 auto;
    width:100%;
    transform:rotate(-45deg);
    z-index:-10;
}

.wrapper
{
    max-width:1200px;
    height:100%;
    margin:0 auto;
}

#container-logo
{
    display:flex;
}

.left-col-banner
{
    width:150px;
}

.left-col
{
    z-index:50;
    width:80%;
    height:100%;
    border-radius:20px;
    padding:20px;
    margin-top:40px;
    color:var(--my-blue);
    margin-bottom:50px;
}

.left-col h1
{
    margin-bottom:30px;
    line-height:1.2;
}

.mid-logo
{
    display:none;
}

.right-col-links
{
    display:none;
}

.kulma-banneri
{
    display:block;
}

/* SIDEBAR MENU */

.sidebar
{
    position:fixed;
    top:0;
    width:100%;
    height:0;
    overflow:hidden;
    opacity:0;
    background-color:var(--my-blue);
    transition:all 0.7s;
    z-index:90;
}

.menu-open
{
    opacity:1;
    height:100%;
}

#btn-menu
{
    position:fixed;
    bottom:0;
    right:0;
    width:40px;
    height:40px;
    z-index:99;
    margin:20px;
}

.thumbnails
{
    display:flex;
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
    align-content:end;
    opacity:0.9;
}

.sidebar-list-items
{
    display:flex;
    flex-direction:column;
    align-items:start;
    width:100%;
    list-style-type:none;
}

.sidebar-list-items li
{
    padding:20px;
    width:100%;
    align-self:end;
}

.sidebar-icons
{
    padding:10px;
    margin-right:20px;
    vertical-align:middle;
}

.svg-logo-konecaos
{
    display:none;
}

.thumbnail-etusivu
{
    width:200px;
    margin:20px;
    cursor:pointer;
}

.svg-logo-konecaos-menu
{
    width:100%;
    padding:30px;
}

.linkit
{
    display:none;
}

.sub-page
{
    display:flex;
    flex-flow:column;
    align-items:center;
    justify-content:space-between;
    color:var(--my-blue);
}

.menu-item-lomake
{
    position:relative;
    width:80%;
    margin:0 auto;
}

#yhteydenotto
{
    display:flex;
    flex-direction:column;
}

input[type=text]
{
    height:50px;
    outline:none;
    border:0;
    border-bottom:1px solid black;
    font-size:20px;
    background-color:hsl(0, 0%, 87%);
    margin-bottom:10px;
    width:100%;
}

textarea
{
    outline:none;
    border:0;
    height:300px;
    background-color:hsl(0, 0%, 87%);
    font-size:20px;
}

input[type=submit]
{
    margin:50px 0 50px 0;
    height:36px;
    border-radius:10px;
    border:0;
    outline:none;
    width:50%;
    font-size:18px;
}

label
{
    padding:10px 0 10px 0;
}

@media screen and (min-width:750px)
{

    #container-logo
    {
        display:flex;
        width:100%;
    }

    .left-col-banner
    {
        width:150px;
    }

    .mid-logo
    {
        display:block;
        width:100%;
        align-self:center;
        padding:10px 50px 10px 50px;
        margin-top:50px;
    }

    .right-col-links
    {
        display:block;
        width:150px;
        padding:10px;
    }

    .left-col
    {
        background-color:unset;
        color:var(--my-blue);
    }

    .left-col a
    {
        color:var(--my-blue);
    }

    .right-col
    {
        position:absolute;
        top:0;
        right:0;
    }

    .svg-logo-konecaos
    {
        display:block;
        max-width:500px;
        margin:0 auto;
        right:0;
        left:0;
    }

    .background-logo-konecaos
    {
        display:none;
    }

    .thumbnails
    {
        opacity:1;
        margin-top:300px;
    }

    #btn-menu
    {
        display:none;
    }

    .linkit
    {
        display:flex;
        flex-direction:column;
    }

    .linkit a
    {
        color:var(--my-blue);
        font-size:1.3em;
        height:60px;

        text-decoration:none;
    }

    .linkit a:hover
    {
        text-decoration:underline var(--my-blue);
    }

    .sub-page
    {
        position:relative;
        display:flex;
        flex-flow:row;
        justify-content:space-between;
        color:var(--my-blue);
        width:90%;
        margin-top:100px;
    }

    .thumbnails img
    {
        width:200px;
    }
    
    .menu-item-lomake
    {
        width:40%;
    }

}