/*  */
html, body, div, span, applet, object, iframe,
h1, 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;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }



/* YLEISET LYYLIT */

    section#kuutiot, article{
        width:96.666666666667%;
        max-width:1200px;
        margin:0 auto;
    }

    .cl{ clear: both; }


/* BODY */

    html,body{
        margin:0;
        padding:0;
        border:none;
	  	min-height:100%;
	  	height:100%;
    }
    
    body {
        font-family: 'Roboto', sans-serif;
        background-image: url(../layout/kuvat/bgr.jpg);
        background-attachment: fixed;
		background-size: 100% auto;
        background-position: center bottom;
        background-repeat: no-repeat;
        line-height:130%;
	  	min-height:100%;
	  	height:100%;
        font-size:16px;
    }

	 body.frontpage {
        font-family: 'Roboto', sans-serif;
        background-image: url(../layout/kuvat/bgr.jpg);
        background-attachment: fixed;
		background-size: 100% auto;
        background-position:0 430px;
        background-repeat: no-repeat;
        line-height:130%;
	  	min-height:100%;
	  	height:100%;
        font-size:16px;
    }
   
   


/* DIVIT */

    div.container{
		position:relative;
	  	min-height:100%;
	  	height:100%;
		width:100%;
	    voice-family: "\"}\"";
	    voice-family: inherit;
	    height: auto;
        overflow:hidden;
	}

	html>body div.container {
    	height: auto;
	}
   
     ul.pixx{
        margin:0;
        padding:0;
        list-style: none;
        width:100%;
		overflow:hidden;
		text-align:center;
	}

    ul.pixx li{
        list-style: none;
        display:inline;
        width:45%;
        margin:0;
        padding:0;
		float:left;
	}

    ul.pixx li img{
        max-width:120px;
		width:100%;
        margin:2px 0 5px 0;
		padding:0;
    }


    div.w40{ width:42%; }
    div.w30{ width:29%; }
    

/* HEADER */

    header.etusivu, header.muut{ margin-top:134px; }
    header.alilinkit{ margin-top:180px; }
    
    header.alilinkit .flex-direction-nav a{ top:150px; }

    header.muut, header.muut div.slides, header.muut ul.slides, header.muut ul.slides li, header.muut ul.slides li div.slide{
        width:100%;
        height:350px;
    }

    header.etusivu, header.etusivu div.slides, header.etusivu ul.slides, header.etusivu ul.slides li, header.etusivu ul.slides li div.slide{
		width:100%;
        height:650px;
    }
    
    div.banner-text{
        width:96.666666666667%;
        max-width:1160px;
        margin:0 auto;
    }

/* NAVIGOINTI */

    section#nav{
        width:100%;
        background:white;
        box-shadow:2px 0px 5px rgb(102,102,102);
        position:fixed;
        top:0;
        z-index:5000;
        border-bottom:1px solid rgb(203,203,203);
    }

    nav{
        width:96.666666666667%;
        max-width:1140px;
        margin:0 auto;
    }
 
    
    nav div.logo{
        width:25%;
        float:left;
        margin-top:10px;
    }
	nav p {
		font-family: 'Roboto', sans-serif;
        width:55%;
        float:left;
        margin-top:30px;
		padding-left:5%;
		color:#59692A;
    }
    
    nav ul{
        width:75%;
        float:right;
        list-style:none;
        padding:0;
        margin:0 auto;
        line-height:60px;
        text-align:right;
    }
    
    nav ul li{
        text-align:right;
        list-style:none;
        display:inline-block;
        text-transform: uppercase;
        vertical-align:middle;
        line-height:60px;
        margin:1px 0 0 0;
        padding:0;
        margin-left:6%;
		/*border:1px solid rgb(203,203,203);*/
    }
    
      .logo img{
        width:100%;
        vertical-align:top;    
    }
    
    div.sublinks{
        background:rgb(102,203,255);
        width:100%;
    }

    ul.sublinks{
        width:96.666666666667%;
        max-width:1000px;
        margin:0 auto;
        list-style:none;
        padding:0;
        text-align:right;
        margin-bottom:-1px;
    }
    
    ul.sublinks li{
        list-style:none;
        display:inline-block;
        text-transform: uppercase;
        vertical-align:middle;
        line-height:50px;
        margin-left:5%;
    }
    

