/* Unessential CSS - Just here to make this sample page prettier */

html, body {
    height: 100%;
	    margin:0;
    padding:0;
}

body {
  font-size: 19px;
  font-family: 'Roboto', sans-serif;
  line-height: 1.2;
  background-color: white;
  background-image: url("kelta1.jpg");
  background-repeat: repeat;
  background-attachment: fixed;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

//Container with some overflowing content
.container {
    width: 100px;
    height: 100px;
    overflow: scroll; //This does our work
}

#container {
    margin: 0 auto;
    max-width: 100%; /* A really big width */
    min-width: 100px;
	overflow:visible;
}

img {
  height: auto;
  max-width: 100%;
}

picture {
  line-height:0;
  display: block; 
}
	  
	  h1 {
  font-size: clamp(20px, 5vw, 30px);
  font-weight: normal;
  color: #800000;
}

	  h2 {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: normal;
  color: #336600;
}

	  h3 {
  font-size: clamp(20px, 5vw, 28px);	  
  font-weight: normal;
  color: #805500;
}

	  h4 {
  font-size: 19px;
  font-weight: normal;
  color: #805500;
}

	  h5 {
  font-size: 24px; 
  font-weight: normal;
  color: #000000;
  margin: 0px;
}

	  h6 {
  font-size: clamp(19px, 5vw, 19px);
  font-weight: normal;
  color: #805500;
  margin: 0px;
}

span { 
font-size: 19px;
color: #004d1a;
}

.box{
width: px;
height: px;
border: 1px solid black;
margin: 0;
padding-left: 10px;
padding-right: 10px;
background-color: #ffffff;
background-image: url("boxtausta.jpg");
} 

.box2{
width: px;
height: 100%;
border: 1px solid black;
margin: 0;
padding-left: 10px;
padding-right: 10px;
background-color: #ffffff;
background-image: url("boxtausta.jpg");
} 

#footer{
    background-color: #f9f2ec;
	background-image: url("kelta1.jpg");
    height: 100px;
    text-align: center;
	padding-top: 22px;
	padding-bottom: 20px;
}

/* unvisited link */
a:link {
  color: #206020;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #800000;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

#otsikkodiv {
	background-color: #ecd9c6;
	background-image: url("kelta1.jpg");
    padding: 0px;
    text-align: center;
	line-height: 40px;
    margin-top: 1px;
    margin-bottom: 1px;
	height: px;
}

#otsikkodiv2 {
	background-color: #ecd9c6;
	background-image: url("kelta1.jpg");
    padding: 0px;
    text-align: center;
	line-height: 40px;
	height: px;
    margin-top: 1px;
    margin-bottom: 1px;
}

#menu{
	background-image: url("kelta2.jpg");
	height: px;
	padding-bottom: px;
}

hr {
    color: #f5d6eb;
    background-color: #f5d6eb;
    border: none;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* STRUCTURE */

.wrapper {
	padding: 0px;
	max-width: 1600px;
	width: 95%;
	margin: 0px auto;
	margin-top: 10px;
	margin-bottom: 10px;
	background-image: url("kelta2.jpg");
	font-size: 19px;
    font-family: 'Roboto', sans-serif;
	color: #333300;
	border-width:1px;
    border-style:solid;
    border-color:#ff9999;
}

.columns {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 5px 0;
}

.column {
	flex: 1;
	border: 0px solid gray;
	margin: 2px;
	padding: 10px;
	&:first-child { margin-left: 0; }
	&:last-child { margin-right: 0; }	
}

@media screen and (max-width: 980px) {
  .columns .column {
		margin-bottom: 5px;
    flex-basis: 40%;
		&:nth-last-child(2) {
			margin-right: 0;
		}
		&:last-child {
			flex-basis: 100%;
			margin: 0;
		}
	}
}

@media screen and (max-width: 680px) {
	.columns .column {
		flex-basis: 100%;
		margin: 0 0 5px 0;
	}
}