* {
	box-sizing: border-box;
}

body, html {
	margin: 0px;
	padding: 0px;
	background-color: white; 
	/*background-image: ;*/
	text-align: left;
	font-family:arial;
	font-size:15px;
}

#runko7 {
/*width : 670px;*/
padding: 20px;
min-height:250px;
background:white;
display: flex;
gap: 10px;
flex-wrap: wrap;
}


.layout {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
	/*margin-top: -1px; */ /*sivun  et�isyys sivun yl�reunasta */
	/*width: 900px; */ /* second-level lists */
	background-color: transparent;
	text-align: left;
}

.content-block {
	background-color: white;
	padding: 24px;
	padding-top: 0px;
	border: 1px solid #ccc;
	border-radius: 8px;
	margin-bottom: 20px;
	/*min-width: 300px;*/
	flex: 1 1 0;
}

.ImageLogo
{
	text-indent: 25px; 
	font-style: oblique; 
	color: navy; 
	font-weight: bold; 
 	font-family: arial; 
 	font-size: 28px; 
 	background-image:url('logot/koe4.png'); 
 	background-repeat: no-repeat;
	background-size: contain;
 	background-color: white; 
 	height: 147px;/* menun kuvan tilan korkeuden muuttaminen */
	padding-top: 32px;
 }


#left{ /* palsta jako*/
width:200px; 
min-height:500px; 
margin-left:-0px; 
margin-right:0px;  
/*background:;*/
 margin-top:0px;
} 

#right{ /* palsta jako*/
/*background:;*/ 
width:680px; 
height:auto; 
min-height:400px; 
float:right;
margin-right:0px;
margin-left:0px;
 margin-top:6px;
} 


#right2{ /* palsta jako*/
/*background:;*/ 
width:900px; 
height:auto; 
min-height:400px; 
float:right;
margin-right:0px;
margin-left:8px;
margin-top:6px;
} 



/*
#boxA {
  border-radius:1em;
}
#boxB {
  border-radius:1em 3em;
}
#boxC {
  border-width:thick thin;
  border-radius:1.5em;
}
*/

/* boxi  tupla */
.cbox_m img {/*tupla  boxi*/
	width : 20%;/* kuvan leveys kehyksess�*/
	padding-right: -1px;
	padding-left: -5px;
	padding-bottom: 0px;
	float: right;
	border: 1px solid black;
	border-radius:0.3em;
}

.cbox_m {
	width: 273px;
	min-height:150px;
	height: auto;
	/*border: 1px solid #c4d0d5;
	border-radius:1em;*/
	margin-left: 45px;
	margin-right: -2px;
	margin-top: 0px;
	padding-left: -3px;
	padding-right: 22px;
	padding-bottom: 10px;
	padding-top: 15px;
	font-family:arial;
	font-size:14px;

}
.cbox_wrap_m_right {
	float: right;
	padding-bottom: 22px;
}



/* boxi0   */
.cbox0_m img {
	width : 42%;/* kuvan leveys kehyksess�*/
	padding-right: 6px;
	padding-left: 10px;
	padding-bottom: 25px;
	float: right;
}

.cbox0_m {
	width: 650px;
	min-height:120px;
	height:auto;
	border: 1px solid #c4d0d5;
	border-radius:0.5em;
	margin-left: 5px;
	margin-right: 0px;
	margin-top: 0px;
	padding-left: 14px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-top: 4px;
	font-family:arial;
	font-size:15px;

}

.cbox0_wrap_m_right {
	float: right;
	
	padding-bottom: 12px;
}

.cbox0_wrap_m_left {
	float: left;
	padding-bottom: 12px;
}

 
/* boxi4   */
.cbox4_m {
	width: 180px;
	min-height:120px;
	height:auto;
	/*border: 1px solid #c4d0d5;
	border-radius:1em;*/
	margin-left: -60px;
	margin-right: -0px;
	margin-top: -350px;
	padding-left: 75px;
	padding-right: 12px;
	padding-bottom: 5px;
	padding-top: 4px;
	font-family:arial;
	font-size:15px;

}


.cbox4_wrap_m_right {
	float: right;
	
	padding-bottom: 12px;
}

.cbox4_wrap_m_left {
	float: left;
	padding-bottom: 12px;
}

/* boxi9 tupla  */
.cbox9_m {
	display: grid;
	/*width:292px;*/
	min-height:240px;
	height: auto;
	border: 1px solid #c4d0d5;
	border-radius:0.5em;
	margin-left: 5px;
	margin-right: -2px;
	margin-top: 0px;
	padding-left: 14px;
	padding-right: 22px;
	padding-bottom: 10px;
	padding-top: 6px;
	font-family:arial;
	font-size:14px;

}

.cbox9_wrap_m_right {
	float: right;
	padding-bottom: 22px;
}

 
 
