/* todo: taustakuvat base css värit ja queryillä kuvat - pienille pienet ja isoille resoille vasta isot */

@import "bootstrap.less";
@import "responsive.less";
@import "muuttujat.less";	
	
/* gridi ja pääelementit */	

@media (max-width: 767px) {

	body {
	  padding-left: 0px;
	  padding-right: 0px;
	} /* poistaa bootstrapin paddingin */
	
	.blokki, #yritys-tarina {
		padding-left: 20px;
		padding-right: 20px;
	} /*siirtää sen .blokki -elementtiin */
}	

.blokki {
	padding-top: 180px;
	padding-bottom: 60px;
}

@media (max-width: 767px) { .blokki {padding-top: 120px; } }





/* navi */

@navbarHeight:				80px;	
@navbarText:				white;	
@navbarLinkColor:			white;	
@navbarInverseLinkColor:	white;
@navbarLinkColorHover:		black;
@navbarInverseLinkColorHover: black;

.navbar {
	margin-bottom: 0;
}	

#stickynav {
	.bluebackground;
}

.irti {
	border-bottom: 1px darken(@blue-transparent, 5%) solid;
	box-shadow: 0 0 2px rgba(0,109,161,0.5);
}	

.navbar-inverse, .navbar-inner  {
	background: none !important;
	border: none !important;
}	

.navbar-inner {
	.border-radius(0);
	.noshadow;
}	

@media (min-width: 1200px) 						 { .navbar { min-height: 100px; } .navbar .nav > li > a { padding-top: 40px; padding-bottom: 0px; } }
@media (min-width: 768px) and (max-width: 979px) { .navbar{ min-height: 80px; } .navbar .nav > li > a { padding-top: 30px; padding-bottom: 0px; } }
@media                        (max-width: 767px) { .navbar{ min-height: 60px;  padding-left: 20px;} .navbar .nav > li > a { padding-top: 20px; padding-bottom: 0px;} }
@media                        (max-width: 480px) { .navbar { min-height: 50px; } .navbar .nav > li > a { padding-top: 15px; padding-bottom: 0px; } }



padding-left: 20px;
.navbar .nav a {
	font-family: 'Merriweather Sans', sans-serif;	
	font-weight: 300;
	font-size: 18px;
}

.navbar-inverse .nav .active > a,
.navbar-inverse .nav .active > a:hover,
.navbar-inverse .nav .active > a:focus {
	color: black;
	background: none;
	.noshadow;
	text-shadow: none;
}

.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
	text-shadow: none; 
}

.navbar-inner { background-color: none !important;}

.navilogo (@navilogo-oikea; @navilogo-pysty; @navilogo-leveys) {
	padding-left: 0;
	padding-right: @navilogo-oikea;
	padding-top: @navilogo-pysty;
	padding-bottom: @navilogo-pysty;
	width: @navilogo-leveys;
}

.navbar .brand { .navilogo(60px; 20px; 200px); }	

@media (min-width: 1200px) 						 { .navbar .brand { .navilogo(80px; 30px; 250px); } }
@media (min-width: 768px) and (max-width: 979px) { .navbar .brand { .navilogo(40px; 30px; 175px); } }
@media                        (max-width: 767px) { .navbar .brand { .navilogo(0; 10px; 155px);} }
@media                        (max-width: 480px) { .navbar .brand { .navilogo(0; 10px; 150px);} }





/* mobiilinavi */

@media                        (max-width: 767px) { .navbar .btn {margin-top: 5px;} }
@media                        (max-width: 480px) { .navbar .btn {margin-top: 5px;} }

@media (max-width: 979px) { 

	.navbar .nav a {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		text-align: right;
		font-weight: 400 !important;
		border-bottom: 1px solid rgba(27, 153, 213, 0.9);
	}	

	.navbar .nav li:last-child a {
		border-bottom: none;
	}

}





/* yritys */
							.yritys { background-color: black; }
							.yritys { .tausta(yritys_960); }  
@media (min-width: 1200px){ .yritys { .tausta_fixed(yritys); } }	

.yritys {	
	padding-top: 0px;
	padding-bottom: 0px;
}

#yritys-intro {
	padding-bottom: 150px;
}	

@media 						  (max-width: 768px)   { #yritys-intro { padding-bottom: 100px; } }
@media                        (max-width: 480px)   { #yritys-intro { padding-bottom: 50px; } }



.kieli-nappi p {
  text-align: center;	
}


.kieli-nappi a {
	display: inline-block;
	text-align: center;
	background-color: black;
	color: white;
	height: 40px;
	padding-top: 20px; 
     border-radius: 0 0 50% 50%;
     -moz-border-radius: 0 0 50% 50%;
     -webkit-border-radius: 0 0 50% 50%;
	padding-left: 20px;
	padding-right: 20px;
}	

@media (max-width: 768px) { 
	.kieli-nappi {
	 	width: 30%;
	 	margin-left: 40%;
	}
	.kieli-nappi a {
		padding-top: 10px;
	}
}

@media (max-width: 480px) {
	.kieli-nappi {
	 	width: 40%;
	 	margin-left: 30%;
	}
}

#yritys-intro h1 {
	margin-top: 90px;
	color: white;
}

#before-stickynav {
	height: 30px;
	.bluebackground;
}

