/**
 *  
 * ERMO NAARITS PORTFOLIO
 * Designed and Developed by Ermo Naarits
 * www.ermonaarits.com
 *
 */




/* RESET		   */
/* v1.0 | 20080212 */

body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

html {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* RESET END  */

/* @font-face {
	font-family: QuantLig;
	src: url("../fonts/QuantLigWeb.eot");
}

@font-face {
	font-family: QuantLig;
	src: url("../fonts/QuantLigWeb.woff") format("woff");
} */


* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'Open sans', sans-serif;
	font-size: 18px;
	color: #363636;
	-webkit-appearance: none;
}

h1, h2 {
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
}

a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
}

.presentation h2 a {
	text-decoration: underline;
}

a:hover {
	opacity: 0.7;	
}

.wrapper {
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	position: fixed;
	-webkit-overflow-scrolling: touch;
}

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

#about h1.title {
	font-size: 48px;
}

#about h2 {
	margin-top: 50px;
	margin-bottom: 20px;
}

.about {
	font-size: 20px;
	line-height: 25px;
	width: 100%;
	padding: 0 40px 40px 40px;
	max-width: 800px;
	margin: 0 auto;
}

.about p {
	margin-bottom: 5px;
}

.about p a {
	text-decoration: underline;
}

.about blockquote {
	font-style: italic;
	font-size: 24px;
	line-height: 36px;
}

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

header, .portfolio {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

header {
	width: 100%;
	margin: 50px auto;
	position: relative;
	text-align: center;
}

h2 {
	font-size: 36px;
}

h1.title {
	margin-left: 20px;
	font-size: 48px;
	margin-bottom: 30px;
}

h1.title span {
	display: inline-block;
	margin-bottom: 5px;
	font-size: 18px;
	width: 100%;
	font-weight: 300;
}

nav {
	text-transform: uppercase;
}

nav ul li {
	display: inline-block;
	margin: 0 10px;
}

nav ul li.active {
	text-decoration: underline;
}

nav ul li a{
	cursor: pointer;
}

.portfolio {
	width: 100%;
	padding: 0 20px;
}

#grid .mix {
	opacity: 0;
    display: none;
}

.portfolio ul li.item {
	position: relative;
	overflow: hidden;
	float: left;
	width: 33.33333%;
	height: auto;
	cursor: pointer;
}

.portfolio ul li.item h2 {
	width: 100%;
	padding: 30px;
	bottom: 0;
	position: absolute;
	line-height: 120%;
	color: #ffffff;
	text-transform: uppercase;
	font-size: 24px;
	opacity: 0;
		transform:translateY(-20px) scale(1.3);
	-ms-transform:translateY(-20px) scale(1.3); /* IE 9 */
-webkit-transform:translateY(-20px) scale(1.3); /* Safari and Chrome */
}

.portfolio ul li.item h2 span {
	font-size: 16px;
	font-weight: 300;
}

.portfolio ul li.item img {
	position: relative;
	width: 100%;
	height: auto;
		transform:scale(1.2);
	-ms-transform:scale(1.2); /* IE 9 */
-webkit-transform:scale(1.2); /* Safari and Chrome */
}

.portfolio ul li.item:hover {
	background: #000000;
}


.portfolio ul li.item:hover img {
	filter: blur(2px);
	-webkit-filter: blur(2px); 
	opacity: 0.4;
		transform:scale(1.1);
	-ms-transform:scale(1.1); /* IE 9 */
-webkit-transform:scale(1.1); /* Safari and Chrome */
}

.portfolio ul li.item:hover h2{
			transform:translateY(0px) scale(1);
	-ms-transform:translateY(0px) scale(1); /* IE 9 */
-webkit-transform:translateY(0px) scale(1); /* Safari and Chrome */
	opacity: 1;
}

.close {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: rgba(255,255,255,0.4) url(../images/close.svg) no-repeat center center;
	background-size: 20px 20px;
	display: block;
	position: fixed;
	padding: 10px;
	margin: 10px;
	z-index: 99999;
	top: -45px;
}


.close:hover {
			animation:Xhover 0.3s;
	-webkit-animation:Xhover 0.3s; /* Safari and Chrome */
}

@keyframes Xhover
{

	50%  {
			transform:scale(0.8);
		-ms-transform:scale(0.8); 
	-webkit-transform:scale(0.8);
	}
}

@-webkit-keyframes Xhover /* Safari and Chrome */
{

	50%  {
			transform:scale(0.8);
		-ms-transform:scale(0.8); 
	-webkit-transform:scale(0.8);
	}

}

.close:active {
			transform:scale(0.8);
		-ms-transform:scale(0.8); 
	-webkit-transform:scale(0.8);	
}