/* navipalkki yl� vaaka*/
	 div.float {
			/*height : 12px;
			font-weight : normal;
            /*width : 846px; */ /* navipalkin taustan leveys */
			background-color: #C2141F;/* navipalkin taustan v�ri */
			border: 2px solid #c4d0d5;
			border-radius:0.5em;
			max-width: 900px;
			/*background: url('logot/palkki.jpg') no-repeat left top;/*  Viiva navipalkissa */
			/*padding-left : 20px;
            padding-right : 28px;
			padding-bottom: 10px;
			padding-top: 4px; */
         }
 
		
         .float ul, #nav ul {
            cursor : default;
            display : flex;
			flex-wrap: wrap;
            margin : 0px;
            padding : 0px;
            position : relative;
            z-index : 2;
			font-size:10px;
         }
         .float ul li, #nav ul li {
			/*background: #485e49;*/
			display : inline;
            list-style-type : none;
            margin : 0px;
            padding : 11px;/* menuvalikoiden et�isyys toisistaan */
            position: relative;
         }
		 
         .float ul li a, #nav ul li a {
        
				
		height : 0.8em;/* navipalkin linkkien et�isyys toisistaan */
		color :  black;
		font-size:16px;color: white;
		font-weight : bold;
		text-decoration : none;
		background-color :none;
		border : 0px solid black;
		padding : 0 1.1em;/* menuvalikoiden et�isyys toisistaan */
		display : inline;
		padding-left: 10px;/* menuvalikoiden et�isyys vasemmalta */
				
         }
		 


		 
         ul li:hover > a {/* menualivalikoiden fontin styla kun hiiri on p��ll� */
           
		   color : grey;
		/* menbackground-color :#4169E1;   ei k�yt�ss�   */
         }
        ul li:hover > ul {
           
			display : block;
            float : left;
            
          left : 0px;
            top : 23pt; 
         }
		 
         ul li ul li {
            display : inline;
			
         }
 
         ul li ul li a {
            width : 10em;/* alavalikon pudotuspalkin leveys */
			font-weight : bold;
		    text-decoration : none;
			font-size:13px;/* fontin koko pudotusvslikko */
			border :  solid 00px;/* pudotusvalikon linkin kehys */
            display : none;
            float : none;
            display : block;
           	padding : -3px;/* pudotusvalikon linkkien et�isyys toisistaan */
			
			
			
         }
         div.endfloat {
            clear : both;
			
         }

.layout-grid {
	display: grid;
	margin-top: 30px;
	gap: 20px;
	grid-template-columns: 220px 1fr;
}
		 
/* navipalkki sivu pysty*/	

/* #nav, #nav ul {
	*/
	/* all lists */
		/*
		padding: 0;
		margin-left :0px;
		margin-top : 4px;
		list-style: none;
		background-position:left top;
		width : 17em;	
	}*/
	
	/* #nav li { 
		*/
		/* all list items */
		/*
		position : relative;
		float : left;
		line-height : 3.85em;
		margin-bottom : -23px;
		width: 12em;
	}*/
	
	/*#nav li ul
	{ 
	*/
	/* second-level lists15.45em; */
		/*
		position : absolute;
		left:  999em;
		margin-left : 20.05em;
		margin-top : -28px;
		margin-bottom :0px;
		padding-left : 0px;
        padding-right : 12px;
		padding-bottom: -9px;
		padding-top :  -4px;
	}*/
	
	
	
	/* #nav li ul ul { */
		/* third-and-above-level lists */
		/*
		left: -999em;
	}*/


	/*#nav li a {
	*/
	/* navipalkit sivulla */
		/*width : 12em;
		*/
		/* navipalkin kehysten leveys */
		/*
		height : 2.9em;
		*/
		/* navipalkin kehystenen korkeus */
		/*
		display : block;
		color : white;
		font-weight : bold;
		text-decoration : none;
		background-color :#C2141F;
	    border: 2px solid #c4d0d5;
	border-radius:0.7em;
		margin-left : -0.7em;
		margin-top : 2px;
		margin-bottom :0px;
		padding-left : 12px;
        padding-right :8px;
		padding-bottom: -1px;
		padding-top :  4px;
	}
	*/
		
	/*	
	#nav li li a {
		width : 14em;
		*/
		/* navipalkin kehysten leveys */
		/*
		height : 3.3em;
		*/
		/* navipalkin kehystenen korkeus */
		/*
		display : block;
		color : white;
		font-weight : bold;
		text-decoration : none;
		background-color :#C2141F;
	    border: 1px solid #c4d0d5;
		border-radius:0.7em;
		margin-left : -0.9em;
		*/
		/* navipalkin paikka-0.9em; */
	/*
		margin-top : 2px;
		margin-bottom :0px;
		padding-left : 10px;
        padding-right :8px;
		padding-bottom: -1px;
		padding-top :  4px;
	}
	
	#nav li a:hover {
		color : #C2141F;
		background-color : black;
	}
	
	#nav li:hover ul ul, 
	#nav li:hover ul ul ul,
	#nav li.sfhover ul ul,
	#nav li.sfhover ul ul ul
	{
	left: -999em;
	}
	*/
	
	/*
	#nav li:hover ul, 
	#nav li li:hover ul, 
	#nav li li li:hover ul, 
	#nav li.sfhover ul, 
	#nav li li.sfhover ul, 
	#nav li li li.sfhover ul */
	 /* lists nested under hovered list items */
	/*
	{ 
	left: auto;
	}
	*/

