@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'work_sansmedium';
    src: url('../fonts/worksans-medium-webfont.woff2') format('woff2'),
         url('../fonts/worksans-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'work_sansregular';
    src: url('../fonts/worksans-regular-webfont.woff2') format('woff2'),
         url('../fonts/worksans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewayheavy';
    src: url('../fonts/raleway.heavy-webfont.woff2') format('woff2'),
         url('../fonts/raleway.heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewaysemibold';
    src: url('../fonts/raleway-semibold-webfont.woff2') format('woff2'),
         url('../fonts/raleway-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'work_sansextralight';
    src: url('../fonts/worksans-extralight-webfont.woff2') format('woff2'),
         url('../fonts/worksans-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html { 
    height:100%;
	overflow-x:hidden;
}

body { 
    min-height:100%;
	margin:0 auto;
	overflow-x:hidden;
	z-index:1;
}

h1 {
	font-family: 'ralewayheavy', sans-serif;
	font-size:3.2em;
	color:#58ffc2;
	letter-spacing:10px;
	text-transform: uppercase;
	text-align: center;
	line-height:60px;
}

h2 {
	font-family: 'ralewaysemibold', sans-serif;
	font-size:1.6em;
	color:#202020;
	margin:0;
	line-height:38px;
}

h3 {
	font-family:'work_sansextralight', sans-serif;
	font-size:1.6em;
	line-height:36px;
	color:#494949;
	margin-top:40px;
	text-align:center;
}

h4 {
	font-family:'work_sansregular', sans-serif;
	font-size:1em;
	color:#58ffc2;
	text-align:center;
}

h5 {
	font-family: 'ralewaysemibold', sans-serif;
	font-size:1.8em;
	color:#58ffc2;
	margin:110px 0px 70px 0px;
	line-height:38px;
	text-align:center;
}

p {
	font-family:'work_sansextralight', sans-serif;
	font-size:1.2em;
	line-height:34px;
	color:#494949;
	margin-top:40px;
}

#wrapper{
	max-width:940px;
	width:100%;
	margin:0 auto;
}

#header {
	background: url("../img/herobg.png") no-repeat center center fixed; 
	width:100%;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	position:relative;
  	height:100vh;
  	overflow:auto;
}

#logo{
	background-image:url("../img/logo.png");
	width:111px;
	height:56px;
	margin-top:60px;
	display:inline-block;
}

#logo_color{
	background-image:url("../img/logo_color.png");
	width:111px;
	height:56px;
	margin-top:60px;
	display:inline-block;
}

#menu{
	float:right;
	margin-top:60px;
	display:inline-block;
}

#menu_next{
	height:175px;
	width:100%;
	background:#FFF;
}

#menu li{
    font-family: 'ralewaysemibold', sans-serif;
    font-size:1em;
	display:inline-block;
	padding:0px 0px 0px 55px;
}

#menu a{
	color:#fff;
	text-decoration: none;
}

#menu a:hover{
	color:#58ffc2;
	text-decoration:none;
}

.linkeffect::after {
    content:'';
    display:block;
    width:0;
    height:2px;
    background:#58ffc2;
    transition:width .3s;
}

.linkeffect:hover::after {
    width:100%;
    transition:width .3s;
}

#tagline{
	margin-top:170px;
	margin-bottom:20%;
}

#arrow {
	width:19px;
	height:12px;
	margin:0 auto;
	background-image:url("../img/arrow.png");
}

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.bounce {
	 animation:bounce 2s infinite;
	 -webkit-animation:bounce 2s infinite;
	 -moz-animation:bounce 2s infinite;
	 -o-animation:bounce 2s infinite;
}

#contentcontainer{
	overflow:auto;
	padding-top:100px;
	padding-bottom:50px;
}

#workcontainer{
	overflow:auto;
}

#about {
	height:100%;
	width:100%;
	margin-bottom:150px;
	background-color:#fff;
}

#intro {
	margin:0px 50px 140px 50px;
}

#contentarea{
	width:60%;
	float:left;
}

#contentareawork{
	width:100%;
}

.concept_img{
	background-repeat: no-repeat;
	float:right;
	width:250px;
	height:230px;
	background-image:url("../img/concept_img.png");
}

#contentarea2{
	width:60%;
	float:right;
}

