.kunto{
	margin-bottom: 5%;
}

.center-column{
	padding-top: 15px !important; 
}

.kunto h2{
	font-size: 15px;
	font-weight: 500; 
}

.kunto h3{
	font-size: 20px;
	font-weight: 500;	
}

.kunto h4{
	font-weight: 400; 
	font-size: 16px;
}

.kl_teksti{
	color: #212325;
	text-align: left;
	margin:2% 8%;
	font-size: 18px;
}
.kl_teksti_ala{
	color: #212325;
	text-align: center;
	margin: 2% 8%;
	padding: 0% 2%;
	font-size: 18px;
}

.A1{ background-color: #1e3d37; color: #fff; }
.A2{ background-color: #41c387 ; color: #fff; }
.B1{ background-color: #edff66; color: #000; }
.C{ background-color: #656565; color: #fff; }
.Business{ background-color: #41c387; color: #fff; }
.Naytto{ background-color: #41c387; color: #fff; }

.kl_container{
	padding-bottom: 10px;
    height: auto;
    overflow: auto;
}

.paaotsikko {
	color: #41c387;  
	padding:5px;
	
}

.linkkidiv{
	width: 100%; 
	height: auto; 
	padding: 3%; 
	margin-top: 15px; 
	margin-bottom:15px;
	position: relative;
	text-align: center;
}

.listacontainer{
    padding-bottom: 5px;
    padding-top: 10px;
    font-size: 16px;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.listacontainer2{
	padding:10px 15px 10px 15px;
}

.listacontainerPK {
	padding: 15px 30px 5px 30px;
    font-size: 16px;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.emkuvalinkki{
	width: 100%; 
	height: auto; 
	padding: 2%; 
	margin-top: 15px; 
	margin-bottom:15px;
	position: relative;
}

.div_linkiksi{
	position:absolute; 
	width:100%;
	height:100%;
	top:0;
	left: 0;
	z-index: 1;
}

.kunto_container{
	display:flex; 
	flex-direction: row; 
	justify-content: space-around;
	text-align: center;
	flex-wrap: wrap;
}
.kunto_container_pk{
	display:flex; 
	flex-direction: row; 
	justify-content: center;
	text-align: center;
	flex-wrap: wrap;
}

.esittely_box{
	background-color: #fff; 
	padding: 10px; 
	width: 50%;
	text-align: left;
	margin: auto;
	min-width: 600px;
    max-width: 800px;
}

.esittely_box img{
	margin-bottom: 20px;
}

.kunto_box{
    background-color: #fff;
    padding: 15px;
    width: 24%;
    min-width: 180px;
    box-shadow: 0px 0px 5px #d9d9d9;
    border: 0.5px solid #80808045;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.kunto_box h2{
	font-size: large;
	font-weight: 500;
}

.kunto_box2{
	background-color: #fff; 
	padding: 15px; 
	width: 40%;
	min-width: 220px;
	box-shadow: 5px 10px 18px #888888;
	border: 0.5px solid #80808045;
}

.kunto_box2 h2{
	font-size: large;
}

.kunto_box3{
	background-color: #fff; 
	padding: 10px 20px;
    width: 40%;
    min-width: 350px;
	max-width:350px;
    box-shadow: 0px 0px 5px #d9d9d9;
    border: 0.5px solid #80808045;
	margin: 1%;
	border-radius: 10px;
	display: flex;
    flex-direction: column;
}

.kl_linkki{
	font-size: 25px; 
	color: #41c387; 
	font-weight: 800; 
	text-transform: uppercase;
}

.em_linkki{
	font-size: 16px; 
	color: #000; 
	font-weight: 400; 
}

.em_linkki:after {
	font-family: "Glyphicons Halflings";
	content: "\e114";
	float: right;
}

.em_linkki.collapsed:after {
	content:"\e113";
}

.linkkidiv a:visited{
	color: #green !important;
}

.linkkidiv a:hover{
	color: #grey !important;
	font-weight: 800 !important;
}

.row_k{
	display: flex; 
	flex-direction: row; 
	justify-content: center;
	flex-wrap: wrap;
	cursor: zoom-in;
}

.row_k > .column {
	padding: 0 2px;
}

.row_k:after {
	content: "";
	display: table;
	clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
	width:  25%;
}

/* The Modal (background) */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	padding-top: 100px;
	right: 100px;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.88);
}

/* Modal Content */
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	width: 100%;
	max-width: 1000px;
}

/* The Close Button */
.close {
    color: #41c387;
    position: absolute;
    top: -70px;
    right: 0px;
    font-size: 75px;
    font-weight: bold;
    opacity: 1;
    z-index: 1200;
}

.close:hover,
.close:focus {
	color: #lightgreen;
	text-decoration: none;
	cursor: pointer;
}

/* Hide the slides by default */
.a1WSlides, .a2WSlides, .b1WSlides, .cWSlides,
.PkAWSlides, .PkBWSlides, .PkCWSlides, 
.BoWSlides .NWSlides,
.a1Slides, .a2Slides, .b1Slides, .cSlides,
.PkASlides, .PkBSlides, .PkCSlides, 
.BoSlides, .NSlides
{
	display: none;
}


/* Next & previous buttons */
.prev, .next {cursor: pointer; position: absolute; top: 35%; width: auto; padding: 16px; margin-top: -50px; color: #41c387; font-weight: bold; font-size: 40px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none;}
/* Position the "next button" to the right */
.next { right: 0; border-radius: 3px 0 0 3px; margin-right: 0px;}
.prev { margin-left:-50%; }
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.6); }
/* Number text (1/3 etc) */
.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; }
/* Caption text */
.caption-container { text-align: center; background-color: black; padding: 2px 16px;color: #000; }
.caption-container p{ padding: 10px; margin-bottom: 0; font-size: 20px; font-weight: 800; }

img.a1W_kuva, img.a2W_kuva, img.b1W_kuva, img.cW_kuva,
img.PkAW_kuva, img.PkBW_kuva, img.PkCW_kuva,
img.NW_kuva, img.BoW_kuva,
img.a1_kuva, img.a2_kuva, img.b1_kuva, img.c_kuva,
img.PkA_kuva, img.PkB_kuva, img.PkC_kuva,
img.N_kuva, img.Bo_kuva {
	width: 100%;
	max-width: 250px;
	min-width: 35px;
	padding: 5px;
}

img.vrt1_kuva {
	width: 100%;
	max-width: 250px;
	min-width: 35px;
	padding: 5px;
}

.kunto_img{
	width:75%; 
	padding-top: 5px;
}

.kuva_ctrl{
	display: flex; 
	flex-direction: row; 
	justify-content: space-around;

}
.kunto_container h2, .kunto_container_pk h2 {
    font-size: 20px;
    text-transform: unset;
    font-weight: 500;
	border-radius: 5px;
}
.kunto_container h4, .kunto_container_pk h4 {
    font-size: 16px;
    text-transform: unset;
    font-weight: 400;
}

.otsikko-banneri{
	width: 100%;
    text-align: center;
    margin: 0% 0% 2% 0%;
    background: #1e3d37;
    padding: 5% 0%;
}
.otsikko-banneri h2{
    color: #ffffff;
    font-size: 40px !important;
    font-family: 'Syne';
	margin:0px !important;
}

@media (max-width: 1540px){
	.kunto_box h3{
		min-height: 68px;
	}
	.listacontainer{
		font-size: 15px;
	}
	
	.listacontainerPK{
		padding:20px 10px 5px 10px;
	}
	
	.kunto_box3{
		width: 40%;
		min-width: 280px;
	}
}

@media (max-width: 1370px){	
	.listacontainerPK{
		padding: 10px 10px 0px 10px;
		font-size: 15px;
	}

	.kunto_box3{
		padding: 10px;
		width: 40%;
		min-width: 280px;
	}
	.otsikko-banneri h2 {
		font-size: 35px !important;
	}
}

@media (max-width: 1180px){
	.kunto_box{
		margin: 2% 0%;
		width: 45%;
		min-width: 175px;
	}	
	
	.kunto_box3{
		padding: 10px; 
		width: 40%;
		min-width: 230px;
	}
	.kunto_container h2, .kunto_container_pk h2 {
		font-size: 18px;
	}
	.kunto_container h4, .kunto_container_pk h4 {
		font-size: 14px;
	}
	.kl_teksti{
		font-size: 16px;
	}
	.kl_teksti_ala{
		font-size: 16px;
	}
	.otsikko-banneri{
		padding: 4% 0%;
	}
	
	.otsikko-banneri h2{
		font-size: 30px !important;
	}
}

@media (max-width: 1000px){
	/*.kl_container{
		margin-top: -65px;
	}*/

	.kl_teksti{
		margin:2% 5%;
		font-size: 14px;
	}

}

@media (max-width: 900px){
	.kunto_box{
		width: 48%;
		min-width: 250px;
		margin-bottom: 1%;
	}
	.kunto_box2{
		width: 48%;
		min-width: 250px;
		margin-bottom: 2%;
	}
	
	.kunto_box3{
		padding: 10px; 
		width: 40%;
		min-width: 220px;
	}
	.kunto_container h4, .kunto_container_pk h4 {
		font-size: 14px;
		text-transform: unset;
	}
	.kunto_container h2, .kunto_container_pk h2 {
		font-size: 18px;
		text-transform: unset;
	}
	
	.prev,
	.next {
	padding: 8px;
	}

	.listacontainer{
		padding: 10px 15px 0px 15px;
	}
	
	.listacontainer1{
		padding: 0px 15px 0px 15px;
	}
	
	.listacontainerPK {
		font-size: 14px;
		padding: 25px 30px 0px 30px;
	}	

		
	.listacontainer1 p{
		margin-top:15px;
	}
}

@media (max-width: 750px){
	.kunto_box{
		width: 48%;
		min-width: 210px;
		margin-bottom: 4%;
	}
	
	.kunto_box2{
		width: 100%;
		min-width: 210px;
		margin: 2% 4%;
	}
	
	.kunto_box3{
		width: 48%;
		min-width: 210px;
	}
	.kl_teksti{
		font-size: 14px;
	}
	.kl_teksti_ala{
		font-size: 14px;
	}
	.otsikko-banneri{
		padding: 3% 0%;
	}
	
	.otsikko-banneri h2{
		font-size: 25px !important;
	}
	.listacontainer {
		padding: 10px 15px 0px 15px;
		font-size: 14px;
	}
	.listacontainerPK {
		padding: 10px 15px 0px 15px;
		font-size: 14px;
	}
}


@media (max-width: 550px){
	.otsikko-banneri h2{
		font-size: 20px !important;
	}
}
	
@media (max-width: 480px){
	.kunto_box{
		width: 80%;
		margin: 7px 2px;
		min-width: 280px;
	}
	.kunto_box3{
		width: 80%;
		margin: 7px 2px;
		min-width: 280px;
	}
	.listacontainerPK {
		font-size: 15px;
		padding: 20px 20px 0px 20px;
	}
	
	.kunto_box3, .kunto_box2{
		margin:2% 0%;
	}
	.otsikko-banneri h2{
		font-size: 18px !important;
	}
}