/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, 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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
	line-height: 1;
	background:url(images/background-illustration.svg) top left repeat;
	background-size:350px 350px;
	font-size:62.5%;
	font-family: 'Quicksand', sans-serif;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

header{
	display:block;
	width:100%;
	background:#2a2a2a;
	height:120px;
}
.header-wrap{
	max-width:1600px;
	margin:0 auto;
}
.header-wrap.blurred{
	-webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}
.logo-wrap{
	display:block;
	transition:background 0.3s ease;
	cursor:pointer;
	float:left;
}
.logo-wrap:hover{
	background:#3a3a3a;
}
.logo-contain{
	width:120px;
	height:120px;
	padding:10px;
	display:block;
	float:left;
}
.logo-type{
	font-size:3em;
	line-height:120px;
	text-align:left;
	color:#ffffff;
	display:block;
	float:left;
	padding:0 20px 0 10px;
	font-weight:500;
	letter-spacing:1px;
}
nav{
	float:right;
	line-height:120px;
	display:block;}
nav li{
	display:block;
	float:right;
	color:#ffffff;
	font-size:1.8em;
}
nav a{
	color:#ffffff;
	text-decoration:none;
	height:100%;
	position:relative;
	width:100%;
	display:block;
	cursor:pointer;
	padding:0 20px;
	transition:background 0.3s ease;
}

nav a:hover{
	background:#3a3a3a;
}

.content-wrap{
	max-width:1600px;
	width:100%;
	margin:0 auto;
}
.content-wrap.blurred{
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}
.content-box{
	width:calc(100% / 3);
	padding:2em 1em 1em 1em;
	float:left;
}
.mobile-tabs{
	display:none;
}
.home-button{
	display:block;
	width:100%;
	color:#ffffff;
	font-size:2em;
	padding:1em;
	background:#2a2a2a;
	border-bottom:3px solid #5bcbf5;
	text-align:center;
	text-transform:uppercase;
	font-weight:500;
	letter-spacing:1px;
	margin-bottom:1em;
	position:relative;
}
.category-icon-product{
	background:url(images/icon-product.svg) center center no-repeat;
	display:block;
	width:40px;
	height:40px;
	position:absolute;
	top:10px;
	left:10px;
}
.category-icon-brand{
	background:url(images/icon-brand.svg) center center no-repeat;
	display:block;
	width:40px;
	height:40px;
	position:absolute;
	top:10px;
	left:10px;
}
.category-icon-illustration{
	background:url(images/icon-illustration.svg) center center no-repeat;
	display:block;
	width:40px;
	height:40px;
	position:absolute;
	top:7px;
	left:10px;
}
.home-image{
	display:block;
	margin-bottom:2em;
	position:relative;
	cursor:pointer;
}
.image-description{
	height:0;
	overflow:hidden;
	background-image:linear-gradient(to top, #2a2a2a, rgba(0,0,0,0));
	transition:height 0.3s ease;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
}
.image-description:before{
	content:'';
	position:absolute;
	display:block;
	left:0;
	bottom:0;
	height:3px;
	width:100%;
	background:#5bcbf5;
}
.image-description span{
	bottom:20px;
	display:block;
	width:100%;
	position:absolute;
	left:0;
	font-size:1.2em;
	text-align:center;
	color:white;
	opacity:0;
	transition:opacity 0.3s ease;
}
.home-image:hover .image-description{
	height:100%;
}
.home-image:hover .image-description span{
	opacity:1;
}
.home-image img{
	width:100%;
	display:block;
}
.image-details{
	position:absolute;
	display:block;
	opacity:0;
	width:100%;
	max-width:1600px;
	min-height:3000px;
	background:rgba(256,256,256,0.95);
	z-index:5;
	visibility:hidden;
	transition:opacity 0.3s ease, visibility 0.3s ease;
	top:0;
	left:50%;
    transform:translateX(-50%);
}
.image-details.active{
	opacity:1;
	visibility:visible;
	transition:opacity 0.3s ease;
}
#image-details-contain{
	width:100%;
	max-width:840px;
	margin:0 auto;
	position:relative;
	padding:0 20px;
}
#image-details-contain img{
	width:100%;
	border:1px solid #e5e5e5;
}
#image-details-contain h2{
	width:100%;
	text-align:center;
	display:block;
	font-size:2.4em;
	line-height:2.4em;
	text-transform:uppercase;
	padding:40px 0;
	font-weight:500;
	letter-spacing:1px;
}
#image-details-contain p{
	width:100%;
	text-align:left;
	display:block;
	font-size:1.6em;
	padding:40px 0;
	line-height:1.6em;
}
.close-button-contain{
	width:100%;
	height:120px;
	position:fixed;
	top:0;
	max-width:1600px;
	left:50%;
	transform:translateX(-50%);
	pointer-events:none;
	z-index:10;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.3s ease, visibility 0.3s ease;
}
.close-button-contain.active{
	opacity:1;
	visibility:visible;
}
.close-button{
	position:fixed;
	top:0px;
	right:0px;
	height:120px;
	width:120px;
	padding:40px;
	cursor:pointer;
	pointer-events:auto;
}
.close-button svg{
	color:#000000;
	transition:color 0.3s ease;
}
.close-button:hover svg{
	color:#5bcbf5;
}
.tag{
	display:block;
	margin:0 0.5em 0.5em 0;
	background:#5bcbf5;
	float:left;
	padding:0.5em;
	font-size:1.6em;
	color:#ffffff;
}
.description-url{
	color:#5bcbf5;
	font-size:2em;
	margin-top:1em;
	text-decoration:none;
	display:inline-block;
	font-weight:500;
	transition:color 0.3s ease;
}
.description-url:hover{
	color:#ade5fa
}