/* SECTION LYYLIT*/

    section#kuutiot{
        position:relative;
		background:#FFF;
    }

    section#main-etusivu{
        border-top:1px solid rgb(203,203,203);
        margin-top:170px;
    }
    
    section#main{

    }
    
   
/* ARTICLE TYYLIT*/

    article{
        width:83.3333333%;
        margin:0 auto;
        min-height:300px;
        border-left:1px solid rgb(203,203,203);
        border-right:1px solid rgb(203,203,203);
    }

    #main-etusivu article{
        width:83.3333333%;
    }
 
    #main-etusivu article div.left-block, article.target div.left-block{
        padding-top:60px;
    }
    
    #main article, #main article.target, section.ala article{
        width:95%;
        margin:0 auto;
    }

    #main article.center{
        width:50%;
        text-align:center;
        padding-bottom:60px;
        padding-top:60px;
        border:none;
    }
       
    div.left-block{
        width:66.7%;
        float:left;
        border-right:1px solid rgb(203,203,203);
        position:relative;
        padding-bottom:60px;
    }
    
	div.left-block img {
		max-width:700px;
		width:100%;
		height:auto;
		padding: 0 0 0 5%;
	}

	div.block{
        padding:1.25% 5%;
    }

	div.block H4{
		color:#46A9D0;
		}

	div.block H1 {
		color:#46A9D0;
		}
    
    div.right-block{
        width:33.3%;
        float:right;
        /* border-left:1px solid rgb(203,203,203);
        border-right:1px solid rgb(203,203,203); */
        padding: 0 0 10px 0;
		height:100%;
		min-height:100%;
	}

	div.right-block H2{
		/*padding-left:32%; */
		color:#46A9D0;
		text-align:center;
	}

    div.right-block div.block{
        padding-left: 1.5%;
        padding-right: 1.5%;
        padding-bottom:10px;
        min-height:200px;
        border-bottom:1px solid rgb(203,203,203);
    }

    div.right-block div.no-border{
        border:none;
    }

    #main-etusivu div.left-block, #main-etusivu div.right-block{
        padding-bottom:0;
        min-height:715px;
    }
    
    #main-etusivu div.left-block div.block{
        padding-bottom:30px;
    }
    
/* UL, LI ELEMENTIT*/

    ul.kuutiot{
        list-style:none;
        padding:0;
		position:absolute;
        width:100%;
        z-index:2000;
    }
    
    ul.kuutiot li{
        width:23%;
        display: inline-block;
        margin:0 1.955555555555%;
        padding:0;
		vertical-align:top;
        background:transparent;   
        min-height:200px;  
        bottom:-100px;
        position:absolute;
        cursor:pointer;
    }

	ul.kuutiot li:hover {
		background:#FFF;
		} 

    ul.kuutiot li.kuutio1{ left:-1.85%; }
    ul.kuutiot li.kuutio2{ left:23.7%; }
    ul.kuutiot li.kuutio3{ left:49.35%; }
	ul.kuutiot li.kuutio4{ left:75%; }
    
    ul.kuutiot img{ max-width:100%; } 


    #main ul{
        margin:0;
        padding:0;
        padding-left:50px;
    }
    
    #main ul li{
        margin:0;
        padding:0;
    }
   
