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

.cl{ clear:both; }


/*******************************/
/* BODY-ELEMENTIT ALKAA        */
/*******************************/
    html,body{
        margin:0;
        padding:0;
        border:none;
        height:100%;
        width:100%;
   }
    
    body {
        font-family: "Roboto";
        font-size: 16px;
        font-weight:400;
        color: white;
        padding:0px;
    }
    
    body,p,span,div{ color:#3C3C3B; line-height:150%; }


/* DIV */

	#container{
		position:relative;
	  	min-height:100%;
	  	height:100%;
		width:100%;
	    voice-family: "\"}\"";
	    voice-family: inherit;
	    height: auto;
	}

	html>body #container {
    	height: auto;
	}    
        
    div.main{ min-height:300px; }

    div.slides{
        margin-top:80px;
    }

    div.slides, div.slide{ height:600px; width:100%; }
    
    div.img_slides, div.img_slide{ text-align:center; width:100%; }
    div.img_slide img{ margin:0 auto; }

    div.img_slides .slick-prev, div.img_slides .slick-next { line-height:30px; font-size:30px; text-shadow:0px 0px 3px rgb(51,51,51); }

    
    div.content{
        width:100%;
        max-width:1200px;
        margin:0 auto;
        padding-left:30px;
        padding-right:30px;
    }
    
    nav div.content{ padding:0; }
    
    div.content.main{
        min-height:300px;
    }
    
    div.kielet{
        padding-top:15px;
        line-height:100%;
    }
    

    div.kotisivujen-suunnittelu{
        float:left;
        padding-left:24px;
        padding-top:16px;
    }

    div.kotisivujen-suunnittelu a{
        color:white;
        font-size:10px;
        font-weight:bold;
    }

    div.kotisivujen-suunnittelu a:hover{
        color:white;
        font-size:10px;
        font-weight:bold;
        text-decoration:underline;
    }
    
    div.suunnittelu{ text-align:center; padding-top:40px;}

    div.menu{
        display:none;
        float:right;
        width:60px;
        height:60px;
        line-height:60px;
        cursor:pointer;
        text-align:center;
    }
    
    div.menu a{ display:block; }
    div.menu a i.fa{ vertical-align:middle; font-size:32px; }

    div.taulukko, div.taulukkos{
       width:100%;
       float:left;
    }
    
    div.taulukko h3, div.taulukkos h3{
        background:#EDEDED;
        text-align:center;
        padding:15px 0;
        border-top: 5px solid #E51F2C;
    }

    .bg-lightgrey{ background:#F6F6F6; }
    .bg-grey{ background:#EDEDED ;}
    
    div.taulukko_solu2{
        width:50%;
        float:left;
        padding:5px 2%;
        max-width:90px; 
    }
    
    div.taulukko_solu3{
        width:33%;
        float:left;
        padding:5px 2%;
        padding-bottom:5px;
    }
    
    div.taulukko_solu4{
        width:25%;
        float:left;
        padding:5px 2%;
        padding-bottom:5px;
    }
    
    div.taulukko_solu5{
        width:20%;
        float:left;
        padding:10px 1%;
        padding-bottom:5px;
    }
    
    div.taulukko_solu2:nth-of-type(2n){ text-align:right; }
    div.taulukko_solu2:nth-of-type(2n+1){ clear:both; }
    /*div.taulukko_solu3:nth-of-type(3n+1){ clear:both; }*/
    .cl_ie{ clear:both; }

    div.taulukkos_solu2, div.taulukkos_solu1{
        width:50%;
        float:left;
        padding-right:2%;
        padding-bottom:5px;
    }
    
    div.taulukkos_solu2:nth-of-type(2n){
        padding-left:2%;
        padding-right:0;
    }

    div.taulukkos_solu3{
        width:33.33333333333333%;
        float:left;
        padding-right:2%;
        padding-bottom:5px;
    }
    
    div.taulukkos_solu3:nth-of-type(3n){
        padding-left:2%;
        padding-right:0;
    }
    
    div.taulukkos_solu3:nth-of-type(3n+2){
        padding-left:1%;
        padding-right:1%;        
    }
    
    div.nostot{
        margin-top: -157px;
    }

    div.taulukkos_solu4{
        width:25%;
        float:left;
        text-align:center;
        padding-bottom:5px;
    }


/* TD */

    td{ vertical-align:top; padding-right:20px;}

/* FOOTER */

     footer{
        width:100%;
        background-color:#3C3C3B;
        padding:0;
        margin:0;
    }

    footer img.maskotti-poika, footer img.maskotti-tytto{
        margin-bottom:50px;
    }

    footer img.maskotti-poika{
        margin-top:-30px;
        margin-right:25px;
        width:190px;
    }
    
    footer img.maskotti-tytto{
        margin-top:-50px;
    }

    footer h5{ 
        color:#F6F6F6;
        margin-top:0;
        margin-bottom:0; 
    }

    footer p, footer a, footer span{ 
        font-family:"Roboto";
        font-weight:300; 
        color:#F6F6F6; 
        font-size:12px;
    }
    
    footer p{
        line-height:140%;
        margin:0;
    }
    
    footer a:hover{
        color:#F6F6F6; 
        text-decoration: underline;
    }
    

/* NAV, UL, LI */

    nav{ 
        background:white;
        box-shadow:0px 2px 8px rgb(51,51,51);
        width:100%;
        height:80px;
        position:fixed;
        top:0;
        left:0;
        z-index:2;
    }

    nav div.logo{ 
        float:left; 
        line-height:100px;
        text-align:center;
        margin-top:14px;
        padding-right:1%;
    }
    
    nav div.logo img{
        vertical-align:bottom;
    }

    nav ul{
        float:left;
        margin:0;
        padding:0;
        padding-left:1%;
        line-height:78px;
        vertical-align: middle;
        list-style:none;
        text-align:left;
        display: block;
    }

    nav ul li{
        margin:0;
        padding:0;
        margin-top:-4px;
        display:inline-block;
        margin-left:-4px;
        text-align:left;
        vertical-align: middle;
        position:relative;
    }
    

    nav ul li a{
        font-weight:700;
        padding:2px 20px;
        display:block;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }

    nav ul li a:hover, nav ul li a.valittu{
        background:#E51F2C;
        color:white;
        position:relative;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    
    
    nav ul li ul.sublinks{
        line-height:normal;
        display:none;
        position:absolute;
        top:82px;
        left:0;
        background:white;
        padding:0;
        box-shadow:0px 2px 4px rgb(153,153,153);
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }

    nav ul li:hover ul.sublinks{
        display: list-item;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    
    nav ul li ul.sublinks li{
        display:list-item;
        float:none;    
        width:300px;
        padding:0;
        margin:0;
    }
    
    nav ul li ul.sublinks li a{
        color:#3C3C3B;
        font-family:"Roboto";
        font-weight:500;
        font-size:16px;
        padding:12px 15px;
        line-height:150%;
    }
    
    nav ul li ul.sublinks li a:hover, nav ul li ul.sublinks li a.valittu{
        color:white;
    }
    
    ul.linkit-alas{
        list-style:none;
        margin:-30px 0 30px;
        padding:0;
    }
    
    ul.linkit-alas li{
        display: inline-block;
        padding:0;
        margin:0;
        margin-left:-4px;
        /* padding-right:60px; */
        
        vertical-align:top;
    }
    
    ul.linkit-alas > li{
        width:20%;
    }

    ul.linkit-alas li a{
        font-family:"Roboto";
        font-weight:700; 
        color:#F6F6F6; 
        font-size:12px;
        text-transform:uppercase;
    }

    ul.linkit-alas li ul.alilinkit-alhaalla{
        margin:0;
        padding:0;
    }

    ul.linkit-alas li ul.alilinkit-alhaalla li{
        display:list-item;    
        padding:0;
        margin:0;
        line-height:110%;
    }

    ul.linkit-alas li ul.alilinkit-alhaalla li a{
        text-transform:none;    
        padding:0;
        margin:0;
        font-size:12px;
        font-weight:300;
    }

    ul.footer-napit{
        list-style:none;
        margin:0;
        padding:0;
        vertical-align:top;
    }

    ul.footer-napit li{
        vertical-align:top;
        display: inline-block;
        text-align:center;
        cursor:pointer;
    }
    
    ul.footer-napit li a{
        background:#F6F6F6;
        margin:0 5px;
        width:40px;
        height:40px;
        border-radius:50%;
        line-height:40px;
        display:block;
        text-align:center;
    }
    
    ul.footer-napit li i.fa{
        color:#3C3C3B;
        font-size:20px;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }

    ul.footer-napit li:hover i.fa{
        color:#E51F2C;        
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    
    ul.footer-napit li i.fa.fa-arrow-up, ul.footer-napit li i.fa.fa-twitter, ul.footer-napit li i.fa.fa-youtube{ font-size:21px; }

    ul.footer-napit li i.fa.fa-home{ font-size:23px; margin-top:7px;}
    ul.footer-napit li i.fa.fa-facebook, ul.footer-napit li i.fa.fa-twitter, ul.footer-napit li i.fa.fa-envelope, ul.footer-napit li i.fa.fa-twitter, ul.footer-napit li i.fa.fa-arrow-up{ margin-top:10px;}
    
    
/* H1, H2... */

    h1,h2,h3,h4,h5 { 
        font-family: "Roboto";
        text-transform: uppercase;
    	font-weight: 400;
        color:#3C3C3B;
    }
    
    h1{
        font-family: "Roboto slab";
        font-size:32px;
        font-weight:700;
        color:#E51F2C;
        text-transform: uppercase;
        line-height:110%;
        margin-top:0;
    }
    
    h2{
        font-size:24px;
        font-weight:700;
    }
    
    h3{
        font-size:21px;
        font-weight:500;
    }
    
    div.nostoalue:nth-of-type(2n+1){ clear:both; }
    
    div.nostoboksi h3{
        background:#EDEDED;
        text-align:center;
        width:100%;
        line-height:50px;
        margin-bottom:0!important;
        margin-top:0;
        padding-bottom:0!important;
    }
    
    h4{
       margin:0;
       font-size:18px;
       text-transform: none; 
       font-weight:500;
    }
    
    h5{
        font-size:12px;
    }
    
    div.sisalto h2, div.sisalto h3, div.sisalto h4, div.sisalto h5{
        margin:0;
    }
    
    
/* P */

    div.txt{    
        color:#3C3C3B;
    }    
    
    div.nostoboksi h4{
        padding-top:0px;
        margin-bottom:2px;
    }
        
    div.nostoboksi p.mt{
        margin-top:15px;
        font-weight:300;
        color:#3C3C3B;
        font-size:15px;
        padding-bottom:30px;
        margin-bottom:0;
    }

    div.nostoboksi span{
        font-size:12px;
        font-weight:300;
        margin:0;
        padding:0;
    }
    
    div.nostoboksi table{
        width:100%;
        border-collapse: collapse;
    }
    
    div.nostoboksi table td{
        font-size:14px;
        white-space: nowrap;
        padding:10px 15px 10px 0;
        line-height:130%;
    }
    
    div.nostoboksi table td.pl30{
        padding-left:30px;    
    }

    div.nostoboksi table td.pr30{
        padding-right:30px;    
    }
    
    div.nostoboksi table td.wrap{
        white-space: normal;
    }
    
    div.nostoboksi table tr.white{
        background-color:white;
    } 
    
/*******************************/
/* A-ELEMENTIT ALKAA           */
/*******************************/
    a{ 
		color:#E51F2C;
		font-family:"Roboto condensed";
		font-size:21px; 
	  	text-decoration:none;
	}

    nav ul li a{
        text-transform:uppercase;
    }

	a:hover{
        color:#3C3C3B;
	}
    
    div.kielet a{
        font-family: "Roboto Condensed";
        font-size:11px;
        font-weight:400;
        color:#878787;
        display:block;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;

    }
    
    div.kielet a:hover, div.kielet a.valittu{
        color:#E51F2C;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    
    a.alilinkki{
        display:block;
        color:white;
        font-size:14px;
        font-weight:600;
        text-shadow: black 1px 1px 1px;
        filter:DropShadow(Color=#000000, OffX=1, OffY=1);
    }
    
    a.alilinkki:hover{
        text-decoration: underline;
    }
    
	a.kieli{
	  	font-size:11px;
		color:white;
	}

	a.kieli_valittu, a.kieli:hover{
	  	font-size:11px;
		color:white;
        text-decoration:underline;
	}
    
    a.hurmos_linkki{
        font-size:10px;
        font-weight:bold;
        color:rgb(102,102,102);
        text-decoration:none;
    }
    
    a.pieni_linkki:hover{
	  	text-decoration:underline;
	}
    
    a.linkki-tekstissa{
        font-family:"Roboto";
        font-weight: normal;
        font-size:16px;
    }

    a.linkki-tekstissa:hover{
        text-decoration:underline;        
    }

    a.nosto{
        background:#E51F2C;
        color:white;
        font-family:"Roboto condensed";
        font-size:21px;
        padding:15px;
        text-transform: uppercase;
        text-align:center;
        width:75%;
        margin:0 auto;
        display:block;
        box-shadow:0px 0px 3px rgb(51,51,51);
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }

    a.nosto:hover{
        color: #E51F2C;
        background:white;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }



    a.button{
        background:#E51F2C;
        color:white;
        font-family:"Roboto condensed";
        font-size:18px;
        padding:8px 30px;
        text-transform: none;
        text-align:center;
        box-shadow:0px 0px 3px rgb(51,51,51);
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }

    a.button:hover{
        color: #E51F2C;
        background:white;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    
    div.footer div.info a{
        font-family:"Times new roman";
        font-weight: normal;
        font-size:14px;
        color:rgb(153, 204, 255);
    }

    div.footer div.info a:hover{
        text-decoration: underline;   
    }

    a.puh-link{ display:none; }

    a.sublink{ font-size:16px; display:block; }


/* IMG */
    
    img{ border:0px; max-width:100%; }
    div.nosto img{ border: 1px solid rgb(51,51,51); width:100%; }
    div.footer div.info img{ max-width:140px; }
    img.thumb{ border:20px solid rgba(255,255,255,0.25); width:66.6666666666666666666%; max-width:400px; margin-bottom:30px; }
    
    div.tukijat-logo{ width:50%; float:left; text-align:center; padding:50px 0; }
    div.tukijat-logo img{ margin:0 auto; }
        
    
/* SPAN */

	span.bold{ font-weight:bold; }
	span.underline{ text-decoration:underline; }
    span.italic{ font-style:italic; }
    span.puh-txt{ display:inline; }
    

/* UL, OL */
    ul.lista, ol{ margin:0; padding:0; padding-left:20px; margin-left:20px; }
    ul.lista li, ol li{ padding-bottom:10px; float:none; display: list-item; }

    ul.logot{ margin:0; padding:0; list-style:none; text-align:center; }
    ul.logot li{ width:25%; display:inline-block; margin-left:-4px; text-align:center; }


    #fb-root {
        display: none;
    }
    
    /* To fill the container and nothing else */
    
    .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
        width: 100% !important;
    }
    
    iframe{ bordeR:0; }

    p.pvm{ font-size:12px; color:rgb(153,153,153); margin-top:-10px;}


/* YLEISET */

    .clickable{ cursor: pointer; }
    .bold{ font-weight:bold;}
    .float-left{ float:left; }
    .float-right{ float: right; }
    .pl30{ padding-left:30px; }
    .pt20{ padding-top:20px; }
    .pt14{ padding-top:14px; }
    .border-bottom{ border-bottom:1px solid rgb(153,153,153); }
    .border-right{ border-right:1px solid rgb(153,153,153); }
    .border{ border:1px solid rgb(153,153,153); }
    .left-content{ padding:0 30px; }
    .right-content{ padding:0 30px; }
    .footer-content{ padding:0 60px; }
    .center{ text-align:center; }
    .justify{ text-align:justify; }
    .right{ text-align:right; }    
    .pointer{ cursor: pointer; }
    .pl20{ padding-left:20px; }
    .pl30{ padding-left:30px; }
    .pl60{ padding-left:60px; }
    .pr30{ padding-right:30px; }
    .p20{ padding:20px; }
    .p30{ padding:30px; }
    .pt10{ padding-top:10px;}
    .pt20{ padding-top:20px;}
    .pt30{ padding-top:30px;}
    .pt60{ padding-top:60px;}
    .pb60{ padding-bottom:60px; }
    .pb30{ padding-bottom:30px;}
    .mb10{ margin-bottom:10px!important; }
    .mb20{ margin-bottom:20px!important; }
    .mb30{ margin-bottom:30px!important; }
    .ml30{ margin-left:30px; }
    .mr30{ margin-right:30px; }
    .mt30{ margin-top:30px; }
    .mt-30{ margin-top:-30px; }
    .mt60{ margin-top:60px; }
    .mt90{ margin-top:90px; }
    .relative{ position: relative; }
    .border-top-red{ border-top: 5px solid #E51F2C; }
    .bg-lightgrey{ background:#F6F6F6; }
    .bg-grey{ background:#EDEDED ;}
    .bg-black{ background:rgb(15,15,15);}
    .mh500{ min-height:450px; }
    .uc{ text-transform: uppercase; }
    .mauto{ margin-left:auto; margin-right:auto; }

    hr.grey{
        border:0;
        border-bottom: 1px solid rgb(153,153,153);
    }
    
    
/* MEDIA QUERYT */

@media only screen and (max-width: 1400px) {
    nav ul li a{ padding-left:15px; padding-right:15px; }
    nav div.content{ width:94%; }
    div.slides, div.slide{ height:400px; }
    ul.footer-napit li{ margin:0 5px; }
}

@media only screen and (max-width: 1150px) {
    nav ul li a{
        font-size:19px;
        padding:2px 8px;
    }
}

@media only screen and (max-width: 1023px) {
    div.menu{ display:block; }

    nav{ height:70px; }
    nav div.logo{ padding-left:20px; margin-top:5px; text-align:left; max-width:150px; line-height:normal;}
    nav div.logo.col-3{ width:50%!important; }
    nav div.content{ width:100%; padding:0; }
    nav ul{ display:none; width:100%; position:absolute; top:70px; min-width:100%; background: white; border-bottom:1px solid rgb(153,153,153); padding:0; margin:0; line-height:60px; padding-top:20px; box-shadow:0 0px 5px rgb(153,153,153); }
    nav ul li{ width:25%; vertical-align:top; line-height:40px;}
    nav ul li a{
        font-size:20px;
        padding:2px 15px;
    }

    nav ul li ul.sublinks{ width:100%; display:list-item; position:relative; top:auto; box-shadow:0 0 0; border:none;}
    nav ul li ul.sublinks li{ width:100%; }
    nav ul li ul.sublinks li a{ padding:10px 15px; font-size:14px; }

    div.kielet{ padding-top:10px; }
    div.slides{ margin-top:70px; }

    ul.nostot li{ width:50%; }
    ul.nostot li h2{ font-size:22px; }
    ul.nostot li img, ul.nostot li h2{ max-width:300px; margin-left:auto; margin-right:auto; }
    footer div.col-4, footer div.col-8{ width:100%; float:none; text-align:center; }
    ul.linkit-alas li{ padding-right:30px; }
    
}

@media only screen and (max-width: 768px) {
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6 .col-7, .col-8, .col-9, .col-10, .col-11 { width: 100%; }
    div.taulukkos_solu2, div.taulukkos_solu3{ width:100%;}
    div.taulukkos_solu4{ width:50%;}
    div.taulukkos_solu2:nth-of-type(2n){ padding:0px; }
    div.taulukkos_solu2:nth-of-type(2n+1){ padding:0px; }
    div.taulukkos_solu2{ padding-bottom:30px!important; }
    div.taulukkos_solu3{padding:0!important;}   
    nav div.logo.col-3{ width:50%!important; }
    div.kielet.col-1{ width:10%!important; }
    ul.logot li{ width:50%; }
    div.col-8.pr30{ padding-right:0; }
    div.col-4.pl60{ padding-left:0; padding-top:0px; }
    
    footer div.col-10{ width:70%; }
    footer div.col-2{ width:30%; }
    
    ul.linkit-alas > li{ width:50%; padding-right:20px; margin-left:-4px; margin-bottom:20px; }
    
    ul.footer-napit li a{ margin:10px auto; }
    nav{ position: absolute; }
    div.nostot div.col-6{ width:100%; padding-left:0; padding-right:0; }
    div.nostot{ margin-top:-157px; }
    div.nostoboksi{ margin-top:30px; }
    .mh500{ min-height:0; }
    div.slides, div.slide{ height:300px; }
    
    div.taulukko{ font-size:13px; }
    div.taulukko h4{ font-size:16px; }
    nav ul li{ width:50%; padding-bottom:20px; }
    nav ul li ul.sublinks li a{ padding:5px 15px; }
}

@media only screen and (max-width: 640px) {
    a.nosto{ width:100%; }
    div.content{ padding-left:15px; padding-right:15px; }
    ul.lista, ol{ padding-left:10px; margin-left:10px; }
    div.sisalto.pt60{ padding-top:30px; }
    div.sisalto.pb60{ padding-bottom:30px; }
    div.taulukkos_solu4{ width:100%;}
}

@media only screen and (max-width: 500px) {
    footer div.col-10{ width:40%; }
    footer div.col-2{ width:50%; }

    ul.linkit-alas > li{ width:100%; padding-right:0px; margin-left:0px;}
    ul.logot li{ width:100%; }    
    div.kielet.col-1{ width:20%!important; }
    ul.footer-napit li{ width:33.33333333333%; margin-left:-4px; margin-right:0; text-align:center; }
    div.slides{ display:none; }
    nav{ position: relative; }
    div.nostot{ margin-top:30px; }
    div.tukijat-logo{ width:100%; }
    h1{ font-size:28px; }
    div.taulukko{ font-size:12px; }
    div.taulukko h4{ font-size:14px; }
}

@media only screen and (max-width: 360px) {
    footer div.col-10, footer div.col-2{ width:100%; text-align:center;}
    footer h5, footer a, footer p, ul.linkit-alas li a, ul.linkit-alas li ul.alilinkit-alhaalla li a{ font-size:14px; }
    ul.alilinkit-alhaalla li{ margin: 10px 0!important;}
    nav ul li{ width:100%; }
    nav ul li ul.sublinks li a{ padding:10px 15px; }
    h1{ font-size:24px; }
    h2{ font-size:20px; }
    h3{ font-size:18px; }
}

@media only screen and (max-width: 260px) {
    ul.footer-napit li{ width:50%; }    
}