*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}
  
/* CSS RESET - http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
html, body, div, span, applet, object, iframe,
f, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

h1,h2,h3,h4,h5,h6{ font-weight: normal; }

div.data-area a{
    font-size:18px;
    font-family:'HelveticaNeueW02-55Roma';
    color:rgb(189,18,32);
}

/* HTML, BODY */


    html, body{
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }

    body{
        background:white;
        color:rgb(75,75,75);
        font-size:20px;
        font-family:'Adobe Garamond Pro 1167025';
    }    
    

/* DIV */

    div.data-container, div.data-container-etusivu{
        width:100%;
        background: url('../layout/hurmos-ylabrush.png');
        background-repeat:repeat-x;
        background-position: top center;
    }
    
    div.data-container{margin-top:80px;}
    
    div.data-area{
        width:94%;
        max-width:1200px;
        margin:0 auto;
    }

    div.fb{
        padding-top:40px;
    }
    
    div.taulukko{
       width:100%;
       float:left;
       padding-bottom:25px;
   }

   div.taulukko_solu2{
 	    width:50%;
        float:left;
        padding-right:60px;
}

    div.taulukko_solu3{
  	    width:33%;
        float:left;
        padding-right:20px;
    }
    
    div.etusivu-vasen{
        width:50%;
        text-align:center;
        float:left;
        border-right: 1px dotted rgb(153,153,153);
        padding-top:20px;
        padding-bottom:20px;
    }
   
    div.etusivu-oikea{
        width:45%;
        float:right;
        padding-top:20px;
        padding-bottom:20px;
    }
    
    div.nuoli{
        margin:0 auto;
        height:100px;
        width:60px;
    }
    
    div.nuoli-ylos, div.nuoli-alas{
        height:100px;
        width:60px;
        cursor:pointer;
        opacity:0;
    }
    
    div.nuoli-ylos{ background:url('../layout/hurmos-nuoli-ylos.png'); background-repeat:no-repeat; background-position: center center; }
    div.nuoli-alas{ background:url('../layout/hurmos-nuoli-alas.png'); background-repeat:no-repeat; background-position: center center; }
    
    footer div.links{
        margin-top:-20px;
        margin-bottom:20px;
    }
    
    div.virhe_teksti{
        padding-bottom:20px;
        color:rgb(141,16,22);
    }

    div.ok_teksti{
        padding-bottom:20px;
        color:green;
    }
    
    div.logo{ width:10%; float:left; height:80px; line-height:80px; text-align:center;  }
    div.logo img{ vertical-align:middle; }
    
    div.menu{
        width:60px;
        height:60px;
        float:right;
        cursor:pointer;
        display:none;
        text-align:center;
        line-height:60px;
    }
    
    div.menu a{ display:block; }

    div.map-area{
        width:100%;
        height:400px;
        position:relative;
    }
    
    #map-canvas{
        width:100%;
        height:400px;
    }

    #map-canvas img{ max-width:none; }

    #map-brush{
        position:absolute;
        bottom:0;
        z-index:10000;
        background: url('../layout/hurmos-alabrush.png');
        background-repeat:repeat-x;
        background-position: bottom center;
        height:100px;
        width:100%;
    }
    
    div.quotes{ position:relative; height:300px; }
    div.quote{ position: absolute; z-index:1; background:white; width:100%; height:300px; padding:5px; }
    div.quote.active{ z-index:3; }
    

/* HEADER */


