/* ==============================================================================
* Website: Grizzly Bear
* Filename: screen
* Media: screen
* Structure: RESET, GLOBAL, PAGE LAYOUT, HEADER, MAIN, FOOTER, MEDIA QUERIES
============================================================================== */


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: RESET */
/* NORMALIZE */

ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#bg-web,
#bg-art-dept {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: -1;
}
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: (END) RESET */


/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: GLOBAL */
html {
	overflow-y: scroll;
}

body {
	font-family: BebasRegular, arial, sans-serif;
	font-size: 100%;
	line-height: 1.3;
	letter-spacing: 1px;
	text-shadow: 0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3);
	text-transform: uppercase;
	word-spacing: 5px;
}

a {
	color: #f1f1f1;
	text-decoration: none;
}

a:hover {
	color: #00b3ff;
	cursor: pointer;
}

.link-color-1 {
	color: #007baf;
}

.fill-link {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/blank.png') repeat;
	cursor: pointer;
	line-height: 50;
}

.fullBg {
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: -1;
}

.section-digital .fill-bg {
	left: 50% !important;
	width: 369px;
	margin-left: -219px;
}
.section-web .fill-bg {
	left: 50% !important;
	width: 399px;
	margin-left: -218px;
}

#loader {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: black;
	z-index: 1000;
}

#loader .loading-paw {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -20px 0px 0px -20px;
	-webkit-animation-name: paw;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-iteration-count: infinite;
    animation-name: paw;
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
}

/* =================================================================== OVERLAY */
.overlay-content-wrapper {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #333333;
	display: none;
	z-index: 1000;
}

.overlay-content-wrapper .content {
	width: 100%;
	height: 100%;
	padding: 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.overlay-content-wrapper .overlay-close {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 24px;
	height: 24px;
	background: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/close.png') no-repeat top left;
	cursor: pointer;
	z-index: 100;
}

.overlay-content-wrapper .overlay-content {
	width: 100%;
	height: 100%;
	background: #000000;
}

/* ---------------------------------------------------------- OVERLAY CAROUSEL */
.carousel-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
}

.carousel,
.slide,
.overlay-image-wrapper {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

.overlay-image-wrapper img {
	position: relative;
	top: 50%;
	margin: auto;
	display: block;
}

.overlay-copy-wrapper {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.overlay-copy {
	position: absolute;
	bottom: 0px;
	width: 49.9%;
	font-size: 25px;
	line-height: 1.3;
	color: #ffffff;
}
.overlay-copy-right {
	right: 0px;
	text-align: right;
}
.overlay-copy-left {
	left: 0px;
	text-align: left;
}

.overlay-copy span {
	padding: 0px 10px 3px;
	clear: both;
	background: url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/bg-70.png') repeat;
}
.overlay-copy-right span {
	float: right;
}
.overlay-copy-left span {
	float: left;
}

/* ---------------------------------------------- CONTROLS */
.section-prev,
.section-next,
.carousel-prev,
.carousel-next {
	position: absolute;
	top: 50%;
	width: 60px;
	height: 60px;
	margin-top: -30px;
	background: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/work-controls.png') no-repeat;
	overflow: hidden;
	cursor: pointer;
	z-index: 100;
}

.section-prev,
.carousel-prev {
	left: 0px;
	background-position: 0px 0px;
}
.section-prev:hover,
.carousel-prev:hover {
	background-position: 0px -60px;
}
.section-next,
.carousel-next {
	right: 0px;
	background-position: -60px 0px;
}
.section-next:hover,
.carousel-next:hover {
	background-position: -60px -60px;
}
/* ---------------------------------------- (END) CONTROLS */

/* ------------------------------------------------- PAGER */
.carousel-pager {
	position: absolute;
	top: -35px;
	right: -20px;
	z-index: 20;
}
.carousel-pager a {
	width: 10px;
	height: 10px;
	margin-left: 10px;
	float: left;
	background: #000000;
	text-indent: -9999px;
	display: inline-block;
}
.carousel-pager a.activeSlide {
	background: #ffea00;
}
/* ------------------------------------------- (END) PAGER */
/* ---------------------------------------------------- (END) OVERLAY CAROUSEL */
/* ============================================================= (END) OVERLAY */

/* -------------------------------------------- PRE LOADER */
#loaderMask {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #000000;
	text-align: center;
	z-index: 100;
}

#loaderMask span {
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -140px;
	font-size: 200px;
	color: #ffffff;
}
/* -------------------------------------- (END) PRE LOADER */