/* H1, H2, H3, H4, H5, H6 */

    h1,h2,h3,h4,h5,h6{ font-weight: normal; margin-bottom: 25px; }

    h1 {
       font-size: 28px;
       line-height: 120%;
       margin-top:0px;
       margin-bottom: 25px;
       font-family: 'Roboto', sans-serif;
       text-transform: uppercase;
       color:rgb(0,168,210);
    }

    header h1 {
       font-size: 68px;
       line-height: 120%;
       margin-bottom: 20px;
       font-family: 'Galada', cursive;
       text-transform: none;
       color:white;
       text-shadow: 2px 2px black;
       max-width:860px;
       width:98%;
       margin:0 auto;
       text-align:center;
       padding-top:260px;
       letter-spacing:2px;
    }
    
    header.alilinkit h1{ padding-top:125px; }
    
    article.galleria h1{
        text-align:center;
        margin-top:50px;
        margin-bottom:60px;
    }
    
    h2 {
       font-size: 26px;
       color:rgb(0,168,210);
       line-height: 120%;
       margin-bottom: 25px;
       font-family: 'Roboto', sans-serif;
       text-transform: uppercase;
    }

    #main-etusivu h2, div.right-block h2{
        margin-top:60px;
    }
    
    h3 {
       font-size: 28px;
       color:rgb(0,168,210);
       line-height: 120%;
       margin-bottom: 25px;
       font-family: 'Roboto', sans-serif;
       text-transform: uppercase;
    }


    h4 {
       font-size: 20px;
       color:rgb(0,168,210);
       line-height: 110%;
       margin-bottom: 15px;
       font-family: 'Roboto', sans-serif;
       text-transform: uppercase;
    }

	div.slides h4 {
       font-size: 20px;
       color:#FFF;
       line-height: 110%;
       margin-bottom: 15px;
	   text-align:center;
       font-family: 'Roboto', sans-serif;
       text-transform: uppercase;
    }

    ul.kuutiot li h2{
        font-family: 'Roboto', sans-serif;
		font-size:20px;
        text-align:center;
        color:#FFF;
        margin-top:0;
        padding-top:10px;
        padding-bottom:10px;
    }

    ul.kuutiot li h3{
        font-size:28px;
        font-family: 'Roboto', sans-serif;
        text-align:center;
        color:rgb(105,105,105);
        padding-top:10px;
        padding-bottom:10px;
        text-transform: uppercase;
    }
    
    footer div.right-block div.block{
        font-size:14px;
        line-height: 120%;
    }
    
    footer h4{
        font-size:24px;
        font-family: 'Roboto', sans-serif;
        color:rgb(102,204,255);
        text-transform: uppercase;
        margin-top:40px;
    }

    footer h5{
        font-size:18px;
        font-family: 'Roboto', sans-serif;
        color:rgb(102,204,255);
        text-transform: none;
        margin-top:10px;
        margin-bottom:10px;
        line-height: 120%;
    }
    
    #main h2, #main h3, #main h4{
        margin-bottom:0px;
    }
    
    #main div.right-block h2{
        margin-bottom:20px;
    }

/* P */
    p {
       margin-bottom: 25px;
       line-height: 140%;
       font-family: 'Roboto', sans-serif;
    }
    
    ul.kuutiot li p{
        font-family: 'Roboto', sans-serif;
        color:rgb(102,102,102);
        font-size:0.9em;
        text-align: center;
        width:100%;
        margin-bottom:10px;
    }

    ul.kuutiot li p.long_kero{
        opacity:0;
        width:auto;
        margin:0 11.1111111111%;
        margin-top:20px;
        display:none;
    }
   
/* SPANNIT */

    span.bold{
        font-family: 'Galada', cursive;
		font-size:1.4em;
		text-align: center;
		color:#46A9D0;
		display:block;
		width:95%;
    }

	span.levi {
		font-size:1.75em;
	}

