.flexgrid-width-limit
{
	/*max-width: 1170px;*/
	max-width: 1120px;
	min-width:320px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	padding: 0 1em;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.flexgrid-row
{
	margin-left:-1em;
	margin-right:-1em;
	position:relative;
	overflow:hidden;
}

.flexgrid-row:after
{
	content:"";
	display:block;
	clear:both;
}

.flexgrid-row > *
{
	padding:1em;
	position:relative;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.flexgrid-row.small-gaps
{
	margin-left:-0.5em;
	margin-right:-0.5em;
}

.flexgrid-row.small-gaps > *
{
	padding:0.5em;
}

.flexgrid-row.no-gaps
{
	margin-left:0;
	margin-right:0;
}

.flexgrid-row.no-gaps > *
{
	padding:0;
}

/*javascriptille tieto näkymän koosta media queryn avulla*/
#flex_screenmode
{
	width:0px;
}

.col-0-80, .col-0-75, .col-0-66, .col-0-50, .col-0-33, .col-0-25, .col-0-20
{
	float:left;
}

.col-0-80
{
	width:80%;
}

.col-0-75
{
	width:75%;
}

.col-0-66
{
	width:66.66666%;
}

.col-0-50
{
	width:50%;
}

.col-0-33
{
	width:33.33333%;
}

.col-0-25
{
	width:25%;
}

.col-0-20
{
	width:20%;
}

.push-0-80
{
	left:80%;
}

.push-0-75
{
	left:75%;
}

.push-0-66
{
	left:66.66666%;
}

.push-0-50
{
	left:50%;
}

.push-0-33
{
	left:33%;
}

.push-0-25
{
	left:25%;
}

.push-0-20
{
	left:20%;
}

.pull-0-80
{
	left:-80%;
}

.pull-0-75
{
	left:-75%;
}

.pull-0-66
{
	left:-66.66666%;
}

.pull-0-50
{
	left:-50%;
}

.pull-0-33
{
	left:-33%;
}

.pull-0-25
{
	left:-25%;
}

.pull-0-20
{
	left:-20%;
}

.offset-0-80
{
	margin-left:80%;
}

.offset-0-75
{
	margin-left:75%;
}

.offset-0-66
{
	margin-left:66.66666%;
}

.offset-0-50
{
	margin-left:50%;
}

.offset-0-33
{
	margin-left:33.33333%;
}

.offset-0-25
{
	margin-left:25%;
}

.offset-0-20
{
	margin-left:20%;
}

.hide-0
{
	display:none;
}

.show-0
{
	display:block;
}

@media screen and (min-width: 30em), handheld and (min-width: 30em), tv and (min-width: 30em)
{
	#flex_screenmode
	{
		width:1px;
	}

	.col-1-80, .col-1-75, .col-1-66, .col-1-50, .col-1-33, .col-1-25, .col-1-20
	{
		float:left;
	}
	
	.col-1-80
	{
		width:80%;
	}
	
	.col-1-75
	{
		width:75%;
	}
	
	.col-1-66
	{
		width:66.66666%;
	}
	
	.col-1-50
	{
		width:50%;
	}
	
	.col-1-33
	{
		width:33.33333%;
	}
	
	.col-1-25
	{
		width:25%;
	}
	
	.col-1-20
	{
		width:20%;
	}
	
	.push-1-80
	{
		left:80%;
	}

	.push-1-75
	{
		left:75%;
	}

	.push-1-66
	{
		left:66.66666%;
	}

	.push-1-50
	{
		left:50%;
	}

	.push-1-33
	{
		left:33%;
	}

	.push-1-25
	{
		left:25%;
	}

	.push-1-20
	{
		left:20%;
	}

	.pull-1-80
	{
		left:-80%;
	}

	.pull-1-75
	{
		left:-75%;
	}

	.pull-1-66
	{
		left:-66.66666%;
	}

	.pull-1-50
	{
		left:-50%;
	}

	.pull-1-33
	{
		left:-33%;
	}

	.pull-1-25
	{
		left:-25%;
	}

	.pull-1-20
	{
		left:-20%;
	}
	
	.offset-1-80
	{
		margin-left:80%;
	}

	.offset-1-75
	{
		margin-left:75%;
	}

	.offset-1-66
	{
		margin-left:66.66666%;
	}

	.offset-1-50
	{
		margin-left:50%;
	}

	.offset-1-33
	{
		margin-left:33.33333%;
	}

	.offset-1-25
	{
		margin-left:25%;
	}

	.offset-1-20
	{
		margin-left:20%;
	}
	
	.hide-1
	{
		display:none;
	}

	.show-1
	{
		display:block;
	}
}

@media screen and (min-width: 45em), handheld and (min-width: 45em), tv and (min-width: 45em)
{
	#flex_screenmode
	{
		width:2px;
	}

	.col-2-80, .col-2-75, .col-2-66, .col-2-50, .col-2-33, .col-2-25, .col-2-20
	{
		float:left;
	}
	
	.col-2-80
	{
		width:80%;
	}
	
	.col-2-75
	{
		width:75%;
	}
	
	.col-2-66
	{
		width:66.66666%;
	}
	
	.col-2-50
	{
		width:50%;
	}
	
	.col-2-33
	{
		width:33.33333%;
	}
	
	.col-2-25
	{
		width:25%;
	}
	
	.col-2-20
	{
		width:20%;
	}
	
	.push-2-80
	{
		left:80%;
	}

	.push-2-75
	{
		left:75%;
	}

	.push-2-66
	{
		left:66.66666%;
	}

	.push-2-50
	{
		left:50%;
	}

	.push-2-33
	{
		left:33%;
	}

	.push-2-25
	{
		left:25%;
	}

	.push-2-20
	{
		left:20%;
	}

	.pull-2-80
	{
		left:-80%;
	}

	.pull-2-75
	{
		left:-75%;
	}

	.pull-2-66
	{
		left:-66.66666%;
	}

	.pull-2-50
	{
		left:-50%;
	}

	.pull-2-33
	{
		left:-33%;
	}

	.pull-2-25
	{
		left:-25%;
	}

	.pull-2-20
	{
		left:-20%;
	}

	.offset-2-80
	{
		margin-left:80%;
	}

	.offset-2-75
	{
		margin-left:75%;
	}

	.offset-2-66
	{
		margin-left:66.66666%;
	}

	.offset-2-50
	{
		margin-left:50%;
	}

	.offset-2-33
	{
		margin-left:33.33333%;
	}

	.offset-2-25
	{
		margin-left:25%;
	}

	.offset-2-20
	{
		margin-left:20%;
	}

	.hide-2
	{
		display:none;
	}

	.show-2
	{
		display:block;
	}	
}

@media screen and (min-width: 50em), handheld and (min-width: 50em), tv and (min-width: 50em)
{
	#flex_screenmode
	{
		width:3px;
	}

	.col-3-80, .col-3-75, .col-3-66, .col-3-50, .col-3-33, .col-3-25, .col-3-20
	{
		float:left;
	}
	
	.col-3-80
	{
		width:80%;
	}
	
	.col-3-75
	{
		width:75%;
	}
	
	.col-3-66
	{
		width:66.66666%;
	}
	
	.col-3-50
	{
		width:50%;
	}
	
	.col-3-33
	{
		width:33.33333%;
	}
	
	.col-3-25
	{
		width:25%;
	}
	
	.col-3-20
	{
		width:20%;
	}

	.push-3-80
	{
		left:80%;
	}

	.push-3-75
	{
		left:75%;
	}

	.push-3-66
	{
		left:66.66666%;
	}

	.push-3-50
	{
		left:50%;
	}

	.push-3-33
	{
		left:33%;
	}

	.push-3-25
	{
		left:25%;
	}

	.push-3-20
	{
		left:20%;
	}

	.pull-3-80
	{
		left:-80%;
	}

	.pull-3-75
	{
		left:-75%;
	}

	.pull-3-66
	{
		left:-66.66666%;
	}

	.pull-3-50
	{
		left:-50%;
	}

	.pull-3-33
	{
		left:-33%;
	}

	.pull-3-25
	{
		left:-25%;
	}

	.pull-3-20
	{
		left:-20%;
	}

	.offset-3-80
	{
		margin-left:80%;
	}

	.offset-3-75
	{
		margin-left:75%;
	}

	.offset-3-66
	{
		margin-left:66.66666%;
	}

	.offset-3-50
	{
		margin-left:50%;
	}

	.offset-3-33
	{
		margin-left:33.33333%;
	}

	.offset-3-25
	{
		margin-left:25%;
	}

	.offset-3-20
	{
		margin-left:20%;
	}
	
	.hide-3
	{
		display:none;
	}

	.show-3
	{
		display:block;
	}
}

@media screen and (min-width: 65em), handheld and (min-width: 65em), tv and (min-width: 65em)
{
	#flex_screenmode
	{
		width:4px;
	}

	.col-4-80, .col-4-75, .col-4-66, .col-4-50, .col-4-33, .col-4-25, .col-4-20
	{
		float:left;
	}
	
	.col-4-80
	{
		width:80%;
	}
	
	.col-4-75
	{
		width:75%;
	}
	
	.col-4-66
	{
		width:66.66666%;
	}
	
	.col-4-50
	{
		width:50%;
	}
	
	.col-4-33
	{
		width:33.33333%;
	}
	
	.col-4-25
	{
		width:25%;
	}
	
	.col-4-20
	{
		width:20%;
	}

	.push-4-80
	{
		left:80%;
	}

	.push-4-75
	{
		left:75%;
	}

	.push-4-66
	{
		left:66.66666%;
	}

	.push-4-50
	{
		left:50%;
	}

	.push-4-33
	{
		left:33%;
	}

	.push-4-25
	{
		left:25%;
	}

	.push-4-20
	{
		left:20%;
	}

	.pull-4-80
	{
		left:-80%;
	}

	.pull-4-75
	{
		left:-75%;
	}

	.pull-4-66
	{
		left:-66.66666%;
	}

	.pull-4-50
	{
		left:-50%;
	}

	.pull-4-33
	{
		left:-33%;
	}

	.pull-4-25
	{
		left:-25%;
	}

	.pull-4-20
	{
		left:-20%;
	}	

	.offset-4-80
	{
		margin-left:80%;
	}

	.offset-4-75
	{
		margin-left:75%;
	}

	.offset-4-66
	{
		margin-left:66.66666%;
	}

	.offset-4-50
	{
		margin-left:50%;
	}

	.offset-4-33
	{
		margin-left:33.33333%;
	}

	.offset-4-25
	{
		margin-left:25%;
	}

	.offset-4-20
	{
		margin-left:20%;
	}
	
	.hide-4
	{
		display:none;
	}

	.show-4
	{
		display:block;
	}
}

@media screen and (min-width: 80em), handheld and (min-width: 80em), tv and (min-width: 80em)
{
	#flex_screenmode
	{
		width:5px;
	}

	.col-5-80, .col-5-75, .col-5-66, .col-5-50, .col-5-33, .col-5-25, .col-5-20
	{
		float:left;
	}
	
	.col-5-80
	{
		width:80%;
	}
	
	.col-5-75
	{
		width:75%;
	}
	
	.col-5-66
	{
		width:66.66666%;
	}
	
	.col-5-50
	{
		width:50%;
	}
	
	.col-5-33
	{
		width:33.33333%;
	}
	
	.col-5-25
	{
		width:25%;
	}
	
	.col-5-20
	{
		width:20%;
	}
	
	.push-5-80
	{
		left:80%;
	}

	.push-5-75
	{
		left:75%;
	}

	.push-5-66
	{
		left:66.66666%;
	}

	.push-5-50
	{
		left:50%;
	}

	.push-5-33
	{
		left:33%;
	}

	.push-5-25
	{
		left:25%;
	}

	.push-5-20
	{
		left:20%;
	}

	.pull-5-80
	{
		left:-80%;
	}

	.pull-5-75
	{
		left:-75%;
	}

	.pull-5-66
	{
		left:-66.66666%;
	}

	.pull-5-50
	{
		left:-50%;
	}

	.pull-5-33
	{
		left:-33%;
	}

	.pull-5-25
	{
		left:-25%;
	}

	.pull-5-20
	{
		left:-20%;
	}
	.offset-5-80
	{
		margin-left:80%;
	}

	.offset-5-75
	{
		margin-left:75%;
	}

	.offset-5-66
	{
		margin-left:66.66666%;
	}

	.offset-5-50
	{
		margin-left:50%;
	}

	.offset-5-33
	{
		margin-left:33.33333%;
	}

	.offset-5-25
	{
		margin-left:25%;
	}

	.offset-5-20
	{
		margin-left:20%;
	}
	
	.hide-5
	{
		display:none;
	}

	.show-5
	{
		display:block;
	}
}