/* ------------------------------------------------- VIDEO */
#video-bg-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	overflow: hidden;
	z-index: -1;
}

#background-video {
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	background-size: cover;
}

.fullBg {
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: -1;
}

.vjs-loading-spinner
.vjs-controls {
	display: none !important;
}
/* ------------------------------------------- (END) VIDEO */

#coming-soon {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background: #404040 url('https://9ce151157a2202379512-d57340b93fc754c3371c75b147e86ef4.ssl.cf3.rackcdn.com/coming-soon.jpg') no-repeat center center;
	background-size: contain !important;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: (END) GLOBAL */


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: PAGE LAYOUT */
/* ------------------------------------------------ GLOBAL */
html,
body,
#main,
.section-bg-wrapper,
.section-wrapper,
.work-wrapper {
	width: 100%;
	height: 100%;
}

html,
body,
#main {
	height: 100%;
}

.section-bg-wrapper,
.section-wrapper,
.section-select {
	position: relative;
	float: left;
	display: inline;
}

.section-select {
	width: 50%;
	height: 100%;
}

.section-bg-wrapper {
	min-height: 200%;
	float: none;
	background: url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/winter-background.jpg') no-repeat top center;
	display: block;
}
/* ------------------------------------------ (END) GLOBAL */

#main {
	position: relative;
}

#footer {
	width: 100%;
	height: 25px;
	position: fixed;
	bottom: 0px;
	z-index: 10;
}

.wrapper,
.wrapper-inner {
	width: 100%;
	max-width: 960px;
	margin: auto;
}

.wrapper-inner {
	position: relative;
	width: 100%;
	max-width: 390px;
	height: 100%;
	background: #ffffff;
}
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: (END) PAGE LAYOUT */


/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: HEADER */
#header {
	position: fixed;
	width: 100%;
	height: 100px;
	background: url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/bg-70.png') repeat top left;
	z-index: 300;
	-webkit-transition: all 350ms ease;
	transition: all 350ms ease;
}

#header .wrapper {
	height: 100%;
}

/* -------------------------------------------- NAVIGATION */
#navigation-wrapper {
	height: 100%;
	float: right;
}

#navigation {
	height: 100%;
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: table;
}

#navigation li {
	height: 100%;
	line-height: 1;
	display: table-cell;
	vertical-align: middle
}

#navigation li a {
	margin: 0px 20px;
	font-size: 16px;
}

#navigation li a.active {
	color: #00ffcc;
}

#navigation-wrapper.mobile-navigation {
	cursor: pointer;
}

#navigation-wrapper.mobile-navigation #navigation {
	position: absolute;
	top: 60px;
	left: 0px;
	width: 100%;
	height: auto;
	background: url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/bg-70.png') repeat top left;
	display: none;
}
#navigation-wrapper.mobile-navigation li {
	width: 100%;
	height: auto;
	border-top: 1px solid #333333;
	display: block;
}

#navigation-wrapper.mobile-navigation li a {
	padding: 18px 0px;
	display: block;
}

/* -------------------------------------- (END) NAVIGATION */
.paw {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	display: block;
	z-index: 10;
	-webkit-transition: all 350ms ease;
	transition: all 350ms ease;
}

.paw:hover {
	-webkit-animation-name: paw;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-iteration-count: 2;
    animation-name: paw;
    animation-duration: 0.4s;
    animation-iteration-count: 2;
}

@-webkit-keyframes paw {
    50%  {-webkit-transform: rotate(15deg);}
}
@keyframes paw {
    50%  {transform: rotate(15deg);}
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: (END) HEADER */


/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MAIN */
h1,
h2 {
	margin: 0px;
	font-size: 312.5%;
}

/* ------------------------------------------------------------------- WELCOME */
.speech-bubble {
	position: absolute;
	top: 50%;
	margin-top: -240px;
	left: -42px;
}

#welcome {
	height: 50%;
}

