@import url('https://fonts.googleapis.com/css?family=Economica');
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=BenchNine');

body { margin: 0; background-color:#ffffff; background-image:url(images/bg.jpg); background-repeat:no-repeat; background-position: left top ; background-attachment:fixed; font-size: 14px;  }
a { outline:none;}
.top { width: 100%;  padding: 0; margin: 0 auto;  display:block; position: fixed; top: 0; left: 0; z-index: 100;  background-color: #4e4e4e; }

.navi { width: 100%; max-width: 1100px;  padding: 0; margin: 0 auto;  display:block;  }
ul#menu { width: 100%; /*max-width: 1000px;*/ padding: 0; margin: 0; text-align:left;   }
ul#menu li { list-style: none; display: block; width: 13.25%; padding: 0 .5% ; margin: 0; text-align: center; float:left; font-size: 1.3em; text-transform:uppercase;  /*background-color: #5b9dcd;*/}
#menu li a:link, #menu li a:visited  {  font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 300; display: block; width: 100%; padding: 15px 0 0 0; height: 55px; color: #fff;  text-decoration:none;} 
#menu li a:hover {text-decoration:none; background-color: #1264a5; }

div#etusivu { padding: 80px 0 0 0; margin: 0;} /*---muista vaihtaa--*/

div.left-etu { display: block; float: left; width: 80%; margin: 0; padding:20px 10%;  }
div.right-etu { display: block; float: right; width: 40%; margin: 0 ; padding: 20px 0;  }
/*div.right-etu img { width: 100%; padding: 15px 0;  }*/

span.esite { float: right; width: 30%; margin: 0 0 15px 2%; padding: 0 auto; border: none; font-weight: 400; color: #333333; font-size: 1.2em; line-height: 1em; font-family: 'Yanone Kaffeesatz', sans-serif; text-transform: uppercase; text-align: center; }
span.esite img { float: right; width: 80%; margin: 0 10% 10px 0; border: none;}


div#toiminta, div#jasenet, div#tietopankki, div#yhteys, div#liity, div#koulutus { padding: 70px 5% 0 5%; width: 90%; /*min-height: 1000px;*/ margin: 0; border-top: 1px dotted #000;}
div#tietopankki  { padding: 70px 5% 0 5%; width: 90%; /*min-height: 1000px;*/ margin: 0;/* border-top: 1px dotted #000;*/}

.container { width: 96%; max-width: 1010px;  padding: 10px 2%; margin: 10px auto; display:block; background-color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 300; color: #333333; font-size: 1.1em; line-height: 1.5em; position:relative; }
img#some { float: right; margin: 15px 0;}

.left {width: 29%; padding: 5px 1% 5px 0; margin: 8px 1% 8px 0; float: left;  border-right: 1px dotted #A4A4A4; display:block; line-height: 1.2em;  }
.leftwide {width: 61%; padding: 10px 2% 5px 0; margin: 8px 2% 8px 0; float: left;  border-right: 1px dotted #A4A4A4; display:block;  }
.center {width: 28%; padding: 5px 2%; margin: 8px 1% ; float: left;  display:block;  border-right: 1px dotted #A4A4A4;  line-height: 1.2em;}
.right {width: 28%; padding: 5px 2%; margin: 8px 1%; float: left;  display:block;   line-height: 1.2em;}


.content  { width: 100%; margin: 0;  padding: 0; display:block; clear: both; background-color: #fff; }
.content:after {  clear: both;   content: "";  display: block;} /*  container div get the height of max of its children's height + overflow hidden in div.content*/
img#wide { width: 100%; height: auto;}
img#right { float: right; width: 34%; margin: 0 0 15px 2%;}
img#group { float: right; width: 35%; margin: 0 0 15px 2%;}


.wide { clear:both; width: 90%; padding:  0 5%;}
/*.wide img { border: 1px solid #bfbfbf; width: 18%; margin: 0 1% 0 0; float:left;}*/

.wideliity {width: 100%; padding: 25px 3%; margin: 8px 0; float: left;  display:block;  line-height: 1.2em; background-color: #edf3ff;  -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -khtml-border-radius:10px;  }


#header { width: 100%; /*margin: 40px 0 0 0;*/ margin: 0; display:block; }
/*#header img { width: 100%;}*/
div#logo {width: 20%; height: 50px; padding: 20px 0 0 5%; display:block; float:left;}
div#cube {width: 67px; height: 38px;  float: right; padding: 30px 2% 0 0 ; display:block;}

div#address {width: 90%; min-height: 20px; float:left; padding: 15px 5% 5px 5%; display:block; font-weight: 400; color: #333333; font-size: 1.2em; line-height: 1em; font-family: 'Yanone Kaffeesatz', sans-serif; text-transform: uppercase; }

/*  S L I D E   --------------------------*/
div.slide { width: 100%; clear: both; }
.rslides { position: relative;  list-style: none;  overflow: hidden;  width: 100%;  padding: 0;  margin: 0;  }
.rslides li {   -webkit-backface-visibility: hidden;  position: absolute;  display: none;  width: 100%;  left: 0;  top: 0;  }
.rslides li:first-child {  position: relative;  display: block;  float: left;  }
.rslides img {   display: block;  height: auto;  float: left;  width: 100%;  border: 0;  }




/* ------------- Y H T E Y S T I E D O T --------------------------------------------------*/
.yhteys { width: 47%; min-height: 340px; padding: 10px 1%; float: left;  }
.yhteyslomake { width: 50%; float:right; }
.yhteyshlo { width: 30.33%; min-height: 160px; padding: 10px 1% ; margin: 10px 1% 0 0; float: left; border-top: 5px solid #d4d4d4; line-height:1.2em;	}
img#hlo { float: right; width: 25%;  margin: 0 0 15px 2%;}

/* -----------------------------------------------------------------------------------------*/
/* ------ Y H T E Y D E N O T T O L O M A K E ----------------------------------------------*/
/* -----------------------------------------------------------------------------------------*/


div#form { clear:both; display: block; width: 100%; padding: 10px 0 50px 0; margin: 0 0 30px 0;}
div.formleft, div.formright { width: 50%; padding: 0 0 10px 0; float: left;}
div.formwide { width: 100%; padding: 10px 0; float: left; text-align:center;}

div.stripe { width: 100%; border-top: 1px dotted #A4A4A4; padding: 0 ; margin: 10px 0; clear:both; }

form#liitylomake {	margin: 0; padding:0; }

input#yritys, input#osoite, input#postinro,  input#ytunnus, input#yhthlo, input#yhthlo, input#email, input#puh,
textarea#kokemus, textarea#referenssit, textarea#tavarantoimittajat, textarea#suosittelijat
{	width: 85%; padding: 10px 3%; margin: 5px 0; background-color:#EFECEC; border: 0; color:#1264a5; font-size: .9em;
 -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -khtml-border-radius:10px; }

input#vahvistus
{	width: 60px; padding: 10px 3%; margin: 5px 0; background-color:#EFECEC; border: 0; color:#1264a5; font-size: .9em;
 -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -khtml-border-radius:10px; }

.submitbutton { border:1px solid #919191;  -moz-border-radius:10px;  -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; padding:10px 15px; color:#fff; font-family: 'Economica', sans-serif; font-size: 1.4em; background-color:#4e4e4e; }
	




div.jasen { width: 30.33%;  padding: 10px 1% ; margin: 10px 1% 0 0; float: left;  border-top: 5px solid #d4d4d4; min-height: 250px; line-height:1.2em; word-wrap:break-word!important;}
div.jasen img { width: 65%; display:block; margin-bottom: 15px; }

div.con_navi { width: 96%; padding: 10px 0; margin: 8px 0; display:block;}

/* ------------- R E F E R E N S S I T  --------------------------------------------------*/
.ref { width: 47%; min-height: 100px; padding: 10px 1% ; margin: 10px 1% 0 0; float: left; border-top: 5px solid #e3effb;/* -webkit-border-radius: 12px;
    -moz-border-radius: 12px;    border-radius: 12px; background-image: url(images/bg_hlo.jpg); background-repeat:no-repeat; background-position:left top;*/ 	}
img#ref { float: right; width: 35%;  margin: 0 0 15px 2%;}		
	


/* ------------- T I E T O P A N K K I --------------------------------------------------*/	
div.tiedote { border-bottom: 1px dotted #A4A4A4; padding: 5px 0; margin: 5px 0; }
/* ------------- A R K I S T O   --------------------------------------------------*/
a:link h2#arkisto, a:visited h2#arkisto { text-decoration: underline; color:#1264a5; padding: 20px 0;}
a:hover h2#arkisto { text-decoration: none; color: #4e4e4e;}

.slidingDiv {
/*min-height:300px;*/
background-color: #EFECEC;
margin:10px 0;
padding:15px 3%;
 -moz-border-radius:10px;  -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;
 width: 94%;

}

.show_hide {
display:none;
}
	
/* ------------- P A L V E L U T  --------------------------------------------------*/
.palvelu { width: 47%; min-height: 150px; padding: 10px 1% ; margin: 10px 1% 0 0; float: left; /* background-image: url(images/bg_hlo.jpg); background-repeat:no-repeat; background-position:left top;*/ border-top: 5px solid #e3effb;	}	
img#palvelu { width: 100%; height: auto;}


h1, h2, h3, h4, h5 {    font-family: 'Economica', sans-serif; }
h1 { font-size: 2.4em; line-height: 1em; margin: 20px 0; text-transform: uppercase; color:#4e4e4e;}
h1#small { font-size: 2em; line-height: 1em; margin: 10px 0; color:#0f52a1; text-transform: none;}
h1#grey { font-size: 2em; line-height: 1em; margin: 10px 0;  color:#444444; text-transform: none;}
h2 { font-size: 1.6em; line-height: 1em; margin: 3px 0; padding: 3px 0; color:#1264a5; }
h2#materiaalitoimittajat, h2#urakoitsijat, h2#rakennusmateriaali, h2#suunnittelutoimistot, h2#linkit  { padding-top:95px;}


h3 {  font-size: 1.3em; margin: 6px 0; padding: 3px 0; font-style: italic;  }

b {font-weight: 700;}
span.small { font-style: italic; font-size: .9em;}

a.body:link, a.body:visited { color:#1264a5; padding:0 0 0 15px; text-decoration:underline; background-image: url(images/link.png); background-repeat: no-repeat; }
a.body:hover { text-decoration: none;  color: #5b9dcd;}

a.nobg:link, a.nobg:visited { color:#1264a5; padding:0 ; text-decoration:underline; }
a.nobg:hover { text-decoration: none;  color: #5b9dcd;}


a.pdf:link, a.pdf:visited { color:#1264a5; line-height: 1.2em;   text-decoration: underline;  background-image: url(images/PDF-Icon.gif); background-repeat: no-repeat; padding: 0 0 15px 34px; display: block; margin: 12px 0 4px 0  ; border-bottom: 1px dotted #4e4e4e;  }
a.pdf:hover { text-decoration: none; color: #5b9dcd;  }

a.etulink:link, a.etulink:visited { color:#1264a5; padding:0 0 0 15px; margin-right: 10px; text-decoration:underline; background-image: url(images/link.png); background-repeat: no-repeat; }
a.etulink:hover { text-decoration: none;  color: #5b9dcd;}


img#logot {float: right; padding: 5px 3%;}

div.clr { clear:both; padding: 3px 0; width: 90%;}


section#cols {
	width: 100%;
   
   -webkit-column-count: 2;
   -webkit-column-gap:   10px;
   -moz-column-count:    2;
   -moz-column-gap:      10px;
   column-count:         2;
   column-gap:           10px;
}


/* ------------- S L I C K N A V  --------------------------------------------------*/

.slicknav_menu {	display:none; }