@charset "UTF-8";

/*
PERUSSISÄLTÖ
*/

@media (min-width: 768px){
.perussisalto-palsta{
	width: 50%;	
}
	
.perussisalto-1 .perussisalto-palsta, .perussisalto-2 .perussisalto-palsta, .perussisalto-3 .perussisalto-palsta{
	width: 100%;	
}		
	
.perussisalto .flexboxwrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}	
}

@media (min-width: 992px){
	
.otsikkopalkki.perussisaltopalstoja1{
	text-align: center;
}
	
.perussisalto-palsta{
	width: 25%;	
	padding-bottom: 0;
}		
	
.perussisalto-1 .perussisalto-palsta{
	text-align: center;
	margin: 0 auto;
	width: 100%;
}
	
.perussisalto-1 .perussisalto-palsta ol, .perussisalto-1 .perussisalto-palsta ul {
	list-style-position: inside;	
}
	
.perussisalto-2 .perussisalto-palsta{
	width: 50%;	
}
	
.perussisalto-3 .perussisalto-palsta{
	width: 33.3332%;	
}	
}

/* 
KAPEA SISÄLTÖALUE
*/

@media (min-width: 992px){
.kapeasisalto-sisalto{
	width: 75%;
	text-align: center;
	margin: 0 auto;
}		
	
.kapeasisalto-sisalto ol, .kapeasisalto-sisalto ul{
	list-style-position: inside;	
}	
}

@media (min-width: 1200px){
.kapeasisalto-sisalto{
	width: 66.66666%;
}		
}

/*
KUVALLISET NOSTOT PALSTOISSA
*/

.kuvallinennosto-palsta{
	padding-top: 20px;
	padding-bottom: 20px;
}

.kuvallinennosto-palsta img{
	width: 100%;
	height: auto;
	margin-bottom: 15px;
	border-radius: 10px;
}

.kuvallinennosto-palsta h3, .kuvallinennosto-palsta p{
	margin-bottom: 15px;
}

.showroom-layout .kuvallisetnostot{
	margin-bottom: 20px;
}

