html {
	background: url('../images/background_pixel_white.png') left top repeat;
}

body {
	font-family: helvetica, arial, sans-serif;
	font-weight: 300;
	color: #303540;
	font-size: 1.2em;
}

h1, h2, h3, h4, p, li {
	font-weight: 300;
}

a {
	color: #aa1717;
	text-decoration: none;
	font-weight: 400;
}

div#iewarning {
	text-align: center;
	padding: 10px;
	background-color: #ec3;
	color: #000;
	margin-bottom: 20px;
}

div#iewarning p {
	color: #000;
}

div#iewarning a {
	text-decoration: underline;
}

div.ielove {
	margin: 20px 0 20px 0;
	text-align: center;
	padding: 10px;
	background-color: #900;
	color: #fff;
}

div.ielove a {
	color: #faa;
}



div.topbanner {
	display: block;
	text-align: center;
	height: 67px;
	background-color: #fff;
	background-size: auto 67px;
}

div#twentyyearsbanner img#banner_text1, div#twentyyearsbanner img#banner_text2 {
	position: relative;
	top: -11px;
	height: 10px;
	width: auto;
}

div#twentyyearsbanner img#banner_arrow {
	margin-top: 17px;
	margin-left: 20px;
	height: 33px;
	width: auto;
}





div#stickersbanner {
	background-color: #00cdd4;
	position: relative;
}

div#stickersbanner a {
	display: block;
	max-width: 800px;
	height: 67px;
	margin: 0 auto;

	/* flexbox for safari 8 and earlier */
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: space-between;
    -webkit-align-items: center;

	/* flexbox for safari 9 and later */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

div#stickersbanner img#stickersbanner_examples {
	width: 210px;
	height: 52px;

	margin-left: 10px;
}

div#stickersbanner p {
	font-size: 1.3em;
	color: #003c4d;

	/* because Firefox doesn't support clip-path fully */
	background-color: #00cdd4;
	padding: 20px 0;

	margin: 0 10px;
}

div#stickersbanner img#stickersbanner_arrow {
	width: 23px;
	height: 37px;

	margin-right: 10px;
}





header {
	width: 800px;
	height: 64px;
	position: absolute;
	left: 50%;
	margin-left: -400px;
	background: url('../images/header.png') center top no-repeat;
}

div#logo {
	margin: 10px 0px 0px 30px;
	float: left;
}

div#logo a img {
	width: 196px;
	height: 45px;
}

nav ul {
	margin-top: 0px;
	margin-right: 8px;
	width: auto;
	height: 64px;
	float: right;
}

nav ul li {
	float: left;
	height: 64px;
	margin: 0px 0px 0px 0px;
	font-size: 0.9em;
}

nav ul li#nav_facebook {
	margin-top: -2px;
}

nav ul li a {
	display: block;
	height: 64px;
	padding: 20px 14px 0px 14px;
	color: #fff;
	text-decoration: none;
}



nav ul li#nav_contact a {
	display: block;
	width: 22px;
	height: 0px;
	padding: 14px 0px 0px 0px;
	margin: -6px 10px 0px 10px;
	overflow: hidden;
	background: url('../images/contact.png') left top no-repeat;
	background-size: 22px 14px;
	position: relative;
	top: 50%;
}




nav ul li#nav_dribbble a, nav ul li#nav_twitter a, nav ul li#nav_facebook a {
	display: block;
	width: 24px;
	height: 0px;
	padding: 24px 0px 0px 0px;
	overflow: hidden;
}

nav ul li#nav_dribbble a {
	background: url('../images/nav_dribbble.png') left top no-repeat;
	background-size: 24px 24px;
}


nav ul li#nav_twitter a {
	background: url('../images/nav_twitter.png') left top no-repeat;
	background-size: 24px 24px;
}


nav ul li#nav_facebook a {
	background: url('../images/nav_facebook.png') left top no-repeat;
	background-size: 24px 24px;
}

nav ul li.selected {
	background-color: #bb0000;
}




section > * {
	max-width: 740px;
}

section h2 {
	padding: 30px 0px 40px 0px;
	font-size: 1.4em;
	font-weight: normal;
	max-width: 100%;
	position: static;
	text-align: center;
}


button.quote {
	width: 160px;
	height: 36px;
	background: url('../images/button.png') center center no-repeat;
	background-size: 160px 36px;
	border: none;
	color: #fff;
	font-size: 1.0em;
	cursor: pointer;
}

button.quote a, button.quote a:visited, button.quote a:active {
	color: #fff;
	text-decoration: none;
	font-size: 1.0em;
	display: block;
	padding-top: 2px;
}


a.quote, a.quote:visited, a.quote:active {
	text-align: center;
	font-weight: 400;
	display: block;
	width: 160px;
	height: 32px;
	padding-top: 4px;
	background: url('../images/button.png') center center no-repeat;
	background-size: 160px 36px;
	border: none;
	color: #fff;
	font-size: 1.0em;
	cursor: pointer;
	text-decoration: none;
	margin-top: 40px;
}




/*---------------------------------------------*/
/*                   intro                     */
/*---------------------------------------------*/

section#intro {
	height: 400px;
	padding-top: 100px;
	background: #e6d3ae url('../images/topimage_2017.jpg') center bottom no-repeat;
	background-size: cover;
}

section#intro > * {
	position: relative;
	left: 50%;
	margin: 0px 0px 0px -370px;
	color: #000;
}

section#intro h1 {
	width: 440px;
	padding: 0px;
/*	font-size: 1.8em; */
	font-size: 1.3em;
	line-height: 1.1em;
	font-weight: normal;
}

section#intro h2 {
	text-align: left;
	padding: 5px 0px 0px 0px;
	width: 440px;
	font-size: 1.1em;
	font-weight: 200;
}

section#intro p {
	width: 400px;
	margin-top: 24px;
	/* text-shadow: 0px 1px 2px #000; */
}

section#intro button {
	margin-top: 24px;
}



/*---------------------------------------------*/
/*                   error                     */
/*---------------------------------------------*/

section#error {
	padding: 100px 0 40px 0;
	/*background: url('/images/background_pixel_black.png') center top repeat;*/
	background-color: rgb(255,208,0);
}

section#error div {
	max-width: 700px;
	margin: auto;
}

section#error h1 {
	width: 100%;
	padding: 0px;
	font-size: 1.3em;
	line-height: 1.1em;
	font-weight: normal;
	color: black;
	border-bottom: 2px solid rgba(0,0,0,0.1);
}

section#error p {
	width: 100%;
	margin-top: 24px;
	color: black;
}



