*,*: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:'Trade Gothic Next W01';
        font-size: 18px;
        color: #575756;
        padding:0px;
        line-height:150%;
    }


/*******************************/
/* DIV-ELEMENTIT ALKAA         */
/*******************************/

    div.page{ height:100%; min-height:100%; position:relative; margin-top:0px; }

    div.content{
        width:100%;
        max-width:1200px;
        margin:0 auto;
    }

    div.pattern-img{
        background-image:url('../layout/kuosi-ylatausta.png');
        background-repeat:repeat;
        background-position:center top;        
        height:174px;
        position:relative;
        z-index:100;
    }

    div.pattern{
        background-image:url('../layout/kuosi.png');
        background-repeat:repeat;
        background-position:center;
        background-color:white;
        height:140px;
        position:relative;
    }

    div.pattern div.yla{
        background:url('../layout/valkoinen-yla-tausta.png');
        background-repeat:repeat-x;
        background-position:center top;
        position:absolute;
        bottom:0;
        width:100%;
        height:140px;
    }

    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.taulukko{
       width:100%;
       float:left;
    }
    
    div.rivitaulukko_solu2{
        width:50%;
        float:left;
        padding-bottom:5px;
    }

    div.rivitaulukko_solu2:nth-of-type(2n+1){ clear:both; }
    
    div.rivitaulukko_solu3{
        width:33%;
        float:left;
        padding-bottom:15px;
    }
    
    div.rivitaulukko_solu3:nth-of-type(3n+1){ clear:both; }

    .cl_ie{ clear:both; }

    div.saraketaulukko_solu2{
        width:50%;
        float:left;
        padding-bottom:5px;
    }

    div.saraketaulukko_solu2:nth-of-type(2n){ padding-left:15px; }
    div.saraketaulukko_solu2:nth-of-type(2n+1){ padding-right:15px; }

    div.saraketaulukko_solu3{
        width:33.33333333333%;
        float:left;
        padding-bottom:5px;
    }
    
    div.saraketaulukko_solu3:nth-of-type(3n+1){ padding-right: 10px; }
    div.saraketaulukko_solu3:nth-of-type(3n+2){ padding-right: 5px; padding-left:5px;}
    div.saraketaulukko_solu3:nth-of-type(3n){ padding-left: 10px; }

    div.saraketaulukko_solu4{
        width:25%;
        float:left;
        padding-bottom:5px;
    }

    div.saraketaulukko_solu5{
        width:20%;
        float:left;
        padding-bottom:5px;
        padding-right: 5px; padding-left:5px;
    }

    div.saraketaulukko_solu5:nth-of-type(5n+1){ padding-right: 10px; padding-left:0; }
    div.saraketaulukko_solu5:nth-of-type(5n){ padding-left: 10px; padding-right:0; }


    div#map-canvas{
        width:100%;
        height:400px;
        border:1px solid #1F2837;
    }

    div.img-box{
        max-width:100%;
        width:240px;
        height:240px;
        border:1px solid rgb(204,204,204);
        background:rgb(240,240,240);
    }
    
    div.ingressi{
        font-size:21px; 
        font-family:'Metronic W01 Light Italic';
    }
    
    div.ok_teksti{
        color:green;
    }
    
    div.virhe_teksti{ color:red; }

    div.width50{ width:50%; }
    
    
/* H1, H2... */

    h1,h2,h3,h4,h5 { 
        text-transform: none;
    	font-weight: normal;
        color:#3C3C3B;
        margin:0;
    }
    
    h1{
        font-family:'LeituraW01-DisplayRoman';
        font-size:48px;
        line-height:110%;
        margin-bottom:40px;
    }
    
    h2, .h2{
        font-family:'TradeGothicNextW01-Heav_693241';
        font-size:32px;
        line-height:125%;
    }
    
    h3, .h3{
        font-family:'TradeGothicNextW01-Bold_693229';
        font-size:21px;
        line-height:125%;
    }
    
    h4{
        font-family:'Trade Gothic Next W01';
        font-size:21px;
    }

    .main h2, .main h3, .main h4, .main h5{
        margin-top:0;
        margin-bottom:0px;
    }
    
    #map-canvas h5{ line-height:100%; margin-bottom:5px; }
    
    #map-canvas #map-details{ line-height:14px!important; }
    
    
    
/*******************************/
/* A-ELEMENTIT ALKAA           */
/*******************************/
    a{ 
	  	text-decoration:none; 
	}

	a:hover{

	}
    

	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:'Trade Gothic Next W01';
        font-size: 18px;
        font-weight: normal;
        color:#124395;
    }

    div.boxi div.txt p a.linkki-tekstissa{
        font-size:16px;
    }

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

    a.puh-link{ 
        display:none; 
    }
    
        
/* IMG */
    
    img{ border:0px; max-width:100%; }
    #map-canvas img{ max-width: none; }

    
