/* 
	-----------------
	Custom CSS Styles
	----------------- 
*/

/* Override for minimum screen width navigation */

@media (max-width: 900px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
		margin-top: 7.5px;
	}
	.navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
  		display:block !important;
	}
}

* 
{
	font-family: 'Comfortaa';
	font-size: 15px;
}

h2
{
	font-family: 'Roboto', sans-serif;
	text-align: center;
	text-transform: uppercase;
	font-size: 95px;
	line-height: 63px;
	font-weight: 700; 
	font-style: italic;
	margin: -1px 0 40px -5px;
	padding: 0;
}

@media (max-width: 480px) 
{
	h2
	{
		line-height: 60px;
	}

	.navbar-brand
	{
		margin-left: 20px !important;
	}
}

h3
{
	font-family: 'Roboto', sans-serif;
	text-align: center;
	text-transform: uppercase;
	font-size: 60px;
	line-height: 63px;
	font-weight: 700; 
	font-style: italic;
	margin: 0 0 20px -5px;
	padding: 0;	
	color: #231f20;
}

div#navigation
{
	background: none !important;
	border-color: transparent !important;
	border: none !important;
	position: fixed !important;
	top: 0;
	left: 0px;
	right: 0;
	z-index: 300;
	width: 100%;
	height: 74px;
	-webkit-transform: translateZ(0);

}

.no-transition {
  -webkit-transition: height 0.001s;
  -moz-transition: height 0.001s;
  -ms-transition: height 0.001s;
  -o-transition: height 0.001s;
  transition: height 0.001s;
}

div#navigation .nav-fade
{
	background: #231f20;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
}

	div#navigation .navbar-header
	{
		margin-left: 36px;
	}

		div#navigation button
		{
			margin-top: 21px;
			background: #8389cc;
			padding: 7px 7px 7px 7px;
			border: none;
			position: relative;
			width: 39px;
			height: 28px;
			text-align: center;
		}

		div#navigation button i.fa-chevron-right
		{
			font-size: 24px;
			position: absolute;
			top: 1px;
			left: 11px;
			color: #fff;
			margin-top: 2px;
			display: none;
		}

		div#navigation button i.fa-bars
		{
			font-size: 24px;
			position: absolute;
			top: 0;
			left: 9px;
			color: #fff;
			margin-top: 2px;
		}

		div#navigation button.collapsed
		{
			background: #8389cc;
		}

	div#navigation li
	{
		height: 74px;
	}

	div#navigation li a, div#navigation li.active a
	{
		line-height: 44px;
		color: #f5f3f1;
		padding: 15px 20px 15px 20px;
		background-color: transparent;
		-o-transition: color .2s ease-in-out;
		-ms-transition: color .2s ease-in-out;
		-moz-transition: color .2s ease-in-out;
		-webkit-transition: color .2s ease-in-out;
		transition: color .2s ease-in-out;
	}

	div#navigation li.active
	{
		background-color: transparent !important;
	}
	
	div#navigation li a:hover, div#navigation li.active a:hover
	{
		color: #8389cc;
	}

	div#navigation .navbar-nav
	{
		margin-top: 0;
	}

	div#navigation .navbar-right li a
	{
		padding: 15px 25px 15px 25px;
		position: relative;	
	}

	div#navigation .navbar-right li a span
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		text-indent: -9999px;
		opacity: 0;
		-o-transition: opacity .2s ease-in-out;
		-ms-transition: opacity .2s ease-in-out;
		-moz-transition: opacity .2s ease-in-out;
		-webkit-transition: opacity .2s ease-in-out;
		transition: opacity .2s ease-in-out;	
	}

	div#navigation .navbar-right li a i
	{
		font-size: 18px;
		line-height: 25px;
	}

	div#navigation .navbar-right li a i:hover
	{
		color: #8389cc;
	}

	div#navigation .navbar-right li a.pixi
	{
		color: #d90057;
		background: url(../images/icons/pixi.png) 90% 45% no-repeat;
		background-size: 15%;
		font-size: 16px;
		margin-right: 10px;
		margin-left: -10px;
		font-smooth:always;
		-webkit-font-smoothing: antialiased;
	}

	nav#mob-navigation
	{
		border: none;
		width: 220px;
		background: #231f20;
	}

	nav#mob-navigation li
	{
		height: 50px;
		background: #231f20;
		border-bottom: 1px rgba(255, 255, 255, 0.05) solid;
	}

	nav#mob-navigation li a
	{
		line-height: 30px;
		color: #f5f3f1;
		font-size: 20px;
		font-weight: 300;
		text-align: right;
	}

	nav#mob-navigation li a:hover
	{
		background : none;
	}

	nav#mob-navigation li a.nav-brand, nav#mob-navigation li a.nav-brand:hover
	{
		background: url('../images/maxi-logo.png') 90% 50% no-repeat;
		background-size: 70%;
		text-indent: -9999px;
		display: block;
		width: 220px;
		height: 50px;
	}

	nav#mob-navigation .navbar-nav
	{
		margin: 0 !important;
	}

	nav#mob-navigation .navbar-header
	{
		margin-left: 10px;
	}

	nav#mob-navigation li a.linkedin
	{
		background: url(../images/icons/linked-in.png) 50% 50% no-repeat;
		background-size: 75%;
		text-indent: -9999px;
		width: 40px;
		float: right;
		margin: 5px 10px 0 0;
		height: 40px;
		font-size: 0px;
	}

	nav#mob-navigation li a.facebook
	{
		background: url(../images/icons/facebook.png) 50% 50% no-repeat;	
		background-size: 35%;
		text-indent: -9999px;
		display: block;
		width: 40px;
		height: 40px;
		float: right;
		margin: 5px 10px 0 0;
		font-size: 0px;
	}

	nav#mob-navigation li a.twitter
	{
		background: url(../images/icons/twitter.png) 50% 50% no-repeat;	
		background-size: 75%;
		text-indent: -9999px;
		width: 40px;
		height: 40px;
		float: right;
		margin: 5px 10px 0 0;
		font-size: 0px;
	}

	nav#mob-navigation .navbar-right li a.pixi
	{
		color: #d90057;
		background: url(../images/icons/pixi.png) 95% 40% no-repeat;
		font-size: 20px;
		padding-right: 35px;
	}

	nav#mob-navigation div.navbar-collapse
	{
		margin-left: 50%;
		border: none !important;
	}