/*---------------------------------------------*/
/*                  news                       */
/*---------------------------------------------*/

section#news {
	background-color: #e0dddd;
	background: url('../images/background_pixel_white.png') center top repeat;
	display: none;
}

section#news h2 {
	width: 100%;
	background-color: rgba(0,0,0,0.05);
	text-align: center;
	color: #000;
	margin: 0px;
	padding: 8px 0px 10px 0px;
	font-weight: 200;
	font-size: 1.3em;
}

section#news ul {
	list-style-type: none;
	display: block;
	max-width: 960px;
	margin: 0 auto;
	padding: 16px 0px 16px 0px;

	/* flexbox for safari 8 and earlier */
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: space-between;
    -webkit-align-items: top;

	/* flexbox for safari 9 and later */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: top;
}

section#news ul li {
	color: #000;
	margin: 0px;
	padding: 0px 10px 0px 10px;
	border-left: 1px solid #aaa;
	max-width: 320px;
}

section#news ul li:first-child {
	border: none;
}


section#news ul li a {

	/* flexbox for safari 8 and earlier */
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: flex-start;
    -webkit-align-items: top;

	/* flexbox for safari 9 and later */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: top;
}


section#news ul li div.topic img {
	width: 76px;
	height: auto;
}

section#news ul li div.topic {
	min-width: 76px; /* workaround for bug in Safari 9 */
	width: 76px;
}

section#news ul li div.content {
	padding-left: 16px;
 	width: 100%;
}


section#news ul li a h3, section#news ul li a p {
	color: #000;
}

section#news ul li a h3 {
	font-size: 1.2em;
	font-weight: 400;
	margin-bottom: 4px;
}

section#news ul li a p {
	font-size: 0.9em;
	line-height: 1.3em;
}




/*---------------------------------------------*/
/*                examples                     */
/*---------------------------------------------*/

section#examples {
	height: 300px;
	position: relative;
	overflow: hidden;
}

section#examples > * {
	max-width: 100%;
}

section#examples img.project_image {
	position: absolute;
	left: 50%;
	margin-top: -126px;
	margin-left: -188px;
	opacity: 0.0;
}

section#examples ul {
	max-width: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	position: static;
	height: 300px;
}

section#examples ul li {
	position: absolute;
	max-width: 100%;
	top: 0px;
	width: 100%;
	height: 300px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	list-style-type: none;
}

section#examples p.project_name {
	font-size: 2.0em;
	line-height: 0.9em;
	width: 400px;
	position: relative;
	left: 50%;
	margin: 0px 0px 0px -370px;
	padding-top: 50px;
}

section#examples p.description {
	font-size: 0.9em;
	width: 200px;
	position: relative;
	left: 50%;
	margin: 20px 0px 20px -370px;
}


section#examples a.link {
	display: block;
	font-size: 0.9em;
	width: 200px;
	position: relative;
	left: 50%;
	margin: 0px 0px 0px -370px;
}
	
section#examples a.previous {
	display: block;
	width: 38px;
	height: 0px;
	padding: 65px 0px 0px 0px;
	background: url('../images/arrow_left_shadowed.png') center center no-repeat;
	background-size: 38px 65px;
	overflow: hidden;
	position: absolute;
	top: 125px;
	left: 1.5%;
	z-index: 100;
}

section#examples a.next {
	display: block;
	width: 38px;
	height: 0px;
	padding: 65px 0px 0px 0px;
	background: url('../images/arrow_right_shadowed.png') center center no-repeat;
	background-size: 38px 65px;
	overflow: hidden;
	position: absolute;
	top: 125px;
	right: 1.5%;
	z-index: 100;
}


/*----------    project-specific css    ----------*/


/*-------------------- Vellum --------------------*/

section#examples ul li#project_vellum {
	background: #f2e7de none center top no-repeat;
}

section#examples ul li#project_vellum img {
	width: 512px;
	height: 512px;
	position:absolute;
	clip:rect(0px,512px,426px,0px);
}

section#examples ul li#project_vellum p.project_name, section#examples ul li#project_vellum a {
	color: #722787;
}

section#examples ul li#project_vellum p.description {
	color: #575049;
}



/*-------------------- Rentify --------------------*/

section#examples ul li#project_rentify {
	background: #5380c1 none center top no-repeat;
}

section#examples ul li#project_rentify img {
	width: 436px;
	height: 280px;
	position:absolute;
	margin-left: -60px;
	margin-top: 10px;
}

section#examples ul li#project_rentify p.project_name, section#examples ul li#project_rentify a {
	color: #fff;
}

section#examples ul li#project_rentify p.description {
	color: #b6f0ff;
}




/*-------------------- LEGO Batman --------------------*/

section#examples ul li#project_legobatman {
	background-size: 70px 70px;
}

section#examples ul li#project_legobatman img {
	width: 500px;
	height: 289px;
	position:absolute;
	margin-left: -60px;
	margin-top: 6px;
}

section#examples ul li#project_legobatman p.project_name, section#examples ul li#project_legobatman a {
	color: #292929;
}

section#examples ul li#project_legobatman p.project_name {
	width: 320px;
}


section#examples ul li#project_legobatman p.description {
	color: #4f3b15;
	width: 300px;
}






/*-------------------- Living Earth --------------------*/

section#examples ul li#project_livingearth {
	background: #041040 none center top repeat;
}

section#examples ul li#project_livingearth img {
	width: 426px;
	height: 380px;
	position:absolute;
	clip:rect(58px,426px,364px,0px);
	top: 68px;
	margin-left: -120px;
}

section#examples ul li#project_livingearth p.project_name, section#examples ul li#project_livingearth a {
	color: #2adcff;
}

section#examples ul li#project_livingearth p.description {
	color: #1895fb;
}








/*-------------------- Carcassonne --------------------*/

section#examples ul li#project_carcassonne {
	background: #770009 none center top repeat;
	background-size: 400px 400px;
}

section#examples ul li#project_carcassonne img {
	width: 512px;
	height: 512px;
	position:absolute;
	margin-left: -150px;
	margin-top: -130px;
}

section#examples ul li#project_carcassonne p.project_name, section#examples ul li#project_carcassonne a {
	color: #ffff9c;
}

section#examples ul li#project_carcassonne p.description {
	color: #fff;
}




/*------------------------ indy ------------------------*/

section#examples ul li#project_indy {
	background: #110c07 none center top no-repeat;
}

section#examples ul li#project_indy img {
	width: 512px;
	height: 167px;
	position:absolute;
	margin-left: -100px;
	margin-top: 76px;
}

section#examples ul li#project_indy p.project_name, section#examples ul li#project_indy a {
	color: #ff9300;
}

