@font-face {
    font-family: baseFont;
    src: url('fonts/calibri.eot');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: baseFont;
    src: url(https://:/) format("No-IE-404"), url('fonts/calibri.ttf') format("truetype");
    font-weight: 600;
    font-style: normal;
}


* { margin: 0; padding: 0; outline: 0; }

body, html { height: 100%; }

body {
	background:url(images/bg.jpg) no-repeat top center, url(images/bottom.jpg) no-repeat bottom center;
	font: 13pt baseFont;
	line-height:1.5em;
	color: #000;
	min-width: 100%;
}

.etu{ padding:0 15px 15px 0; width:auto;}
a { color: #72ae13; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a img { border: 0; }
article, aside, details, footer, header, menu, nav, section { display: block; }
input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.cl10 { display: block; height: 20px;}
.cl30 { display: block; height: 30px; clear: both; }
.cl301 { display: block; height: 30px;}
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

.shell { width: 980px; margin: 0 auto;}
.header { background: url(images/header.jpg) no-repeat top center;}
.header .shell { padding: 30px 0 0 0; width: 918px; background: transparent;}
.header-top { height: 70px; }

#navigation { padding-top: 30px;}
#navigation ul { list-style: none; list-style-position: outside; font-size: 18px; font-family: 'Coda', cursive; font-weight: 400;  }
#navigation ul li { display: inline; padding-left: 30px; }
#navigation ul li a { color: #d5d4d4; }
#navigation ul li a:hover,
#navigation ul li.active a { color: #fff; text-decoration: none; }

.main { padding: 0 0 30px 0; background:transparent;}
.main h2 { color: #333; font: 22pt baseFont; font-weight: 700; padding:20px 0 10px 0;}
.main section {padding: 0; margin: 0;}
.main .cols { padding-left: 5px; padding-right: 5px;  }
.main .cols h2 { padding-bottom: 10px; }
.main .cols .col { width: 180px; float: left; line-height:1.1em;}
.main .cols .col2 { width: 180px; float: left; line-height:1.1em;}
.main .cols .col3 { width: 180px; float: left; line-height:1.1em;}
.main .cols .col4 { width: 180px; float: left; line-height:1.1em;}
.main .cols .col5 { width: 180px; float: left; line-height:1.1em;}
.main .cols .col + .col { padding-left: 40px; }
.main .cols .col img { float: left; margin-right: 16px; width: 175px; }
.main .cols .col2 img { float: left; margin-right: 16px; width: 175px; }
.main .cols .col3 img { float: left; margin-right: 16px; width: 175px; }
.main .cols .col4 img { float: left; margin-right: 16px; width: 175px; }
.main .cols .col5 img { float: left; margin-right: 16px; width: 175px; }
.main .cols .col .col-cnt { height: 100%; overflow: hidden; }
.main .content { padding:0 32px 32px 32px; background:#FFF; min-height:350px; }

.galleria p{
	float:left;
	margin:0;
	width:290px;
}

.img_galleria{
	float:left;
	width:120px;
	height:90px;
	padding:5px;
	margin-right:10px;
}

.yritys{
	font: 12pt baseFont;
	line-height:18px;
	float:left;
	width:225px;
	margin-top:30px;
	padding: 0;
}

.yritys2{
	font: 12pt baseFont;
	float:left;
	width:225px;
	margin-top: 20px;
	padding: 0;
}

.yritys_img{
	float: left;
	margin-right: 10px;
	
}

.palaute{
	float:left;
	width:300px;
	margin:0;
}

form.app
{
	margin:0;
	padding:0;
}

.app
{
	font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
	font-size:small;
}


label.description
{
	border:none;
	color:#222;
	display:block;
	font-size:100%;
	font-weight:700;
	line-height:120%;
	padding:5px 0 1px;
}


.textarea
{
	background:#fff;
	border-bottom:1px solid #ddd;
	border-left:1px solid #c3c3c3;
	border-right:1px solid #c3c3c3;
	border-top:1px solid #7c7c7c;
	color:#333;
	font-family:Tahoma, Arial, Verdana, sans-serif;
	font-size:100%;
	margin:0 0 10px 0;
	width:450px;
	height:70px;
	resize:none; 
}

#footer { background:#fff; color:#333; text-align:center; width:980px; margin-top:5px; auto; padding:20px 0 20px 0; font-size:14pt;}
#navigation a.nav-btn { display: none;  }
/* #Media Queries
================================================== */

/* ipad portrait */
@media only screen and ( min-width: 768px) and ( max-width: 980px ) {
	body { min-width: 768px; }
	.shell { max-width: 748px; }
	#navigation ul li { padding-left: 24px; font-size: 15px; }
	.header .shell { padding: 21px 0px 0; width: 748px; }
	.header-top { padding-left: 20px; padding-right: 20px;  }
	.main section { background: padding-bottom: 50px; margin-bottom: 20px; }
	.main .cols { padding-left: 20px; padding-right: 20px; }
	.main .cols .col { width: 300px; }
	.main .cols .col2 { width: 300px; }
	.main .cols .col3 { width: 300px; }
	.main .cols .col4 { width: 300px; }
	.main .cols .col5 { width: 300px; }
	.main .cols .col img { float: none; display: block; margin: 0 auto; width: 80%;  margin-bottom: 14px; }
	.main .cols .col2 img { float: none; display: block; margin: 0 auto; width: 80%;  margin-bottom: 14px; }
	.main .cols .col3 img { float: none; display: block; margin: 0 auto; width: 80%;  margin-bottom: 14px; }
	.main .cols .col4 img { float: none; display: block; margin: 0 auto; width: 80%;  margin-bottom: 14px; }
	.main .cols .col5 img { float: none; display: block; margin: 0 auto; width: 80%;  margin-bottom: 14px; }
	.main .cols .col .col-cnt { float: none; display: block;  text-align: center; }
	.main .content { padding-left: 20px; padding-right: 20px; }
    .main .content2 { padding-left: 5px; padding-right: 5px; }
	#footer { background:#FFF;text-align:center; max-width:708px; margin:0 auto; padding:10px 20px 10px 20px; font-size:14pt;}
}

	
@media only screen and ( max-width: 767px) { 
	body { min-width: 320px; background:#333; }
	.shell { max-width: 320px; }
	.header { background:#333; }
	.header .shell { padding: 0 0 0 0; background: url(images/m-header-shell.png) no-repeat 0 0; } 
	.header-top { padding: 12px 0 0px 0; }
	#logo { margin: 0 auto; float: none; display: block; }
	#navigation { float: none; display: block; position: relative; background: url(images/m-navigation.png) no-repeat 0 0; z-index: 1000; margin: 20px 10px 0 10px; height: 32px; padding-top: 0;  }
	#navigation a.nav-btn { display: block; height: 32px; padding-left: 13px; line-height: 32px; width: 286px; margin: 0 auto; background: url(images/nav-btn.png) no-repeat right 0;
		font-size: 15px; color: #fff; font-size: 17px; font-family: 'Coda', cursive; font-weight: 400; position: relative; z-index: 100;}
	#navigation a.nav-btn:hover { text-decoration: none; }
	#navigation a.nav-btn span { background: url(images/nav-arr.png) no-repeat 0 0; width: 10px; height: 7px; position: absolute; top: 13px; right: 13px; } 
	#navigation a.nav-btn span.active { background-position: 0 bottom;  }

	#navigation ul { display: none; position: absolute; width: 298px; background: #100f11; top: 22px; left: 0px; padding-top: 20px; border-radius: 0 0 7px 7px; -moz-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px; -o-border-radius: 0 0 7px 7px; }
	#navigation ul li { float: none; display: block; padding-left: 0; padding-bottom: 8px; }
	#navigation ul li a { display: block; padding-left: 10px; }
	#navigation ul li.home { display: none;  } 
	#header { background: url(images/m-header.png) repeat-x 0 0; height: 218px; width: 100%; }
	.main section { padding-bottom: 0; margin-bottom: 0; }
	.main .cols { padding-left: 10px; padding-right: 10px; }
	.main .cols .col { width: 100%; }
	.main .cols .col2 { width: 100%; }
	.main .cols .col3 { width: 100%; }
	.main .cols .col4 { width: 100%; }
	.main .cols .col5 { width: 100%; }
	.main .cols .col + .col { padding: 20px 0 0;  }
	.main .cols .col img { float: none; display: block; margin: 0 auto; width: 80%;  margin: 14px 0 14px 0; }
	.main .cols .col2 img { float: none; display: block; margin: 0 auto; width: 80%;  margin:14px 0 14px 0; }
	.main .cols .col3 img { float: none; display: block; margin: 0 auto; width: 80%;  margin:14px 0 14px 0; }
	.main .cols .col4 img { float: none; display: block; margin: 0 auto; width: 80%;  margin:14px 0 14px 0; }
	.main .cols .col5 img { float: none; display: block; margin: 0 auto; width: 80%;  margin:14px 0 14px 0; }
	.main .cols .col .col-cnt { float: none; display: block;  text-align: center; }
	.main .content { padding-left: 20px; padding-right: 20px; }
    .main .content2 { padding-left: 5px; padding-right: 5px; }
	.textarea
{
	background:#fff;
	border-bottom:1px solid #ddd;
	border-left:1px solid #c3c3c3;
	border-right:1px solid #c3c3c3;
	border-top:1px solid #7c7c7c;
	color:#333;
	font-family:Tahoma, Arial, Verdana, sans-serif;
	font-size:100%;
	margin:0 0 10px 0;
	width:280px;
	height:70px;
	resize:none; 
}
	#footer { background:#fff; text-align:center; max-width:300px; margin:0 auto; padding:10px ; font-size:14pt;}
	
}

@media only screen and ( max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi)  { 

	#navigation { background: url(images/navigation@2x.png) no-repeat 0 0;  -webkit-background-size: 298px 32px; -moz-background-size: 298px 32px; background-size: 298px 32px;  }
	#navigation a.nav-btn span { background: url(images/nav-arr@2x.png) no-repeat 0 0; -webkit-background-size: 10px 15px; -moz-background-size: 10px 15px; background-size: 10px 15px; }
	#logo { margin: 0 10px 0 10px; padding-top:20px; display: block;  }
	.main section { background:-webkit-background-size: 300px 10px; -moz-background-size: 300px 10px; background-size: 300px 10px;  }
    .main .content2 { padding-left: 20px; padding-right: 10px; }
    #footer { background:#fff; text-align:center; max-width:300px; margin:0 auto; padding:10px ; font-size:14pt;}
}