@charset "utf-8";



/* CSS Document */















    body,



    html {



    margin:0;



    padding:0;



    color:#4C4C4C;



    background: #FFFFFF;



	background-image:url(images/tausta.jpg);



	font-family: 'Open Sans', sans-serif;



	font-family: 'Lato', sans-serif;



    }















	



	.container{



	  margin:0px auto;



	  height:250px;



	  overflow:hidden;



	  border:5px solid;



	  



	  border-color:#ffffff;



	  position:relative;



	



	}



	



	.photo{



	  position:absolute;



	  animation:round 16s infinite;



	  opacity:0;  



	}



	



	@keyframes round{   



	  25%{opacity:1;}



	  40%{opacity:0;}



	} 



	



	



	img:nth-child(4){animation-delay:0s;}



	img:nth-child(3){animation-delay:4s;}



	img:nth-child(2){animation-delay:8s;}



	img:nth-child(1){animation-delay:12s;}







	#one{



	width: 500px;



	color:#000;



    background: #FFFFFF;



	border-radius: 5px;



    border: 5px solid black;



	}



	



	#two{



		margin-top: 10px;



		margin-bottom:10px;



	}







   



    #wrap {



        width:930px;

	margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */

	background: #8E8E8E;



    }



	



	#wrap2 {



    width:930px;



    margin:0 auto;



    background: #ffffff;



	border-radius: 0px;









    }



	







    #header {



	background-image:url(images/logohead.png);



	witdth: 930px;



	height: 270px;



    }



	



		



	/* ylävalikko */



    #nav {	



	padding:0px 0px;



	padding-top: 0px;



	padding-bottom: 0px;





	font-weight: bold;



    }











    #nav2 {	



	padding:0px 0px;



	font-weight: normal;



    }







    h1 {



    margin:0;



    }







	



	/*pääsivu*/



    #main {



    	float:left;

    	width:930px;

    	padding-top: 30px;

	padding-bottom: 30px;

	border-radius: 0px;

	font: Verdana, Arial, Helvetica, sans-serif;

	color: #4C4C4C;

	background: #B7B7B7;

    }



	



	#main_inner {



    float:left;



	border-radius: 0px;



	border: solid 0px #FFFFFF;



    padding:  0px 0px;



	font: Verdana, Arial, Helvetica, sans-serif;



	color:#4C4C4C;



	}



	



	#main_inner2 {



    float:right;



	border-radius: 0px;



	border: solid 0px #FFFFFF;



    background: #B7B7B7;



    padding:0px 0px;



	font: Verdana, Arial, Helvetica, sans-serif;



	color:#FFFFFF;



	}



	



    h2 {



    margin:0 0 1em;



    }



	



    #footer {



	position: relative;



	color:#ffffff;



	height: 180px;



	clear:both;



	text-decoration: none;



	



	height: 155px; /* .push must be the same height as .footer */



    }



	



	#part2 {



	float: right;



    clear: both;



	list-style:none;



	height: 100px;



	color:#FFFFFF



	}



	







	



	#part1 {



	margin-left: auto;



    margin-right: auto;



    width: 900px;



    clear: both;



	list-style:none;



	height: 100px;



	/* opacity: 1; */

 

	color:#FFFFFF







	



	}



	#footer_bg {



		list-style:none;







		background-image:url(images/alapalkki.png);



		height: 120px;



		



	}



	



	#img_t{



		/*opacity: 0.3;*/



	}



	



	#part 2 img{



		float:right;



		width: 500px;



	}



	



	#col1 {



		width: 350px;



		float: left;



		clear: both;



	}



	



	#col2 {



		width: 200px;



		float: right;



	}



	



    }







    #nav ul {



    margin:0;



    padding:0;



    list-style:none;



    }



	



    #nav li {



    display:inline;



    margin:0;



    padding:0;



    }











.container {



	width: 920px;



	padding: 0px;



	margin: 0 auto;



	z-index: 10;



	margin-bottom: 50px;



	border-radius: 10px;



	



}



/* top level



--------------------------------------------*/







#activeItem {



  opacity: 0.8;



  background-color:transparent;



}







#activeItem a:link {color: #4C4C4C;}



#activeItem a:visited, #activeItem a:hover,



#activeItem a:active {



  color: #4C4C4C;



}











/*links */



a:link {



    color: #4C4C4C;



	font-weight: bold;



	background-color: #B7B7B7;



}







/* visited link */



a:visited {



    color: #4C4C4C;



	font-weight: bold;



	background-color: #B7B7B7;



}















.menuTemplate3



