/*

	Fonts

*/

@font-face {
    font-family: 'FranklinGothicBook';
    src: url('fonts/FranklinGothic-Book-webfont.eot');
    src: url('fonts/FranklinGothic-Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/FranklinGothic-Book-webfont.woff') format('woff'),
         url('fonts/FranklinGothic-Book-webfont.ttf') format('truetype'),
         url('fonts/FranklinGothic-Book-webfont.svg#franklin_gothic_fs_bookRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FranklinGothicDemi';
    src: url('fonts/FranklinGothic-Demi-webfont.eot');
    src: url('fonts/FranklinGothic-Demi-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/FranklinGothic-Demi-webfont.woff') format('woff'),
         url('fonts/FranklinGothic-Demi-webfont.ttf') format('truetype'),
         url('fonts/FranklinGothic-Demi-webfont.svg#franklin_gothic_fs_bookbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

::selection {
	background:						#00AEEF;
	color:							#FFF;
}

::-moz-selection {
	background:						#00AEEF;
	color:							#FFF;
}



/*

	Main

*/

html,
body {
	overflow-x:						hidden;
}

html.block,
html.block body {
	overflow:						hidden;
}

body {
	margin-top:						102px;
	font:							15px 'FranklinGothicBook', sans-serif;
	color:							#464646;
}

body.detail {
	margin-top:						42px;
}

h1 {
	display:						block;
	font-size:						0;
	margin:							0;
	padding:						0;
	text-indent:					-9999px;
	text-align:						left;
}

h2 {
	width:							100%;
	margin:							0;
	padding:						30px 0 25px 0;
	font-size:						27px;
	font-weight:					normal;
	color:							#00AEEF;
	border-top:						2px solid #D7D7D7;
}

h3 {
	padding:						0;
	margin:							0 0 25px 0;
	font-weight:					normal;
	font-size:						27px;
}

#content h1 {
	padding:						0;
	margin:							10px 0 10px 0;
	font-weight:					normal;
	font-size:						26px;
	text-indent:					0;
}

a {
	color:							#464646;
	text-decoration:				none;
	-webkit-tap-highlight-color:	rgba(0,0,0,0);
}

img {
	border:							none;
}

p {
	margin:							0 0 20px 0;
	padding:						0;
}

input[type=text],
input[type=email],
input[type=phone],
textarea {
	-webkit-appearance:				none;
	border-radius:					0;
}

form span {
	color:							#F7941D;
	margin-top:						10px;
}

form span.green {
	color:							#20BE14;
}

.demi {
	font-family:					'FranklinGothicDemi', sans-serif;
}

.button {
	padding:						0 25px;
	margin-top:						20px;
	height:							40px;
	font-size:						16px;
	line-height:					40px;
	color:							#FFF;
	background-color:				#00AEEF;
}

.desktopViewport .button:hover,
.mobileViewport .button:active {
	background-color:				#0199D2;
}

.input {
	position:						relative;
	z-index:						1;
	padding:						0 0 0 10px;
	margin-bottom:					-1px;
	width:							290px;
	height:							39px;
	font:							15px 'FranklinGothicBook', sans-serif;
	line-height:					39px\9; /* IE7/8 */
	color:							#464646;
	border:							1px solid #C2C2C2;
	outline:						none;
}

input:focus,
textarea:focus {
	z-index:						2;
	border:							1px solid #00AEEF;
}

.input.empty {
	color:							#959595;
}

textarea.input {
	padding-top:					10px;
	height:							70px;
	line-height:					18px;
	resize:							none;
}

.tag {
	padding:						0 10px;
	margin:							0 6px 6px 0;
	height:							20px;
	font-size:						12px;
	line-height:					18px;
	color:							#FFF;
	background-color:				#00AEEF;
	-webkit-border-radius:			10px;
	-moz-border-radius:				10px;
	-o-border-radius:				10px;
	-khtml-border-radius:			10px;
	border-radius:					10px;
}

.anchor {
	position:						absolute;
	left:							0;
	top:							-98px;
}

.ilb {
	position:						relative;
	display:						inline-block;
	*display:						inline;
	vertical-align:					top;
	zoom:							1;
}

.wrapper {
	width:							940px;
	padding:						0 10px;
	text-align:						left;
}

.mobile {
	display:						none;
}


/*

	Header

*/

#header {
	position:						fixed;
	left:							0;
	top:							0;
	width:							100%;
	height:							100px;
	background:						#FFF;
	border-bottom:					2px solid #C2C2C2;
	z-index:						100;
	text-align:						center;
}

#header .wrapper {
	text-align:						right;
}