/* NAV */


    nav ul{ display:block; }

    
    section ul{
        margin-top: 0;
        margin-bottom:0;
    }
    
    section ul li{
        padding-top:4px;
        padding-bottom:4px;
    }

    div.nostot ul{
        width:100%;
        margin:0;
        padding:0;
        text-align:center;
        list-style:none;
        text-align: center;
    }

    div.nostot ul li{
        padding:0;
        margin:0 30px 60px 30px;
        list-style:none;
        display:inline-block;
        width:340px;
        vertical-align:top;
        text-align:center;
    }
    
    div.nostot ul li:nth-of-type(1){
        margin-left:0;
    }

    div.nostot ul li:nth-of-type(3n){
        margin-right:0;
    }

    div.nostot div.border {
        border: 0px solid #fff;
        border-width: 0;
        width:100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        transition: 0.1s;
        -webkit-transition: 0.1s; 
        box-shadow: 2px 2px 5px rgb(153,153,153);
    }

    div.nostot div.border:hover{
        border-width: 6px;
        transition: 0.1s;
        -webkit-transition: 0.1s; 
        box-shadow: 0px 0px 0px white;
    }

    footer div.links div.link{
        width:64px;
        height:64px;
        float:left;
        margin-bottom:15px;
    }
    
    .left-content ul, .right-content ul, .left-content ol, .right-content ol{
        padding-left:20px;
    }
    
    .left-content ul li, .right-content ul li, .left-content ol li, .right-content ol li{
        padding-bottom:20px;
    }

    ul.alilinkit, ul.blogi{
       margin:0;
       padding-left:30px;
       list-style: disc;
    }
    
    ul.blogi{
        padding-left:20px;
    }

    ul.alilinkit li, ul.blogi li{
        color:rgb(189,18,32);
        margin-bottom:5px;
        padding:0;
    }  
    
    ul.blogi li{
        width:50%;
        float:left; 
    }

    ul.alilinkit li a, ul.blogi li a{
        color:rgb(189,18,32);
        text-transform:  uppercase;
        font-family:'HelveticaNeueW02-57Cn';
        font-size:18px;
    }
    
    ul.alilinkit li a:hover, ul.alilinkit li a.valittu, ul.blogi li a:hover, ul.blogi li a.valittu{
        color:rgb(153,153,153);
        text-decoration:none;
    }


/* SECTION */


   article{
        width:83.3333333%;
        max-width:1200px;
        margin: 0 auto;
        padding-top:50px;
        padding-bottom:50px;
    }

    section{

    }
    
    section.etusivu{
        width:94%;
        max-width:1020px;
        margin: 0 auto;
    }
    
/* TD */

    td.lomake-otsikko{
        font-family:'HelveticaNeueW02-55Roma';
        font-size:18px;
        padding-bottom:5px;
    }
    
    td.lomake-otsikko-bold{
        font-family:'HelveticaNeueW02-75Bold'; 
        font-size:18px;
        padding-bottom:5px;
    }
    
    td.lomake-kentta{
        padding-bottom:10px;
    }
    

/* SPAN */
    span.ingressi{ font-family:'HelveticaNeueW02-57Cn'; font-size:21px; color:rgb(75,75,75)}
    

/* H1, H2, H3, H4 */



    h1, div.h1{
        font-family:'HelveticaNeueW02-97Blac';
        color: black; 
        text-transform: uppercase;
        line-height:100%;
        font-weight:normal; 
        max-width:600px;
    }
    
    h2,h3,h4,section.etusivu  div.h2, div.h2.alaotsikko{
        font-family:'HelveticaNeueW02-77BdCn 694066';
        color: black; 
        text-transform: uppercase;
        line-height:100%;
        font-weight:normal; 
    }
    
    h1, div.h1{ font-size:54px; margin-top:0px; margin-bottom:20px;}
    h2, div.h2{ font-size:36px; margin:0px; }
    h3{ font-size:24px; margin:0px; color:rgb(189,18,32); }
    h4{ font-size:24px; margin:0px; } 

    header h1{ color:white; font-family:'HelveticaNeueW02-77BdCn 694066'; margin-top:25px; font-size:59px; line-height:70px; margin-left:2px;}

    header div.big{ color:white; font-size: 120px; margin:0px; margin-top:45px; line-height:72px; max-width:500px; text-transform: uppercase; font-family:'HelveticaNeueW02-97Blac'; }
    header h2, header h1 div.h2{ color:white; font-size: 60px!important; margin-top:0; margin-bottom:10px; margin-left:5px;}
    header h3, header h1 div.h3{ color:white; font-size: 58px!important; margin:0; margin-right:3px; }
    header h1 div.h2{
        margin-top:20px!important;
        font-family:'HelveticaNeueW02-77BdCn 694066';
        font-weight:normal; 
    }

    header h1 div.h3{
        margin-top:-10px!important;
        font-family:'HelveticaNeueW02-77BdCn 694066';
        font-weight:normal;
    }

    section.etusivu h1, section.etusivu div.h1{ font-size:110px; margin-bottom:5px; margin-top:-2px; font-family:'HelveticaNeueW02-97Blac'; }
    section.etusivu div.h2{ font-size:40px; margin-top:0px; padding-bottom:35px; font-family:'HelveticaNeueW02-77BdCn 694066'; } 

    div.slogan div.h1{ text-align:center; font-size:64px; margin-bottom:5px; font-family:'HelveticaNeueW02-97Blac'; }
    div.slogan h3{ text-align:center; font-size:24px; margin-top:0px; margin-bottom:35px; font-family:'HelveticaNeueW02-77BdCn 694066'; } 

    div.nostot h2.iso{ font-family:'HelveticaNeueW02-87HvCn 694072'; font-size:54px; text-align:center; margin-bottom: 60px; }
    div.nostot h3{ text-align:left; font-family:'HelveticaNeueW02-77BdCn 694066'; font-size:24px; margin-top:20px; margin-bottom:4px;  margin-left:5px; margin-right:5px; color: black; }
    div.nostot h4{ text-align:left; font-family:'HelveticaNeueW02-67MdCn 694060'; font-size:19px; color:rgb(189,18,32); line-height:110%; margin-bottom:15px; margin-left:5px; margin-right:5px; }

    footer h3{ color:white; font-family:'HelveticaNeueW02-77BdCn 694066'; font-size:39px; margin-bottom:20px; }
    footer h4{ color:white; font-family:'HelveticaNeueW02-57Cn'; font-size:32px; margin-bottom:10px;}


