/* RESET CSS */
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; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a, a:hover { text-decoration: none; }
a:focus { outline: none; }



a, a:visited {
	color: rgb(50,150,220);
	}

a:hover {
	}

body, html {
	width: 100%;
	}

body {
	background: url(../images/bg_site.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: rgb(255,255,255);
	font-family: 'Open Sans', sans-serif;
	font-size: 100%;
	color: rgb(50,50,50);
	}

img {
	width: 100%;
    max-width: 100%;
    height: auto;
}

#main_wrapper {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding-top: 80px;
	position: relative;
	}

.page_wrapper {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	}

#index {
	float: left;
	width: 100%;
	text-align: center;
	margin-bottom: 5%;
	text-shadow: 0px 0px 15px rgba(0,50,150,0.5);
	}

#index p {
	color: rgb(255,255,255);
	font-size: 130%;
	line-height: 120%;
	padding: 0% 0% 2% 0%;
	margin: 4% 0% 0% 0%;
	}

#index h1 {
	border-top: 1px dashed rgba(255,255,255,0.4);
	border-bottom: 1px dashed rgba(255,255,255,0.4);
	text-transform: uppercase;
	font-size: 300%;
	padding: 2% 0% 2% 0%;
	margin: 0%;
	line-height: 110%;
	}

.page {
	float: left;
	width: 98%;
	padding-left: 2%;
	border-bottom: 2px solid white;
	}

.page_container {
	float: left;
	width: 100%;
	padding-left: 0;
	background-color: rgba(255,255,255, 0.8);
}

.page_container > * {
	padding-left: 2%;
	padding-right: 2%;
}

.image-block:first-child {
	padding: 0;
	margin-bottom: 1em;
}

.container {
	float: left;
	width: 100%;
	}

.column {
	float: left;
	width: 23%;
	margin: 5% 2% 8% 0%;
	}

.wide { width: 73%; }
.full { width: 98%; }


/* COLORS
----------------------------------------- */

.white {
	color: rgb(255,255,255);
	}

.violet {
	color: rgb(50,50,150);
	}

.blue {
	color: rgb(50,150,220);
	}

/* FONTS
----------------------------------------- */
h1 {
	font-family: 'Cuprum', sans-serif;
	}

h2 {
	font-weight: 700;
	color: rgb(50,50,150);
	font-size: 120%;
	padding-bottom: 6px;
	}

h3 {
	font-style: italic;
	font-size: 130%;
	font-weight: 100;
	color: rgb(50,50,150);
	line-height: 130%;
	}

h4 {
	}

h5 {
	font-family: 'Cuprum', sans-serif;
	font-size: 100%;
	color: rgb(50,50,150);
	text-transform: uppercase;
	margin-bottom: 5px;
	}

p {
	font-size: 90%;
	font-weight: 100;
	line-height: 130%;
	margin-bottom: 1em;
	}


/* ALASIVUT
----------------------------------------- */
#title {
	float: left;
	width: 100%;
	background: rgba(50,50,150, 0.7);
	}

#title h1 {
	float: left;
	margin-left: 29%;
	padding: 10% 0%;
	text-transform: uppercase;
	font-size: 270%;
	color: rgb(255,255,255);
	text-shadow: 0px 0px 20px rgba(0,50,150,0.6);
	}

.description {
	float: left;
	width: 100%;
	text-align: left;
	padding: 5% 2% 4% 2%;
	border-bottom: 1px solid rgb(200,200,200);
	}

.description h3 {
	width: 90%;
	}

.text-vaaka {
	float: left;
	width: 75%;
	margin-top: 2%;
	}

ul.info li {
	float: left;
	width: 100%;
	background-color: transparent;
	border-bottom: 1px solid rgb(190,190,190);
	}

ul.info li a {
	display: block;
	width: 100%;
	padding: 6px 0px 6px 3px;
	transition: background .20s ease-in-out;
	-moz-transition: background .20s ease-in-out;
	-webkit-transition: background .20s ease-in-out;
	}

ul.info li a:hover {
	background: rgb(255,255,255);
	}

ul.info p {
	margin-bottom: 0em;
	}

ul.info .nolink {
	padding: 6px 0px;
	}

#image_container {
	float: left;
	width: 98%;
	margin-bottom: 2%;
	}

#image_container img {
	float: left;
	width: 33%;
	border-left: 2px solid white;
	}

#image_container img:first-child {
	border-left: 0px;
	}

.link-container {
	float: left;
	width: 100%;
	}

.link {
	float: left;
	font-size: 90%;
	margin-bottom: 10px;
	}

.link:before {
	content: url(../images/icon_pdf.png);
	padding-right: 10px;
	}


