@charset "utf-8";
/* Eric Meyer Reset */ 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;
}
body {
	line-height: 1;
}
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;
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:black; /* change if the mask should have another color then white */
    z-index:999; /* makes sure it stays on top */
}

#loadanim {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(img/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

/* Site Styling */
#header {
	-webkit-transition: all 0.5s;  
    -moz-transition: all 0.5s;  
    -o-transition: all 0.5s; 
    transition: all 0.5s;
	z-index:998;
	height:50px;
	width:100%;
	position:fixed;
	top:-50px;
	background-color:rgba(255,255,255,.8);
}

#header.dropped {
	top:0px;
}

#scrollnotice {
	-webkit-transition: all 0.5s;  
    -moz-transition: all 0.5s;  
    -o-transition: all 0.5s; 
    transition: all 0.5s;
	z-index:998;
	height:24px;
	width:100%;
	position:fixed;
	bottom:0;
	background:url(img/scroll.svg) no-repeat center;
	margin:0 auto 5px auto;
}

#scrollnotice.dropped {
	bottom:-30px;
}

#headlogo {
	height:40px;
	width:120px;
	background:url(img/headerlogo.svg) no-repeat center;
	float:left;
	margin:3px 20px 7px 10px;
	cursor:pointer;
}

#navwrap {
	float:left;
}

#navwrap ul {
	list-style: none;
	text-align: center;
	margin-top:5px;
}

#navwrap li {
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	font-size:18px;
	letter-spacing:0.75px;
	height:40px;
	line-height:40px;
	display:inline-block;
}

#navwrap a {
 	text-decoration:none;
	color:#424242;
	display:block;
	margin:0px 10px;
}

#navwrap a:hover {
	color:#929497;
	-webkit-transition: color 0.6s;
    -moz-transition: color 0.6s;
    -o-transition: color 0.6s;
    transition: color 0.6s;
}

#navsoc {
	float:right;
}

#navsoc ul {
	height:50px;
	width:180px;
}

#navsoc li {
	margin:5px 10px 0px 0px;
	float:right;
}

#navsoc a {
	height:40px;
	width:40px;
	display:block;
	background-size:auto 20px;
}

#navsoc a:hover {
	-webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
    -o-transition: background 0.6s;
    transition: background 0.6s;
}

#navmenu {
	width:20px;
	height:20px;
	background:url(img/menu_open.svg) no-repeat center center;
	display:none;
}

.fb {
	background:url(img/socnavfb.svg) no-repeat center center;
}

.tw {
	background:url(img/socnavtw.svg) no-repeat center center;
}

.ig {
	background:url(img/socnavig.svg) no-repeat center center;
}

.fb:hover {
	background:url(img/socnavfb2.svg) no-repeat center center;
}

.tw:hover {
	background:url(img/socnavtw2.svg) no-repeat center center;
}

.ig:hover {
	background:url(img/socnavig2.svg) no-repeat center center;
}

#fullpage {
	
}

#landing {
	background:url(img/homebg.svg) repeat-x fixed center top;
	text-align:center;
	background-size:cover;
}

#landingnavbox {
	position:fixed;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	width:100%;
	text-align:center;
	bottom:50px;
}

#landingnavbox a {
	width:15%;
	margin:0 20px;
	background:#FFFFFF;
	border:3px solid #E5E5E5;
}

.landingnav {
	height:40px;
	margin:0px 10px;
	display:inline-block;
	font-family:'Open Sans', sans-serif;
	font-weight:600;
	font-size:16px;
	line-height:70px;
	color:#424242;
	text-align:center;
	padding:20px 20px;
	min-width:70px;
}

#landingshop{
	background:url(img/nav_shop.svg) no-repeat;
	background-size:40px auto;
	background-position:48% 15px;
}

#landingabout{
	background:url(img/nav_meetme.svg) no-repeat;
	background-size:60px auto;
	background-position:50% 20px;
}

#landingblog{
	background:url(img/nav_blog.svg) no-repeat;
	background-size:40px auto;
	background-position:50% 15px;
}