/* A */

    a{ 
        text-decoration: none;
        font-family: 'Roboto', sans-serif;
        font-size:14px;
        color:#46A9D0;
        text-transform: uppercase;
    }
    
    
    nav ul li a{
        border-bottom:10px transparent solid;
        display:block;
        margin-bottom:-1px;
    }
    
    nav ul li.valittu a, nav ul li:hover a{
        border-bottom:10px solid #46A9D0;
    }
      
    a.linkki-tekstissa{ text-transform: none; }

    a.button{
        text-transform: uppercase;
        background:rgb(102,203,255);
        border:2px solid rgb(102,203,255);
        box-shadow:2px 2px 5px rgb(51,51,51);
        text-align:center;
        line-height:40px;
        color:white;
        padding:0 30px;
        display:inline-block;        
        font-family: 'Roboto', sans-serif;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    
    a.button:hover{
        background:white;
        color:rgb(102,203,255);

        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }

/* KUVAT */

    ul.kuutiot li img{
        /*
        position:absolute;
        z-index:-1;
        margin-top:-200px;
        */
        margin-bottom:-6px;
        display:none;
    }
  
  /*----------PIKKUMENU --------------*/
	   
    div.menu{
        background:url('../layout/menu-icon.png');
        background-position: top center;
        background-repeat: no-repeat;
        height:25px;
        width:25px;
        float:right;
        margin-top:22px;
        margin-right:5px;
        display: none;
        cursor:pointer;
    }


/* FOOTER */
    
    footer{
        height:100px;
        width:100%;
        background:transparent;
		border-top:1px dotted #808080;
		color:#FFF;
		text-align:center;
		padding:15px 0 3px 0;
		font-family: 'Roboto', sans-serif;
		font-size:1.0em;
    }

	footer p {
		display:block;
		width:95%;
		font-size: 0.9em;
		padding:20px 0;
		}
     
    
/* BLOCKQUOTE */

    blockquote {
       font-size: 24px;
       line-height: 140%;
       margin-bottom: 25px;
       font-family: 'Roboto', sans-serif;
       width: 600px;
    }

    hr{
        height:1px;
        border:0;
        border-bottom:1px solid rgb(203,203,203);
    }


/* RESPONSIVE TYYLIT*/
	@media only screen and (max-width: 1680px) {
       
		body.frontpage {
			background-size: 100% 100%;
			background-position:0 530px;
			background-attachment: scroll;
		}
			footer p {
			display:block;
			width:95%;
			font-size: 0.9em;
			background:#000;
			margin: 0 auto 0 auto;
			padding:15px 0 15px 0;
			border: 1px solid #cacaca;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			-ms-border-radius: 5px;
			-o-border-radius: 5px;
			border-radius: 5px;
		}
    }

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



    @media only screen and (max-width: 1200px) {
        #main article.alasivut-linkkeina div{ font-size:20px; }
		
    }

    @media only screen and (max-width: 1024px) {
        article, #main article.target, #main-etusivu article, section.ala article, footer div.footer-info, footer div.footer-info-etusivu{ width:94%; }
        .flex-direction-nav .flex-prev { left: 2.5%;}
        .flex-direction-nav .flex-next { right: 2.5%;}
        #main article.center{ width:80%; }
		      
    }
    
    @media only screen and (max-width: 950px) {
        nav ul{ width:100%; }
        nav div.logo{ margin-top:15px; width:50%; padding-left:30px; }
        nav div.logo img{ max-width:200px; }
        nav ul { line-height: 30px; margin-top:10px; }
        nav ul{ width:100%; float:none; text-align:center; clear:both; }
        nav ul li{ margin-left:3%; margin-right:3%; line-height:30px; }
        nav ul li:first-of-type{ margin-left:0%; }
        nav ul li:last-of-type{ margin-right:0%; }
        nav ul li a{ font-size:14px; border-bottom:5px transparent solid; }
        nav ul li.valittu a, nav ul li:hover a{ border-bottom:5px rgb(0,168,210) solid; }
        header.etusivu, header.muut{ margin-top:120px; }
        header.alilinkit{ margin-top:170px; }

        h1{ font-size:36px; }
        h2{ font-size:28px; }
        ul.kuutiot li h2{ font-size: 18px; }
        ul.kuutiot li h3{ font-size: 24px; }
        header h1{ font-size:50px; padding-top:280px; }
        ul.sublinks{ text-align:center; }
        ul.sublinks li { margin-left:2%; margin-right:2%; }
		body.frontpage {
			background-size: 100% 100%;
			background-position:0 430px;
			background-attachment: scroll;
		}
      
    }
    
    @media only screen and (max-width: 770px) {
        article, #main-etusivu article, section.ala article, footer div.footer-info, footer div.footer-info-etusivu{ width:100%; border-left:none; border-right:none; }
        div.left-block, div.right-block{
            width:100%;
            float:none;    
        }

        #main div.left-block{ border-bottom: 1px solid rgb(203,203,203); }
        
         section.ala article{
            border:none;
            height:auto;
        }

		body.frontpage {
			background-size: 100% 100%;
			background-position:0 530px;
			background-attachment: scroll;
		}
        
        section.ala div.left-block, section.ala div.right-block{
            border:none;
            height:auto;
        }
        
        section.ala div.block{
            height:auto;
        }
        
        /*footer{ height:auto; }*/
        footer div.footer-info, footer div.footer-info-etusivu{ text-align: center; padding-left:3.5%; padding-right:3.5%; }
        
        footer div.left-block{ height:auto; }
        
        div.right-block, footer div.right-block{
            border:none;
            height:auto;
        }        
               
        ul.kuutiot li p.long_kero{
            font-size:12px;   
        }
		ul.kuutiot li h2{ font-size: 16px; }

       }
    
    @media only screen and (max-width: 660px) {
        nav{ min-height:40px; }
        nav ul, div.sublinks{ display:none; }
        nav ul{ width:100%; text-align:center; } 
        nav ul li{ width:49%; margin:0; padding:0; text-align:center; margin-bottom:5px;}
        nav ul li a{ border-bottom:none; }
        nav ul li.valittu a, nav ul li:hover a{ border-bottom:none; background: rgb(0,168,210); color:white; border-radius:4px; }
        
        div.sublinks ul{ width:100%; margin:0; padding:0; padding-bottom:10px; padding-top:10px; text-align:left;}
        div.sublinks ul li{ width:47%; margin-left: 0; text-align:center; line-height:25px; }
        
        div.menu{ display:block; }
        nav div.logo{ padding-bottom:10px; width:75%;}
        header.etusivu, header.muut, header.alilinkit{ margin-top:60px; }

        h1{ font-size:30px; }
        h2{ font-size:24px; }
        header h1{ font-size:30px; padding-top:50px; }
        ul.sublinks{ text-align:center; }
        ul.sublinks li { margin-left:2%; margin-right:2%; }

        header.muut, header.muut div.slides, header.muut ul.slides, header.muut ul.slides li, header.muut ul.slides li div.slide{
            height:200px;
        }

        header.etusivu, header.etusivu div.slides, header.etusivu ul.slides, header.etusivu ul.slides li, header.etusivu ul.slides li div.slide{
            height:300px;
        }
		.slides H1{
            padding-top:20%;
        }
        
        .flex-direction-nav a{ top:100px; } 
        
        section#kuutiot{ display:none; }
        section#main-etusivu{ margin-top:0px; border-top:none; }
        section#main-etusivu div.left-block{ padding-top:0; }
        
        div.w30, div.w40{ width:100%; padding-bottom:20px; text-align:left;}
              
        footer div.kuvakkeet, footer div.fb, footer div.info{ width:100%; margin:0 auto; float:none; text-align:center; padding-bottom:25px; clear:both; }
        
        footer div.left-block img, footer div.left-block p{ float:none; margin-left:5%; margin-right:5%; }
        
        footer div.left-block{ padding-bottom:0; border-bottom:1px solid rgb(203,203,203); }
        
        div.teksti-kuvilla, div.kuvat{ width:100%; float:none; }
    }
    
    @media only screen and (max-width: 440px) {
        nav ul li, div.sublinks ul li{ width:100%; }    
    }