.contact-wrap, .about-wrap{
	max-width:800px;
	margin:0 auto;
}
.secondary-headline{
	display:block;
	width:100%;
	color:#ffffff;
	font-size:2em;
	line-height:1em;
	padding:1em;
	background:#2a2a2a;
	border-bottom:3px solid #5bcbf5;
	text-align:center;
	text-transform:uppercase;
	font-weight:500;
	letter-spacing:1px;
	margin-bottom:1em;
	margin-top:1em;
}
.secondary-content{
	display:block;
	width:100%;
	color:#ffffff;
	padding:2em;
	background:#2a2a2a;
} 
.secondary-content img{
	width:calc(100% - 2em);
	margin:1em auto;
	display:block;
}
.secondary-content p{
	margin-bottom:1em;
	text-align:left;
	font-size:1.6em;
	line-height:1.6em;
	color:#ffffff;
}
.secondary-content h2{
	margin-bottom:1em;
	text-align:left;
	font-size:2.4em;
	font-weight:500;
	text-align:center;
	line-height:1.6em;
	color:#ffffff;
}
.secondary-content .info{
	color:#5bcbf5;
	font-size:2em;
	text-align:left;
}
.contact-form-contain{
	display:block;
	width:100%;
	color:#ffffff;
	background:#2a2a2a;	
}
.contact-form-contain input{
	width:100%;
	background:none;
	border:1px solid #ffffff;
	height:2em;
	margin:2em 0;
	padding:.5em;
	display:block;
	color:#ffffff;
	font-family: 'Quicksand', sans-serif;
	font-size:1.6em;
	outline:none;
	transition:background 0.3s ease;
}
.contact-form-contain input:focus, .contact-form-contain textarea:focus{
	background:#3a3a3a;
}
.contact-form-contain textarea{
	width:100%;
	min-height:10em;
	background:none;
	padding:.5em;
	display:block;
	margin:2em 0;
	display:block;
	color:#ffffff;
	border:1px solid #ffffff;
	font-family: 'Quicksand', sans-serif;
	font-size:1.6em;
	outline:none;
	transition:background 0.3s ease;
}
.input-contain{
	position:relative;
	margin:0 auto;
	width:60%;
}
.input-contain span{
	position:absolute;
	font-size:1.4em;
	color:#5bcbf5;
	left:0;
	bottom:-1.7em;
}
.contact-form-contain button{
	height:4em;
	background:none;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:3px solid #5bcbf5;
	display:block;
	display:block;
	margin:1em auto;
	width:100%;
	font-size:1.8em;
	font-family: 'Quicksand', sans-serif;
	font-weight:500;
	color:white;
	text-transform:uppercase;
	transition:background 0.3s ease;
	cursor:pointer;
}
.contact-form-contain button:hover{
	background:#3a3a3a;
}
.message-sent-status{
	width:100%;
	padding:1em;
	text-align:center;
	font-size:1.6em;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: white;
}
::-moz-placeholder { /* Firefox 19+ */
  color: white;
}
:-ms-input-placeholder { /* IE 10+ */
  color: white;
}
:-moz-placeholder { /* Firefox 18- */
  color: white;
}

@media screen and (max-width:850px){
	header{
		height:60px;
	}
	.logo-type{
		font-size:2em;
		line-height:60px;
	}
	.logo-contain{
		height:60px;
		width:60px;
		padding:5px;
	}
	.mobile-tabs{
		display:block;
		width:100%;
		height:50px;
		background:#2a2a2a;
		margin-top:1em;
	}
	.image-description{
		display:none;
	}
	nav{
		line-height:60px;
	}
	nav li{
		font-size:1.5em;
	}
	nav a{
		padding:0 10px;
	}
	.tab-product{
		background:url(images/icon-product.svg) center center no-repeat;
		background-size:40px 40px;
		border-right:1px solid #3f3f3f;
	}
	.tab-brand{
		background:url(images/icon-brand.svg) center center no-repeat;
		background-size:40px 40px;
		border-right:1px solid #3f3f3f;
	}
	.tab-illustration{
		background:url(images/icon-illustration.svg) center center no-repeat;
		background-size:40px 40px;
	}
	.tab{
		display:block;
		width:calc(100% / 3);
		height:50px;
		float:left;		
	}
	.tab.active{
		border-bottom:3px solid #5bcbf5;
	}
	.content-box{
		display:none;
		width:100%;
	}
	.product-contain{
		padding:1em;
	}
	.content-box.active{
		display:block;
	}
	.home-button{
		display:none;
	}
	.close-button-contain{
		height:60px;
	}
	.close-button{
		width:60px;
		height:60px;
		padding:15px;
	}
	#image-details-contain h2{
		font-size:1.8em;
		padding:20px 0;
	}
	.input-contain{
		position:relative;
		margin:0 auto;
		margin:0 2em;
		width:calc(100% - 4em);
	}
}
@media screen and (max-width:520px){
	.logo-type{
		display:none;
	}
}