@charset "UTF-8";
/* CSS Document POP 3000 Grid */

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
} 

body {line-height:1.5;}
a img {border:none;}

/* typography.css */
body {font-size: 90%; font-family: Helvetica, Arial, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: 'Alfa Slab One', Helvetica, Arial, sans-serif; color:#fff; font-weight: normal; }
h1 {font-size:3em; margin-bottom:0.75em; padding-left: 33px; }
h2 {font-size:2em;margin-bottom:0.75em; padding-left: 33px;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em; line-height:1.2em; margin-bottom:1.5em;}
h6 {font-size:1em; line-height:2;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {color:#fff;}

a {color: #fff;} 

/* alfa-slab-one-regular - latin */
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/alfa-slab-one-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/alfa-slab-one-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/alfa-slab-one-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/alfa-slab-one-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/alfa-slab-one-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/alfa-slab-one-v17-latin-regular.svg#AlfaSlabOne') format('svg'); /* Legacy iOS */
}




body {background-color: #000;}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.grid-pad {
  /* padding: 20px 0 20px 20px; */
  padding: 20px;
}

.grid-pad > [class*='col-']:last-of-type {
  padding-right: 20px;
}



[class*='col-'] {
	float: left;
	padding-right: 20px;
    padding-left: 20px;
}

[class*='col-']:last-of-type {
  padding-right: 0;
}

@media screen {
header, div#bio, div#family {background-attachment: fixed;}
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
header, div#bio, div#family {background-attachment: inherit;}
}


header {
	width: 100%; height: 66vh; min-height: 500px;
	background-image: url(images/header_back.jpg); 
	background-position: top right; background-size: cover; background-repeat: no-repeat;
}

header p {font-family: 'Alfa Slab One', Helvetica, Arial, sans-serif; color: #fff; font-size: 2em; max-width: 45%; padding-left: 30px;}

section {padding-bottom: 33px;}

nav {margin: 20px auto;}
nav ul {list-style: none; }
nav ul li {display: inline; margin-right: 10px;}
nav ul li a {text-decoration: none; font-size: 1.33em;}
nav ul li a:link, nav ul li a:visited {color: #fff;}
nav ul li a:hover {color: #FCE523}

footer {padding-bottom: 100px;}




div#bio, div#family {width: 100%; height: 50vh; min-height: 500px;
	 background-position: top right; background-size: cover; background-repeat: no-repeat; }

div#bio p, div#family p {max-width: 50%; padding-left: 33px; font-size:1.1em;}

div#bio {background-image: url(images/bio_back.jpg);}
div#family {background-image:url(images/family_back.jpg);} 

div#banneri {text-align: center;}
div#banneri img {max-width: 100%;}

ul#live, ul#pastlive {color: #fff; padding-left: 33px; list-style: none;}
ul#live li {padding-bottom: 8px;}
ul#pastlive li {padding-left: 33px; padding-bottom: 3px;}
ul#pastlive li h1 {padding-left: 0; color: #FCE523}

ul#live a {color: #FC0;}


/* TÄSTÄ VANHAT*/



.col-1-1 {
	width: 100%; 
}

.col-2-3 {
  width: 66.66%;
  background:#C00;
}
.col-1-3 {
  width: 33.33%;
}

.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}

.col-1-6 {
  width: 16.66%;
  min-height: 350px;
}

.col-1-6 img { max-width: 99%; max-height:99%;}
.col-1-6 p {font-weight: bold; text-align:center;}



/* fix for mozilla's center-position-changes-when-scrollbar-appears behaviour */
html {
	overflow:-moz-scrollbars-vertical;
}