/* TYÖPAJAT
----------------------------------------- */

.tyopaja {
	float: left;
	width: 98%;
	margin-bottom: 2%;
	padding-bottom: 2%;
	border-bottom: 1px solid rgb(200,200,200);
	}

.tyopaja:first-child {
	margin-top: 2%;
	}

.tyopaja-text {
	float: left;
	width: 71%;
	margin-right: 2%;
	}

.tyopaja-image {
	float: right;
	width: 25%;
	max-height: 144px;
	overflow: hidden;
	}

p.contact {
	font-weight: 700;
	}



/* YHTEYSTIEDOT
----------------------------------------- */
.aukioloaika {
	float: left;
	width: 100%;
	border-bottom: 1px solid rgb(200,200,200);
	margin-bottom: 10px;
	}

table.contact {
	border-collapse: collapse;
	outline: 1px solid rgb(220,220,220);
	}

table.contact tr {
	border-bottom: 1px solid rgb(220,220,220);
	}

table.contact tr:nth-child(odd) {
	background: rgb(255,255,255);
	}

table.contact td {
	font-size: 90%;
	padding: 7px 12px;
	border-right: 1px solid rgb(220,220,220);
	}

table.contact h2 {
	padding: 10px 0px;
	}


/* HEADER
----------------------------------------- */
#header {
	float: left;
	width: 100%;
	}


/* NAVIGATION
----------------------------------------- */

#navigation, #navigation-bg {
	float: left;
	width: 100%;
	background: url(../images/bg_navi.png) repeat-x bottom left;
	background-color: rgb(255,255,255);
	}

#navigation-bg {
	height: 46px;
	}

#logo {
	position: absolute;
	width: 24%;
	max-width: 222px;
	z-index: 500;
	left: -20px;
	margin-top: 50px;
	}

	@media only screen and (max-width: 820px) { 
		#navigation,
		#navigation-bg {
			display: none;
		}
		
		#logo {
			margin-top: 10px;
		}
	}

.nav ul {
	list-style-type: none;
	}


.nav ul li {
	float: left;
	font-family: 'Cuprum', sans-serif;
	text-transform: uppercase;
	font-size: 16px;
	}

.nav ul li a {
	display: block;
	float: left;
	border-right: 1px solid rgb(220,220,220);
	padding: 18px 12px 12px 12px;
	color: rgb(50,50,150);
	background: url(../images/bg_navi.png) repeat-x bottom left;
	background-color: rgb(255,255,255);
	transition: background-color .40s ease-in-out;
	-moz-transition: background-color .40s ease-in-out;
	-webkit-transition: background-color .40s ease-in-out;
	}

.nav ul li.home a {
	padding: 14px 20px 9px 20px;
	}


.nav ul li.sub a {
	padding-right: 35px;
	background: url(../images/navi_arrow_gray.png) no-repeat 88% 55%;
	}

.nav ul li a:hover, .nav ul li.sub a:hover {
	background-color: rgb(50,50,150);
	color: rgb(255,255,255);
	}

.nav ul li ul {
	display: none;
	}

.nav ul li:hover ul {
	display: block;
	position: absolute;
	z-index: 500;
	margin-top: 46px;
	width: 300px;
	}

.nav ul li:hover ul li {
	margin-left: 0px;
	display: block;
	float: left;
	}

.nav ul li:hover ul li a {
	float: left;
	width: 200px;
	background-color: rgb(50,50,150);
	background-image: none !important;
	color: rgb(255,255,255);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	border-right: none;
	}

.nav ul li:hover ul li a:hover {
	background-color: rgb(100,100,210);
	}

#mobile-header {
	display: none;
	}

#mobile-header img {
	width: auto;
	margin: 10px;
	}

@media only screen and (max-width: 820px) { #mobile-header {
	display: block;
	text-align: left;
	position: absolute;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 200;
    }
	}


.sidr-inner img {
	display: none;
	}

/* FOOTER
----------------------------------------- */
#footer {
	float: left;
	width: 100%;
	margin-top: 120px;
	background: url(../images/bg_footer.png) repeat-x top left;
	background-color: rgb(255,255,255);
	min-height: 450px;
	}

#footer .page_wrapper {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.footercolumn {
	margin: 2% 0% 2% 2%;
	float: left;
	min-width: 210px;
	}

.footercolumn:first-child {
	margin-top: -9%;
	}

.footercolumn img {
	max-width: 284px;
	}

.footercolumn p {
	line-height: 120%;
	}

.footer-logo {
	margin: 2% 0% 2% 2%;
}

.footer-logo img {
	max-width: 100%;
}

.tyohakemus {
	margin: 2em 0;
}

.tyohakemus img {
	max-width: 600px;
}