/*import*/
@import url(normalize.css);
@import url(print.css);
@import url(font-awesome.min.css);

/*font*/
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:200,200italic,300,300italic,400,400italic,600,600italic,700,700italic,900);

/*default*/
html, button, input, select, textarea {color: #000;}
body {margin:0px;padding:0px;background:#171B1E;}
::-moz-selection {background:#b3d4fc;text-shadow:none;}
::selection {background:#b3d4fc;text-shadow:none;}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;}
img {margin:0px;padding:0px;border:0px;outline:none;vertical-align: middle;}
a {text-decoration:none;outline:none;border:none;}
fieldset {border:0;margin:0;padding:0;}
textarea {resize: vertical;}
img, object, embed {max-width:100%;}
img {height:auto;}

/*fixed*/
.left {float:left !important;}
.right {float:right !important;}

/*clearfix*/
.clearfix:before, .clearfix:after {content: " "; /* 1 */display: table; /* 2 */}
.clearfix:after {clear:both;}
.clearfix {*zoom:1;}

/*default link*/
a, a:link, a:visited, a:active, a:hover {
	color:#333;
	text-decoration:none;
	outline:none;
	border:none;
	-webkit-transition:	all 0.3s ease-in-out;
	-moz-transition:	all 0.3s ease-in-out;
	-o-transition:		all 0.3s ease-in-out;
	-ms-transition:		all 0.3s ease-in-out;
	transition:			all 0.3s ease-in-out;
}
a:hover {text-decoration:underline;color:#000;}

/*typographic*/
body {font-family: 'Titillium Web', sans-serif;font-size:14px;color:#FFF;line-height:180%;}
input, textarea {font-family: 'Titillium Web', sans-serif;}

h1, h2, h3, h4, h5, h6, p, blockquote, span, hr {margin:0px;padding:0px;}
h1 {font-size:28px;font-weight:normal;margin-bottom:20px;}
h2 {font-size:24px;font-weight:normal;margin-bottom:15px;}
p {color:#323231;margin:0px;text-align:justify;}

/*loading*/
#preloader {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:99999999999;
	background: -webkit-linear-gradient(90deg, #151515 10%, #000000 90%);
	background:    -moz-linear-gradient(90deg, #151515 10%, #000000 90%);
	background:     -ms-linear-gradient(90deg, #151515 10%, #000000 90%); 
	background:      -o-linear-gradient(90deg, #151515 10%, #000000 90%);
	background:         linear-gradient(90deg, #151515 10%, #000000 90%); 
}
#status { width:150px;height:150px;position:absolute;left:50%;top:50%;margin:-75px 0 0 -75px;z-index:999999999999;background:url(../img/loading.png) no-repeat top left;}

/*intro*/
.large-header {position: relative;width: 100%;overflow: hidden;z-index:1;}
#intro {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	position:fixed;
	top:0px;
	width:100%;
	height:100%;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	z-index:96;
	background: -webkit-linear-gradient(90deg, #CCCCCC 10%, #F9F9F9 90%);
	background:    -moz-linear-gradient(90deg, #CCCCCC 10%, #F9F9F9 90%);
	background:     -ms-linear-gradient(90deg, #CCCCCC 10%, #F9F9F9 90%);
	background:      -o-linear-gradient(90deg, #CCCCCC 10%, #F9F9F9 90%);
	background:         linear-gradient(90deg, #CCCCCC 10%, #F9F9F9 90%);
}

#intro .container {
	text-align:center;
	color:#323231;
	position:absolute;
	top:50%;
	left:50%;
	z-index:50;
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
} 
#intro .container img {width:60px;margin-bottom:20px;}
#intro .container .headline {font-size:28px;line-height:38px;font-weight:100;}
#intro .container .headline h1 {font-size:28px;display:inline;font-weight:300;margin:0px;padding:0px;color:#161414;}
#intro .scrolldown {position:absolute;bottom:40px;left:0px;right:0px;text-align:center;z-index:100;}
#intro a {display:inline-block;border:1px solid #161414;color:#161414;padding:6px 20px;text-decoration:none;text-transform:uppercase;font-size:200;}
#intro a:hover {color:#E5E5E5;background:#161414;}

/*about*/
#about{
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	position:fixed;
	top:0px;
	width:100%;
	height:100%;
	background:#171b1e;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	background: -webkit-linear-gradient(90deg, #F9F9F9 10%, #CCCCCC 90%);
	background:    -moz-linear-gradient(90deg, #F9F9F9 10%, #CCCCCC 90%);
	background:     -ms-linear-gradient(90deg, #F9F9F9 10%, #CCCCCC 90%);
	background:      -o-linear-gradient(90deg, #F9F9F9 10%, #CCCCCC 90%);
	background:         linear-gradient(90deg, #F9F9F9 10%, #CCCCCC 90%);
	
}
.scrolled #about {z-index:97}
#about .container {width:auto;max-width:500px;text-align:center;padding:0px 20px; margin:0px auto;}
#about .container img {margin-bottom:20px;}
#about .container h2.headline {margin:0px 0px 5px 0px;padding:0px;color:#262726;}
#about .container p.text {margin:0px;padding:0px;font-size:15px;line-height:22px;color:#323231;margin:0px auto; text-align:justify;}
#about .container p a {font-weight:600;border-bottom:1px solid trasparent;color:#323231;text-decoration:none;}
#about .container p a:hover {border-bottom:1px solid #323231;}
#about .container .connect {margin-top:40px;}
#about .container .connect a {display:inline-block;margin:0px 10px;border:1px solid #161414;color:#161414;padding:6px 10px;text-decoration:none;text-transform:uppercase;}
#about .container .connect a i.fa {display:inline-block;padding-left:10px;}
#about .container .connect a.email {border-color:#161414;color:#161414;}
#about .container .connect a.behance {border-color:#2D9AD2;color:#2D9AD2;}
#about .container .connect a.instagram {border-color:#211F20;color:#211F20;}
#about .container .connect a.email:hover {background:#161414;color:#DDDDDD;}
#about .container .connect a.behance:hover {background:#2D9AD2;color:#DDDDDD;}
#about .container .connect a.instagram:hover {background:#211F20;color:#DDDDDD;}

/*work*/
#work {position:relative;z-index:98;}
#work .project {padding:60px 0px 80px 0px;background:#f2f2f2;text-align:center;}
#work .project .image {width:auto;max-width:600px;margin:40px auto 0px auto;padding:0px 20px;}
#work .project:nth-child(2n) {background:#f8f8f8;}
#work .project .top {width:auto;max-width:600px;margin:0px auto;padding:0px 20px 20px 20px;}
#work .project .top h2.headline {color:#161414;font-weight:600;margin:0px;padding:0px;}
#work .project .top p.subheadline {color:#262726;text-align:center;margin:0px 0px 20px 0px;padding:0px; text-transform:uppercase;letter-spacing:1px;}
#work .project .top p.text {color:#323231;margin:0px 0px 20px 0px;padding:0px;text-align:center;display:none;}
#work .project .top a {display:inline-block;border:1px solid #2BAFFA;color:#2BAFFA;padding:6px 20px;text-decoration:none;text-transform:uppercase;}
#work .project .top a:hover {color:#FFF;background:#2BAFFA;}

/*oldie*/
body.oldie {
	background:#CCCCCC;
	background: -webkit-linear-gradient(90deg, #CCCCCC 10%, #F9F9F9 90%);
	background:    -moz-linear-gradient(90deg, #CCCCCC 10%, #F9F9F9 90%);
	background:     -ms-linear-gradient(90deg, #CCCCCC 10%, #F9F9F9 90%);
	background:      -o-linear-gradient(90deg, #CCCCCC 10%, #F9F9F9 90%);
	background:         linear-gradient(90deg, #CCCCCC 10%, #F9F9F9 90%);
}
#oldie {width:650px;margin:5% auto 10% auto;font-style:normal;}
#oldie img {width:100px}
#oldie h1 {color:#161414;font-size:30px;line-height:30px;margin:40px 0 0 0;padding:0px;font-weight:700;}
#oldie h1 span {display:block;text-transform:uppercase;}
#oldie blockquote {clear:both;float:none;margin:40px 0 20px 0;padding:0px;font-size:18px;font-weight:500;line-height:22px;color:#182429;}
#oldie p {font-size:14px;line-height:22px;color:#323231;} 
#oldie p a {border-bottom:1px solid #E1E1E1;color:#161414;font-weight:600;text-decoration:none;}
#oldie a:hover {border-bottom:1px solid #161414;}
#oldie ul {margin:20px 0 0 0;padding:0px;clear:both;list-style:none;}
#oldie ul li {float:left;margin:0px 30px 0px 0px;}
#oldie ul li a {padding-bottom:1px;border-bottom:1px solid #DCDCDC;font-size:14px;color:#262726;text-decoration:none;}
#oldie ul li a:hover {border-bottom:1px solid #262726;}

@media handheld, only screen and (max-width: 500px) {
	.scrolldown {display:none;}
	#intro {height:400px;position:relative;}
	#work {margin:0px !important;}
	#about {height:auto;padding:60px 0px;position:relative;}
	
	#about .container .connect a {display:block;margin:0px 0px 10px 0px;}
}

.cc-cookies {position:fixed;width:100%;left:0;top:0;padding:0.5em 5%;background:#000;background:rgba(0,0,0,0.8);color:#fff;font-size:12px;z-index:99999;text-align:center;color:#fff;font-weight:normal;}
.cc-cookies a, .cc-cookies a:hover {color:#fff;text-decoration:underline;}
.cc-cookies a:hover {text-decoration:none;}
.cc-overlay {height:100%;padding-top:25%;}
.cc-cookies-error {float:left;width:90%;text-align:center;margin: 1em 0 2em 0;background: #fff;padding: 2em 5%;border: 1px solid #ccc;font-size:16px;color:#333;}
.cc-cookies a.cc-cookie-accept, .cc-cookies-error a.cc-cookie-accept, .cc-cookies a.cc-cookie-decline, .cc-cookies-error a.cc-cookie-decline, .cc-cookies a.cc-cookie-reset { 
	display:inline-block;
	color:#fff;
	text-decoration:none;
	background: #7DAF3B;
	padding: 0.5em 0.75em;
	-o-transition: background 0.5s ease-in;
	-webkit-transition: background 0.25s ease-in;
	-moz-transition: background 0.25s ease-in;
	margin:0px 20px;
}
.cc-cookies a.cc-cookie-decline, .cc-cookies-error a.cc-cookie-decline {background:#af3b3b;margin-left:0.5em;}
.cc-cookies a.cc-cookie-reset {background:#f15b00;}
.cc-cookies a:hover.cc-cookie-accept, .cc-cookies-error a:hover.cc-cookie-accept, .cc-cookies a:hover.cc-cookie-decline, .cc-cookies-error a:hover.cc-cookie-decline, .cc-cookies a:hover.cc-cookie-reset  {
	background:#699133;
	-o-transition:background 0.5s ease-in;
	-webkit-transition: background 0.25s ease-in;
	-moz-transition: background 0.25s ease-in;
}
.cc-cookies-error a.cc-cookie-accept, .cc-cookies-error a.cc-cookie-decline {display:block;margin-top:1em;}
.cc-cookies.cc-discreet {width:auto;padding:0.5em 1em;left:auto;top:auto;}
.cc-cookies.cc-discreet a.cc-cookie-reset {background:none;text-shadow:none;padding:0;text-decoration:underline;}
.cc-cookies.cc-discreet a:hover.cc-cookie-reset {text-decoration:none;}
@media screen and (max-width: 768px) {
	.cc-cookies a.cc-cookie-accept, .cc-cookies a.cc-cookie-decline, .cc-cookies a.cc-cookie-reset {display:block;margin:1em 0;}
}
@media screen and (max-width: 480px) {
	.cc-cookies {position:relative;float:left;}
}

#intro a.logoLink {background:none;border:none;padding:0px;margin:0px;}
#intro.fullHeight {display:block;position:relative;padding:80px 0px;}
.privacy {width:100%;max-width:600px;margin:40px auto;text-align:left;padding:0px 20px;}
.privacy p {margin-top:20px;}