/* IMG */

    img{ margin:0; border:0; max-width:100%; }

    img#alas{
        cursor:pointer;
        margin-top:45px;
        margin-left:220px; 
    }
    
    img#ylos{
        cursor:pointer;
    }
    
    div.nostot ul li img{ width:100%; display:block; }

    footer div.links img{ margin-left:4px; margin-right:4px; }

    footer div.links img:hover{ width:53px; }

    img#balloon{
        position:absolute;
        bottom:-355px;
        left:42%;
    }

/* A */

    a{ text-decoration: none; color:white; }

    a:hover{ text-decoration: underline; }

    a.paalinkki, a.paalinkki-valittu{
        color:white;
        text-transform: uppercase;
        font-family:'HelveticaNeueW02-67MdCn 694060';
        font-size:22px;
    }
  
    a.paalinkki:hover, a.paalinkki-valittu{
        color:rgb(189,18,32);
        text-decoration: none;
    }

    a.linkki_tekstissa{
        font-size:18px;
        font-family:'HelveticaNeueW02-55Roma';
        color:rgb(189,18,32);
    }
    
    a.button, div.data-area a.button{
        display:block;
        padding:10px;
        text-align:center;
        font-family:'HelveticaNeueW02-75Bold';
        font-size:16px;
        text-transform: uppercase;
        background:rgb(189,18,32);
        color:white;
        box-shadow:1px 1px 3px black;
    }
    
    a.button:hover, div.data-area a.button:hover{
        width:98%;
        margin:0 auto;
        text-decoration:none;
        box-shadow:none;
    }

    div.yhteydenotto a.button, div.blogi a.button{ width:300px; }
    div.yhteydenotto a.button:hover, div.blogi a.button:hover{ width:292px; margin: 0; }

    div.yhteydenotto img:first-of-type{ margin-bottom:85px; }
    

    div.nostot ul li a{ position: relative; display:block; }

    div.nostot ul li p a{ display: inline;  color:rgb(189,18,32); }

    div.yhteydenotto p{
        font-family:'HelveticaNeueW02-55Roma';
        font-size:18px;
    }

    footer a{
        color: rgb(189,18,32);
    }

/* BUTTON */

    div.yhteydenotto button, div.blogi button{
        float:right;
        border:0;
        padding:10px;
        margin-top:20px;
        text-align:center;
        font-family:'HelveticaNeueW02-75Bold';
        font-size:16px;
        text-transform: uppercase;
        background:rgb(189,18,32);
        color:white;
        box-shadow:1px 1px 3px black;
        cursor:pointer;
    }
    
    div.blogi button{ float:left; }
    
    div.yhteydenotto button:hover, div.blogi button:hover{
        box-shadow:none;
        padding-left:8px;
        padding-right:8px;
    }