.navbar-brand
{
	background: url('../images/maxi-logo.png') 50% 50% no-repeat;
	background-size: 100%;
	text-indent: -9999px;
	width: 110px;
	height: 74px;
	margin-right: 20px;
	margin-left: 36px;
}

#inner
{   
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
}

section
{
	text-align: center;
	padding : 0 20px 50px 20px;
}

	section p
	{
		line-height: 22px;
		margin-bottom: 25px;
	}

section#video-head
{
	width: 100%;
	height: 600px;
	overflow: hidden;
	padding: 0;
	position: relative;
	background: #231f20;
}

section#video-head div.vignette
{
	width: 100%;
	position: absolute;
	height: 223px;
	top: 0;
	left: 0;
	z-index: 9;
	background: url(../images/topVignette.png) 50% 0% repeat-x;
}

section#about
{
	background: #f5f3f1;
	position: relative;
}

	section#about a.hiring
	{
		background: url(../images/hiring_01.png) 50% 0 no-repeat;
		width: 180px;
		height: 164px;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: 165px;
	}
	
	section#about h2
	{
		color: #231f20;
	}

section#careers
{
	background: #f5f3f1;
}
	
	section#careers h2
	{
		color: #8389cc;
	}

	section#careers div
	{
		text-align: center;
		padding-top: 20px;
	}

	section#careers div a:link, section#careers div a:visited 
	{
		background: #d90057;
		font-weight: bold;
		color: #FFF;
		display: inline-block;

		width: 200px;
		height: 35px;
		line-height: 35px;
		margin: 0 10px 0 0;
	}

section#projects
{
	background: #231f20;
	color: #f5f3f1;
}

	section#projects div.showcase
	{
		min-width: 280px;
		margin: 0 auto;
		max-width: 880px;
		overflow: hidden;
		text-align: center;
	}

	section#projects div.showcase a.hidden
	{
		display: none;
	}

	section#projects div.showcase a span
	{
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		background: url(../images/icons/launch.png) 50% 50% no-repeat rgba(0, 0, 0, 0.8);
		opacity: 0;
		background-size: 12%;
		background-position: 50% 100%;
		-webkit-transition: opacity 200ms ease-out 0.1s, background-position 200ms ease-out 0.1s;
    	-moz-transition: opacity 200ms ease-out 0.1s, background-position 200ms ease-out 0.1s;
    	-o-transition: opacity 200ms ease-out 0.1s, background-position 200ms ease-out 0.1s;
    	transition: opacity 200ms ease-out 0.1s, background-position 200ms ease-out 0.1s;
	}

	section#projects div.showcase a span.visible
	{
		opacity: 1;
		background-position: 50% 50%;
	}

	section#projects div.clients
	{
		overflow: auto;
		width: 870px;
		margin: 30px auto 0 auto;
	}

	section#projects div.clients span
	{
		width: 290px;
		height: 281px;
		display: block;
		float: left;
	}

	section#projects div.clients span.client_1
	{
		background: url(../images/clients/clients01.png) 50% 50% no-repeat;
		background-size: 100%;
	}

	section#projects div.clients span.client_2
	{
		background: url(../images/clients/clients02.png) 50% 50% no-repeat;
		background-size: 100%;
	}

	section#projects div.clients span.client_3
	{
		background: url(../images/clients/clients03.png) 50% 50% no-repeat;
		background-size: 100%;
	}