.wrapper-inner img.logo {
	width: 80%;
	margin: 0 10%;
	background: black;
}

.wrapper-inner h1 {
	margin: 5px 10px 0;
	font-size: 312.5%;
	letter-spacing: 5px;
	text-align: center;
}


@-webkit-keyframes infinite-spinning {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
@keyframes infinite-spinning {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

.spinner-wrapper {
	position: absolute;
	top: 50%;
	left: 260px;
	width: 180px;
	height: 180px;
	margin-top: 270px;
	z-index: 10;
}
.spinner-wrapper .spinner-outer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/label-back.png') no-repeat center center;
	-webkit-animation: infinite-spinning 10s linear infinite;
	animation: infinite-spinning 10s linear infinite;
}
.spinner-wrapper .spinner-inner {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/label-front.png') no-repeat center center;
}
/* ------------------------------------------------------------- (END) WELCOME */

/* ---------------------------------------------- ABOUT US */
#about-us {
	height: 50%;
}

#about-us .wrapper-inner {
	position: absolute;
	left: 50%;
	margin-left: -195px;
}

#about-us .wrapper > .content {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin-top: 131px;
	float: left;
}

#about-us .wrapper .about-us-copy-wrapper,
#about-us .wrapper .recommendations-wrapper {
	width: 100%;
	float: left;
	background: #ffffff;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
}

#about-us .wrapper .about-us-copy {
	width: 100%;
	max-width: 678px;
	float: left;
}
#about-us .wrapper .about-us-copy-wrapper .content {
	padding: 20px;
}

#about-us .wrapper .about-us-copy-wrapper h2 {
	font-size: 312.5%;
	line-height: 1;
}
#about-us .wrapper p {
	font-size: 20px;
	line-height: 25px;
	text-align: justify;
}
#about-us .wrapper .about-us-copy-wrapper p + p {
	margin-bottom: 0px;
}

#about-us .wrapper .about-us-clients-wrapper {
	width: 282px;
	float: right;
}
#about-us .wrapper .about-us-clients-wrapper img {
	padding: 0px 0px 20px 15px;
}

#about-us .wrapper .recommendations-wrapper {
	position: relative;
	height: 295px;
	margin-top: 20px;
}

#about-us .wrapper .recommendations-carousel-wrapper {
	width: 100%;
	height: 100%;
	margin: auto;
	padding: 0px 80px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#about-us .wrapper .recommendations-wrapper .content {
	margin-top: 22px;
	background: #ffffff;
}

#about-us .wrapper .recommendations-wrapper p {
	background: #ffffff;
	font-family: verdana, arial, sans-serif;
	font-size: 16px;
	text-shadow: 0px 0px 0px;
	text-transform: none;
	word-spacing: 0px;
}

#about-us .wrapper .recommendations-wrapper .carousel-prev,
#about-us .wrapper .recommendations-wrapper .carousel-next {
	width: 80px;
	height: 80px;
	margin-top: -40px;
	z-index: 10;
}

#about-us .wrapper .recommendations-wrapper .carousel-prev {
	background: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/main-arrows-left.png') no-repeat top left;
}
#about-us .wrapper .recommendations-wrapper .carousel-next {
	background: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/main-arrows-right.png') no-repeat top left;
}

#about-us .wrapper .recommendations-wrapper .carousel-prev:hover,
#about-us .wrapper .recommendations-wrapper .carousel-next:hover {
	background-position: 0px -80px;
}

#about-us .image-copytight {
	position: absolute;
	bottom: 10px;
	left: 10px;
	margin: 0px;
}
/* ---------------------------------------- (END) ABOUT US */

/* ================================================================== PROJECTS */
#projects  {
	position: static;
	height: auto;
	min-height: 100%;
	background: #000000;
}

#projects .wrapper-inner {
	padding: 118px 0px 0px;
}

#projects .wrapper-inner .content {
	padding: 0px 20px;
}

#projects .wrapper {
	max-width: 1650px;
}

#project-wrapper {
	margin: 15px 0px 150px;
	float: left;
}

#project-wrapper .work-rights {
	width: 100%;
	float: left;
	color: #ffffff;
}