/* SPAN */

	span.bold{ 
	   font-family:'TradeGothicNextW01-Bold_693229'; 
       font-weight:normal; 
    }
	span.underline{ text-decoration:underline; }
    span.italic{ font-style: italic; }
    span.puh-txt{ display:inline; }
    
    
/* P */

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


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


/* INPUT */

    div.lomake-otsikko{ padding-bottom:2px; padding-top:4px;}

    input.lomake-kentta, textarea.lomake-kentta, select.lomake-kentta{
        width:100%;
        padding:3px 6px;
        font-family:'Metronic W03 Regular';
        font-weight: normal;
        font-size: 18px;
        color: #2E2D2C;
    }

/* KIELET */

    div.kielet{
        position:absolute;
        right:20px;
        top:5px;
        z-index:100;
    }
    
    div.kielet a{
        font-family:'Trade Gothic Next W01';
        font-size:12px;
        color:#9D9D9C;
        text-transform: uppercase;
        margin-right:5px;
    }
    
    div.kielet a.valittu, div.kielet a:hover{ 
        color:#124395;
    }


/* NOSTOT */
    
    div.boxi{
        box-shadow:0px 0px 5px rgba(204,204,204,0.5);
        border:1px solid rgb(204,204,204);
        border-top:5px solid #C71729;
        position:relative;
    }
    
    div.virta.boxi{
        margin-bottom:60px;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    
    div.boxi div.kuva{
        border-bottom:1px solid rgb(204,204,204);        
        text-align:center;
    }
    
    div.tapahtuma div.kuva{
        border:none;
    }
    
    div.tapahtuma div.kuva a{
        display:block!important;
    }
    
    div.tapahtuma div.kuva a img{
        margin:0 auto;
        vertical-align:middle;
    }
    
    div.nosto div.kuva, div.virta div.kuva.bg-grey{
        height:350px;
        line-height:350px;
        overflow:hidden;
    }

    div.boxi div.kuva img{
        vertical-align:middle;
    }

    div.boxi div.txt{
        padding:30px;
    }

    div.nosto div.txt{
        height:300px;
        overflow:hidden;
    }

    div.boxi div.txt p{
        font-size:16px;
        line-height:135%;
    }

    div.boxi div.napit{
        height:50px;
        border-top:1px solid rgb(204,204,204);
    }

    div.boxi div.napit div{
        line-height:50px;
        text-align:center;
    }
    
    div.pvm{
        background:#C71729;
        width:80px;
        height:80px;
        color:white;
        position:absolute;
        top:0;
        right:0;
        text-align:center;
        font-family:'TradeGothicNextW01-Heav_693241';
    }
    
    div.pvm span.p{ 
        font-size:26px;
        margin-top:8px;
        margin-bottom:7px; 
        display:block;
    }

    div.pvm span.kk, div.pvm span.v{ 
        font-size:11px; 
        font-family:'TradeGothicNextW01-Bold_693229';
        text-transform: uppercase;
        display:block;
        line-height:120%;
    }

    div.boxi div.some{
        cursor:pointer;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }    
    
    div.boxi div.some:hover{
        background:#124395;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }

    
    div.boxi span.fa{
        color:#124395;
        font-size:20px;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    
    div.boxi div.some:hover span.fa{
        color:white;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }


/* SLIDE */

    div.slide{ 
        height:600px; margin-top:100px; text-align:center; 
    }

    div.page, div.slide.etusivu{ height:100%; min-height:100%; position:relative; margin-top:0px; }

    div.slide div.content{
        bottom:120px;
        position:absolute;
        width:1100px;
        left:50%;
        margin-left:-550px;
    }
    
    div.slide.etusivu div.content{
        bottom:30%;
    }

    div.slide p{
        color:white;
        font-size:42px;
        text-shadow:0px 0px 4px #3C3C3B;
        font-family:'LeituraW01-DisplayRoman';
        line-height:125%;
        display:none;
    }

    div.slide a{
        position:absolute;
        bottom:60px;
        height:60px;
        width:60px;
        background:rgb(255,255,255);
        left:50%;
        margin-left:-30px;
        display:none;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }

    div.slide a:hover{
        background:#124395;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }

    div.slide a span.fa{
        font-size:50px;
        line-height:60px;
        color:#124395;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }

    div.slide a:hover span.fa{
        color:white;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }


/* NAV */

    nav{
        position:fixed;
        background:white;
        width:100%;
        height:130px;
        top:0;
        z-index:3;
        -webkit-transition:0.5s ease;
        -moz-transition: 0.5s ease;                 
        -o-transition: 0.5s ease;   
        -ms-transition: 0.5s ease; 
        transition:0.5s ease;
    }

    nav.shrink{ 
        height:90px; 
        border:1px solid rgb(204,204,204);
        -webkit-transition:0.5s ease;
        -moz-transition: 0.5s ease;                 
        -o-transition: 0.5s ease;   
        -ms-transition: 0.5s ease; 
        transition:0.5s ease;
    }

    nav ul{
        list-style:none;
        margin:0;
        padding:0;
        width:100%;
        text-align:center;
        position:relative;
    }

    nav ul li{
        list-style:none;
        float:left;
        text-align:left;
        padding:0 0 0 35px;
        line-height:130px;
        -webkit-transition:0.5s ease;
        -moz-transition: 0.5s ease;   
        -o-transition: 0.5s ease;
        -ms-transition: 0.5s ease;
        transition:0.5s ease;
    }
    
    nav ul li:first-of-type{ padding-left:0; }
    
    nav.shrink ul li{
        line-height:90px;
        -webkit-transition:0.5s ease;
        -moz-transition: 0.5s ease;                 
        -o-transition: 0.5s ease;   
        -ms-transition: 0.5s ease; 
        transition:0.5s ease;
    }

    nav ul li a{
        font-family:'TradeGothicNextW01-Bold_693232';
        font-size:18px;
        color:#124395;
        text-transform: uppercase;
    }

    nav ul li a:hover, nav ul li a.valittu{
        color:#C71729;
    }

    nav div.logo{ 
        line-height:120px;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }

    nav.shrink div.logo{
        line-height:80px;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }

    nav div.logo img{ 
        height:90px; 
        vertical-align:middle;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    
    nav.shrink div.logo img{ 
        height:60px; 
        vertical-align:middle;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    

    div.menu{
        display:none;
        float:right;
        width:40px;
        margin-right:20px;
        margin-top:0px;
        line-height:100px;
        vertical-align:middle;
        text-align:center;
        cursor:pointer;
    }
    
    div.menu a{ display:block; }
    div.menu a i.fa{ font-size:32px; color:#1F2837; }

/* FOOTER */


    footer{
        width:100%;
        background:white;
    }
    
    footer div.tekstuuri{
        height:600px;
        background:url('../layout/kuosi.png');
        background-repeat:repeat;
        background-position:center top;
        position:relative;
        padding-top:100px;
    }

    footer div.tekstuuri div.ala{
        background:url('../layout/valkoinen-ala-tausta.png');
        background-repeat:repeat-x;
        background-position:center top;
        height:122px;
        position:absolute;
        top:0;
        width:100%;
    }

    footer div.tekstuuri div.yla{
        background:url('../layout/valkoinen-yla-tausta.png');
        background-repeat:repeat-x;
        background-position:center top;
        position:absolute;
        bottom:0;
        width:100%;
        height:140px;
    }
    
    footer div.tekstuuri img.banneri1{
        float:left;
        padding-left:90px;
        padding-top:50px;
            
    }

    footer div.tekstuuri img.banneri2{
        float:right;
        padding-top:200px;
        padding-right:120px;
            
    }

    footer p, footer a{
        font-family:'TradeGothicNextW01-Bold_693229';
        font-size:14px;
        color:#9D9D9C;
        margin:0;
    }
    
    
    footer div.design a{
        font-family:'Trade Gothic Next W01'!important;
        font-size:12px;
    }
    
    footer div.design a:hover{
        color:#C71729;
    }

    footer ul.alalinkit{
        margin:0;
        padding:0;
        list-style:none;
        text-align:center;
    }
    
    footer ul.alalinkit li{
        display:inline-block;
        margin:0;
        margin-left:-4px;
        padding:30px 40px;
    }
    
    footer ul.alalinkit li a{
        font-family:'TradeGothicNextW01-Bold_693232';
        font-size:17px;
        text-transform: uppercase;
        -webkit-transition:0.1s;
        -moz-transition: 0.1s;                 
        -o-transition: 0.1s;   
        -ms-transition: 0.1s; 
        transition:0.1s;
    }
    
    footer ul.alalinkit li a:hover, footer ul.alalinkit li a.valittu{
        color:#124395!important;
        -webkit-transition:0.1s;
        -moz-transition: 0.1s;                 
        -o-transition: 0.1s;   
        -ms-transition: 0.1s; 
        transition:0.1s;
    }    
    
    footer h4{
        color:#124395!important;
        text-transform: uppercase;
        font-family:'TradeGothicNextW01-Bold_693229'!important;
        font-size:14px;
    }
    
    
/* BUTTON */

    a.button, button{
        text-transform: uppercase;
        color:#124395;
        font-family:'TradeGothicNextW01-Bold_693229';
        font-size:14px;
        font-weight:normal;
        text-align:center;
        display:block;
        line-height:50px;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }    
    
    a.button:hover, button:hover{
        background:#124395;
        color:white;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    
    a.button.small, button.small{
        display: inline-block;
        padding:0 30px;
    }
    
    a.button.border, button.border{
        border:1px solid rgb(204,204,204);    
    }
    
    a.button.transparent{
        background:none;
        bordeR:1px solid white;
        color:white;
        display:inline-block;
        padding:0 60px;
    }
    
    a.button.transparent:hover{
        background:white;
        color:#124395;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
        
    }
    
    
/* LAINAUS */    

    
    div.lainaus{
        font-family:'TradeGothicNextW01-Bold_693229';
        font-size:28px;
        color:#3C3C3B;
    }
    
    div.lainaus span.teksti{
        width:75%;
        float:right;
        line-height:150%;
    }
    
    div.lainaus div.quote{
        background:url('../layout/heittomerkki.png') no-repeat;
        height:72px;
        width:87px;
        float:left;
        margin-top:10px;
        margin-left:60px;
    }


/* HIGHSLIDE */


/* KUVA TEKSTISSA */

    .highslide{
        position:relative;
        display:inline-block;
        max-width:100%;
    }

    .highslide img{
        vertical-align:top;
    }

    .highslide span{
        position:absolute;
        right:0;
        width:40px;
        height:40px;
        text-align:center;
        line-height:32px;
        background:#124395;
        z-index:2;
        color:white;
        font-size:32px;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }

    a.highslide:hover span{
        background:white;
        color:#124395;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    
    div.kuvateksti{
        display:block;
        padding:10px 0 0 0;
        font-size:16px;
        line-height:130%;
        font-family:'TradeGothicNextW01-Ital'; 
    }
    
    div.highslide-caption{
        font-size:16px!important;
        line-height:135%!important;
        font-family:'Trade Gothic Next W01';
        padding:10px;

    }


/* KALENTERI */

    #aikataulu-picker{
        font-size:14px;
        font-family:'TradeGothicNextW01-Heav_693241'!important;
        text-align:center!important;
    }

    #aikataulu-picker div{
        margin:0 auto!important;    
        text-align:center!important;
    }

    #aikataulu-picker table{
        margin:0 auto!important;    
    }

    #aikataulu-picker td{
        padding:0!important;
        margin:0!important;
        border:1px solid rgb(204,204,204);
    }

    #aikataulu-picker td a, #aikataulu-picker td span{
        padding:3px 6px;
        text-align:center;
        margin:0!important;
        border:none!important;
        font-family:'TradeGothicNextW01-Heav_693241'!important;
    }
    
    #aikataulu-picker th span{
        font-family:'TradeGothicNextW01-Bold_693229';
        font-size:14px;
    }
    
    .ui-datepicker-title span{
        font-family:'TradeGothicNextW01-Bold_693229';
        text-transform: uppercase;
        font-size:16px;
    }
    
    #aikataulu-picker .ui-datepicker-prev, #aikataulu-picker .ui-datepicker-next{
        background:none;
        border:none;
        /*color:#C71729;*/
        font-weight:normal;
        cursor:pointer;
        line-height:34px;
    }
    
    #aikataulu-picker .ui-datepicker-prev span, #aikataulu-picker .ui-datepicker-next span{
        background:none!important;
    }

    #aikataulu-picker .ui-datepicker-prev::before{ 
        content: "\f04b";
        display: inline-block;
        font: normal normal normal 18px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transform: translate(0, 0);
        color:#124395;
        -ms-transform: rotate(180deg); /* IE 9 */
        -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
        transform: rotate(180deg);
    }

    #aikataulu-picker .ui-datepicker-next::before{
        content: "\f04b";
        font-size:12px;
          display: inline-block;
          font: normal normal normal 18px/1 FontAwesome;
          font-size: inherit;
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          transform: translate(0, 0);
        color:#124395;
    }
    
    #aikataulu-picker .ui-state-highlight{
        background:rgba(199,23,41,1);
    }
    
    #aikataulu-picker .ui-state-active a{
        background:#124395;
    }
    
    #aikataulu-picker .ui-state-default{
        cursor:default;
    }
    
    #aikataulu-picker .ui-state-active .ui-state-default{
        cursor:pointer;
    }
    
    #aikataulu-picker .ui-state-default:hover{
        background:white;
        color:#575756;
    }
    
    #aikataulu-picker .ui-state-active .ui-state-default:hover{
        background:#124395;
        color:white;    
    }

    #aikataulu-picker .ui-state-highlight:hover{
        background:rgba(199,23,41,1);
        color:white;    
    }
    
    
    
    