section#examples ul li#project_indy p.description {
	color: #ffb754;
}



/*-------------------- Lore --------------------*/

section#examples ul li#project_lore {
	background: #000 none center top no-repeat;
	background-size: cover;
}

section#examples ul li#project_lore img {
	width: 429px;
	height: 268px;
	position:absolute;
	margin-left: -50px;
	margin-top: 20px;
}

section#examples ul li#project_lore p.project_name, section#examples ul li#project_lore a {
	color: #fff;
}

section#examples ul li#project_lore p.description {
	color: #fff;
}




/*------------------------ lego ------------------------*/

section#examples ul li#project_lego {
	background: #178618 none center top no-repeat;
}

section#examples ul li#project_lego img {
	width: 512px;
	height: 257px;
	position:absolute;
	margin-left: -100px;
	margin-top: 26px;
}

section#examples ul li#project_lego p.project_name, section#examples ul li#project_lego a {
	color: #fff;
}

section#examples ul li#project_lego p.description {
	color: #d6f6be;
}





/*------------------------ messenger ------------------------*/

section#examples ul li#project_messenger {
	background: #a6daff none center top no-repeat;
}

section#examples ul li#project_messenger img {
	width: 472px;
	height: 260px;
	position:absolute;
	margin-left: -80px;
	margin-top: 22px;
}

section#examples ul li#project_messenger p.project_name, section#examples ul li#project_messenger a {
	color: #0084ff;
}

section#examples ul li#project_messenger p.description {
	color: #66757f;
}





/*------------------------ pushtracker ------------------------*/

section#examples ul li#project_pushtracker {
	/* background: #004771 none center top repeat; */
}

section#examples ul li#project_pushtracker img {
	width: 540px;
	height: 324px;
	position:absolute;
	margin-left: -100px;
	margin-top: -6px;
}

section#examples ul li#project_pushtracker p.project_name, section#examples ul li#project_pushtracker a {
	color: #fff;
}

section#examples ul li#project_pushtracker p.description {
	color: #b6e4ff;
}





/*------------------------ whatsapp ------------------------*/

section#examples ul li#project_whatsapp {
	/* background: #004771 none center top repeat; */
}

section#examples ul li#project_whatsapp img {
	width: 510px;
	height: 306px;
	position:absolute;
	margin-left: -100px;
	margin-top: 0px;
}

section#examples ul li#project_whatsapp p.project_name, section#examples ul li#project_whatsapp a {
	color: #fff;
}

section#examples ul li#project_whatsapp p.description {
	color: #aafff0;
}








/*------------------------ benefit ------------------------*/

section#examples ul li#project_benefit {
	background: #ffe8f1 none center top no-repeat;
}

section#examples ul li#project_benefit img {
	width: 533px;
	height: 240px;
	position:absolute;
	margin-left: -120px;
	margin-top: 32px;
}

section#examples ul li#project_benefit p.project_name, section#examples ul li#project_benefit a {
	color: #ff81b3;
}

section#examples ul li#project_benefit p.description {
	color: #66757f;
}









/*-------------------- Suunto 7R --------------------*/

section#examples ul li#project_suunto {
	background: #bc9d78 none center top no-repeat;
}

section#examples ul li#project_suunto img {
	width: 360px;
	height: 706px;
	position:absolute;
	clip:rect(0px,360px,375px,0px);
	margin-left: -50px;
	margin-top: -75px;
}

section#examples ul li#project_suunto p.project_name, section#examples ul li#project_suunto a {
	color: #fff;
}

section#examples ul li#project_suunto p.description {
	color: #fff;
}




/*-------------------- Willow --------------------*/

section#examples ul li#project_willow {
	background: #3e2a26 none center top no-repeat;
}

section#examples ul li#project_willow img {
	width: 389px;
	height: 460px;
	position:absolute;
	clip:rect(0px,440px,370px,0px);
	margin-left: -40px;
	margin-top: -70px;
	display: none;
}

section#examples ul li#project_willow p.project_name, section#examples ul li#project_willow a {
	color: #f3bd96;
}

section#examples ul li#project_willow p.description {
	color: #eccac6;
	width: 240px;
}




/*-------------------- Sweet Pea --------------------*/

section#examples ul li#project_sweetpea {
	background: #bababa none center top no-repeat;
	background-size: 1200px 683px;
}

section#examples ul li#project_sweetpea img {
	display: none;
}

section#examples ul li#project_sweetpea p.project_name, section#examples ul li#project_sweetpea a {
	color: #035757;
}

section#examples ul li#project_sweetpea p.description {
	color: #000;
	width: 240px;
}






/*-------------------- Star Trek --------------------*/

section#examples ul li#project_startrek {
	background: #000 none center top repeat;
}

section#examples ul li#project_startrek img {
	width: 350px;
	height: 350px;
	position:absolute;
	margin-left: -50px;
	margin-top: -24px;
}

section#examples ul li#project_startrek p.project_name, section#examples ul li#project_startrek a {
	color: #fff;
}

section#examples ul li#project_startrek p.description {
	color: #ffc6d6;
}




/*-------------------- Twitter --------------------*/

section#examples ul li#project_twitter {
	background: #e2e8ec none center top no-repeat;
}

section#examples ul li#project_twitter img {
	width: 350px;
	height: 350px;
	position:absolute;
	margin-left: -70px;
	margin-top: -24px;
}

section#examples ul li#project_twitter p.project_name, section#examples ul li#project_twitter a {
	color: #3b88c3;
}

section#examples ul li#project_twitter p.description {
	color: #66757f;
}




/*---------------------------------------------*/
/*                 clients                     */
/*---------------------------------------------*/

section#clients {
	background: url('../images/background_pixel_black.png') left top repeat;
	padding-bottom: 40px;
}

section#clients > * {
	max-width: 100%;
	position: static;
	text-align: center;
	margin: 0px;
}

section#clients h2 {
	padding-top: 60px;
}

section#clients ul#client_logos {
	list-style-type: none;
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
}

section#clients ul#client_logos li {
	display: inline;
	margin: 0px;
	padding: 0px;
}






/*---------------------------------------------*/
/*                   about                     */
/*---------------------------------------------*/

section#aboutus {
	background: url('../images/background_pixel_red.png') center top repeat;
	height: 446px;
	padding: 57px 0 0 0;
/*	margin-bottom: -57px; */
}

section#aboutus a.previous {
	display: block;
	width: 30px;
	height: 0px;
	padding: 57px 0px 0px 0px;
	background: url('../images/arrow_left.png') center center no-repeat;
	background-size: 30px 57px;
	overflow: hidden;
	margin-top: 63px;
	margin-left: 2%;
	float: left;
}