#whatwedo {
	background-color:white;
	text-align:center;
}

#whatwedo h1 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	font-size: 48px;
	color:#424242;
}

.wwdstack {
	width:90%;
	max-width:1060px;
	margin:50px auto 40px auto;
	text-align:center;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
}

.wwdstackbox {
	width:20%;
	text-align:center;
	margin-top:10px;
}

.wwdstackbox h3 {
	font-family:'Open Sans', sans-serif;
	font-weight:300;
	font-size:32px;
	line-height:34px;
	letter-spacing:0.6px;
}

.plusimg {
	width:6%;
	height:40px;
	max-height:40px;
	background:url(img/plus.svg) no-repeat center center;
	display:inline-block;
}

.flexfill {
	width:6%;
	height:40px;
	display:inline-block;
}

.wwdstackicon {
	height:200px;
	cursor:default;
}

#wwdicon1 {
	background:url(img/wwddesign.svg) no-repeat center center;
	order:1;
}

#wwdicon2 {
	background:url(img/wwdillustration.svg) no-repeat center center;
	order:3;
}

#wwdicon3 {
	background:url(img/wwdideation.svg) no-repeat center center;
	order:5;
}

#wwdicon4 {
	background:url(img/wwddirection.svg) no-repeat center center;
	order:7;
}

#wwdtitle1 {
	order:8;
}

#wwdtitle2 {
	order:10;
}

#wwdtitle3 {
	order:12;
}

#wwdtitle4 {
	order:14;
}

#wwdplus1 {
	order:1;
}

#wwdplus2{
	order:4;
}

#wwdplus3 {
	order:6;
}

#wwdflexfill1 {
	order:9;
}

#wwdflexfill2 {
	order:11;
}

#wwdflexfill3 {
	order:13;
}

#wwdlogo {
	width:20%;
	height:120px;
	display:inline-block;
	background:url(img/wwdlogo.svg) no-repeat center top;
}

.single {
	text-align:center;
}

.single p {
	font-family:'Open Sans', sans-serif;
	font-weight:400;
	font-size:16px;
	line-height:24px;
	letter-spacing:0.8px;
	margin-top:20px;
}

.singleimage {
	display:inline-block;
	margin:0 auto;
}

#achieve, #business, #book, #app, #game {
	width:50%;
}

#website, #team, #seework {
	width:40%;	
}

#achieve_mob {
	display:none;
}

.foliobox {
	font-family:'Open Sans', sans-serif;
	letter-spacing:0.8px;
	text-align:center;
	margin:0 auto;
}

.foliobox h2 {
	margin-top:20px;
	font-size:45px;
	font-weight:300;
}

.foliobox p {
	margin:20px 30px 0 30px;
	font-size:16px;
	line-height:24px;
	font-weight:400;
}

.foliobox a {
	text-decoration:none;
	color:#424242;	
}

.folioicon {
	display:inline-block;
	width:200px;
	height:222px;
}

.folioicon:hover {
	-webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
    -o-transition: background 0.6s;
    transition: background 0.6s;
}

#dribpage {
	background:url(img/dribs_bg.png) no-repeat center center;
	background-size:cover;	
}

#behancepage {
	background:url(img/behance_bg.png) no-repeat center center;
	background-size:cover;	
}

#instapage {
	background:url(img/insta_bg.png) no-repeat center center;
	background-size:cover;	
}

#dribbbleicon {
	background:url(img/dribbble1.svg) no-repeat center center;
}

#behanceicon {
	background:url(img/behance1.svg) no-repeat center center;
}

#instagramicon {
	background:url(img/instagram1.svg) no-repeat center center;
}

#dribbbleicon:hover {
	background:url(img/dribbble2.svg) no-repeat center center;
}

#behanceicon:hover {
	background:url(img/behance2.svg) no-repeat center center;
}

#instagramicon:hover {
	background:url(img/instagram2.svg) no-repeat center center;
}

#contact {
	text-align:center;
}

#contact h1 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	font-size: 48px;
	color:#424242;
	margin-top:100px;
}

