/* Common */

body {
  font-family: 'Open sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.43333333;
  color: #777777;
  background-color: #ffffff;
  height: 100%;
  -webkit-text-size-adjust: none;
}
html { overflow-y:auto; }
html, body {
	width:100%;	
	height:100%;
	margin:0;
}

@viewport{
    zoom: 1.0;
    width: device-width;
}

#left {
	float:left;
}

#right {
	float:right;
}

#clear {
	clear:both;
}

.left {
	float:left;
}

.right {
	float:right;
}

.clear {
	clear:both;
}

img {
	border:0
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  margin: 0;
}

h1 {
	color:#007dbd;
}

.container {
	margin:auto;
	width:auto;
	max-width: 1250px;
	padding-left: 10px;
	padding-right: 10px;
	max-height:100%;
	position:relative;
}

.header {
	width:100%;
	height:120px;
	background-image:url(images/design/top-bg.png);
}

.logo {
	position:absolute; 
	top:5px;
	z-index:1
}

#banner {
	height:454px;
	width:100%;
	/*background: url(images/design/etukuva-1.jpg) center;*/
	background-position:center;
	background-size: cover;
	text-align:center;
	position:relative;
	z-index:1;
}

#banner img {
	width:100%
}

#content {
	padding: 1em;
	height:100%
}

.subcontent {

}

.polku {
	font-size: 12px;
}

/******************************
ETUSIVU
******************************/

.oikea {width:30%}

.vasen {width:70%}

.box1, .box2, .box3, .box4 {
	width:49%;
}

.box1 p, .box2 p, .box3 p, .box4 p {
	margin:5px 0 5px 0;
}

.box1 {
	padding: 5px 40px 5px 5px;
}

.box2 h2, .box3 h2 {
	border-bottom: 1px solid #71bf44;
	font-weight: 400;
}

.box2 {
	background-color: #f7f7f7;
	padding: 5px 0 0 10px;
	margin-bottom:10px;
}

.box3 {
	background-color: #f7f7f7;
	margin-right: 10px;
	padding: 5px 0 0 10px;
}

.box4 {
	padding: 20px;
}

.box4 img {
	padding: 10px;
}

.box1 a, .box2 a, .box3 a, .box4 a {
	text-decoration:none;
}

.box1 a, .box2 a {
	font-size:19px;
}

.date-display-single {
	text-decoration:none;
}

.tabs {
	margin:0;
	padding:0;
	border-bottom: 1px solid #71bf44;
	font-weight: 400;
}

.tabs li {
    list-style: none;
    display: inline;
    padding-right: 1em;
}

.tabs li a {
	font-size: 25.53px;
	color: #C0C0C0;
}

.tabs li a.active {
	color: rgb(119, 119, 119);
}

/****************************
YLAMENU
****************************/

.ylamenu {
	padding: 15px
}

.ylamenu ul {
	margin:0;
	padding:0;	
}

.ylamenu li {
	list-style:none;
	float:left; 
	position:relative;
	height:auto;
	text-align: center;
	margin:0;
	padding:0;
}

.ylamenu a {
	text-decoration:none;
	color: #828282;
	padding: 0 20px 0 20px;
	display:inline-block; 
}

.ylamenu a:hover {
	color: #252525;
}

/************************************************************************************
NAV
*************************************************************************************/
div.navi {
}

#top-menu {float:right !important; position:relative;z-index:1000}
#top-menu ul {
	margin:0 !important;
	padding:0;
}

/*#top-menu > li:first-child {}
#top-menu li:after {
	position: absolute;
	top: 0px;
	right: 0;
	content: "";
	background: #00FF00;
	width: 1px;
	height: 70px;
}

#top-menu li:first-child:before{
	position: absolute;
	top: 0px;
	left: 0;
	content: "";
	background: #00FF00;
	width: 1px;
	height: 70px; }*/


#nav-wrap {
	width: 100%;
	display:block;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

.nav {
	z-index: 10000;
	float:right;
}

.nav, 
.nav li {
	margin: 0;
	padding: 0;
}
.nav li {
	font-family: 'Open Sans', 'sans-serif';
	font-size: 20px;
	line-height: 20px;
	font-weight: 400;
	float:left; 
	position:relative;
	height:auto;
	text-align: center;
	text-transform:uppercase;
	list-style:none; 
}