/* FOOTER */

    footer{
        width:100%;
    }
    
    footer div.footer-brush{
        background: url('../layout/hurmos-alabrush.png');
        background-repeat:repeat-x;
        background-position: top center;
        padding-top:50px;
    }
    
    footer div.footer-area{
        background:rgb(30,25,25);
        padding-top:50px;
        padding-bottom:40px;    
        min-height:250px;
    }
    
    footer div.data{
        color:white;
        margin:0 auto;
        width:94%;
        max-width:1000px;
    }
    
    footer div.left-content{
        font-family:'Adobe Garamond Pro 1167025';
        font-size:19px;
    }
    
    footer div.left-content div.sisalto{
        width:256px;
        margin:0 auto;
    }


/* HR */
    
    hr{
        border:0;
        height:4px;
        border-top:1px solid rgb(153,153,153);
        margin:0;
    }
    

/* P */

   div.nostot p{
       text-align:center;
        width:80%;
        max-width:820px;
        margin:0 auto;
        padding:0;
        margin-bottom:50px;
    }
    
    div.nostot ul li p{
        width:auto;
        font-size:18px;
        margin:0;
        padding-left:5px;
        padding-right:5px;
        text-align:left;
        line-height:115%;   
    }
    
    div.nostot ul li a{
        font-size:18px;
        font-family:'Adobe Garamond Pro 1167025';
    }
    
    footer p{
        line-height:123%;
        text-align:left;
        margin-bottom:20px;
    }
    
    footer div.left-content p{
        margin-top:30px;
    }


/* INPUT */

    footer input, footer textarea{
        border:0;
        padding-left:8px;
        padding-right:8px;
        padding-top:6px;
        padding-bottom:6px;
        background:rgb(75,75,75);
        font-family:'HelveticaNeueW02-45Ligh';
        font-size: 17px;
        color:rgb(153,153,153);
        width:100%;
        margin-bottom:8px;
    }

    footer input:focus, footer textarea:focus{
        -moz-box-shadow: 0 0 5px 1px rgb(141,16,22);
        -webkit-box-shadow: 0 0 5px 1px rgb(141,16,22);
        box-shadow: 0 0 5px 1px rgb(141,16,22);
        outline:0;
    }

    footer button{ 
        color:rgb(141,16,22);
        font-family:'HelveticaNeueW02-67MdCn 694060';
        font-size:20px;
        text-transform: uppercase;
        background: url('../layout/hurmos-www-nuoli-laheta.png');
        background-repeat:no-repeat;
        background-position:right;
        border:none; 
        padding-right:25px;
        cursor:pointer;
        margin-left:-3px;
        margin-top:10px;
    }

    footer button:focus{ outline:0; }
    
    footer button:hover{ color:white; }
    
    input.lomake-kentta, textarea.lomake-kentta{
        width:100%;
        padding:4px;
        font-size:16px;
        font-family:'HelveticaNeueW02-55Roma';
        color:rgb(75,75,75);
    }

    input.lomake-kentta:focus, textarea.lomake-kentta:focus{
        -moz-box-shadow: 0 0 5px 1px rgb(153,153,153);
        -webkit-box-shadow: 0 0 5px 1px rgb(153,153,153);
        box-shadow: 0 0 5px 1px rgb(153,153,153);
        outline:0;
    }
    
    #map-canvas h2{
        font-size:16px;
        margin-bottom:10px;
        line-height:110%;
    }

/* FORM */

    form{ margin-bottom:20px; }


/* YLEISET */

    .cl{ clear:both; }
    
    .left-content { padding: 30px 30px 30px 0 }
    .right-content { padding: 30px 0 30px 30px}
    
    .float-left  { float: left; }
    .float-right  { float: right; }    
    
    .border-left{ border-left: 1px solid rgb(153,153,153); }
    .border-right{ border-right: 1px solid rgb(153,153,153); }
    .border-left-dotted{ border-left: 1px dotted rgb(153,153,153); }
    .border-right-dotted{ border-right: 1px dotted rgb(153,153,153); }
    
    .center{ text-align:center; }
    
    .pad-top{ padding-top:60px; }
    .pad-left{ padding-left: 60px; }
    .pad-left30{ padding-left: 30px; }
    .pad-right0{ padding-right:0; }
    .pad-right10{ padding-right:10px; }
    .pad-right30{ padding-right: 30px; }

    .margin-topbottom{ margin-top:60px; margin-bottom:60px; }
    .margin-top{ margin-top:60px; }
    .margin-top5{ margin-top:5px; }
    .margin-top20{ margin-top:20px; }
    .margin-top25{ margin-top:25px; } 
    .margin-top30{ margin-top:30px; }
    .margin-bottom{ margin-bottom:60px; }
    .margin-bottom20{ margin-bottom:20px!important; }
    .margin-bottom30{ margin-bottom:30px; }
    .margin-topbottom20{ margin-bottom:20px; margin-top:20px; }
    .margin-right20{ margin-right:20px; }
    .width100{ width:100%; }
    .width75{ width:75%; }

    .light{ font-family:'HelveticaNeueW02-45Ligh'; }
    .light-italic{ font-family:'HelveticaNeueW02-46Ligh'; }
    .size14{ font-size:14px; }

    .bold, b, strong{ font-family:'HelveticaNeueW02-75Bold'; font-weight:normal; }
    .show-mobile{ display:none; }
    .align-right{ text-align:right; }
    .relative{ position:relative; }

    .center{ text-align:center; }
    .fx{ color:rgb(189,18,32)!important; }