#project-wrapper .project {
    position: relative;
    width: 100%;
	height: auto;
    margin: 5px;
    float: left;
    cursor: pointer;
    display: inline;
}
#project-wrapper .project-size-1 img,
#project-wrapper .project-size-2 img,
#project-wrapper .project-size-3 img {
	width: 100%;
	height: 100%;
}

#project-wrapper .project-size-1 {
	max-width: 430px;
	max-height: 430px;
}
#project-wrapper .project-size-2 {
	max-width: 210px;
	max-height: 210px;
}
#project-wrapper .project-size-3 {
	max-width: 100px;
	max-height: 100px;
}

#project-wrapper .project-single-stack {
	width: 100%;
	height: 100%;
	max-width: 110px;
	float: left;
}
#project-wrapper .project-double-stack {
	width: 100%;
	height: 100%;
	max-width: 220px;
	float: left;
}

#project-wrapper .project img {
	width: 100%;
	height: 100%;
	display: block;
}

#project-wrapper .project .project-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-position: center center, 0 0;
    background-repeat: no-repeat, repeat;
    display: none;
}

#project-wrapper .project-style-1 .project-overlay {
	background-image: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/vert-logo.png'), url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/vert-colour.png');
}
#project-wrapper .project-style-2 .project-overlay {
	background-image: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/email-logo.png'), url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/email-colour.png');
}
#project-wrapper .project-style-3 .project-overlay {
	background-image: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/feature-logo.png'), url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/feature-colour.png');
}
#project-wrapper .project-style-4 .project-overlay {
	background-image: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/joint-logo.png'), url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/joint-colour.png');
}
#project-wrapper .project-style-5 .project-overlay {
	background-image: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/music-logo.png'), url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/music-colour.png');
}
#project-wrapper .project-style-6 .project-overlay {
	background-image: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/tv-logo.png'), url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/tv-colour.png');
}
#project-wrapper .project-style-7 .project-overlay {
	background-image: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/website-logo.png'), url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/website-colour.png');
}

#project-wrapper .project .project-overlay span {
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: 36px;
	text-align: center;
}

/* ------------------------------------------------------------- PROJECT PAGES */
#project-page {
}

#project-page #main {
    display: table;
    width: 100%;
    min-height: 100%;
}

#project-page .project-position-wrapper {
    display: table-cell;
    vertical-align: middle;
}

#project-page .project-wrapper {
	position: relative;
	width: 100%;
	max-width: 640px;
	height: 100%;
	max-height: 560px;
	margin: auto;
}

#project-page .project-header,
#project-page .project-information {
	width: 100%;
	height: 80px;
	float: left;
	line-height: 80px;
}

#project-page .project-header {
	margin-bottom: 20px;
}

#project-page.project-theme-1 .project-header h1,
#project-page.project-theme-1 .vjs-default-skin .vjs-play-progress,
#project-page.project-theme-1 .vjs-default-skin .vjs-volume-level,
#project-page.project-theme-1 .vjs-default-skin .vjs-play-control:hover,
#project-page.project-theme-1 .vjs-default-skin .vjs-fullscreen-control:hover {
	background: #ce534d;
}
#project-page.project-theme-2 .project-header h1,
#project-page.project-theme-2 .vjs-default-skin .vjs-play-progress,
#project-page.project-theme-2 .vjs-default-skin .vjs-volume-level,
#project-page.project-theme-2 .vjs-default-skin .vjs-play-control:hover,
#project-page.project-theme-2 .vjs-default-skin .vjs-fullscreen-control:hover {
	background: #ee1053;
}
#project-page.project-theme-3 .project-header h1,
#project-page.project-theme-3 .vjs-default-skin .vjs-play-progress,
#project-page.project-theme-3 .vjs-default-skin .vjs-volume-level,
#project-page.project-theme-3 .vjs-default-skin .vjs-play-control:hover,
#project-page.project-theme-3 .vjs-default-skin .vjs-fullscreen-control:hover {
	background: #6a8454;
}
#project-page.project-theme-4 .project-header h1,
#project-page.project-theme-4 .project-header .project-close,
#project-page.project-theme-4 .vjs-default-skin .vjs-play-progress,
#project-page.project-theme-4 .vjs-default-skin .vjs-volume-level,
#project-page.project-theme-4 .vjs-default-skin .vjs-play-progress,
#project-page.project-theme-4 .vjs-default-skin .vjs-play-control:hover,
#project-page.project-theme-4 .vjs-default-skin .vjs-play-progress,
#project-page.project-theme-4 .vjs-default-skin .vjs-fullscreen-control:hover {
	background: #64b6b1;
}
#project-page.project-theme-5 .project-header h1,
#project-page.project-theme-5 .vjs-default-skin .vjs-play-progress,
#project-page.project-theme-5 .vjs-default-skin .vjs-volume-level,
#project-page.project-theme-5 .vjs-default-skin .vjs-play-control:hover,
#project-page.project-theme-5 .vjs-default-skin .vjs-fullscreen-control:hover {
	background: #46433a;
	color: #ffffff;
}
#project-page.project-theme-6 .project-header h1,
#project-page.project-theme-6 .vjs-default-skin .vjs-play-progress,
#project-page.project-theme-6 .vjs-default-skin .vjs-volume-level,
#project-page.project-theme-6 .vjs-default-skin .vjs-play-control:hover,
#project-page.project-theme-6 .vjs-default-skin .vjs-fullscreen-control:hover {
	background: #eedd10;
}
#project-page.project-theme-7 .project-header {
	background: #ee3c10;
}