#yritys-tarina {
	.bluebackground;
	padding-top: 40px;
	padding-bottom: 100px;
	color: white;
}	


/* palvelumme */

.palvelumme h2 {
	text-align: left;
}

.palvelumme {
	background-color: @blue;
	.tausta(palvelumme_960);
	padding-bottom: 40px;
}	

@media (min-width: 1200px){ .palvelumme {.tausta(palvelumme); } }	


.palvelu {
	background: white;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 40px;
}

.ikoni img  { 
	margin-left: 30%;
	width: 60%;
} 

@media (min-width: 768px) {

	.ikoni-wrapper { display: table; }
	
	.ikoni { display: table-cell;
	   text-align: center;
	   vertical-align: middle; 
	   float: none !important;}

}

@media (max-width: 767px) { 
	.ikoni {width: 100%}
	.ikoni img { width: 25%; margin-left: 37.5%; margin-bottom: 20px; margin-top: 10px;}
	.palvelu p, .palvelu H2, .palvelu H3  { padding-left: 20px; padding-right: 20px;}  

}

@media (max-width: 480px) { 
	.ikoni img { width: 33%; margin-left: 33%; margin-bottom: 10px;}
}




/* referenssit */

.referenssit {
	background-color: black;
	.tausta(referenssit_960);
}

@media (min-width: 1200px){ .referenssit {.tausta(referenssit); } }	

.referenssit h2, .referenssit h3 {
	color: white;
}

.referenssi {
	display: inline-block;
	.bluebackground;
	padding-top: 15px;
	padding-bottom: 15px;
	color: white;
	margin-bottom: 20px;
	width: 100%;
}

.referenssi h4, .referenssi p {
	color: white;
	padding-left: 20px;
	padding-right: 20px;
}






/* me */


.me {
	background-color: black;
	.tausta(me_960);
} 	

.me h2 {
	color: white;
}


@media (min-width: 1200px){ .me {.tausta(me); } }	

#me-galleria {
	background-color: white;
	padding-bottom: 10px;
	margin-bottom: 20px;
	padding-top: 20px;	
}


.henkilo { 	margin-top: 20px; 
	width: 50%;
	float: left;	
}

.henkilo:nth-child(odd) {
	clear: both;
	}

@media  (max-width: 767px) { .henkilo { width:100%; margin-top: 20px;} }


/*
@media  (max-width: 767px) { .henkilo {	margin-top: 0; padding-top:10px; } .henkilo img { margin-top: 15px; }  }
*/

.henkilo img {margin-left:6%; width:20%; float:left;}

@media  (max-width: 480px) { .henkilo img {margin-left:5%; width:30%; margin-bottom: 15px;} }


.henkilo-kuvaus {
	float: left;
	margin-left: 5%;
	width: 63%;
}

@media  (max-width: 480px) { .henkilo-kuvaus { clear: both; width: 90%; margin-bottom: 2px;} }

.henkilo h4 { margin-top: 0; margin-bottom: 5px;}


/*

@media  (max-width: 767px) { .henkilo img {margin-left:4%; width:24%; margin-bottom: 10px;} }
@media  (max-width: 480px) { .henkilo img {margin-left:6%; width:30%;} }



@media  (max-width: 767px) { .henkilo h3, .henkilo h4, .henkilo p { margin-left: 4%; width: 92%;} }
@media  (max-width: 480px) { .henkilo h3, .henkilo h4, .henkilo p { margin-left: 6%; width: 88%;} }

@media  (max-width: 767px) { .henkilo h3, .henkilo h4 {margin-bottom: 10px;} }

*/


#email {padding-top: 20px; padding-bottom: 10px; clear: both; width: 100%;}





/* yhteystiedot */

.yhteystiedot {
	background-color: @blue;
	padding-bottom: 80px;
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}

.kartta {
	width:100%;
	height:600px;
}

@media                        (max-width: 767px) { .kartta { height:600px; } }
@media                        (max-width: 480px) { .kartta { display: none; } }

.yhteystiedot .span4 {
	margin-top: 40px;
}	

.yhteystiedot p {
	color: white;
}

.yhteystiedot a {
	color: white;
}


@media                        (max-width: 767px) { .yhteystiedot .container { padding-left:40px; padding-right: 40px; } }