/* THIS IS TO SET MOBILE HEIGHTS */

@media (max-width: 636px) 
{
	section#projects div
	{
		width: 290px !important;
		margin: 0 auto;
	}	

	section#projects div.clients
	{
		width: 290px;
	}

	section#projects div.clients span.client_2
	{
		margin: 130px auto 0 auto;
		float: none;
	}

	section#projects div.clients span.client_3
	{
		margin: -140px auto 0 auto !important;
		float: none;
	}
}

/* THIS IS TO SET TABLET HEIGHTS */

@media (max-width: 926px) 
{
	section#projects div
	{
		width: 580px;
		margin: 0 auto;
	}

	section#projects div.clients
	{
		width: 580px;
	}



	section#projects div.clients span.client_3
	{
		margin: 140px auto 0 auto;
		float: none;
	}	
}
	
	section#projects h2
	{
		color: #f5f3f1;
	}

	section#projects a
	{
		float: left;
		width: 280px;
		height: 153px;
		border: 5px #F5f3f1 solid;
		display: block;	
		margin: 5px;
	}

	 	section#projects a.donald
        {
        	background: url(../images/projects/projectThumb_Donald.jpg) 50% 50% no-repeat;
        }
        
        section#projects a.pixiLights
        {
        	background: url(../images/projects/projectThumb_pixiLights.jpg) 50% 50% no-repeat;
        }

        section#projects a.festive
        {
        	background: url(../images/projects/projectThumb_Festive.jpg) 50% 50% no-repeat;
        }

        section#projects a.mcd-40th
        {
        	background: url(../images/projects/projectThumb_40th.jpg) 50% 50% no-repeat;
        }

        section#projects a.aab
        {
        	background: url(../images/projects/projectThumb_Breakfast.jpg) 50% 50% no-repeat;
        }

        section#projects a.mcd-100-moments
        {
			background: url(../images/projects/projectThumb_100Moments.jpg) 50% 50% no-repeat;
        }

        section#projects a.fightfor
        {
			background: url(../images/projects/projectThumb_Fightfor.png) 50% 50% no-repeat;
        }

        section#projects a.pixijs
        {
			background: url(../images/projects/projectThumb_Pixijs.jpg) 50% 50% no-repeat;
        }

        section#projects a.atobee
        {
        	background: url(../images/projects/projectThumb_AtoBee.jpg) 50% 50% no-repeat;
        }

        section#projects a.chicken
        {
        	background: url(../images/projects/projectThumb_Chicken.jpg) 50% 50% no-repeat;
        }

        section#projects a.mindtest
        {
        	background: url(../images/projects/projectThumb_MindTest.jpg) 50% 50% no-repeat;
        }

        section#projects a.runpixie
        {
        	background: url(../images/projects/projectThumb_RunPixie.jpg) 50% 50% no-repeat;
        }

        section#projects a.spicedash
        {
        	background: url(../images/projects/projectThumb_SpiceDash.jpg) 50% 50% no-repeat;
        }

        section#projects a.spicequest
        {
        	background: url(../images/projects/projectThumb_SpiceQuest.jpg) 50% 50% no-repeat;
        }

        section#projects a.dangermouse
        {
        	background: url(../images/projects/projectThumb_dangermouse.jpg) 50% 50% no-repeat;
        }

        section#projects a.callie
        {
        	background: url(../images/projects/projectThumb_callie.jpg) 50% 50% no-repeat;
        }

        section#projects a.descendants
        {
        	background: url(../images/projects/projectThumb_descendants.jpg) 50% 50% no-repeat;
        }

        section#projects a.rugby
        {
        	background: url(../images/projects/projectThumb_rugby.jpg) 50% 50% no-repeat;
        }

        section#projects a.healthy
        {
        	background: url(../images/projects/projectThumb_healthy.jpg) 50% 50% no-repeat;
        }

        section#projects a.saver
        {
        	background: url(../images/projects/projectThumb_saver.jpg) 50% 50% no-repeat;
        }

        section#projects a.xmas2013
        {
        	background: url(../images/projects/projectThumb_xmas2013.jpg) 50% 50% no-repeat;
        }

        section#projects a.grubrunner
        {
        	background: url(../images/projects/projectThumb_grubrunner.jpg) 50% 50% no-repeat;
        }

        section#projects a.nebulon
        {
        	background: url(../images/projects/projectThumb_nebulon.jpg) 50% 50% no-repeat;
        }

        section#projects a.storm
        {
        	background: url(../images/projects/projectThumb_storm.jpg) 50% 50% no-repeat;
        }

        section#projects a.filters
        {
        	background: url(../images/projects/projectThumb_filters.jpg) 50% 50% no-repeat;
        }
        section#projects a.starwars
        {
        	background: url(../images/projects/projectThumb_starwars.jpg) 50% 50% no-repeat;
        }
        section#projects a.yoda
        {
        	background: url(../images/projects/projectThumb_yoda.jpg) 50% 50% no-repeat;
        }
        section#projects a.elmore
        {
        	background: url(../images/projects/projectThumb_elmore.jpg) 50% 50% no-repeat;
        }
	

	@media (max-width: 480px) 
	{
		section#projects h2
		{
			font-size: 67px;
			line-height: 42px;
			margin-left: -15px;
		}
	}