#project-page .project-header h1 {
	width: 500px;
	padding: 0px 20px;
	float: left;
	font-size: 22px;
}

#project-page .project-header .project-close {
	position: relative;
	width: 80px;
	height: 80px;
	float: right;
	background-repeat: no-repeat;
	background-position: top left;
}
#project-page.project-theme-1 .project-header .project-close {
	background-image: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/vert-close.png');
}
#project-page.project-theme-2 .project-header .project-close {
	background-image: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/email-close.png');
}
#project-page.project-theme-3 .project-header .project-close {
	background-image: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/feature-close.png');
}
#project-page.project-theme-4 .project-header .project-close {
	background-image: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/joint-close.png');
}
#project-page.project-theme-5 .project-header .project-close {
	background-image: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/music-close.png');
}
#project-page.project-theme-6 .project-header .project-close {
	background-image: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/tv-close.png');
}

#project-page .project-header .project-close:hover {
	background-color: #ffffff;
	cursor: pointer;
}
#project-page.project-theme-5 .project-header .project-close:hover {
	background-color: #000000;
}

#project-page #project-video {
	width: 100%;
	height: 360px;
	float: left;
}

#project-page .project-information {
	margin-top: 20px;
	background: #ffffff;
}

#project-page .project-information h4 {
	margin: 0px;
	padding: 0px 20px;
	font-size: 20px;
}
/* ------------------------------------------------------- (END) PROJECT PAGES */
/* ============================================================ (END) PROJECTS */

/* ================================================================== OUR WORK */
#our-work {
	position: relative;
	height: 100%;
	background: url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/our-work.jpg') no-repeat;
	background-size: cover;
	background-attachment: fixed;
	overflow: hidden;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
	z-index: 1;
}

#digital,
#web {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10;
}
#digital,
#web {
	height: 100%;
	overflow: hidden;
	display: none;
}

.work-wrapper {
	height: 100%;
	margin: 0px;
	padding: 0px;
}

.section-digital {
	background: url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/bg-art-dept.png') repeat;
}
.section-web {
	background: url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/bg-web.png') repeat;
}

.section-digital:hover h2 {
	color: #ffea00;
}
.section-web:hover h2 {
	color: #ff3300;
}

.section-select h2 {
	margin: 0px;
	font-size: 312.5%;
	text-align: left;
}

.section-select p,
.section-select h3 {
	width: 100%;
	margin: 0px;
	font-size: 20px;
	line-height: 1.5;
	text-align: left;
}
.section-select p {
	margin-bottom: 1em;
}

.sub-heading-wrapper {
	position: relative;
	width: 100%;
	margin: auto;
	line-height: 1.5;
	text-align: left;
}

.section-digital .sub-heading-wrapper,
.section-web .sub-heading-wrapper {
	width: 100%;
	max-width: 440px;
}

#our-work-canvas {
	position: absolute;
	top: 0px;
	left: 0px;
}

.section-digital-hover,
.section-web-hover {
	display: none;
}