#header a {
	color:							#464646;
	text-decoration:				none;
}

.desktopViewport #header a:hover,
.mobileViewport #header a:active {
	color:							#00AEEF;
}

#logo {
	float:							left;
	width:							199px;
	height:							60px;
	margin-top:						20px;
	background-image:				url("../img/logo-big.png");
	background-repeat:				no-repeat;
	overflow:						hidden;
}

#menu-button,
#menu-bar {
	display:						none;
}

#menu {
	position:						relative;
	list-style:						none;
	padding:						0;
	margin:							47px 0 0 0;
}

#menu li {
	float:							left;
	font-size:						18px;
	margin-left:					30px;
}

#menu.visible,
#menu-bar.visible {
	display:						block !important;
}

#language-menu {
	float:							none;
	position:						absolute;
	top:							-32px;
	right:							0;
}


/*

	Banner

*/

#banner {
	width:							100%;
	background-color:				#EBEBEB;
	font-size:						18px;
	text-align:						center;
}

#banner .wrapper {
	height:							460px;
	padding:						0;
	text-align:						center;
}

.banner-image {
	width:							100%;
	height:							344px;
	padding-top:					48px;
	padding-bottom:					20px;
	overflow:						hidden;
}

#banner-text {
	position:						relative;
	z-index:						10;
}

#banner-text a {
	color:							#00AEEF;
}

.banner-image img {
	position:						relative;
}

.banner-fade {
	position:						absolute;
	top:							0;
	width:							50px;
	height:							100%;
	z-index:						5;
}

.banner-fade.left {
	left:							0;
	background:						url("../img/banner-fade-left.png");
}

.banner-fade.right {
	right:							0;
	background:						url("../img/banner-fade-right.png");
}

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

.dot {
	width:							6px;
	height:							6px;
	margin:							12px 5px;
	background-color:				#C2C2C2;
	-webkit-border-radius:			3px;
	-moz-border-radius:				3px;
	-o-border-radius:				3px;
	-khtml-border-radius:			3px;
	border-radius:					3px;
}

.dot.active {
	background-color:				#464646;
}


/*

	Content

*/

#content {
	text-align:						center;
}

.content-block {
	width:							100%;
	margin-bottom:					50px;
}

#projects,
#clients {
	margin:							0 -20px -20px 0;
}

#services {
	width:							100%;
	-moz-column-count:				3;
	-webkit-column-count:			3;
	column-count:					3;
	-moz-column-gap:				20px;
	-webkit-column-gap:				20px;
	column-gap:						20px;
}

.project {
	width:							220px;
	height:							140px;
	margin:							0 20px 20px 0;
	overflow:						hidden;
}

.desktopViewport .project:hover img,
.desktopViewport .client:hover img
.mobileViewport .project:active img,
.mobileViewport .client:active img {
	-ms-filter:						"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter:							alpha(opacity=50);
	-moz-opacity:					0.5;
	-khtml-opacity:					0.5;
	opacity:						0.5;
}

.project div {
	position:						absolute;
	left:							0;
	bottom:							0;
	padding-left:					8px;
	width:							100%;
	height:							20px;
	font-size:						12px;
	line-height:					20px;
	color:							#FFF;
	background:						rgba(70,70,70,0.8);
	background:						#464646\9; /* IE7/8 */
}

.client {
	width:							138px;
	height:							138px;
	border:							1px solid #C2C2C2;
	margin:							0 20px 20px 0;
	cursor:							default;
}

.project.more,
.client.more {
	text-align:						center;
	background-color:				#EBEBEB;
	line-height:					140px;
}

.desktopViewport .project.more:hover,
.mobileViewport .project.more:active {
	color:							#FFF;
	background-color:				#00AEEF;
}

.desktopViewport .client.more:hover,
.mobileViewport .client.more:active {
	color:							#FFF;
	background-color:				#00AEEF;
	border:							1px solid #00AEEF;
}

