body{
	background-color:#f7f7f7;
}
/* !Header */

#logo, #logo img{
	width:234px;
}


#top-container{
	padding-top:1em;
	padding-bottom:1em;
}

#main-image, #main-image-palvelut{
background-image:url('../images/main-image.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position: center center;
padding-top:6em;
padding-bottom:6em;
border-radius:4px;
margin-top:2em;
margin-bottom:3.5em;
position:relative;
}


#main-image-palvelut{
background-image:url('../images/main-image-palvelut.jpg');
}


.main-image-element, .main-image-element-2{
	position: absolute;
	left:-10px;
	bottom:-10px;
	width:120px;
	height: 120px;
	background-image:url('../images/dots.svg');
	background-position: left bottom;
background-size:120px;
background-repeat: no-repeat;
/*background-color:#0D0A76;
z-index:-1;
border-bottom-left-radius: 38px;*/
z-index:-1;


}


.main-image-element-2{
	left:inherit;
	top:inherit;
	right:-10px;
	top:-10px;
	
background-position: right top;


}

/* !Linkit ja painikkeet */


p a, p a:visited  {
	color:inherit;
	font-weight:600;
	border-bottom: solid 2px #040328;
}


footer .small a{
	color:#ffffff;
	border-color:#ffffff;
}


p a:hover {
	
	border-bottom:0;
}



	
	
	
.button {
	display: block;
	text-decoration: none;
	padding: 0.75em 1.5em 0.75em 1.5em;
	width: 100%;
	font-size:1.15rem;
	border-radius:50px;

}

.button-blue, #yhteydenottokehote h2{
	color:#ffffff;
}


.button-white{
	background-color:#ffffff;
	color:#0b0966;
}


#button-container{
margin-top:2em;

	display: flex;
	justify-content: center;
	gap:1.25em;
	flex-wrap: wrap;
}





/* !Taustavärit*/

.white-bg{
	background-color:#ffffff;
}
.grey-bg{
	
	background-color:#efefef;
}

.blue-bg, .button-blue{
	background-color:#0D0A76;
	background-image: linear-gradient(#0d0a76 0%, #0b0966 100%)
}

.blue-dark-bg{
	background-color:#040328;
	
}



.button-blue{
		
background: url("../images/right-white.svg") no-repeat right 22px center, linear-gradient(#0d0a76 0%, #0b0966);
background-size: 10px, cover;
}

.button-blue:hover{
		
background: url("../images/right-white.svg") no-repeat right 16px center, linear-gradient(#0d0a76 0%, #0b0966);
background-size: 10px, cover;
}


.expander, .expanded{
		
background: url("../images/more.svg") no-repeat center center, linear-gradient(#0d0a76 0%, #0b0966);
background-size: 30px, cover;
text-indent: -999999em;
width:200px;
margin-left:auto;
margin-right: auto;
margin-top:.5em;
margin-bottom:1em;
}

.expanded{
		
background: url("../images/less.svg") no-repeat center center, linear-gradient(#0d0a76 0%, #0b0966);
background-size: 30px, cover;
}


.content{
	padding-top:1.7em;
}


/* !Muut*/



.rounded, .luotettava-kumppani, .nosto img{
	border-radius:4px;
}

.box-shadow{
	box-shadow:
  0px 0px 40px rgba(0, 0, 0, 0.1);
}


.vahvuus img, .nosto img{
		margin-bottom:1.25em;

}





.vahvuus img{
	margin-left:auto;
	margin-right: auto;
	width:64px;
}

.logoelementti{
	width:60px;
}

.luotettava-kumppani{
	width:140px;
	margin-top:0.25em;
}

footer ul li{
	font-size:1.1rem;
}

footer strong{
	display:block;
	margin-bottom:0.5em;
}

footer a[href^="mailto"], footer a[href^="tel"]{
	
	background-repeat: no-repeat;
	background-position:left center;
	padding-left: 1.75em;
	margin-top:0.25em;
	margin-bottom:0.25em;
display:block;

	
}

footer a[href^="mailto"]{
	
	background-image:url('../images/email.svg');
	background-size:18px;
	
} 

footer a[href^="tel"]{
	
	background-image:url('../images/phone.svg');
	background-size:18px;
	
} 

header .button{
	margin-top:2em;
}

footer ul{
	margin-bottom:2em;
}

#referenssilogot{
	display:flex;
	flex-wrap: wrap;
	gap:2.5em;
	justify-content: center;
	margin-top:2.5em;
}

#referenssilogot img{
	height:22px;
	width:auto;
}





.basic-ul li{
			background-image:url('../images/li.svg');
	background-size: 9px;
	padding-left:1.25em;
	background-position: left 11px;
	background-repeat: no-repeat;


}


.content {display:none;}

hr{
	height: 4px;
	border-radius:10px;
	width:50px;
	background-color:#0B0966;
	border:0;
	margin-left:0;
	margin-bottom:1.75em;

}


@media all and (min-width: 600px) {

#intro{
	padding-right:3em;
}

header .button{
	max-width:300px;
}



}


@media all and (min-width: 768px) {


.main-image-element, .main-image-element-2{
	left:-12px;
	bottom:-12px;
	width:140px;
	height: 140px;
	background-size:140px;


}


.main-image-element-2{
	left:inherit;
	bottom:inherit;
	right:-12px;
	top:-12px;



}



}






@media all and (min-width: 1023px) {

#intro{
	padding-right:4em;
}


#main-image, #main-image-palvelut{
padding-top:9em;
padding-bottom:9em;
margin-bottom:1.75em;
}



#referenssilogot img{
	height:36px;
}




#top-container{
	padding-top:0;
	padding-bottom:0;
}


#top-container{
	display:flex;
	align-items: center;
}

#logo{
	margin-right: auto;
}

#logo, #logo img{
	width:264px;
}

#button-container{
	
	gap:3em;
}



.luotettava-kumppani{
float:right;
width:220px;}



.button {
		max-width: 240px;
			font-size:1.25rem;


}






.vahvuus img{
	
	width:84px;
}




}



@media all and (min-width: 1200px) {
	
	 #main-image, #main-image-palvelut{
padding-top:10em;
padding-bottom:10em;
}


.main-image-element, .main-image-element-2{
	left:-36px;
	bottom:-36px;
	width:180px;
	height: 180px;
	background-size:180px;


}


.main-image-element-2{
	
	right:-36px;
	top:-36px;
	bottom:inherit;
	left:inherit;
	


}

#intro{
	padding-right:5em;
}

footer ul li{
	font-size:1.175rem;
}


}