section#aboutus a.next {
	display: block;
	width: 30px;
	height: 0px;
	padding: 57px 0px 0px 0px;
	background: url('../images/arrow_right.png') center center no-repeat;
	background-size: 30px 57px;
	overflow: hidden;
	margin-top: 63px;
	margin-right: 2%;
	float: right;
}

section#aboutus ul {
	max-width: 1650px;
	width: 85%;
	height: 420px !important;
	/*padding-top: 57px;*/
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	list-style-type: none;
	position: relative;
	overflow: hidden;
}

section#aboutus ul:before {
	content: url('../images/pixel_red_fadeleft.png');
	position: absolute;
	left: 0%;
	z-index: 100;
	pointer-events: none;
}

section#aboutus ul:after {
	content: url('../images/pixel_red_faderight.png');
	position: absolute;
	left: 100%;
	margin-left: -128px;
	z-index: 100;
	pointer-events: none;
}

section#aboutus ul li {
	display: block;
	position: absolute;
	left: 50%;
	text-align: center;
	width: 100px;
	top: 40px;
}

section#aboutus ul li img {
	/*height: auto;*/
	width: 100px;
	height: 100px;
	display: none;
	border-radius: 50%;
}


section#aboutus ul li p {
	width: 448px;
	margin-left: -50px;
	font-size: 0.9em;
	display: none;
}

section#aboutus ul li p.name {
	font-size: 1.2em;
	padding: 20px 0px 20px 0px;
}

section#aboutus ul li p.description a {
	color: #faa;
}

section#aboutus ul li p.links {
	color: #f77;
	font-size: 0.8em;
	margin-top: 10px;
}

section#aboutus ul li p.links a {
	color: #faa;
	text-decoration: none;
}



/* NOTE: The following styles are used when JavaScript is disabled (in the <noscript> tag, which can't be used as a selector) */

section#aboutus ul li.noscript {
	width: 348px;
	top: 0px;
	margin-left:-174px;
}

section#aboutus ul li img.noscript {
	opacity: 1.0;
	display: inline;
	width: 182px;
	height: 182px;
}

section#aboutus ul li p.noscript {
	display: block;
}


/*---------------------------------------------*/
/*                   apps                      */
/*---------------------------------------------*/

section#apps {
	/* background: url('../images/background_pixel_split.png') center top repeat; */

	background: url('../images/background_pixel_darkred.png') center top repeat;
	padding-top: 0px;
}

section#apps h2 {
	background: url('../images/background_pixel_split.png') center top repeat;
	padding: 20px 0px 20px 0px;
	margin-bottom: 40px;
}

section#apps ul {
	max-width: 900px;
	margin: 0 auto;	
 
	list-style-type: none;
	text-align: center;
	overflow: hidden;
		
	/* flexbox for safari 8 and earlier */
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
	-webkit-flex-direction: row;
    -webkit-justify-content: space-between;
    -webkit-align-items: center;

	/* flexbox for safari 9 and later */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

}

section#apps ul li {
	margin: 0px auto 30px auto;
	min-width: 33%;

	position: relative; /* for absolute "new" indicator on span */
	
	/* workaround for flexbox issues in Safari 9 */
	box-sizing: border-box;
	-webkit-flex-basis: 33%;
	flex-basis: 33%;
}

section#apps ul li a {
	display: block;
	width: 100%;

	text-decoration: none;
	
	padding: 10px 0;
	
	/* flexbox for safari 8 and earlier */
    display: -webkit-flex;
    -webkit-flex-wrap: nowrap;
	-webkit-flex-direction: column;
    -webkit-justify-content: center;
    -webkit-align-items: center;

	/* flexbox for safari 9 and later */
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section#apps ul li a:hover {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 8px;
}

section#apps ul li p {
	font-size: 1.4em;
}

section#apps ul li img {
	width: 128px;
	height: 128px;
}

section#apps p.support {
	text-align: center;
	padding: 4px 0 20px 0;
	width: 85%;
	color: #fff;
	font-size: 0.9em;
	line-height: 1.1em;
	margin: auto;
}

section#apps p.support a {
	color: #faa;
}


section#apps ul li span.new {
	display: block;
	width: 40px;
	height: 0px;
	padding: 40px 0px 0px 0px;
	margin-left: -74px;
	overflow: hidden;
	background: url('../images/apps/new.png') center center no-repeat;
	background-size: 40px 40px;
	position: absolute;
	top: 0px;
	left: 50%;
}



/*---------------------------------------------*/
/*                contactinfo                  */
/*---------------------------------------------*/

section#contactinfo > * {
	max-width: 100%;
	position: static;
	text-align: center;
	margin: 0px;
	color: #000;
}

section#contactinfo h2 {
	color: #000;
	font-size: 1.2em;
	line-height: 1.4em;
	max-width: 560px;
	padding-left: 10%;
	padding-right: 10%;
	margin-left: auto;
	margin-right: auto;
}

section#contactinfo a.quote {
	margin-top: -10px;
	margin-bottom: 40px;
	position: relative;
	left: 50%;
	margin-left: -80px;
}

section#contactinfo p.email {
	margin-bottom: 10px;
}

section#contactinfo p.privacy {
	margin-top: 30px;
}

section#contactinfo div.address h3 {
	font-weight: normal;
	font-size: 1.4em;
	padding-bottom: 10px;
}

section#contactinfo div.address p {
	font-size: 0.9em;
	color: #808080 !important;
}

section#contactinfo div#address_us {
	position: absolute;
	left: 50%;
	margin-left: -200px;
	margin-top: 40px;
}

section#contactinfo div#address_europe {
	margin-left: 300px;
	margin-top: 40px;
}

section#contactinfo div.address h3, section#contactinfo div.address p {
	color: #000;
}

section#contactinfo ul {
	width: 162px;
	padding: 40px 0px 0px 30px;
	margin-left: auto;
	margin-right: auto;
}

section#contactinfo ul li {
	float: left;
	margin-right: 30px;
	list-style-type: none;
}




ul.social {
	width: 216px !important;
	padding: 80px 0px 0px 30px;
	margin-left: auto;
	margin-right: auto;
}

ul.social li {
	float: left;
	margin-right: 30px;
}

ul.social li.dribbble a, ul.social li.twitter a, ul.social li.facebook a, ul.social li.patreon a {
	display: block;
	width: 24px;
	height: 0px;
	padding: 24px 0px 0px 0px;
	overflow: hidden;
}