.client.more {
	border:							1px solid #EBEBEB;
	line-height:					138px;
	cursor:							pointer !important;
}

#twitter-left {
	width:							300px;
	margin-right:					20px;
}

.desktopViewport #twitter-content a:hover,
.mobileViewport #twitter-content a:active {
	text-decoration:				none;
	color:							#00AEEF;
}

.twitter-balloon {
	padding:						20px;
	width:							260px;
	font-size:						24px;
	color:							#FFF;
	background:						#464646;
}

.twitter-balloon div {
	position:						absolute;
	left:							20px;
	bottom:							0;
	margin-bottom:					-18px;
	width:							0px;
	height:							0px;
	border-style:					solid;
	border-width:					18px 18px 0 0;
	border-color:					#464646 transparent transparent transparent;
}

.twitter-balloon a {
	color:							#FFF;
}

.twitter-info {
	margin-top:						28px;
	width:							100%;
	line-height:					18px;
}

.twitter-info .avatar {
	width:							45px;
	height:							45px;
	margin-right:					8px;
	background-image:				url("../img/twitter.png");
	background-repeat:				no-repeat;
}

.twitter-info .tweet span {
	font-size:						12px;
	color:							#00AEEF;
}

#twitter-right p {
	margin-bottom:					30px;
}

#twitter-right p span {
	font-size:						10px;
	color:							#959595;
}

#twitter-right {
	width:							620px;
}

.contact-content {
	margin-right:					-20px;
}

.contact-column {
	width:							300px;
	margin-right:					20px;
}

.contact-button {
	width:							48%;
	padding:						15px 0;
	margin-right:					4%;
	text-align:						center;
	color:							#FFF;
	background:						#00AEEF;
}

.contact-button.route {
	margin:							0;
}

#footer-mobile {
	display:						none;
}

#footer-mobile table a {
	color:							#00AEEF;
}

#footer-mobile td {
	padding-bottom:					20px;
}


/*

	Footer

*/

#footer {
	width:							100%;
	padding:						25px 0 70px 0;
	color:							#C2C2C2;
	background:						#464646;
	text-align:						center;
}

.footer-prefix {
	width:							20px;
}

#footer a,
.overlay-project .footer a,
#detail-footer a {
	margin:							-5px 14px 0 -5px;
	padding:						5px;
	height:							16px;
	background-repeat:				no-repeat;
	background-position:			center center;
}

#footer a.regular {
	margin:							0;
	padding:						0;
	height:							auto;
	color:							#C2C2C2;
}

.desktopViewport #footer a.regular:hover,
.mobileViewport #footer a.regular:active {
	text-decoration:				underline;
}

#facebook-link {
	width:							8px;
	background-image:				url("../img/icon-facebook.png");
}
.desktopViewport #facebook-link:hover,
.mobileViewport #facebook-link:active {
	background-image:				url("../img/icon-facebook-hover.png");
}

#twitter-link {
	width:							16px;
	background-image:				url("../img/icon-twitter.png");
}
.desktopViewport #twitter-link:hover,
.mobileViewport #twitter-link:active {
	background-image:				url("../img/icon-twitter-hover.png");
}

#linkedin-link {
	width:							16px;
	background-image:				url("../img/icon-linkedin.png");
}
.desktopViewport #linkedin-link:hover,
.mobileViewport #linkedin-link:active {
	background-image:				url("../img/icon-linkedin-hover.png");
}

#email-link {
	width:							19px;
	background-image:				url("../img/icon-mail.png");
}
.desktopViewport #email-link:hover,
.mobileViewport #email-link:active {
	background-image:				url("../img/icon-mail-hover.png");
}


/*

	Overlay

*/

#overlay-bg {
	display:						none;
	position:						fixed;
	left:							0;
	top:							0;
	width:							100%;
	height:							100%;
	background:						url("../img/black80.png");
	z-index:						150;
}

.overlay {
	display:						none;
	position:						absolute;
	left:							0;
	top:							0;
	width:							100%;
	z-index:						200;
	text-align:						center;
	overflow-x:						hidden;
}

.overlay p a,
.detail #content p a {
	color:							#00AEEF;
}

.overlay p a:hover,
.detail #content p a:hover {
	text-decoration:				underline;
}

