#responsiveBar
	{
	width: 100%;
	height: 30px;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 9999;
	display: block;
	opacity: .7;
		}

#responsiveBar p
	{
	text-align: center;
	font: bold 14px 'Lucida Grande', serif;
	line-height: 24px;
	color: #fff;
		}





/*=============================================================

	1366px
	
============================================================== */


@media screen and (max-width: 1366px) {
	
	#responsiveBar
		{
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 30px;
		background: #b00;
		opacity: .8;
		z-index: 9999;
		text-align: center;
		display: block;
			}
		
	#responsiveBar p
		{
		font: normal 14px 'Raleway Semibold', serif;
		line-height: 24px;
		color: #fff;
			}
		
	#responsiveBar p:after
		{
		content: '1366px';
			}

	#header #headerCenter #mainNav
		{
		text-align: right;
			}

	section .inner #projects .project, section .inner #projects .project div
		{
		height: 240px;
			}
	
	}



/*=============================================================

	1366 down to 1280px
	
============================================================== */


@media screen and (max-width: 1280px) {
	
	#responsiveBar
		{
		background: #b0b;
			}
		
	#responsiveBar p:after
		{
		content: '1280px';
			}
	
	#header #headerCenter
		{
		width: 1000px;
			}

	section .inner
		{
		width: 1000px;
			}



	}









/*=============================================================

	1280px down to 1024px
	
============================================================== */


@media screen and (max-width: 1024px) {
	
	#responsiveBar
		{
		background: #0bb;
			}
		
	#responsiveBar p:after
		{
		content: '1024px';
			}
	
	#header #headerCenter
		{
		width: 835px;
			}

	#hero #heroInner
		{
		width: 700px;
			}

	#hero #heroInner h3
		{
		font: normal 66px 'Raleway Extra Light', sans-serif;
		line-height: 80px;
			}

	section .inner
		{
		width: 800px;
			}

	section .inner #projects .project, section .inner #projects .project div
		{
		height: 220px;
			}

	section .inner #projects .project h4
		{
		top: 35%;
			}

	section .inner #projects .project:hover h4
		{
		top: 30%;
			}

	section .inner #projects .project div p
		{
		top: 40%;
			}
	
	section .inner #projects .project:hover div p
		{
		top: 42%;
			}

	section.project .inner #arrows
		{
		width: 100%;
		height: 36px;
		margin: 0px auto 0px auto;
		text-align: center;
			}

	section.project .inner .frameArt
		{
		float: none;
		width: 100%;
			}

	section.project .inner .frameArt img
		{
		width: 80%;
		height: auto;
			}

	section.project .inner .frameText
		{
		width: 80%;
		float: none;
		margin: 30px auto 25px auto;
			}

	section.project .inner .frameText h3.frameTitle
		{
		text-align: center;
			}

	section.project .inner .frameText p.url
		{
		text-align: center;
			}

	section.contact .inner #contactText
		{
		width: 40%;
			}
	
	section.contact .inner #contactForm
		{
		width: 55%;
			}
	
	}


/*=============================================================

	1024px down to 850px
	
============================================================== */


@media screen and (max-width: 850px) {
	
	#responsiveBar
		{
		background: #00b;
			}
		
	#responsiveBar p:after
		{
		content: '850px';
			}
	
	#header #headerCenter
		{
		width: 785px;
			}

	#hero #heroInner
		{
		width: 700px;
			}

	section .inner #projects .project, section .inner #projects .project div
		{
		width: 100%;
		height: 280px;
		display: block;
		margin: 0px 0px 40px 0px;
			}

	section .inner
		{
		width: 760px;
			}
	
	}


/*=============================================================

	850px down to 800px
	
============================================================== */


@media screen and (max-width: 800px) {
	
	#responsiveBar
		{
		background: #c44;
			}
		
	#responsiveBar p:after
		{
		content: '800px';
			}
	
	#header #headerCenter
		{
		width: 750px;
			}

	#hero #heroInner
		{
		width: 600px;
			}

	#hero #heroInner h3
		{
		font: normal 70px 'Raleway Extra Light', sans-serif;
		line-height: 80px;
			}
	
	#hero #heroInner p
		{
		font: normal 20px 'Raleway Light', sans-serif;
		line-height: 34px;
			}

	section .inner
		{
		width: 700px;
			}
	
	}