.contactstack {
	width:100%;
	max-width:1060px;
	margin:70px auto 0 auto;
	text-align:center;
	display:flex;
	justify-content:center;
	align-items:center;
}

.contactbox {
	width:22%;
	text-align:center;
}

.contacticon {
	display:inline-block;
	width:90%;
	height:200px;
}

.contacticon:hover {
	-webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
    -o-transition: background 0.6s;
    transition: background 0.6s;
}

#email {
	background:url(img/contactemail1.svg) no-repeat center center;
}

#facebook {
	background:url(img/contactfb1.svg) no-repeat center center;
}

#twitter {
	background:url(img/contacttw1.svg) no-repeat center center;
}

#email:hover {
	background:url(img/contactemail2.svg) no-repeat center center;
}

#facebook:hover {
	background:url(img/contactfb2.svg) no-repeat center center;
}

#twitter:hover {
	background:url(img/contacttw2.svg) no-repeat center center;
}

#moretitle {
	width:40%;
	margin-top:200px;
}

.copyright p {
	margin:100px auto 0 auto;
	font-family:'Open Sans', sans-serif;
	font-weight:400;
	font-size:16px;
	letter-spacing:0.8px;
}

.white {
	background-color:#FFFFFF;
	color:#424242;
}

.red {
	background-color:#FF0D4D;
	color:#424242;
}

.blue {
	background-color:#004FFF;
	color:#FFFFFF;
}

.mint {
	background-color:#00FFB6;
	color:#424242;
}

.purple {
	background-color:#BA00FF;
	color:#424242;
}

.grey {
	background-color:#58595B;
	color:#FFFFFF;
}

.pink {
	background-color:#F95396;
	color:#FFFFFF;
}

.cornflower {
	background-color:#2D95EA;
	color:#FFFFFF;
}

.precache {
	display:none;	
}

/* Mobile and Responsive */
@media only screen and (max-width: 1000px) {
		.wwdstackbox h3 {
			font-size:28px;
			line-height:30px;
		}
		
		.wwdstackicon {
			height:140px;
		}
		#wwdlogo {
			width:30%;
		}		
}

@media only screen and (max-width: 800px) {
		#landingnavbox a {
			width:80%;
			margin:5px 10px;
		}
		
		.landingnav {
			height:30px;
			line-height:30px;
			padding:10px 20px 10px 60px;
		}
		
		#landingshop{
			background-size:30px auto;
			background-position:30% 12px;
		}
		
		#landingabout{
			background-size:40px auto;
			background-position:12% 19px;
		}
		
		#landingblog{
			background-size:30px auto;
			background-position:30% 15px;
		}

		.wwdstackbox h3 {
			font-size:22px;
			line-height:24px;
		}
		
		.wwdstackicon {
			height:110px;
		}
}