.overlay-close {
	position:						absolute;
	display:						block;
	margin:							10px;
	right:							30px;
	top:							30px;
	width:							19px;
	height:							19px;
	background-image:				url("../img/overlay-close.png");
}

.overlay-wrapper {
	width:							620px;
}

#moving .overlay-wrapper {
	width:							872px;
}

.overlay-items {
	float:							left;
	width:							100%;
	white-space:					nowrap;
	margin-top:						102px;
}

.overlay .dots {
	width:							100%;
	height:							30px;
	text-align:						center;
}

.overlay-project,
.overlay-client {
	width:							620px;
	height:							630px;
	margin-right:					20px;
	background:						#FFF;
	white-space:					normal;
	text-align:						left;
}

.overlay-moving {
	position:						relative;
	width:							781px;
	height:							630px;
	background:						#FFF;
	white-space:					normal;
	text-align:						left;
}

.overlay-project .top {
	width:							100%;
	height:							334px;
	background:						#EBEBEB;
	text-align:						center;
}

a.arrow,
div.arrow {
	outline:						none;
	width:							60px;
	height:							100%;
	background-repeat:				no-repeat;
	background-position:			center center;
}

a.arrow.left {
	background-image:				url("../img/arrow-left.png");
}

.desktopViewport a.arrow.left:hover,
.mobileViewport a.arrow.left:active {
	background-image:				url("../img/arrow-left-hover.png");
}

a.arrow.right {
	background-image:				url("../img/arrow-right.png");
}

.desktopViewport a.arrow.right:hover,
.mobileViewport a.arrow.right:active {
	background-image:				url("../img/arrow-right-hover.png");
}

.overlay-project .image {
	width:							500px;
	height:							100%;
	overflow:						hidden;
}

.overlay-project .content {
	padding:						30px 80px 0 80px;
	width:							460px;
	height:							196px;
}

.overlay-project .footer {
	padding:						10px 0 0 80px;
	width:							540px;
	height:							30px;
	background:						#464646;
}

.overlay-client .content {
	padding:						80px 80px 0 80px;
	width:							460px;
	height:							520px;
}

.overlay-client .content img {
	float:							right;
	margin:							0 0 20px 30px;
	border:							1px solid #C2C2C2;
}

.overlay-client .content hr {
	margin:							0 0 25px 0;
	width:							100%;
	height:							2px;
	border:							none;
	background:						#C2C2C2;
}

.overlay-client-project {
	margin:							10px 0;
}

.cover {
	position:						absolute;
	left:							0;
	top:							0;
	width:							100%;
	height:							100%;
	background:						url("../img/black50.png");
}

.desktopViewport .overlay-project:hover .cover,
.desktopViewport .overlay-client:hover .cover {
	display:						none !important;
}


/*

	Detail

*/

#detail-head {
	position:						fixed;
	left:							0;
	top:							0;
	z-index:						100;
	padding-top:					10px;
	width:							100%;
	height:							30px;
	background-color:				#00AEEF;
	border-bottom:					2px solid #B3B3B3;
	font-size:						21px;
	color:							#FFF;
}

#detail-head .wrapper {
	text-align:						center;
}

#detail-head span {
	margin-top:						-2px;
}

#detail-back {
	float:							left;
	width:							19px;
	height:							19px;
	background-image:				url("../img/detail-back.png");
	background-size:				19px 19px;
}

#detail-arrows {
	float:							right;
}

.detail-arrow {
	width:							14px;
	height:							15px;
	margin-top:						2px;
	background-size:				14px 15px;
}

.detail-arrow.deactive {
	opacity:						0.5;
}

#detail-arrow-left {
	background-image:				url("../img/detail-arrow-left.png");
}

#detail-arrow-right {
	margin-left:					20px;
	background-image:				url("../img/detail-arrow-right.png");
}

#detail-banner {
	width:							100%;
	background-color:				#EBEBEB;
	text-align:						center;
}

#detail-banner .wrapper {
	height:							200px;
	padding:						0;
	text-align:						center;
}

#detail-banner img {
	margin-top:						5px;
}

#detail-footer {
	width:							100%;
	height:							30px;
	padding-top:					10px;
	background:						#464646;
	text-align:						center;
}