ul.social li.dribbble a {
	background: url('../images/contact_dribbble.png') left top no-repeat;
	background-size: 24px 24px;
}


ul.social li.twitter a {
	background: url('../images/contact_twitter.png') left top no-repeat;
	background-size: 24px 24px;
}


ul.social li.facebook a {
	background: url('../images/contact_facebook.png') left top no-repeat;
	background-size: 24px 24px;
}

ul.social li.patreon a {
	background: url('../images/contact_patreon.png') left top no-repeat;
	background-size: 24px 24px;
}







/*---------------------------------------------*/
/*                contactform                  */
/*---------------------------------------------*/

section#contactform {
	padding-top: 80px;
}

section#contactform > * {
	max-width: 800px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	color: #000;
}



section#contactform div.otherlinks p {
	width: 392px;
	height: 80px;
	padding: 0px;
	text-align: center;
	border-radius: 8px;
	font-size: 0.9em !important;
	line-height: 1.3em;
	color: #000;
}

section#contactform div.otherlinks p a {
	display: block;
	width: 292px;
	height: 64px;
	padding: 16px 20px 0px 80px;
	text-align: center;
	color: #000;
	font-weight: 200;
}

section#contactform div.otherlinks p a strong {
	font-weight: normal;
	font-size: 1.2em;
	color: #aa1717;
}


section#contactform div.otherlinks p.support {
	float: left;
	background: #dddbdb url('../images/contact_support.png') 19px center no-repeat;
	background-size: 48px 48px;
}

section#contactform div.otherlinks p.email {
	float: right;
	background: #dddbdb url('../images/contact_email.png') 19px center no-repeat;
	background-size: 48px 48px;
}



section#contactform h2 {
	clear: both;
}

section#contactform h2, section#contactform label, section#contactform legend {
	color: #000;
}

section#contactform form {
	overflow: auto;
	width: 100%;
	/*
		NOTE: The following padding causes the form element to be sized correctly within the section.
		Without the padding, there is scrolling in the form element. It's probably related to
		the issue below with the input fields.
	*/
	padding: 10px;
}

section#contactform input, textarea {
	font-size: 0.9em;
}

section#contactform p {
	margin-bottom: 1.2em;
}

section#contactform p.otherlinks {
	font-size: 1.2em;
}

section#contactform span.required {
	color: #8f0000;
}

section#contactform div.formfield {
	padding-top: 20px;
	width: 49%; /* the padding between the form fields is 2% of 800px = 16 px */

}

section#contactform input[type="text"], section#contactform input[type="email"], section#contactform input[type="url"], section#contactform input[type="date"] {
	display: block;
	height: 26px;
	/* 
		NOTE: Input fields have borders and padding that vary according to platform, leave 1% for that.
		Also, setting the border explicitly causes the input field on iOS to overflow the form element
		and cause scrolling. Yay.
	*/
/*	width: 99%; */

	/*
		OTHER NOTE: Input fields were too wide on iPad pro. Made width a little smaller and defined padding to make them line up properly.
	*/

	padding-left: 2%;
	padding-right: 2%;
	width: 95%;

}

section#contactform #formfield_name {
	float: left;
}

section#contactform #formfield_email {
	float: right;
}

section#contactform #formfield_company {
	float: left;
}

section#contactform #formfield_website {
	float: right;
}

section#contactform fieldset {
	padding: 0;
	width: 100%;
}

section#contactform fieldset ul {
	list-style-type: none;
	margin: 0px;
	padding: 5px;
	overflow: auto;
	background-color: rgba(0,0,0,0.05);
	border-radius: 6px;
}

section#contactform fieldset ul li {
	width: 49%; /* the padding between the fieldsets is 2% of 800px = 8 px */
	float: left;
	font-size: 0.9em;
}

section#contactform div#fieldset_projecttype {
	float: left;
}

section#contactform div#fieldset_platform {
	float: right;
}

section#contactform #formfield_date {
	float: left;
}

section#contactform #formfield_budget {
	float: right;
}

section#contactform #formfield_product {
	float: left;
}

section#contactform #formfield_lookup {
	float: right;
}

section#contactform select {
	display: block;
	position: relative;
	top: 3px;
	font-size: 1.1em;
}

section#contactform #formfield_description {
	width: 100%;
	clear: both;
}

section#contactform textarea {
	display: block;
	/* 
		NOTE: Text areas have borders and padding that vary according to platform, leave 1% for that.
		Also, the borders are turned off here to be consistent with the input fields defined above.
	*/
	width: 99%;
	height: 156px;
}

section#contactform #formfield_spam {
	width: 100%;
}

section#contactform button {
	margin-top: 30px;
	text-align: center;
}

/*---------------------------------------------*/
/*                notify                       */
/*---------------------------------------------*/

section#notify {
	padding-top: 80px;
}

section#notify > * {
	max-width: 320px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	color: #000;
}


section#notify h2 {
	color: #000;
}

section#notify div.intro p {
	color: #000;
	margin: 20px 0;
}

section#notify div.intro p.details {
	font-size: 0.75em;
	line-height: 1.2em;
	color: #888;
}


/*---------------------------------------------*/
/*                privacy                      */
/*---------------------------------------------*/

section#privacy {
	padding-top: 80px;
}

section#privacy {
	max-width: 500px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	color: #000;
}

section#privacy div.content {
	margin: 0 20px;
	color: #000;
}


section#privacy h2 {
	text-align: left;
	color: #000;
}

section#privacy h3 {
	color: #000;
	font-weight: 400;
}

section#privacy p {
	color: #000;
	margin: 20px 0;
}


/*---------------------------------------------*/
/*                footer                       */
/*---------------------------------------------*/

footer {
	background: url('../images/background_pixel_white.png') center top repeat;
	padding-top: 80px;
	padding-bottom: 80px;
}

footer > * {
	max-width: 100%;
	position: static;
	text-align: center;
	margin: 0px;
	color: #000;
}

footer p {
	font-size: 0.8em;
	color: #808080;
	padding-bottom: 60px;
	background: url('../images/if_watermark.png') center bottom no-repeat;
	background-size: 46px 46px;
}