@media only screen 
  and (min-device-width: 322px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {
		#header {
			background-color:#FFFFFF;
			height:100px;
			top:-100px;
		}
		
		#headlogo {
			height:80px;
			width:240px;
			margin:8px 40px 14px 20px
		}

		#landing {
			background:url(img/homebg_mob.svg) repeat-x fixed center top;
			background-size:cover;
		}

		#landingnavbox {
			margin-bottom:40px;
		}
		
		#landingnavbox a {
			width:80%;
			margin:15px 10px;
		}
		
		.landingnav {
			height:80px;
			line-height:80px;
			padding:20px 20px 20px 110px;
			font-size:36px;
		}
		
		#landingshop{
			background-size:70px auto;
			background-position:16% 32px;
		}
		
		#landingabout{
			background-size:90px auto;
			background-position:4% 46px;
		}
		
		#landingblog{
			background-size:70px auto;
			background-position:16% 36px;
		}
		
		#whatwedo h1 {
			font-size:84px;
			margin:0 100px;
		}

		.wwdstackbox {
			width:40%;
			margin:30px 15px 0 15px;
		}
		
		.wwdstackbox h3 {
			font-size:48px;
		}
		
		.plusimg {
			width:0px;
			height:0px;
			display:none;
		}
		
		.flexfill {
			width:0px;
			height:0px;
			display:none;
			background:#F74A4D;
		}
		
		.wwdstackicon {
			height:320px;
			margin-top:60px;
		}
		
		#wwdicon1 {
			background:url(img/wwddesign.svg) no-repeat center center;
			order:1;
		}
		
		#wwdicon2 {
			background:url(img/wwdillustration.svg) no-repeat center center;
			order:2;
		}
		
		#wwdicon3 {
			background:url(img/wwdideation.svg) no-repeat center center;
			order:5;
		}
		
		#wwdicon4 {
			background:url(img/wwddirection.svg) no-repeat center center;
			order:6;
		}
		
		#wwdtitle1 {
			order:3;
		}
		
		#wwdtitle2 {
			order:4;
		}
		
		#wwdtitle3 {
			order:7;
		}
		
		#wwdtitle4 {
			order:8;
		}
		
		#wwdplus1, #wwdplus2, #wwdplus3, #wwdflexfill1, #wwdflexfill2, #wwdflexfill3 {
			order:9;
		}
		
		#wwdlogo {
			width:0px;
			height:0px;
			display:none;
		}

		.single p {
			font-size:38px;
			line-height:52px;
			margin:80px 100px 0 100px;
		}
		
		#achieve_mob, #business, #book, #app, #game {
			width:80%;
		}
		
		#website, #team, #seework {
			width:70%;	
		}
				
		#achieve_mob {
			display:inline;	
		}
		
		#achieve {
			display:none;	
		}

		.foliobox h2 {
			margin-top:50px;
			font-size:90px;
		}
		
		.foliobox p {
			margin:40px 90px 0 90px;
			font-size:34px;
			line-height:42px;
		}
		
		.foliobox a {
			text-decoration:none;
			color:#424242;	
		}
		
		.folioicon {
			width:340px;
			height:380px;
		}

		#contact h1 {
			font-size:84px;
			margin:0 100px;
		}
		
		.contactstack {
			width:100%;
			margin:80px auto 0 auto;
			text-align:center;
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
		}
		
		.contactbox {
			width:34%;
			text-align:center;
			margin:10px 20px;
		}
		
		.contacticon {
			display:inline-block;
			width:90%;
			height:320px;
			margin-top:-15px;
		}
		
		#moretitle {
			width:70%;
			margin-top:200px;
		}
		
		#navwrap {
			display:none;
			background-color:#FFFFFF;
			width:100%;
			margin:-5px 0;
		}
		
		#navwrap.menuactive {
			display:inline-block;	
		}
		
		#navwrap ul {
			width:80%;
			margin:100px auto 0 auto;
		}
		
		#navwrap li {
			width:100%;
			font-size:60px;
			height:80px;
			margin-top:80px;
		}
		
		#navwrap a {
			text-decoration:none;
			color:#424242;
			display:block;
			margin:0px 20px;
		}
				
		#navsoc {
			display:none;
			width:100%;
			background-color:#FFFFFF;
		}
		
		#navsoc.menuactive {
			display:inline-block;	
		}
		
		#navsoc ul {
			height:60px;
			width:80%;
			display:flex;
			justify-content:center;
			margin:200px auto 160px auto;
		}
		
		#navsoc li {
			margin:0 40px;
		}
		
		#navsoc a {
			height:80px;
			width:80px;
			display:inline-block;
			background-size:contain;
		}
		
		#navmenu {
			display:inline-block;
			height:45px;
			width:45px;
			float:right;
			margin:28px 15px 0 0;
			cursor:pointer;
		}
		
		#navmenu.menuactive {
			background:url(img/menu_close.svg) no-repeat center center;
		}
				
		.copyright p {
			margin:200px auto -100px auto;
			font-size:30px;
			letter-spacing:0.8px;
		}
}

