html *
{
    font-family: Georgia, Serif;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */}
	

div.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
	max-height:800px;
	max-width: 100%;
  padding: 10px;
  flex: 1 100%;
 border-style: solid;
    border-width: 1px;
	margin: 5px;
	border-radius: 5px;
}



div.tekstiboksi {
	padding:30px;
}

.right-container {
	flex: 1 auto;
	background-size: cover;
}
.gantcont { flex: 1 1; min-height: 400px ;}

 .kartta {min-height:400px;
   resize: vertical;
   overflow: auto;}

/* Medium screens */
@media screen and (min-width: 600px) {
  
  .aside { flex: 1 1; }
  .kartta { flex: 2 2; 
			min-height:400px}
.gantcont { flex: 1 100%; }
}



/* Large screens */
@media screen and (min-width: 2000px) {
	

  
  .aside { flex: 1 1; height: 700px;}
  .kartta { width:20px;
			flex: 1 1; height: 700px;}
  .gantcont { flex: 1 1; height: 700px;}
  
}
/* Mobile screens */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.wrapper > * {
		max-height:800px;
		max-width: 100%;
		padding: 10px;
		flex: 1 100%;
		border-style: solid;
		border-width: 1px;
		margin: 5px;
	font-size: 300%;}
	
	.kartta {height:800px; }
	.gantcont {height:800px;}
}

}


div.header a:link {color:white;}
div.header a:visited {color:white;}



div.header{
		text-align: left;
		color: white;
		background-color: black;
		
	}