/*---------------------------------------------*/
/*          media max-width: 900               */
/*---------------------------------------------*/


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

	section#examples p.project_name {
		left: 9%;
		margin-left: 0px;
	}

	section#examples p.description {
		left: 9%;
		margin-left: 0px;
	}

	section#examples a.link {
		left: 9%;
		margin-left: 0px;
	}
	
	section#examples img.project_image {
		position: absolute;
		left: 50%;
		margin-top: -60px;
		margin-left: -188px;
	}
	
	
	
	/*---------- project changes ----------*/
		
	section#examples {
		height: 580px;
		margin-top: -80px;
	}
	
	section#examples ul li {
		height: 580px;
		margin-top: 80px;
	}	
	
	section#examples p.project_name {
		font-size: 2.6em;
		width: 80%;
		position: static;
		margin: 0px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 260px;
		text-align: center;
	}

	section#examples p.description {
		font-size: 1.2em;
		line-height: 1.4em;
		position: static;
		width: 80%;
		margin: 20px 0px 20px 0px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	section#examples a.link {
		font-size: 1.2em;
		display: block;
		width: 200px;
		position: relative;
		left: 50%;
		margin: 0px 0px 0px -100px;
		text-align: center;
	}

	
	
	/*-------- individual projects ---------*/
	
	
	section#examples ul li#project_vellum {
		background-position: 80% center;
	}
	
	section#examples ul li#project_vellum img {
		clip:auto;
		width: 320px;
		height: 320px;
		left: 50%;
		top: -20px;
		margin-left: -160px;
	}
	
	
	
	section#examples ul li#project_rentify {
		background-position: 80% center;
	}
	
	section#examples ul li#project_rentify img {
		clip:auto;
		width: 343px;
		height: 220px;
		left: 50%;
		top: 20px;
		margin-left: -174px;
	}
	
	section#examples ul li#project_rentify p.project_name {
		margin-top: 10px;
	}
	
	
	
	/*-------------------- pushtracker --------------------*/
	
	section#examples ul li#project_pushtracker img {
		width: 380px;
		height: 228px;
		left: 50%;
		top: 20px;
		margin-left: -190px;
	}
	
	
	/*-------------------- whatsapp --------------------*/
	
	section#examples ul li#project_whatsapp img {
		width: 380px;
		height: 228px;
		left: 50%;
		top: 20px;
		margin-left: -190px;
	}
	
	
	
	
	/*-------------------- LEGO Batman --------------------*/

	section#examples ul li#project_legobatman img {
		width: 400px;
		height: 231px;
		left: 50%;
		top: 10px;
		margin-left: -200px;
	}
	
	section#examples ul li#project_legobatman p.project_name {
		margin-top: 0px;
		width: 400px;
	}
	
	section#examples ul li#project_legobatman p.description {
		width: 400px;

	}
	
	
	
	
	
	/*-------------------- Lore --------------------*/

	section#examples ul li#project_lore {
		background-position: center center;
		background-size: 100% 100%;
	}
	
	section#examples ul li#project_lore img {
		clip:rect(0px,290px,268px,0px);
		left: 50%;
		top: 10px;
		margin-left: -145px;		
	}
	
	section#examples ul li#project_lore p.project_name {
		margin-top: 60px;
	}
	
	
	
		
	section#examples ul li#project_livingearth img {
		clip:rect(50px,320px,285px,0px);
		width: 320px;
		height: 285px;
		left: 50%;
		top: 10px;
		margin-left: -160px;
	}
	
	section#examples ul li#project_livingearth p.project_name {
		position: relative;
		left: 0px;
		top: 10px;
		z-index: 200;
	}
	
	section#examples ul li#project_livingearth p.description {
		margin-top: 20px;
	}
	
	
	
	
	
	
	
	
	section#examples ul li#project_carcassonne img {
		width: 360px;
		height: 360px;
		left: 50%;
		top: 60px;
		margin-left: -180px;
	}
	
	
	
	
	
	
	section#examples ul li#project_lego {
		background-position: center center;
		background-size: 100% 100%;
	}
	
	section#examples ul li#project_lego img {
		clip:rect(0px,404px,160px,0px);
		
		/*width: 360px;
		height: auto;
		left: 50%;
		top: -10px;
		margin-left: -180px;*/
		
		left: 50%;
		top: 10px;
		margin-left: -202px;		
	}
	
	section#examples ul li#project_lego p.project_name {
		margin-top: -30px;
	}
	
	
	



	section#examples ul li#project_messenger {
		background-position: center center;
		background-size: 100% 100%;
	}
	
	section#examples ul li#project_messenger img {
		width: 400px;
		height: auto;
		left: 50%;
		top: 0px;
		margin-left: -200px;
	}
	
	section#examples ul li#project_messenger p.project_name {
		margin-top: 10px;
	}
	
	
	
	
	
	
	section#examples ul li#project_benefit {
		background-position: center center;
		background-size: 100% 100%;
	}
	
	section#examples ul li#project_benefit img {
		width: 400px;
		height: auto;
		left: 50%;
		top: 0px;
		margin-left: -200px;
	}
	
	section#examples ul li#project_benefit p.project_name {
		margin-top: 10px;
	}
	
	
	
	
	
	

	
	section#examples ul li#project_suunto {
		background-position: 80% center;
	}
	
	section#examples ul li#project_suunto img {
		width: 180px;
		height: 353px;
		left: 50%;
		top: 14px;
		margin-left: -90px;
	}
	
	section#examples ul li#project_suunto p.project_name {
		margin-top: 30px;
		text-shadow: 0px 2px 2px #000;
	}

	section#examples ul li#project_suunto p.description {
		text-shadow: 0px 2px 2px #000;
	}
	
	
	
	
	section#examples ul li#project_willow {
		background-position: center bottom;
	}
		
		
	section#examples ul li#project_willow p {
		text-shadow: 0px 2px 2px #000;
	}
	
	
	section#examples ul li#project_willow p.project_name {
		margin-top: 20px;
		color: #fff;
	}
	
	section#examples ul li#project_willow p.description {
		width: 80%;
		color: #fff;
	}
	
	section#examples ul li#project_willow a {
		color: #fff;
		text-shadow: 0px 2px 2px #000;
	}
	
	
	
	
	
	
	/*-------------------- Sweet Pea --------------------*/

	section#examples ul li#project_sweetpea {
		background-position: center -10px;
		background-size: 1000px 569px;
	}
	
	section#examples ul li#project_sweetpea p.project_name {
		margin-top: 10px;
	}
	
	
	
	section#examples ul li#project_indy img {
		left: 50%;
		top: -20px;
		margin-left: -256px;	
	}
	
	



	section#examples ul li#project_startrek img {
		clip:rect(0px,350px,170px,0px);
		
		left: 50%;
		top: 30px;
		margin-left: -185px;	
	}
	
	section#examples ul li#project_startrek p.project_name {
		margin-top: -50px;
	}
	
	
	
	section#examples ul li#project_twitter {
		background-position: 80% center;
	}
	
	section#examples ul li#project_twitter img {
		clip:rect(0px,350px,170px,0px);
		
		left: 50%;
		top: 30px;
		margin-left: -170px;	
	}
	
	section#examples ul li#project_twitter p.project_name {
		font-size: 2.2em;
		margin-top: -50px;
	}
	
	
	
	
	
	
	/*-------------- contact form changes -----------------*/

	section#contactform > * {
		max-width: 90%;
	}
	
	section#contactform div.formfield {
		width: 100%;
	}

	section#contactform button {
		display: block;
		margin: 30px auto;
	}

	section#contactform div#fieldset_projecttype {
		width: 49%;
	}

	section#contactform div#fieldset_platform {
		width: 49%;
	}
	
	section#contactform #formfield_date {
		width: 49%;
	}

	section#contactform #formfield_budget {
		width: 49%;
	}	

	section#contactform div.otherlinks p {
		width: 100%;
		float: none;
	}
	
	section#contactform div.otherlinks p a {
		width: auto;
	}


}