.showroom-layout .kuvallinennosto-palsta-inner{
	background-color: #fff;
	padding: 20px;
	border-radius: 25px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

@media (min-width: 768px){
	
.kuvallisetnostot .flexbox{
	display: flex;
	flex-wrap: wrap;
}
	
.kuvallinennosto-palsta{
	width: 50%;	
}	
	
.showroom-layout .kuvallisetnostot{
	margin-bottom: 25px;
}	
	
.showroom-layout .kuvallinennosto-palsta{
	display: flex;
}	
}

@media (min-width: 992px){	
	
.kuvallinennosto-palsta{
	width: 25%;
	padding-top: 25px;
	padding-bottom: 25px;
}	
	
.kuvallinennosto-2 .kuvallinennosto-palsta{
	width: 50%;	
}
	
.kuvallinennosto-3 .kuvallinennosto-palsta{
	width: 33.3332%;	
}
	
.kuvallinennosto-4 .kuvallinennosto-palsta{
	width: 25%;	
}	
	
.showroom-layout .kuvallisetnostot{
	margin-bottom: 40px;
}	

}

/*
KUVANOSTOT
*/
.kuvanosto{
	padding-top: 20px;
	padding-bottom: 20px;
}

.showroomnosto .kuvanosto{
	z-index: 1;
	padding-bottom: 160px;
	position: relative;
}

.showroomnosto .apina-tuonne{
	z-index: 200;
	position: absolute;
	bottom: 0;
	left: 20px;
	width: 300px;
	line-height: 0;
}

.showroomnosto .apina-tuonne img{
	width: 100%;
	height: auto;
}

.kuvanosto-kuva{
	margin-bottom: 25px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

.kuvanosto-kuva img{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.showroom-layout .kuvanostot{
	margin-bottom: 20px;
}

.showroom-layout .kuvanostot.showroomnosto{
	margin-bottom: 0px;
}		

@media (min-width: 992px){
	
.showroomnosto .kuvanosto{
	padding-bottom: 65px;
}

.showroomnosto .apina-tuonne{
	z-index: 200;
	position: absolute;
	bottom: 0;
	left: -30px;
	width: 250px;
}	
		
.kuvanosto{
	display: flex;
	align-items: center;
	padding-top: 25px;
	padding-bottom: 25px;
}

.kuvanosto-kuva{
	width: 50%;
	margin-bottom: 0;
}
	
.kuvanosto-sisalto{
	width: 50%;
}	
	
.kuvanosto:nth-child(odd){
	flex-direction: row-reverse;
}	
	
.showroom-layout .kuvanosto:nth-child(odd){
	flex-direction: row;	
}	
	
.showroom-layout .kuvanostot{
	margin-bottom: 40px;
}	

.showroom-layout .kuvanostot.showroomnosto{
	margin-bottom: 0px;
}			
}

@media (min-width: 1200px){
.kuvanosto-sisalto{
	padding-right: 25px;
	padding-left: 40px;
}
.kuvanosto:nth-child(odd) .kuvanosto-sisalto{
	padding-left: 25px;
	padding-right: 40px;
}	
	
.showroom-layout .kuvanosto:nth-child(odd) .kuvanosto-sisalto{
	padding-right: 25px;
	padding-left: 40px;
}		
}

@media (min-width: 1440px){

.showroomnosto .apina-tuonne{
	width: 350px;
}		
}

/*
HENKILÖT
*/

.henkilo-kortti{
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 14px;
	display: flex;
	padding-left: 10px;
}

.henkilo-kortti h3{
	margin-bottom: 5px;
}

.henkilo-kuva {
  	position: relative;
  	width: 100px;
  	height: 100px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
	margin: 0 auto 15px auto;
}

.henkilo-sisalto{
	padding-left: 10px;
	width: calc(100% - 110px);
}

/* musta ympyrä */
.henkilo-kuva::before {
  	content: "";
  	position: absolute;
 	width: 80px;
  	height: 80px;
  	background: #222;
  	border-radius: 50%;
  	z-index: 0;
}

/* itse kuva */
.henkilo-kuva img {
  	max-width: 100%;
  	max-height: 100%;
  	object-fit: contain;
	position: absolute;
	top: 0;
	left: 0;
  	z-index: 1;
	transition: opacity 0.3s ease-in-out;
}

/* Valokuva piiloon oletuksena */
.henkilo-kuva img.henkilo-valokuva {
  	opacity: 0;
	width: 80px;
  	height: 80px;
	top: 10px;
  	left: 10px;
	border-radius: 50%;
}

/* Hover: piirros piiloon, valokuva näkyviin */
.henkilo-kuva:hover img.henkilo-piirroskuva {
  	opacity: 0;
}

.henkilo-kuva:hover img.henkilo-valokuva {
  	opacity: 1;
}

@media (min-width: 768px){
/*.henkilot{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}*/	
	
.henkilo-kortti{
	width: 50%;	
	text-align: center;
	font-size: 16px;
	display: block;
	padding-left: 20px;
}
	
.henkilo-kuva {
  	width: 240px;
  	height: 240px;
}
	
.henkilo-sisalto{
	padding-left: 0px;
	width: 100%;
}
	
/* musta ympyrä */
.henkilo-kuva::before {
 	width: 200px;
  	height: 200px;
}
	
/* Valokuva piiloon oletuksena */
.henkilo-kuva img.henkilo-valokuva {
	width: 200px;
  	height: 200px;
	top: 20px;
  	left: 20px;
}	
}

@media (min-width: 1440px){
.henkilo-kortti{
	width: 33.3332%;	
}
}
	

@media (min-width: 1680px){
.henkilo-kortti{
	width: 25%;	
}
}
	
/*
PALVELUNOSTOT
*/

.palvelunostot.palsta-asettelu .palvelunosto-palsta{
	padding-top: 0px;
	padding-bottom: 20px;
}

.palvelunostot.grid-asettelu .palvelunosto-palsta{
	padding-top: 10px;
	padding-bottom: 10px;
	width: 100%;
}

.palvelunostot.palsta-asettelu .palvelunosto-palsta img{
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

.palvelunostot.grid-asettelu .palvelunosto-palsta img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.palvelunostot.palsta-asettelu .palvelunosto-sisalto{
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}

.palvelunostot.palsta-asettelu .palvelunostowrap{
	background: #fff;
	height: 100%;
	box-shadow: rgba(7, 24, 56, 0.05) 0px 4px 16px, rgba(7, 24, 56, 0.05) 0px 8px 32px;
}

.palvelunostot.grid-asettelu .palvelunostowrap{
	display: flex;
	background: #fff;
	box-shadow: rgba(7, 24, 56, 0.05) 0px 4px 16px, rgba(7, 24, 56, 0.05) 0px 8px 32px;
	padding: 10px;
}

.palvelunostot.grid-asettelu .palvelunosto-kuva{
	/*width: 30*/
	display: none;
	line-height: 0;
}

.palvelunostot.grid-asettelu .palvelunosto-sisalto{
	width: 100%;
	padding: 10px 0px 10px 15px;
	line-height: 1.4em;
}

.palvelunostot a.nuolilinkki{
	display: block;
	width: 100%;
	margin-bottom: 10px;
}

.palvelunostot.grid-asettelu h3, .palvelunostot.grid-asettelu p{
	margin-bottom: 10px;
	display: block;
	width: 100%;
}

.palvelunostot.grid-asettelu h3{
	font-size: 21px;
}

@media (min-width: 768px){
	
.palvelunostot.palsta-asettelu .flexbox, .palvelunostot.grid-asettelu .flexbox{
	display: flex;
	flex-wrap: wrap;
}

.palvelunostot.palsta-asettelu .palvelunosto-palsta{	
	width: 50%;	
	padding-top: 20px;
	padding-bottom: 20px;
}
	
.palvelunostot.grid-asettelu .palvelunosto-palsta{
	padding-top: 20px;
	padding-bottom: 20px;
	width: 100%;
}	
.palvelunostot.grid-asettelu .palvelunosto-kuva{
	width: 30%;
	display: block;
}
	
.palvelunostot.grid-asettelu .palvelunosto-sisalto{
	width: 70%;
	align-items: center;
    display: flex;
    flex-wrap: wrap;
}
}

@media (min-width: 992px){

.palvelunostot.palsta-asettelu .topside-content{
	text-align: center;
	margin: 0 auto;
	padding-bottom: 40px;
}	
.palvelunostot.palsta-asettelu .palvelunosto-palsta{
	padding-top: 0px;
	padding-bottom: 0px;
	width: 33.3332%;	
	margin-bottom: 40px;
}	

.palvelunostot.palsta-asettelu .palvelunosto-1 .palvelunosto-palsta, .palvelunostot.palsta-asettelu .palvelunosto-2 .palvelunosto-palsta{
	width: 50%;	
}
	
.palvelunostot.palsta-asettelu .palvelunosto-3 .palvelunosto-palsta{
	width: 33.3332%;	
}
	
.palvelunostot.palsta-asettelu .palvelunosto-4 .palvelunosto-palsta{
	width: 25%;	
}	
	
.palvelunostot.grid-asettelu .palvelunosto-palsta{
	width: 50%;
}
	
.palvelunostot.grid-asettelu .palvelunosto-kuva{
	width: 50%;
	line-height: 0;
}

.palvelunostot.grid-asettelu .palvelunosto-sisalto{
	width: 50%;
	padding: 10px 25px;
}	
}

/*
KARTTAUPOTUS
*/
.googlemaps{
	margin-top: 40px;
}

.googlemaps .embed-container{
	padding-bottom: 500px;
}