@media only screen and (max-width: 600px) {
		#header {
			background-color:#FFFFFF;	
		}
		
		#landing {
			background:url(img/homebg_mob.svg) repeat-x fixed center top;
			background-size:cover;
		}
		
		.wwdstack {
			margin:0 auto;
		}
		
		.wwdstackbox {
			width:40%;
			margin:10px 15px 0 15px;
		}
		
		.wwdstackbox h3 {
			font-size:22px;
			line-height:24px;
		}
		
		.plusimg {
			width:0px;
			height:0px;
			display:none;
		}
		
		.flexfill {
			width:0px;
			height:0px;
			display:none;
			background:#F74A4D;
		}
		
		.wwdstackicon {
			height:150px;
			margin-top:20px;
		}
		
		#wwdicon1 {
			background:url(img/wwddesign.svg) no-repeat center center;
			order:1;
		}
		
		#wwdicon2 {
			background:url(img/wwdillustration.svg) no-repeat center center;
			order:2;
		}
		
		#wwdicon3 {
			background:url(img/wwdideation.svg) no-repeat center center;
			order:5;
		}
		
		#wwdicon4 {
			background:url(img/wwddirection.svg) no-repeat center center;
			order:6;
		}
		
		#wwdtitle1 {
			order:3;
		}
		
		#wwdtitle2 {
			order:4;
		}
		
		#wwdtitle3 {
			order:7;
		}
		
		#wwdtitle4 {
			order:8;
		}
		
		#wwdplus1, #wwdplus2, #wwdplus3, #wwdflexfill1, #wwdflexfill2, #wwdflexfill3 {
			order:9;
		}
		
		#wwdlogo {
			width:0px;
			height:0px;
			display:none;
		}

		.single p {
			font-size:18px;
			line-height:25px;
			margin:40px 40px 0 40px;
		}
		
		#achieve_mob, #business, #book, #app, #game {
			width:80%;
		}
		
		#website, #team, #seework {
			width:70%;	
		}
				
		#achieve_mob {
			display:inline;	
		}
		
		#achieve {
			display:none;	
		}
		
		.contactstack {
			width:100%;
			max-width:1060px;
			margin:20px auto 0 auto;
			text-align:center;
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
		}
		
		.contactbox {
			width:34%;
			text-align:center;
			margin:10px 20px;
		}
		
		.contacticon {
			display:inline-block;
			width:90%;
			height:130px;
		}
		
		#moretitle {
			width:70%;
			margin-top:200px;
		}
		
		#navwrap {
			display:none;
			background-color:#FFFFFF;
			width:100%;
		}
		
		#navwrap.menuactive {
			display:inline-block;	
		}
		
		#navwrap ul {
			width:80%;
			margin:0 auto;
		}
		
		#navwrap li {
			width:100%;
			font-size:20px;
			height:60px;
			padding-top:30px;
		}
		
		#navwrap a {
			text-decoration:none;
			color:#424242;
			display:block;
			margin:0px 10px;
		}
		
		#navwrap a:hover {
			color:#929497;
			-webkit-transition: color 0.6s;
			-moz-transition: color 0.6s;
			-o-transition: color 0.6s;
			transition: color 0.6s;
		}
		
		#navsoc {
			display:none;
			width:100%;
			background-color:#FFFFFF;
		}
		
		#navsoc.menuactive {
			display:inline-block;	
		}
		
		#navsoc ul {
			height:60px;
			width:80%;
			display:flex;
			justify-content:center;
			margin:40px auto;
			margin-bottom:40px;
		}
		
		#navsoc li {
			margin:0 20px;
		}
		
		#navsoc a {
			height:30px;
			width:30px;
			display:inline-block;
			background-size:contain;
		}
		
		#navmenu {
			display:inline-block;
			float:right;
			margin:15px 15px 0 0;
			cursor:pointer;
		}
		
		#navmenu.menuactive {
			background:url(img/menu_close.svg) no-repeat center center;
		}
		
		#navmenu.menuactive:hover {
			-webkit-transition: background 0.6s;
			-moz-transition: background 0.6s;
			-o-transition: background 0.6s;
			transition: background 0.6s;
			background:url(img/menu_close2.svg) no-repeat center center;
			cursor:pointer;
		}
}