@charset "UTF-8";
html{width:100%;height:100%}

body{
	font-family:'Avenir' Helvetica, Arial,sans-serif;
	width:100%;
	height:100%;
	font-size:108%;
	color:#6f6f6f;
	-webkit-font-smoothing:antialiased !important;
	margin:0;
	padding:0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
}

p{
	line-height:1.6;
	max-width:600px;
	margin:0 auto;
	margin-top:1em;
	font-weight:300;

}

a{text-decoration:none;color:#6f6f6f;font-weight:300}

.more{font-size:.75em;margin-top:2.5em;text-decoration:none;}
.more a{position:relative;}
.more a:hover {color: #000;}
.more a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #13e694;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}
.more a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

strong{font-weight:400;color:#000;}

h1,h2,h3,h4{
	color:#000;
	font-weight:500;
	}

h1{
	font-size:2.25em;
	margin:0 0 .65em;
}

::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: #13e694;
}

::selection {
    color: #fff;
    background: #13e694;
}

img{border:0}

#header{
	position:relative;
	width:100%;	
}

#container{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

.siteheader{
	position:fixed;
	z-index:1000;
	width:100%;
	top: 0;
	background:transparent;
    transition: top 0.3s ease-in-out;
	height:5.6em;
	}
	
	
.navigation{
	width:100%;
	position:relative;
	overflow:hidden;
	min-height:100%;
	background:#000;
	-webkit-transition:height 5s.;
	transition:height 5s.;
	display:table;
	text-align:center;
}

.link{background:#000}
.link:hover{background:#13e694}
.link a{text-decoration:none;}

.navigation .link{width:100%;display:inline-block;vertical-align:middle;cursor:pointer;position:relative;height:50% !important}
.navigation h1{color:#fff;font-size:2.8em;font-weight:400;margin-bottom:0}


.menu{
	padding:2.2em 3em 2.2em;
	color:#000;
}

.logo{
	float:left;
	z-index:1000;
	position:relative;
	width:30px;
}

#mobile-menu {
    display: block;
    position: relative;
    cursor: pointer; 
    width: 20px;
    padding: 10px 0 10px 0; 
    box-sizing: border-box;
    right:0;
    float:right;
	z-index:1000;
}

#mobile-menu span, 
#mobile-menu span:before, 
#mobile-menu span:after {
    height: 2px;
    width: 20px;
    background: #000;
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -10px;
}

#mobile-menu span {
    transition: all .3s ease .3s;
    -webkit-transition: all .3s ease .3s;
}

#mobile-menu span:before {
    top: -6px;
    transition: top .2s ease .2s, transform .2s ease;
    -webkit-transition: top .2s ease .2s, -webkit-transform .2s ease;
}

#mobile-menu span:after {
    bottom: -6px;
    transition: bottom .2s ease .2s, transform .2s ease;
    -webkit-transition: bottom .2s ease .2s, -webkit-transform .2s ease;
}

#mobile-menu.active span {
    background-color: transparent;
    transition: all .1s ease;
    -webkit-transition: all .1s ease;
}

#mobile-menu.active span:before {
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: top .2s ease .1s, transform .2s ease .3s;
    -webkit-transition: top .2s ease .1s, -webkit-transform .2s ease .3s;
	background:#fff;
}

#mobile-menu.active span:after {
    bottom: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transition: bottom .2s ease .1s, transform .2s ease .3s;
    -webkit-transition: bottom .2s ease .1s, -webkit-transform .2s ease .3s;
	background:#fff;
}


/* INVERT */

#mobile-menu .invert{
    display: block;
    position: relative;
    cursor: pointer; 
    width: 20px;
    padding: 10px 0 10px 0; 
    box-sizing: border-box;
    right:0;
    float:right;
	z-index:1000;
}

#mobile-menu .invert span, 
#mobile-menu .invert span:before, 
#mobile-menu .invert span:after {
    height: 2px;
    width: 20px;
    background: #fff;
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -10px;
}

