*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
html {
        /*background: url(http://subtlepatterns.com/patterns/struckaxiom.png) repeat;*/
}
body {
        font-family: 'Lato', Calibri, Arial, sans-serif;
        color: #ED9F26;
        background: rgba(255, 145, 0, 0.61);
        background: url('kuvat/tausta.png');
        /*background: url(http://subtlepatterns.com/patterns/pw_maze_black.png) repeat;
        background-size: 5%;*/
        /*Background from: subtlepatterns.com (use_your_illusion.png)*/
}
a {
	color: #ED9F26;
	text-decoration: none;
	outline: none;
}
a:hover {
	color: #ED9F26;
}
.subBody > header {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 2.875em 1em 1.875em;
        background: url(../kuvat/salama.svg) center no-repeat;
        background-size: contain;
}
.subBody > header h1 {
	line-height: 1.3;
	margin: 0 0 0.6em 0;
        text-align: center;
        font-size: 10em;
        font-weight: 100;
        text-transform: uppercase;
        margin-bottom: .4em;
        color: rgba(255, 255, 255, 0.37);
        color: #FFAE00;
        /*text-shadow: 0px 17px #FFAE00;*/
        font-style: italic;
}
.subBody > header h1 span {
        font-weight: 300;
        font-style: normal;
}
.subBody > header h1 span:after {
        position: absolute; 
        top: 16rem; /*REM jotta scr height ei vaikuta väliviivan positioon*/ 
        left: 43%;
        width: 14%;
        height: 2px;
        background: rgb(255, 174, 0);
        content: '';
}
/*vElementti*/
.vElementti {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 1em 0 2em;
	font-weight: 300;
}
/* Nav */
.vElementti nav {
	text-align: center;
}
.vElementti nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	display: inline-block;
}
.vElementti nav ul li {
	border: 1px solid #ED9F26;
	border-bottom: none;
	margin: 0 0.25em;
	display: block;
	float: left;
	position: relative;
}
.vElementti nav li.tab-current {
	border: 1px solid #ED9F26;
	box-shadow: inset 0 2px #ED9F26;
	border-bottom: none;
	z-index: 100;
}
.vElementti nav li.tab-current:before,
.vElementti nav li.tab-current:after {
	content: '';
	position: absolute;
	height: 1px;
	right: 100%;
	bottom: 0;
	width: 1000px;
	background: #ED9F26;
}
.vElementti nav li.tab-current:after {
	right: auto;
	left: 100%;
	width: 4000px;
}
.vElementti nav a {
	color: #ED9F26;
	display: block;
	font-size: 1.45em;
	line-height: 2.5;
	padding: 0 1.25em;
	white-space: nowrap;
}
.vElementti nav a:hover {
	color: #ED9F26;
}
.vElementti nav li.tab-current a {
	color: #ED9F26;
}
/* Ikonit */
.vElementti nav a:before {
	display: inline-block;
	vertical-align: middle;
	text-transform: none;
	font-weight: normal;
	font-variant: normal;
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
	margin: -0.25em 0.4em 0 0;
}
.ikoni-k:before {
	content: "\26A1";
}
.ikoni-p:before {
	content: "\2692"; 
        /*
        26ED - Gear w/o hub
        2699 - Gear
        */
}

.ikoni-t:before {
	content: "\20AC";
}

.ikoni-c:before {
	content: "\2709";
}/*\2709*/


/* Headers */
h1,h2,h3,h4,h5 {
        text-transform: uppercase;
        font-weight: 300;
        letter-spacing:.5px;
}
/* sisalto */
.sisalto section {
	font-size: 1.25em;
	padding: 3em 1em;
	display: none;
	max-width: 1230px;
	margin: 0 auto;
}
.sisalto section:before,
.sisalto section:after {
	content: '';
	display: table;
}
.sisalto section:after {
	clear: both;
}
/* Fallback example */
.no-js .sisalto section {
	display: block;
	padding-bottom: 2em;
	border-bottom: 1px solid #ED9F26;
}
.sisalto section.sisalto-current {
	display: block;
}
.sisalto section span .oLaatikko {/*Ensimmäisen sivun keskelle ryhmittäminen*/
        width: 50%;
        margin: 0px auto 0px auto;
        float:none; /*Override muut .oLaatikot float: left;*/
}
.oLaatikko {
	float: left;
	width: 40%;
	padding: 0 25px;
}
.oLaatikko img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}
.oLaatikko h3 {
	margin: 0.75em 0 0.5em;
}
.oLaatikko p {
	padding: 0 0 1em 0;
	margin: 0;
	line-height: 1.3;
}
.oLaatikko ul li {
	list-style: none;
}
p.ytunnus {
        position: absolute;
        position: relative;
        float: right;
        right: 1em;
        bottom: -1.5em;
}
/* MEDIA Q ~ 55em ja 32em */
@media screen and (max-width: 55em) {
        /*Header ja Logo*/
        .subBody > header h1 {
		float: none;
                font-size: 7em;
	}
	.subBody > header > span,
	.subBody > header h1 {
		text-align: center;
	}
	.subBody > header nav {
		margin: 0 auto;
	}
	.subBody > header > span {
		text-indent: 30px;
	}
        .subBody > header h1 span:after {
                top: 12rem;
        }
	.vElementti nav a span {
		display: none;
	}
	.vElementti nav a:before {
		margin-right: 0;
	}        
        .sisalto section span .oLaatikko {/*Ensimmäisen sivun keskelle ryhmittäminen*/
                width: auto;
		padding: 0 0 35px 0;
		font-size: 90%;
                float:none; /*Override muut .oLaatikot float: left;*/
        }
	.oLaatikko {
		float: none;
		width: auto;
		padding: 0 0 35px 0;
		font-size: 90%;
	}
	.oLaatikko img {
		float: left;
		margin: 0 25px 10px 0;
		max-width: 40%;
	}
	.oLaatikko h3 {
		margin-top: 0;
	}
	.oLaatikko p {
		margin-left: 40%;
	}
	.oLaatikko:before,
	.oLaatikko:after {
		content: '';
		display: table;
	}
	.oLaatikko:after {
		clear: both;
	}
}
@media screen and (max-width: 32em) {
        /*Header ja Logo*/
        .subBody > header h1 {
		float: none;
                font-size: 4em;
	}
        .subBody > header h1 span:after {
                top: 8rem;
        }
	.vElementti nav ul,
	.vElementti nav ul li a {
		width: 100%;
		padding: 0;
	}
	.vElementti nav ul li {
		width: 33%;
		margin: 0 0 0 -1px;
	}
	.vElementti nav ul li:last-child {
		border-right: none;
                width: 34%;
	}
        .sisalto section span .oLaatikko {/*Ensimmäisen sivun keskelle ryhmittäminen*/
                width: 100%;
                text-align: center;
                margin: 0px auto 0px auto;
                float:none; /*Override muut .oLaatikot float: left;*/
        }
	.oLaatikko {
		text-align: center;
	}
	.oLaatikko img {
		float: none;
		margin: 0 auto;
		max-width: 100%;
	}
	.oLaatikko h3 {
		margin: 1.25em 0 1em;
	}
	.oLaatikko p {
		margin: 0;
	}
}