html, body, div, span, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

html {
	font-size: 62.5%; 
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}

html {   overflow-y: scroll; }

body { background: #000000; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; font-family: "Raleway",Arial,Helvetica,sans-serif; font-size: 18px; line-height: 18px; color: #ffffff; position: relative; -webkit-font-smoothing: antialiased; }

ul { list-style-type: circle; }
li { margin-bottom: 2px; margin-left: 30px;}
ul.large li { line-height: 21px; }


a { color: #fff200; text-decoration: none; outline: 0; line-height: inherit; }
a:hover { color: #ffffff; }
p a, p a:visited { line-height: inherit; }


/*	TYPO */
h1, h2, h3, h4, h5, h6 { color: #ffffff; font-family: "Raleway",Arial,Helvetica,sans-serif; font-weight: bold; line-height: 1.25 }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 30px; margin-bottom: 12px;}
h2 { font-size: 24px; margin-bottom: 9px;  }
h3 { font-size: 22px; margin-bottom: 9px;  }
h4 { font-size: 20px; margin-bottom: 3px; margin-top: 3px; }
h5 { font-size: 14px; font-weight: normal; margin-bottom: 3px;  }
h6 { font-size: 12px; font-weight: normal; }


p { line-height: 17px; margin: 0 0 18px; }
p img { margin: 0; }
p.lead { font-size: 18px; font-size: 1.8rem; line-height: 24px;  }

/* Mobile */
	
@media handheld, only screen and (max-width: 767px) {
	body, p {  font-size: 15px; font-size: 1.5rem; line-height: 1.4; }
}

em { font-style: italic; line-height: inherit; }
strong { font-weight: bold; line-height: inherit; }
small { font-size: 60%; line-height: inherit; }

h1 small, h2 small, h3 small, h4 small, h5 small { color: #777; }








/* --------------------------------------------------
:: Grid
-------------------------------------------------- */

.container { 
	position: relative;
	padding: 60px 20px; 
}

.row { background: #fff; background: rgba(255,255,255,0.9); width: 100%; max-width: 960px; min-width: 727px; margin: 0 auto; }

.row:nth-child(1) {
 -webkit-border-radius: 6px 6px 0 0; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 6px 6px 0 0; /* FF1-3.6 */
          border-radius: 6px 6px 0 0; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.row:nth-child(3) {
 -webkit-border-radius: 0 0 6px 6px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 0 0 6px 6px; /* FF1-3.6 */
          border-radius: 0 0 6px 6px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

.ie7 .row, .ie8 .row  { background: url(images/row-bg.png) 0 0 repeat;
  
}
/* To fix the grid into a certain size, set max-width to width */
.row .row { background: none; min-width: 0px; }

.ie6 .row, .ie7 .row, .ie8 .row  { width: 960px;}

.column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
.column:first-child, .columns:first-child { margin-left: 0px; }

.row .one.columns { width: 4.3%; }
.row .two.columns { width: 13%; }
.row .three.columns { width: 21.68%; }
.row .four.columns { width: 30.4%; }
.row .five.columns { width: 39.1%; }
.row .six.columns { width: 47.8%; }
.row .seven.columns { width: 56.5%; }
.row .eight.columns { width: 65.2%; }
.row .nine.columns { width: 73.9%; }
.row .ten.columns { width: 82.6%; }
.row .eleven.columns { width: 91.3%; }
.row .twelve.columns { width: 100%; }

.row .offset-by-one 	{ margin-left: 13.1%;  }
.row .offset-by-two 	{ margin-left: 21.8%;  }
.row .offset-by-three 	{ margin-left: 30.5%;  }
.row .offset-by-four 	{ margin-left: 39.2%;  }
.row .offset-by-five 	{ margin-left: 47.9%;  }
.row .offset-by-six 	{ margin-left: 56.6%;  }
.row .offset-by-seven 	{ margin-left: 65.3%;  }
.row .offset-by-eight 	{ margin-left: 74.0%;  }
.row .offset-by-nine 	{ margin-left: 82.7%;  }
.row .offset-by-ten 	{ margin-left: 91.4%;  }
/*.row .offset-by-eleven 	{ margin-left: 95.7%;  }*/

.row .one.centered { margin-left: 47.9%; }
.row .two.centered { margin-left: 43.5%; }
.row .three.centered { margin-left: 39.2%; }
.row .four.centered { margin-left: 34.8%; }
.row .five.centered { margin-left: 30.5%; }
.row .six.centered { margin-left: 26.1%; }
.row .seven.centered { margin-left: 21.8%; }
.row .eight.centered { margin-left: 17.4%; }
.row .nine.centered { margin-left: 13.1%; }
.row .ten.centered { margin-left: 8.7%; }
.row .eleven.centered { margin-left: 4.3%; }

.row .offset-by-one:first-child 	{ margin-left: 8.7%;  }
.row .offset-by-two:first-child 	{ margin-left: 17.4%;  }
.row .offset-by-three:first-child 	{ margin-left: 26.1%;  }
.row .offset-by-four:first-child 	{ margin-left: 34.8%;  }
.row .offset-by-five:first-child 	{ margin-left: 43.5%;  }
.row .offset-by-six:first-child 	{ margin-left: 52.2%;  }
.row .offset-by-seven:first-child 	{ margin-left: 60.9%;  }
.row .offset-by-eight:first-child 	{ margin-left: 69.6%;  }
.row .offset-by-nine:first-child 	{ margin-left: 78.3%;  }
.row .offset-by-ten:first-child 	{ margin-left: 87%;  }
.row .offset-by-eleven:first-child 	{ margin-left: 95.7%;  }

img { max-width: 100%; height: auto; }
img { -ms-interpolation-mode: bicubic; }
 
 /* Nicolas Gallagher's micro clearfix */
 .row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
 .row:after, .clearfix:after { clear: both; }
 .row, .clearfix { zoom: 1; }
 
 


/*	--------------------------------------------------
:: Block grids

These are 2-up, 3-up, 4-up and 5-up ULs, suited
for repeating blocks of content. Add 'mobile' to
them to switch them just like the layout grid
(one item per line) on phones
-------------------------------------------------- */

.block-grid { display: block; overflow: hidden; }
.block-grid>li { display: block; height: auto; float: left; }

.block-grid.two-up { margin-left: -4% }
.block-grid.two-up>li { margin-left: 4%; width: 46%; }

.block-grid.three-up { margin-left: -2% }
.block-grid.three-up>li { margin-left: 2%; width: 31.3%; }

.block-grid.four-up { margin-left: -2% }
.block-grid.four-up>li { margin-left: 2%; width: 23%; }

.block-grid.five-up { margin-left: -1.5% }
.block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; }



/* --------------------------------------------------
:: Grid
-------------------------------------------------- */

/* Tablet screens */
@media only screen and (device-width: 768px), (device-width: 800px) {
	/* Currently unused */
}

/* between full page and mobile */
@media only screen and (max-width: 1110px) {
	nav[role="navigation"] ul li a {
		font-size:14px;
		padding: 5px 5px;
	}
}


/* Mobile */

@media only screen and (max-width: 767px) {
	body { -webkit-text-size-adjust: none; }

  .container {  position: relative; padding: 20px; }
	
	.row, body, .container { width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; }
	.row .row .column, .row .row .columns { padding: 0; }
	.column, .columns { width: auto !important; float: none; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; }
	.column:last-child, .columns:last-child { margin-right: 0px; }
	.offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .centered { margin-left: 0% !important; }

	header[role="banner"] h1 a {
		margin: 24px 10px 0 20px;
		float: none;
	}

	p.slogan {
    background: url(images/slogan-small.png) 0 0 no-repeat;
    width: 280px;
    height: 49px;
		float: none;
		margin: 0 12px 12px 10px;

	}
	
	img {  
	float: none!important;
	margin: 10px 0 0 0!important;
	}

	.show-mobile { display: block; margin-top: 20px;}
	.hide-mobile { display: none;}

	nav[role="navigation"] {
		margin: 40px 0;
	}

	
	/* ---------------------- NAVIGATION ---------------------- */
	
	nav[role="navigation"] ul li a {
		font-size:16px;
	}
	
	.nav-collapse, .nav-collapse:visited {
	background : #b3001f url(images/nav-collapsed.png) 3px 3px no-repeat;
	display : block;
	padding : 0.4em 0 0.5em 2.6em;
	color : white;
	}
	
	.nav-collapse:hover {
	color : white;
	}
	
	nav[role="navigation"] {
		margin: 0 0 25px;
	}
	.open-menu {
	height: auto;
	border-top : dotted 1px @white;
	}
	
	nav[role="navigation"] ul.open-menu {
	border-top : dotted 1px #fff;
    background: #b3001f;
    border-radius: 0;
    margin: 0;
    text-align: left;
    display:block;
	}
	
	nav[role="navigation"] ul.menu li {
		display:block;
	}
	nav[role="navigation"] ul.sub-menu{
		display:block;
		position:static;
		background: #b3001f;
	}
	nav[role="navigation"] ul.sub-menu li{
		padding-left:15px;
	}

  nav[role="navigation"] ul { display: none; }
  nav[role="navigation"] select{ display: block; }
		
	.main {
	padding: 0;
	}

	.teaser-row {
	margin: 24px 0 0;
	padding: 0;

	}	

  .teaser {
    padding: 10px 0;
  }

	.teaser:nth-child(1) {
	background: none;
	}

	.teaser:nth-child(2) {
	background: none;
	}

	.teaser:nth-child(3) {
	background: none;
	}

	.teaser h3  {
	padding: 5px 0;
	border-top: none;
	border-bottom: solid 1px #444;

	}

	aside > div {
	padding: 0;
	}

	aside > iframe {
	margin: 0;
	}

	.events {
		margin: 0 0 30px 0;
	}

	.footer img {
margin-right : 20px!important;
}


}


/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.mob_noscript{
}

.HkMuob_revert{
  unicode-bidi:bidi-override;
  direction:rtl;
}

.HkMuob_display{
  display:none;
}

/* fix for sociable plugin */
.sociable .hkmuob_noscript{
  display: inline;
}

div.sisusvas {
	float:left;
	margin-left: 0;
	margin-top: 0;
	margin-bottom: 10px;
	padding: 10px 10px 10px 10px;
	border-radius: 1px 1px;
	background: rgba(66,118,190,0.7);
	width: 97%;
}

div.sisusharm {
	float:center;
	margin-left: 0;
	margin-top: 0;
	margin-bottom: 10px;
	padding: 10px 10px 10px 10px;
	border-radius: 1px 1px;
	background: rgba(222,222,222,0.3);
	width: auto;
	max-width: 1200px;
}
div.puolet {
/*	float:left;*/
/*	margin-left: 0;*/
/*	margin-top: 0;*/
/*	margin-bottom: 10px;*/
/*	padding: 10px 10px 10px 10px;*/
/*	border-radius: 10px 10px;*/
	background: rgba(118,118,118,0.7);
	width: 50%;
}

span.appear {
    width: 250px; 
    border: #f00 1px solid;
    background:#F8F8F8;
    position: absolute;
    /*
    position: relative;
    top: 5px;
    left:15px;
    */
    display:none;
    padding: 3px 3px 3px 3px;
    z-index: 1000000;
}
span.hover  {
    cursor:pointer;
    width: 5px;
}
span.hover:hover span.appear {
    display:block;
}

div.maksu {
    float: left;
    /*min-width: 150px;
     height: 90px;*/
    margin: 5px;
}