.branding_img{
	background-repeat: no-repeat;
	float:left;
	width:250px;
	height:230px;
	margin-top:-20px;
	background-image:url("../img/design_img.png");
}

#work {
	height:100%;
	width:100%;
	margin:0;
	background-color:#fff;
}

#item{
	width:25%;
	height:300px;
	background-image:url("../img/portfolio/redesign.png");
	float:left;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	background-size:cover;
}

#item2{
	width:25%;
	height:300px;
	background-image:url("../img/portfolio/equality.png");
	float:left;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	background-size:cover;
}

#item3{
	width:25%;
	height:300px;
	background-image:url("../img/portfolio/aimpunch.png");
	float:left;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	background-size:cover;
}

#item4{
	width:25%;
	height:300px;
	background-image:url("../img/portfolio/wakecup.png");
	float:left;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	background-size:cover;
}

#item5{
	width:25%;
	height:300px;
	background-image:url("../img/portfolio/frost.png");
	float:left;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	background-size:cover;
}

#item6{
	width:25%;
	height:300px;
	background-image:url("../img/portfolio/basketball.png");
	float:left;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	background-size:cover;
}

#item7{
	width:25%;
	height:300px;
	background-image:url("../img/portfolio/pixelmart.png");
	float:left;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	background-size:cover;
}

#item8{
	width:25%;
	height:300px;
	background-image:url("../img/portfolio/keukenfabriek.png");
	float:left;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	background-size:cover;
}

#itembox{
	width:25%;
	height:300px;
	float:left;
	background-color:#1a1334;
}

#itembox2{
	width:25%;
	height:300px;
	float:left;
	background-color:#fff;
}

p.boxtext {
	font-family:'work_sansextralight', sans-serif;
	font-size:1.2em;
	line-height:34px;
	margin-left:40px;
	color:#494949;
	margin-top:170px;
	width:75%;
}

p.boxtext2 {
	font-family: 'work_sansextralight', sans-serif;
	font-size: 1.2em;
	line-height: 34px;
	margin-left: 60px;
	color: #58ffc2;
	margin-top: 100px;
	width: 70%;
}

#overlay{
	background:rgba(0,0,0,.75);
	text-align:center;
	padding:1px 0 67px 0;
	opacity:0;
}

#item:hover #overlay, #item2:hover #overlay, #item3:hover #overlay, #item4:hover #overlay, #item5:hover #overlay, #item6:hover #overlay, #item7:hover #overlay, #item8:hover #overlay{
	opacity:1;
}

p.hovertext{
	font-family:'ralewaysemibold', sans-serif;
	font-size:1.6em;
	color:#fff;
	text-align:center;
	visibility:hidden;
	opacity:0;
	margin-top:150px;
	margin-bottom:-45px;
}

p.hoversubtext{
	font-family:'work_sansregular', sans-serif;
	font-size:1.2em;
	color:#fff;
	text-align:center;
	visibility:hidden;
	opacity:0;
}

#item:hover p.hoversubtext, #item2:hover p.hoversubtext, #item3:hover p.hoversubtext, #item4:hover p.hoversubtext, #item5:hover p.hoversubtext, #item6:hover p.hoversubtext, #item7:hover p.hoversubtext, #item8:hover p.hoversubtext{
	visibility:visible;
	opacity:1;
	transform: translate3d(0px, -25px, 0px);
	-webkit-transition:.2s all;
}

#item:hover p.hovertext, #item2:hover p.hovertext, #item3:hover p.hovertext, #item4:hover p.hovertext, #item5:hover p.hovertext, #item6:hover p.hovertext, #item7:hover p.hovertext, #item8:hover p.hovertext{
	visibility:visible;
	opacity:1;
	transform: translate3d(0px, -25px, 0px);
	-webkit-transition:.2s all;
}

#contact {
	height:100vh;
	width:100%;
	margin:0;
	background-color:#1a1334;
	float:left;
}

p.normaltext{
	font-family:'work_sansregular', sans-serif;
	font-size:1.2em;
	line-height:34px;
	color:#ffffff;
	text-align:center;
	margin-top:40px;
}

#contactcontainer{
	width: 600px;
	margin: 0 auto;
	padding-top: 80px;
}

#mail{
	font-family:'work_sansregular', sans-serif;
	font-size:1.2em;
	line-height:34px;
	color:#58ffc2;
	text-align:center;
	margin:40px 0px 40px 0px;
}

