/*
+  GLOBAL RESETS
-------------------------------------------------------------------------------------- */

	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
	small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure,  footer, header, hgroup,
	menu, nav, section, summary, time, mark, audio, video {
	  margin:0;
	  padding:0;
	  border:0;
	  outline:0;
	  font-size:100%;
	  vertical-align:baseline;
	  background:transparent;
	}
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	    display:block;
	}
	nav ul { list-style:none; }
	blockquote, q { quotes:none; }
	blockquote:before, blockquote:after,
	q:before, q:after { content:''; content:none; }
	a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
	ins { background-color:#ff9; color:#000; text-decoration:none; }
	mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
	del { text-decoration: line-through; }
	abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
	table { border-collapse:collapse; border-spacing:0; }
	hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
	input, select { vertical-align:middle; }
	input, textarea{ outline: none;}

	body { font:13px/1.231 sans-serif; *font-size:small; }
	select, input, textarea, button { font:99% sans-serif; }
	pre, code, kbd, samp { font-family: monospace, sans-serif; }

	body, select, input, textarea { color: #444; }
	h1,h2,h3,h4,h5,h6 { font-weight: bold; }
	html { overflow-y: scroll; }

	a:hover,
	a:active { outline: none; }

	ul, ol { margin-left: 1.8em; }
	ol { list-style-type: decimal; }

	nav ul, nav li { margin: 0; }
	small { font-size: 85%; }
	strong, th { font-weight: bold; }
	td, td img { vertical-align: top; }
	textarea { overflow: auto; }
	.ie6 legend,
	.ie7 legend { margin-left: -7px; }
	input[type="radio"] { vertical-align: text-bottom; }
	input[type="checkbox"] { vertical-align: bottom; }
	.ie7 input[type="checkbox"] { vertical-align: baseline; }
	.ie6 input { vertical-align: text-bottom; }
	td { vertical-align: top; }
	sub, sup { font-size: 75%; line-height: 0; position: relative; }
	sup { top: -0.5em; }
	sub { bottom: -0.25em; }
	pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
	.ie6 legend, .ie7 legend { margin-left: -7px; }
	label,
	input[type=button],
	input[type=submit],
	button { cursor: pointer; }
	button,
	input,
	select,
	textarea { margin: 0; }
	input:valid,
	textarea:valid {  }
	.no-boxshadow input:invalid,
	.no-boxshadow textarea:invalid { background-color: #f0dddd; }

	/* Hide out highlight color --
	    ::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
	    ::selection { background:#FF5E99; color:#fff; text-shadow: none; }
	*/
	a:link { }

	button {  width: auto; overflow: visible; }
	.ie7 img { -ms-interpolation-mode: bicubic; }

	.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
	.visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px);  clip: rect(1px, 1px, 1px, 1px); }
	.clearfix:before, .clearfix:after {  content: "\0020"; display: block; height: 0; visibility: hidden; }
	.clearfix:after { clear: both; }
	.clearfix { zoom: 1; }

/*
+  FANCY STYLES
-------------------------------------------------------------------------------------- */

	.left { float: left; }
	.right { float: right; }
	.first { margin-left:0 !important; }
	.last { margin-right:0 !important; }
	.hide {display: none; }
	.visible { display: block !important; }
	.empty { visibility: hidden !important; }

	/* Usage <div class="hr"><hr /></div> */
	.hr { clear: both; margin: 18px 0; background: transparent; border: none; border-top: 1px solid #bbb; }
	    hr { visibility: hidden; font-size: 0; line-height: 0; height: 0; border: none; }

	.accent, strong.accent, span.accent, em.accent { background: #ffffbf !important; color: inherit; padding: .25em; font-weight: bold; }
	div.accent, p.accent { padding: 1.5em; }
	.amp { font: italic 1.1em/10% "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", serif; }

	/* jQuery UI Helpers -*/
	    .ui-helper-hidden { display: none; }
	    .ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
	    .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
	    .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	    .ui-helper-clearfix { display: inline-block; }
	    /* required comment for clearfix to work in Opera \*/
	    * html .ui-helper-clearfix { height:1%; }
	    .ui-helper-clearfix { display:block; }
	    /* end clearfix */
	    .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
	    .ui-tabs-panel{ display: block !important; }
	    .ui-tabs-hide { display: none !important; }

/*
= FONT EMBEDING
------------------------------------------------------------------------------------- */

	@font-face {
  		font-family: 'FontAwesome';
  		src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  		src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
  			 url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
  			 url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
  			 url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
  			 url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  		font-weight: normal;
  		font-style: normal;
		}

/*
= COMMON
------------------------------------------------------------------------------------- */

	html, body {
		width: 100%; 
		font-family: "Roboto"; color: rgba(255,255,255,0.5); 
		background: #000000;
		}
		.error404 {background: #16171a;}
		.tablet, 
		.tablet body, 
		.desktop, 
		.desktop body {overflow: hidden; height: 100%;}
		* {
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			font-smoothing: antialiased;
			text-rendering: optimizeLegibility;
			}
		.ie11 * {backface-visibility: visible !important;}
		h1, h2, h3, h4, h5, h6, strong {color: #ffffff; font-weight: 700;}
			h3 {margin-bottom: 15px; font-size: 15px; text-transform: uppercase;}
		p {font-weight: 300; font-size: 15px; line-height: 30px;}
		a {text-decoration: none;}
		ul {margin: 0px; list-style: none;}
		.sections-holder {
		    position: fixed; top: 0; right: 0; left: 0; z-index: 100;
		    width: 100%; height: 100%;
		    background: #16171a;
		    -webkit-transform: translateY(100%) translateZ(0px);
		    -moz-transform: translateY(100%) translateZ(0px);
		    transform: translateY(100%) translateZ(0px);
		    -webkit-transition: all 750ms 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
		    -moz-transition: all 750ms 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
		    transition: all 750ms 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
		    -webkit-backface-visibility: hidden; backface-visibility: hidden;
			}
			.sections {
			    position: fixed; top: 0; right: 0; left: 0;
			    width: 100%; height: auto;
			    background: #16171a;
			    -webkit-backface-visibility: hidden; backface-visibility: hidden;
			    will-change: transform;
				}
				.ie11 .sections {position: absolute;}
				section {
					position: relative;
					-webkit-backface-visibility: hidden; backface-visibility: hidden;
				    will-change: transform;
					}
					.sections-holder section .holder {
						position: relative;
						max-width: 1400px; 
						margin: 0px auto; padding: 0 60px;
						}
						hgroup {
							overflow: hidden;
							margin-bottom: 100px;
							-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;	
							}
							hgroup h2 {
								position: relative;
								font-weight: 300; font-size: 20px; color: rgba(255,255,255,0.5);
								}
								hgroup h2 strong {position: absolute; left: -9999px;}
							hgroup h4 {
								float: left; position: relative; clear: both;
								font-size: 40px; line-height: 49px; font-weight: 700; color: #ffffff;
								text-shadow: 4px 2px #16171a, -4px 2px #16171a;
								}
								hgroup h4 strong {position: relative; z-index: 2; font-weight: 500;}
									hgroup h4 strong:before {
										content: "";
										display: block; position: absolute; right: 0px; top: 0px;
										width: 100%; height: 100%;
										background: rgba(22, 23, 26, 0.75);
										-webkit-transition: width 750ms ease-in-out;
										-moz-transition: width 750ms ease-in-out;
										transition: width 750ms ease-in-out;
										-webkit-backface-visibility: hidden; backface-visibility: hidden;
										}
										hgroup h4.in-view strong:before {width: 0px;}
								hgroup h4:after {
									content: "";
									display: block; position: absolute; left: 0px; bottom: 3px;
									width: 0%; height: 2px;
									background: rgba(255,255,255,0.25);
									-webkit-transition: width 750ms ease-in-out;
									-moz-transition: width 750ms ease-in-out;
									transition: width 750ms ease-in-out;
									}	
									hgroup h4.in-view:after	{width: 100%;}

					.parallax {
						position:relative;
						-webkit-backface-visibility: hidden; backface-visibility: hidden;
						will-change: transform;
						}			
			.inactive-intro .sections-holder {
				-webkit-transform: translateY(0px) translateZ(0px);
				-moz-transform: translateY(0px) translateZ(0px);
				transform: translateY(0px) translateZ(0px);
				}
			.active-intro .sections-holder {
				-webkit-transform: translateY(100%) translateZ(0px);
				-moz-transform: translateY(100%) translateZ(0px);
				transform: translateY(100%) translateZ(0px);
				-webkit-transition: all 750ms 0ms cubic-bezier(0.895, 0.030, 0.685, 0.220); 
				-moz-transition: all 750ms 0ms cubic-bezier(0.895, 0.030, 0.685, 0.220); 
				transition: all 750ms 0ms cubic-bezier(0.895, 0.030, 0.685, 0.220); 
				}

	/* 
	+ Preloading */
		
		.loading-holder {
			position: fixed; top: 0; left: 0; z-index: 9999; display: block !important;
			width: 100%; height: 100%;
			background: #000000;
			-webkit-transition: all 1000ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			-moz-transition: all 1000ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: all 1000ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			-webkit-backface-visibility: hidden; backface-visibility: hidden;
			}
			.loading-holder .loader-overlay {
				position: absolute; top: 0; left: 0;
				width: 100%; height: 100%;
				background: #16171a;
				}
			.loading-holder .loader {
				position: absolute; top: 0; left: 0;
				width: 100%; height: 30px;
				}
				.loading-holder .progress-bar {position: absolute; top: 0; width: 100%; height: 100%;}
					.loading-holder .progress-loaded {
						position: absolute; left: 0px; bottom: 0px;
						width: 100%; height: 0%;
						background: #16171a;
						}
			.loading-holder:after {
				content: "";
				display: block; position: absolute; left: 50%; top: 50%; opacity: 1;
				width: 50px; height: 50px;
				background: url(../img/bgr-logo-big.png) center no-repeat; background-size: 50px 50px;
				-webkit-transform: translateX(-50%) translateY(-50%);
				-moz-transform: translateX(-50%) translateY(-50%);
				transform: translateX(-50%) translateY(-50%);
				-webkit-transition: all 500ms ease-in-out;
				-moz-transition: all 500ms ease-in-out;
				transition: all 500ms ease-in-out;
				}
				.loading-holder.loaded:after {opacity: 0;}

	/*
	+ Custom scrollbar */

		.vs-scrollbar {display: block; position: absolute; z-index: 9997;}
			.vs-scrollbar.vs-vertical {
			    top: 54px; right: 10px; bottom: 54px;
			    width: 4px;
				}
			.vs-scrollbar .vs-scrolldrag {
    			width: 100%; height: auto;
    			background: #7f7f7f;
    			border-radius: 2px;
    			cursor: pointer;
				}
			.scrolling > * {
				user-select: none;
			    -moz-user-select: none;
			    -webkit-user-select: none;
			    -ms-user-select: none;			
				}

	/*
	+ 404 | No webgl support */

		.no-webgl article,
		.not-found {
			position: absolute; left: 50%; top: 50%;
			width: 100%; 
			padding: 0 80px;
			text-align: center;
			-webkit-transform: translateX(-50%) translateY(-50%);
			-moz-transform: translateX(-50%) translateY(-50%);
			transform: translateX(-50%) translateY(-50%);
			-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
			}
			.no-webgl article h2,
			.not-found h2 {margin-bottom: 26px; font-size: 45px;}
			.no-webgl article p,
			.not-found p {font-size: 20px; line-height: 34px;}
				.not-found p a {
					display: inline-block; position: relative;
					color: #ffffff;
					}
					.not-found p a:after {
						content: "";
						display: block; position: absolute; left: 0px; bottom: 6px;
						width: 100%; height: 1px;
						background: rgba(255,255,255,0.5);
						}
		.mobile .error404 {position: fixed; height: 100%;}
			.mobile .no-webgl article p,
			.mobile .not-found p {font-size: 15px; line-height: 30px;}

	/*
	+ No webgl support */

		.no-webgl {
			position: fixed; left: 0px; top: 0px; z-index: 999999;
			width: 100%; height: 100%;
			background: #16171a;
			}

/*
= INTRO
------------------------------------------------------------------------------------- */

	
	.intro-holder {
		overflow: hidden; opacity: 0.5;
		height: 100vh;
		background: #16171a;
		-webkit-transition: all 1000ms ease-in-out;
		-moz-transition: all 1000ms ease-in-out;
		transition: all 1000ms ease-in-out;
		-webkit-backface-visibility: hidden; backface-visibility: hidden;
		}
		.intro {
			position: absolute; left: 0px; top: 0px;
			width: 100%; height: 100%;	
			-webkit-transition: opacity 500ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000), -webkit-transform 1000ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			-moz-transition: opacity 500ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000), -moz-transform 1000ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: opacity 500ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000), transform 1000ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			-webkit-backface-visibility: hidden; backface-visibility: hidden;
			}
			.intro .wrapper {
				position: relative;
				max-width: 1520px; height: 100%;
				margin: 0px auto;
				}
				section.intro-holder .holder {
					position: absolute; left: 0px; top: 0px;
					width: 100%; max-width: 1520px; height: 100%;
					padding: 0px;
					background-clip: content-box;
					border: 60px solid transparent;
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
					}
			.intro-holder.initialized {opacity: 1;}
			body.inactive-intro .intro * {
	    		animation-play-state: paused !important;
				}
			.intro-holder:before,
			.intro-holder:after {
				content: "";
				position: absolute; left: 0px; top: 0%;
				height: 100%; width: 100%;
				background: #46474d;
				-webkit-transform: translateY(100%) translateZ(0px);
				-moz-transform: translateY(100%) translateZ(0px);
				transform: translateY(100%) translateZ(0px);
				-webkit-transition: -webkit-transform 750ms 0ms cubic-bezier(0.895, 0.030, 0.685, 0.220);
				-moz-transition: -moz-transform 750ms 0ms cubic-bezier(0.895, 0.030, 0.685, 0.220);
				transition: transform 750ms 0ms cubic-bezier(0.895, 0.030, 0.685, 0.220);
				-webkit-backface-visibility: hidden; backface-visibility: hidden;
				}
			.intro-holder:after {
				background: #16171a;
				-webkit-transition-duration: 1000ms;
				-moz-transition-duration: 1000ms;
				transition-duration: 1000ms;
				}
				.inactive-intro .intro-holder:before,
				.inactive-intro .intro-holder:after {
					-webkit-transform: translateY(0%) translateZ(0px);
					-moz-transform: translateY(0%) translateZ(0px);
					transform: translateY(0%) translateZ(0px);
					}
				.active-intro .intro-holder:before {
					z-index: 99;
					-webkit-transition: all 1000ms 0ms cubic-bezier(0.895, 0.030, 0.685, 0.220);
					-moz-transition: all 1000ms 0ms cubic-bezier(0.895, 0.030, 0.685, 0.220);
					transition: all 1000ms 0ms cubic-bezier(0.895, 0.030, 0.685, 0.220);
					}
				.active-intro .intro-holder:after {
					-webkit-transition: all 750ms 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
					-moz-transition: all 750ms 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
					transition: all 750ms 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
					}			
		.inactive-intro .intro-holder.initialized .intro {
			opacity: 0;
			-webkit-transform: scale(0.9) translateZ(0px); 
			-moz-transform: scale(0.9) translateZ(0px); 
			transform: scale(0.9) translateZ(0px); 
			-webkit-transition: opacity 500ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000), -webkit-transform 1000ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			-moz-transition: opacity 500ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000), -moz-transform 1000ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: opacity 500ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000), transform 1000ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			}
		.active-intro .intro-holder.initialized .intro {
			-webkit-transition: opacity 1000ms 1250ms cubic-bezier(0.645, 0.045, 0.355, 1.000), -webkit-transform 1000ms 1250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			-moz-transition: opacity 1000ms 1250ms cubic-bezier(0.645, 0.045, 0.355, 1.000), -moz-transform 1000ms 1250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: opacity 1000ms 1250ms cubic-bezier(0.645, 0.045, 0.355, 1.000), transform 1000ms 1250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
			}

	/*
	+ Wave */

		.wave-holder {
			position: absolute; left: 0px; top: 0px; z-index: 3; opacity: 0;
			width: 100%; height: 100%;
			-webkit-transform: translateY(400px) translateZ(0px);
			-moz-transform: translateY(400px) translateZ(0px);
			transform: translateY(400px) translateZ(0px);
			-webkit-transition: all 1000ms ease-in-out;
			-moz-transition: all 1000ms ease-in-out;
			transition: all 1000ms ease-in-out;
			-webkit-backface-visibility: hidden; backface-visibility: hidden;
			}
			@-webkit-keyframes waveTransformAnim { 0% { -webkit-transform: translateX(0); } 100% { -webkit-transform: translateY(100px); } }
			@-moz-keyframes waveTransformAnim { 0% { -moz-transform: translateX(0); } 100% { -moz-transform: translateY(100px); } }
			@keyframes waveTransformAnim { 0% { transform: translateX(0); } 100% { transform: translateY(100px); } }
			.wave {
				position: absolute; left: 0px; top: 0px;
				width: 100%; height: 100%;
				-webkit-animation: waveTransformAnim 60s 2000ms forwards cubic-bezier(0.215, 0.610, 0.355, 1.000);
				-moz-animation: waveTransformAnim 60s 2000ms forwards cubic-bezier(0.215, 0.610, 0.355, 1.000);
				animation: waveTransformAnim 60s 2000ms forwards cubic-bezier(0.215, 0.610, 0.355, 1.000);
				-webkit-backface-visibility: hidden; backface-visibility: hidden;
				}
			.intro-holder.initialized .wave-holder {
				opacity: 0.75;
				-webkit-transform: translateY(0px) translateZ(0px);
				-moz-transform: translateY(0px) translateZ(0px);
				transform: translateY(0px) translateZ(0px);
				}
			.tablet.portrait .intro-holder.initialized .wave-holder {opacity: 1;}
			.inactive-intro .intro-holder.initialized .wave-holder {
				-webkit-transform: scale(1.2) translateZ(0px); 
				-moz-transform: scale(1.2) translateZ(0px); 
				transform: scale(1.2) translateZ(0px); 
				-webkit-transition: -webkit-transform 1000ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				-moz-transition: -moz-transform 1000ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				transition: transform 1000ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				}
			.active-intro .intro-holder.initialized .wave-holder {
				-webkit-transform: scale(1) translateZ(0px); 
				-moz-transform: scale(1) translateZ(0px); 
				transform: scale(1) translateZ(0px); 
				-webkit-transition: -webkit-transform 5000ms 1250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				-moz-transition: -moz-transform 5000ms 1250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				transition: transform 5000ms 1250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				}

	/*
	+ Background */

		.intro .bgr-wrapper {
			position: absolute; left: 0px; top: 0px; overflow: hidden; z-index: 2;
			width: 0%; height: 100%;
			-webkit-backface-visibility: hidden; backface-visibility: hidden;
			}
			.ie-edge .intro .bgr-wrapper {right: 0px; left: auto;}
			.intro .bgr-holder {
				position: absolute; left: 0px; top: 0px;
				width: 1400px; height: 100%;
				-webkit-backface-visibility: hidden; backface-visibility: hidden;
				}		
				.ie-edge .intro .bgr-holder  {left: auto; right: 0px;}
				.intro .bgr {
					position: absolute; left: 0px; top: -10px; bottom: -10px;
					width: 100%;
					-webkit-backface-visibility: hidden; backface-visibility: hidden;
					}
					.intro .bgr span {
						position: absolute; right: 0px; top: 0px; display: block;
						width: 100%; height: 100%;
						background: url(../img/bgr-intro.jpg) right center no-repeat; background-size: cover;
						-webkit-backface-visibility: hidden; backface-visibility: hidden;
						}
						@-webkit-keyframes bgrMovingAnim { 0% { -webkit-transform: translateX(0); } 100% { -webkit-transform: translateX(calc(100% - 400px)); } }
						@-moz-keyframes bgrMovingAnim { 0% { -moz-transform: translateX(0); } 100% { -moz-transform: translateX(calc(100% - 400px)); } }
						@keyframes bgrMovingAnim { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100% - 400px)); } }
						.intro-holder.initialized .bgr span {
							-webkit-animation: bgrMovingAnim 60s 2000ms forwards cubic-bezier(0.215, 0.610, 0.355, 1.000);
							-moz-animation: bgrMovingAnim 60s 2000ms forwards cubic-bezier(0.215, 0.610, 0.355, 1.000);
							animation: bgrMovingAnim 60s 2000ms forwards cubic-bezier(0.215, 0.610, 0.355, 1.000);
							}
						@keyframes bgrMovingAnimIE { 0% { transform: translateX(0) translateX(0); } 100% { transform: translateX(100%) translateX(-400px); } }
						.ie11 .intro-holder.initialized .bgr span { animation: bgrMovingAnimIE 60s 2000ms forwards cubic-bezier(0.215, 0.610, 0.355, 1.000); }
					@-webkit-keyframes bgrWaveAnim { 
						0% { -webkit-transform: translateX(-0px) translateY(-8px) rotate(0deg); } 
						50% { -webkit-transform: translateX(0px) translateY(8px) rotate(-0deg);} 
						100% { -webkit-transform: translateX(-0px) translateY(-8px) rotate(0deg);} 
						}	
					@-moz-keyframes bgrWaveAnim { 
						0% { -moz-transform: translateX(-0px) translateY(-8px) rotate(0deg); } 
						50% { -moz-transform: translateX(0px) translateY(8px) rotate(-0deg);} 
						100% { -moz-transform: translateX(-0px) translateY(-8px) rotate(0deg);} 
						}	
					@keyframes bgrWaveAnim { 
						0% { transform: translateX(-0px) translateY(-8px) rotate(0deg); } 
						50% { transform: translateX(0px) translateY(8px) rotate(-0deg);} 
						100% { transform: translateX(-0px) translateY(-8px) rotate(0deg);} 
						}	
					.intro-holder.initialized .bgr {
						-webkit-animation: bgrWaveAnim 4s 1000ms infinite ease-in-out;
						-moz-animation: bgrWaveAnim 4s 1000ms infinite ease-in-out;
						animation: bgrWaveAnim 4s 1000ms infinite ease-in-out;
						} 
				@-webkit-keyframes changeOrigin { 
					0% {left: 0px; right: auto; -webkit-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); }
					50% {left: 0px; right: auto; -webkit-animation-timing-function: linear; }
					50.001% {left: auto; right: 0px; -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
					100% {left: auto; right: 0px; -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
					}
				@-moz-keyframes changeOrigin { 
					0% {left: 0px; right: auto; -moz-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); }
					50% {left: 0px; right: auto; -moz-animation-timing-function: linear; }
					50.001% {left: auto; right: 0px; -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
					100% {left: auto; right: 0px; -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
					}
				@keyframes changeOrigin { 
					0% {left: 0px; right: auto; -webkit-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); }
					50% {left: 0px; right: auto; -webkit-animation-timing-function: linear; }
					50.001% {left: auto; right: 0px; -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
					100% {left: auto; right: 0px; -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
					}
				.intro-holder.initialized .bgr-holder {
					-webkit-animation: changeOrigin 1.5s 1000ms forwards;
					-moz-animation: changeOrigin 1.5s 1000ms forwards;
					animation: changeOrigin 1.5s 1000ms forwards;
					}
			.intro .bgr-wrapper:before,
			.intro .bgr-wrapper:after {
				content: "";
				display: block; position: absolute; left: 0px; top: 0px; z-index: 2;
				width: 100%; height: 100%;
				background: linear-gradient(to right, rgba(22,23,26,0.5) 0%, rgba(0,0,0,0) 100%);
				-webkit-transform: scale(1.02);
				-moz-transform: scale(1.02);
				transform: scale(1.02);
				}
			.intro .bgr-wrapper:before {background: linear-gradient(to top, rgba(22,23,26,0.5) 0%, rgba(0,0,0,0) 100%); }
			@-webkit-keyframes bgrRevealAnim {
				0% { left: 0px; right: auto; width: 0px; -webkit-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); }
				50% { left: 0px; right: auto; width: 100%; -webkit-animation-timing-function: linear; }
				50.001% { left: auto; right: 0px; width: 100%; -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
				100% { left: auto; right: 0px; width: 400px; -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
				}	
			@-moz-keyframes bgrRevealAnim {
				0% { left: 0px; right: auto; width: 0px; -moz-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); }
				50% { left: 0px; right: auto; width: 100%; -moz-animation-timing-function: linear; }
				50.001% { left: auto; right: 0px; width: 100%; -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
				100% { left: auto; right: 0px; width: 400px; -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
				}	
			@keyframes bgrRevealAnim {
				0% { left: 0px; right: auto; width: 0px; animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); }
				50% { left: 0px; right: auto; width: 100%; animation-timing-function: linear; }
				50.001% { left: auto; right: 0px; width: 100%; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
				100% { left: auto; right: 0px; width: 400px; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
				}	
			.intro-holder.initialized .bgr-wrapper {
				-webkit-animation: bgrRevealAnim 1.5s 1000ms forwards;
				-moz-animation: bgrRevealAnim 1.5s 1000ms forwards;
				animation: bgrRevealAnim 1.5s 1000ms forwards;
				}
			.intro-holder.initialized .bgr-wrapper {
				-webkit-transition: -webkit-transform 750ms 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);		
				-moz-transition: -moz-transform 750ms 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);		
				transition: transform 750ms 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);		
				}
			.inactive-intro .intro-holder.initialized .bgr-wrapper {
				-webkit-transform: translateX(0%) translateY(-80%);
				-moz-transform: translateX(0%) translateY(-80%);
				transform: translateX(0%) translateY(-80%);
				}

	/*
	+ Crew */

		.crew-wrapper {
			position: absolute; left: 0px; top: 0px; z-index: 4; overflow: hidden;
			width: 100%; height: 100%;
			}
			.crew-holder {
				position: absolute; left: 0px; top: 0px;
				width: 100%; height: 100%;
				-webkit-transform: translateX(55%) translateY(-20%);
				-moz-transform: translateX(55%) translateY(-20%);
				transform: translateX(55%) translateY(-20%);
				-webkit-transition: all 1250ms 1350ms cubic-bezier(0.645, 0.045, 0.355, 1.000);				
				-moz-transition: all 1250ms 1350ms cubic-bezier(0.645, 0.045, 0.355, 1.000);				
				transition: all 1250ms 1350ms cubic-bezier(0.645, 0.045, 0.355, 1.000);				
				}
				@-webkit-keyframes crewWaveAnim { 
					0% { -webkit-transform: translateX(-0px) translateY(-15px) translateZ(0px) rotate(0deg); } 
					50% { -webkit-transform: translateX(0px) translateY(15px) translateZ(0px) rotate(-2deg); } 
					100% { -webkit-transform: translateX(-0px) translateY(-15px) translateZ(0px) rotate(0deg); } 
					}
				@-moz-keyframes crewWaveAnim { 
					0% { -moz-transform: translateX(-0px) translateY(-15px) translateZ(0px) rotate(0deg); } 
					50% { -moz-transform: translateX(0px) translateY(15px) translateZ(0px) rotate(-2deg); } 
					100% { -moz-transform: translateX(-0px) translateY(-15px) translateZ(0px) rotate(0deg); } 
					}
				@keyframes crewWaveAnim { 
					0% { transform: translateX(-0px) translateY(-15px) translateZ(0px) rotate(0deg); } 
					50% { transform: translateX(0px) translateY(15px) translateZ(0px) rotate(-2deg); } 
					100% { transform: translateX(-0px) translateY(-15px) translateZ(0px) rotate(0deg); } 
					}
				.crew {
					position: absolute; right: 0px; top: 0px;
					width: 100%; height: 100%;
					background: url(../img/bgr-crew.png) right center no-repeat; background-size: auto 100%;
					-webkit-animation: crewWaveAnim 5s infinite ease-in-out;
					-moz-animation: crewWaveAnim 5s infinite ease-in-out;
					animation: crewWaveAnim 5s infinite ease-in-out;
					transform-origin: right bottom; -webkit-transform-origin: right bottom;
					-webkit-backface-visibility: hidden; backface-visibility: hidden;
					outline: none;
					}
				.intro-holder.initialized .crew-holder {
					-webkit-transform: translateX(0%) translateY(0%);
					-moz-transform: translateX(0%) translateY(0%);
					transform: translateX(0%) translateY(0%);
					}	
			.inactive-intro .intro-holder.initialized .crew-wrapper {
				-webkit-transition: -webkit-transform 750ms 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);	
				-moz-transition: -moz-transform 750ms 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);	
				transition: transform 750ms 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000);	
				-webkit-transform: translateX(0%) translateY(-80%);
				-moz-transform: translateX(0%) translateY(-80%);
				transform: translateX(0%) translateY(-80%);
				}

	/*
	+ Mask */

		.intro .mask-holder {
			position: absolute; left: 0px; top: 0px; overflow: hidden; z-index: 5;
			width: 100%; height: 100%;
			}
			.ie-edge .intro .mask-holder {left: auto; right: 0px;}
			.intro .mask {
				position: absolute; left: 0px; top: 0px;
				width: 0px; height: 100%;
				transition: all 1000ms 0ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				background: #46474d;
				-webkit-backface-visibility: hidden; backface-visibility; hidden;
				}
				.ie-edge .intro .mask {left: auto; right: 0px;}
				@-webkit-keyframes blueMaskRevealAnim { 
					0% { left: 0px; right: auto; width: 0px; -webkit-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); } 
					50% { left: 0px; right: auto; width: 100%; -webkit-animation-timing-function: linear; } 
					50.001% { left: auto; right: 0px; width: 100%; -webkit-transform: translateX(50%); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
					99.9% { left: auto; right: 0px; width: 0; -webkit-transform: translateX(110%); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
					100% {left: auto; right: 0px; width: 0; -webkit-transform: translateX(110%); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
					}	
				@-moz-keyframes blueMaskRevealAnim { 
					0% { left: 0px; right: auto; width: 0px; -moz-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); } 
					50% { left: 0px; right: auto; width: 100%; -moz-animation-timing-function: linear; } 
					50.001% { left: auto; right: 0px; width: 100%; -moz-transform: translateX(50%); -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
					99.9% { left: auto; right: 0px; width: 0; -moz-transform: translateX(110%); -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
					100% {left: auto; right: 0px; width: 0; -moz-transform: translateX(110%); -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
					}	
				@keyframes blueMaskRevealAnim { 
					0% { left: 0px; right: auto; width: 0px; animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); } 
					50% { left: 0px; right: auto; width: 100%; animation-timing-function: linear; } 
					50.001% { left: auto; right: 0px; width: 100%; transform: translateX(50%); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
					99.9% { left: auto; right: 0px; width: 0; transform: translateX(110%); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
					100% {left: auto; right: 0px; width: 0; transform: translateX(110%); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
					}	
				.intro-holder.initialized .mask {
					-webkit-animation: blueMaskRevealAnim 1.5s 1000ms forwards;
					-moz-animation: blueMaskRevealAnim 1.5s 1000ms forwards;
					animation: blueMaskRevealAnim 1.5s 1000ms forwards;
					}
						
	/*
	+ Article */

		.intro article {
			position: absolute; bottom: 50%; left: 0px; opacity: 0;
			transform: translateX(-10%) translateY(82px) translateZ(0px);
			transition: all 1200ms 1750ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
			-webkit-backface-visibility: hidden; backface-visibility; hidden;
			}
			h1 {
				height: 22px; width: 86px;
				margin-bottom: 53px;
				text-indent: -9999px;
				background: url(../img/bgr-logo-intro.png) left top no-repeat; background-size: 100% 100%;
				}
				.error404 h1,
				.no-webgl h1 {
					display: block !important; 
					margin: 0px auto;
					-webkit-transform: translateY(50px);
					-moz-transform: translateY(50px);
					transform: translateY(50px);
					}
					.mobile .error404 h1,
					.mobile .no-webgl h1 { 
						-webkit-transform: translateY(30px);
						-moz-transform: translateY(30px);
						transform: translateY(30px);
						}
			.intro p {
				margin-bottom: 4px;
				font-weight: 100; color: rgba(255,255,255,0.5); font-size: 35px; line-height: normal;
				-webkit-backface-visibility: hidden; backface-visibility: hidden;
				}
				/*.inactive-intro .intro-holder.initialized p {
					transform: translateY(-300px);
					transition: transform 750ms 0ms cubic-bezier(0.895, 0.030, 0.685, 0.220);
					}	*/
			.intro strong {
				float: left; clear: left; position: relative; 
				height: 54px;
				margin-bottom: 58px;
				font-size: 50px; line-height: 54px;
				-webkit-backface-visibility: hidden; backface-visibility: hidden;
				}
				.intro strong i {
					float: left; position: relative; z-index: 2; 
					font-style: normal; text-shadow: 4px 2px #16171a, -4px 2px #16171a;
					}
					.intro strong i sup {font-size: 32px;}
				.intro strong:after {
					content: "";
					display: block; position: absolute; left: 0px; bottom: 0px;
					width: 100%; height: 2px;
					background: rgba(255,255,255,0.25);
					background-clip: padding-box;
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
					}
			.mouse {
				float: left; clear: left; 
				font-size: 11px; text-transform: uppercase; font-weight: 400; line-height: 24px;
				}
				.mouse i {
					float: left; position: relative;
					height: 24px; width: 14px;
					border-radius: 100px;
  					box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
					}
					.mouse i:before,
					.mouse i:after {
						content: '';
  						position: absolute; left: 6px; top: 10px; opacity: 0;
						height: 4px; width: 2px;
						background: #ffffff;
						border-radius: 100px;
						-webkit-animation: mouse-wheel 1.5s ease-in-out infinite;
						-moz-animation: mouse-wheel 1.5s ease-in-out infinite;
						animation: mouse-wheel 1.5s ease-in-out infinite;
						}
					.mouse i:after {
						-webkit-animation-delay: -0.75s;
						-moz-animation-delay: -0.75s;
						animation-delay: -0.75s;
						}
						@-webkit-keyframes mouse-wheel {
  							0% { -webkit-transform: translateY(-5px); } 
	  						50% { -webkit-transform: translateY(0); opacity: 1; }
	  						100% { -webkit-transform: translateY(7px); }
							}	
						@-moz-keyframes mouse-wheel {
  							0% { -moz-transform: translateY(-5px); } 
	  						50% { -moz-transform: translateY(0); opacity: 1; }
	  						100% { -moz-transform: translateY(7px); }
							}	
						@keyframes mouse-wheel {
  							0% { transform: translateY(-5px); } 
	  						50% { transform: translateY(0); opacity: 1; }
	  						100% { transform: translateY(7px); }
							}	
					.about .mouse {
						position: absolute; left: 50%; top: 60px; opacity: 0;
						-webkit-transform: translateX(-50%) translateY(-60px);
						-moz-transform: translateX(-50%) translateY(-60px);
						transform: translateX(-50%) translateY(-60px);
						-webkit-transition: all 250ms ease-in-out;
						moz-transition: all 250ms ease-in-out;
						transition: all 250ms ease-in-out;
						}
						.about .mouse i:before,
						.about .mouse i:after {
							-webkit-animation: about-mouse-wheel 1.5s ease-in-out infinite;
							-moz-animation: about-mouse-wheel 1.5s ease-in-out infinite;
							animation: about-mouse-wheel 1.5s ease-in-out infinite;
							}
						.about .mouse i:after {
							-webkit-animation-delay: -0.75s;
							-moz-animation-delay: -0.75s;
							animation-delay: -0.75s;
							}
							@-webkit-keyframes about-mouse-wheel {
  								0% { -webkit-transform: translateY(7px); } 
	  							50% { -webkit-transform: translateY(0); opacity: 1; }
	  							100% { -webkit-transform: translateY(-5px); }
								}	
							@-moz-keyframes about-mouse-wheel {
  								0% { -moz-transform: translateY(7px); } 
	  							50% { -moz-transform: translateY(0); opacity: 1; }
	  							100% { -moz-transform: translateY(-5px); }
								}	
							@keyframes about-mouse-wheel {
  								0% { transform: translateY(7px); } 
	  							50% { transform: translateY(0); opacity: 1; }
	  							100% { transform: translateY(-5px); }
								}	
							.about .mouse.visible {
								opacity: 1; 
								-webkit-transform: translateX(-50%) translateY(0px);
								-moz-transform: translateX(-50%) translateY(0px);
								transform: translateX(-50%) translateY(0px);
								}
			.intro-holder.initialized article  {
				opacity: 1;
				-webkit-transform: translateX(0%) translateY(82px) translateZ(0px);
				-moz-transform: translateX(0%) translateY(82px) translateZ(0px);
				transform: translateX(0%) translateY(82px) translateZ(0px);
				}
			.inactive-intro .intro-holder.initialized article {
				-webkit-transform: translateY(-300px);
				-moz-transform: translateY(-300px);
				transform: translateY(-300px);
				-webkit-transition: -webkit-transform 550ms 0ms cubic-bezier(0.895, 0.030, 0.685, 0.220);
				-moz-transition: -moz-transform 550ms 0ms cubic-bezier(0.895, 0.030, 0.685, 0.220);
				transition: transform 550ms 0ms cubic-bezier(0.895, 0.030, 0.685, 0.220);
				}	
			.active-intro .intro-holder.initialized article {-webkit-transition: none; -moz-transition: none; transition: none;}

/*
= ABOUT
------------------------------------------------------------------------------------- */

	.about {padding: 300px 0;}

	/*
	+ Team */

		.team {position: relative; z-index: 2; clear: both;}
			.members {position: relative; float: left; width: 50%;}
				.team-slider {
					position: relative; float: right; overflow: hidden; z-index: -1;
					width: 900px;					
					}		
					.team-slider div {
						position: absolute; left: 0px; top: 0px; bottom: 0px; z-index: 2;
						width: 100%;
						-webkit-transition: -webkit-transform 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
						-moz-transition: -moz-transform 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
						transition: transform 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
						-webkit-backface-visibility: hidden; backface-visibility: hidden;
						}
						.team-slider div span {
							display: block; position: absolute; left: 0px; top: -200px; bottom: 0px;
							width: 100%;
							background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom;
							}
						.team-slider div.gone-right {
							-webkit-transform: translateX(-100%) translateZ(0px);
							-moz-transform: translateX(-100%) translateZ(0px);
							transform: translateX(-100%) translateZ(0px);
							}
							.desktop .team-slider div.gone-right {
								-webkit-transform: translateX(100%) translateZ(0px);
								-moz-transform: translateX(100%) translateZ(0px);
								transform: translateX(100%) translateZ(0px);
								}
						.team-slider div.gone-left {
							-webkit-transform: translateX(100%) translateZ(0px);
							-moz-transform: translateX(100%) translateZ(0px);
							transform: translateX(100%) translateZ(0px);
							}
							.desktop .team-slider div.gone-left {
								-webkit-transform: translateX(-100%) translateZ(0px);
								-moz-transform: translateX(-100%) translateZ(0px);
								transform: translateX(-100%) translateZ(0px);
								}
						.team-slider div:first-child {
							-webkit-transition: -webkit-transform 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
							-moz-transition: -moz-transform 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
							transition: transform 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
							}
						.team-slider div:last-child {
							z-index: 1;
							-webkit-transform: translateX(20%) translateZ(0px);
							-moz-transform: translateX(20%) translateZ(0px);
							transform: translateX(20%) translateZ(0px);
							}
							.desktop .team-slider div:last-child {
								-webkit-transform: translateX(-20%) translateZ(0px);
								-moz-transform: translateX(-20%) translateZ(0px);
								transform: translateX(-20%) translateZ(0px);
								}
						.team-slider.left div:last-child {
							z-index: 1;
							-webkit-transform: translateX(-20%) translateZ(0px);
							-moz-transform: translateX(-20%) translateZ(0px);
							transform: translateX(-20%) translateZ(0px);
							}
							.desktop .team-slider.left div:last-child {
								z-index: 1;
								-webkit-transform: translateX(20%) translateZ(0px);
								-moz-transform: translateX(20%) translateZ(0px);
								transform: translateX(20%) translateZ(0px);
								}
						.team-slider div.in {
							-webkit-transform: translateY(0%) translateZ(0px) !important;
							-moz-transform: translateY(0%) translateZ(0px) !important;
							transform: translateY(0%) translateZ(0px) !important;
							}
				.team-slider-imgs {display: none;}						
				.controls {
					position: absolute; right: -30px; bottom: -30px; left: -30px; z-index: 999;
					height: 60px;
					background: #16171a;
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
					}
					.team .controls {border: 4px solid #212226;}
					.team-slider-nav {
						position:absolute; left: 30px; top: 50%; overflow: hidden;
						-webkit-transform: translateY(-50%);
						-moz-transform: translateY(-50%);
						transform: translateY(-50%);
						}
						.team-slider-nav li {
							float: left;
							margin-right: 10px;
							}
							.team-slider-nav li a {
								display: block;
								width: 6px; height: 6px;
								text-indent: -9999px;
								background: rgba(255, 255, 255, 0.15);
								border-radius: 50%;
								outline: none;
								-webkit-transition: all 300ms ease-in-out;
								-moz-transition: all 300ms ease-in-out;
								transition: all 300ms ease-in-out;
								}
								.team-slider-nav li.active a {background: #ffffff;}
						.team-slider-nav li:last-child {margin-bottom: 0px;}
					.controls .previous {
						position: absolute; right: 60px; top: 50%;
						width: 30px; height: 30px;
						-webkit-transform: translateY(-50%);
						-moz-transform: translateY(-50%);
						transform: translateY(-50%);
						}
						.controls .previous:before {
							content: "";
							display: block; position: absolute; left: 0px; top: 0px; 
							width: 100%; height: 100%;
							border: 2px solid rgba(255,255,255,0.25); border-radius: 50%;
							-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;									
							}
						.controls .previous:after {
							content: "";
							display: block; position: absolute; left: 50%; top: 50%;
							width: 0; height: 0;
							border-top: 4px solid transparent; border-right: 6px solid rgba(255,255,255,0.25); border-bottom: 4px solid transparent;
							-webkit-transform: translateX(-4px) translateY(-50%);
							-moz-transform: translateX(-4px) translateY(-50%);
							transform: translateX(-4px) translateY(-50%);
							}
					.controls .next {
						position: absolute; right: 15px; top: 50%;
						width: 30px; height: 30px;
						-webkit-transform: translateY(-50%);
						-moz-transform: translateY(-50%);
						transform: translateY(-50%);
						}
						.controls .next canvas {
							positiob: absolute; display: block; left: 0px; top: 0px;
							width: 100%; height: 100%;
							-webkit-backface-visibility: hidden; backface-visibility: hidden;
							-webkit-transform: translateZ(0px);
							-moz-transform: translateZ(0px);
							transform: translateZ(0px);
							}
						.controls .next:before {
							content: "";
							display: block; position: absolute; left: 0px; top: 0px; 
							width: 100%; height: 100%;
							border: 2px solid rgba(255,255,255,0.25); border-radius: 50%;
							-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
							}
						.controls .next:after {
							content: "";
							display: block; position: absolute; left: 50%; top: 50%; 
							width: 0; height: 0;
							border-top: 4px solid transparent; border-left: 6px solid #ffffff; border-bottom: 4px solid transparent;
							-webkit-transform: translateX(-2px) translateY(-50%);								
							-moz-transform: translateX(-2px) translateY(-50%);								
							transform: translateX(-2px) translateY(-50%);								
							}
			.team article {
				float: left; 
				width: 50%;
				padding: 20px 0 0 60px;
				-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
				}

	/*
	+ Goal */

		.goal {
			position: relative;
			margin: 0px auto;
			}
			.goal article {
				position: absolute; right: 50%; top: 50%;
				width: 50%;
				padding-right: 100px;
				-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
				-webkit-transform: translateY(-18px);
				-moz-transform: translateY(-18px);
				transform: translateY(-18px);
				}
			.goal ul {float: right; width: 50%;}
				.goal ul li {
					float: left; position:relative;
					width: 50%;
					padding: 60px 60px 30px;
					text-transform: uppercase;
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
					}
					.goal ul li h6 {
						position: absolute; left: 60px; top: 14px;
						color: rgba(255,255,255,0.5); font-size: 10px;
						}
					.goal ul li h5 {font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 400; letter-spacing: 1px;}
						.goal ul li h5 strong {
							display: block; 
							height: 46px;
							margin-bottom: 5px;
							color: #ffffff; font-size: 40px; font-weight: 700; letter-spacing: 0px; line-height: 46px;
							}
					.goal ul li:before,
					.goal ul li:after {
						content: "";
						position: absolute; left: 0px; top: 0px; opacity: 0;
						width: 0px; height: 0px;
						border: 4px solid transparent;
						-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
						-webkit-backface-visibility: hidden; backface-visibility: hidden;
						}
						.goal ul li:nth-child(2):before,
						.goal ul li:nth-child(2):after,
						.goal ul li:nth-child(3):before,
						.goal ul li:nth-child(3):after {display: none;}
					.goal ul li:first-child:before {
						-webkit-transition: opacity 0.01s ease-in, width 0.25s ease-in, height 0.25s ease-in 0.25s;
						-moz-transition: opacity 0.01s ease-in, width 0.25s ease-in, height 0.25s ease-in 0.25s;
						transition: opacity 0.01s ease-in, width 0.25s ease-in, height 0.25s ease-in 0.25s;
						}
					.goal ul li:first-child:after {
						-webkit-transition: opacity 0.01s ease-in, height 0.25s linear, width 0.25s linear 0.25s;
						-moz-transition: opacity 0.01s ease-in, height 0.25s linear, width 0.25s linear 0.25s;
						transition: opacity 0.01s ease-in, height 0.25s linear, width 0.25s linear 0.25s;
						}
					.goal ul li:last-child:before {
						-webkit-transition: opacity 0.01s linear 0.5s, width 0.25s linear 0.5s, height 0.25s linear 0.75s;
						-moz-transition: opacity 0.01s linear 0.5s, width 0.25s linear 0.5s, height 0.25s linear 0.75s;
						transition: opacity 0.01s linear 0.5s, width 0.25s linear 0.5s, height 0.25s linear 0.75s;
						}
					.goal ul li:last-child:after {
						-webkit-transition: opacity 0.01s linear 0.5s, height 0.25s ease-out 0.5s, width 0.25s ease-out 0.75s;
						-moz-transition: opacity 0.01s linear 0.5s, height 0.25s ease-out 0.5s, width 0.25s ease-out 0.75s;
						transition: opacity 0.01s linear 0.5s, height 0.25s ease-out 0.5s, width 0.25s ease-out 0.75s;
						}
						.goal .in-view ul li:before,
						.goal .in-view ul li:after {width: 100%; height: 100%; opacity: 1;}
						.goal .in-view ul li:before {border-top-color: #212226; border-right-color: #212226;}
						.goal .in-view ul li:after {border-bottom-color: #212226; border-left-color: #212226;}
					.goal ul li:nth-child(3) {
						clear: left;
						-webkit-transform: translateY(-4px);
						-moz-transform: translateY(-4px);
						transform: translateY(-4px);
						}
					.goal ul li:nth-child(2) {
						-webkit-transform: translateX(-4px);
						-moz-transform: translateX(-4px);
						transform: translateX(-4px);
						}
					.goal ul li:last-child {
						-webkit-transform: translateX(-4px) translateY(-4px);
						-moz-transform: translateX(-4px) translateY(-4px);
						transform: translateX(-4px) translateY(-4px);
						}

/*
= SERVICES
------------------------------------------------------------------------------------- */

	/*
	+ Graphics */

		.graphics {
			position: absolute; bottom: -100px; left: -360px;
			width: 526px; height: 441px;
			}
			.graphics span {
				position: absolute; left: 0px; top: 0px;
				width: 100%; height: 100%;
				background-position: center; background-repeat: no-repeat; background-size: 100% 100%;
				}
				.graphics .mouse {background-image: url(../img/mouse.png);}
				.graphics .imac {background-image: url(../img/imac.png);}
				.graphics .keyboard {background-image: url(../img/keyboard.png);}
				.graphics .watch {background-image: url(../img/watch.png);}
				.graphics .iphone-back {background-image: url(../img/iphone-back.png);}
				.graphics .iphone-front {background-image: url(../img/iphone-front.png);}
				.graphics .macbook {background-image: url(../img/macbook.png);}
				.mobile .graphics .mouse {background-image: url(../img/mouse-mobile.png);}
				.mobile .graphics .imac {background-image: url(../img/imac-mobile.png);}
				.mobile .graphics .keyboard {background-image: url(../img/keyboard-mobile.png);}
				.mobile .graphics .watch {background-image: url(../img/watch-mobile.png);}
				.mobile .graphics .iphone-back {background-image: url(../img/iphone-back-mobile.png);}
				.mobile .graphics .iphone-front {background-image: url(../img/iphone-front-mobile.png);}
				.mobile .graphics .macbook {background-image: url(../img/macbook-mobile.png);}
			.development-graphics {
				bottom: -60px; right: -498px; left: auto;
				width: 394px; height: 322px;
				}

	/*
	+ Content */

		.services {
			overflow: hidden; z-index: 3;
		    -webkit-transform: translateY(1px);
		    -moz-transform: translateY(1px);
		    transform: translateY(1px);
			}
			section.services .holder {max-width: 680px; padding: 0px; margin: 0px auto 100px;}
				.services article {
					float: left; position: relative; z-index: 3;
					width: 50%;
					padding: 25px 0 20px 10px;
					color: #000000;
					background: #ffffff;
					box-shadow: 11px 11px 60px 0px rgba(0, 0, 0, 0.1);
					}			
					.services article h4 {
						margin-bottom: 25px; padding: 0 30px 0 20px;
						font-size: 30px; color: #16171a; line-height: 35px; font-weight: 300;
						}
						.services article h4 strong {display: block; color: #16171a; font-weight: 300;}
					.services ul {padding: 0 30px 0 20px;}				
						.services article ul li {line-height: 40px; font-size: 15px; color: #16171a;}
					.services article.design {z-index: 4; margin-right: -10px;}
					.services article.development {margin: 40px 0 0 -10px;}	
						.services article.development h4,
						.services article.development ul {padding: 0 30px 0 40px;}
			.services:before {
				content: "";
				display: block; position: absolute; left: 0px; bottom: 0px;
				width: 50%; height: 240px;
				background: #f6f6f6;
				}

/*
= PROJECTS
------------------------------------------------------------------------------------- */

	.projects {
		z-index: 2;
		margin-top: -100px;
		background: #f6f6f6; 
		box-shadow: -20px 40px 80px 0 rgba(0,0,0,0.75);
		}
		section.projects .holder {max-width: 600px; padding: 268px 860px 300px 60px;}
			.projects hgroup {
				height: 74px;
				-webkit-transform: translateY(-82px);
				-moz-transform: translateY(-82px);
				transform: translateY(-82px);
				}
				.projects hgroup h2 {color: #a1a1a1;}
				.projects hgroup h4 strong {color: #16171a; text-shadow: 4px 2px #f6f6f6, -4px 2px #f6f6f6; font-weight: 500px;}
					.projects hgroup h4 strong:before {background: rgba(246, 246, 246, 0.75);}
				.projects hgroup h4:after {background-color: rgba(0,0,0,0.25);}
			.projects article {
				clear: left; 
				-webkit-transform: translateY(-82px);
				-moz-transform: translateY(-82px);
				transform: translateY(-82px);
				}
				.projects .info-holder {position: relative; height: 218px;}
					.projects .info {
						position: absolute; left: 0px; top: 0px; opacity: 1;
						width: 100%; height: 100%;
						background: none;
						transition: all 750ms 250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
						-webkit-box-sizing: border-box;	-moz-box-sizing: border-box; box-sizing: border-box;	
						-webkit-transform: translateY(0px);
						-moz-transform: translateY(0px);
						transform: translateY(0px);
						-webkit-backface-visibility: hidden; backface-visibility: hidden;
						}
						.projects article h4 {
							margin-bottom: 2px;
							font-size: 20px; font-weight: 500; color: #16171a; text-transform: none;
							}
						.projects article h5 {
							margin-bottom: 25px;
							font-size: 15px; font-weight: 400; color: #16171a;
							}
						.projects article p {margin-bottom: 30px; color: rgba(22, 23, 26, 0.5);}	
						.projects article ul {overflow: hidden;}
							.projects article ul li {float: left; color: rgba(22, 23, 26, 0.5); font-size: 13px; font-style: italic; font-weight: 300;}
								.projects article ul li:after {content: ",\00a0";}
									.projects article ul li:last-child:after {content: "";}	
						.projects .info.gone-up {
							opacity: 0;
							-webkit-transform: translateY(-80px) translateZ(0px);
							-moz-transform: translateY(-80px) translateZ(0px);
							transform: translateY(-80px) translateZ(0px);
							}
						.projects .info.gone-down {
							opacity: 0;
							-webkit-transform: translateY(80px) translateZ(0px);
							-moz-transform: translateY(80px) translateZ(0px);
							transform: translateY(80px) translateZ(0px);
							}
						.projects .info:last-child {
							opacity: 0;
							-webkit-transform: translateY(80px) translateZ(0px);
							-moz-transform: translateY(80px) translateZ(0px);
							transform: translateY(80px) translateZ(0px);
							}
						.projects .info:only-child {
							opacity: 1;
							-webkit-transform: translateY(0px) translateZ(0px);
							-moz-transform: translateY(0px) translateZ(0px);
							transform: translateY(0px) translateZ(0px);
							}
						.projects .info.in {
							opacity: 1;
							-webkit-transform: translateY(0px) translateZ(0px) !important;
							-moz-transform: translateY(0px) translateZ(0px) !important;
							transform: translateY(0px) translateZ(0px) !important;
							}
						.projects .info:before {
							content: "";
							display: block; position: absolute; right: calc(100% + 20px); top: 22px;
							background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
							-webkit-transform: translateY(-50%);
							-moz-transform: translateY(-50%);
							transform: translateY(-50%);
							}
							.projects .chena:before {width: 26px; height: 29px; background-image: url(../img/logo-chena.png);}
							.projects .vonsay:before {width: 29px; height: 20px; background-image: url(../img/logo-vonsay.png);}
							.projects .tomoson:before {width: 28px; height: 28px; background-image: url(../img/logo-tomoson.png);}
							.projects .classguru:before {width: 24px; height: 35px; background-image: url(../img/logo-classguru.png);}
							.projects .coral:before {width: 26px; height: 26px; background-image: url(../img/logo-coral.png);}
							.projects .minja:before {width: 73px; height: 38px; background-image: url(../img/logo-minja.png);}
			.projects .mask {
				position: absolute; right: 420px; top: 0px; bottom: 0px; z-index: 3; display: block;
				width: 355px;
				background: url(../img/bgr-projects-mask.png) center no-repeat; background-size: 100% auto;
				}
				.projects .ui-holder {
					position: absolute; overflow: hidden; top: 50%;
					width: 324px; height: 183px;
					}
					.projects .mask span {
						position: absolute; left: 0px; top: 0px; z-index: 2; opacity: 1;
						width: 100%; height: 100%;
						background-position: center; background-repeat: no-repeat; background-size: 100%;
						-webkit-transition: all 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 	
						-moz-transition: all 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 	
						transition: all 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 	
						-webkit-backface-visibility: hidden; backface-visibility: hidden;
						}
						.projects .mask span.gone-right {
							opacity: 0;
							-webkit-transform: translateX(-100%) translateZ(0px);
							-moz-transform: translateX(-100%) translateZ(0px);
							transform: translateX(-100%) translateZ(0px); 
							}
							.desktop .projects .mask span.gone-right {
								-webkit-transform: translateX(100%) translateZ(0px);
								-moz-transform: translateX(100%) translateZ(0px);
								transform: translateX(100%) translateZ(0px);
								}
						.projects .mask span.gone-left {
							opacity: 0;
							-webkit-transform: translateX(100%) translateZ(0px);
							-moz-transform: translateX(100%) translateZ(0px);
							transform: translateX(100%) translateZ(0px);
							}
							.desktop .projects .mask span.gone-left {
								opacity: 0;
								-webkit-transform: translateX(-100%) translateZ(0px);
								-moz-transform: translateX(-100%) translateZ(0px);
								transform: translateX(-100%) translateZ(0px);
								}
						.projects .mask span:first-child {
							-webkit-transition: all 1500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
							-moz-transition: all 1500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
							transition: all 1500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
							}
						.projects .mask span:last-child {
							z-index: 1; opacity: 0;
							-webkit-transform: translateX(100%) translateZ(0px); 
							-moz-transform: translateX(100%) translateZ(0px);
							transform: translateX(100%) translateZ(0px);
							-webkit-transition: all 1250ms 250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
							-moz-transition: all 1250ms 250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
							transition: all 1250ms 250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
							}
							.desktop .projects .mask span:last-child {
								-webkit-transform: translateX(-100%) translateZ(0px);
								-moz-transform: translateX(-100%) translateZ(0px);
								transform: translateX(-100%) translateZ(0px);
								}
						.projects .mask span.in {
							opacity: 1;
							-webkit-transform: translateY(0%) translateZ(0px) !important;
							-moz-transform: translateY(0%) translateZ(0px) !important;
							transform: translateY(0%) translateZ(0px) !important;
							}
			.projects .bgr-holder {
				position: absolute; right: 60px; top: -40px; bottom: -40px; overflow: hidden;
				width: 710px; 
				-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 310px 100%, 310px calc(100% - 40px), 0 calc(100% - 40px)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 310px 100%, 310px calc(100% - 40px), 0 calc(100% - 40px));
				}
				.projects .bgr-holder div {
					position: absolute; left: 0px; top: 0px; bottom: 0px;  z-index: 2;
					width: 100%;
					-webkit-transition: transform 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 	
					-moz-transition: transform 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 	
					transition: transform 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 	
					-webkit-backface-visibility: hidden; backface-visibility: hidden;								
					}
					.projects .bgr-holder div span {
						display: block; position: absolute; left: 0px; top: -200px; bottom: 0px;
						width: 100%;
						background-repeat: no-repeat; background-size: cover; background-position: right bottom;
						}
					.projects .bgr-holder div.gone-right {
						-webkit-transform: translateX(-100%) translateZ(0px);
						-moz-transform: translateX(-100%) translateZ(0px);
						transform: translateX(-100%) translateZ(0px);
						}
						.desktop .projects .bgr-holder div.gone-right {
							-webkit-transform: translateX(100%) translateZ(0px);
							-moz-transform: translateX(100%) translateZ(0px);
							transform: translateX(100%) translateZ(0px);
							}
					.projects .bgr-holder div.gone-left {
						-webkit-transform: translateX(100%) translateZ(0px);
						-moz-transform: translateX(100%) translateZ(0px);
						transform: translateX(100%) translateZ(0px);
						}
						.desktop .projects .bgr-holder div.gone-left {
							-webkit-transform: translateX(-100%);
							-moz-transform: translateX(-100%);
							transform: translateX(-100%);
							}
					.projects .bgr-holder div:first-child {
						-webkit-transition: -webkit-transform 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
						-moz-transition: -moz-transform 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
						transition: transform 1250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
						}
					.projects .bgr-holder div:last-child {
						z-index: 1;
						-webkit-transform: translateX(20%) translateZ(0px);
						-moz-transform: translateX(20%) translateZ(0px);
						transform: translateX(20%) translateZ(0px);
						}
						.desktop .projects .bgr-holder div:last-child {
							-webkit-transform: translateX(-20%);
							-moz-transform: translateX(-20%);
							transform: translateX(-20%);
							}
					.projects .bgr-holder.left div:last-child {
						z-index: 1;
						-webkit-transform: translateX(-20%) translateZ(0px);
						-moz-transform: translateX(-20%) translateZ(0px);
						transform: translateX(-20%) translateZ(0px);
						}
						.desktop .projects .bgr-holder.left div:last-child {
							-webkit-transform: translateX(20%) translateZ(0px);
							-moz-transform: translateX(20%) translateZ(0px);
							transform: translateX(20%) translateZ(0px);
							}
					.projects .bgr-holder div.in {
						-webkit-transform: translateY(0%) !important;
						-moz-transform: translateY(0%) !important;
						transform: translateY(0%) !important;
						}
			.projects .slides-list {display: none;}
			.projects .controls {
				right: 420px; left: auto; bottom: auto; z-index: 5;
				width: 350px; height: auto;
				text-align: center;
    			background: none;
    			-webkit-transform: translateY(18px);
    			-moz-transform: translateY(18px);
    			transform: translateY(18px);
				}
				.projects .controls ul,
				.projects .controls ul li {
					position: absolute; left: 0px; top: 0px; overflow: hidden;
					width: 100%; height: 100%;
					}
				.projects .controls li {
					position: relative; display: inline-block; right: auto; top: auto;
					margin-right: 15px;
					line-height: 60px; font-size: 14px;
				    -webkit-transform: translateY(0%);
				    -moz-transform: translateY(0%);
    				transform: translateY(0%);
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
					}
					.projects .controls li a {
						display: block; position: relative; left: auto; top: auto; right: auto;
						-webkit-transform: none;
						-moz-transform: none;
						transform: none;
						}
						.projects .controls .previous:before,
						.projects .controls .next:before {border: 2px solid rgba(22,23,26,0.25)}
						.projects .controls .previous:after {border-right: 6px solid #16171a;}
						.projects .controls .next:after {border-left: 6px solid #16171a;}
					.projects .controls li:last-child {margin-right: 0px;}
		.slides-list {display: none;}
		.projects-nav {position: absolute; right: 27px; top: 50%;}
			.projects-nav li {
				margin-bottom: 10px;
				-webkit-transform: translateY(-50%);
				-moz-transform: translateY(-50%);
				transform: translateY(-50%);
				}
				.projects-nav li a {
					display: block;
					width: 6px; height: 6px;
					text-indent: -9999px;
					background: rgba(22, 23, 26, 0.15);
					border-radius: 50%;
					outline: none;
					-webkit-transition: all 300ms ease-in-out;
					-moz-transition: all 300ms ease-in-out;
					transition: all 300ms ease-in-out;
					}
					.projects-nav li.active a {background: #16171a;}
				.projects-nav li:last-child {margin-bottom: 0px;}

/*
= CONTACT
------------------------------------------------------------------------------------- */

	.contact {
		overflow: hidden;
		height: 70vh;
		-webkit-transform: translateY(-100%);
		-moz-transform: translateY(-100%);
		transform: translateY(-100%);
		}
		section.contact .holder {
			position: absolute; left: 50%; top: 50%;
			width: 700px; max-width: 700px; 
			padding: 0px;
			-webkit-transform: translateX(-50%) translateY(-50%);
			-moz-transform: translateX(-50%) translateY(-50%);
			transform: translateX(-50%) translateY(-50%);
			}
			.contact h4 {
				margin-bottom: 40px; 
				font-weight: 100; font-size: 35px; color:rgba(255,255,255,0.5); text-align: center;
				transition: all 750ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				}
				.contact h4 i {font-style: normal;}
				.contact .thank-you h4 {
					opacity: 0;
					-webkit-transform: translateY(100%);
					-moz-transform: translateY(100%);
					transform: translateY(100%);					
					}
			.contact article:after {
				content: "Thanks, we’ll get back at you shortly!";
				display: block; position: absolute; left: 0px; top: 0px; opacity: 0;
				width: 100%;
				font-weight: 100; font-size: 35px; color:rgba(255,255,255,0.5); text-align: center;
				-webkit-transform: translateY(-100%);
				-moz-transform: translateY(-100%);
				transform: translateY(-100%);
				transition: all 750ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				}
				.contact article.thank-you:after {
					opacity: 1;
					-webkit-transform: translateY(0%);
					-moz-transform: translateY(0%);
					transform: translateY(0%);
					}
			.contact form {overflow: hidden;}
				::-webkit-input-placeholder {opacity: 1; color: rgba(255,255,255,0.5);}
				::-moz-placeholder {opacity: 1; color: rgba(255,255,255,0.5);}
				:-ms-input-placeholder {opacity: 1; color: rgba(255,255,255,0.5) !important;}
				:-moz-placeholder {opacity: 1; color: rgba(255,255,255,0.5);}
				input:-webkit-autofill,
				input:-webkit-autofill:hover, 
				input:-webkit-autofill:focus
				input:-webkit-autofill, 
				textarea:-webkit-autofill,
				textarea:-webkit-autofill:hover
				textarea:-webkit-autofill:focus,
				input:-webkit-autofill, 
				textarea:-webkit-autofill {background: none; -webkit-box-shadow: 0 0 0 30px #16171a inset !important; -webkit-text-fill-color: #ffffff !important;}
				.name-holder,
				.email-holder {float: left; position: relative; width: 50%;}
					.contact input {
						width: 100%; padding: 0 20px;
						font-family: "Roboto"; color: #ffffff; font-size: 15px; line-height: 60px;
						background: none;
						border: 4px solid #2c2e33; border-left: 2px solid #2c2e33; border-radius: 0px;
						-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
						-webkit-transition: background 300ms ease-in-out;
						-moz-transition: background 300ms ease-in-out;
						transition: background 300ms ease-in-out;
						-webkit-appearance: none;
						}
						.ie11 .contact input {height: 60px; line-height: normal;}
						.name-holder input {border-left: 4px solid #2c2e33; border-right: 2px solid #2c2e33;}
						.contact input.wpcf7-not-valid {background: rgba(255,48,87,0.1);}
				.message-holder {clear: both; display:block;}
					.contact textarea {
						display: block;
						width: 100%; height: 200px;
						padding: 15px 20px; margin-bottom: 15px;
						font-family: "Roboto"; color: #ffffff; font-size: 15px; line-height: 22px;
						background: none;
						border: 4px solid #2c2e33; border-top: none; border-radius: 0px;
						-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
						-webkit-transition: all 300ms ease-in-out;
						-moz-transition: all 300ms ease-in-out;
						transition: all 300ms ease-in-out;
						resize: none;
						-webkit-appearance: none;
						}
					.contact textarea.wpcf7-not-valid {background: rgba(255,48,87,0.1);}
				.contact form a {
					float: left; position: relative;
					color: #ffffff; text-decoration: none; font-size: 15px; line-height: normal; font-weight: normal;
					}
					.contact form a strong {
						position: relative; z-index: 2;
						font-weight: 400;
						}
					.contact form a:after {
						content: "";
						display: block; position: absolute; right: 0px; top: 0px; z-index: 3;
						width: 100%; height: 100%;
						background: rgba(22, 23, 26, 0.75);
						-webkit-transition: width 250ms ease-in-out;
						-moz-transition: width 250ms ease-in-out;
						transition: width 250ms ease-in-out;
						-webkit-backface-visibility: hidden; backface-visibility: hidden;
						}
						.desktop .contact form a:hover:after {width: 0px;}
					.contact form a:before {
						content: "";
						display: block; position: absolute; left: 0px; bottom: 0px;
						width: 0px; height: 1px;
						background: #ffffff;
						-webkit-transition: width 250ms ease-in-out;
						-moz-transition: width 250ms ease-in-out;
						transition: width 250ms ease-in-out;
						-webkit-backface-visibility: hidden; backface-visibility: hidden;
						}
						.desktop .contact form a:hover:before {width: 100%;}
				.wpcf7-submit {position: absolute; left: -9999px;}
				.contact form button {
					float: right; overflow: hidden;
					width: 150px;
					padding: 0 20px; margin-right: 20px;
					font-family: "Roboto"; line-height: 36px; font-size: 11px; text-transform: uppercase; color: #16171a; font-weight: 500; text-align: left;
					background: #ffffff;
					border: none; border-radius: 18px;
					-webkit-transform: translateY(-35px);
					-moz-transform: translateY(-35px);
					transform: translateY(-35px);
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
					outline: none;
					-webkit-appearance: none;
					}
					.fa {
					    display: inline-block;
					    font-family: 'FontAwesome';
					    font: normal normal normal 14px/1 FontAwesome;
					    font-size: inherit;
					    text-rendering: auto;
					    -webkit-font-smoothing: antialiased;
					    -moz-osx-font-smoothing: grayscale;
						}					
						.fa-paper-plane {transform: translateY(1px);}
							.fa-paper-plane:before {
								content: "\f1d8";
								margin-right: 10px;
								font-size: 14px;
								}
								.contact form.invalid .fa-paper-plane:before {content: "\f00d"; color: #ff3057;}
						.fa-times {
							position: absolute; top: 50%; left: 8px; z-index: 2; opacity: 0;
							color: #ff3057; font-size: 12px;
							-webkit-transform: translateY(-50%);
							-moz-transform: translateY(-50%);
							transform: translateY(-50%);
							-webkit-transition: all 300ms ease-in-out;
							-moz-transition: all 300ms ease-in-out;
							transition: all 300ms ease-in-out;
							}
							.name-holder .fa-times {left: 10px;}
							.message-holder .fa-times {
								left: 10px; top: 20px;
								-webkit-transform: none;
								-moz-transform: none;
								transform: none;
								}
							.wpcf7-not-valid + .fa-times {opacity: 1;}
							.fa-times:before {content: "\f00d";}
					.contact form button:after {
						content: "Send Message";
						display: inline-block;
						width: 85px;
						-webkit-transition: opacity 0.3s;
						-moz-transition: opacity 0.3s;
						transition: opacity 0.3s;
						}
						.contact form.invalid button:after {
							content: "Oooops";
							color: #ff3057; text-align: center;
							}
					.contact form.invalid button {
						-webkit-animation: shake 0.5s;
						-moz-animation: shake 0.5s;
						animation: shake 0.5s;
						}
					.contact form.sent button:after {
						-webkit-animation: fadeOutText 0.75s;
						-moz-animation: fadeOutText 0.75s;
						animation: fadeOutText 0.75s;
						}
					.contact form.sent button .fa {
						-webkit-animation: moveToRight 0.75s;
						-moz-animation: moveToRight 0.75s;
						animation: moveToRight 0.75s;
						}
					@-webkit-keyframes fadeOutText {
						0% { color: transparent; }
						80% { color: transparent; }
						100% { color: #16171a; }
						}	
					@-moz-keyframes fadeOutText {
						0% { color: transparent; }
						80% { color: transparent; }
						100% { color: #16171a; }
						}	
					@keyframes fadeOutText {
						0% { color: transparent; }
						80% { color: transparent; }
						100% { color: #16171a; }
						}	
					@-webkit-keyframes shake {
						0%, 100% {-webkit-transform: translateX(0) translateY(-35px);}
						10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px) translateY(-35px);}
						20%, 40%, 60%, 80% {-webkit-transform: translateX(10px) translateY(-35px);}
						}	
					@-moz-keyframes shake {
						0%, 100% {-moz-transform: translateX(0) translateY(-35px);}
						10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px) translateY(-35px);}
						20%, 40%, 60%, 80% {-moz-transform: translateX(10px) translateY(-35px);}
						}	
					@keyframes shake {
						0%, 100% {transform: translateX(0) translateY(-35px);}
						10%, 30%, 50%, 70%, 90% {transform: translateX(-10px) translateY(-35px);}
						20%, 40%, 60%, 80% {transform: translateX(10px) translateY(-35px);}
						}	
					@-webkit-keyframes moveToRight {
						80% { -webkit-transform: translateX(150px);}
						81% { opacity: 1; -webkit-transform: translateX(150px);}
						82% { opacity: 0; -webkit-transform: translateX(150px);}
						83% { opacity: 0; -webkit-transform: translateX(-50px);}
						84% { opacity: 1; -webkit-transform: translateX(-50px);}
						100% { -webkit-transform: translateX(0%);}
						}									
					@-moz-keyframes moveToRight {
						80% { moz-transform: translateX(150px);}
						81% { opacity: 1; -moz-transform: translateX(150px);}
						82% { opacity: 0; -moz-transform: translateX(150px);}
						83% { opacity: 0; -moz-transform: translateX(-50px);}
						84% { opacity: 1; -moz-transform: translateX(-50px);}
						100% { -moz-transform: translateX(0%);}
						}									
					@keyframes moveToRight {
						80% { transform: translateX(150px);}
						81% { opacity: 1; transform: translateX(150px);}
						82% { opacity: 0; transform: translateX(150px);}
						83% { opacity: 0; transform: translateX(-50px);}
						84% { opacity: 1; transform: translateX(-50px);}
						100% { transform: translateX(0%);}
						}									
				.wpcf7-response-output,
				.wpcf7-not-valid-tip,
				.ajax-loader {display: none !important;}
		.bottom {
			position: absolute; left: 50%; bottom: 30px;
			width: 100%; max-width: 700px; 
			-webkit-transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			transform: translateX(-50%);
			}				
			.bottom p {
				position: relative; float: left; 
				padding-left: 40px;
				font-size: 15px; line-height: 22px; color: rgba(255,255,255,0.5);
				}
				.bottom p:first-child:before {
					content: "";
					display: block; position: absolute; left: 0px; top: 50%; opacity: 0.5;
					width: 22px; height: 22px;
					background: url(../img/bgr-logo.png) left top no-repeat; background-size: 100% 200%;
					-webkit-transform: translateY(-50%);
					-moz-transform: translateY(-50%);
					transform: translateY(-50%);
					}
			.bottom p:last-child {float: right; padding-left: 0px;}

/*
= TABLET
-------------------------------------------------------------------------------------- */

	.tablet .sections-holder {
		overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch;
		height: 100vh;
		}
		.tablet .sections {
			position: relative; left: auto; right: auto; top: auto;
			}
			.tablet .sections-holder section .holder {max-width: 648px; padding: 0px;}

	/*
	+ Intro */

		.tablet .intro .wrapper {max-width: 768px;}
			@-webkit-keyframes tabletBgrRevealAnim {
				0% { left: 0px; right: auto; width: 0px; -webkit-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); }
				50% { left: 0px; right: auto; width: 100%; -webkit-animation-timing-function: linear; }
				50.001% { left: auto; right: 0px; width: 100%; -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
				100% { left: auto; right: 0px; width: 50%; -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
				}	
			@-moz-keyframes tabletBgrRevealAnim {
				0% { left: 0px; right: auto; width: 0px; -moz-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); }
				50% { left: 0px; right: auto; width: 100%; -moz-animation-timing-function: linear; }
				50.001% { left: auto; right: 0px; width: 100%; -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
				100% { left: auto; right: 0px; width: 50%; -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
				}	
			@keyframes tabletBgrRevealAnim {
				0% { left: 0px; right: auto; width: 0px; animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); }
				50% { left: 0px; right: auto; width: 100%; animation-timing-function: linear; }
				50.001% { left: auto; right: 0px; width: 100%; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
				100% { left: auto; right: 0px; width: 50%; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
				}	
			.tablet .intro-holder.initialized .bgr-wrapper {
				-webkit-animation: tabletBgrRevealAnim 1.5s 1000ms forwards;
				-moz-animation: tabletBgrRevealAnim 1.5s 1000ms forwards;
				animation: tabletBgrRevealAnim 1.5s 1000ms forwards;
				}	
				@-webkit-keyframes tabletBgrMovingAnim { 0% { -webkit-transform: translateX(0); } 100% { t-webkit-ransform: translateX(calc(100% - 354px)); } }
				@-moz-keyframes tabletBgrMovingAnim { 0% { -moz-transform: translateX(0); } 100% { -moz-transform: translateX(calc(100% - 354px)); } }
				@keyframes tabletBgrMovingAnim { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100% - 354px)); } }
					.tablet .intro-holder.initialized .bgr span {
						-webkit-animation: tabletBgrMovingAnim 60s 2000ms forwards cubic-bezier(0.215, 0.610, 0.355, 1.000);
						-moz-animation: tabletBgrMovingAnim 60s 2000ms forwards cubic-bezier(0.215, 0.610, 0.355, 1.000);
						animation: tabletBgrMovingAnim 60s 2000ms forwards cubic-bezier(0.215, 0.610, 0.355, 1.000);
						}
			.tablet .crew-holder {
				-webkit-transition: all 1150ms 1450ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				-moz-transition: all 1150ms 1450ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				transition: all 1150ms 1450ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				}
				.tablet .crew-holder {
					-webkit-transform: translateX(70%) translateY(-20%);
					-moz-transform: translateX(70%) translateY(-20%);
					transform: translateX(70%) translateY(-20%);
					-webkit-transition: all 850ms 1700ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
					-moz-transition: all 850ms 1700ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
					transition: all 850ms 1700ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
					}	
					.tablet .intro-holder.initialized .crew-holder {
						-webkit-transform: translateX(0%) translateY(0%);
						-moz-transform: translateX(0%) translateY(0%);
						transform: translateX(0%) translateY(0%);
						}
				.tablet.portrait .crew {background-size: auto 100%; background-position: right center;}
			.tablet .intro article {z-index: 5;}
				.tablet h1 {margin-bottom: 38px;}
				.tablet .intro p {
					float: left; clear: left; position: relative; z-index: 2;
					margin-bottom: 0px; padding: 15px 30px 0 0;
					font-size: 25px; 
					background: #16171a;
					}
				.tablet .intro strong {
					float: left; clear: left; 
					padding: 15px 30px 15px 0; margin-top: -5px; margin-bottom: 40px;
					font-size: 40px; 
					background: #16171a;
					}
					.tablet .intro strong:after {bottom: 18px; border-right: 30px solid transparent;}
				.tablet .intro-holder.initialized article {left: 30px;}
				.tablet .mouse,
				.mobile .mouse {
					float: left; clear: left; 
					font-size: 11px; text-transform: uppercase; font-weight: 400; line-height: 24px;
					}
					.mobile .mouse i,
					.tablet .mouse i {
						height: 23px; width: 19px;
						border-radius: 0px;
	  					box-shadow: none;
	  					background: url(../img/bgr-hand.png) center no-repeat; background-size: 100% 100%;
						}
						.tablet .mouse i:before,
						.tablet .mouse i:after,
						.mobile .mouse i:before,
						.mobile .mouse i:after {
							left: 0px; top: 0px; 
							-webkit-animation: hand-wheel 1.5s ease-in-out infinite;
							-moz-animation: hand-wheel 1.5s ease-in-out infinite;
							animation: hand-wheel 1.5s ease-in-out infinite;
							}
						.tablet .mouse i:after,
						.mobile .mouse i:after {
							-webkit-animation-delay: -0.75s;
							-moz-animation-delay: -0.75s;
							animation-delay: -0.75s;
							}
						@-webkit-keyframes hand-wheel {
  							0% { -webkit-transform: translateY(7px); } 
	  						50% { -webkit-transform: translateY(0); opacity: 1; }
	  						100% { -webkit-transform: translateY(-5px); }
							}
						@-moz-keyframes hand-wheel {
  							0% { -moz-transform: translateY(7px); } 
	  						50% { -moz-transform: translateY(0); opacity: 1; }
	  						100% { -moz-transform: translateY(-5px); }
							}
						@keyframes hand-wheel {
  							0% { transform: translateY(7px); } 
	  						50% { transform: translateY(0); opacity: 1; }
	  						100% { transform: translateY(-5px); }
							}
					.tablet .about .mouse i:after,
					.tablet .about .mouse i:before,
					.mobile .about .mouse i:after,
					.mobile .about .mouse i:before {
						-webkit-animation: about-hand-wheel 1.5s ease-in-out infinite;
						-moz-animation: about-hand-wheel 1.5s ease-in-out infinite;
						animation: about-hand-wheel 1.5s ease-in-out infinite;
						}
						.tablet .about .mouse i:after,
						.mobile .about .mouse i:after {
							-webkit-animation-delay: -0.75s;
							-moz-animation-delay: -0.75s;
							animation-delay: -0.75s;
							}
							@-webkit-keyframes about-hand-wheel {
  								0% { -webkit-transform: translateY(-5px); } 
	  							50% { -webkit-transform: translateY(0); opacity: 1; }
	  							100% { -webkit-transform: translateY(7px); }
								}				
							@-moz-keyframes about-hand-wheel {
  								0% { -moz-transform: translateY(-5px); } 
	  							50% { -moz-transform: translateY(0); opacity: 1; }
	  							100% { -moz-transform: translateY(7px); }
								}				
							@keyframes about-hand-wheel {
  								0% { transform: translateY(-5px); } 
	  							50% { transform: translateY(0); opacity: 1; }
	  							100% { transform: translateY(7px); }
								}				
				
	/*
	+ About */

		.tablet .team article {
			float: none; 
			width: auto; 
			padding: 0px; margin-bottom: 100px;
			-webkit-transform: none !important;
			-moz-transform: none !important;
			transform: none !important;
			}			
			.tablet .about hgroup {margin-bottom: 100px;}
		.tablet .members {float: none; width: auto; margin-bottom: 130px;}
			.tablet .team-slider {float: none; margin-left: -30px;}
			.tablet .controls {right: 0px; left: 0px;}
		.tablet .goal article {
			position: relative; right: auto; top: auto;
			width: auto;
			padding-right: 0px; margin-bottom: 100px;
			-webkit-transform: none !important;
			-moz-transform: none !important;
			transform: none !important;
			}
		.tablet .goal ul {
			float: none; 
			width: calc(100% + 60px); 
			margin: 0 0 0 -30px;
			}
			.tablet .goal ul li h6 {left: 30px;}
			.tablet .goal ul li {padding: 60px 30px 30px;}

	/*
	+ Services */

		.tablet section.services .holder {max-width: 708px; margin: 0px auto 80px;}
			.tablet .services hgroup {padding-left: 30px;}
			.tablet .design-graphics {
				left: 0px; bottom: 50%;
				margin-bottom: -30px; 
				}
			.tablet .services article.design {
				float: right; 
				margin: 0 0 0 -30px; padding: 25px 0 20px 30px;
				-webkit-transform: none !important;
				-moz-transform: none !important;
				transform: none !important;
				}
			.tablet .development-graphics {right: -138px; bottom: 0%;}
			.tablet .services article.development h4, 
			.tablet .services article.development ul,
			.tablet .services article h4,
			.tablet .services ul {padding-left: 0px;}
			.tablet .services article.development {
				float: left; clear: both; 
				margin: -30px -30px 0 0; padding: 25px 0 20px 30px;
				-webkit-transform: none !important;
				-moz-transform: none !important;
				transform: none !important;
				}
		.tablet .services:before {display: none;}

	/*
	+ Projects */

		.tablet .projects {margin-top: -110px; padding-bottom: 150px;}	
			.tablet section.projects .holder {max-width: 708px; padding-top: 230px;}
				.tablet .projects hgroup {
					position: relative; z-index: 4;
					height: 89px; 
					margin-bottom: 496px;
					-webkit-transform: translateX(30px);
					-moz-transform: translateX(30px);
					transform: translateX(30px);
					}
					.tablet .projects hgroup h2 {z-index: 3;}
					.tablet .projects hgroup h4  {
						z-index: 2; 
						padding-right: 30px; margin-top: -15px;
						line-height: 80px; 
						background: #f6f6f6;
						}
						.tablet .projects hgroup h4:after {bottom: 19px;}
							.tablet .projects hgroup h4.in-view:after {width: calc(100% - 30px);}
				.tablet .projects article {
					max-width: 648px;
				    margin: 0px auto;
					-webkit-transform: none;
					-moz-transform: none;
					transform: none;
    				}
    				.tablet .projects .info,
    				.mobile .projects .info {
    					-webkit-transform: translateX(0px);
    					-moz-transform: translateX(0px);
    					transform: translateX(0px);
    					}
					.tablet .projects .info.gone-up,
					.mobile .projects .info.gone-up {
						opacity: 0;
						-webkit-transform: translateX(-80px) translateZ(0px);
						-moz-transform: translateX(-80px) translateZ(0px);
						transform: translateX(-80px) translateZ(0px);
						}
					.tablet .projects .info.gone-down,
					.mobile .projects .info.gone-down {
						opacity: 0;
						-webkit-transform: translateX(80px) translateZ(0px);
						-moz-transform: translateX(80px) translateZ(0px);
						transform: translateX(80px) translateZ(0px);
						}
					.tablet .projects .info:last-child,
					.mobile .projects .info:last-child {
						opacity: 0;
						-webkit-transform: translateX(80px) translateZ(0px);
						-moz-transform: translateX(80px) translateZ(0px);
						transform: translateX(80px) translateZ(0px);
						}
					.tablet .projects .info:only-child,
					.mobile .projects .info:only-child {
						opacity: 1;
						-webkit-transform: translateX(0px) translateZ(0px);
						-moz-transform: translateX(0px) translateZ(0px);
						transform: translateX(0px) translateZ(0px);
						}
					.tablet .projects .info.in,
					.mobile .projects .info.in {
						opacity: 1;
						-webkit-transform: translateX(0px) translateZ(0px) !important;
						-moz-transform: translateX(0px) translateZ(0px) !important;
						transform: translateX(0px) translateZ(0px) !important;
						}
				.tablet .projects .mask {
					top: 416px; right: auto; left: 50%; z-index: 3;
					width: 350px; height: 292px;
					background-image: url(../img/bgr-projects-mask-mobile.png); background-size: 100% 100%;
					-webkit-transform: translateX(-50%);
					-moz-transform: translateX(-50%);
					transform: translateX(-50%);
					}
				.tablet .projects .ui-holder {
					left: 13px; top: 13px; 
					-webkit-transform: none;
					-moz-transform: none;
					transform: none;
					}
				.tablet .projects .info {text-align: center;}
					.tablet .projects article ul li {float: none; display: inline-block;}
					.tablet .projects .info:before {margin: 0px auto 15px;}
				.tablet .projects .controls {
					right: 50%; left: auto; top: 732px;
    				-webkit-transform: translateX(50%);
    				-moz-transform: translateX(50%);
    				transform: translateX(50%);
    				}
				.tablet .projects .bgr-holder {
					right: 0px; top: -30px; 
					height: 655px;
				    -webkit-clip-path: none;
    				clip-path: none;
  					}
				.tablet .projects-nav {display: none;}
	
	/*
	+ Contact */

		.tablet .contact {
			-webkit-transform: translateY(-30px);
			-moz-transform: translateY(-30px);
			transform: translateY(-30px);
			}
			.tablet section.contact .holder {max-width: 708px;}

/*
= MOBILE
-------------------------------------------------------------------------------------- */

	.mobile .sections-holder {
		position: relative; left: auto; top: auto; right: auto;
		height: auto;
		-webkit-transform: none;
		-moz-transform: none;
		transform: none;
		}
		.mobile .sections {position: relative; left: auto; right: auto; top: auto;}
			.mobile .sections-holder section .holder {padding: 0 30px;}
				.mobile hgroup h2 {margin-bottom: 12px;}
				.mobile hgroup h4 {font-size: 36px; line-height: 40px;}
					.mobile hgroup h4 strong {display: block;}
					.mobile hgroup h4:after {display: none;}
				@media screen and (max-width: 360px) {
					.mobile hgroup h4 {font-size: 30px; line-height: 34px;}
					}

	/*
	+ Landscape message */

		.landscape-message {
		    position: fixed; left: 0; top: 0; z-index: 9999; display: none !important;
		    width: 100%; height: 200%;
		    background: url(../img/bgr-landscape-message.png) center no-repeat #16171a; background-size: contain;
		    -webkit-transform: translateY(-25%);
		    -moz-transform: translateY(-25%);
		    transform: translateY(-25%);
			}	
			.mobile.landscape .landscape-message {display: block !important;}

	/*
	+ Intro */

		.mobile .intro .mask-holder,
		.mobile .intro .crew-wrapper,
		.mobile .intro .bgr-wrapper {display: none !important;}	
		.mobile .intro-holder.initialized .wave-holder {opacity: 0.25;}
		.mobile .intro-holder.initialized article {left: 0px;}
		.mobile .intro article {
			bottom: auto; top: 50%; 
			-webkit-transform: translateX(-10%) translateY(-50%) translateZ(0px);
			-moz-transform: translateX(-10%) translateY(-50%) translateZ(0px);
			transform: translateX(-10%) translateY(-50%) translateZ(0px);
			-webkit-transition: all 1200ms 1250ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
			-moz-transition: all 1200ms 1250ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
			transition: all 1200ms 1250ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
			}
			.mobile .intro p {width:70%; margin-bottom: 10px; font-size: 20px;}
			.mobile .intro strong {font-size: 36px; line-height: 42px; height: auto;}
				.mobile .intro strong:after {display: none;}
		.mobile .intro-holder,
		.mobile .intro-holder.initialized {
			-webkit-transition: none;
			-moz-transition: none;
			transition: none;
			}
			.mobile .intro-holder.initialized article {
				-webkit-transform: translateX(0%) translateY(-50%) translateZ(0px);
				-moz-transform: translateX(0%) translateY(-50%) translateZ(0px);
				transform: translateX(0%) translateY(-50%) translateZ(0px);
				}
		@media screen and (max-width: 360px) {
			.mobile .intro p {width: 100%;}
			.mobile .intro strong {font-size: 30px; line-height: 35px;}
			}

	/*
	+ About */

		.mobile .about hgroup {margin-bottom: 100px;}
		.mobile .team {margin-bottom: 100px;}
			.mobile .team article {
				float: none;
				width: 100%;
				padding: 0px; margin-bottom: 100px;
				-webkit-transform: none !important;
				-moz-transform: none !important;
				transform: none !important;
				}
			.mobile .members {
				float: none; overflow: hidden;
				width: calc(100% + 60px);
				margin-left: -30px;
				}
				.mobile .team-slider {
					float: none;
					width: 100%; height: 400px; 
					margin: 0px; 
					-webkit-transform-style: preserve-3d; transform-style: preserve-3d;
   					-webkit-backface-visibility: hidden; backface-visibility: hidden;
					}
				.mobile .team .controls {
					position: relative; right: auto; bottom: auto; left: auto;
					width: calc(100vw - 60px);
					margin: -30px auto 0px;
					border-color: #2c2e33;
					}
					.mobile .team .controls .previous {left: 15px; right: auto;}
					.mobile .team-slider-nav {
						left: 50%; 
						-webkit-transform: translateX(-50%) translateY(-50%);
						-moz-transform: translateX(-50%) translateY(-50%);
						transform: translateX(-50%) translateY(-50%);
						}
						.mobile .team-slider-nav li:last-child {margin-right: 0px;}
		.mobile .goal article {
			position: relative; right: auto; top: auto;
			width: 100%;
			padding: 0px; margin-bottom: 100px;
			-webkit-transform: none !important;
			-moz-transform: none !important;
			transform: none !important;
			}
		.mobile .goal ul {
			float: none;
			width: 100%;
			margin: 0px;
			-webkit-transform: none !important;
			-moz-transform: none !important;
			transform: none !important;
			}
			.mobile .goal ul li {
				float: none; 
				width: 100%;
				padding: 50px 30px 30px;
				-webkit-transform: none !important;
				-moz-transform: none !important;
				transform: none !important;
				}
				.mobile .goal ul li h6 {left: 30px;}
				.mobile .goal ul li:first-child:before,
				.mobile .goal ul li:first-child:after,
				.mobile .goal ul li:last-child:before,
				.mobile .goal ul li:last-child:after {display: none;}
				.mobile .goal ul li:nth-child(2n+1) {border: 4px solid #2c2e33;}
		@media screen and (max-width: 360px) {		
			.mobile .team-slider {height: 300px;}
			}
		
	/*
	+ Services */

		.mobile section.services .holder {max-width: 100%; margin-bottom: 80px;}
			.mobile .graphics {
				position: relative; left: auto; right: auto; top: auto; bottom: auto; z-index: 5;
				width: calc(100% - 60px); height: auto;
				margin: 0px auto;
				}
			.mobile .services article {
				float: none; position: relative;
				width: 100%; 
				padding: 0px; margin: 0px !important;
				-webkit-transform: none !important;
				-moz-transform: none !important;
				transform: none !important;
				}
				.mobile .services article h4 {padding: 0 30px;}
				.mobile .services ul {padding: 0 30px 20px;}
					.mobile .services article.development h4 {padding: 0 30px;}
					.mobile .services article.development ul {padding: 0 30px 20px;}
				.mobile article.design {margin: -135px 0 100px !important; padding-top: 165px;}
				.mobile article.development {margin-top: -95px !important; padding-top: 125px;}
		.mobile .services:before {display: none;}

	/*
	+ Projects */

		.mobile .projects {overflow: hidden; margin-top: -110px;}
			.mobile section.projects .holder {padding: 230px 30px 200px;}
				.mobile .projects-nav {display: none;}
				.mobile .projects hgroup {
					height: auto; 
					margin-bottom: 880px; 
					-webkit-transform: none;
					-moz-transform: none;
					transform: none;
					}
				.mobile .projects article {
					-webkit-transform: none;
					-moz-transform: none;
					transform: none;
					}
					.mobile .projects .info-holder {height: 320px;}
						.mobile .projects article h4,
						.mobile .projects article h5 {text-align: center;}
						.mobile .projects article ul li {float: none; display: inline-block;}
					.mobile .projects .info:before {
						margin: 0px auto 15px; 
						-webkit-transform: none;
						-moz-transform: none;
						transform: none;
						}
				.mobile .projects .bgr-holder {
					right: 0px; top: 440px; bottom: auto;
					width: 100%; height: 600px;
				    -webkit-clip-path: none;
    				clip-path: none;					
					}
				.mobile .projects .mask {
					top: 831px; right: auto; left: 50%; z-index: 3;
					width: 350px; height: 292px;
					background-image: url(../img/bgr-projects-mask-mobile.png); background-size: 100% 100%;
					-webkit-transform: translateX(-50%);
					-moz-transform: translateX(-50%);
					transform: translateX(-50%);
					}	
					.mobile .projects .ui-holder {
						left: 0px; top: 0px; 
						-webkit-transform: translateX(13px) translateY(13px);
						-moz-transform: translateX(13px) translateY(13px);
						transform: translateX(13px) translateY(13px);
						}
				.mobile .projects .controls {
					right: auto; left: 50%; top: 1146px; bottom: auto;
					-webkit-transform: translateX(-50%);
					-moz-transform: translateX(-50%);
					transform: translateX(-50%);
					}
				@media screen and (max-width: 360px) {
					.mobile .projects hgroup {margin-bottom: 715px;}
					.mobile .projects .bgr-holder {height: 450px;}
					.mobile .projects .mask {top: 735px; width: 260px; height: 217px;}
						.mobile .projects .ui-holder {
							width: 240px; height: 135px; 
							-webkit-transform: translateX(10px) translateY(10px);
							-moz-transform: translateX(10px) translateY(10px);
							transform: translateX(10px) translateY(10px);
							}
					.mobile .projects .controls {top: 978px;}
					}

	/*
	+ Contact */

		.mobile .contact {
			height: auto;
			padding-top: 150px; padding-bottom: 30px;
			-webkit-transform: none !important;
			-moz-transform: none !important;
			transform: none !important;
			}
			.mobile section.contact .holder {
				position: relative; left: auto; top: auto;
				width: auto;
				-webkit-transform: none;
				-moz-transform: none;
				transform: none;
				}
				.mobile .contact h4 {margin-bottom: 100px; font-size: 30px;}
					.mobile .contact h4 i {display: block;}
				.mobile .contact article:after {
					padding: 0 30px;
					font-size: 30px;
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
					}
				.mobile .contact .wpcf7 {margin-bottom: 100px;}
					.mobile .name-holder,
					.mobile .email-holder {float: none; display: block; width: 100%;}
					.mobile .contact input {
						padding: 0 30px;
						border: 4px solid #2c2e33;
						}
						.mobile .name-holder input {border-bottom: none;}
						.mobile .name-holder .fa-times {margin-top: 2px;}
						.mobile .name-holder .fa-times,
						.mobile .email-holder .fa-times {left: 14px;}
					.mobile .message-holder {
						padding-bottom: 30px; margin-bottom: 15px;
						border: 4px solid #2c2e33; border-top: none;
						}
						.mobile .contact textarea {
							height: 170px;
							padding: 15px 30px 0; margin-bottom: 0px; 
							border: none;
							}
						.mobile .contact .message-holder:after {
							content: "";
							display: block; position: absolute; bottom: 0%; left: 0px;
							width: 100%; height: 30px;
							background: none;
							-webkit-transition: all 300ms ease-in-out;
							-moz-transition: all 300ms ease-in-out;
							transition: all 300ms ease-in-out;
							}
							.mobile .contact .invalid .message-holder:after {background: rgba(255,48,87,0.1);}
							.mobile .contact .message-valid .message-holder:after {background: none;}
							.mobile .contact .message-invalid .message-holder:after {background: rgba(255,48,87,0.1);}
					.mobile .contact form a {float: none; display: block; text-align: center;}
						.mobile .contact form a:after {background: rgba(22, 23, 26, 0.5);}
					.mobile .contact form button {float: none; display: block; margin: 0px auto 65px;}
				.mobile .bottom {
					position: relative; left: auto; bottom: auto;
					padding: 0 30px; 
					box-sizing: border-box;
					-webkit-transform: none;
					-moz-transform: none;
					transform: none;
					}
					.mobile .bottom p {float: none; padding: 0px; text-align: center; line-height: 20px;}
						.mobile .bottom p:first-child {padding-top: 30px;}
							.mobile .bottom p:first-child:before {
								left: 50%; top: 0px;
								-webkit-transform: translateX(-50%) translateY(0px);
								-moz-transform: translateX(-50%) translateY(0px);
								transform: translateX(-50%) translateY(0px);
								}
					@media screen and (max-width: 360px) {
						.mobile .contact br {display: none;}
						}
.grecaptcha-badge {
	display: none !important;
}
/*
= RESPONSIVE
------------------------------------------------------------------------------------- */

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

		/*
		+ About */

			.team-slider { width: calc(100vw / 2 - 60px); }

		}

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

		/*
		+ Contact */

			.contact {height: 90vh;}

		}

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

		.sections-holder section .holder {max-width: 100%; padding: 0 90px;}

		.vs-scrollbar.vs-vertical {right: 0px;}

		/*
		+ Intro */

			section.intro-holder .holder {border-width: 30px;}
				@-webkit-keyframes bgrRevealAnim {
					0% { left: 0px; right: auto; width: 0px; -webkit-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); }
					50% { left: 0px; right: auto; width: 100%; -webkit-animation-timing-function: linear; }
					50.001% { left: auto; right: 0px; width: 100%; -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
					100% { left: auto; right: 0px; width: 312px; -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
					}	
				@-moz-keyframes bgrRevealAnim {
					0% { left: 0px; right: auto; width: 0px; -moz-animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); }
					50% { left: 0px; right: auto; width: 100%; -moz-animation-timing-function: linear; }
					50.001% { left: auto; right: 0px; width: 100%; -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
					100% { left: auto; right: 0px; width: 312px; -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
					}	
				@keyframes bgrRevealAnim {
					0% { left: 0px; right: auto; width: 0px; animation-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); }
					50% { left: 0px; right: auto; width: 100%; animation-timing-function: linear; }
					50.001% { left: auto; right: 0px; width: 100%; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
					100% { left: auto; right: 0px; width: 312px; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 
					}	
				.intro-holder.initialized .bgr-wrapper {
					-webkit-animation: bgrRevealAnim 1.5s 1000ms forwards;
					-moz-animation: bgrRevealAnim 1.5s 1000ms forwards;
					animation: bgrRevealAnim 1.5s 1000ms forwards;
					}
				.intro p {font-size: 30px;}
				.intro strong {height: 49px; font-size: 45px; line-height: 49px;}
				.intro-holder.initialized article {left: 60px;}
				.crew {background-size: auto 120%; background-position: right bottom;}

		/*
		+ About */

			.about {padding: 200px 0;}
				.about hgroup {margin-bottom: 50px;}
				.team-slider {width: calc(100% + 60px); margin-left: -60px;}
				.goal ul {width: calc(50% + 60px); margin-right: -60px;}

		/*
		+ Services */

			section.services .holder {max-width: 50%; padding: 0px;}
			.graphics {left: calc(-50% + 30px);}
			.development-graphics {left: auto; right: calc(-50% - 108px);}

		/*
		+ Projects */

			section.projects .holder {padding: 260px calc(50% + 120px) 260px 90px;}
				.projects .info:before {
					position: relative; right: auto; top: auto; 
					margin-bottom: 15px;
					-webkit-transform: none;
					-moz-transform: none;
					transform: none;
					}
				.projects .bgr-holder {
					right: 30px; 
					width: 50%;
				    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 310px 100%, 310px calc(100% - 40px), 0 calc(100% - 40px));
    				clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 44.5% 100%, 44.5% calc(100% - 40px), 0 calc(100% - 40px));
    				}
				.projects .mask {width: 25%; right: calc(25% + 30px);}
				.projects .controls {
					right: calc(25% + 30px);
					width: 25%;
					-webkit-transform: translateX(5px) translateY(-6px);
					-moz-transform: translateX(5px) translateY(-6px);
					transform: translateX(5px) translateY(-6px);
					}
				.projects-nav {right: 12px;}

		}

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

		.desktop .team article {padding-top: 0px;}

		}

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

		.desktop .sections-holder section .holder {max-width: 648px; padding: 0px;}
	
		.desktop .intro .wrapper {max-width: 768px;}
			.desktop .intro-holder.initialized .bgr-wrapper {
				-webkit-animation: tabletBgrRevealAnim 1.5s 1000ms forwards;
				-moz-animation: tabletBgrRevealAnim 1.5s 1000ms forwards;
				animation: tabletBgrRevealAnim 1.5s 1000ms forwards;
				}	
				.desktop .intro-holder.initialized .bgr span {
					-webkit-animation: tabletBgrMovingAnim 60s 2000ms forwards cubic-bezier(0.215, 0.610, 0.355, 1.000);
					-moz-animation: tabletBgrMovingAnim 60s 2000ms forwards cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation: tabletBgrMovingAnim 60s 2000ms forwards cubic-bezier(0.215, 0.610, 0.355, 1.000);
					}
			.desktop .crew-holder {
				-webkit-transition: all 1150ms 1450ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				-moz-transition: all 1150ms 1450ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				transition: all 1150ms 1450ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
				}
				.desktop .crew-holder {
					-webkit-transform: translateX(70%) translateY(-20%);
					-moz-transform: translateX(70%) translateY(-20%);
					transform: translateX(70%) translateY(-20%);
					-webkit-transition: all 850ms 1700ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
					-moz-transition: all 850ms 1700ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
					transition: all 850ms 1700ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
					}	
					.desktop .intro-holder.initialized .crew-holder {
						-webkit-transform: translateX(0%) translateY(0%);
						-moz-transform: translateX(0%) translateY(0%);
						transform: translateX(0%) translateY(0%);
						}
				.desktop.portrait .crew {background-size: auto 100%; background-position: right center;}
			.desktop .intro article {z-index: 5;}
				.desktop h1 {margin-bottom: 38px;}
					.desktop .error404 h1 { 
						-webkit-transform: translateY(30px);
						-moz-transform: translateY(30px);
						transform: translateY(30px);
						}
				.desktop .intro p {
					float: left; clear: left; position: relative; z-index: 2;
					margin-bottom: 0px; padding: 15px 30px 0 0;
					font-size: 25px; 
					background: #16171a;
					}
				.desktop .intro strong {
					float: left; clear: left; 
					padding: 15px 30px 15px 0; margin-top: -5px; margin-bottom: 40px;
					font-size: 40px; 
					background: #16171a;
					}
					.desktop .intro strong:after {bottom: 18px; border-right: 30px solid transparent;}
				.desktop .intro-holder.initialized article {left: 30px;}			
				
		.desktop .team article {
			float: none; 
			width: auto; 
			padding: 0px; margin-bottom: 100px;
			-webkit-transform: none !important;
			-moz-transform: none !important;
			transform: none !important;
			}			
			.desktop .about hgroup {margin-bottom: 100px;}
		.desktop .members {float: none; width: auto; margin-bottom: 130px;}
			.desktop .team-slider {float: none; margin-left: -30px;}
			.desktop .controls {right: 0px; left: 0px;}
		.desktop .goal article {
			position: relative; right: auto; top: auto;
			width: auto;
			padding-right: 0px; margin-bottom: 100px;
			-webkit-transform: none !important;
			-moz-transform: none !important;
			transform: none !important;
			}
		.desktop .goal ul {
			float: none; 
			width: calc(100% + 60px); 
			margin: 0 0 0 -30px;
			}
			.desktop .goal ul li h6 {left: 30px;}
			.desktop .goal ul li {padding: 60px 30px 30px;}

		.desktop section.services .holder {max-width: 708px; margin: 0px auto 80px;}
			.desktop .services hgroup {padding-left: 30px;}
			.desktop .design-graphics {
				left: 0px; bottom: 50%;
				margin-bottom: -30px; 
				}
			.desktop .services article.design {
				float: right; 
				margin: 0 0 0 -30px; padding: 25px 0 20px 30px;
				-webkit-transform: none !important;
				-moz-transform: none !important;
				transform: none !important;
				}
			.desktop .development-graphics {right: -138px; bottom: 0%;}
			.desktop .services article.development h4, 
			.desktop .services article.development ul,
			.desktop .services article h4,
			.desktop .services ul {padding-left: 0px;}
			.desktop .services article.development {
				float: left; clear: both; 
				margin: -30px -30px 0 0; padding: 25px 0 20px 30px;
				-webkit-transform: none !important;
				-moz-transform: none !important;
				transform: none !important;
				}
		.desktop .services:before {display: none;}

		.desktop .projects {margin-top: -110px; padding-bottom: 150px;}	
			.desktop section.projects .holder {max-width: 708px; padding-top: 230px;}
				.desktop .projects hgroup {
					position: relative; z-index: 4;
					height: 89px; 
					margin-bottom: 496px;
					-webkit-transform: translateX(30px);
					-moz-transform: translateX(30px);
					transform: translateX(30px);
					}
					.desktop .projects hgroup h2 {z-index: 3;}
					.desktop .projects hgroup h4  {
						z-index: 2; 
						padding-right: 30px; margin-top: -15px;
						line-height: 80px; 
						background: #f6f6f6;
						}
						.desktop .projects hgroup h4:after {bottom: 19px;}
							.desktop .projects hgroup h4.in-view:after {width: calc(100% - 30px);}
				.desktop .projects article {
					max-width: 648px;
				    margin: 0px auto;
					-webkit-transform: none;
					-moz-transform: none;
					transform: none;
    				}
    				.desktop .projects .info {
    					-webkit-transform: translateX(0px);
    					-moz-transform: translateX(0px);
    					transform: translateX(0px);
    					}
					.desktop .projects .info.gone-up {
						opacity: 0;
						-webkit-transform: translateX(-80px) translateZ(0px);
						-moz-transform: translateX(-80px) translateZ(0px);
						transform: translateX(-80px) translateZ(0px);
						}
					.desktop .projects .info.gone-down {
						opacity: 0;
						-webkit-transform: translateX(80px) translateZ(0px);
						-moz-transform: translateX(80px) translateZ(0px);
						transform: translateX(80px) translateZ(0px);
						}
					.desktop .projects .info:last-child {
						opacity: 0;
						-webkit-transform: translateX(80px) translateZ(0px);
						-moz-transform: translateX(80px) translateZ(0px);
						transform: translateX(80px) translateZ(0px);
						}
					.desktop .projects .info:only-child {
						opacity: 1;
						-webkit-transform: translateX(0px) translateZ(0px);
						-moz-transform: translateX(0px) translateZ(0px);
						transform: translateX(0px) translateZ(0px);
						}
					.desktop .projects .info.in {
						opacity: 1;
						-webkit-transform: translateX(0px) translateZ(0px) !important;
						-moz-transform: translateX(0px) translateZ(0px) !important;
						transform: translateX(0px) translateZ(0px) !important;
						}
				.desktop .projects .mask {
					top: 416px; right: auto; left: 50%; z-index: 3;
					width: 350px; height: 292px;
					background-image: url(../img/bgr-projects-mask-mobile.png); background-size: 100% 100%;
					-webkit-transform: translateX(-50%);
					-moz-transform: translateX(-50%);
					transform: translateX(-50%);
					}
				.desktop .projects .ui-holder {
					left: 13px; top: 13px; 
					-webkit-transform: none;
					-moz-transform: none;
					transform: none;
					}
				.desktop .projects .info {text-align: center;}
					.desktop .projects article ul li {float: none; display: inline-block;}
					.desktop .projects .info:before {margin: 0px auto 15px;}
				.desktop .projects .controls {
					right: 50%; left: auto; top: 732px;
    				-webkit-transform: translateX(50%);
    				-moz-transform: translateX(50%);
    				transform: translateX(50%);
    				}
				.desktop .projects .bgr-holder {
					right: 0px; top: -30px; 
					height: 655px;
				    -webkit-clip-path: none;
    				clip-path: none;
  					}
				.desktop .projects-nav {display: none;}

		.desktop section.contact .holder {max-width: 708px;}

		}

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

		.desktop .sections-holder section .holder {padding: 0 30px;}
			.desktop hgroup h2 {margin-bottom: 12px;}
			.desktop hgroup h4,
			.desktop .projects hgroup h4 {font-size: 36px; line-height: 40px;}
				.desktop hgroup h4 strong {display: block;}
				.desktop hgroup h4:after {display: none;}

		.desktop .error404 {position: fixed; height: 100%;}
			.desktop .no-webgl article p,
			.desktop .not-found p {font-size: 15px; line-height: 30px;}
	
		.desktop .intro .mask-holder,
		.desktop .intro .crew-wrapper,
		.desktop .intro .bgr-wrapper {display: none !important;}	
		.desktop .intro-holder.initialized .wave-holder {opacity: 0.25;}
		.desktop .intro-holder.initialized article {left: 0px;}
		.desktop .intro article {
			bottom: auto; top: 50%; 
			-webkit-transform: translateX(-10%) translateY(-50%) translateZ(0px);
			-moz-transform: translateX(-10%) translateY(-50%) translateZ(0px);
			transform: translateX(-10%) translateY(-50%) translateZ(0px);
			-webkit-transition: all 1200ms 1250ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
			-moz-transition: all 1200ms 1250ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
			transition: all 1200ms 1250ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
			}
			.desktop .intro p {width:70%; margin-bottom: 10px; font-size: 20px;}
			.desktop .intro strong {font-size: 36px; line-height: 42px; height: auto;}
				.desktop .intro strong:after {display: none;}
		.desktop .intro-holder,
		.desktop .intro-holder.initialized {
			-webkit-transition: none;
			-moz-transition: none;
			transition: none;
			}
			.desktop .intro-holder.initialized article {
				-webkit-transform: translateX(0%) translateY(-50%) translateZ(0px);
				-moz-transform: translateX(0%) translateY(-50%) translateZ(0px);
				transform: translateX(0%) translateY(-50%) translateZ(0px);
				}

		.desktop .about hgroup {margin-bottom: 100px;}
		.desktop .team {margin-bottom: 100px;}
			.desktop .team article {
				float: none;
				width: 100%;
				padding: 0px; margin-bottom: 100px;
				-webkit-transform: none !important;
				-moz-transform: none !important;
				transform: none !important;
				}
			.desktop .members {
				float: none; overflow: hidden;
				width: calc(100% + 60px);
				margin-left: -30px;
				}
				.desktop .team-slider {
					float: none;
					width: 100%; height: 400px; 
					margin: 0px; 
					-webkit-transform-style: preserve-3d; transform-style: preserve-3d;
   					-webkit-backface-visibility: hidden; backface-visibility: hidden;
					}
				.desktop .team .controls {
					position: relative; right: auto; bottom: auto; left: auto;
					width: calc(100vw - 60px);
					margin: -30px auto 0px;
					border-color: #2c2e33;
					}
					.desktop .team .controls .previous {left: 15px; right: auto;}
					.desktop .team-slider-nav {
						left: 50%; 
						-webkit-transform: translateX(-50%) translateY(-50%);
						-moz-transform: translateX(-50%) translateY(-50%);
						transform: translateX(-50%) translateY(-50%);
						}
						.desktop .team-slider-nav li:last-child {margin-right: 0px;}
		.desktop .goal article {
			position: relative; right: auto; top: auto;
			width: 100%;
			padding: 0px; margin-bottom: 100px;
			-webkit-transform: none !important;
			-moz-transform: none !important;
			transform: none !important;
			}
		.desktop .goal ul {
			float: none;
			width: 100%;
			margin: 0px;
			-webkit-transform: none !important;
			-moz-transform: none !important;
			transform: none !important;
			}
			.desktop .goal ul li {
				float: none; 
				width: 100%;
				padding: 50px 30px 30px;
				-webkit-transform: none !important;
				-moz-transform: none !important;
				transform: none !important;
				}
				.desktop .goal ul li h6 {left: 30px;}
				.desktop .goal ul li:first-child:before,
				.desktop .goal ul li:first-child:after,
				.desktop .goal ul li:last-child:before,
				.desktop .goal ul li:last-child:after {display: none;}
				.desktop .goal ul li:nth-child(2n+1) {border: 4px solid #2c2e33;}
		
		.desktop section.services .holder {max-width: 100%; margin-bottom: 80px;}
			.desktop .graphics {
				position: relative; left: auto; right: auto; top: auto; bottom: auto; z-index: 5;
				width: calc(100% - 60px); height: auto;
				margin: 0px auto;
				}
				.desktop .graphics .mouse {background-image: url(../img/mouse-mobile.png);}
				.desktop .graphics .imac {background-image: url(../img/imac-mobile.png);}
				.desktop .graphics .keyboard {background-image: url(../img/keyboard-mobile.png);}
				.desktop .graphics .watch {background-image: url(../img/watch-mobile.png);}
				.desktop .graphics .iphone-back {background-image: url(../img/iphone-back-mobile.png);}
				.desktop .graphics .iphone-front {background-image: url(../img/iphone-front-mobile.png);}
				.desktop .graphics .macbook {background-image: url(../img/macbook-mobile.png);}
			.desktop .services article {
				float: none !important; position: relative;
				width: 100%; 
				padding: 0px !important; margin: 0px !important;
				-webkit-transform: none !important;
				-moz-transform: none !important;
				transform: none !important;
				}
				.desktop .services article h4 {padding: 0 30px;}
				.desktop .services ul {padding: 0 30px 20px;}
					.desktop .services article.development h4 {padding: 0 30px;}
					.desktop .services article.development ul {padding: 0 30px 20px;}
				.desktop article.design {margin: -135px 0 100px !important; padding-top: 165px !important;}
				.desktop article.development {margin-top: -95px !important; padding-top: 125px !important;}
		.desktop .services:before {display: none;}

		.desktop .projects {overflow: hidden; margin-top: -110px; padding-bottom: 0px;}
			.desktop section.projects .holder {padding: 230px 30px 200px;}
				.desktop .projects-nav {display: none;}
				.desktop .projects hgroup {
					height: auto; 
					margin-bottom: 880px; 
					-webkit-transform: none;
					-moz-transform: none;
					transform: none;
					}
				.desktop .projects article {
					-webkit-transform: none;
					-moz-transform: none;
					transform: none;
					}
					.desktop .projects .info-holder {height: 320px;}
						.desktop .projects .info {text-align: left;}
							.desktop .projects article h4,
							.desktop .projects article h5 {text-align: center;}
							.desktop .projects article ul li {float: none; display: inline-block;}
					.desktop .projects .info:before {
						margin: 0px auto 15px; 
						-webkit-transform: none;
						-moz-transform: none;
						transform: none;
						}
				.desktop .projects .bgr-holder {
					right: 0px; top: 440px; bottom: auto;
					width: 100%; height: 600px;
				    -webkit-clip-path: none;
    				clip-path: none;					
					}
				.desktop .projects .mask {
					top: 831px; right: auto; left: 50%; z-index: 3;
					width: 350px; height: 292px;
					background-image: url(../img/bgr-projects-mask-mobile.png); background-size: 100% 100%;
					-webkit-transform: translateX(-50%);
					-moz-transform: translateX(-50%);
					transform: translateX(-50%);
					}	
					.desktop .projects .ui-holder {
						left: 0px; top: 0px; 
						-webkit-transform: translateX(13px) translateY(13px);
						-moz-transform: translateX(13px) translateY(13px);
						transform: translateX(13px) translateY(13px);
						}
				.desktop .projects .controls {
					right: auto; left: 50%; top: 1146px; bottom: auto;
					-webkit-transform: translateX(-50%);
					-moz-transform: translateX(-50%);
					transform: translateX(-50%);
					}

		.desktop .contact {
			height: auto;
			padding-top: 150px; padding-bottom: 30px;
			-webkit-transform: none !important;
			-moz-transform: none !important;
			transform: none !important;
			}
			.desktop section.contact .holder {
				position: relative; left: auto; top: auto;
				width: auto;
				-webkit-transform: none;
				-moz-transform: none;
				transform: none;
				}
				.desktop .contact h4 {margin-bottom: 100px; font-size: 30px;}
					.desktop .contact h4 i {display: block;}
				.desktop .contact article:after {
					padding: 0 30px;
					font-size: 30px;
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
					}
				.desktop .contact .wpcf7 {margin-bottom: 100px;}
					.desktop .name-holder,
					.desktop .email-holder {float: none; display: block; width: 100%;}
					.desktop .contact input {
						padding: 0 30px;
						border: 4px solid #2c2e33;
						}
						.desktop .name-holder input {border-bottom: none;}
						.desktop .name-holder .fa-times {margin-top: 2px;}
						.desktop .name-holder .fa-times,
						.desktop .email-holder .fa-times {left: 14px;}
					.desktop .message-holder {
						padding-bottom: 30px; margin-bottom: 15px;
						border: 4px solid #2c2e33; border-top: none;
						}
						.desktop .contact textarea {
							height: 170px;
							padding: 15px 30px 0; margin-bottom: 0px; 
							border: none;
							}
						.desktop .contact .message-holder:after {
							content: "";
							display: block; position: absolute; bottom: 0%; left: 0px;
							width: 100%; height: 30px;
							background: none;
							-webkit-transition: all 300ms ease-in-out;
							-moz-transition: all 300ms ease-in-out;
							transition: all 300ms ease-in-out;
							}
							.desktop .contact .invalid .message-holder:after {background: rgba(255,48,87,0.1);}
							.desktop .contact .message-valid .message-holder:after {background: none;}
					.desktop .contact form a {float: none; display: block; text-align: center;}
						.desktop .contact form a:after {background: rgba(22, 23, 26, 0.5);}
					.desktop .contact form button {float: none; display: block; margin: 0px auto 65px;}
				.desktop .bottom {
					position: relative; left: auto; bottom: auto;
					padding: 0 30px; 
					box-sizing: border-box;
					-webkit-transform: none;
					-moz-transform: none;
					transform: none;
					}
					.desktop .bottom p {float: none; padding: 0px; text-align: center; line-height: 20px;}
						.desktop .bottom p:first-child {padding-top: 30px;}
							.desktop .bottom p:first-child:before {
								left: 50%; top: 0px;
								-webkit-transform: translateX(-50%) translateY(0px);
								-moz-transform: translateX(-50%) translateY(0px);
								transform: translateX(-50%) translateY(0px);
								}

		}

	@media screen and (max-width: 360px) {
					
		.desktop hgroup h4,
		.desktop .projects hgroup h4 {font-size: 30px; line-height: 34px;}

		.desktop .intro p {width: 100%;}
		.desktop .intro strong {font-size: 30px; line-height: 35px;}

		.desktop .team-slider {height: 300px;}

		.desktop .projects hgroup {margin-bottom: 715px;}
		.desktop .projects .bgr-holder {height: 450px;}
		.desktop .projects .mask {top: 735px; width: 260px; height: 217px;}
			.desktop .projects .ui-holder {
				width: 240px; height: 135px; 
				-webkit-transform: translateX(10px) translateY(10px);
				-moz-transform: translateX(10px) translateY(10px);
				transform: translateX(10px) translateY(10px);
				}
		.desktop .projects .controls {top: 978px;}

		.desktop .contact br {display: none;}
		
		}

/*
= RETINA
-------------------------------------------------------------------------------------- */

	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {}
	
/*
= PRINT
------------------------------------------------------------------------------------- */

	@media print {
		* { background: transparent !important; color: #444 !important; text-shadow: none !important;}
		a, a:visited {color: #444 !important; text-decoration: underline;}
		a:after {content: "("attr(href)")";}
		abbr:after {content: "("attr(title)")";}
		.ir a:after {content: "";}
		pre, blockquote {border: 1px solid #999; page-break-inside: avoid;}
		thead {display: table-header-group;}
		tr, img {page-break-inside: avoid;}
		@page {margin: 0.5cm;}
		p, h2, h3 {orphans: 3; widows: 3;}
		h2, h3 {page-break-after: avoid;}
		}