{



    margin: 0 auto; width: 100%;float:left;



    behavior: url("/horizontal/menuh/cssmenu.htc"); 



    position:relative;



    z-index:4;



    height: 55px;



    border: 1px solid #fff;



    list-style: none;



    padding: 0;



	background: #030303;



	background: rgb(35,35,35); /* Old browsers */



	background: -moz-linear-gradient(top, rgba(35,35,35,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */



	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(35,35,35,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */



	background: -webkit-linear-gradient(top, rgba(35,35,35,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */



	background: -o-linear-gradient(top, rgba(35,35,35,1) 0%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */



	background: -ms-linear-gradient(top, rgba(35,35,35,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */



	background: linear-gradient(to bottom, rgba(35,35,35,1) 0%,rgba(14,14,14,1) 100%); /* W3C */



	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232323', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */



	/*opacity: 0.85;*/



}







.menuTemplate_act



{



    margin: 0 auto; width: 100%;float:left;



    behavior: url("/horizontal/menuh/cssmenu.htc"); 



    position:relative;



    z-index:4;



    height: 60px;



    background: #444;



    border: 1px solid #111;



    



    list-style: none;



    padding: 0;



	opacity: 1;



}



.menuTemplate3 div {



    box-sizing:content-box;



}  







.menuTemplate3 li



{



    padding: 0;



    float: left;



    height: 60px;



    position: relative;/*delete it if you want submenu to be positioned relative to the whole menu instead of this li element*/



    color: #EEE;



    z-index:5;



}







.menuTemplate3 li:hover, .menuTemplate3 li.onhover



{



    border-top:0;



}



.menuTemplate3 a



{



    padding: 0 15px;



    line-height: 45px; /*Note: keep this value the same as the height of .menuTemplate3 li */



    



    



	display: inline-block;



    outline: 0;



    text-decoration: none;



    color: #FFF;



    position: relative;



}



.menuTemplate3 li:hover a, .menuTemplate3 li.onhover a



{



    background-color: #222;



    color: #FFF;



    z-index: 9;



}



.menuTemplate3 a.arrow



{



    background: url(arrow.gif) no-repeat right center;



}



 



        



/*Used to align a top-level item to the right*/        



.menuTemplate3 li.menuRight



{



    float: right;



    margin-right: 0px;



}



        



/*for the top-level separators*/



.menuTemplate3 li.separator



{







    overflow:hidden;



    border-left:1px solid #aaa;



    height:45px;



   



    z-index:4;



}



               



        



/* sub level



--------------------------------------------*/



        



.menuTemplate3 .drop



{



    position: absolute;



    z-index:5;



    left: -9999px;



    border: 1px solid #000;



    background: #222;           



    text-align: left;



    padding: 0px;  



   



	color:#EEE;



}







.menuTemplate3 .drop a



{



    padding-left: 0px;



    padding-right: 0px;



    line-height: 45px;



  



    font-weight: normal;



    display: inline;



    text-align: left;



    



    position: static;



    z-index: 0;



}







.menuTemplate3 li:hover .drop, .menuTemplate3 li.onhover .drop



{



    left: -1px;/*Use this property to change offset of the dropdown*/



}



.menuTemplate3 li:hover .dropToLeft, .menuTemplate3 li.onhover .dropToLeft



{



    left: auto;



    right: -1px;



}



.menuTemplate3 li:hover .dropToLeft2, .menuTemplate3 li.onhover .dropToLeft2



{



    left: auto;



    right: -60px;



}







/* Elements within the drop down sub-menu



--------------------------------------------*/







.menuTemplate3 div.drop div div



{



    padding: 6px 20px;



}



.menuTemplate1 li:hover .drop a, .menuTemplate1 li.onhover .drop a



{



    background: none;



    background-image:none;



    padding:0 0;



}



.menuTemplate3 div.drop div a



{



    line-height: 24px;  



	color:white;



    background:none;



}



.menuTemplate3 div.drop div a:hover



{



    text-decoration:underline;



    cursor:pointer;



    color:Red;



}







.menuTemplate3 div.left {float:left;}







 



/* CSS3 effects



--------------------------------------------*/



 



/*for top-level*/       



.decor3_1 



{



    -moz-border-radius: 1px;



    -webkit-border-radius: 1px;



    border-radius: 1px;











/* MENU TAUSTA VARJO



    -moz-box-shadow: 1px 2px 4px 2px #EEE;



    -webkit-box-shadow: 1px 2px 4px 2px #EEE;



    box-shadow: 1px 2px 4px 2px #EEE;



*/







}







/*for submenu.*/   



.decor3_2 



{



    -moz-border-radius: 1px;



    -webkit-border-radius: 1px;



    border-radius: 1px;







    -moz-box-shadow: 0px 8px 14px #777;



    -webkit-box-shadow: 0px 8px 14px #777;



    box-shadow: 0px 8px 14px #777;  



}







  table{



    border-collapse: collapse;

    color:#ffffff;



  }



  



#box_menu {



  border-radius: 0px;



  border: solid 0px #000000;



  position:relative;



  top:270px;



  z-index: 12;



}







#box {



	border-radius: 0px;



	top: 0px;



	border-top-width: 0px;



	border-right-width: 0px;



	border-bottom-width: 0px;



	border-left-width: 0px;



	border-top-style: solid;



	border-right-style: solid;



	border-bottom-style: solid;



	border-left-style: solid;



	border-top-color: #FF0000;



	border-right-color: #FF0000;



	border-bottom-color: #FF0000;



	border-left-color: #FF0000;



}











#boxes2{



	position:relative;







  	



}







li {



	font-family: 'Open Sans', sans-serif;



	font-family: 'Lato', sans-serif;







}







#boxes3{



	position:relative;



	position:left;



}







div.descript {



	position: absolute;



	top:200px;   



	width: 100%; 



	background-color: black;  



	  



	color: white;  



	opacity: 0.6;   



	filter: alpha(opacity=60);  



	text-align: left;



}  



.border_ {



	border-radius: 15px;



	border: 5px solid #FFFFFF;



}