.fb-like, .fb-like span, .fb-like.fb_iframe_widget span iframe {
    width: 100% !important;
    height:25px!important;
}


/* MEDIA QUERYT */

@media only screen and (max-width: 1300px) {
    div.header-box { left:15%; }
    header div.h1{ font-size:90px; margin-top:0px; }
    img#alas{ margin-left:140px; margin-top: 15px;}    
    nav ul{ margin:0 auto; }
    nav ul li{ margin-right:25px; }
    div#nuoli-ylos, div#nuoli-alas{ left:5px; }
    div.nostot ul li{ width:300px; }
}

@media only screen and (max-width: 1200px) {
    div.nostot ul li{ width:100%; margin:0; margin-bottom:50px; text-align:center; }
    div.nostot{ padding-bottom:0; }
    div.nostot h3, div.nostot h4{ margin-left:0; }
    div.nostot ul li p{ padding:0; }
    div.nosto-data{ width:500px; max-width:100%; margin: 0 auto;}
    /* div.header-bg{ background-position: 85% 50%;} */ 

    .flex-direction-nav a{ top:200px; }
}


@media only screen and (max-width: 1023px) {
    section.etusivu h1{ font-size:91px;} 
    section.etusivu h2{ font-size:33.5px; }
    a.paalinkki, a.paalinkki-valittu{ font-size:18px; }
    .flexslider .flex-prev{ left: -32px; }
    .flexslider .flex-next{ right:-32px; }
    .flex-direction-nav a{ top:185px; }
}

@media only screen and (max-width: 900px) {
    div.header-box{ bottom:0px; top:auto; margin:0; text-align:center; left:auto; width:100%; }
    div.alas{ margin-top:25px; margin-left:150px;}
    nav, nav ul{ height:60px; }
    div.data-container{margin-top:60px;}
    nav.etusivu{ position:fixed; bottom:auto; top:0; }
    nav ul{ min-height:50px; line-height:50px; text-align:center; position:absolute; top:60px; width:100%; float:none; background:rgb(30,25,25); min-width:100%; border-bottom:2px solid white; }
    
    div.logo{ height:60px; line-height:60px; padding-left:10px; width:50%; text-align:left; }
    div.logo img{ max-height:40px; margin-top:-2px; }
    .hide-mobile{ display:none; }
    .show-mobile, div.menu{ display:block; }
    .left-content, .right-content, div.nostot{ padding:0; }
    .border-left, .border-right{ border:none; }
    .margin-topbottom{ margin-top: 30px; margin-bottom:30px; }
    div.col-1, div.col-2, div.col-3, div.col-4, div.col-5, div.col-6, div.col-7, div.col-8, div.col-9, div.col-10, div.col-11, div.col-12, div.width75, div.etusivu-vasen, div.etusivu-oikea{ width:100%; }
    .float-left, .float-right{ float:none; }
    .data-container{ float:left; margin-top:60px;  }
    div.col-4{ width:100%; }
    ul.alilinkit{ width:100%; }
    ul.alilinkit li{ float:left; margin-right:40px; }
    .border-left-dotted{ border-left: none }
    .border-right-dotted, div.etusivu-vasen{ border-right: none; }
    footer div.col-4{ width:94%; margin:0 auto; padding-bottom:20px; margin-bottom:50px; border-bottom:1px dotted rgb(153,153,153); }
    div.etusivu-vasen{ margin-top:0px;}
    footer div.col-8{ width:94%; margin:0 auto;}
    footer div.left-content div.sisalto{ width:100%; }
    div.etusivu-vasen{ margin-bottom:0px; }
    div.etusivu-oikea{ margin-top:0; }
    div.data-area{ width:90%; }
    div.yksittainen-blogi{ margin-top:30px; }
    div.lainaus{ width:50%; float:left; text-align:left; padding-left:30px; margin-bottom:30px; }
    div.lainaus p{ text-align:left; }
    div.blogikuvat{ width:50%; float:left; margin-bottom:30px; }
    .flex-direction-nav a{ top:325px; }
    div.data-container-etusivu{ padding-top:30px; }
    div.taulukko_solu2, div.taulukko_solu3{ width:100%; padding-right:0;}
}