/* TAPAHTUMAT */    
    
    div.tapahtuma div.kuvitus, div.tapahtuma div.teksti, div.kalenteri, div.tapahtuma div.kuva{
        height:350px;
    }

    div.tapahtuma div.kuva{ line-height:350px; text-align:centeR; vertical-align:middle;}
    div.tapahtuma div.kuva a{ display:block; height:350px; vertical-align:middle; text-align:center; }
    div.tapahtuma div.kuva a img{ vertical-align:middle; }
    
    div.tapahtuma div.teksti div.napit{
        position:absolute;
        bottom:0;
        width:100%;
    }
    
    div.slick-slider{
        margin:0!important;
        padding:0!important;
    }
    
    div.tapahtumat .slick-prev, div.tapahtumat .slick-next{
        font-size:20px;
        top:50%;
        position:absolute;
        margin-top:-25px;
    }
    
    div.tapahtumat .slick-prev{ 
        left:-25px;
        padding-left:1px;
    }
    
    div.tapahtumat .slick-next{ 
        right:-25px; 
        padding-right:1px;
        line-height:20px;
    }
    
    .slick-prev, .slick-next{
        width:50px!important;
        height:50px!important;
        border:1px solid rgb(204,204,204)!important;
        color:#124395!important;
        background:white!important;
        text-shadow: 0 0 0 rgb(153,153,153);
        -webkit-transition:0.2s;
        -moz-transition: 0.2s;                 
        -o-transition: 0.2s;   
        -ms-transition: 0.2s; 
        transition:0.2s;
    }

    .slick-prev:hover, .slick-next:hover{
        background:#124395!important;
        -webkit-transition:0.2s;
        -moz-transition: 0.2s;                 
        -o-transition: 0.2s;   
        -ms-transition: 0.2s; 
        transition:0.2s;
    }

    
    div.tapahtumat .slick-prev:before, div.tapahtumat .slick-next:before{
        content: "\f04b";
        display: inline-block;
        font: normal normal normal 18px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transform: translate(0, 0);
        color:#124395;
    }

    div.tapahtumat .slick-prev:before{
        -ms-transform: rotate(180deg); /* IE 9 */
        -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
        transform: rotate(180deg);        
    }

    .slick-prev:hover:before, .slick-next:hover:before{
        color:white!important;
    }

    ul.slick-dots{
        bottom:-50px;
    }
    
    
    .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0!important; }
    