/*=============================================================

	800px down to 768px
	
============================================================== */


@media screen and (max-width: 768px) {
	
	#responsiveBar
		{
		background: #c4c;
			}
		
	#responsiveBar p:after
		{
		content: '768px';
			}
	
	#header #headerCenter
		{
		width: 700px;
			}

	#header #headerCenter #headerLogo
		{
		width: 310px;
		height: 100px;
			}
	
	body.fixed #header #headerCenter #headerLogo
		{
		width: 186px;
		height: 60px;
			}
	
	#header #headerCenter #headerLogo a
		{
		width: 310px;
		background: url(images/logo_r.png) no-repeat;
		background-size: 100%;
			}
	
	body.fixed #header #headerCenter #headerLogo a
		{
		width: 186px;
		background: url(images/logo_r.png) no-repeat;
		background-size: 100%;
			}

	#header #headerCenter #mainNav a
		{
		font: normal 13px 'Raleway Medium', serif;
		line-height: 14px;
		letter-spacing: .4px;
		margin: 0px 0px 0px 20px;
		padding: 4px 15px;
			}

	}


/*=============================================================

	768px down to 720px
	
============================================================== */


@media screen and (max-width: 720px) {
	
	#responsiveBar
		{
		background: #cc4;
			}
		
	#responsiveBar p:after
		{
		content: '720px';
			}
	
	#header #headerCenter
		{
		width: 550px;
			}

	#hero #heroInner
		{
		width: 550px;
		top: 25%;
			}

	#hero #heroInner h3
		{
		font: normal 70px 'Raleway Extra Light', sans-serif;
		line-height: 80px;
		text-align: center;
			}
	
	#hero #heroInner p
		{
		font: normal 20px 'Raleway Light', sans-serif;
		line-height: 34px;
			}

	section .inner #marketing .block h4
		{
		font: normal 14px 'Raleway Semibold', serif;
		line-height: 18px;
			}

	section .inner #marketing .block p
		{
		font: normal 12px 'Raleway Regular', serif;
		line-height: 18px;
		margin: 10px 20px 0px 30px;
			}

	section.start .inner .button a
		{
		font: normal 16px 'Raleway Semibold', sans-serif;
		line-height: 16px;
		padding: 9px 18px;
			}

	section .inner
		{
		width: 550px;
			}

	}


/*=============================================================

	720px down to 600px
	
============================================================== */


@media screen and (max-width: 600px) {
	
	#responsiveBar
		{
		background: #b90;
			}
		
	#responsiveBar p:after
		{
		content: '600px';
			}
	
	#fp-nav
		{
		display: none;
			}
	
	#header #headerCenter
		{
		width: 450px;
			}

	#header #headerCenter #headerLogo
		{
		width: 175px;
			}

	#header #headerCenter #headerLogo
		{
		width: 175px;
		height: 100px;
			}
	
	body.fixed #header #headerCenter #headerLogo
		{
		width: 105px;
		height: 60px;
			}
	
	#header #headerCenter #headerLogo a
		{
		width: 175px;
		background: url(images/logo_r2.png) no-repeat;
		background-size: 100%;
			}
	
	body.fixed #header #headerCenter #headerLogo a
		{
		width: 105px;
		background: url(images/logo_r2.png) no-repeat;
		background-size: 100%;
			}

	#hero #heroInner
		{
		width: 450px;
		top: 25%;
			}

	#hero #heroInner h3
		{
		font: normal 65px 'Raleway Extra Light', sans-serif;
		line-height: 65px;
		text-align: center;
			}

	#hero a#scroll
		{
		display: none;
			}

	section .inner #marketing .block
		{
		width: 100%;
			}

	section .inner #marketing .block h4
		{
		font: normal 16px 'Raleway Regular', serif;
		line-height: 30px;
			}
	
	section .inner #marketing .block p
		{
		font: normal 13px 'Raleway Regular', serif;
		line-height: 20px;
		margin: 0px 0px 20px 0px;
			}

	section .inner #projects .project, section .inner #projects .project div
		{
		height: 220px;
		margin: 0px 0px 20px 0px;
			}

	section .inner
		{
		width: 450px;
			}

	section .inner h3
		{
		font: normal 48px 'Raleway Light', sans-serif;
		line-height: 56px;
		margin: 0px 0px 30px 0px;
			}
	
	section .inner p
		{
		font: normal 15px 'Raleway Medium', sans-serif;
		line-height: 24px;
		margin: 15px 0px;
			}

	section .inner p span
		{
		font: normal 18px 'Raleway Bold', sans-serif;
		line-height: 24px;
			}

	section .inner ul
		{
		font: normal 15px 'Raleway Medium Italic', sans-serif;
		line-height: 24px;
			}

	section.contact .inner #contactText
		{
		width: 100%;
		float: none;
			}
	
	section.contact .inner #contactForm
		{
		width: 100%;
		float: none;
			}
	
	}