.presentation {
	padding-top: 50px;
	position: fixed;
	top: 0;
	left: 0;
	overflow: auto;
	width: 100%;
	height: 100%;
	background: #ffffff;
		transform:translateY(100%);
	-ms-transform:translateY(100%); 
-webkit-transform:translateY(100%); 
	z-index: 20;
	-webkit-overflow-scrolling: touch;

}

.presentation section {
	margin: 30px auto 0;
	max-width: 1300px;
	text-align: center;
	position: relative;
	padding-bottom: 30px;
}

.presentation h1 {
	line-height: 1.2em;
	font-size: 48px;
	margin: 30px;
	margin-top: 10px;
	letter-spacing: 0px;
	text-transform: uppercase;
}

.presentation h2 {
	font-family: 'open sans', sans-serif;
	font-size: 18px;
	max-width: 800px;
	line-height: 1.5em;
	margin: 30px auto;
	font-weight: 300;
	padding: 0 15px;
}

.presentation h3 {
	text-transform: capitalize;
	font-weight: 300;
	line-height: 1.4;
}

.presentation h3.motive {
	margin-top: 40px;
	font-size: 13px;
	text-transform: uppercase;
}

.presentation h3.motive a:hover {
	opacity: 1;
}

.presentation p {
	margin: 0 10px;
	font-size: 18px;
	line-height: 1.3em;
	margin-bottom: 15px;
}

.presentation img{
	max-width: 100%;
	height: auto;
}

.presentation ul {
	font-size: 16px;
	font-weight: 300;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.presentation ul li {
	display: inline-block;
	margin-left: 7px;
}

.presentation ul li:after {
	content: "•";
	margin-left: 10px;
}

.presentation ul li:last-child:after {
	content: "";
}

.project-link {
	font-weight: 300;
	text-transform: uppercase;
}

.presentation.locunit {
	background: #d74022;
}

.presentation.super {
	background: #262626;
}

.presentation.super h3, .presentation.super h1, .presentation.super h2 ,.presentation.super ul li, .presentation.super ul li:after, .presentation.locunit h3, .presentation.locunit h1, .presentation.locunit h2 ,.presentation.locunit ul li, .presentation.locunit ul li:after {
	color: white;
}

.presentation.tt-interior {
	background: #f6f6f6;
}

.presentation.helves {
	background: #c4c4be;
}

.presentation.pms {
	background: #b0de24;
}

.presentation.flipper {
	background: #5bc5f6;
}

.presentation.flipper h3, .presentation.flipper h1, .presentation.flipper h2, .presentation.flipper ul li, .presentation.flipper ul li:after, .presentation.flipper a.project-link {
	color: white !important;
}


.presentation.lest {
	background: #39027a;
}

.presentation.lest h3, .presentation.lest h1, .presentation.lest h2, .presentation.lest ul li, .presentation.lest ul li:after, .presentation.lest a.project-link {
	color: white !important;
}

.presentation.koguva {
	background: #b2aaa8;
}

.presentation.hellenic {
	background: #fbd1a6;
}

.presentation.appmiljonar {
	background: #f8f8f8;
}

.presentation.tallinnpost img.budget {
	width:60%;
}

.presentation.maiken {
	background: #e9f2f6;
}

.presentation.tallinnpost img.logo{
	max-width: 300px;
	margin-top: 40px;
}

.presentation.alpaka img.catalog {
	width:60%;
}

.presentation.pms img.logo {
	width:40%;
}

.presentation.super img.graph {
	width: 75%;
}

.presentation.tt-interior img.logo, .presentation.locunit img.logo {
	width: 40%;
}

.presentation.helves img.helves02 {
	width:80%;
}

.inactive {
	opacity: 0;
}

.focus {
		transform:translateY(0%) !important;
	-ms-transform:translateY(0%) !important; /* IE 9 */
-webkit-transform:translateY(0%) !important; /* Safari and Chrome */
	z-index: 9999;
}


.portfolio ul li.item, .portfolio ul li.item:hover, .portfolio ul li.item img, .portfolio ul li.item:hover img, a, a:hover, .portfolio ul li.item h2, .hidden-item, .close:active  {
	-webkit-transition: all 0.3s ease-out;
    		transition: all 0.3s ease-out;
}

.presentation, .close, .header, .portfolio, .wrapper {
-webkit-transition: all 900ms cubic-bezier(0.510, 0.235, 0.510, 1); /* older webkit */
-webkit-transition: all 900ms cubic-bezier(0.510, 0.235, 0.510, 1.300); 
   -moz-transition: all 900ms cubic-bezier(0.510, 0.235, 0.510, 1.300); 
     -o-transition: all 900ms cubic-bezier(0.510, 0.235, 0.510, 1.300); 
        transition: all 900ms cubic-bezier(0.510, 0.235, 0.510, 1.300); /* custom */
}

.portfolio ul li.item h2 {


}


@media screen and (min-width: 1200px)
	{
		.portfolio ul li.item {
			width: 25%;
		}
		
	}

@media screen and (min-width: 320px) and (max-width: 480px)
	{	
	
		header {
			margin: 20px 0;
			}
		
		nav ul li {
			display: list-item;
			margin: 10px 0;
			}
		
		.portfolio {
			padding: 0 10px;
			}
		
		.portfolio ul li.item {
				width: 50%;
			
			}
			
		.portfolio ul li.item h2 {
				font-size: 16px;
			}
			
		.presentation {
			padding-top: 0;
		}
		
		.presentation h1 {
			font-size: 36px;
		}
		
		.presentation ul  {
			display: none;
		}
		
		.presentation.tallinnpost img.budget, .presentation.tt-interior img.logo, .presentation.alpaka img.catalog, .presentation.pms img.logo, .presentation.locunit img.logo {
			width:100%;
		}
		
		.presentation.tallinnpost img.logo {
			width:60%;
		}
		
		/*------ ABOUT ------*/

					
			#about h2 {
				line-height: 1.2;
				font-size: 36px;
			}
			
			.about {
				font-size: 18px;
				line-height: 22px;
				padding: 0 20px 40px 20px;
			}
			
			.about blockquote {
				font-size: 20px;
				line-height: 30px;
			}
			
		/*-------------/ABOUT------------*/
		
	} 	
	