#nav {
	width: 17em;
}

#nav ul{
	display: block;
	margin-top: 0.5%;
	width: 100%;
}

#nav ul li{
	padding-left: 0;
	display: block;
	margin-bottom: -20px;
	width: 100%;
	text-align: left;
}

#nav ul li a{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: white;
	background-color: #C2141F;
	font-weight: bold;
	border: 2px solid #c4d0d5;
	border-radius: 0.7em;
	width: 100%;
	height: 2.9em;
}

#nav ul li a:hover{
	color: #C2141F;
	background-color: black;
}

#nav ul li:hover ul{
	display: block;
}

#nav ul li ul{
	position: absolute;
	display: none;
	top: 0;
	left: 95%;
	min-width: auto;
	white-space: nowrap;
}

#nav ul li ul li{
	display: block;
}

#nav ul li ul li a{
	display: block;
	line-height: 2.9em;
}

#sivupalkki {
float:left;
width : 35%;

}

#piilota {
visibility: hidden; 
}

.links2 {
	text-align: center;
}

.links2 a {
text-decoration : none;color: black;
}

.links2 a:hover{
text-decoration : underline;
}

.links3 a {
text-decoration : none;color: #0000FF; 
}

.links3 a:hover{
text-decoration : underline;
}

.links4{
	padding: 20px;
}
.links4 a {
text-decoration : none;color: #0000FF; 
}

.links4 a:hover{
text-decoration : underline;
}

.links4 ul {
	list-style-image: url(logot/nuoli.gif);
}

.links4 ul li {
	padding: 5px;
}

.footer {
	margin: 30px;
	text-align: center;
	font-size: 12px;
}

.footer hr {
	border: none;
	border-top: 1px solid #ccc;
	margin-bottom: 20px;
}

.Palvelemme {
	grid-column: 1 / span 1;
	grid-row: 2 / span 1;
	padding-left: 12px;
}

.lomake{
	padding-top: 10px;
}

.kuvagrid {
	display: grid;
	gap: 20px 20px;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
}

.kuvagrid img {
	border-radius: 0.3em;
	width: 20%;
	height: 20%;
}

.kuva {
	display: flex;
}

.yhteystiedot {
	padding-top: 5%;
}

.submenu {
	display: none;
}

.nav-puhelin {
	display: none;
}

.nav-linkki,
.nav-puhelin label {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: white;
	background-color: #C2141F;
	font-weight: bold;
	border: 2px solid #c4d0d5;
	border-radius: 0.7em;
	width: 100%;
	height: 2.9em;
	text-decoration: none;
	padding-left: 1em;
}

.nav-puhelin .submenu {
	list-style-type: none;
	padding-left: 0;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.nav-puhelin ul {
	margin-top: 0;
	margin-bottom: 0;
	list-style-type: none;
	padding-left: 0;
}

.nav-puhelin .submenu li a {
	display: block;
	color: white;
	font-weight: bold;
	background-color: #C2141F;
	border-radius: 0.5em;
	border: 1px solid #c4d0d5;
	text-decoration: none;
	line-height: 2.5em;
	padding-left: 1em;
}

.vesirivi {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.ohjegrid {
	display: grid;
	padding: 20px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

.ohjeet {
	display: flex;
	padding: 0 10px;
}

.kuvaVertical {
	display: flex;
	flex-direction: column;
	padding-right: 10px;
	flex: 0 0 120px;
	max-width: 120px;
	max-height: 300px;
}

.kuvaVertical img {
	max-width: 110px;
	max-height: 150px;
}

.kuvaVertical p {
	color: blue;
	font-weight: bold;
}

.ohjegrid a,
.ohjegrid a:visited {
	color: blue;
}

.Tärkeä {
	color: red;
	font-weight: bold;
}

@media (max-width: 767px) {

	.layout-grid{
		grid-template-columns: 1fr;
		margin-top: 3px;
	}

	.ImageLogo {
		height: 80px;
	}

	.float {
		width: 100%;
	}

	#nav {
		width: 100% !important;
	}

	#nav ul li {
		margin-bottom: 0;
		padding: 0;
		width: 100%;
	}

	#nav ul li a {
		width: 100%;
	}

	.nav-desktop {
		display: none;
		width: 100%;
	}

	.nav-puhelin {
		display: block;
	}

	#nav1:checked ~ label[for="nav1"] + .submenu,
	#nav2:checked ~ label[for="nav2"] + .submenu,
	#nav3:checked ~ label[for="nav3"] + .submenu {
		display: block;
	}

	.nav-puhelin label::after {
		content: "\25bc";
		margin-left: 0.4em;
	}

	label {
		display: block;
	}

	#nav ul li ul {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		width: 100%;
		padding-bottom: 5%;
	}

	.kuvagrid {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}

	input, select, textarea {
		width: 100%;
	}

	textarea {
		overflow: auto;
	}

	.ohjegrid {
		grid-template-columns: auto;
	}

	.ohjeet {
		flex-direction: column;
	}
}