#mobile-menu span {
    transition: all .3s ease .3s;
    -webkit-transition: all .3s ease .3s;
}

#mobile-menu span:before {
    top: -6px;
    transition: top .2s ease .2s, transform .2s ease;
    -webkit-transition: top .2s ease .2s, -webkit-transform .2s ease;
}

#mobile-menu span:after {
    bottom: -6px;
    transition: bottom .2s ease .2s, transform .2s ease;
    -webkit-transition: bottom .2s ease .2s, -webkit-transform .2s ease;
}

#mobile-menu.active span {
    background-color: transparent;
    transition: all .1s ease;
    -webkit-transition: all .1s ease;
}

#mobile-menu.active span:before {
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: top .2s ease .1s, transform .2s ease .3s;
    -webkit-transition: top .2s ease .1s, -webkit-transform .2s ease .3s;
	background:#fff;
}

#mobile-menu.active span:after {
    bottom: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transition: bottom .2s ease .1s, transform .2s ease .3s;
    -webkit-transition: bottom .2s ease .1s, -webkit-transform .2s ease .3s;
	background:#fff;
}


/* /////INVERT  */





.gap{
	height:300px;
}

.black{
	background:#000 !important;
}

.black h1,h2,h3,h4{
	color:#fff;
}

.space{
	padding:13%;
}

.text{
	position:relative;
	background:#fff;
}

.textwrap{
	max-width:532px;
	margin:0 auto;
}

.intro{width:100%}
#start{
	display:table;
	width:100%;
	min-height:100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover !important;
	background:url('img/dude-bg-small.jpg') fixed no-repeat;	
	
}
.intro{
	min-height:70%;
	}
.table{display:table;width:100%;min-height:100%;margin:0}
.bigup{display:table-cell;vertical-align:middle;width:100%;margin:0 auto}
.bigup h1{color:#fff;font-size:6.25em;text-align:center;font-weight:700}

.content{
	position:relative;
	background:#f3f3f3;
	padding:3.75em;
}

.content img{
	width:100%;
	height:auto;
	margin-bottom:3.75em;
	}

#projects{
	width:100%;
	margin:0;
	padding:0;
	position:relative;
	}
	
#project-thumb{
	width: 50%;
	float:left;
	display:block;
	background-size: 100% 100%;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
	background-position: center;
	overflow:hidden;
	
}

#project-thumb:hover{
background-size: 120% 120%;
}

.vd{background:url(img/thumb-viktoria-dahlberg.jpg)}
.ch{background:url(img/thumb-carhartt.jpg)}
.ex1{background:url(img/thumb-ex1.jpg)}
.ex2{background:url(img/thumb-ex2.jpg)}
.ex3{background:url(img/thumb-ex3.jpg)}
	
.footer{
	position:relative;
	text-align:center;	
}

.footer p{
	font-weight:300;
	font-size:1.2em;
	}
	
.social{
	margin:0 auto;
	position:relative;
	margin-top:.8em;
	padding:1em;
}

.icon{
	width:18px;
	height:auto;
	margin:.9em;
	opacity:0.45;  
	-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;}
.icon:hover{opacity:1}

.section {
	clear: both;
	padding:0;
	margin:0;
}

.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

.project-item {position:relative;margin:0;height:480px;width:50%;overflow:hidden}
.column {float:left}
.project-link {display:block;width:100%;height:480px;overflow:hidden;background-repeat:no-repeat;background-size:100% 100%;background-position:center;transition:all 0.2s;-moz-transition:all 0.2s;-webkit-transform:all 0.2s}
.project-link:hover {background-size:110% 110%;transition:all 0.2s;-moz-transition:all 0.2s;-webkit-transform:all 0.2s}