.section-digital-hover {
	position: absolute;
	top: 0px;
	left: 1px;
	background: #ffea00;
}
.section-web-hover {
	position: absolute;
	top: 0px;
	right: 0px;
	background: #ff3300;
}

/* -------------------------------------------------------------- WORK WRAPPER */
.work-wrapper {
	height: 100%;
	margin: 0px;
	padding: 0px;
}


.work-wrapper li,
.work-content-wrapper {
	float: left;
	display: inline;
}

.work-wrapper li {
	width: 20%;
	height: 100%;
}

.work-wrapper li .work-content-wrapper:hover h3 {
	color: #FFEA00;
}

.work-content-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	background-size: cover !important;
}

.work-content-1 {background: #999999;}
.work-content-2 {background: #7f7f7f;}
.work-content-3 {background: #666666;}
.work-content-4 {background: #4c4c4c;}
.work-content-5 {background: #333333;}

.work-wrapper .heading-wrapper {
	width: 100%;
	margin-top: 50%;
	padding: 10%;
	text-align: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	z-index: 10;
}

.work-wrapper img {
	width: 100%;
	max-width: 250px;
}

.work-wrapper h3 {
	margin-top: 25%;
	font-size: 36px;
	color: #ffffff;
}

.work-wrapper p {
	margin-top: 15%;
	color: #ffffff;
}

/* ---------------------------------------------- CONTROLS */
.section-close-wrapper {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 60px;
	height: 60px;
	background: #ffea00;
	line-height: 60px;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	z-index: 10;
}

.overlay-content-wrapper .section-close-wrapper {
	top: 0px;
	left: 0px;
}

.section-close-animate-wrapper {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 120px;
	height: 60px;
}

.section-close-wrapper img,
.section-close-wrapper .section-close {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 60px;
	height: 60px;
}

.section-close-wrapper .section-close {
	left: -60px;
}

.section-prev {
	left: 20px;
}
.section-next {
	right: 20px;
}
/* ---------------------------------------- (END) CONTROLS */
/* -------------------------------------------------------- (END) WORK WRAPPER */
/* ============================================================ (END) OUR WORK */

/* ---------------------------------------------------------------- CONTACT US */
.overlay-bg {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 500;
}

#contact-us {
	height: 100%;
	background: #000000;
}

#contact-us .wrapper {
	position: relative;
	width: 100%;
	max-width: 700px;
	height: 100%;
	display: table;
}

#contact-us .contact-wrapper {
	width: 100%;
	height: 100%;
	vertical-align: middle;
	display: table-cell;
}

#contact-us h2 {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
	font-size: 312.5%;
	color: #00ffcc;
	padding: 12px 15px 18px;
	background: url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/bg-70.png') repeat;
	line-height: 1;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#contact-us .wrapper form {
	position: relative;
	width: 100%;
	max-width: 602px;
	float: right;
}

#contact-us .wrapper form .input-wrapper {
	width: 100%;
	padding: 20px;
	float: left;
	background: white;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#contact-us .wrapper form input,
#contact-us .wrapper form textarea {
	width: 534px;
	padding: 0px 12px;
	float: left;
	background: none;
	font-family: verdana, arial, sans-serif;
	font-size: 18px;
	line-height: 1.3;
	border: 2px solid #e0e0e0;
	box-shadow: none !important;
	border-radius: 0px !important;
}
#contact-us .wrapper form input {
	height: 42px;
	line-height: 42px;
	margin-bottom: 20px;
}
#contact-us .wrapper form textarea {
	margin: 0px;
	resize: none;
	overflow: auto;
	padding: 10px 12px;
}

#contact-us .wrapper form input[type="submit"],
#contact-us .wrapper form input[type="reset"] {
	width: 290px;
	height: 46px;
	margin: 19px 0 0;
	background: #ffffff;
	font-family: BebasRegular, arial, sans-serif;
	border: 0px none;
}
#contact-us .wrapper form input[type="submit"]:hover,
#contact-us .wrapper form input[type="reset"]:hover {
	color: #00b3ff;
}

#contact-us .wrapper form input[type="reset"] {
	float: right;
	clear: none;
}

::-webkit-input-placeholder {
	font-family: BebasRegular, arial, sans-serif;
  	color: #000000;
}