#mail a{
	text-decoration:none;
	color:#58ffc2;
}

#canvas{
	width:100%;
	height:100%;
	margin-top:80px;
}

#introwork {
	margin:0px 50px 60px 50px;
}

p.worktext {
	font-family:'work_sansextralight', sans-serif;
	font-size:1.2em;
	line-height:34px;
	color:#494949;
	margin:80px 0px 80px 0px;
}

.button {
	width:160px;
	height:31px;
	float:right;
	color:#1a1334;
	border:#1a1334 2px solid;
	font-family:'ralewaysemibold', sans-serif;
	font-size:1.0em;
	text-align:center;
	padding-top:12px;
	margin-top:62px;
	text-decoration: none;
	background: #FFF;
    box-shadow: inset 0 0 0 0 #1a1334;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.button:hover{
	border:#1a1334 2px solid;
	box-shadow:inset 160px 0 0 0 #1a1334;
    color:#fff;
}

#prevnext{
	width:500px;
	margin:0 auto;
	margin-top:100px;
}

.prev {
	width:160px;
	height:31px;
	float:left;
	color:#1a1334;
	border:#1a1334 2px solid;
	font-family:'ralewaysemibold', sans-serif;
	font-size:1.0em;
	text-align:center;
	padding-top:12px;
	text-decoration: none;
	background: #FFF;
    box-shadow: inset 0 0 0 0 #1a1334;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
	
}

.prev:hover{
	border:#1a1334 2px solid;
	box-shadow:inset -160px 0 0 0 #1a1334;
    color:#fff;
}

.next {
	width:160px;
	height:31px;
	float:right;
	color:#1a1334;
	border:#1a1334 2px solid;
	font-family:'ralewaysemibold', sans-serif;
	font-size:1.0em;
	text-align:center;
	padding-top:12px;
	text-decoration: none;
	background: #FFF;
    box-shadow: inset 0 0 0 0 #1a1334;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.next:hover{
	border:#1a1334 2px solid;
	box-shadow:inset 160px 0 0 0 #1a1334;
    color:#fff;
}

#contact a:hover{
	color:#fff;	
}

@media screen and (max-width: 1920px){
#tagline {
    margin-top:260px;
	margin-bottom:20%;
}

h1{
	font-size:3.6em;	
}

@media screen and (max-width: 1440px){
#tagline{
	margin-top:170px;
	margin-bottom:20%;
}

p.boxtext2{
	font-family: 'work_sansextralight', sans-serif;
	font-size: 1.2em;
	line-height: 34px;
	margin-left: 55px;
	color: #58ffc2;
	margin-top: 85px;
	width: 70%;
}

#contactcontainer {
	width: 600px;
	margin: 0 auto;
	padding-top: 10px;
}

@media screen and (max-width: 1366px){
#tagline{
	margin-top:155px;
	margin-bottom:10%;
}
	
p.boxtext {
    margin-top: 170px;
}

p.boxtext2 {
    margin-top: 55px;
}
}

@media screen and (max-width: 1280px), (max-height: 660px){

#tagline{
	margin-top:100px;
	margin-bottom:10%;
}
}

@media screen and (max-width: 1280px){
#tagline {
    margin-top: 120px;
	margin-bottom: 15%;
}

p.boxtext {
    font-size: 1.1em;
}

p.boxtext2 {
    font-size: 1.1em;
}

h1{
	font-size: 3.2em;	
}
}

@media screen and (max-width: 1024px){
#tagline{
	margin-bottom: 10%;
}

#item, #item2, #item3, #item4, #item5, #item6, #item7, #item8, #itembox, #itembox2{
	width:33.33333%;	
}

#overlay {
	padding: 1px 0 69px 0;
}
}

@media screen and (max-width: 980px){

#contact{
	height:700px;	
}
	
#wrapper {
	max-width:860px;	
}

p{
	font-size:1.1em;	
}

p.normaltext{
	font-size:1.1em;	
}

#mail{
	font-size:1.1em;	
}

p.hovertext{
	font-size:1.5em;	
}

p.hoversubtext{
	font-size:1.1em;	
}

p.worktext{
	font-size:1.1em;
}

h2{
	font-size:1.5em;	
}

h3{
	font-size:1.4em;	
}

}

@media screen and (max-width: 800px){

h1{
	font-size:2.8em;	
	letter-spacing:6px;
}

#tagline {
    margin-top: 165px;
}

