/* =Table of Contents
--------------------------------------------------------------
	=Common Styles
	=Loader
	=Typography & Vertical Flow
	=Navigation
	=Slider
	=Gallery
	=Quotes Slider & Client Boxes
	=Process Slider
	=Team List
	=Full Screen Video
	=Contact
	=Portfolio
	=Footer
	===SINCE v1.1
	=Navigation

	=Responsive Styles
*/


/* =Common Styles
-------------------------------------------------------------- */
html { overflow-y: scroll!important; }



.inclusive-sans

body {
  font-family: "Inclusive Sans", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal,16px 'inclusive Sans', sans-serif;
	background: #fff;
	color: #616569;
	
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;

	overflow-x: hidden;
}


.el-messiri
h1{
  font-family: "El Messiri", serif;
  font-optical-sizing: auto;
  font-weight: 300;
}

::-moz-selection { background: #7d00ff; color: #fff; }
	 ::selection { background: #7d00ff; color: #fff; }


/* =Loader
-------------------------------------------------------------- */
#pageloader {
	background-color:#fff;

	position:absolute;
	z-index:99999999999999;
	width:100%;
	height:100%;
	left:0;
	right:0;
	top:0;
	bottom:0;
}

.pageloader-content {
	position: absolute;
	margin: 0;
	width: 200px;
	height: 2px;
	opacity: 1;
	top: 50%;
	left: 50%;
	margin-top: -1px;
	margin-left: -100px;
	overflow: hidden;
}

.pageloader-fade {
	opacity:0 !important;
	
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

.pageloader-hide {
	display:none;
}

.progress {
	display: block;
	position: absolute;
	bottom: 0;
	overflow: hidden;
	width: 200px;
	height: 1px;
	left: -202px;
	background-color: #330066;
	-webkit-animation: loader-anim 1s 0s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -moz-animation: loader-anim 1s 0s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
    animation: loader-anim 1s 0s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86)
}

.pageloader-content-hide {
	opacity: 0!important;
	
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-o-transition: all .25s ease;
	-ms-transition: all .25s ease;
	transition: all .25s ease;
}

/* Animations */
html.html-onload .load-in {
	opacity: 0;
}

html.html-loaded .load-in {
	animation-duration: 1s;
	-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
}

html.no-csstransitions .load-in {
	opacity: 1;
}

html.html-onload .load-in-secondary {
	opacity: 0;
}

html.html-loaded .load-in-secondary {
	animation-duration: 1.5s;
	-webkit-animation-name: fadeInHalf;
			animation-name: fadeInHalf;
}

html.no-csstransitions .load-in-secondary {
	opacity: 1;
}

@keyframes loader-anim {
    0% {
        left: -202px
    }

    100% {
        left: 202px
    }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate3d( 0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInHalf {
  from {
    opacity: 0;
    transform: translate3d( 0, -20%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =Typography & Vertical Flow
-------------------------------------------------------------- */
p {
	font-size: 18px;
    font-weight:100;
	line-height: 28px;
}

p.sub-heading {
	font-size: 22px;
    font-weight:100;
	line-height: 1.5em;
}

p.small {
	font-size: 12px;
    line-height: 18px;
	color: #fff;
}

p.footer {
	font-size: 12px;
    line-height: 20px;
	color: #fff;
}

p.footer-numbers {
	font-size: 14px;
    line-height: 20px;
	color: #fff;
}
li {
	font-size: 18px;
    font-weight:100;
	line-height: 21px;
    text-align: left;
}
h1 {
	font-family:"El Messiri", serif;
    font-weight: 100;
    font-size: 42px;
	line-height: 1.1em;
    text-shadow: 1px 3px 3px 
 rgba(0,0,0,.25);
}

 h2, h3 {
	font-family: 'inclusive Sans', sans-serif;
	font-weight: 300;
	color: #330066;
	padding-bottom: 15px;
}

h4, h5, h6 {
	font-family: 'inclusive Sans', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	padding-bottom: 10px;
	line-height: 1em;
}

.accent h1 { color: #7d00ff; }
.accent h2 { color: #7d00ff; }

.hero-alt h1 { font-size: 42px; }

h2 { font-size: 28px; letter-spacing: -0.01em;}
h3 { font-size: 14px; letter-spacing: -0.01em; line-height: 1em; }

h4 {
	color: #330066;
	letter-spacing: 0.186em;
	font-size: 12px;
	padding-bottom: 15px;
}

h5 {
	color: #7d00ff;
	letter-spacing: 0.186em;
	font-size: 10px;
}

h6 {
	color: #fff;
	letter-spacing: 0.186em;
	font-size: 20px;
}

.dark h1, .dark h2, .dark h3, .dark p, .dark p.sub-heading { color: #fff; }
.dark h4, .dark h5, .dark h6 { color: #fff; }
.center { text-align: center; }
.center-mobile { text-align: center; }
.padded { padding-top: 40px; padding-bottom: 40px; }
.extra-padded { padding-top: 60px; padding-bottom: 60px; }
.padded-top { padding-top: 30px; }
.padded-bottom { padding-bottom: 20px; }
.relative { position: relative; }
.no-overflow { overflow: hidden; }

.absolute {
	width: 100%;
	left: 0;
	position: absolute;
	z-index: 4;
}

.absolute.bottom { bottom: -20px; }

.full-width {
	width: 100%;
	background-position: top;
	background-size: cover;
	background-repeat: no-repeat;
}

.full-width.accent { background: #7d00ff; }
.full-width.accent-light{ background: #eef9ff; }

.separated {
	border-top: 1px solid #E5E5E5;
	border-bottom: 1px solid #E5E5E5;
}

.separated.top {
	border-top: 1px solid #E5E5E5;
	border-bottom: none;
}

.separated.bottom {
	border-top: none;
	border-bottom: 1px solid #E5E5E5;
}

.separator {
	display: inline-block;
	width: 20px;
	height: 1px;
	background: #330066;
}

/* Buttons & Links */
a {
	font-weight: 300;
	letter-spacing: 0.186em;
	font-size: 16px;
	text-transform: uppercase;
	color: #330066;

	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
}

a:hover { color: #7d00ff; }

a.contact {
    font-family: 'inclusive Sans', sans-serif;
    font-size: 14px; 
    letter-spacing: 0.01em;
    line-height: 2.5em;
	font-weight: 300;
    text-transform: lowercase;
	color: #7d00ff;

	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
}

a.contact:hover { color: #330066; }

a.contact.numbers{
    font-family: sans-serif;
    font-size: 20    px; 
    letter-spacing: 0.02em;
    line-height: 2.5em;
	font-weight: 300;
    text-transform: lowercase;
	color: #7d00ff;

	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
}

a.contact:hover { color: #330066; }


a.button {
	display: inline-block;
	cursor: pointer;
	font-weight: 500;
	letter-spacing: 0.186em;
	font-size: 10px;
	text-transform: uppercase;
	padding: 16px 50px;
	color: #330066;
	border: 2px solid rgba(17,0,50,.10);
	-webkit-border-radius: 100px;
	   -moz-border-radius: 100px;
			border-radius: 100px;

	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
}

a.button:hover {
	border: 2px solid rgba(17,0,50,1);
}

a.button.dark {
	color: #fff;
	border: 2px solid rgba(255,255,255,.10);
}

a.button.dark:hover {
	border: 2px solid rgba(255,255,255,1);
}

a.button.accent {
	border: none;
	color: #fff;
	background: #7d00ff;

	-webkit-box-shadow: 0px 11px 16px 3px rgba(0, 0, 0, 0.20);
	   -moz-box-shadow: 0px 11px 16px 3px rgba(0, 0, 0, 0.20);
			box-shadow: 0px 11px 16px 3px rgba(0, 0, 0, 0.20);
}

a.button.accent:hover { background: #7d00ff; }


/* Misc Elements */
.hero-alt { overflow: hidden; }
.call-to-action .button { margin-top: 25px; }
.call-to-action { background-position: center!important; }
.icon-box .icon { display: block; font-size: 45px; margin-bottom: 10px; color: #330066; }
.counter-box .icon { display: block; font-size: 45px; color: #7d00ff; margin-bottom: 10px; }
.counter-box.reverse .icon { color: #fff; }
.avatar { text-align: center; }
.avatar img { margin-bottom: -180px; }

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	h1 { font-size: 80px; }
	.hero-alt h1 { font-size: 60px; }
	h2 {font-size: 32px;}
	h3 { font-size: 22px; }
	h4 { font-size: 12px; padding-bottom: 25px; }
	h5 { font-size: 11px; }
	h6 { font-size: 9px; }
	p.sub-heading { font-size: 18px; }
	a { font-size: 11px; }
    a.contact { font-size: 14px; }
	a.button {
		font-size: 11px;
		padding: 18px 50px;
	}
	.padded { padding-top: 60px; padding-bottom: 60px; }
	.extra-padded { padding-top: 85px; padding-bottom: 85px; }
	.padded-top { padding-top: 50px; }
	.padded-bottom { padding-bottom: 20px; }
	.bordered {
		border: 10px solid #fff;
		border-bottom: none;
	}
	.full-width {
		border-right: 10px solid #fff;
		border-left: 10px solid #fff;   
	}
	.avatar img { margin-bottom: -80px; }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	h1 { font-size: 100px; }
	.hero-alt h1 { font-size: 80px; }
	h2 { font-size: 36px; }
	h3 { font-size: 24px; }
	p.sub-heading { font-size: 18px; }
	.center-mobile { text-align: left; }
	.avatar {
		position: absolute;
		bottom: -4px;
		right: 40px;
	}
	.avatar img { margin: 0; }
}
a.contact{ font-size: 16px; }
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	.avatar {
		position: absolute;
		bottom: -80px;
		right: 0;
	}
}
a.contact{ font-size: 18px; }
/* =Navigation
-------------------------------------------------------------- */
.logo { display: inline-block; }
/* Mobile Styles */
header.mobile {
	position: fixed;
	z-index: 999;
	width: 100%;
	top: 0;
	left: 0;
}

nav.mobile {
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	padding: 15px 0px 10px;
	-webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.20);
	   -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.20);
			box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.20);
}

nav.mobile .container { position: relative; }

nav.mobile .logo-dark { margin-left: 0; position: initial; }
nav.mobile .logo-light { margin-left: -999em; position: absolute; }

nav.mobile .menu-button {
	position: absolute;
	cursor: pointer;
	display: block;
	width: 25px;
	height: 30px;
	top: 0;
	right: 20px;
	margin-top: 10px;
}

.menu-button .before, .menu-button .main, .menu-button .after {
	display: block;
	width: 22px;
	height: 2px;
	background: #7d00ff;
	margin-bottom: 4px;
	-webkit-transition: all .33s ease;
	   -moz-transition: all .33s ease;
	     -o-transition: all .33s ease;
	    -ms-transition: all .33s ease;
			transition: all .33s ease;
}

.menu-button .main { width: 22px; }
.menu-button .after { width: 22px; margin-bottom: 0px; }

.menu-button:hover .before {
	-webkit-transform: translateY(-2px);
	   -moz-transform: translateY(-2px);
		-ms-transform: translateY(-2px);
		 -o-transform: translateY(-2px);
			transform: translateY(-2px);
}

.menu-button:hover .after {
	-webkit-transform: translateY(2px);
	   -moz-transform: translateY(2px);
		-ms-transform: translateY(2px);
		 -o-transform: translateY(2px);
			transform: translateY(2px);
}

.menu-button.active .main { display: none; }

.menu-button.active .before {
	width: 20px;
	margin: 0;
	-webkit-transition:	all 0.5s;
	   -moz-transition: all 0.5s;
	    -ms-transition: all 0.5s;
		 -o-transition: all 0.5s;
			transition: all 0.5s;
	-webkit-transform: translateY(2px) rotate(45deg);
	   -moz-transform: translateY(2px) rotate(45deg);
		-ms-transform: translateY(2px) rotate(45deg);
		 -o-transform: translateY(2px) rotate(45deg);
			transform: translateY(2px) rotate(45deg);
}

.menu-button.active .after {
	width: 20px;
	margin: 0;
	-webkit-transition:	all 0.5s;
	   -moz-transition: all 0.5s;
	    -ms-transition: all 0.5s;
		 -o-transition: all 0.5s;
			transition: all 0.5s;
	-webkit-transform: translateY(0) rotate(-45deg);
	   -moz-transform: translateY(0) rotate(-45deg);
		-ms-transform: translateY(0) rotate(-45deg);
		 -o-transform: translateY(0) rotate(-45deg);
			transform: translateY(0) rotate(-45deg);
}

nav.mobile .nav-menu {
	display: none;
	margin-top: 10px;
}

nav.mobile .nav-menu li {
	display: block;
	padding: 8px 0px;
} 

nav.mobile .nav-menu li a {
	color: #330066;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.8px;
	text-transform: uppercase;

	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	     -o-transition: all .25s ease;
	    -ms-transition: all .25s ease;
			transition: all .25s ease;
}

nav.mobile .nav-menu li a:hover { opacity: .5; }


/* Dropdown */
nav.mobile .nav-menu .drop {
	display: none;
}

nav.mobile .nav-menu .dropdown:hover > .drop {
	display: block;
}

nav.mobile .nav-menu .drop {
	margin-top: 10px;
	background: #330066;
}

nav.mobile .nav-menu .drop li {
	margin: 0px;
	padding: 15px 0px 0px 20px;
}

nav.mobile .nav-menu .drop li:last-of-type {
	padding-bottom: 20px;
}

nav.mobile .nav-menu .drop a { color: #fff; font-size: 10px; }


/* Desktop Styles */
header.desktop {
	position: absolute;
	z-index: 999;
	width: 100%;
	top: 0;
	left: 0;
}

nav.desktop {
	padding-top: 45px; 
}

nav.desktop .menu-button { display: none; }

nav.desktop .logo-dark { margin-left: -999em; position: absolute; }
nav.desktop .logo-light { margin-left: 0; position: initial; }
nav.desktop.reverse .logo-light { margin-left: -999em; position: absolute; }
nav.desktop.reverse .logo-dark { margin-left: 0; position: initial; }


nav.desktop .nav-menu { display: block!important; }

nav.desktop .nav-menu li a {
	color: #fff;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.8px;
	text-transform: uppercase;

	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	     -o-transition: all .25s ease;
	    -ms-transition: all .25s ease;
			transition: all .25s ease;
}

nav.desktop.reverse .nav-menu li a { color: #330066; }

nav.desktop .nav-menu li a:hover { opacity: .5; }

nav.desktop .nav-menu {
	float: right;
}

nav.desktop .nav-menu li {
	position: relative;
	display: inline-block;
	margin: 0px 10px;
}

nav.desktop .nav-menu li a {
	display: block;
	padding: 8px 10px 16px;
}

nav.desktop .nav-menu li:last-of-type { margin-right: 0px; }
nav.desktop .nav-menu li:last-of-type a { padding-right: 0px; }


/* Dropdown */
nav.desktop .nav-menu .drop {
	display: none;
}

nav.desktop .nav-menu .dropdown:hover > .drop {
	display: block;
}

nav.desktop .nav-menu .drop {
	position: absolute;
	top: 37px;
	left: -8px;
	z-index: 99;
	background: #fff;

	-webkit-box-shadow: 0px 11px 16px 3px rgba(0, 0, 0, 0.20);
	   -moz-box-shadow: 0px 11px 16px 3px rgba(0, 0, 0, 0.20);
			box-shadow: 0px 11px 16px 3px rgba(0, 0, 0, 0.20);
}

nav.desktop.reverse .nav-menu .drop { background: #2F2C34; }

nav.desktop .nav-menu .drop li {
	display: block;
	margin: 8px 100px 8px 20px;
	padding: 0px;
}

nav.desktop .nav-menu .drop li:first-of-type {
	margin-top: 10px;
}

nav.desktop .nav-menu .drop li:last-of-type {
	margin-bottom: 16px;
}

nav.desktop .nav-menu .drop li a {
	font-size: 10px;
	display: inline-block;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	color: #330066;
}

nav.desktop.reverse .nav-menu .drop li a { color: #fff; }

/* =Gallery
-------------------------------------------------------------- */
.filters { display: none; }

.thumbnails {
	position: relative;
	margin: 25px 5px 0px 5px;
}

.thumbnails.grid-fluid { margin: 10px 5px 5px 5px; }

.thumbnail {
	text-transform: none;
	transition: none;
	width: 100%;
	display: block;
	padding: 5px;
	overflow: hidden;
}

.thumbnail img {
	display: block;
	width: 100%;
}

.thumbnail video {
    width: 100% !important;
    height: auto !important;
}

.thumbnail .overlay {
	position: absolute;
	display: block;
	overflow: hidden;
	z-index: 1;
	opacity: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.9);
	-webkit-transition: opacity .40s ease-in-out;
	   -moz-transition: opacity .40s ease-in-out;
	     -o-transition: opacity .40s ease-in-out;
	    -ms-transition: opacity .40s ease-in-out;
			transition: opacity .40s ease-in-out;
}

.thumbnail:hover .overlay { opacity: 1; }

.thumbnail .overlay .thumb-info {
	position: absolute;
	left: -100%;
	bottom: 15px;
	-webkit-transition: all .35s ease-in-out;
	   -moz-transition: all .35s ease-in-out;
	     -o-transition: all .35s ease-in-out;
	    -ms-transition: all .35s ease-in-out;
			transition: all .35s ease-in-out;
}

.thumbnail:hover .overlay .thumb-info { left: 15px; }

.accent container { color: #eef9ff; }

/* Masonry Styles * /


/* Landscape Phones */ 
@media only screen and (min-width : 480px) {
	.thumbnail { width: 50%; }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	.filters { 
		margin-top: 55px;
		display: block;
		text-align: center;
	}

	.filters.no-center { text-align: left; }

	.filters li { 
		display: inline-block;
		cursor: pointer;
		font-family: 'Inclusive Sans', sans-serif;
		text-transform: uppercase;
		font-weight: 300;
		line-height: 1em;
		font-size: 11px;
		letter-spacing: 0.186em;
		margin-left: 12px;

		-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	     -o-transition: all .25s ease;
	    -ms-transition: all .25s ease;
			transition: all .25s ease;
	}

	.filters li::after {
		display: inline-block;
		content: "/";
		margin-left: 12px;
		color: #616569!important;
	}

	.filters li:last-of-type::after { display: none; }

	.filters li.is-checked, .filters li:hover { color: #330066; }

	.masonry .thumbnail { padding: 10px; }
	.masonry .absolute.bottom { bottom: 5px; }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.thumbnail { width: 33.33%; }
	.masonry .thumbnail { width: 50%; }

	.thumbnail .overlay .thumb-info { bottom: 40px; }
	.thumbnail:hover .overlay .thumb-info { left: 40px; }
}

/* =Footer
-------------------------------------------------------------- */
footer {
	position: relative;
	background: #330066;
	width: 100%;
	color: #fff;
	font-weight: 100;
	font-size: 16px;
}

footer.accent { background: #7d00ff; }

footer li {
	margin-bottom: 13px;
}

footer a.contact {
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0.01em;
	color: #fff;
	opacity: 1;
	-webkit-transition: opacity .40s ease-in-out;
	   -moz-transition: opacity .40s ease-in-out;
	     -o-transition: opacity .40s ease-in-out;
	    -ms-transition: opacity .40s ease-in-out;
			transition: opacity .40s ease-in-out;
}
footer a {
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0.01em;
	color: #fff;
	opacity: 1;
	-webkit-transition: opacity .40s ease-in-out;
	   -moz-transition: opacity .40s ease-in-out;
	     -o-transition: opacity .40s ease-in-out;
	    -ms-transition: opacity .40s ease-in-out;
			transition: opacity .40s ease-in-out;
}

footer a:hover { opacity: .5; color: #cc99ff; }

.social-list i { font-size: 13px; }
.social-list li { display: inline-block; padding-right: 20px; }
.social-list li:last-of-type { padding-right: 0px; }

#top { display: none; }

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	footer {
		border-left: 10px solid #fff;
		border-right: 10px solid #fff;
		border-bottom: 10px solid #fff; 
	}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	#top {
		display: block;
		padding: 20px;
		position: absolute;
		bottom: 50px;
		right: 50px;
		text-indent: -999em;
		width: 15px;
		height: 9px;
		background: url(../images/arrow-up.png) no-repeat center;
		background-size: 15px 9px;
		opacity: .4;

		-webkit-transition: all .35s ease;
		   -moz-transition: all .35s ease;
		     -o-transition: all .35s ease;
		    -ms-transition: all .35s ease;
				transition: all .35s ease;

		

		-webkit-animation: bounce 1.5s infinite; 
		   -moz-animation: bounce 1.5s infinite; 
			-ms-animation: bounce 1.5s infinite;
			 -o-animation: bounce 1.5s infinite;
				animation: bounce 1.5s infinite;
	}

	#top:hover { opacity: 1; }
}



/* =Since v1.1
-------------------------------------------------------------- */
.pill { display: none; }

.hero-creative .button { margin-top: 30px; }

.hero-creative {
	display: block;
	background: transparent;
	position: relative;
	width: 100%;
	z-index: 2;
	padding-top: 125px;
	padding-bottom: 100px;
}

#scene {
	position: absolute!important;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: -1;
}

.layer {
	display: block!important;
	position: absolute!important;
}

.depth-1 {
	position: absolute!important;
	top: -100px!important;
	left: 0!important;
	width: 226px;
}

.depth-2 {
	position: absolute!important;
	top: auto!important;
	left: auto!important;
	bottom: 50px!important;
	right: -100px!important;
	width: 212px;
}

.depth-3 {
	position: absolute!important;
	top: auto!important;
	bottom: -120px!important;
	left: 0!important;
	width: 138px;
}

#creative-gallery { margin-top: -30px; }
#creative-gallery .filters { display: none; }

/* Landscape Phones */ 
@media only screen and (min-width : 480px) {
	.hero-creative {
		padding-top: 40px;
		padding-bottom: 50px; 
	}
	.depth-1 {
		top: -100px!important;
		left: -100px!important;
	}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	.hero-creative {
		padding-top: 200px;
		padding-bottom: 300px; 
	}
	.depth-1 {
		top: 50px!important;
		left: -200px!important;
		width: 463px;
	}
	.depth-2 {
		top: 50px!important;
		width: 368px;
	}
	.depth-3 {
		bottom: -100px!important;
		left: auto!important;
		right: 100px!important;
		width: 245px;
	}

	#creative-gallery { margin-top: -150px; }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.pill {
		display: block;
		color: #fff;
		font-size: 7px;
		background: #7d00ff;
		padding: 5px 8px;
		position: absolute;
		top: 2px;
		right: -40px;

		-webkit-border-radius: 100px;
		   -moz-border-radius: 100px;
				border-radius: 100px;

	}

	.hero-creative h1 { font-size: 72px; }

	.hero-creative {
		padding-top: 220px;
		padding-bottom: 190px; 
	}

	.depth-1 {
		top: 0px!important;
		left: -140px!important;
	}

	#creative-gallery .filters { display: block; z-index: 3; }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	.hero-creative {
		padding-top: 240px;
		padding-bottom: 230px; 
	}
	.depth-1 {
		top: 7%!important;
		left: 0px!important;
	}
	.depth-2 {
		top: 50px!important;
		right: -180px!important;
		width: 461px;
	}
	.depth-3 {
		width: 270px;
		right: 180px!important;
	}
}

/* HD */
@media only screen and (min-width : 1350px) {
	.hero-creative {
		padding-top: 240px;
		padding-bottom: 400px; 
	}
	.depth-1 {
		top: 7%!important;
		left: -80px!important;
		width: 568px;
	}
	.depth-2 {
		top: 50px!important;
		right: -150px!important;
		width: 561px;
	}
	.depth-3 {
		width: 412px;
		right: 240px!important;
		bottom: -200px!important;
	}

	#creative-gallery { margin-top: -200px; }
}

/* Landscape Phones */ 
@media only screen and (min-width : 480px) {
	.insta-img { 
		width: 25%;
		padding-top: 25%;
	}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.insta-img { 
		width: 16.666%;
		padding-top: 16.666%;
	}
}


/* =Responsive Styles
-------------------------------------------------------------- */
/* Landscape Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}