/* nav link */
.nav a {
	padding: 21px 20px 24px;
	color: #828282;  
	text-decoration:none; 
	display:inline-block; 
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.nav a:hover {
	color: #252525	
}

.nav a.menusel, .nav a.menupath {
	color: #252525	
}


/* SubMenu */

ul.menu {
	padding:0;
}


ul.menu li {
	list-style:none;
	padding-bottom: 5px;
}

ul.menu a {
	text-decoration:none; 
	text-transform:uppercase;	
}

/****************************************
SUBMENU
****************************************/

.submenu ul {
	margin:0 !important;
	padding:0;
}

.submenu li {
	list-style:none;
	padding: 4px;
	margin-bottom:1px;
	background-color:#F4F4F4;
}

.submenu a {
	display:block;
	text-decoration:none;
	font-size: 18px;
	color:#727272;
}

.submenu a:hover {
	color: black;
}

.submenu li.L0Inc {
	list-style:none;
	padding: 4px 0 0 40px;
	margin-bottom:1px;
	background:#F4F4F4 url(images/design/menu2-bg-inc.png) left no-repeat;
}

.submenu li.L0Inc:hover {
	background:#F4F4F4 url(images/design/menu2-bg.png) left no-repeat;
}

.submenu li.L0Sel, .submenu li.L0Path {
	list-style:none;
	padding: 4px 0 0 40px;
	margin-bottom:1px;
	background:#F4F4F4 url(images/design/menu2-bg.png) left no-repeat;
}

.L0Sel a, .L1Sel a, .L2Sel a, .L1Sel a {
	color:black;
}

.L0Path a, .L1Path a, .L2Path a, .L1Path a {
	color:black;
}

.L1Inc a, .L1Sel a {
	padding-left: 1em;
}

.L2Inc a, .L2Sel a {
	padding-left: 2em;
}

.L3Inc a, .L3Sel a {
	padding-left: 3em;
}

/************************************************************************************
MOBILE
*************************************************************************************/

@media screen and (max-width:1300px) {
	#banner {height: 300px;}
}

@media screen and (max-width:1200px) {
	.nav li {
		font-size: 16px;}
}

@media screen and (max-width:980px) {

}

@media screen and (max-width: 768px) {

	.logo img {width:60%}

	.ylamenu {
		display:none;
	}

	.header{height:80px;}

	#banner {height: 300px;}



	.oikea, .vasen, .box1, .box2, .box3, .box4 {
	width:97%;
	}

	.subcontent img {max-width:100%;}

	#top-menu {float:right !important;/*width:140px;*/ position:relative;right:10px;}

	.submenu {width:50% !important}
	.subcontent {width:98% !important}

	div.navi {
		height: 38px;
	}

	/* nav-wrap */
	#nav-wrap {
		float:right;
		position:relative;
	}

	/* menu icon */
	#menu-icon {
		color: #000;
		width: 160px;
		height: 40px;
		background: transparent url(images/design/menu-icon.png) no-repeat 10px center;
		padding: 5px 10px 0 42px;
		cursor: pointer;
		color:grey;
		font-size:18pt;
		display: block; /* show menu icon */
	}
	#menu-icon:hover {

	}
	#menu-icon.active {

	}
	
	/* main nav */
	ul.nav {
		clear: both;
		/*position: relative;*/
		top: 40px;
		width: 250px;
		padding: 5px;
		background: #f8f8f8;
		float:right;
		display: none; /* visibility will be toggled with jquery */
		z-index:1000;
	}
	ul.nav li {
		clear: both;
		float: none;
		margin: 10px 0 5px 10px;
	}
	ul.nav a, 
	ul.nav ul a {
		font-size: 18px;
		background: none;
		display: inline-block;
		padding: 0;
		color: #666;
		border: none;
		text-transform:capitalize;
	}
	ul.nav a:hover, 
	ul.nav ul a:hover {
		background: none;
		color: #000;
	}
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
		z-index:1000;
	}
	#nav ul li {
		margin: 3px 0 3px 15px;
		background: inherit;
	}

}

@media screen and (max-width: 480px) {
	body {  font-size: 15px;}
	#banner {height: 150px;}

	.footer-top a {font-size:12px}

	#menu-icon {
		font-size:14pt;
		width: 120px;}
}

/**************************************************
FOOTER
**************************************************/

.footer-top {
	position:relative;
	height:35px;
	background-color:#a5a5a5;
	color:white;
	padding-top:5px;
}

.footer-top a {
	color: white;
	text-decoration:none;
}

.footer {
	position:relative;
	min-height:350px;
	background-color:#f1f0f0;
	padding-top: 20px;
}