/*

	Retina

*/

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

	#logo {
		background-image:				url("../img/logo-big-x2.png");
		background-size:				199px 60px;
	}
	
	.banner-fade.left {
		background:						url("../img/banner-fade-left-x2.png");
		background-size:				50px 1px;
	}

	.banner-fade.right {
		background:						url("../img/banner-fade-right-x2.png");
		background-size:				50px 1px;
	}
	
	.twitter-info .avatar {
		background-image:				url("../img/twitter-x2.png");
		background-size:				45px 45px;
	}
	
	#facebook-link {
		background-image:				url("../img/icon-facebook-x2.png");
		background-size:				8px 16px;
	}
	.desktopViewport #facebook-link:hover,
	.mobileViewport #facebook-link:active {
		background-image:				url("../img/icon-facebook-x2-hover.png");
	}

	#twitter-link {
		background-image:				url("../img/icon-twitter-x2.png");
		background-size:				16px 16px;
	}
	.desktopViewport #twitter-link:hover,
	.mobileViewport #twitter-link:active {
		background-image:				url("../img/icon-twitter-x2-hover.png");
	}

	#linkedin-link {
		background-image:				url("../img/icon-linkedin-x2.png");
		background-size:				16px 16px;
	}
	.desktopViewport #linkedin-link:hover,
	.mobileViewport #linkedin-link:active {
		background-image:				url("../img/icon-linkedin-x2-hover.png");
	}

	#email-link {
		background-image:				url("../img/icon-mail-x2.png");
		background-size:				19px 16px;
	}
	.desktopViewport #email-link:hover,
	.mobileViewport #email-link:active {
		background-image:				url("../img/icon-mail-x2-hover.png");
	}
	
	a.arrow {
		background-size:				23px 44px;
	}
	
	a.arrow.left {
		background-image:				url("../img/arrow-left-x2.png");
	}

	.desktopViewport a.arrow.left:hover,
	.mobileViewport a.arrow.left:active {
		background-image:				url("../img/arrow-left-x2-hover.png");
	}

	a.arrow.right {
		background-image:				url("../img/arrow-right-x2.png");
	}

	.desktopViewport a.arrow.right:hover,
	.mobileViewport a.arrow.right:active {
		background-image:				url("../img/arrow-right-x2-hover.png");
	}
	
	.overlay-close {
		background-image:				url("../img/overlay-close.png");
		background-size:				19px 19px;
	}

}


/*

	720px

*/

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

	.input {
		width:							210px;
	}
	
	.wrapper {
		width:							700px;
	}
	
	#banner .wrapper {
		height:							385px;
	}
	
	.banner-image {
		height:							276px;
		padding-top:					36px;
	}
	
	.project {
		width:							220px;
		height:							140px;
	}

	.client {
		width:							158px;
		height:							158px;
	}
	
	.project.more {
		line-height:					140px;
	}
	
	.client.more {
		line-height:					158px;
	}
	
	#twitter-right {
		width:							380px;
	}
	
	.contact-column {
		width:							220px;
		margin-right:					20px;
	}

}


