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

html {background:#333;}

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

		body:after {
			content: "";
			display: block;
			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);}
		}

	.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;}

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

	.black a:link {
		color:#fefefe;
		text-decoration:none;
		}
			
		.black a:visited {
		color:#fefefe;
		}
			
		.black a:hover {
		color:#eee;
		}
			
		.black a:active {
		color:#eee;
		}

/* --- 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;
	text-transform: uppercase;
}

h1{
font-size:5em;
letter-spacing:-2px;
margin:0px 0px 15px 0px;
line-height:0.84;
max-width:80%;
}

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

h2 {
font-size: 3.5em;
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;
}

.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;
}

/*--- 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 {
	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 #888;
		-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:hover h3 {
		opacity:0.7;
		-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%);
  }

/*--- Container --- */

.content {
	margin:0 auto;
	width:90%;
	max-width:1920px;
	padding:30px;
	}

/* --- Paddings --- */
.space8 {height:8em; clear: both; outline:0px solid red;}
.space5 {height:5em; clear:both; outline:0px solid blue;}
.space3 {height:3em; clear:both; outline:0px solid yellow;}

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

	.black .caption { color:#eee;}

	.case .caption {max-width:50%;}

	.slide .caption {max-width:40%;}

	#work .caption {margin:0.5em 0;}

	/* --- CASE Page --- */
	.case-info-wrapper {padding:1em 0 2em 0; border-bottom:3px solid #111; margin-bottom:1em;}
	.info {width:60%; float:left;}
	.meta {width:34%; float:right;}
	.article p {text-align:left; font-weight:400; max-width:75%; font-size:2em; line-height:1.4;}
	.article h1 {margin:1em 0em 0.5em 0em;}
	.article img {margin:1.5em 0;}

/* --- HERO Intro --- */

.hero .intro {
	font-size:170%; 
	margin-top:30vh; 
	position:relative; 
	right:22px;
}

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


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

	/* --- Carousellin korjaus mobiiliin --- */
	.slideri {overflow:visible; margin-right:;}

.home .slide {max-width:600px;}

/* --- ABOUT --- */

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

/* --- ABOUT End --- */

/* --- GRID --- */

	.grid {display:flex; flex-wrap:wrap; justify-content: space-between;}

		.grid .card {width:28%; position:relative;}
			.grid .card .inner {margin-bottom:4em;}
			.grid .image-wrapper {height:30vw; position:relative; margin-bottom:2em; outline:0px solid red;}
			.image-wrapper img {position:absolute; bottom:0;}

			.grid .card .inner h2 {line-height:0.9;}
			.grid .card .inner h5 {margin-top:5px;}

			.grid .card .inner:hover {
				opacity:0.6;
				-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;
			}


	.portfolio .case:nth-child(4n+5) {
		clear:both;
	}

	.case {
	width:33.3%; float:left; text-align:left;
	}

		.case .inner img {border:2px solid #111;}

		.case .inner, .big_case .inner {
		padding:0px 40px 0px 0px;
		margin:0 0 35px 0;
		}

			.portfolio .case .inner, .portfolio .big_case .inner {margin-bottom:60px;}

		.case a {
		border-bottom:0px;
		opacity:1;
		text-decoration: none;
		-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;
		}

		.case a:hover {
		opacity:0.7;
		-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;
		}

			.case a:hover img {border:2px solid #333;}

		.article a {text-decoration: underline !important;}

	.big_case {
	width:66.7%; float:left;
	}

			/* --- PORTFOLIO GRID --- */
			.portfolio .case {
			width:25%; float:left; text-align:left;
			}

	.row {margin:0 -1em;}

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

			/* --- Inner --- */
			.col30 .inner, .col50 .inner, .col70 .inner {padding:0 1em 0 1em;}
			.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 --- */


	/* --- FOOTER --- */

	#footer {
	background:#010101;
	color:#fefefe;
	padding:50px 0 0px 0;
	font-weight:400;
	position:relative; 
	z-index:998;
	}

	#footer .content {position:relative; bottom:12px;}

		#footer a:link {
		color:#fefefe;
		text-decoration:none;
		}

		#footer a:visited {
		color:#fefefe;
		}

		#footer a:hover {
		color:#ccc;
		}

		#footer a:active {
		color:#ccc;
		}

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

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

		#footer .smallprint {font-size:70%; line-height:1.4;}

	/* --- 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) {

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

	.slide {max-width:300px; margin-right:40px;}

	li::before {
		content: '•';
		position: absolute;
		left:-0.7em;
		top:-0.1em;
		font-size: 1em; 
	}
	
	/* --- CASE --- */
	.article p {font-size:1em;}
	.info {width:100%; float:none; clear:both;}
	.meta {width:100%; float:none; clear:both; font-size:80%;}

	/* --- CASE Ends --- */

	.case:nth-child(2n+3) {
		clear:both;
	}

	.case {
	width:50%; float:left;
	}

		.portfolio .case {width:50%; float:left;}

	.case h4 {margin-top:-4px;}

	.big_case {
	width:100%; float:none;
	}

		.big_case .inner {
		padding:20px 50px 0 50px;
		}

		.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;}

	h1{
	font-size:2em;
	margin-bottom:5px;
	}

	h2{
		font-size:1.7em;
	}

	h3 {
		font-size:1.5em;
		margin-bottom:5px;
	}

	#work .caption {margin-top:5px;}

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

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

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

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

	.case_hero {
		margin-top:11.5em;
	}

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

}

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

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

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

	/* --- GRID --- */
	.grid .card {width:calc(50% - 3px); position:relative;}
			.grid .card .inner {padding:20px 20px 20px 20px;}
			.grid .image-wrapper {display:block; height:40vw; position:relative; margin-bottom:1em;}
			.image-wrapper img {max-height:50vw; position:absolute; bottom:0;}

			.grid .card .inner h2 {font-size:1.5em; margin-top:-10px;}
			.grid .card .inner h5 {font-size:0.7em; margin-top:-1px;}

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

			/* --- Carousellin korjaus mobiiliin --- */
			.slideri {overflow:hidden; margin-right:0;}

	/* --- BASICS --- */

	h1 {
	font-size:2em;
	}

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

	h2 {
	font-size: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;
	}

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

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

	.article img {margin:0.5em 0;}
	.article p {font-size:1em; max-width:100%;}

		.case {
		width:100%; float:none; margin-bottom:-10px;
		}

			.case .inner {
			padding:0px 0px 0px 0px;
			}

			.big_case .inner {
			padding:0px 0px 0px 0px;
			}

			.portfolio .case .inner {padding:0px 5px 0px 10px;}

			.portfolio .case h3 {font-size:80%;}

	.case-info-wrapper {padding:1em 0 1em 0; border-bottom:2px solid #111; margin-bottom:1em;}

	/* --- FOOTER --- */

	#footer {padding:20px 0 30px 0;}

		#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;}

}

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


}