/* BREADCRUMB */

    ul.breadcrumb{
        margin:0;
        padding:10px 0 60px 30px;
        list-style:none;
    }
    
    ul.breadcrumb li{
        display:inline-block;
        color:rgb(153,153,153);
        font-size:10px;
        line-height:15px!important;
    }
    
    ul.breadcrumb li a{
        color:rgb(153,153,153);
        font-size:13px;
    }
    
    ul.breadcrumb li a span{
        font-size:13px;
        color:rgb(153,153,153);
    }
    
    ul.breadcrumb li a .icon{
        font-size:13px!important;
        vertical-align:bottom;
        color:rgb(153,153,153);
        height:15px!important;
        display:inline-block;
    }
    
    ul.breadcrumb li a:hover span, ul.breadcrumb li a:hover .icon{
        color:#124395;
    }



/* UL, LI */

    ul.sublinks{
        margin:0;
        padding:0;
        list-style:none;
        border-bottom:1px solid rgb(204,204,204);
    }
    
    ul.sublinks li{
        margin:0;
        padding:0;
        line-height:120%;
    }

    ul.sublinks li a{
        color: #575756;
        font-size:16px;
        display:block;
        border-top:1px solid rgb(204,204,204);
        padding:15px;
        background:white;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    
    
    ul.sublinks li a:hover, ul.sublinks li a.valittu{
        background: #124395;        
        color:white;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
    
    ul.sublinks li a:hover p, ul.sublinks li a.valittu p{
        color:white!important;
        -webkit-transition:0.5s;
        -moz-transition: 0.5s;                 
        -o-transition: 0.5s;   
        -ms-transition: 0.5s; 
        transition:0.5s;
    }
        
    
/* AJANKOHTAISET */

    div.ajankohtaiset div.kuvitus{
        max-height:400px;
        min-height:200px;
        overflow:hidden;
    }


/* TILANJAKAJA */

    div.tilanjakaja{
        margin-top:30px;
        height:25px;
        background: url('../layout/tilanjakaja.jpg') repeat-x;
    }

    
/* KOOTUT TEOKSET */

    div.kootut_teokset{ margin-top:60px; color:white; height:250px; }
    
    div.kootut_teokset div.data{
        padding-left:300px;
        padding-top:40px;
        text-align:center;
    }
    
    div.kootut_teokset p.otsikko{
        margin-top:0;
        margin-bottom:0px;
        font-size:28px;
        line-height:135%;
        font-family:'TradeGothicNextW01-Bold_693229';
        text-transform: uppercase;
    }

    div.kootut_teokset p.teksti{
        margin-top:10px;
    }
    
    div.kootut_teokset a.button{ margin-top:30px; }

    div.kootut_teokset.etusivu{
        background:url('../layout/banneri-tausta.jpg');
    }    

    div.kootut_teokset.muut{
        height:450px;
        padding:80px 0;
        background:url('../layout/banneri-tausta-2.jpg');
    }
    
    div.kootut_teokset.muut img{
        border:5px solid rgb(51,51,51);
    }    
    
    
/* YLEISET */

    .clickable{ cursor: pointer; }
    .bold{ font-weight:bold;}
    .float-left{ float:left; }
    .float-right{ float: right; }
    .pl10{ padding-left:10px; }
    .pl15{ padding-left:15px; }
    .pl30{ padding-left:30px; }
    .pr10{ padding-right:10px; }
    .pr30{ padding-right:30px; }
    
    .pt10{ padding-top:10px; }
    .pt15{ padding-top:15px!important; }
    .pt20{ padding-top:20px; }
    .border-bottom{ border-bottom:5px solid #E94E27; }
    .border-grey{ border:2px solid rgb(153,153,153); }
    .border-bottom-grey{ border-bottom:1px solid rgb(153,153,153); }
    .border-left{ border-left:1px solid rgb(204,204,204); }
    .border-top{ border-top:1px solid rgb(204,204,204); }
    .left-content{ padding:0 30px; }
    .right-content{ padding:0 30px; }
    .pt115{ padding-top:115px; }
    .pb60{ padding-bottom:60px; }
    .p30{ padding:30px; }
    .pt30{ padding-top:30px; }
    .pb30{ padding-bottom:30px; }
    .pt60{ padding-top:60px; }
    .pt160{ padding-top:160px; }
    .pt260{ padding-top:260px; }
    .pt340{ padding-top:400px; }
    .p5{ padding:5px; }
    .p10{ padding:10px; }
    .footer-content{ padding:0 60px; }
    .center{ text-align:center; }
    .pointer{ cursor: pointer; }
    .justify{ text-align:justify; }
    .mt0{ margin-top:0!important; }
    .mt10{ margin-top:10px!important; }
    .mt20{ margin-top:20px!important; }
    .mt30{ margin-top:30px!important; }
    .mt40{ margin-top:40px!important; }
    .mt50{ margin-top:50px!important; }
    .mt60{ margin-top:60px!important; }
    .mb0{ margin-bottom:0px!important; }
    .mb10{ margin-bottom:10px!important; }
    .mb20{ margin-bottom:20px!important; }
    .mb30{ margin-bottom:30px!important; }
    .mb40{ margin-bottom:40px!important; }
    .mb50{ margin-bottom:50px!important; }
    .mb60{ margin-bottom:60px!important; }
    .ml30{ margin-left:30px!important; }
    .mr30{ margin-right:30px!important; }
    .bg-grey{ background:rgb(242,242,242); }
    .bg-white{ background:rgb(255,255,255); }
    .m-auto{ margin-left:auto!important; margin-right:auto!important; }
    .uc{ text-transform: uppercase; }
    .relative{ position:relative; }
    .absolute{ position:absolute; }
    .b10{ bottom:10px; }
    .white{ color:white; }
    .table{ display:table-row; }
    .table-cell{ display:table-cell; }
    .h200{ height:200px; }
    .middle{ vertical-align:middle; }
    .right{ text-align:right; }
    
    hr.grey{
        border:0;
        border-bottom:1px solid rgb(204,204,204);
        width:100%;
    }

    div.nosto hr.oranssi{
        position:absolute;
        left:50%;
        bottom:60px;
        margin-left:-50px;
    }
    
    hr.cl{ border:0; height:0;}
    
    .bg-grey{ background:rgb(245,245,245); }

    div.uutisboxi:nth-of-type(3n+1){ clear:both; }
    
    div.show-mobile{ display:none; }
    div.hide-mobile{ display:block; }

    .hide640{ display:block; }
    .show640{ display:none!important; }

    .none{ display:none!important; }    
/*
    div.uutissyote{ position:absolute; top:0;}
    div.uutissyote.sarake0{ left:0; }
    div.uutissyote.sarake1{ left:400px; }
    div.uutissyote.sarake2{ left:800px; }
*/    


    div.face{ width:140px; }
    div.tw-basic{ margin-top:6px; }

    .block{ display:block; }
    

/* MEDIA QUERYT */    
 
    
@media only screen and (max-width: 1200px) {
    /* div.nostot{ display:none; } */
    div.nosto h2{ font-size:26px; }

    div.slide h2{ 
        font-size:54px!important;
    }
    
    div.uutisboxi{ width:50%;  }
    div.uutisboxi div.boxi{ width:340px; max-width:100%; margin-left:auto; margin-right:auto; float:none; }
    div.uutisboxi:nth-of-type(3n+1){ clear:none; }
    div.uutisboxi:nth-of-type(2n+1){ clear:both; }

    div.boxi div.napit div.col-6{ width:50%; }
    
    footer ul.alalinkit{ text-align: center; }
    footer ul.alalinkit li{
        padding:15px;
    }

    div.slide div.content{
        width:100%;
        max-width:100%;
        padding:0 30px;
        left:0%;
        margin-left:0px;
    }

    div.slide p{
        font-size:34px;
    }
    
    div.slide a{
        bottom:30px;
    }
}

@media only screen and (max-width: 1024px) {
    
    div.nostot div.col-4{
        float:none;
        width:400px;
        max-width:100%; 
        margin:0 auto 60px auto;
    }
    
    div.nostot div.col-4:last-of-type{ margin-bottom:0; }

    footer div.tekstuuri img.banneri1{
        float:left;
        padding-left:0px;
        padding-top:50px;
            
    }

    footer div.tekstuuri img.banneri2{
        float:right;
        padding-top:150px;
        padding-right:15px;
    }
    
    footer div.saatio div.col-6{
        width:100%;
        padding-bottom:0;
    }
    
    div.slide{ margin-top:90px; }
    
    div.saraketaulukko_solu5{
        width:33.3333333333%;
        float:left;
        padding-bottom:5px;
        padding-right: 5px; 
        padding-left:5px;
    }

    div.saraketaulukko_solu5:nth-of-type(5n), div.saraketaulukko_solu5:nth-of-type(5n+1){         
        padding-right:5px; 
        padding-left:5px;
    }
    
    div.saraketaulukko_solu5:nth-of-type(1), div.saraketaulukko_solu5:nth-of-type(2), div.saraketaulukko_solu5:nth-of-type(3){
        padding-bottom:30px;
    }
    
    div.saraketaulukko_solu5:nth-of-type(3n+1){
        padding-left:0; padding-right:10px;
    }

    div.saraketaulukko_solu5:nth-of-type(3n){
        padding-left:10px; padding-right:0px;
    }
    
    .hide-mobile{ display:none; }
    div.kielet{ position:relative; text-align:left; padding-left:25px; margin:0!important; width:100%; right:auto; }
    div.kielet a{ font-size:16px; margin-right:15px;}

    footer ul.alalinkit li{
        display:inline-block;
        margin:0;
        margin-left:-4px;
        padding: 5px 15px;
    }

    div.slide{
        max-height:90%!important;
        max-height:calc(100% - 88px)!important;
        -moz-max-height:calc(100% - 88px)!important;
        -webkit-max-height:calc(100% - 88px)!important;
        -ms-max-height:calc(100% - 88px)!important;
        -o-max-height:calc(100% - 88px)!important;
    }
}

@media only screen and (max-width: 1023px) {
    div.hide-mobile{ display:none!important; }
    div.show-mobile{ display:block!important; }
}


@media only screen and (max-width: 860px) {
    div.taulukkos_solu2{ width:100%; }
    div.content{ padding-left:30px; padding-right:30px; }
    nav div.content{ padding:0!important; }
    body#etusivu div.kuvat{ display:none; }
    div.leipateksti{ padding-right:0!important; padding-lefT:0!important; }
    footer div.tekstuuri img.banneri1{
        float:none;
        margin:0 auto;
        padding-top:0px;
        display:block;
    }

    footer div.tekstuuri img.banneri2{
        float:none;
        margin:0 auto;
        display:block;
        padding-top:0px;
        padding-right:0px;
    }

    footer div.tekstuuri{
        height:700px;
        padding-top:100px;
    }
    
    footer div.tekstuuri div.content{ width:100%; padding-left:0!important; padding-right:0!important; }
    
    footer div.saatio{ width:50%; }
    footer ul.alalinkit{ padding-left:0; }
    
    footer div.col-3{
        text-align:center; 
        padding-bottom:30px;
        padding-left:0!important;
        padding-right:0!important;
    }
    div.nostot div.col-4{ padding-left:30px!important; padding-right:30px!important;}
    div.slide p{
        font-size:28px;
    }

    div.slide.etusivu div.content{ bottom:25%; }

    div.saraketaulukko_solu3{ width:50%; }
    div.saraketaulukko_solu3:nth-of-type(2n+1){ padding-right: 10px; padding-bottom:30px; clear:both; }
    div.saraketaulukko_solu3:nth-of-type(2n){ padding-right: 0px; padding-left:10px; padding-bottom:30px; }
    div.saraketaulukko_solu3:nth-of-type(3n+1){ clear:none; }

    div.rivitaulukko_solu3{ width:50%; }
    div.rivitaulukko_solu3:nth-of-type(2n+1){ padding-right: 10px; padding-bottom:30px; clear:both; }
    div.rivitaulukko_solu3:nth-of-type(2n){ padding-right: 0px; padding-left:10px; padding-bottom:30px; }
    div.rivitaulukko_solu3:nth-of-type(3n+1){ clear:none; }

    div.uutisboxi{ width:100%;  }
    
    div.ajankohtaiset div.col-8, div.ajankohtaiset div.col-4{ width:50%; }
    div.ajankohtaiset div.col-8{ padding-right:15px!important; }
    div.ajankohtaiset div.col-4{ padding-left:15px!important; }
    
    div.alilinkit{
        border-top:1px solid rgb(204,204,204);
        padding-top:30px;
        margin-top:30px;
    }

    div.kootut_teokset.muut{
        height:auto;
        padding:60px 0;
        background:url('../layout/banneri-tausta-2.jpg') repeat-y;
    }
    
    div.kootut_teokset.muut div{ float:none; text-align:center; }
    
    div.alilinkit{ padding-left:0!important; padding-right:0!important; }
}

@media only screen and (max-width: 767px) {
    div.tapahtumaosio, div.tapahtumat{ border:none!important; box-shadow: none; }
    div.tapahtuma{ margin-bottom:30px; border:1px solid rgb(204,204,204); }

    div.tapahtuma div.kuvitus{ width:100%; }
    div.tapahtuma div.teksti{ width:100%; }
    div.tapahtuma div.kuvitus, div.tapahtuma div.teksti, div.tapahtuma div.kuva{
        height:auto;
    }
    
    div.tapahtuma div.kuva{ 
        line-height: 100%; 
    }
    
    div.tapahtuma div.kuva a{ height:auto; }
    
    div.tapahtuma div.teksti{
        padding-bottom:30px; 
        height:auto;
    }

    div.ajankohtaiset div.col-8, div.ajankohtaiset div.col-4{ width:100%; }
    div.ajankohtaiset div.col-8{ padding-right:0px!important; }
    div.ajankohtaiset div.col-4{ padding-left:0px!important; }
    div.ajankohtaiset div.kuvitus{ margin-bottom:15px!important; }
}

@media only screen and (max-width: 640px) {
    .hide640{ display:none!important; }
    .show640{ display:block!important; }
    .button.show640{ display:inline-block!important; }
    div.taulukkos_solu4{ width:100%; text-align:center; }
    span.puh-txt{ display:none; }
    a.puh-link{ display:inline-block; margin-bottom:10px; }
    
    footer div.tekstuuri{height:auto; padding-bottom:100px; }
    footer div.saatio{ width:100%; }
    div.slide p{
        font-size:24px;
    }
    
    div.saraketaulukko_solu2{ width:100%; padding:0 0 20px 0!important; }
    div.saraketaulukko_solu3{ width:100%; padding:0 0 20px 0!important; }
    div.saraketaulukko_solu4{ width:100%; }
    div.saraketaulukko_solu5{ width:100%; }
    
    div.rivitaulukko_solu2{ width:100%; padding:0 0 20px 0!important; }
    div.rivitaulukko_solu3{ width:100%; padding:0 0 20px 0!important; }
    div.rivitaulukko_solu4{ width:100%; }
    div.rivitaulukko_solu5{ width:100%; }
    
    .hide640{ display: none; }
    .show640{ display: block; }

    div.content.main{ 
        padding-left:15px;
        padding-right:15px;
    }
    
    body#etusivu div.content.main{
        padding-left:0!important; 
        padding-right:0!important;
    }
    
    body#etusivu div.content.main h1, body#etusivu div.content.main div.txt{
        padding-left:15px;
        padding-right:15px;
    }
    
    div.kootut_teokset{
        padding-top:30px!important;
        padding-bottom:30px!important;
    }
}

@media only screen and (max-width: 460px) {
    h1{ font-size:32px;}
    h1.etusivu{ font-size:32px; }
    h2{ font-size:26px; }
    h3{ font-size:21px; }
    h4{ font-size:21px; }
    div.nostot div.col-4{ padding-left:0px!important; padding-right:0px!important;}
    div.nosto{ width:340px; margin-left:auto; margin-right:auto; float:none; max-width:100%; }

    div.saraketaulukko_solu5{
        width:100%;
        padding:0 0 30px 0!important;
    }
    
    div.saraketaulukko_solu5:last-of-type{
        padding-bottom:0!important; 
    }
    div.slide p{
        font-size:20px;
    }
    
    footer ul.alalinkit{ padding:30px 0; }
    
    footer ul.alalinkit li{
        display:block; 
    }

    div.kootut_teokset img{ width:200px; }
    div.kootut_teokset p.otsikko{ font-size:22px; margin-top:10px!important; }
}
   
@media only screen and (max-width: 360px) {
    h1{ font-size:30px;}
    h1.etusivu{ font-size:30px; }
    h2{ font-size:24px; }
    h3{ font-size:18px; }
    h4{ font-size:18px; }

    body{ font-size:16px; }
    div.slide p{
        font-size:18px;
    }
    div.content{ overflow:hidden; }
    
}

@media only screen and (max-height: 600px) {
    div.slide{ height:500px; }
}

@media only screen and (max-height: 600px) and (orientation: landscape) {
    div.slide p{ font-size:36px; }
}
    
@media only screen and (max-height: 500px) {
    div.slide{ height:400px; }
    div.slide div.content{ bottom:50px; }
}

@media only screen and (max-height: 500px) and (orientation: landscape) {
    div.slide p{ font-size:28px; }
}

@media only screen and (max-height: 400px) {
    div.slide{ display:none!important; }
    h1{ margin-top:30px; }
    div.slide.etusivu{ display:none!important; min-height:0!important; height:0!important; }
}

@media only screen and (max-height: 300px) {
    div.slide{ height:200px; }
}