@charset "UTF-8";
/* CSS Document */
/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

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

/* Tähän sivun asemoinnin oletusarvot, toimii mobiilissa */

nav {
	background-color: #FFF;
	background-color: hsla(0, 0%, 100%, .95);
	text-align: center;
	width: 100%;
	margin: 0px;
	position: fixed;
	top: 0;
	box-shadow: 5px 0px 5px hsla(0, 0%, 0%, .5);
	font-family: 'Titillium Web', sans-serif;
	font-weight: 300;
	font-size: 1em;
	padding-top: 20px;
	
	
	
}
nav ul {
	list-style: none;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 0px;
	padding-bottom: 10px;
	
	}
	
nav ul li {
	display:inline-table;
	width: 13,3333%;

	
	}
	
nav ul li a {
	color: #919191;
	font-size:1.1em;
	text-decoration: none;
	
	}
	
nav ul li a:hover {
	color:#DDD;
	font-size: 1.1em;
	text-decoration: none;
	
	
	}

#home {
	background-color:#00609E;
	color: #FFF;
	padding-top: 240px;
	padding-bottom: 40px;
	}
	
#services {
	background: url(../IMAGES/clouds_blue.jpg);
	color: #FFF;
	padding-bottom: 40px;
	padding-top: 40px;

	}
	
#expertise {
	background-color:#038;
	color: #FFF;
	padding-bottom: 20px;
	padding-top: 40px;
	}
	
#references {
	background: url(../IMAGES/fa_web_big.jpg);
	background-color:#037;
	color: #FFF;
	padding-bottom: 40px;
	padding-top: 20px;
	}
	
#contacts {
	background: url(bg1.jpg);
	background-color:#00609E;
	color: #FFF;
	padding-bottom: 90px;
	padding-top: 246px;
	
	}
	

body {
	background-color:#00609E;
	
	
	}
	
blockquote:before         { 
	content: "\275D";

}



:before, :after { 
  color: #44b9ff;
  font-size: 2.0em; 
}

#footer {
	
	padding-bottom: 30px;
	padding-top: 40px;
	text-align: center;
	font-size: .8em;
	
	}
	
#section {
	padding:50px;
	}
	
section  article {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;

	
	}	
	
article.first {
	margin-top: 20px;
	
	
	
	}	
	
h1, h2, h3, h4 {
	font-size: 2.8em;
	font-weight: 700;
	margin-bottom: .5em;
	color: #FFF;
	text-shadow: 0px 1px 0px #060;
	font-family: 'Roboto Slab', serif;
	
	}
		
h2 {
	
	font-size: 1.5em;
	
	}	
	
h3 {
	
	font-size: 1.4em;
	
	}	
	
h4 {
	
	font-size: 1em;
	
	}	
		
.vasen, .keski, .oikea {
	
	width: 100%;
	padding: 9%;
	margin-right: 1px;
	float: left;
	background-color: #FFF;
	background-color: hsla(0, 5%, 5%, .7);
	
	}	
	

p {
	
	font-family: 'Roboto Slab', serif;
	font-size: 1em;
	font-weight:300;
	margin-bottom: 1.5em;
	color: #EEE;
	text-shadow: 0px 1px 0px #050;
	line-height: 1.4em;
	
	}	

.refe {
	
	font-family: 'Roboto Slab', serif;
	font-size: 1.2em;
	font-weight:300;
	margin-bottom: 1.5em;
	color: #EEE;
	text-shadow: 0px 1px 0px #050;
	line-height: 1.5em;
	
	}	
	
.refebold {
	
	font-family: 'Roboto Slab', serif;
	font-size: 1.2em;
	font-weight:300;
	margin-bottom: 1.5em;
	color: #EEE;
	text-shadow: 0px 1px 0px #050;
	line-height: 1.5em;
	
	}	
	
	
.headerkuva {
	
	
	margin-bottom: 2em;
	background-color: #CCC;
	border: 1px #FFF;
	border-radius: 10px;
	box-shadow: 0px 1px 0px #050;
	

	
	}	
	
.logo {
	
	
	width: 40%;
	min-width: 230px;
	max-width: 320px;
	-ms-interpolation-mode:bicubic;
	padding-bottom: 20px;
	
	}
	
.footerlogos {
	
	display: inline-block;
	width: 30%;
	min-width: 80px;
	max-width: 150px;
	-ms-interpolation-mode:bicubic;
	padding-bottom: 0px;
	margin-right: 20px;
	
	}
	
img {
	
	
	width: 100%;
	-ms-interpolation-mode:bicubic;
	
	}	

	
.galleria img {
	
	
	background-color: #CCC;
	border: 1px #0F0;
	border-radius: 6px;
	box-shadow: #333;
	width: 49%;
	}	
	
	
.phone:before             { 
	content: "\2706"; 

}

a[href^="mailto:"]:before { 
	content: "\2709"; 
	
	}
	
.hrline					{
	border-top-style:dotted;
	border-bottom-style:dotted;
	border-color:#9bb9df;
}
	
/* =Backtotop
--------------------------------------------------------------------------------------------------------*/
#backtotop { height:auto; position:fixed; right:30px; bottom:30px; display:none; z-index:30; }
#backtotop ul { padding:15px 0px; list-style: none; }
#backtotop ul li a { background:url(../images/bg-up.png) center 48% no-repeat #44b9ff; background-size:22px 15px; display:block; width:50px; height:50px; float:right; right:10px; text-indent:-9000px; -webkit-box-shadow:0 0 30px rgba(0, 0, 0, 0.1); -moz-box-shadow:0 0 30px rgba(0, 0, 0, 0.1); box-shadow:0 0 30px rgba(0, 0, 0, 0.1);}
#backtotop ul li a:hover { -webkit-box-shadow:0 0 30px rgba(0, 0, 0, 0); -moz-box-shadow:0 0 30px rgba(0, 0, 0, 0); box-shadow:0 0 30px rgba(0, 0, 0, 0); }
/* End Backtotop
--------------------------------------------------------------------------------------------------------*/
	
/* Tablet laitteiden asemoinnit, toimii vain yli 600 px leveillä näytöillä */
@media screen and (min-width: 600px) {


nav ul li {
	display: inline-block;
	width: 16%;
	
	}


nav-button {
	
display: block;
background: #fc6f1a;
padding: 7px 10px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
width: 26px;
margin: 0 auto;
cursor: pointer;

}

.vasen, .keski {
	
	width: 33%;
	
	}	
	
.oikea  {
	
	width: 33%;
	
	}
	
		
.galleria img {
	
	
	max-width: 33%;
}	
	
}

/* Desktop laitteiden asemoinnit, toimii vain yli 900px leveillä näytöillä */
@media screen and (min-width: 900px) {
	
.vasen, .keski, .oikea {
	
	width: 33,3333%;
	padding: 3%;
	float: left;
	
	}
	
nav ul li {
	display: inline-block;
	width: 16%;
	
	}
	
}