:-moz-placeholder {
	font-family: BebasRegular, arial, sans-serif;
  	color: #000000;
}

::-moz-placeholder {
	font-family: BebasRegular, arial, sans-serif;
  	color: #000000;
}

:-ms-input-placeholder {
	font-family: BebasRegular, arial, sans-serif;
  	color: #000000;
}
/* ----------------------------------------------- OVERLAY */
.overlay-bg {
	background: url('https://c57cae19919c5d537aae-251aaf205e092fa96f98d91007ab17df.ssl.cf3.rackcdn.com/bg-70.png') repeat;
}

#contact-response {
	position: fixed;
	top: 50% !important;
	left: 50% !important;
	width: 500px !important;
	height: 275px !important;
	margin-top: -138px !important;
	margin-left: -250px !important;
	background: #ffffff;
	display: block !important;
}

#contact-response .overlay-content {
	width: 100% !important;
	height: 100% !important;
	background: #ffffff;
}

#contact-response.overlay-content-wrapper {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #ffffff;
	display: none;
	z-index: 1000;
}

#contact-response .overlay-close {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 24px;
	height: 24px;
	background: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/close-white.png') no-repeat top left;
	cursor: pointer;
	z-index: 100;
}

#contact-response.overlay-content-wrapper .overlay-content {
	width: 100%;
	height: 100%;
	background: #ffffff;
	display: table;
	color: #000000;
}
#contact-response.overlay-content-wrapper .overlay-content .content {
	text-align: left;
	vertical-align: middle;
	display: table-cell;
}
/* ----------------------------------------- (END) OVERLAY */

/* ------------------------------------------- SOCIAL LINK */
.footer-social-links {
	position: relative;
	width: 79px;
	float: left;
	z-index: 10;
}

.footer-social-links .footer-social-link {
	width: 100%;
	height: 100%;
	margin-top: 20px;
	float: left;
}
.footer-social-links .footer-social-link:first-child {
	margin-top: 0px;
}

.footer-social-links .social-link {
	width: 79px;
	height: 79px;
	float: left;
	overflow: hidden;
	background: #ffffff url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/social-icons-sprite.png') no-repeat;

}
.footer-social-links .social-link:hover {
	cursor: pointer;
}

.footer-social-links .social-link-facebook {
	background-position: 0px 0px;
}
.footer-social-links .social-link-facebook:hover {
	background-position: -79px 0px;
}
.footer-social-links .social-link-twitter {
	background-position: 0px -79px;
}
.footer-social-links .social-link-twitter:hover {
	background-position: -79px -79px;
}
.footer-social-links .social-link-youtube {
	background-position: 0px -158px;
}
.footer-social-links .social-link-youtube:hover {
	background-position: -79px -158px;
}
.footer-social-links .social-link-linkedin {
	background-position: 0px -237px;
}
.footer-social-links .social-link-linkedin:hover {
	background-position: -79px -237px;
}
/* ------------------------------------- (END) SOCIAL LINK */

/* ------------------------------------------------- VIDEO */
#video-wrapper {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#video-contact {
	position: absolute;
}
/* ------------------------------------------- (END) VIDEO */
/* ---------------------------------------------------------- (END) CONTACT US */
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: (END) MAIN */


/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: FOOTER */
#footer .footer-copyright {
	padding-right: 10px;
	float: right;
	z-index: 1000;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: (END) FOOTER */


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA QUERIES */
@media only screen and (max-width : 1649px) {

	#projects .wrapper {
		max-width: 990px;
	}

}

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

	.paw {
		left: 20px;
	}

	#about-us .wrapper .about-us-copy {
		width: 100%;
		max-width: 100%;
	}

	#about-us .wrapper .about-us-clients-wrapper {
		display: none;
	}

}

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

	.section-digital .sub-heading-wrapper > *,
	.section-web .sub-heading-wrapper > * {
		width: auto;
		padding: 0px 10px;
		font-size: 18px;
	}

}

@media only screen and (max-height : 790px) {

	#header {
		height: 70px;
	}

}

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

	body {
		font-size: 75.0%;
	}

	.overlay-copy {
		font-size: 16px;
	}

}