/*=============================================================

	600px down to 480px
	
============================================================== */


@media screen and (max-width: 480px) {
	
	#responsiveBar
		{
		background: #09b;
			}
		
	#responsiveBar p:after
		{
		content: '480px';
			}
	
	#header #headerCenter
		{
		width: 380px;
			}

	#hero #heroInner
		{
		width: 380px;
			}

	#hero #heroInner h3
		{
		font: normal 60px 'Raleway Extra Light', sans-serif;
		line-height: 64px;
			}
	
	#hero #heroInner p
		{
		font: normal 18px 'Raleway Light', sans-serif;
		line-height: 28px;
			}

	section .inner #projects .project, section .inner #projects .project div
		{
		height: 200px;
			}

	section .inner #projects .project h4
		{
		font: normal 20px 'Raleway Bold', sans-serif;
		line-height: 28px;
		top: 25%;
			}

	section .inner #projects .project:hover h4
		{
		top: 25%;
			}

	section .inner #projects .project div
		{
		background: transparent;
		opacity: 1;
			}

	section .inner #projects .project:hover div
		{
		opacity: 1;
			}

	section .inner #projects .project div p
		{
		top: 40%;
			}
	
	section .inner #projects .project:hover div p
		{
		top: 40%;
			}

	section .inner
		{
		width: 380px;
			}

	section .inner h3
		{
		font: normal 42px 'Raleway Light', sans-serif;
		line-height: 48px;
		margin: 0px 0px 30px 0px;
			}
	
	section .inner p
		{
		font: normal 14px 'Raleway Medium', sans-serif;
		line-height: 20px;
		margin: 15px 0px;
			}

	section .inner p span
		{
		font: normal 16px 'Raleway Bold', sans-serif;
		line-height: 20px;
			}

	section .inner ul
		{
		font: normal 14px 'Raleway Medium Italic', sans-serif;
		line-height: 20px;
			}

	section .inner .chart .element p
		{
		font: normal 11px 'Raleway Regular', sans-serif;
		line-height: 14px;
		margin: 10px 20px 0px 20px;
			}

	section .inner ol
		{
		display: block;
		width: 100%;
		float: none;
		margin: 0px 0px 0px 0px;
			}
	
	}


/*=============================================================

	480px down to 400px
	
============================================================== */


@media screen and (max-width: 400px) {
	
	#responsiveBar
		{
		background: #0b9;
			}
		
	#responsiveBar p:after
		{
		content: '400px';
			}
	
	#header #headerCenter
		{
		width: 360px;
			}

	#hero #heroInner
		{
		width: 360px;
			}

	section .inner
		{
		width: 350px;
			}

	section .inner .floatLeft
		{
		display: none;
			}
	
	}


/*=============================================================

	400px down to 375px
	
============================================================== */


@media screen and (max-width: 375px) {
	
	#responsiveBar
		{
		background: #b09;
			}
		
	#responsiveBar p:after
		{
		content: '375px';
			}
	
	#header #headerCenter
		{
		width: 300px;
			}

	#header #headerCenter #mainNav a
		{
		margin: 0px 0px 0px 10px;
		padding: 6px 6px;
			}

	#hero #heroInner
		{
		width: 300px;
				}
	
	#hero a#scroll
		{
		bottom: 30px;
			}

	#hero #heroInner h3
		{
		font: normal 50px 'Raleway Extra Light', sans-serif;
		line-height: 54px;
			}
	
	#hero #heroInner p
		{
		font: normal 16px 'Raleway Light', sans-serif;
		line-height: 24px;
			}

	section .inner
		{
		width: 300px;
			}

	section .inner h3
		{
		font: normal 40px 'Raleway Light', sans-serif;
		line-height: 45px;
		margin: 0px 0px 30px 0px;
			}

	section .inner .chart
		{
		display: none;
			}
	
	}