.project-desc {opacity:0;-moz-opacity:0;-webkit-opacity:0;zoom:1;width:100%;height:100%;padding:10%;color:#fff;background:rgba(0, 0, 0, 0.8);transition:all 0.4s cubic-bezier(0.19, 1, 0.22, 1)s}
.project-desc:hover{opacity:1;-moz-opacity:1;-webkit-opacity:1}
.project-desc .project-desc-title{font-size:2.25em;color:#fff;font-weight:500;position:relative;transform:translate (-100px, 0)}
.project-desc .project-desc-type{font-weight:300;color:#6f6f6f !important;position:relative;transform:translate (-100px, 0);transition-delay: 0.45s}

.view {

   width: 50%;
   height: 100%;
   margin: 0;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background: #fff;
}
.view .mask,.view .content {

   width: 100%;
   height: 100%;
   max-width: 100%;
   max-height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view img {
  display: block;
  max-width: 100%;
  height: auto; 

}

/*
.view img {
   display: block;
   position: relative;
}
*/

.view h2 {
   color: #fff;
   text-align: left;
   position: relative;
   font-size: 2em;
   margin: 10% 0 0 10%;
	font-weight:600;
}
.view p {
   font-size: 14px;
   position: relative;
   color: #fff;
   margin: 0 0 0 10%;
   text-align: left;
   margin-top:0 !important;
   color:#6f6f6f;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(0,0,0, 0.84);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateX(-100px);
   -moz-transform: translateX(-100px);
   -o-transform: translateX(-100px);
   -ms-transform: translateX(-100px);
   transform: translateX(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -o-transition: all 0.2s;
   -ms-transition: all 0.2s;
   transition: all 0.2s;
}
.view-first p {
   -webkit-transform: translateX(-100px);
   -moz-transform: translateX(-100px);
   -o-transform: translateX(-100px);
   -ms-transform: translateX(-100px);
   transform: translateX(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
   -ms-transition: all 0.3s;
   transition: all 0.3s;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}


.col {
	display: block;
	float:left;
	margin:0;
	overflow:hidden;
}

.span_1_of_2 {
	width: 50%;
}

.col img {
	width:100%;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    transition: all .2s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
	margin-bottom:-5px;
}

.col:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.contenthover {
padding: 20px 20px 10px 20px;
}
.contenthover, .contenthover h3, contenthover a {
color: #fff;
}
.contenthover h3, .contenthover p {
margin: 0 0 10px 0;
line-height: 1.4em;
padding: 0;
}

.demo {
margin: 20px auto;
}

/* Overlay style */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background:rgba(0,0,0,0.93);
}

/* Menu style */
.overlay nav {
	text-align: center;
	position: relative;
	top: 50%;
	font-size: 80px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
}

.overlay ul li {
	display: block;
	height: 20%;
	height: calc(100% / 2);
	min-height: 54px;
}

.overlay ul li a {
	font-weight: 700;
	display: block;
	color: #fff;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
	color: #6f6f6f;
	backrgound:none !important;
}

/* Effects */
.overlay-hugeinc {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-hugeinc.open {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.overlay-hugeinc nav {
	-webkit-perspective: 1200px;
	perspective: 1200px;
}

.overlay-hugeinc nav ul {
	opacity: 0.4;

}

.overlay-hugeinc.open nav ul {
	opacity: 1;
	
}

.overlay-hugeinc.close nav ul {
	}

video { 
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  background-size: cover;
  overflow-y:hidden;
}

#loading{
	width:100%;
	height:100%;
	margin:0;
	position:fixed;
	z-index:2000;
	display:block;
	background-color:#fff;
}

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #27de97;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}






@media screen and (max-height: 30.5em) {
	.overlay nav {
		height: 100%;
		font-size: 34px;
	}
	.overlay ul li {
		min-height: 34px;
	}
}

@media only screen and (max-width: 480px) {
	.view{width:100%}
	.project-item {width:100%}
	.span_1_of_2 {
		width: 100%; 
	}
	.menu{padding:1.9em}
	.space{padding:30% 13% 30% 13%}
	.icon{margin:.7em}
	.social{margin-top:1.6em;padding:.2em}
	.view h2 {font-size: 1.2em;}
}/* CSS Document */