section#contact
{
	background: #231f20;
	color: #f5f3f1;
}

	section#contact i
	{
		margin: -3px 0 0 3px;
		color: #dd0058;
		font-size: 18px;
	}
	
	section#contact h2
	{
		color: #f5f3f1;
	}
	
	@media (max-width: 480px) 
	{
		section#contact h2
		{
			font-size: 77px;
			line-height: 48px;
			margin-left: -22px;
		}
	}

section#kudos
{
	background: #8389cc;
	color: #f5f3f1;
}
	
	section#kudos div.testimonial
	{
		max-width: 600px;
		min-width: 280px;
		margin: 0 auto;
		text-align: left;
	}

		section#kudos div.testimonial p:last-child
		{
			margin: -20px 0 20px 0;
			text-align: right;
		}

	section#kudos h2
	{
		color: #231f20;
	}

	section#kudos h3
	{
		margin-bottom: 40px;
	}

	section#kudos div.awards
	{
		min-width: 280px;
		max-width: 400px;
		text-align: left;
		margin: 0 auto 40px auto;
	}
		section#kudos div.awards p
		{
			text-transform: uppercase;
			color: #231f20;
			font-size: 16px;
			font-weight: 700;
			margin: 30px 0 -5px 0;
		}

		section#kudos div.awards img
		{
			margin-top: 20px;
		}

		section#kudos div.awards img:last-child
		{
			display: block;
			margin: 20px auto 0 auto;
		}

	section#kudos h3#testimonials	
	{
		font-size: 42px;
	}

	section#kudos ul
	{
		max-width: 600px;
		min-width: 280px;
		margin: 0 auto 50px auto;
		-webkit-padding-start: 0 !important;
		display: block;
	}

		section#kudos ul li
		{
			list-style: none;
			overflow: hidden;
			clear: both;
			line-height: 25px;
			text-transform: uppercase;
			text-align: left;
		}

		section#kudos ul li:first-child
		{
			margin: 0 0 15px 0;
			text-transform: none;
			font-weight: bold;
			font-size: 14px;
		}

			section#kudos ul li span
			{
				float: left;
				display: block;
				text-align: left;
			}

			section#kudos ul li span:first-child
			{
				max-width: 40%;
				min-width: 25%;
			}

			section#kudos ul li span:nth-child(2)
			{
				max-width: 140px;
				min-width: 90px;
			}

			section#kudos ul li span:last-child
			{
				float: right;
				width: 250px;
			}

footer
{
	text-align: center;
	height: 33px;
	background: #f5f3f1;
	position: relative;
}

footer div.fb-like
{
	position: absolute;
	top: -6px;
	left: 5px;
}

div.copyright
{
	position: relative;
	display: block;
	line-height: 32px;
	height: 33px;
	float: left;
	width: 100%;
	text-align: center;
	font-size: 12px;
}