/*---------------------------------------------*/
/*          media max-width: 800               */
/*---------------------------------------------*/


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





	div#twentyyearsbanner {
		line-height: 0px;
	}

	div#twentyyearsbanner img#banner_text1, div#twentyyearsbanner img#banner_text2 {
		top: 10px;
		margin-top: 8px;
	}

	div#twentyyearsbanner img#banner_arrow {
		display: none;
		position: absolute;
		left: 100%;
		top: 14px;
		margin-left: -52px;
		margin-top: 0px;
	}




	div#stickersbanner a {
		/* flexbox for safari 8 and earlier */
		-webkit-justify-content: center;

		/* flexbox for safari 9 and later */
		justify-content: center;
	}

	div#stickersbanner p {
		font-size: 1.1em;
	}

	div#stickersbanner img#stickersbanner_arrow {
		display: none;
	}








	header {
		width: 100%;
		height: 64px;
		left: 0;
		margin-left: 0px;
	}
	
	section#intro > * {
		position: relative;
		left: 30px;
		margin: 0px 0px 0px 0px;
	}
	
	
	section#error {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	
	section#news ul {
		padding: 0px;

		/* flexbox for safari 8 and earlier */
		-webkit-flex-direction: column;
		-webkit-justify-content: center;
		
		/* flexbox for safari 9 and later */
		flex-direction: column;
		justify-content: center;
	}

	section#news ul li {
		padding: 16px 20px 16px 20px;
		border-left: none;
		border-top: 1px solid #aaa;
		min-width: 540px;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}

	section#news ul li:first-child {
		border-top: none;
	}


	section#news ul li a {
	
		/* flexbox for safari 8 and earlier */
		-webkit-align-items: center;

		
		/* flexbox for safari 9 and later */
		align-items: center;

	
	}

	
	section#clients h2 {
		padding-left: 15%;
		padding-right: 15%;
		font-size: 1.6em;
		line-height: 1.2em;
	}
	
	
	section#apps ul li img {
		width: 96px;
		height: 96px;
	}

	section#apps ul li p {
		font-size: 1.3em;
	}
	
	section#apps ul li span.new {
		top: 0px;
		left: 60%;
	}
	
	section#contactinfo div#address_us {
		position: static;
		margin-left: auto;
		margin-top: 40px;
	}

	section#contactinfo div#address_europe {
		margin-left: auto;
		margin-top: 40px;
	}



	section#contactform fieldset ul li {
		width: 49%;
	}

	section#contactform div#fieldset_projecttype {
		width: 100%;
	}

	section#contactform div#fieldset_platform {
		width: 100%;
	}

	section#contactform #formfield_date {
		width: 49%;
	}

	section#contactform #formfield_budget {
		width: 49%;
	}

}