#wrapper{
	max-width:720px;
}

#item, #item2, #item3, #item4, #item5, #item6, #item7, #item8, #itembox, #itembox2{
	width:50%;	
}

p.boxtext {
	font-size:1.1em;
	margin-top:160px;
}

p.boxtext2 {
	font-size:1.1em;
	margin-top:60px;
}
}

@media screen and (max-width: 768px){

#contact {
	height:750px;
}

h1{
	font-size:2.8em;
	line-height:50px;
    letter-spacing:4px;
}

#wrapper{
	max-width:700px;
}

#contentarea{
	width:100%;	
}
}

@media screen and (max-width: 667px), (max-height: 375px){

#tagline{
	margin-top:30px;
	margin-bottom:60px;
}	

h1{
	font-size: 2.0em;
	line-height: 34px;	
}

#contactcontainer{
	width: 100%;
	margin: 0 auto;	
}
}

@media screen and (max-width: 640px){

#header{
	width:100%;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	position:relative;
  	height:100%;
  	overflow:auto;	
}

#contactcontainer{
	width: 100%;
	margin: 0 auto;	
}

h1{
	font-size:1.6em;
	line-height:26px;
	letter-spacing: 4px;
}

#tagline{
	margin-top:35px;
	margin-bottom:125px;
}

#arrow {
	display:none;
}

#logo{
    position:relative;
	left:40%;
	transform:scale(0.8, 0.8);
	-ms-transform:scale(0.8, 0.8);
	-webkit-transform:scale(0.8, 0.8);
	margin-top:70px;
	background-repeat:no-repeat;
}

#intro {
    margin: 0px 50px 100px 50px;
}

#menu{
	display:none;
}

#wrapper{
	max-width:520px;	
}

#contentarea{
	text-align:center;
}

#contentarea2{
	width:100%;	
	float:left;
	text-align:center;
}

p.worktext{
	text-align:center;	
}

.concept_img{
	display:none;	
}

.branding_img{
	display:none;	
}
}

@media screen and (max-width: 540px){
h1{
	font-size: 1.5em;
	line-height: 24px;
}

#tagline{
	margin-top:25px;
}

p.boxtext {
	font-size:1.1em;
}

p.boxtext2 {
	font-size:1.1em;
}

#boxtext {
	margin-left:35px;
}

#boxtext2 {
	margin-left:35px;
}

#prevnext{
	width:400px;
}
}

@media screen and (max-width: 480px){

#header{
	width:100%;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	position:relative;
  	height:100%;
  	overflow:auto;	
}

#tagline{
	margin-top:50px;
}

#logo{
	left: 34%;
}

#logo_color{
    position: relative;
	left: 34%;
	background-repeat:no-repeat;
}

h2{
	font-size:1.3em;	
}

h3{
	font-size:1.2em;
}

h5{
	font-size:1.4em;	
}

p{
	font-size:1.0em;
}

p.normaltext{
	font-size:1.0em;
}

p.worktext{
	font-size:1.0em;
	text-align:center;	
}

#mail{
	font-size:1.0em;
}

#item, #item2, #item3, #item4, #item5, #item6, #item7, #item8, #itembox, #itembox2{
	width:100%;	
}

#wrapper{
	max-width:340px;	
}

#contentarea{
	width:100%;
	text-align:center;
}

#contentarea2{
	width:100%;	
	float:left;
	text-align:center;
}

.concept_img{
	display:none;	
}

.branding_img{
	display:none;	
}

.button{
	display:none;
}

.prev{
	display:none;	
}

.next{
	display:none;
}
}

@media screen and (max-width: 480px){

#tagline{
	margin-top:35px;
}
}

@media screen and (max-width: 360px){

#canvas{
	width:100%;
	margin-top:80px;
}

#contact{
	height:700px;
}

h3{
	font-size:1.1em;
	line-height:30px;	
}

#contentcontainer {
    padding-top:40px;
	padding-bottom:10px;
}

#logo{
	left:31%;	
}

#logo_color{
	left:31%;	
}

#wrapper{
	max-width:300px;	
}

#tagline{
	margin-top: 50px;
	margin-bottom: 100px;
}
}

@media screen and (max-width: 320px){

#wrapper{
	max-width:290px;	
}

#logo{
	left:31%;
}

#logo_color{
	left:31%;	
}
}