@media only screen and (max-height : 735px) {
	h1,
	h2 {
		font-size: 40px;
	}
}

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

	#contact-us .wrapper form {
		position: relative;
		width: 100%;
		max-width: 700px;
	}

	#contact-us .wrapper form input,
	#contact-us .wrapper form textarea {
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#contact-us .wrapper form input[type="submit"],
	#contact-us .wrapper form input[type="reset"] {
		width: 48%;
	}

	.footer-social-links {
		position: relative;
		width: 100%;
		margin-top: 20px;
		display: table;
	}

	.footer-social-links .footer-social-link {
		width: 25%;
		margin-top: 0px;
		display: table-cell;
		text-align: center;
	}

	.footer-social-links .social-link {
		float: none;
		display: inline-block;
	}

}

@media only screen and (max-width : 680px) {
	#header {
		height: 60px;
	}

	#navigation-wrapper {
		width: 30px;
		height: 20px;
		margin: 20px 15px;
		background: url('https://faff74f5ec85de587811-f0d5b4e208331a2a1e09c143b1b79283.ssl.cf3.rackcdn.com/mobile-navigation.png') no-repeat top left;
		display: block;
	}

	.paw {
		left: 15px;
		width: 30px;
		height: 30px;
		margin-top: -15px;
	}
}

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

	body {
		font-size: 62.5%;
	}

	.overlay-content-wrapper .content {
		padding: 10px;
	}

	.overlay-copy-wrapper {
		display: none;
	}

	html,
	body,
	#main,
	.section-bg-wrapper,
	.section-wrapper {
		min-height: 100%;
	}
	.section-bg-wrapper,
	.section-wrapper,
	.work-wrapper {
		height: auto;
	}

	.section-bg-wrapper {
		background: #ffffff !important;
	}

	#about-us .wrapper > .content {
		margin-top: 70px;
	}

	#about-us .wrapper .about-us-copy-wrapper {
		box-shadow: none;
	}

	#about-us .wrapper .recommendations-wrapper {
		display:  none;
	}

	#projects .wrapper-inner {
		padding-top: 70px;
	}

	#project-wrapper .project-size-3 {
		display: none;
	}

	#project-wrapper .project-single-stack,
	#project-wrapper .project-double-stack,
	#project-wrapper .project-size-1 {
		max-width: 50%;
		max-height: 50%;
	}

	#project-wrapper .project-size-2 {
		max-width: 100%;
		max-height: 100%;
	}

	#project-wrapper .project {
		margin: 0px;
	}

	#project-wrapper .project img {
		padding: 10px 5px 0px 5px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#project-wrapper .project .project-overlay span {
		display: none;
	}

	.section-select {
		top: 0px;
		width: 100%;
		height: 50%;
		display: table;
	}

	.section-digital:hover h2 {
		color: #ffea00;
	}
	.section-web:hover h2 {
		color: #ff3300;
	}

	.section-select h2 {
		font-size: 25px !important;
		text-align: center;
	}

	.sub-heading-wrapper {
		top: auto !important;
		padding: 0px 20px;
		display: table-cell;
		vertical-align: middle;
	}
	.sub-heading-wrapper h3,
	.sub-heading-wrapper p {
		display: none;
	}

	.section-close-wrapper {
		top: 10px;
		left: 10px;
	}






	.section-digital:hover h2 {
		color: #ffea00;
	}
	.section-web:hover h2 {
		color: #ff3300;
	}






	#contact-response {
		width: 100% !important;
		max-width: 500px !important;
		margin-left: -50% !important;
	}

	#contact-response .overlay-close {
		top: 15px;
		right: 15px;
	}

	#contact-response.overlay-content-wrapper .overlay-content .content p {
		font-size: 16px;
	}

	#contact-us .wrapper {
		margin-top: 70px;
		background: #000000;
	}

	#contact-us h2 {
		margin-bottom: 0px;
	}
}

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

	#project-wrapper .project-single-stack,
	#project-wrapper .project-double-stack,
	#project-wrapper .project-size-1,
	#project-wrapper .project-size-2 {
		max-width: 100%;
		max-height: 100%;
	}

	#project-wrapper .project img {
		padding: 5px 5px 0px;
	}

}
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::: (END) MEDIA QUERIES */