/*---------------------------------------------*/
/*          media max-width: 640               */
/*---------------------------------------------*/


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


	div#stickersbanner img#stickersbanner_examples {
		clip-path: inset(0 158px 0 0);
		-webkit-clip-path: inset(0 158px 0 0);
 		margin-right: -158px;
	}



	header {
		width: 100%;
		height: 112px;
		left: 0;
		margin-left: 0px;
	}
	
	div#logo {
		float: none;
		width: 100%;
		text-align: center;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 7px;
	}
	
	div#logo a img {
		width: 216px;
		height: auto;
	}


	nav ul {
		clear:both;
		float: none;
		margin-left: auto;
		margin-right: auto;
		height: 20px;
		width: 100%;
		margin-top: 1px;
		position: relative;
		left: 0px;
	}
	
	nav ul li {
		margin-left: auto;
		margin-right: auto;
		width: 23% !important;
		height: 48px;
		text-align: center;
	}
	
	nav ul li#nav_work {
		width: 28% !important;
	}
	
	nav ul li#nav_blog {
		width: 18% !important;
	}
	
	nav ul li#nav_contact {
		width: 8% !important;
	}

	nav ul li#nav_contact a {
		margin-left: -10px;
		left: 50%;
	}

	
	nav ul li a {
		padding-top: 12px;
		height: 36px;
	}
	
	nav ul li.selected {
		background-color: #440000;
	}
	
		
	
	
	section#intro {
		padding-top: 148px;
		padding-bottom: 60px;
	}
	
	section#intro h1, section#intro h2 {
		width: 80%;
	}

	section#intro p {
		width: 70%;
	}
	
	section#error {
		padding-top: 148px;
		padding-bottom: 40px;
	}
	
	
	section#news ul li {
		min-width: 0;
		max-width: 320px;
	}
	
	section#clients ul#client_logos li img {
		width: 140px;
		height: 96px;
	}

	
	
	section#aboutus a.next {
		top: -357px;
	}
	
	section#aboutus ul {
		width: 75%;
		height: 520px !important;
	}

	section#aboutus ul li p {
		display: none;
		width: 240px;
		margin-left: auto;
		margin-right: auto;
		font-size: 0.9em;
	}
	
	section#aboutus {
		height: 540px !important;
	}





	/*---------- project changes ----------*/
		
	section#examples {
		height: 610px;
		margin-top: -50px;
	}
	
	section#examples ul li {
		height: 590px;
		margin-top: 50px;
	}	
	
	section#examples ul li#project_vellum img {
		clip:auto;
		width: 260px;
		height: 260px;
		left: 50%;
		top: 40px;
		margin-left: -130px;
	}
	

	
	
	section#examples ul li#project_carcassonne img {
		width: 280px;
		height: 280px;
		left: 50%;
		top: 70px;
		margin-left: -140px;
	}
	
	section#examples ul li#project_carcassonne p.project_name {
		font-size: 2.2em;
		margin-top: -54px;
	}
	
	
	
	

	
	
	
	section#examples ul li#project_indy img {
		clip:rect(0px,390px,167px,0px);		
		left: 50%;
		top: -20px;
		margin-left: -195px;		
	}	
	
	
	
	
	section#examples ul li#project_lego img {
		clip:rect(0px,300px,160px,0px);		
		left: 50%;
		top: 0px;
		margin-left: -150px;		
	}	
	
	section#examples ul li#project_lego p.project_name {
		margin-top: -54px;
	}
	
	

		
	/*-------------------- pushtracker --------------------*/
	
	section#examples ul li#project_pushtracker img {
		width: 340px;
		height: 204px;
		left: 50%;
		top: 20px;
		margin-left: -170px;
	}
	
	
	
	
	section#examples ul li#project_messenger img {
		width: 500px;
		height: auto;
		clip:rect(60px,370px,212px,60px);		
		left: 50%;
		top: -60px;
		margin-left: -220px;		
	}
	
	section#examples ul li#project_messenger p.project_name {
		margin-top: -60px;
	}
	


	section#examples ul li#project_benefit img {
		width: 300px;
		height: auto;
		margin-left: -150px;		
	}
	
	section#examples ul li#project_benefit p.project_name {
		margin-top: -70px;
	}
	
	
	
	
	section#examples ul li#project_suunto img {
		width: 180px;
		height: 353px;
		left: 50%;
		top: 14px;
		margin-left: -90px;
	}
	
	section#examples ul li#project_suunto p.project_name {
		margin-top: 44px;
	}
	
	
	
	
	section#examples ul li#project_willow p.project_name {
		margin-top: 50px;
	}
	
	
	
	
	/*-------------------- LEGO Batman --------------------*/

	section#examples ul li#project_legobatman img {
		width: 300px;
		height: 173px;
		left: 50%;
		top: 10px;
		margin-left: -150px;
	}
	
	section#examples ul li#project_legobatman p.project_name {
		margin-top: -40px;
		width: auto;
	}
	
	section#examples ul li#project_legobatman p.description {
		width: auto;

	}
	
	
	
	
	
	section#apps {
		height: auto;
	}
	
	section#apps h2 {
		height: auto;
		margin: 0px;
		padding: 16px 15% 12px 15%;
		font-size: 1.4em;
		line-height: 1.2em;
	}

	section#apps ul {
		max-width: 320px;
		padding-top: 40px;
		background: url('../images/background_pixel_darkred.png') center top repeat;
	}

	section#apps ul li {
		width: 100%;
		height: 72px;
		margin: 0px 0px 10px 0px;

		-webkit-flex-basis: 100%;
		flex-basis: 100%;
	}

	section#apps ul li a {
		padding: 5px 0 5px 20px;
		
		/* flexbox for safari 8 and earlier */
		-webkit-flex-wrap: wrap;
   		-webkit-align-items: center;
   		-webkit-justify-content: flex-start;
    	-webkit-flex-direction: row;

		/* flexbox for safari 9 and later */
		flex-wrap: wrap;
   		align-items: center;
   		justify-content: flex-start;
    	flex-direction: row;
	}
	
	section#apps ul li img {
		width: 64px;
		height: 64px;
	}

	section#apps ul li p {
		font-size: 2.0em;
		padding-left: 10px;
	}
	
	section#apps p.support {
		font-size: 1.0em;
		padding: 8px 0 12px 0;
	}
	

	section#apps ul li span.new {
		display: block;
		width: 30px;
		height: 0px;
		padding: 30px 0px 0px 0px;
		margin-left: -24px;
		overflow: hidden;
		background: url('../images/apps/new.png') center center no-repeat;
		background-size: 30px 30px;
		position: absolute;
		top: -6px;
		left: 36px;
	}

	
	
	
	/*----------- contact form changes -----------*/
	
	section#contactform {
		padding-top: 120px;
	}

	section#contactform fieldset ul li {
		width: 49%;
	}

	section#contactform div#fieldset_projecttype {
		width: 100%;
	}

	section#contactform div#fieldset_platform {
		width: 100%;
	}


	/*----------- notify form changes -----------*/

	section#notify {
		padding-top: 120px;
	}

	/*----------- privacy policy changes -----------*/

	section#privacy {
		padding-top: 120px;
	}

}






/*---------------------------------------------*/
/*          media max-width: 480               */
/*---------------------------------------------*/


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


	div#twentyyearsbanner {
	}

	div#twentyyearsbanner img#banner_text1, div#twentyyearsbanner img#banner_text2 {
		max-width: 90%;
		height: auto;	
	}




	nav ul {
		width: 100%;
		padding: 0px;
	}
	
	nav ul li {
		padding: 0px;
		font-size: 0.75em;
	}
	
	nav ul li#nav_portfolio {
		width: 18% !important;
	}
	
	nav ul li#nav_work {
		width: 33% !important;
	}
	
	nav ul li#nav_apps {
		width: 21% !important;
	}
	
	nav ul li#nav_blog {
		width: 18% !important;
	}
	
	nav ul li#nav_contact {
		width: 10% !important;
	}
	
	
		
	nav ul li a {
		padding-left: 0px;
		padding-right: 0px;
		margin: 0px;
	}





	section#aboutus ul:before {
		content: none;
	}

	section#aboutus ul:after {
		content: none;
	}

	/*----------- contact form changes -----------*/
	
	section#contactform fieldset ul li {
		width: 100%;
	}

	section#contactform #formfield_date {
		width: 100%;
	}

	section#contactform #formfield_budget {
		width: 100%;
	}



	section#examples ul li#project_indy img {
		width: 600px;
		height: 195px;
		clip:rect(0px,246px,195px,0px);		
		left: 50%;
		top: -40px;
		margin-left: -120px;		
	}	
	
	section#examples ul li#project_indy p.project_name {
		margin-top: 0px;
	}


	section#examples ul li#project_willow p.project_name {
		margin-top: 0px;
	}


	section#examples ul li#project_suunto p.project_name {
		margin-top: 18px;
	}



	section#contactform div.otherlinks p {
		font-size: 0.8em !important;
	}
	
	section#contactform div.otherlinks p a {
		height: 60px;
		padding: 20px 30px 0px 80px;
	}

	section#contactform div.otherlinks p a strong {
		font-size: 1.1em;
	}

}



/*---------------------------------------------*/
/*              retina images                  */
/*---------------------------------------------*/


@media screen and (-webkit-min-device-pixel-ratio: 2) {

	header {
		background: url('../images/header@2x.png') center top no-repeat;
		background-size: 800px 144px;
	}

}