/*

	640px

*/

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

	body {
		margin-top:						122px;
	}
	
	.input {
		width:							183px;
	}
	
	.anchor {
		top:							-118px;
	}
	
	.wrapper {
		width:							620px;
	}
	
	#header {
		height:							120px;
	}
	
	#header .wrapper {
		text-align:						left;
		z-index:						2;
	}
	
	#header a {
		color:							#FFF;
		text-decoration:				none;
	}

	.desktopViewport #header a:hover,
	.mobileViewport #header a:active {
		color:							#FFF;
	}
	
	#logo {
		width:							166px;
		height:							50px;
		margin:							20px 0 20px 0;
		background-image:				url("../img/logo-small.png");
	}
	
	#menu-bar {
		display:						block !important;
		position:						absolute;
		left:							0;
		bottom:							0;
		width:							100%;
		height:							30px;
		background-color:				#00AEEF;
		z-index:						1;
	}
	
	#menu {
		display:						inline-block !important;
		width:							100%;
		margin-top:						0;
		background-color:				#00AEEF;
	}
	
	#menu li {
		margin:							0 20px 0 -20px;
		font-size:						16px;
	}
	
	#menu li a {
		width:							100%;
		height:							30px;
		line-height:					28px;
		background-color:				#00AEEF;
		padding:						0 20px;
		box-sizing:						border-box;
		-moz-box-sizing:				border-box;
		-webkit-box-sizing:				border-box;
	}
	
	#menu li#language-menu {
		top:							-48px;
		margin:							0;
		font-size:						18px;
	}
	
	#menu li#language-menu a {
		padding:						0;
		width:							auto;
		height:							auto;
		line-height:					inherit;
		color:							#464646;
		background:						none;
	}
	
	.desktopViewport #menu li a:hover,
	.mobileViewport #menu li a:active	{
		background-color:				#0199D2;
	}
	
	.desktopViewport #menu li#language-menu a:hover,
	.mobileViewport #menu li#language-menu a:active	{
		color:							#00AEEF;
		background:						none;
	}
	
	#banner .wrapper {
		height:							360px;
	}
	
	.banner-image {
		height:							253px;
		padding-top:					30px;
	}
	
	#services {
		-moz-column-count:				2;
		-webkit-column-count:			2;
		column-count:					2;
		-moz-column-gap:				20px;
		-webkit-column-gap:				20px;
		column-gap:						20px;
	}
	
	.project {
		width:							300px;
		height:							191px;
	}

	.client {
		width:							138px;
		height:							138px;
	}
	
	.project.more {
		line-height:					191px;
	}
	
	.client.more {
		line-height:					138px;
	}
	
	#twitter-right {
		width:							300px;
	}
	
	.contact-column {
		width:							193px;
		margin-right:					20px;
	}

}

@media screen and (max-width: 719px) and (-webkit-min-device-pixel-ratio: 2) {
	
		#logo {
			background-image:				url("../img/logo-small-x2.png");
			background-size:				166px 50px;
		}
		
	}

/*

	480px

*/

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

	body {
		margin-top:						92px;
	}
	
	h2 {
		/*border:							none;*/
		padding:						10px 0 20px 0;						
	}
	
	.input {
		width:							430px;
	}

	.anchor {
		top:							-92px;
	}
	
	.wrapper {
		width:							440px;
		padding:						0 20px;
	}
	
	.desktop {
		display:						none;
	}
	
	.mobile {
		display:						inline;
	}
	
	.mobile.ilb {
		display:						inline-block;
	}

	#header {
		height:							90px;
	}
	
	#header .wrapper {
		width:							480px;
		padding:						0;
	}
	
	#logo {
		margin-left:					20px;
	}
	
	#menu-bar {
		display:						none !important;
		top:							90px;
		height:							200px;
	}
	
	#menu-bar ul {
		list-style:						none;
		padding:						0;
		margin:							0;
	}
	
	#menu-bar li {
		width:							100%;
		height:							48px;
		background-color:				#00AEEF;
		border-top:						2px solid #018FC4;
	}
	
	#menu-button {
		display:						block;
		float:							right;
		width:							23px;
		height:							17px;
		margin:							38px 33px 15px 13px;
		background-image:				url("../img/menu-button.png");
		background-size:				23px 17px;
	}

	.desktopViewport #menu-button:hover,
	.mobileViewport #menu-button:active {
		background-image:				url("../img/menu-button-hover.png");
	}
	
	#menu {
		float:							left;
		display:						none !important;
		margin:							0;
		background:						none;
	}

	#menu li,
	#menu li#language-menu {
		float:							none;
		display:						inline-block;
		vertical-align:					top;
		width:							100%;
		margin:							0;
		font-size:						27px;
	}

	#menu li a,
	#menu li#language-menu a {
		width:							100%;
		height:							50px;
		padding:						0 0 0 20px;
		line-height:					46px;
		color:							#FFF;
		background-color:				#00AEEF;
		border-top:						2px solid #018FC4;
		box-sizing:						border-box;
		-moz-box-sizing:				border-box;
		-webkit-box-sizing:				border-box;
		text-align:						left;
	}
	
	#menu li#language-menu {
		position:						relative;
		top:							0;
	}
	
	#menu li#language-menu a {
		width:							50%;
	}
	
	#language-divider {
		display:						none;
	}
	
	.desktopViewport #menu li#language-menu a:hover,
	.mobileViewport #menu li#language-menu a:active	{
		color:							#FFF;
		background-color:				#0199D2;
	}
	
	#banner {
		font-size:						15px;
	}
	
	#banner .wrapper {
		height:							300px;
	}
	
	.banner-image {
		height:							230px;
		padding-top:					20px;
		padding-bottom:					10px;
	}
	
	.banner-fade {
		position:						absolute;
		top:							0;
		width:							20px;
		height:							100%;
	}
	
	.banner-fade.left {
		left:							-20px;
	}
	
	.banner-fade.right {
		right:							-20px;
	}
	
	#detail-banner .banner-fade.left {
		left:							0;
	}
	
	#detail-banner .banner-fade.right {
		right:							0;
	}
	
	.content-block {
		margin-bottom:					25px;
	}
	
	#project {
		margin:							0 0 -20px 0;
	}
	
	#services {
		-moz-column-count:				1;
		-webkit-column-count:			1;
		column-count:					1;
		-moz-column-gap:				0;
		-webkit-column-gap:				0;
		column-gap:						0;
	}
	
	#clients {
		margin:							0 -20px -15px 0;
	}

	.project {
		width:							440px;
		height:							280px;
		margin:							0 0 20px 0;
	}

	.client {
		width:							98px;
		height:							98px;
		margin:							0 15px 15px 0;
	}
	
	.project.more,
	.client.more {						
		width:							440px;
		height:							60px;
		line-height:					60px;
	}
	
	.client.more {
		width:							438px;
	}
	
	#twitter-button,
	#twitter-content {
		display:						none !important;
	}
	
	.contact-column {
		width:							440px;
		margin-right:					0;
		margin-bottom:					10px;
	}
	
	.contact-column .button {
		margin-bottom:					20px;
	}
	
	#footer-mobile {
		display:						inline-block;
		margin-bottom:					0;
	}
	
	#footer {
		display:						none;
	}
	
	a.arrow,
	div.arrow {
		width:							20px;
		background-size:				12px 22px;
	}

}