@media only screen and (max-width: 900px) and (orientation : portrait) { 
    header div.header-bg1{ background-image: url('../layout/header/mainostoimisto-kokkolassa-st-hurmos-pysty.jpg'); }
    header div.header-bg2{ display:none; }
    header div.big, header h1{  text-shadow: 2px 2px black; text-align:center; margin-left:auto; margin-right:auto;  }
    div.alas{ margin-left:auto; margin-right:auto; }
}

@media only screen and (max-width: 800px) {
    nav ul{ height:auto; text-align:left; }
    nav ul li{
        margin:0;
        padding:0;
        width:50%;
        float:left;
        display:  inline-block;
    }
    /*
    nav ul li:hover, nav ul li.valittu{
        background-color:white;
        color:black;
    }
    */
    
    nav ul li a{ display:block; padding-left:50px; }
    div.h1, h1, div.nostot h1{ font-size:40px; }
    .flex-direction-nav a{ top:280px; }

    .flexslider .flex-prev, .flexslider:hover .flex-prev{ left: -20px; }
    .flexslider .flex-next, .flexslider:hover .flex-next{ right:-20px; }
    ul.blogi li{ width:100%; }
}

@media only screen and (max-width: 800px) and (orientation : landscape) {
    header div.big{ font-size:81px; text-shadow: 2px 2px black; max-width:400px;}
    header h1{ font-size:42px; text-shadow: 2px 2px black; max-width:400px; line-height:48px; margin-top:10px; }
    div.header-box{ bottom:60px; }
    div.alas{ margin-top:10px; line-height:30px; margin-left:100px; }
}

@media only screen and (max-width: 700px) {
    nav{ position:relative; }
    nav.etusivu{ position:absolute; }
    div.data-container{ margin-top:0px;  }
    .flex-direction-nav{ display:none; }
    .flex-direction-nav a{ top:260px; }
}

@media only screen and (max-width: 600px) {
    h1, div.nostot h1, footer h3, div.h1{ font-size:32px; }

    div.lainaus, div.blogikuvat{ width:100%; }
    div.lainaus{ padding:0; }
    div.nostot h2.kokonaisuudet{ font-size:26px; }
    .flex-direction-nav a{ top:200px; }
    .left-content, .right-content, div.nostot{ overflow:hidden; }
}

@media only screen and (max-width: 500px) {
    nav ul{ height:auto; }
    nav ul li{
        width:100%;
        float:none;
    }    
    
    .left-content ul, div.right-content ul, .left-content ol, .right-content ol{
        padding-left:25px;
    }

    .flex-direction-nav a{ top:140px; display:none; }
    
    div.nostot h2.iso{ font-size:40px; }

    header div.big{ font-size:70px;  margin-left:auto; margin-right:auto; }
    header h1{ font-size:35px; max-width: 300px; line-height:40px; margin-top:10px; margin-left:auto; margin-right:auto; }
    div.alas{  margin-left:auto; margin-right:auto;  }
    div.header-box{ bottom:-20px; }
    div.etusivu-vasen div.h1{ font-size:70px; }
    div.etusivu-vasen h2{ font-size:26px; }
}

@media only screen and (max-width: 400px) {
    div.nostot h2.kokonaisuudet{ font-size:20px; }
    .flexslider .flex-prev, .flexslider:hover .flex-prev{ left: -18px; }
    .flexslider .flex-next, .flexslider:hover .flex-next{ right:-18px; }
    .flex-direction-nav a{ top:110px; }
}

@media only screen and (max-width: 370px) {
    h1, div.nostot h1, footer h3{ font-size:24px; }
    div.nostot h2.iso{ font-size:32px; }
}