html,
body {
min-height: 100%;
font-family: 'Archivo'; font-weight:400; letter-spacing:;
}

html {
	background:#fefefe;
}

	body {
	font-size:100%;
	margin: 0;
	padding: 0;
	line-height:1.7;
	overflow-x:hidden;
	min-height:100%;
	}

		body:after {
			content: "";
			display: none;
			background:url(samuli_underconstruction.png);
			width:280px;
			height:280px;
			background-repeat:no-repeat;
			background-position:bottom right;
			background-size:contain;
			z-index:998;
			animation-name: example;
			animation-duration: 30s;
			animation-iteration-count: infinite;
			mix-blend-mode: difference;
			animation-timing-function: linear;
		}

		@keyframes example {
		  0%   {-webkit-transform: rotate(0deg);}
		  100% {-webkit-transform: rotate(360deg);}
		}

		@keyframes screensaver {
			0%   {opacity:0;}
			100% {opacity:1;}
		  }

		.screensaver-layout {
			background:url(samuli_screensaver_bg.jpg);
			background-size: cover;
			z-index: 1000;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			cursor:none;
		  }
		  
		  .hidden {
			display: none;
		  }

	.white {
	background:#fefefe;
	color:#111;
	}

	.white a:link {
		color:#111;
		text-decoration:none;
		}
			
		.white a:visited {
		color:#111;
		}
			
		.white a:hover {
		color:#000;
		}
			
		.white a:active {
		color:#000;
		}

			.white .content a:link {color: #111;}
			.white .content a:visited {color: #111;}
			.white .content a:hover {color: #000;}
			.white .content a:active {color: #111;}

			a:link span {text-decoration:underline; padding:1.5em; margin:1.5em -1.5em -1.5em -1.5em;}

	.black {
	background:#060606;
	color:#fefefe;
	}

	.black a:link {
		color:#fefefe;
		text-decoration:none;
		}
			
		.black a:visited {
		color:#fefefe;
		}
			
		.black a:hover {
		color:#eee;
		opacity:0.5;
		-webkit-transition: all 0.1s linear 0s;
		-moz-transition: all 0.1s linear 0s;
		-o-transition: all 0.1s linear 0s;
		transition: all 0.1s linear 0s;
		}
			
		.black a:active {
		color:#eee;
		opacity:0.5;
		}

/* --- BASICS --- */
* {
}

body, .page, .article {cursor: url(cursor.png) 20 10, auto;}
a {cursor: url(cursor_pointer.png) 50 15, auto !important;}

h1, h2, h3, h4, h5, h6 {
	font-weight:400;
}

h4, h5, h5 {
	text-transform: uppercase;
}

h1{
font-size:1em;
margin:0.3em 0 6em 0;
line-height:0.94;
max-width:80%;
text-transform: uppercase;
}

	.headnote p {
		display: inline-block;
		margin-right:1em;
	}
	.headnote h1 {
		font-size:95%;
		display: inline-block;
		margin:0;
		max-width:auto;
	}

	.headnote img {
		border-radius:0px;
		height:1.1em;
	}

	.headnote .nega {
		height:1.65em;
		position:relative;
		top:0.1em;
		z-index:999;
	}

	.intro h1 {text-transform: none; font-size:11em; line-height:0.8; letter-spacing:-0.05em; max-width:100%;}

h2 {
font-size: 2em;
display:inline-block;
margin-top:0px;
margin-bottom:0px;
line-height: 1.1;
}

h3 {
font-size:2.5em;
margin:0px 0px 10px 0px;
text-transform:;
line-height:1;
}

h4 {
font-size:2em;
line-height:1;
margin:0 0 0.1em 0;
}

h5 {font-size:0.9em; letter-spacing:1px; font-weight:700; margin-bottom:0px;}

p {
font-size:1.2em;
margin-top:0px;
}

    .extra-large {
		font-size:4em;
		line-height:1.05;
	}

	.large {
		font-size:2em;
		line-height:1.2;
	}

	.specs {
		font-size:90%;
	}

		.specs p {
			margin-bottom:0;
		}

	.section-header {
		font-size:90%;
	}

.caption {font-size:95% !important; margin:0.5em 0em 2em 0em; line-height:1.2; max-width:20%; color:#222;}

	.image-credit-wrapper {
	overflow: hidden;
	position: relative;
	}
	
	.image-credit-wrapper .image-credit {
	position: absolute;
	left: 0px;
	bottom: 0.69em;
	}
	
	.image-credit {
	background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.25));
	color: rgba(255,255,255,0.9);
	display: inline-block;
	font-size: 75%;
	font-family: helvetica;
	font-weight: 500;
	line-height:1.2;
	padding: 0 0 0.8em 1.2em;
	position: absolute;
	bottom: 0;
	right: 0;
	border-radius:0 0 10px 10px;
	}

	.number {
		display:inline-block; background:rgba(0,0,0,0.2); color: #111; border-radius: 3em; padding:0 0.5em 0 0.5em; margin-right:1em; margin-bottom:3em; float:left; font-size:80%; position:relative; top:0.2em;
	  }

	  .black .number {background:rgba(255,255,255,0.2); color: #FFF;}

	.black .caption { color:#eee;}

.breadcrumb {margin-bottom:0.5em; max-width:90%;}

	.breadcrumb span {padding-left:0.5em; padding-right:0.5em; text-transform: uppercase; display: inline-block;}

	
	.headnote a {
		position:relative;
		z-index:999;
		color:#111;
		font-size:1.5em;
		text-decoration:none;
		}
			
		.headnote a:visited {
		color:#111;
		}
			
		.headnote a:hover {
		color:#000;
		opacity:0.5;
		-webkit-transition: all 0.1s linear 0s;
		-moz-transition: all 0.1s linear 0s;
		-o-transition: all 0.1s linear 0s;
		transition: all 0.1s linear 0s;
		}
			
		.headnote a:active {
		color:#000;
		}

.headnote {
	padding:5vh 0 20vh 0;
}

	.headnote h1 {
		margin-left:-0.9em;
	}

.page-title {
	font-size:4em;
}
	.page-title h1 {letter-spacing:-0.07em !important; line-height:0.77; position:relative; right:20px;}

li {
    list-style-type: none;
    position: relative;
}

li::before {
    content: '•';
    position: absolute;
	left:-0.7em;
	top:-0.1em;
    font-size: 2em; 
}

::-moz-selection { /* Code for Firefox */
	color: #010101;
	background: yellow;
}
	
	::selection {
	color: #010101;
	background: yellow;
}

img {
	max-width: 100%;
	width: auto; /* for ie 8 */
	height: auto;
	margin-bottom:0px;
	border-radius:10px;
}

/*--- Navi ---*/
.index {
	text-align:center;
	display:inline-block;
	background:#FEFEFE; 
	border-radius:200px; 
	box-shadow: -0.5em 1em rgba(0,0,0,0.1); 
	border:6px solid black; 
	padding:1.5em 3em 2.5em 3em; 
	z-index:999;
	-webkit-transition: all 0.1s linear 0s;
	-moz-transition: all 0.1s linear 0s;
	-o-transition: all 0.1s linear 0s;
	transition: all 0.1s linear 0s;
}

	.index h5 {
		margin-bottom:0.8em;
	}


	.index:hover {
		background: yellow;
		border:6px solid #333;
		-webkit-transition: all 0.1s linear 0s;
		-moz-transition: all 0.1s linear 0s;
		-o-transition: all 0.1s linear 0s;
		transition: all 0.1s linear 0s;
	}

	.index:hover h3 {
		opacity:0.9;
		-webkit-transition: all 0.2s linear 0s;
		-moz-transition: all 0.2s linear 0s;
		-o-transition: all 0.2s linear 0s;
		transition: all 0.2s linear 0s;
	}

.back {
	color:black;
	display:inline-block;
	background:#FEFEFE; 
	border-radius:200px; 
	box-shadow: -0.5em 1em rgba(0,0,0,0.1); 
	border:4px solid black; 
	padding:2em 3em 2em 3em; 
	z-index:999;
	-webkit-transition: all 0.1s linear 0s;
	-moz-transition: all 0.1s linear 0s;
	-o-transition: all 0.1s linear 0s;
	transition: all 0.1s linear 0s;
}

	.back h3 {
		margin-bottom:0;
		-webkit-transition: all 0.2s linear 0s;
		-moz-transition: all 0.2s linear 0s;
		-o-transition: all 0.2s linear 0s;
		transition: all 0.2s linear 0s;
	}


	.back:hover {
		background: yellow;
		box-shadow: -0.5em 1em rgba(0,0,0,0.1); 
		border:4px solid #674400;
		-webkit-transition: all 0.1s linear 0s;
		-moz-transition: all 0.1s linear 0s;
		-o-transition: all 0.1s linear 0s;
		transition: all 0.1s linear 0s;
		margin-top:-0.3em;
		box-shadow: -0.5em 1.3em rgba(0,0,0,0.04), 0em 0.5em 3em rgba(255,215,0,0.2);
	}

	.back:hover h3 {
		color:#674400;
		-webkit-transition: all 0.2s linear 0s;
		-moz-transition: all 0.2s linear 0s;
		-o-transition: all 0.2s linear 0s;
		transition: all 0.2s linear 0s;
	}

.headroom {
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	transition: all .25s ease-in-out;
	backface-visibility: hidden;
	z-index: 999;
	*zoom: 1;
  }
  
  .headroom--pinned {
	transform: translateY(0%);
  }

  .headroom--unpinned {
	transform: translateY(-200%);
  }

  header a:hover, .kotiin a:hover {
	opacity:1 !important;
  }

/*--- Container --- */

.container {
	margin:0 auto;
	width:90%;
	max-width:1400px;
	}

.divider {
	border-top:1px solid rgba(0,0,0,0.3);
	margin-bottom:15px;
}

	.black .divider {
		border-top:1px solid rgba(255,255,255,0.3);
	}

/* --- Paddings --- */
.space8 {height:8em; clear: both;}
.space5 {height:5em; clear:both;}
.space3 {height:3em; clear:both;}


/* --- CAROUSEL --- */
.slide {max-width:800px; cursor: url(cursor_hand.png), grab !important; margin-right:1em;}
	.slide:active {cursor: url(cursor_grab.png)-50 -20, grab !important;}

.drag {cursor: url(cursor_hand.png)-50 -50, grab;}


	/* --- GRID --- */

	.row {margin:0 -0.5em; clear: both;}

	.col30{float:left; width:33%; min-height:1px;}
	.col50{float:left; width:50%; min-height:1px;}
	.col70{float:left; width:67%; min-height:1px;}

			/* --- Inner --- */
			.col30 .inner, .col50 .inner, .col70 .inner {padding:0 0.5em 0 0.5em;}
			.col30 .inner div, .col50 .inner div, .col70 .inner div {margin-top:1em;}

				.play .col30 .inner, .play .col50 .inner, .play .col70 .inner {padding:0 0.7em 0 0.7em;}
				.play .col30 .inner div, .play .col50 .inner div, .play .col70 .inner div {margin-top:0.1em;}

				.play .row {margin:0 -0.7em;}

				.play img {outline:2px solid #111; margin-bottom:0.9em;}


	/* --- GRID end --- */

	.breaker {
		display:none;
		clear:none;
	  }

	  .gallery-item {
		cursor: url(cursor_pointer.png) 50 15, auto !important;
		opacity:0.95;
	-webkit-transition: all 0.2s ease 0s;
	-moz-transition: all 0.2s ease 0s;
	-o-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
	  }

	  .gallery-item:hover {
		opacity:1;
      -webkit-transition: all 0.1s linear 0s;
      -moz-transition: all 0.1s linear 0s;
      -o-transition: all 0.1s linear 0s;
      transition: all 0.1s linear 0s;
	transform: scale(1.015);
	  }

	/* --- FOOTER --- */

	#footer {
	position:relative;
	z-index:999;
	padding:0;
	margin-top:10vh;
	}

		#footer img {
			 border-radius:0px;
		}

		.smallprint {font-size:70%; line-height:1.4; margin:1em 0 3em 0;}

	/* --- FOOTER End --- */


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1200px or less */
@media screen and (max-width: 1200px) {

	h1 {
	font-size:3em;
	}

	/* -- GRID -- */
	.grid .card .inner {padding:40px;}

	.grid .card .inner h2 {font-size:2em; margin-top:-10px;}
	.grid .card .inner h5 {font-size:0.8em; line-height:1; margin-top:-5px;}

	.slide {max-width:900px;}

	/* --- Paddings --- */
	.space8 {height:4em;}

	.case_hero {
		margin-top:-3.7em;
	}

}

/* for 768px or less */
@media screen and (max-width: 768px) {

	h1{
		font-size:2em;
		margin-bottom:5px;
		letter-spacing:0;
		}
	
		h2{
			font-size:1.7em;
		}
	
		h3 {
			font-size:1.5em;
			margin-bottom:5px;
		}

	.extra-large {font-size:1.5em;}

	.large {font-size:1em;}

	.caption {font-size:70% !important; margin:-0.4em 0em 1.2em 0em;}

	.container {
	padding:0 15px 0px 15px;
	}

	.slide {max-width:300px;}

	li::before {
		content: '•';
		position: absolute;
		left:-0.7em;
		top:-0.1em;
		font-size: 1em; 
	}

	.gallery-item {
		pointer-events: none;
	}

	/* GRID */

		.row {margin:0}

		.col30{float:none; width:100%; min-height:1px;}
		.col50{float:none; width:100%;}
		.col70{float:none; width:100%;}
	
				.col30 .inner, .col50 .inner, .col70 .inner {padding:0;}
				.col30 .inner div, .col50 .inner div, .col70 .inner div {margin-top:0;}

				.col30 .caption {width:30%;}
				.col50 .caption {width:30%;}
				.col70 .caption {width:50%;}

		.slide .caption {max-width:70%; margin-top:5px;}

	/* --- Paddings --- */
	.space8 {height:2em;}

	#footer h5 {margin-bottom:1em;}

			.screensaver-layout {
			background:url(samuli_screensaver_bg_mobile.jpg);
			background-size: cover;
			z-index: 1000;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			cursor:none;
		  }

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	/* --- BASICS --- */

	h1 {
	font-size:0.8em !important;
	}

	.page-title {font-size:2.7em; padding-top:0.5em;}
		.page-title h1 {letter-spacing:-6px !important; position:relative; right:5px;}

	h2 {
	font-size:1.2em;
	margin-bottom:0px;
	}

	h3 {
	font-size: 1.8em;
	}

	h4 {
	font-size:1.1em;
	line-height:1em;
	margin-bottom:3px;
	}

	h5 {font-size:0.6em;}

	p {
	font-size:0.8em;
	}

	.specs {
		font-size:70%;
		line-height:1.4;
	}

	.caption {font-size:80% !important; margin:-0.7em 0em 1.4em 0em; max-width:70%;}

			.col30 .caption {width:50%;}
			.col50 .caption {width:50%;}
			.col70 .caption {width:50%;}

	.headnote {
	padding:2vh 0 20vh 0;
	}

		.headnote img {
			height:0.9em;
		}

		.headnote .nega {
			height:1.35em;
			position:relative;
			top:0.4em;
			right:0.03em;
		}

	.section-header .col30, .section-header .col50 {
		width:50%;
		float:left;
	}

	.back {
		border:2px solid #111;
		box-shadow: -0.2em 0.5em rgba(0,0,0,0.1);
		padding:1em 2em 1em 2em;
	}

	.back:hover, .back:active {
		border:2px solid #111;
	}

	body:after {
		width:150px;
		height:150px;
		position:Fixed;
		bottom:20px;
		right:20px;
	}

	.slide {max-width:200px; margin-right:0.5em;}

			/* --- Carousellin korjaus mobiiliin --- */

	/* --- FOOTER --- */

	#footer {
		padding:1vh 0 0 0;
	margin-top:0.3em;
	}

		#footer img {margin-bottom:0.1em;}

		#footer h2 {font-size:1.2em;}

		#footer h3 {font-size:1.2em;}

		#footer .intro {font-size:100%;}

		#footer .smallprint {font-size:50%;}

	/* --- Carousel --- */
	.slide .caption {
		margin-top:5px;
		width:100%;
	}

	/* --- Paddings --- */
	.space8 {height:4em;}
	.space5 {height:2em;}
	.space3 {height:1em;}

	.breaker {
		display:block;
		clear:both;
	  }

	  .number {
		font-size:60%; position:relative; top:0.2em;
	  }

}