/*

	320px

*/

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

	.input {
		width:							270px;
	}
	
	.wrapper {
		width:							280px;
	}
	
	#header .wrapper {
		width:							320px;
	}
	
	#banner .wrapper {
		height:							240px;
	}
	
	.banner-image {
		height:							150px;
		padding-top:					20px;
	}
	
	#clients {
		margin:							0 -10px -10px 0;
	}

	.project {
		width:							280px;
		height:							178px;
	}

	.client {
		width:							60px;
		height:							60px;
		margin:							0 10px 10px 0;
	}
	
	.project.more {
		width:							280px;
	}
	
	.client.more {
		width:							278px;
	}
	
	.contact-column {
		width:							280px;
	}
	
}


/*

	< 320px

*/

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

	.wrapper,
	.input,
	#header .wrapper	{
		width:							100%;
		box-sizing:						border-box;
		-moz-box-sizing:				border-box;
		-webkit-box-sizing:				border-box;
	}
	
	.client.more {
		width:							100%;
		box-sizing:						border-box;
		-moz-box-sizing:				border-box;
		-webkit-box-sizing:				border-box;
	}
	
	.contact-column {
		width:							100%;
	}

}


/*

	<= 480 & landscape

*/

@media screen and (orientation: landscape) and (max-width: 639px) and (min-width: 320px) {

	body {
		margin-top:						42px;
	}
	
	.anchor {
		top:							-42px;
	}
	
	#header {
		height:							40px;
		background:						#00AEEF;
	}
	
	#logo {
		float:							left;
		width:							40px;
		height:							40px;
		margin:							0;
		border-right:					1px solid #018FC4;
		background-image:				url("../img/logo-square.png");
		background-size:				40px 40px;
	}
	
	#menu-button {
		display:						none;
	}
	
	#menu {
		float:							none;
		display:						block !important;
		width:							auto;
		height:							100%;
		margin-left:					41px;
	}
	
	#menu li {
		float:							none;
		display:						inline-block;
		vertical-align:					top;
		width:							25%;
		height:							100%;
		font-size:						15px;
	}
	
	#menu li a {
		height:							40px;
		padding:						0;
		line-height:					38px;
		text-align:						center;
		border:							none;
	}
	
	.mobileViewport #menu li a:active {
		color:							#00AEEF;
		background:						#FFF;
	}


}