@media screen and (min-width: 480px) and (max-width: 768px)
	{
		
		nav ul li, nav ul li:hover, nav ul li:active {
			display: inline;
			margin: 0;
			margin-right: 15px;
			font-size: 13px;
		}
		
		nav ul li:last-child {
			margin-right: 0;
		}
		
		.portfolio ul li.item {
			width: 30.6666%;
			margin-left:2%;
			margin-bottom: 20px;
		}
		
		.portfolio ul li.item h2 {
			font-size: 16px;
		}	
		
		.presentation ul  {
			display: block;
		}	
		
		.presentation.alpaka img.catalog  {
			width:85%;
		}
		
		.presentation.tt-interior img.logo {
			width:65%;
		}
		
		.presentation.super img {
			width:80%;
		}

		
	}

@media screen 
and (min-width: 769px) 
and (max-width: 1024px)
	{

		.portfolio ul li.item {
			width: 23%;
			margin: 1%;
			margin-bottom: 10px;
		}
		
		.portfolio ul li.item h2 {
			background: white;
			color: black;
			margin: 0;
		}
	}
	
@media screen 
and (min-device-width: 320px)
and (max-device-width: 1280px) {
	
	nav ul li {
		font-size: 16px;
		margin-bottom: 20px;
	}
	
	h1.title {
		font-size: 24px;
	}
	
	.portfolio ul li.item h2 span {
		display: none;
	}
	
	.portfolio {
			padding: 0;
		}
	
	.portfolio ul li.item h2 {
		color: #fff;
		padding: 10px;
		background: rgba(0, 0, 0, 0.48);
		font-size: 14px;
		bottom: 0;
		margin: 0;
		line-height: 120%;
				transform:scale(1);
			-ms-transform:scale(1); /* IE 9 */
		-webkit-transform:scale(1); /* Safari and Chrome */
		opacity: 1;
		z-index: 99;
	}
	
	.portfolio ul li.item:hover {
		background: none;
	}
	
	.portfolio ul li.item img {
				transform:scale(1);
			-ms-transform:scale(1); /* IE 9 */
		-webkit-transform:scale(1); /* Safari and Chrome */
	}
	
	.portfolio ul li.item:hover img {
			filter: blur(0px);
			-webkit-filter: blur(0px); 
			opacity: 1;
				transform:scale(1);
			-ms-transform:scale(1); /* IE 9 */
		-webkit-transform:scale(1); /* Safari and Chrome */
		}
		
	.close:hover {
			animation:none;
	-webkit-animation:none; /* Safari and Chrome */
	}
	
	.presentation, .header, .portfolio, .close-wrap {
	-webkit-transition: all 0.5s ease-in-out;
    		transition: all 0.5s ease-in-out;	
	}
	
	.presentation h1 {
		font-size: 24px;
	}
	
	.presentation h2 {
		font-size: 16px;
	}
	

}

@media screen 
and (min-device-width: 768px)
and (max-device-width: 1280px) {
	
	.portfolio {
		padding: 0;
	}
	
	.portfolio ul li.item h2 {
		font-size: 18px;
		font-weight: 400;
	}
}