@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: 'ubuntubold';
	src: url('../fonts/ubuntu-bold-webfont.woff2') format('woff2'),  url('../fonts/ubuntu-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'ubuntumedium';
	src: url('../fonts/ubuntu-medium-webfont.woff2') format('woff2'),  url('../fonts/ubuntu-medium-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'ubunturegular';
	src: url('../fonts/ubuntu-regular-webfont.woff2') format('woff2'),  url('../fonts/ubuntu-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'hind_regular';
	src: url('../fonts/hind-regular-webfont.woff2') format('woff2'),  url('../fonts/hind-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'hindmedium';
	src: url('../fonts/hind-medium-webfont.woff2') format('woff2'),  url('../fonts/hind-medium-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'montserratbold';
	src: url('../fonts/montserrat-bold-webfont.woff2') format('woff2'), url('../fonts/montserrat-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'montserratitalic';
	src: url('../fonts/montserrat-italic-webfont.woff2') format('woff2'), url('../fonts/montserrat-italic-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'montserratlight';
	src: url('../fonts/montserrat-light-webfont.woff2') format('woff2'), url('../fonts/montserrat-light-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'montserratregular';
	src: url('../fonts/montserrat-regular-webfont.woff2') format('woff2'), url('montserrat-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'dominebold';
	src: url('../fonts/domine-bold-webfont.woff2') format('woff2'), url('../fonts/domine-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'domineregular';
	src: url('../fonts/domine-regular-webfont.woff2') format('woff2'), url('../fonts/domine-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'kabalabold';
	src: url('../fonts/kabala_bold-webfont.woff2') format('woff2'), url('../fonts/kabala_bold-webfont.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'kabalaregular';
	src: url('../fonts/kabala_regular-webfont.woff2') format('woff2'), url('../fonts/kabala_regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
*, *:before, *:after {
	box-sizing: border-box;
}
body {
	font-size: 100%;
	background-color: #333;
	color: #333;
}
.wrapper {
	width: 1020px;
	height: 100%;
}
.current {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fb8122;
	font-size: .9375em;
}
.home-page-bkgd {
	width: 1020px;
	height: 1860px;
	margin: 0 auto;
	background-color: #000;
}
.dragonfly-case-bkgd {
	width: 1020px;
	height: 6500px;
	margin: 0 auto;
	background-color: #ccdfee;
}
.chefs-case-bkgd {
	width: 1020px;
	height: 6100px;
	margin: 0 auto;
	background-color: #fde2d0;
}
.ibanked-case-bkgd {
	width: 1020px;
	height: 11235px;
	margin: 0 auto;
	background-color: #e5fffe;
}
.fit6-case-bkgd {
	width: 1020px;
	height: 7000px;
	margin: 0 auto;
	background-color: #d5d5d5;
}
.msc-case-bkgd {
	width: 1020px;
	height: 6860px;
	margin: 0 auto;
	background-color: #DCF9FF;
}
.holiday-case-bkgd {
	width: 1020px;
	height: 1000px;
	margin: 0 auto;
	background-color: #fff;
}
.ccs-case-bkgd {
	width: 1020px;
	height: 3000px;
	margin: 0 auto;
	background-color: #fff;
}
.starwars-case-bkgd {
	width: 1020px;
	height: 3000px;
	margin: 0 auto;
	background-color: #fff;
}
.avengers-case-bkgd {
	width: 1020px;
	height: 3000px;
	margin: 0 auto;
	background-color: #92b2d6;
}
.about-case-bkgd {
	width: 1020px;
	height: 1000px;
	margin: 0 auto;
	background-color: #fff;
}
.contact-case-bkgd {
	width: 1020px;
	height: 750px;
	margin: 0 auto;
	background-color: #fff;
}
.tph-case-bkgd {
	width: 1020px;
	height: 2800px;
	margin: 0 auto;
	background-color: #fff;
}
.th-case-bkgd {
	width: 1020px;
	height: 2800px;
	margin: 0 auto;
	background-color: #fff;
}
.labels-case-bkgd {
	width: 1020px;
	height: 3780px;
	margin: 0 auto;
	background-color: #fff;
}
.pad-case-bkgd {
	width: 1020px;
	height: 6000px;
	margin: 0 auto;
	background-color: #000;
}
.flip-case-bkgd {
	width: 1020px;
	height: 3939px;
	margin: 0 auto;
	background-color: #fff;
}
.pc-case-bkgd {
	width: 1020px;
	height: 7600px;
	margin: 0 auto;
	background-color: #000;
}
.name {
/*	float: left;*/
	width: 500px;
	flex: 1;
/*
	margin-left: 60px;
	margin-top: 40px;
*/
}
.name h1 {
/*
	padding-top: 35px;
	margin-bottom: -50px;
*/
	margin: 0;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
}
.main-nav {
/*	margin-top: -90px;*/
	padding: 10px 60px 10px;
	width: 100%;
	background-color: #000;
	clear: both;
	display: flex;
    align-items: center;
}
.main-nav ul {
/*
	padding-top: 20px;
	margin-top: 50px;
*/
/*	float: left;*/
	 margin: 16px 0px;
	 padding: 0px;
}
.main-nav li {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	display: inline-block;
/*	margin-top: 25px;*/
	padding-left: 30px;
/*	padding-top: 20px;*/
	transition: all .4s;
	clear: both;
}
.main-nav a {
	font-family: 'hind_regular', sans-serif;
	font-size: .9375em;
	letter-spacing: .035em;
	color: #fff;
	text-decoration: none;
	display: block;
}
.main-nav a:hover {
	color: #fb8122;
}
.main-nav a:active {
	background-color: none;
}
.box {
	background-color: #fb8122;
	height: 12px;
	-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0.28,0.28);
	-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0.28,0.28);
	box-shadow: 0px 0px 14px 0px rgba(0,0,0.28,0.28);
	clear: both;
}
.row-1, .row-1 section, .row-2 section, .row-3 section, .row-4 section, .row-5 section {
	overflow: auto;
}
.row-1, .row-2, .row-3, .row-4, .row-5 {
	display: flex;
}
.row-1 section, .row-2 section, .row-3 section, .row-4 section, .row-5 section {
	flex: 1;
	height: 340px;
	overflow: hidden;
}
/* ===== start of HOME page ===== */
/* dragonfly */
.box2 {
	background-color: #fb8122;
	height: 12px;
	-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0.28,0.28);
	-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0.28,0.28);
	box-shadow: 0px 0px 14px 0px rgba(0,0,0.28,0.28);
	clear: both;
}
#content-block1 h1 {
	color: #fff;
	width: 337px;
	text-align: center;
}
#container1 {
}
#project1 {
	position: absolute;
	z-index: auto;
}
#overlay1 {
	position: absolute;
	z-index: 1;
}
#sidebar1 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 25px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar1 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
#arrow1 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover1 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover1 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/

}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover1 .swap-on-hover1__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover1:hover > .swap-on-hover1__front-image {
	opacity: 0;
}
#feature1 {
	display: block;
	margin: 0;
}
/* Shine On */
#content-block2 h1 {
	color: #fff;
	width: 337px;
	text-align: center;
}
#container2 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: left;
	zoom: 1.009;
	-moz-transform: scale(1.009);
*/
}
#project2 {
	position: absolute;
	z-index: auto;
}
#overlay2 {
	position: absolute;
	z-index: 1;
}
#sidebar2 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 30px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar2 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
#arrow2 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover2 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover2 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover2 .swap-on-hover2__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover2:hover > .swap-on-hover2__front-image {
	opacity: 0;
}
#feature2 {
	display: block;
	margin: 0;
}
/* Christmas type */
#content-block3 h1 {
	color: #fff;
	width: 337px;
	text-align: center;
}
#container3 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: right;
	zoom: 1.009;
	-moz-transform: scale(1.009);
*/
}
#project3 {
	position: absolute;
	z-index: auto;
}
#overlay3 {
	position: absolute;
	z-index: 1;
}
#sidebar3 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 80px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar3 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 0px 5px 5px #000;
}
#arrow3 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover3 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover3 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover3 .swap-on-hover3__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover3:hover > .swap-on-hover3__front-image {
	opacity: 0;
}
#feature3 {
	display: block;
	margin: 0;
}
/*
.row-2 {
	margin-top: -5px;
	float: left;
	clear: both;
}
*/

/* fit6 */
#content-block4 h1 {
	color: #fff;
	width: 337px;
	text-align: center;
}
#container4 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: left;
	zoom: 1.008;
	-moz-transform: scale(1.008);
*/
}
#project4 {
	position: absolute;
	z-index: auto;
}
#overlay4 {
	position: absolute;
	z-index: 1;
}
#sidebar4 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 75px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar4 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 0px 5px 5px #000;
}
#arrow4 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover4 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover4 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover4 .swap-on-hover4__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover4:hover > .swap-on-hover4__front-image {
	opacity: 0;
}
/* Shine On */
#content-block5 h1 {
	color: #fff;
	width: 337px;
	text-align: center;
}
#container5 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: left;
	zoom: 1.009;
	-moz-transform: scale(1.009);
*/
}
#project5 {
	position: absolute;
	z-index: auto;
}
#overlay5 {
	position: absolute;
	z-index: 1;
}
#sidebar5 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 60px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar5 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 0px 5px 5px #000;
}
#arrow5 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover5 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover5 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover5 .swap-on-hover5__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover5:hover > .swap-on-hover5__front-image {
	opacity: 0;
}
/* Christmas type */
#content-block6 h1 {
	color: #fff;
	width: 337px;
	text-align: center;
}
#container6 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: right;
	zoom: 1.009;
	-moz-transform: scale(1.009);
*/
}
#project6 {
	position: absolute;
	z-index: auto;
}
#overlay6 {
	position: absolute;
	z-index: 1;
}
#sidebar6 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 82px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar6 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 0px 5px 5px #000;
}
#arrow6 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover6 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover6 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover6 .swap-on-hover6__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover6:hover > .swap-on-hover6__front-image {
	opacity: 0;
}
/* ccs */
#content-block7 h1 {
	color: #fff;
	width: 337px;
	text-align: center;
}
#container7 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: left;
	zoom: 1.008;
	-moz-transform: scale(1.008);
*/
}
#project7 {
	position: absolute;
	z-index: auto;
}
#overlay7 {
	position: absolute;
	z-index: 1;
}
#sidebar7 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 35px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar7 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 0px 5px 5px #000;
}
#arrow7 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover7 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover7 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover7 .swap-on-hover7__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover7:hover > .swap-on-hover7__front-image {
	opacity: 0;
}
/* star wars */
#content-block8 h1 {
	color: #fff;
	width: 337px;
	text-align: center;
}
#container8 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: left;
	zoom: 1.009;
	-moz-transform: scale(1.009);
*/
}
#project8 {
	position: absolute;
	z-index: auto;
}
#overlay8 {
	position: absolute;
	z-index: 1;
}
#sidebar8 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 65px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar8 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 0px 5px 5px #000;
}
#arrow8 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover8 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover8 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover8 .swap-on-hover8__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover8:hover > .swap-on-hover8__front-image {
	opacity: 0;
}
/* Christmas type */
#content-block9 h1 {
	color: #fff;
	width: 337px;
	text-align: center;
}
#container9 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: right;
	zoom: 1.009;
	-moz-transform: scale(1.009);
*/
}
#project9 {
	position: absolute;
	z-index: auto;
}
#overlay9 {
	position: absolute;
	z-index: 1;
}
#sidebar9 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 20px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar9 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 0px 5px 5px #000;
}
#arrow9 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover9 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover9 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover9 .swap-on-hover9__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover9:hover > .swap-on-hover9__front-image {
	opacity: 0;
}
#content-block10 h1 {
	color: #fff;
	width: 340px;
	text-align: center;
}
#container10 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: left;
	zoom: 1.008;
	-moz-transform: scale(1.008);
*/
}
#project10 {
	position: absolute;
	z-index: auto;
}
#overlay10 {
	position: absolute;
	z-index: 1;
}
#sidebar10 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 35px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar10 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 0px 5px 5px #000;
}
#arrow10 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover10 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover10 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover10 .swap-on-hover10__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover10:hover > .swap-on-hover10__front-image {
	opacity: 0;
}
/* star wars */
#content-block11 h1 {
	color: #fff;
	width: 337px;
	text-align: center;
}
#container11 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: left;
	zoom: 1.009;
	-moz-transform: scale(1.009);
*/
}
#project11 {
	position: absolute;
	z-index: auto;
}
#overlay11 {
	position: absolute;
	z-index: 1;
}
#sidebar11 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 75px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar11 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 0px 5px 5px #000;
}
#arrow11 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover11 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover11 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover11 .swap-on-hover11__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover11:hover > .swap-on-hover11__front-image {
	opacity: 0;
}
/* Christmas type */
#content-block12 h1 {
	color: #fff;
	width: 337px;
	text-align: center;
}
#container12 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: right;
	zoom: 1.009;
	-moz-transform: scale(1.009);
*/
}
#project12 {
	position: absolute;
	z-index: auto;
}
#overlay12 {
	position: absolute;
	z-index: 1;
}
#sidebar12 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 80px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar12 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 0px 5px 5px #000;
}
#arrow12 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover12 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover12 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover12 .swap-on-hover12__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover12:hover > .swap-on-hover12__front-image {
	opacity: 0;
}
#content-block13 h1 {
	color: #fff;
	width: 340px;
	text-align: center;
}
#container13 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: left;
	zoom: 1.008;
	-moz-transform: scale(1.008);
*/
}
#project13 {
	position: absolute;
	z-index: auto;
}
#overlay13 {
	position: absolute;
	z-index: 1;
}
#sidebar13 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 26px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar13 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 0px 5px 5px #000;
}
#arrow13 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover13 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover13 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover13 .swap-on-hover13__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover13:hover > .swap-on-hover13__front-image {
	opacity: 0;
}
/* star wars */
#content-block14 h1 {
	color: #fff;
	width: 340px;
	text-align: center;
}
#container14 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: left;
	zoom: 1.009;
	-moz-transform: scale(1.009);
*/
}
#project14 {
	position: absolute;
	z-index: auto;
}
#overlay14 {
	position: absolute;
	z-index: 1;
}
#sidebar14 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 60px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar14 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 0px 5px 5px #000;
}
#arrow14 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover14 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover14 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover14 .swap-on-hover14__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover14:hover > .swap-on-hover14__front-image {
	opacity: 0;
}
/* Christmas type */
#content-block15 h1 {
	color: #fff;
	width: 340px;
	text-align: center;
}
#container15 {
/*
	margin-left: 0px;
	margin-top: 0px;
	float: right;
	zoom: 1.009;
	-moz-transform: scale(1.009);
*/
}
#project15 {
	position: absolute;
	z-index: auto;
}
#overlay15 {
	position: absolute;
	z-index: 1;
}
#sidebar15 {
	font-size: .9em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-align: center;
	margin-top: 60px;
	margin-left: 45px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#sidebar15 p {
	font-size: .8em;
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-shadow: 0px 5px 5px #000;
}
#arrow15 {
	margin-top: 160px;
	margin-left: 100px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.swap-on-hover15 {
	position: relative;
	margin: 0 auto;
	max-width: 400px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover15 img {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 337px;
	height: 342px;
*/
}
/* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover15 .swap-on-hover15__front-image {
	z-index: 3;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover15:hover > .swap-on-hover15__front-image {
	opacity: 0;
}
/* ===== end of HOME page ===== */
#back-to-top {
	padding: 10px;
	position: fixed;
	opacity: .70;
	background-color: #fff;
	right: 20px;
	bottom: 20px;
	z-index: 1000;
}
/* ===== start of DRAGONFLY Case Study page ===== */
.hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/hero.png")no-repeat left top/cover;
}
.project-overview img {
	margin-left: 600px;
	margin-top: -430px;
	float: left;
	clear: both;
}
.project-overview {
	width: 100%;
	height: 550px;
	background-color: #fff;
	float: left;
	clear: both;
}
.title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.dragon-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -386px;
	margin-top: 90px;
	float: left;
}
.paragraph {
	width: 372px;
	margin-top: 15px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.button-1 {
	margin-left: 60px;
	margin-top: 420px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
}
.button-1 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.button-1 a {
	text-decoration: none;
}
.button-1:hover {
	background-color: #000;
}
.button-1:active {
	background-color: #777777;
	transform: translateY(2px);
}
.button-2 {
	margin-left: 280px;
	margin-top: -43px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
	float: left;
}
.button-2 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-top: 1px;
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.button-2 a {
	text-decoration: none;
}
.button-2:hover {
	background-color: #000;
}
.button-2:active {
	background-color: #777777;
	transform: translateY(2px);
}
.logo-color {
	width: 100%;
	height: 400px;
	background-color: #e1e2e2;
	float: left;
}
.logo-color h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.logo-color img {
	margin-top: 20px;
	margin-left: 100px;
}
.branding h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.brand-line {
	width: 836px;
	height: 1px;
	margin-top: -20px;
	margin-left: 130px;
	background-color: #000;
	float: left;
}
.logo-white {
	width: 100%;
	height: 318px;
	background-color: #000;
	float: left;
}
.logo-white h3 {
	font-size: 1em;
	margin-left: 60px;
}
.logo-white img {
	margin-top: 60px;
	margin-left: 100px;
}
.logo-alternates {
	width: 100%;
	height: 400px;
	background-color: #005ca8;
	float: left;
}
.logo-alternates h3 {
	color: #fff;
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.logo-alternates img {
	margin-top: 50px;
	margin-left: 100px;
}
.alternates-line {
	width: 769px;
	height: 1px;
	margin-top: -20px;
	margin-left: 197px;
	background-color: #fff;
	float: left;
}
.logo-exploration {
	width: 100%;
	height: 418px;
	background-color: #fff;
	float: left;
}
.logo-exploration h3 {
	color: #000;
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.logo-exploration img {
	margin-top: 50px;
	margin-left: 100px;
}
.exploration-line {
	width: 774px;
	height: 1px;
	margin-top: -20px;
	margin-left: 192px;
	background-color: #000;
	float: left;
}
.typography {
	width: 100%;
	height: 616px;
	background-color: #000;
	float: left;
}
.typography h3 {
	color: #fff;
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.typography img {
	width: 1020px;
	height: 616px;
	margin-top: -570px;
	margin-left: 0px;
}
.type-line {
	width: 814px;
	height: 1px;
	margin-top: -20px;
	margin-left: 150px;
	background-color: #fff;
	float: left;
}
.century-gothic-bold h3 {
	font-family: 'century-gothic', sans-serif;
	font-style: normal;
	font-weight: 700;
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
}
.bold-line-1 {
	width: 400px;
	height: 1px;
	margin-top: -10px;
	margin-left: 60px;
	background-color: #fff;
	float: left;
}
.large-letters-bold h1 {
	font-family: 'century-gothic', sans-serif;
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
}
.small-letters-bold h1 {
	font-family: 'century-gothic', sans-serif;
	font-style: normal;
	font-weight: 700;
	color: #fff;
	font-size: 1.5em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -40px;
	margin-left: 60px;
	float: left;
}
.type-group-2 {
	margin-left: 500px;
	margin-top: -394px;
}
.century-gothic-regular h3 {
	font-family: 'century-gothic', sans-serif;
	font-style: normal;
	font-weight: 400;
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
}
.regular-line-1 {
	width: 400px;
	height: 1px;
	margin-top: -137px;
	margin-left: 60px;
	background-color: #fff;
	float: left;
}
.large-letters-regular h1 {
	font-family: 'century-gothic', sans-serif;
	font-style: normal;
	font-weight: 400;
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
}
.small-letters-regular h1 {
	font-family: 'century-gothic', sans-serif;
	font-style: normal;
	font-weight: 400;
	color: #fff;
	font-size: 1.5em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -41px;
	margin-left: 60px;
	float: left;
}
.signature-color {
	width: 100%;
	height: 400px;
	/*	background-color: #fff;*/
	float: left;
}
.signature-color h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.color-line {
	width: 766px;
	height: 1px;
	margin-top: -20px;
	margin-left: 200px;
	background-color: #000;
	float: left;
}
.small-color-boxes {
	width: 1020px;
	height: 120px;
	margin-left: 28px;
	color: #000;
	font-size: 0.75em;
	float: left;
}
.box-1-block {
	width: 225px;
	height: 120px;
	background-color: #005da8;
	margin-top: 20px;
	margin-left: 32px;
	float: left;
}
.box-1-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 43% 38%;
}
.box-2-block {
	width: 225px;
	height: 120px;
	background-color: #3ecceb;
	margin-top: 20px;
	float: left;
}
.box-2-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 43% 38%;
}
.box-3-block {
	width: 225px;
	height: 120px;
	background-color: #85837a;
	margin-top: 20px;
	float: left;
}
.box-3-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 43% 38%;
}
.box-4-block {
	width: 225px;
	height: 120px;
	background-color: #9d001e;
	margin-top: 20px;
	float: left;
}
.box-4-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 43% 38%;
}
.large-color-boxes {
	width: 1020px;
	height: 180px;
	margin-left: 60px;
	color: #000;
	font-size: 0.75em;
	float: left;
}
.box-5-block {
	width: 450px;
	height: 180px;
	background-color: #fff;
	margin-top: 20px;
	float: left;
}
.box-5-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #000;
	margin: 35% 46%;
}
.box-6-block {
	width: 450px;
	height: 180px;
	background-color: #000;
	margin-top: 20px;
	float: left;
}
.box-6-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 35% 46%;
}
.style-tiles {
	width: 100%;
	height: 720px;
	/*	background-color: #fff;*/
	float: left;
}
.style-tiles h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.style-line {
	width: 821px;
	height: 1px;
	margin-top: -20px;
	margin-left: 145px;
	background-color: #000;
	float: left;
}
.tile-1 {
	margin-left: 60px;
	margin-top: 30px;
}
.tile-2 {
	margin-left: 474px;
	margin-top: -100px;
}
.wireframes {
	width: 100%;
	height: 1000px;
	/*	background-color: #fff;*/
	float: left;
}
.wireframes h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.wireframes-line {
	width: 808px;
	height: 1px;
	margin-top: -20px;
	margin-left: 158px;
	background-color: #000;
	float: left;
}
.wireframe-1-block {
	margin-left: 60px;
	width: 293px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
}
.wireframe-1-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.wireframe-2-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.wireframe-2-block {
	margin-left: 311px;
	margin-top: -950px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.wireframe-3-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.wireframe-3-block {
	margin-left: 616px;
	margin-top: -950px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.website2 {
	width: 100%;
	height: 1000px;
	/*	background-color: #fff;*/
	float: left;
}
.website2 h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.website2-line {
	width: 838px;
	height: 1px;
	margin-top: -20px;
	margin-left: 128px;
	background-color: #000;
	float: left;
}
.website2-1-block {
	margin-left: 50px;
	width: 293px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
}
.website2-1-block h4 {
	padding-top: 30px;
	margin-bottom: 0px;
}
.website2-2-block h4 {
	padding-top: 30px;
	margin-bottom: 0px;
}
.website2-2-block {
	margin-left: 313px;
	margin-top: -1067px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.website2-3-block h4 {
	padding-top: 30px;
	margin-bottom: 0px;
}
.website2-3-block {
	margin-left: 626px;
	margin-top: -1067px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.website {
	width: 100%;
	/*	background-color: #fff;*/
	float: left;
}
.watermark-1 img {
	margin-top: -340px;
	float: right;
}
.website h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.website-line {
	width: 753px;
	height: 1px;
	margin-top: -20px;
	margin-left: 213px;
	background-color: #000;
	float: left;
}
.honey-comb-1 img {
	margin-top: -1070px;
	float: right;
	display: none;
}
.honey-comb-2 img {
	zoom: 0.85;
	-moz-transform: scale(0.85);
	margin-left: 0px;
	margin-top: -3070px;
	float: left;
}
.watermark-2 {
	margin-top: -190px;
	float: left;
	clear: both;
	display: none;
}
.watermark-3 {
	margin-top: -1600px;
	float: right;
	clear: both;
}
.honey-comb-3 img {
	margin-top: -1800px;
	float: right;
	display: none;
}
/*
.overlay {
	margin-top: 354px;
	overflow: visible;
}
.next-project-block {
	margin: 0 auto;
	width: 100%;
	height: 354px;
	background: url("../images/chefs_home_cooking.png")no-repeat left top/cover;
}
.arrow {
	margin-top: -270px;
	text-align: center;
}
.arrow h1 {
	color: #fff;
}
*/
#content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#container {
	margin-top: 6000px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#project {
	position: absolute;
	z-index: auto;
}
#overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.swap-on-hover .swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.swap-on-hover:hover > .swap-on-hover__front-image {
	opacity: 0;
}
#feature {
	display: block;
	margin: 0;
}
/* ===== start of CHEF’s Case Study page ===== */
.chefs-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/Chefs_hero.png")no-repeat left top/cover;
}
.chefs-project-overview img {
	margin-top: -400px;
	float: right;
	clear: both;
}
.chefs-project-overview {
	width: 100%;
	height: 550px;
	background-color: #fff;
	float: left;
	clear: both;
}
.chefs-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.chefs-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -350px;
	margin-top: 90px;
	float: left;
}
.chefs-paragraph {
	width: 372px;
	margin-top: 15px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.chefs-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.chefs-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.chefs-button-1 {
	margin-left: 60px;
	margin-top: 420px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
}
.chefs-button-1 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.chefs-button-1 a {
	text-decoration: none;
}
.chefs-button-1:hover {
	background-color: #000;
}
.chefs-button-1:active {
	background-color: #777777;
	transform: translateY(2px);
}
.chefs-button-2 {
	margin-left: 280px;
	margin-top: -43px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
	float: left;
}
.chefs-button-2 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-top: 1px;
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.chefs-button-2 a {
	text-decoration: none;
}
.chefs-button-2:hover {
	background-color: #000;
}
.chefs-button-2:active {
	background-color: #777777;
	transform: translateY(2px);
}
.chefs-logo-color {
	width: 100%;
	height: 400px;
	background-color: #e1e2e2;
	float: left;
}
.chefs-logo-color h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.chefs-logo-color img {
	margin: 80px 35%;
}
.chefs-branding h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.chefs-brand-line {
	width: 823px;
	height: 1px;
	margin-top: -20px;
	margin-left: 138px;
	background-color: #000;
	float: left;
}
.chefs-logo-white {
	width: 100%;
	height: 318px;
	background-color: #000;
	float: left;
}
.chefs-logo-white h3 {
	font-size: 1em;
	margin-left: 60px;
}
.chefs-logo-white img {
	margin: 80px 35%;
	float: left;
}
.chefs-typography {
	width: 100%;
	height: 616px;
	background-color: #e63000;
	float: left;
}
.chefs-typography h3 {
	color: #fff;
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.chefs-type-line {
	width: 800px;
	height: 1px;
	margin-top: -20px;
	margin-left: 161px;
	background-color: #fff;
	float: left;
}
.chefs-type-group-1 {
	margin-top: -220px;
}
.chefs-type-group-2 {
	margin-top: -220px;
}
.type-row-2 {
	margin-top: -20px;
	float: left;
}
.montserrat-bold h3 {
	font-family: 'montserratbold', sans-serif;
	font-style: normal;
	font-weight: 700;
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
}
.montserrat-regular h3 {
	font-family: 'montserratregular', sans-serif;
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
}
.chefs-bold-line-1 {
	width: 400px;
	height: 1px;
	margin-top: -10px;
	margin-left: 60px;
	background-color: #fff;
	float: left;
}
.chefs-large-letters-bold h1 {
	font-family: 'century-gothic', sans-serif;
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
}
.chefs-large-letters-mont-reg h1 {
	font-family: 'montserratregular', sans-serif;
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
}
.chefs-small-letters-bold h1 {
	font-family: 'montserratbold', sans-serif;
	color: #fff;
	font-size: 1.375em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -40px;
	margin-left: 60px;
	float: left;
}
.chefs-small-letters-mont-reg h1 {
	font-family: 'montserratregular', sans-serif;
	color: #fff;
	font-size: 1.375em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -40px;
	margin-left: 60px;
	float: left;
}
.chefs-type-group-2 {
	margin-left: 500px;
	margin-top: -394px;
}
.domine-regular h3 {
	font-family: 'domineregular', serif;
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
}
.montserrat-light h3 {
	font-family: 'montserratlight', sans-serif;
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
}
.chefs-regular-line-1 {
	width: 400px;
	height: 1px;
	margin-top: -137px;
	margin-left: 60px;
	background-color: #fff;
	float: left;
}
.chefs-large-letters-regular h1 {
	font-family: 'domineregular', serif;
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
}
.chefs-large-letters-mont-light h1 {
	font-family: 'montserratlight', sans-serif;
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
}
.chefs-small-letters-regular h1 {
	font-family: 'domineregular', serif;
	color: #fff;
	font-size: 1.375em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -41px;
	margin-left: 60px;
	float: left;
}
.chefs-small-letters-mont-light h1 {
	font-family: 'montserratlight', sans-serif;
	color: #fff;
	font-size: 1.375em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -41px;
	margin-left: 60px;
	float: left;
}
.chefs-signature-color {
	width: 100%;
	height: 400px;
	/*	background-color: #fff;*/
	float: left;
}
.chefs-signature-color h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.chefs-color-line {
	width: 758px;
	height: 1px;
	margin-top: -20px;
	margin-left: 203px;
	background-color: #000;
	float: left;
}
.chefs-small-color-boxes {
	width: 1020px;
	height: 120px;
	margin-left: 28px;
	color: #000;
	font-size: 0.75em;
	float: left;
}
.chefs-box-1-block {
	width: 300px;
	height: 120px;
	background-color: #e63000;
	margin-top: 20px;
	margin-left: 32px;
	float: left;
}
.chefs-box-1-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 0 41.5%;
	margin-top: 100px;
}
.chefs-box-2-block {
	width: 300px;
	height: 120px;
	background-color: #3ecceb;
	margin-top: 20px;
	float: left;
}
.chefs-box-2-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 0 41.5%;
	margin-top: 100px;
}
.chefs-box-3-block {
	width: 300px;
	height: 120px;
	background-color: #85837a;
	margin-top: 20px;
	float: left;
}
.chefs-box-3-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 0 41.5%;
	margin-top: 100px;
}
.chefs-box-4-block {
	width: 225px;
	height: 120px;
	background-color: #9d001e;
	margin-top: 20px;
	float: left;
}
.chefs-box-4-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 43% 38%;
}
.chefs-large-color-boxes {
	width: 1020px;
	height: 180px;
	margin-left: 60px;
	color: #000;
	font-size: 0.75em;
	float: left;
}
.chefs-box-5-block {
	width: 450px;
	height: 180px;
	background-color: #fff;
	margin-top: 20px;
	float: left;
}
.chefs-box-5-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #000;
	margin: 35% 46%;
}
.chefs-box-6-block {
	width: 450px;
	height: 180px;
	background-color: #000;
	margin-top: 20px;
	float: left;
}
.chefs-box-6-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 35% 46%;
}
.chefs-personas {
	width: 100%;
	height: 720px;
	/*	background-color: #fff;*/
	float: left;
}
.chefs-personas h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.chefs-personas-line {
	width: 823px;
	height: 1px;
	margin-top: -20px;
	margin-left: 138px;
	background-color: #000;
	float: left;
}
.chefs-tile-1 {
	margin-left: 60px;
	margin-top: 30px;
}
.chefs-tile-2 {
	margin-left: 526px;
	margin-top: -570px;
}
.chefs-wireframes {
	margin-top: -50px;
	width: 100%;
	height: 1000px;
	/*	background-color: #fff;*/
	float: left;
}
.chefs-wireframes h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.chefs-wireframes-line {
	width: 803px;
	height: 1px;
	margin-top: -20px;
	margin-left: 158px;
	background-color: #000;
	float: left;
}
.chefs-wireframe-1-block {
	margin-left: 60px;
	width: 293px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
}
.chefs-wireframe-1-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.chefs-wireframe-2-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.chefs-wireframe-2-block {
	margin-left: 311px;
	margin-top: -699px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.chefs-wireframe-3-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.chefs-wireframe-3-block {
	margin-left: 616px;
	margin-top: -1286px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.chefs-website2 {
	margin-top: 360px;
	width: 100%;
	height: 1000px;
	/*	background-color: #fff;*/
	float: left;
}
.chefs-website2 h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.chefs-website2-line {
	width: 833px;
	height: 1px;
	margin-top: -20px;
	margin-left: 128px;
	background-color: #000;
	float: left;
}
.chefs-website2-1-block {
	margin-left: 50px;
	width: 293px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
}
.chefs-website2-1-block h4 {
	padding-top: 30px;
	margin-bottom: 0px;
}
.chefs-website2-2-block h4 {
	padding-top: 30px;
	margin-bottom: 0px;
}
.chefs-website2-2-block {
	margin-left: 314px;
	margin-top: -734px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.chefs-website2-3-block h4 {
	padding-top: 30px;
	margin-bottom: 0px;
}
.chefs-website2-3-block {
	margin-left: 626px;
	margin-top: -1185px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.chefs-website {
	margin-top: 350px;
	width: 100%;
	/*	background-color: #fff;*/
	float: left;
}
.chefs-watermark-1 img {
	margin-top: -340px;
	float: right;
}
.chefs-plate-1 img {
	margin-top: -2270px;
	float: right;
	clear: both;
}
.chefs-plate-2 {
	margin-top: -2670px;
	clear: both;
	float: left;
}
.chefs-watermark-2 {
	margin-top: -500px;
	float: left;
	clear: both;
}
.chefs-plate-3 {
	margin-top: -1100px;
	float: right;
	clear: both;
}
#chefs-content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#chefs-container {
	margin-top: 5600px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#chefs-project {
	position: absolute;
	z-index: auto;
}
#chefs-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#chefs-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#chefs-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.chefs-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.chefs-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.chefs-swap-on-hover .chefs-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.chefs-swap-on-hover:hover > .chefs-swap-on-hover__front-image {
	opacity: 0;
}
#chefs-feature {
	display: block;
	margin: 0;
}
/* ===== start of iBankED Case Study page ===== */
.ibanked-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/iBankED_hero.png")no-repeat left top/cover;
}
.ibanked-project-overview img {
	margin-top: -440px;
	float: right;
	clear: both;
}
.ibanked-project-overview {
	width: 100%;
	height: 550px;
	background-color: #fff;
	float: left;
	clear: both;
}
.ibanked-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.ibanked-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -144px;
	margin-top: 90px;
	float: left;
}
.ibanked-paragraph {
	width: 372px;
	margin-top: 15px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.ibanked-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.ibanked-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.ibanked-button-1 {
	margin-left: 60px;
	margin-top: 420px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
}
.ibanked-button-1 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.ibanked-button-1 a {
	text-decoration: none;
}
.ibanked-button-1:hover {
	background-color: #000;
}
.ibanked-button-1:active {
	background-color: #777777;
	transform: translateY(2px);
}
.ibanked-button-2 {
	margin-left: 280px;
	margin-top: -43px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
	float: left;
}
.ibanked-button-2 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-top: 1px;
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.ibanked-button-2 a {
	text-decoration: none;
}
.ibanked-button-2:hover {
	background-color: #000;
}
.ibanked-button-2:active {
	background-color: #777777;
	transform: translateY(2px);
}
.ibanked-logo-color {
	width: 100%;
	height: 400px;
	background-color: #e1e2e2;
	float: left;
}
.ibanked-logo-color h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.ibanked-logo-color img {
	margin: 115px 35%;
}
.ibanked-branding h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.ibanked-brand-line {
	width: 823px;
	height: 1px;
	margin-top: -20px;
	margin-left: 138px;
	background-color: #000;
	float: left;
}
.ibanked-logo-white {
	width: 100%;
	height: 318px;
	background-color: #000;
	float: left;
}
.ibanked-logo-white h3 {
	font-size: 1em;
	margin-left: 60px;
}
.ibanked-logo-white img {
	margin: 125px 35%;
	float: left;
}
.ibanked-typography {
	width: 100%;
	height: 616px;
	background-color: #1b1363;
	float: left;
}
.ibanked-typography h3 {
	color: #fff;
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.ibanked-type-line {
	width: 800px;
	height: 1px;
	margin-top: -20px;
	margin-left: 161px;
	background-color: #fff;
	float: left;
}
.ibanked-type-group-1 {
	margin-top: -220px;
}
.ibanked-type-group-2 {
	margin-top: -220px;
}
.type-row-2 {
	margin-top: -20px;
	float: left;
}
.montserrat-bold h3 {
	font-family: 'montserratbold', sans-serif;
	font-style: normal;
	font-weight: 700;
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
}
.ibanked-montserrat-light h3 {
	font-family: 'montserratlight', sans-serif;
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
}
.ibanked-bold-line-1 {
	width: 400px;
	height: 1px;
	margin-top: -10px;
	margin-left: 60px;
	background-color: #fff;
	float: left;
}
.ibanked-large-letters-bold h1 {
	font-family: 'century-gothic', sans-serif;
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
}
.ibanked-large-letters-mont-light h1 {
	font-family: 'montserratlight', sans-serif;
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
}
.ibanked-small-letters-bold h1 {
	font-family: 'montserratbold', sans-serif;
	color: #fff;
	font-size: 1.375em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -40px;
	margin-left: 60px;
	float: left;
}
.ibanked-small-letters-mont-light h1 {
	font-family: 'montserratlight', sans-serif;
	color: #fff;
	font-size: 1.375em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -40px;
	margin-left: 60px;
	float: left;
}
.ibanked-type-group-2 {
	margin-left: 500px;
	margin-top: -394px;
}
.hind-regular h3 {
	font-family: 'hind_regular', serif;
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
}
.montserrat-light h3 {
	font-family: 'montserratlight', sans-serif;
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
}
.ibanked-regular-line-1 {
	width: 400px;
	height: 1px;
	margin-top: -137px;
	margin-left: 60px;
	background-color: #fff;
	float: left;
}
.ibanked-large-letters-regular h1 {
	font-family: 'hind_regular', serif;
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
}
.ibanked-large-letters-mont-light h1 {
	font-family: 'montserratlight', sans-serif;
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
}
.ibanked-small-letters-regular h1 {
	font-family: 'hind_regular', serif;
	color: #fff;
	font-size: 1.375em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -41px;
	margin-left: 60px;
	float: left;
}
.ibanked-small-letters-mont-light h1 {
	font-family: 'montserratlight', sans-serif;
	color: #fff;
	font-size: 1.375em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -41px;
	margin-left: 60px;
	float: left;
}
.ibanked-signature-color {
	width: 100%;
	height: 400px;
	/*	background-color: #fff;*/
	float: left;
}
.ibanked-signature-color h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.ibanked-color-line {
	width: 758px;
	height: 1px;
	margin-top: -20px;
	margin-left: 203px;
	background-color: #000;
	float: left;
}
.ibanked-small-color-boxes {
	width: 1020px;
	height: 120px;
	margin-left: 28px;
	color: #000;
	font-size: 0.75em;
	float: left;
}
.ibanked-box-1-block {
	width: 225px;
	height: 120px;
	background-color: #1b1363;
	margin-top: 20px;
	margin-left: 32px;
	float: left;
}
.ibanked-box-1-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 43% 38%;
}
.ibanked-box-2-block {
	width: 225px;
	height: 120px;
	background-color: #5ce6ff;
	margin-top: 20px;
	float: left;
}
.ibanked-box-2-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #000;
	margin: 43% 38%;
}
.ibanked-box-3-block {
	width: 225px;
	height: 120px;
	background-color: #ff009f;
	margin-top: 20px;
	float: left;
}
.ibanked-box-3-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #000;
	margin: 43% 38%;
}
.ibanked-box-4-block {
	width: 225px;
	height: 120px;
	background-color: #fffc64;
	margin-top: 20px;
	float: left;
}
.ibanked-box-4-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #000;
	margin: 43% 38%;
}
.ibanked-large-color-boxes {
	width: 1020px;
	height: 180px;
	margin-left: 60px;
	color: #000;
	font-size: 0.75em;
	float: left;
}
.ibanked-box-5-block {
	width: 450px;
	height: 180px;
	background-color: #fff;
	margin-top: 20px;
	float: left;
}
.ibanked-box-5-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #000;
	margin: 35% 46%;
}
.ibanked-box-6-block {
	width: 450px;
	height: 180px;
	background-color: #000;
	margin-top: 20px;
	float: left;
}
.ibanked-box-6-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 35% 46%;
}
.ibanked-personas {
	width: 100%;
	height: 720px;
	/*	background-color: #fff;*/
	float: left;
}
.ibanked-personas h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.ibanked-personas-line {
	width: 823px;
	height: 1px;
	margin-top: -20px;
	margin-left: 138px;
	background-color: #000;
	float: left;
}
.ibanked-tile-1 {
	margin-left: 245px;
	margin-top: 30px;
}
.ibanked-tile-2 {
	margin-left: 526px;
	margin-top: -570px;
}
.ibanked-wireframes-row-2 {
	margin-top: 20px;
	float: left;
}
.ibanked-wireframes-row-3 {
	margin-top: 20px;
	float: left;
}
.ibanked-wireframes {
	margin-top: 40px;
	width: 100%;
	height: 1000px;
	/*	background-color: #fff;*/
	float: left;
}
.ibanked-wireframes h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.ibanked-wireframes-line {
	width: 803px;
	height: 1px;
	margin-top: -20px;
	margin-left: 158px;
	background-color: #000;
	float: left;
}
.ibanked-wireframe-1-block {
	margin-left: 60px;
	width: 220px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-wireframe-1-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-wireframe-2-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-wireframe-2-block {
	margin-left: -80px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-wireframe-3-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-wireframe-3-block {
	margin-left: -175px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-wireframe-4-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-wireframe-4-block {
	margin-left: 655px;
	margin-top: -616px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-wireframe-tablet-1-block {
	margin-left: 60px;
	width: 220px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-wireframe-tablet-1-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-wireframe-tablet-2-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-wireframe-tablet-2-block {
	margin-left: -84px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-wireframe-tablet-3-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-wireframe-tablet-3-block {
	margin-left: -170px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-wireframe-tablet-4-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-wireframe-tablet-4-block {
	margin-left: 655px;
	margin-top: -1223px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-wireframe-mobile-1-block {
	margin-left: 60px;
	width: 220px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-wireframe-mobile-1-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-wireframe-mobile-2-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-wireframe-mobile-2-block {
	margin-left: -84px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-wireframe-mobile-3-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-wireframe-mobile-3-block {
	margin-left: -170px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-wireframe-mobile-4-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-wireframe-mobile-4-block {
	margin-left: 655px;
	margin-top: -1336px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-website {
	margin-top: 2280px;
	width: 100%;
	/*	background-color: #fff;*/
	float: left;
}
.ibanked-website h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.ibanked-website-line {
	width: 828px;
	height: 1px;
	margin-top: -20px;
	margin-left: 133px;
	background-color: #000;
	float: left;
}
.ibanked-designs-row-1 {
}
.ibanked-designs-row-2 {
	margin-top: 200px;
}
.ibanked-designs-row-3 {
	margin-top: 200px;
}
.ibanked-homepage-block h4 {
	padding-top: 30px;
	margin-top: 10px;
}
.ibanked-homepage-block {
	margin-top: -30px;
	margin-left: 31px;
	width: 460px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-homepage-block img {
	margin-top: -30px;
	float: left;
}
.ibanked-features-block h4 {
	padding-top: 30px;
	margin-top: 10px;
}
.ibanked-features-block {
	margin-top: -907px;
	margin-left: 380px;
	width: 744px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-features-block img {
	margin-top: -30px;
}
.ibanked-app-block h4 {
	padding-top: 30px;
	margin-top: 10px;
}
.ibanked-app-block {
	margin-top: -30px;
	margin-left: 31px;
	width: 460px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-app-block img {
	margin-top: -30px;
	float: left;
}
.ibanked-rewards-block h4 {
	padding-top: 30px;
	margin-top: 10px;
}
.ibanked-rewards-block {
	margin-top: -981px;
	margin-left: 380px;
	width: 744px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-rewards-block img {
	margin-top: -30px;
}
.ibanked-design-1-block {
	margin-left: 60px;
	width: 220px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-design-1-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-design-2-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-design-2-block {
	margin-left: -80px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-design-3-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-design-3-block {
	margin-left: -175px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-design-4-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-design-4-block {
	margin-left: 655px;
	margin-top: -616px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-design-row-3 {
	margin-top: -30px;
	float: left;
}
.ibanked-design-tablet-1-block {
	margin-left: 30px;
	width: 220px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-design-tablet-1-block img {
	margin-top: -20px;
}
.ibanked-design-tablet-1-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-design-tablet-2-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-design-tablet-2-block img {
	margin-top: -20px;
}
.ibanked-design-tablet-2-block {
	margin-left: -60px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-design-tablet-3-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-design-tablet-3-block img {
	margin-top: -20px;
}
.ibanked-design-tablet-3-block {
	margin-left: -168px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-design-tablet-4-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-design-tablet-4-block img {
	margin-top: -20px;
}
.ibanked-design-tablet-4-block {
	margin-left: 653px;
	margin-top: -651px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-design-row-4 {
	margin-top: -30px;
	float: left;
}
.ibanked-design-mobile-1-block img {
	margin-top: -20px;
}
.ibanked-design-mobile-1-block {
	margin-left: 60px;
	width: 220px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-design-mobile-1-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-design-mobile-2-block img {
	margin-top: -20px;
}
.ibanked-design-mobile-2-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-design-mobile-2-block {
	margin-left: -84px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-design-mobile-3-block img {
	margin-top: -20px;
}
.ibanked-design-mobile-3-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-design-mobile-3-block {
	margin-left: -170px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.ibanked-design-mobile-4-block img {
	margin-top: -20px;
}
.ibanked-design-mobile-4-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.ibanked-design-mobile-4-block {
	margin-left: 655px;
	margin-top: -1124px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
#ibanked-content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#ibanked-container {
	margin-top: 10550px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#ibanked-project {
	position: absolute;
	z-index: auto;
}
#ibanked-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#ibanked-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#ibanked-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.ibanked-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.ibanked-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.ibanked-swap-on-hover .ibanked-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.ibanked-swap-on-hover:hover > .ibanked-swap-on-hover__front-image {
	opacity: 0;
}
#ibanked-feature {
	display: block;
	margin: 0;
}
/* ===== start of FIT6 Case Study page ===== */
.fit6-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/fit6_hero.png")no-repeat left top/cover;
}
.fit6-project-overview {
	background: url("../images/fit6_overview_image.png")no-repeat left top/cover;
}
.fit6-project-overview {
	width: 100%;
	height: 550px;
	background-color: #fff;
	float: left;
	clear: both;
}
.fit6-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.fit6-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -193px;
	margin-top: 90px;
	float: left;
}
.fit6-paragraph {
	width: 372px;
	margin-top: 15px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.fit6-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.fit6-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.fit6-button-1 {
	margin-left: 60px;
	margin-top: 420px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
}
.fit6-button-1 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.fit6-button-1 a {
	text-decoration: none;
}
.fit6-button-1:hover {
	background-color: #000;
}
.fit6-button-1:active {
	background-color: #777777;
	transform: translateY(2px);
}
.fit6-button-2 {
	margin-left: 280px;
	margin-top: -43px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
	float: left;
}
.fit6-button-2 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-top: 1px;
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.fit6-button-2 a {
	text-decoration: none;
}
.fit6-button-2:hover {
	background-color: #000;
}
.fit6-button-2:active {
	background-color: #777777;
	transform: translateY(2px);
}
.fit6-logo-color {
	width: 100%;
	height: 400px;
	background-color: #e1e2e2;
	float: left;
}
.fit6-logo-color h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.fit6-logo-color img {
	margin: 80px 37%;
}
.fit6-branding h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.fit6-brand-line {
	width: 823px;
	height: 1px;
	margin-top: -20px;
	margin-left: 138px;
	background-color: #000;
	float: left;
}
.fit6-logo-white {
	width: 100%;
	height: 318px;
	background-color: #000;
	float: left;
}
.fit6-logo-white h3 {
	font-size: 1em;
	margin-left: 60px;
}
.fit6-logo-white img {
	margin: 80px 37%;
	float: left;
}
.fit6-typography {
	width: 100%;
	height: 616px;
	background-color: #e63000;
	float: left;
}
.fit6-typography h3 {
	color: #fff;
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.fit6-type-line {
	width: 800px;
	height: 1px;
	margin-top: -20px;
	margin-left: 161px;
	background-color: #fff;
	float: left;
}
.fit6-type-group-1 {
	margin-top: -220px;
}
.fit6-type-group-2 {
	margin-top: -220px;
}
.fit6-type-row-2 {
	margin-top: -20px;
	float: left;
}
.fit6-kabala-bold h3 {
	font-family: 'kabalabold', sans-serif;
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
}
.fit6-kabala-regular h3 {
	font-family: 'kabalaregular', sans-serif;
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
}
.fit6-bold-line-1 {
	width: 400px;
	height: 1px;
	margin-top: -10px;
	margin-left: 60px;
	background-color: #fff;
	float: left;
}
.fit6-large-letters-bold h1 {
	font-family: 'century-gothic', sans-serif;
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
}
.fit6-large-letters-kaba-reg h1 {
	font-family: 'kabalaregular', sans-serif;
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
}
.fit6-small-letters-bold h1 {
	font-family: 'kabalabold', sans-serif;
	color: #fff;
	font-size: 1.375em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -40px;
	margin-left: 60px;
	float: left;
}
.fit6-small-letters-kaba-reg h1 {
	font-family: 'kabalaregular', sans-serif;
	color: #fff;
	font-size: 1.375em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -40px;
	margin-left: 60px;
	float: left;
}
.fit6-type-group-2 {
	margin-left: 500px;
	margin-top: -394px;
}
.fit6-gotham-regular h3 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
}
.fit6-montserrat-light h3 {
	font-family: 'montserratlight', sans-serif;
	color: #fff;
	font-size: 1em;
	margin-top: 250px;
	margin-left: 60px;
	text-transform: uppercase;
	display: none;
}
.fit6-regular-line-1 {
	width: 400px;
	height: 1px;
	margin-top: -137px;
	margin-left: 60px;
	background-color: #fff;
	float: left;
}
.fit6-large-letters-regular h1 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
}
.fit6-large-letters-mont-light h1 {
	font-family: 'montserratlight', sans-serif;
	color: #fff;
	font-size: 4.375em;
	margin-top: 10px;
	margin-left: 60px;
	display: none;
}
.fit6-small-letters-regular h1 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #fff;
	font-size: 1.375em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -41px;
	margin-left: 60px;
	float: left;
}
.fit6-small-letters-mont-light h1 {
	font-family: 'montserratlight', sans-serif;
	color: #fff;
	font-size: 1.375em;
	line-height: 1.25em;
	letter-spacing: 0.5;
	width: 400px;
	margin-top: -41px;
	margin-left: 60px;
	float: left;
	display: none;
}
.fit6-signature-color {
	width: 100%;
	height: 400px;
	/*	background-color: #fff;*/
	float: left;
}
.fit6-signature-color h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.fit6-color-line {
	width: 758px;
	height: 1px;
	margin-top: -20px;
	margin-left: 203px;
	background-color: #000;
	float: left;
}
.fit6-small-color-boxes {
	width: 1020px;
	height: 120px;
	margin-left: 28px;
	color: #000;
	font-size: 0.75em;
	float: left;
}
.fit6-box-1-block {
	width: 450px;
	height: 120px;
	background-color: #ff0000;
	margin-top: 20px;
	margin-left: 32px;
	float: left;
}
.fit6-box-1-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 0 41.5%;
	margin-top: 100px;
}
.fit6-box-2-block {
	width: 450px;
	height: 120px;
	background-color: #1d1d1d;
	margin-top: 20px;
	float: left;
}
.fit6-box-2-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 0 41.5%;
	margin-top: 100px;
}
.fit6-large-color-boxes {
	width: 1020px;
	height: 180px;
	margin-left: 60px;
	color: #000;
	font-size: 0.75em;
	float: left;
}
.fit6-box-5-block {
	width: 450px;
	height: 180px;
	background-color: #fff;
	margin-top: 20px;
	float: left;
}
.fit6-box-5-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #000;
	margin: 35% 46%;
}
.fit6-box-6-block {
	width: 450px;
	height: 180px;
	background-color: #000;
	margin-top: 20px;
	float: left;
}
.fit6-box-6-block h6 {
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1.125em;
	color: #fff;
	margin: 35% 46%;
}
.fit6-wireframes {
	margin-top: 0px;
	width: 100%;
	height: 1000px;
	/*	background-color: #fff;*/
	float: left;
}
.fit6-wireframes h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.fit6-wireframes-line {
	width: 803px;
	height: 1px;
	margin-top: -20px;
	margin-left: 158px;
	background-color: #000;
	float: left;
}
.fit6-wireframe-1-block {
	margin-left: 60px;
	width: 293px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
}
.fit6-wireframe-1-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.fit6-wireframe-2-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.fit6-wireframe-2-block {
	margin-left: 311px;
	margin-top: -1414px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.fit6-wireframe-3-block h4 {
	padding-top: 30px;
	margin-bottom: 10px;
}
.fit6-wireframe-3-block {
	margin-left: 616px;
	margin-top: -1414px;
	width: 400px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.fit6-website {
	margin-top: 480px;
	width: 100%;
	/*	background-color: #fff;*/
	float: left;
}
.fit6-website h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.fit6-website-line {
	width: 828px;
	height: 1px;
	margin-top: -20px;
	margin-left: 133px;
	background-color: #000;
	float: left;
}
.fit6-designs-row-1 {
	margin-left: 30px;
}
.fit6-designs-row-2 {
	margin-left: 30px;
	margin-top: 0px;
	float: left;
}
.fit6-homepage-block h4 {
	padding-top: 30px;
	margin-top: 10px;
}
.fit6-homepage-block {
	margin-top: -30px;
	margin-left: 31px;
	width: 460px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.fit6-homepage-block img {
	margin-top: -30px;
	float: left;
}
.fit6-why-block h4 {
	padding-top: 30px;
	margin-top: 10px;
}
.fit6-why-block {
	margin-top: -1229px;
	margin-left: 340px;
	width: 744px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.fit6-why-block img {
	margin-top: -29px;
}
.fit6-classes-block h4 {
	padding-top: 30px;
	margin-top: 10px;
}
.fit6-classes-block {
	margin-top: -30px;
	margin-left: 31px;
	width: 460px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.fit6-classes-block img {
	margin-top: -30px;
	float: left;
}
.fit6-locations-block h4 {
	padding-top: 30px;
	margin-top: 10px;
}
.fit6-locations-block {
	margin-top: -1245px;
	margin-left: 340px;
	width: 744px;
	text-align: center;
	font-family: 'hind_regular', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #000;
	font-size: .8125em;
	float: left;
}
.fit6-locations-block img {
	margin-top: -30px;
}
#fit6-content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#fit6-container {
	margin-top: 6350px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#fit6-project {
	position: absolute;
	z-index: auto;
}
#fit6-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#fit6-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#fit6-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.fit6-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.fit6-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.fit6-swap-on-hover .fit6-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.fit6-swap-on-hover:hover > .fit6-swap-on-hover__front-image {
	opacity: 0;
}
#fit6-feature {
	display: block;
	margin: 0;
}
/* ===== start of MSC Case Study page ===== */
.msc-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/app_screens.png")no-repeat left top/cover;
}
.msc-project-overview img {
	margin-left: 658px;
	margin-top: -415px;
}
.msc-project-overview {
	width: 100%;
	height: 550px;
	background-color: #fff;
	float: left;
	clear: both;
}
.msc-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.msc-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -270px;
	margin-top: 90px;
	float: left;
}
.msc-paragraph {
	width: 372px;
	margin-top: 15px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.msc-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.msc-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.msc-button-1 {
	margin-left: 60px;
	margin-top: 420px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
}
.msc-button-1 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.msc-button-1 a {
	text-decoration: none;
}
.msc-button-1:hover {
	background-color: #000;
}
.msc-button-1:active {
	background-color: #777777;
	transform: translateY(2px);
}
.msc-button-2 {
	margin-left: 280px;
	margin-top: -43px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
	float: left;
}
.msc-button-2 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-top: 1px;
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.msc-button-2 a {
	text-decoration: none;
}
.msc-button-2:hover {
	background-color: #000;
}
.msc-button-2:active {
	background-color: #777777;
	transform: translateY(2px);
}
.msc-personas {
	width: 100%;
	height: 400px;
	float: left;
}
.msc-personas h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.msc-personas img {
	margin: 30px 10%;
}
.msc-personas h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.msc-personas-line {
	width: 823px;
	height: 1px;
	margin-top: -20px;
	margin-left: 138px;
	background-color: #000;
	float: left;
}
.msc-personas .personality-1 {
	margin-left: 70px;
	float: left;
}
.msc-personas .personality-2 {
	margin-right: 128px;
	float: right;
}
.msc-ux {
	margin-top: 1420px;
	width: 100%;
	height: 400px;
	float: left;
}
.msc-ux h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.msc-ux img {
	margin: 30px 10%;
}
.msc-ux h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.msc-ux-line {
	width: 823px;
	height: 1px;
	margin-top: -20px;
	margin-left: 138px;
	background-color: #000;
	float: left;
}
.msc-website {
	margin-top: 2400px;
	width: 100%;
	/*	background-color: #fff;*/
	float: left;
}
.msc-website h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.msc-website-line {
	width: 790px;
	height: 1px;
	margin-top: -20px;
	margin-left: 161px;
	background-color: #000;
	float: left;
}
.msc-designs-row-1 {
	margin-left: 30px;
}
.msc-designs-row-2 {
	margin-left: 30px;
	margin-top: 0px;
	float: left;
}
.msc-designs-row-3 {
	margin-left: 30px;
	margin-top: 0px;
	float: left;
}
.msc-designs-row-4 {
	margin-left: 30px;
	margin-top: 0px;
	float: left;
}
.msc-login-screen-block {
	margin-top: 30px;
	margin-left: 70px;
	float: left;
}
.msc-itinerary-screen-block {
	margin-top: 30px;
	margin-left: 20px;
	float: left;
}
.msc-home-screen-block {
	margin-top: 30px;
	margin-left: 20px;
	float: left;
}
.msc-nav-screen-block {
	margin-top: -340px;
	margin-left: 70px;
	float: left;
}
.msc-chat-screen-block {
	margin-top: 30px;
	margin-left: 20px;
	float: left;
}
.msc-excursion-opt-screen-block {
	margin-top: -340px;
	margin-left: 20px;
	float: left;
}
.msc-dinner-screen-block {
	margin-top: -946px;
	margin-left: 70px;
	float: left;
}
.msc-destinations-screen-block {
	margin-top: -600px;
	margin-left: 20px;
	float: left;
}
.msc-bars-screen-block {
	margin-top: 12px;
	margin-left: 20px;
	float: left;
}
.msc-entertainment-screen-block {
	margin-top: -826px;
	margin-left: 70px;
	float: left;
}
#msc-content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#msc-container {
	margin-top: 6170px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#msc-project {
	position: absolute;
	z-index: auto;
}
#msc-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#msc-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#msc-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.msc-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.msc-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.msc-swap-on-hover .msc-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.msc-swap-on-hover:hover > .msc-swap-on-hover__front-image {
	opacity: 0;
}
#msc-feature {
	display: block;
	margin: 0;
}
/* ===== start of HOLIDAY TYPE Case Study page ===== */
.holiday-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/holiday_hero.png")no-repeat left top/cover;
}
.holiday-project-overview {
	width: 100%;
	height: 501px;
	background-color: #fff;
	background: url("../images/holiday_overview.png")no-repeat left top/cover;
	float: left;
	clear: both;
}
.holiday-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.holiday-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -216px;
	margin-top: 90px;
	float: left;
}
.holiday-paragraph {
	width: 372px;
	margin-top: 15px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.holiday-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.holiday-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.holiday-button-1 {
	margin-left: 60px;
	margin-top: 420px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
}
.holiday-button-1 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.holiday-button-1 a {
	text-decoration: none;
}
.holiday-button-1:hover {
	background-color: #000;
}
.holiday-button-1:active {
	background-color: #777777;
	transform: translateY(2px);
}
.holiday-button-2 {
	margin-left: 280px;
	margin-top: -43px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
	float: left;
}
.holiday-button-2 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-top: 1px;
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.holiday-button-2 a {
	text-decoration: none;
}
.holiday-button-2:hover {
	background-color: #000;
}
.holiday-button-2:active {
	background-color: #777777;
	transform: translateY(2px);
}
#holiday-content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#holiday-container {
	margin-top: 520px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#holiday-project {
	position: absolute;
	z-index: auto;
}
#holiday-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#holiday-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#holiday-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.holiday-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.holiday-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.holiday-swap-on-hover .holiday-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.holiday-swap-on-hover:hover > .holiday-swap-on-hover__front-image {
	opacity: 0;
}
#holiday-feature {
	display: block;
	margin: 0;
}
/* ===== start of CSS Case Study page ===== */
.ccs-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/ccs_hero.png")no-repeat left top/cover;
}
.ccs-project-overview {
	width: 100%;
	height: 501px;
	background-color: #fff;
	background: url("../images/cancer_sticker.png")no-repeat left top/cover;
	float: left;
	clear: both;
}
.ccs-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.ccs-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -420px;
	margin-top: 90px;
	float: left;
}
.ccs-paragraph {
	width: 372px;
	margin-top: 15px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.css-paragraph h3 {
	font-size: 1em;
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.ccs-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.ccs-logo-color h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.ccs-logo-color {
	width: 100%;
	height: 2430px;
	background-color: #ffee7f;
	float: left;
}
.ccs-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.ccs-brand-line {
	width: 823px;
	height: 1px;
	margin-top: -20px;
	margin-left: 138px;
	background-color: #000;
	float: left;
}
.ccs-sticker-1 {
	margin-top: 20px;
	margin-left: 40px;
	float: left;
}
.ccs-poster {
	margin-top: 20px;
	margin-left: 40px;
	float: left;
}
.ccs-sticker-2 {
	margin-top: 20px;
	margin-left: 40px;
	float: left;
}
.ccs-pin-boxes {
	margin-top: 60px;
	margin-left: 60px;
	float: left;
}
.ccs-daffodils {
	margin-top: 60px;
	margin-left: 80px;
	float: left;
}
.ccs-art-direction {
	float: left;
}
.ccs-art-direction h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.ccs-ad-logo-color h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.ccs-ad-logo-color {
	width: 100%;
	height: 1658px;
	background-color: #777777;
	float: left;
}
.ccs-ad-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.ccs-ad-brand-line {
	width: 791px;
	height: 1px;
	margin-top: -20px;
	margin-left: 170px;
	background-color: #000;
	float: left;
}
.ccs-wife {
	margin-top: 20px;
	margin-left: 60px;
	float: left;
}
.ccs-father {
	margin-top: 20px;
	margin-left: 20px;
	float: left;
}
.ccs-husband {
	margin-top: 20px;
	margin-left: 60px;
	float: left;
}
.ccs-mother {
	margin-top: 20px;
	margin-left: 20px;
	float: left;
}
#ccs-content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#ccs-container {
	margin-top: 2650px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#ccs-project {
	position: absolute;
	z-index: auto;
}
#ccs-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#ccs-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#ccs-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.ccs-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.ccs-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.ccs-swap-on-hover .ccs-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.ccs-swap-on-hover:hover > .ccs-swap-on-hover__front-image {
	opacity: 0;
}
#ccs-feature {
	display: block;
	margin: 0;
}
/* ===== start of THE THOMPSON HOUSE Case Study page ===== */
.th-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/TH_Coaster_blue-circle_4C.png")no-repeat left top/cover;
}
.th-project-overview {
	width: 100%;
	height: 360px;
	margin-top: 0px;
	background-color: #fff;
	background: url("../images/TH-Elevation_A6.png")no-repeat left top/cover;
	float: left;
	clear: both;
}
.th-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.th-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -365px;
	margin-top: 90px;
	float: left;
}
.th-paragraph {
	width: 355px;
	margin-top: 0px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.th-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.th-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.th-logo-color h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 20px;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.th-logo-color {
	width: 100%;
	height: 2640px;
	background-color: #ffffff;
	float: left;
}
.th-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.th-brand-line {
	width: 809px;
	height: 1px;
	margin-top: -20px;
	margin-left: 150px;
	background-color: #000;
	float: left;
}
.th-ad-brand-line {
	width: 783px;
	height: 1px;
	margin-top: -20px;
	margin-left: 207px;
	background-color: #000;
	float: left;
}
.th-styleguide {
	margin-top: 20px;
	margin-left: 60px;
	float: left;
}
.th-art-direction {
	float: left;
}
.th-ad-logo-color h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-left: 60px;
	padding-top: 30px;
}
.th-ad-logo-color {
	width: 100%;
	height: 1658px;
	background-color: #ffee7f;
	float: left;
}
.th-ad-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.th-ad-brand-line {
	width: 790px;
	height: 1px;
	margin-top: -20px;
	margin-left: 165px;
	background-color: #000;
	float: left;
}
.th-menu {
	margin-top: 20px;
	margin-left: 60px;
	float: left;
}
content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#th-container {
	margin-top: 2650px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#th-project {
	position: absolute;
	z-index: auto;
}
#th-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#th-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#th-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.th-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.th-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.th-swap-on-hover .th-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.th-swap-on-hover:hover > .th-swap-on-hover__front-image {
	opacity: 0;
}
#th-feature {
	display: block;
	margin: 0;
}
/* ===== end of THE THOMPSON HOUSE Case Study page ===== */

/* ===== start of THE PASTA HOUSE Case Study page ===== */
.tph-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/TPH_Header-Family-Packages.png")no-repeat left top/cover;
}
.tph-project-overview {
	width: 100%;
	height: 501px;
	background-color: #fff;
	background: url("../images/TPH_Beef-Rav-package.png")no-repeat left top/cover;
	float: left;
	clear: both;
}
.tph-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.tph-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -459px;
	margin-top: 90px;
	float: left;
}
.tph-paragraph {
	width: 355px;
	margin-top: 15px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.tph-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.tph-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.tph-logo-color h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.tph-logo-color {
	width: 100%;
	height: 1984px;
	background-color: #ffffff;
	float: left;
}
.tph-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.tph-brand-line {
	width: 793px;
	height: 1px;
	margin-top: -20px;
	margin-left: 167px;
	background-color: #000;
	float: left;
}
.tph-ad-brand-line {
	width: 783px;
	height: 1px;
	margin-top: -20px;
	margin-left: 207px;
	background-color: #000;
	float: left;
}
.tph-packs {
	margin-top: 20px;
	margin-left: 60px;
	float: left;
}
.tph-art-direction {
	float: left;
}
.tph-ad-logo-color h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-left: 60px;
	padding-top: 30px;
}
.tph-ad-logo-color {
	width: 100%;
	height: 1658px;
	background-color: #ffee7f;
	float: left;
}
.tph-ad-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.tphs-ad-brand-line {
	width: 791px;
	height: 1px;
	margin-top: -20px;
	margin-left: 170px;
	background-color: #000;
	float: left;
}
.tph-roll-up-banner {
	margin-top: 20px;
	margin-left: 60px;
	float: left;
}
.tph-sampling {
	margin-top: 20px;
	margin-left: 130px;
	float: left;
}
.tph-3-packages {
	margin-top: 38px;
	margin-left: 122px;
	float: left;
}
#tph-content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#tph-container {
	margin-top: 2130px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#tph-project {
	position: absolute;
	z-index: auto;
}
#tph-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#tph-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#tph-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.tph-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.tph-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.tph-swap-on-hover .tph-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.tph-swap-on-hover:hover > .tph-swap-on-hover__front-image {
	opacity: 0;
}
#tph-feature {
	display: block;
	margin: 0;
}
/* ===== end of THE PASTA HOUSE Case Study page ===== */
/* ===== start of LABELS Case Study page ===== */
.labels-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/LABELS-dipitt_header.png")no-repeat left top/cover;
}
.labels-project-overview {
	width: 100%;
	height: 500px;
	background-color: #fff;
	background: url("../images/LABELS-marinara_label.png")no-repeat left top/cover;
	float: left;
	clear: both;
}
.labels-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.labels-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -220px;
	margin-top: 90px;
	float: left;
}
.labels-paragraph {
	width: 355px;
	margin-top: 15px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.labels-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.labels-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.labels-pack-photo h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 0px;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.labels-pack-photo {
	width: 100%;
	height: 740px;
	background-color: #ffffff;
	float: left;
}
.labels-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.labels-dipitt-line {
	width: 793px;
	height: 1px;
	margin-top: -20px;
	margin-left: 167px;
	background-color: #000;
	float: left;
}
.labels-monsoon-line {
	width: 783px;
	height: 1px;
	margin-top: -20px;
	margin-left: 180px;
	background-color: #000;
	float: left;
}
.labels-pack-photo {
	margin-top: -30px;
	margin-left: 0px;
	margin-bottom: 0px;
	float: left;
}
.labels-packs {
	margin-top: 20px;
	margin-left: 60px;
	margin-bottom: 60px;
	float: left;
}
.labels-photo {
	margin-top: -20px;
	margin-left: 0px;
	margin-bottom: 20px;
	float: left;
}

.labels-monsoon {
	float: left;
}
.labels-ad-logo-color h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-left: 60px;
	padding-top: 30px;
}
.labels-ad-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.labels-ad-brand-line {
	width: 791px;
	height: 1px;
	margin-top: -20px;
	margin-left: 170px;
	background-color: #000;
	float: left;
}
.labels-all-monsoon {
	margin-top: 20px;
	margin-left: 60px;
	margin-bottom: 20px;
	float: left;
}
.labels-monsoon-bottles {
	margin-top: 20px;
	margin-left: 130px;
	float: left;
}
.labels-grange {
	float: left;
}
.labels-grange-line {
	width: 698px;
	height: 1px;
	margin-top: -20px;
	margin-left: 260px;
	background-color: #000;
	float: left;
}
.labels-all-grange {
	margin-top: 20px;
	margin-left: 50px;
	margin-bottom: 20px;
	float: left;
}
.labels-grange-bottles {
	margin-top: 0px;
	margin-left: 180px;
	float: left;
}
#labels-content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#labels-container {
	margin-top: 3090px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#labels-project {
	position: absolute;
	z-index: auto;
}
#labels-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#labels-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#labels-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.labels-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.labels-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.labels-swap-on-hover .labels-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.labels-swap-on-hover:hover > .labels-swap-on-hover__front-image {
	opacity: 0;
}
#labels-feature {
	display: block;
	margin: 0;
}
/* ===== end of LABELS Case Study page ===== */

/* ===== start of STAR WARS Case Study page ===== */
.starwars-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/starwars_hero.png")no-repeat left top/cover;
}

.starwars-project-overview {
	width: 100%;
	height: 501px;
	background-color: #fff;
	background: url("../images/starwars_hc_pack.png")no-repeat left top/cover;
	float: left;
	clear: both;
}
.starwars-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.starwars-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -459px;
	margin-top: 90px;
	float: left;
}
.starwars-paragraph {
	width: 355px;
	margin-top: 15px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.starwars-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.starwars-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.starwars-logo-color h3 {
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.starwars-logo-color {
	width: 100%;
	height: 2830px;
	background-color: #919191;
	float: left;
}
.starwars-branding h3 {
    font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.starwars-brand-line {
	width: 793px;
	height: 1px;
	margin-top: -20px;
	margin-left: 167px;
	background-color: #000;
	float: left;
}
.starwars-ad-brand-line {
	width: 783px;
	height: 1px;
	margin-top: -20px;
	margin-left: 207px;
	background-color: #000;
	float: left;
}
.starwars-packs {
	margin-top: 20px;
	margin-left: 60px;
	float: left;
}

.starwars-flat-pack {
	margin-top: 60px;
	margin-left: 160px;
	float: left;
}
.starwars-pallet {
	margin-top: 100px;
	margin-left: 80px;
	float: left;
}
.starwars-standee {
	margin-top: -600px;
	margin-left: 510px;
	float: left;
}
.starwars-admat {
	margin-top: -160px;
	margin-left: 100px;
	float: left;
}
.starwars-art-direction {
	float: left;
}
.starwars-ad-logo-color h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 30px;
}
.starwars-ad-logo-color {
	width: 100%;
	height: 1658px;
	background-color: #ffee7f;
	float: left;
}
.starwars-ad-branding h3 {
    font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.starwars-ad-brand-line {
	width: 791px;
	height: 1px;
	margin-top: -20px;
	margin-left: 170px;
	background-color: #000;
	float: left;
}
.starwars-landingpg {
	margin-top: 20px;
	margin-left: 60px;
	float: left;
}
.starwars-contest {
	margin-top: 20px;
	margin-left: 130px;
	float: left;
}
.starwars-contest-steps {
	margin-top: 38px;
	margin-left: 40px;
	float: left;
}

#starwars-content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
	
}
#starwars-container {
	margin-top: 3250px;
/*	margin-top: -50px;*/
/*	float: left;*/
}
#starwars-project {
position:absolute;  
z-index:auto;  
}
#starwars-overlay {
position:absolute;  
z-index:1;  
/*
left:125px;  
top:125px;  
*/
}
#starwars-sidebar {
font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
color: #fff;
text-transform: uppercase;
text-align: center;
margin-top: 80px;
margin-left: 345px;
position:absolute;
text-shadow: 0px 5px 5px #000;
z-index:2; 
}
#starwars-arrow {
margin-top: 150px;
margin-left: 445px;
position:absolute;  
z-index:2;  
/*
left:250px;  
top:250px;  
*/
}


/* Make the container relative */
.starwars-swap-on-hover {
  position: absolute;	
	margin:  0 auto;
	max-width: 1020px;
}

/* Select the image and make it absolute to the container */
.starwars-swap-on-hover img {
  position: absolute;
  top:0;
  left:0;
	overflow: hidden;
	/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}

/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.starwars-swap-on-hover .starwars-swap-on-hover__front-image {
  z-index: 999;
  transition: opacity .5s linear;
  cursor: pointer;
	position: absolute;
}

/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.starwars-swap-on-hover:hover > .starwars-swap-on-hover__front-image{
  opacity: 0;
	
}

#starwars-feature {
	display: block;
	margin: 0;
}
/* ===== end of STAR WARS Case Study page ===== */

/* ===== start of PAD - PUMPKINS AFTER DARK Case Study page ===== */
.pad-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/PAD-header.png")no-repeat left top/cover;
}
.pad-project-overview {
	width: 100%;
	height: 653px;
	background-color: #fff;
	background: url("../images/PAD-kiss-of-death.png")no-repeat left top/cover;
	float: left;
	clear: both;
}
.pad-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.pad-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -525px;
	margin-top: 90px;
	float: left;
}
.pad-paragraph {
	width: 480px;
	margin-top: 15px;
	margin-left: 60px;
	color: #ffffff;
	float: left;
	clear: both;
}
.pad-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.pad-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.pad-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.pad-logo-color {
	width: 100%;
	height: 2830px;
	background-color: #000;
	float: left;
}
.pad-weeping-angel {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pad-horror-guys {
	margin-top: 30px;
	margin-left: 10px;
	float: left;
}
.pad-art-direction {
	float: left;
}
.pad-ad-logo-color h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-left: 60px;
	padding-top: 30px;
}
.pad-ad-logo-color {
	width: 100%;
	height: 1658px;
	background-color: #ffee7f;
	float: left;
}
.pad-ad-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.pad-ad-brand-line {
	width: 790px;
	height: 1px;
	margin-top: -20px;
	margin-left: 165px;
	background-color: #000;
	float: left;
}
.pad-carnival {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pad-carnival-build {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pad-zombie {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pad-bumble-bees {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pad-godzilla {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pad-spiders {
	margin-top: 30px;
	margin-left: 10px;
	float: left;
}
.pad-star-wars {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pad-singers {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pad-raptors {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#pad-container {
	margin-top: 5380px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#pad-project {
	position: absolute;
	z-index: auto;
}
#pad-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#pad-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#pad-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.pad-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.pad-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.pad-swap-on-hover .pad-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.pad-swap-on-hover:hover > .pad-swap-on-hover__front-image {
	opacity: 0;
}
#pad-feature {
	display: block;
	margin: 0;
}
/* ===== end of PAD - PUMPKINS AFTER DARK Case Study page ===== */

/* ===== start of FLIP THE FLAP Case Study page ===== */
.flip-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/ftf_Thumbnail.png")no-repeat left top/cover;
}
.flip-project-overview {
	width: 100%;
	height: 500px;
	background-color: #fff;
	background: url("../images/ftf-packs.png")no-repeat left top/cover;
	float: left;
	clear: both;
}
.flip-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.flip-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -320px;
	margin-top: 90px;
	float: left;
}
.flip-paragraph {
	width: 450px;
	margin-top: 15px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.flip-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.flip-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.flip-landing-page-title h3 {
	font-size: 1em;
	margin-left: 60px;
	padding-top: 0px;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.flip-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.flip-line {
	width: 683px;
	height: 1px;
	margin-top: -20px;
	margin-left: 277px;
	background-color: #000;
	float: left;
}
.flip-landing-page {
	width: 100%;
	height: 692px;
	margin-top: 30px;
	background-color: #ffffff;
	
}
.flip-banner-2 {
	margin-top: 30px;
	margin-left: 60px;
	margin-bottom: 0px;
	float: left;
}
.flip-promo {
	margin-top: 30px;
	margin-left: 60px;
	margin-bottom: 0px;
	float: left;
}
.flip-packaging-line {
	width: 763px;
	height: 1px;
	margin-top: -20px;
	margin-left: 195px;
	background-color: #000;
	float: left;
}
.flip-pack-photo {
	margin-top: -30px;
	margin-left: 0px;
	margin-bottom: 0px;
	float: left;
}
.flip-sell-sheet {
	margin-top: 80px;
	margin-left: 60px;
	margin-bottom: 60px;
	float: left;
}
.flip-mod {
	margin-top: 20px;
	margin-left: 22px;
	margin-bottom: 60px;
	float: left;
}
.flip-ad-mat {
	margin-top: -20px;
	margin-left: 60px;
	float: left;
}
.flip-pallet {
	margin-top: -20px;
	margin-left: 30px;
	float: left;
}
.flip-packaging {
	float: left;
}

.flip-ad-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.flip-ad-brand-line {
	width: 791px;
	height: 1px;
	margin-top: -20px;
	margin-left: 170px;
	background-color: #000;
	float: left;
}
#flip-content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#flip-container {
	margin-top: 2000px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#lflip-project {
	position: absolute;
	z-index: auto;
}
#flip-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#flip-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#flip-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.flip-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.flip-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.flip-swap-on-hover .flip-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.flip-swap-on-hover:hover > .flip-swap-on-hover__front-image {
	opacity: 0;
}
#flip-feature {
	display: block;
	margin: 0;
}
/* ===== end of FLIP THE FLAP Case Study page ===== */

/* ===== start of PC - PUMPKIN CARVING Case Study page ===== */
.pc-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/pc-header.png")no-repeat left top/cover;
}
.pc-project-overview {
	width: 100%;
	height: 532px;
	background-color: #fff;
	background: url("../images/pc-hero-pumpkin.png")no-repeat left top/cover;
	float: left;
	clear: both;
}
.pc-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.pc-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -290px;
	margin-top: 90px;
	float: left;
}
.pc-paragraph {
	width: 490px;
	margin-top: 15px;
	margin-left: 60px;
	color: #ffffff;
	float: left;
	clear: both;
}
.pc-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.pc-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.pc-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.pc-logo-color {
	width: 100%;
	height: 2830px;
	background-color: #000;
	float: left;
}
.pc-cp24-pumpkins {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}

.pc-art-direction {
	float: left;
}
.pc-ad-logo-color h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-left: 60px;
	padding-top: 30px;
}
.pc-ad-logo-color {
	width: 100%;
	height: 1658px;
	background-color: #ffee7f;
	float: left;
}
.pc-ad-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.pc-ad-brand-line {
	width: 790px;
	height: 1px;
	margin-top: -20px;
	margin-left: 165px;
	background-color: #000;
	float: left;
}
.pc-frankie-flowers {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pc-ctv {
	margin-top: 30px;
	margin-left: 10px;
	float: left;
}
.pc-cp24 {
	margin-top: 30px;
	margin-left: 10px;
	float: left;
}
.pc-buddies {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pc-pumpkin-lineup {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pc-pickles {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pc-dog-1 {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pc-dog-2 {
	margin-top: 30px;
	margin-left: 16px;
	float: left;
}
.pc-dog-3 {
	margin-top: 30px;
	margin-left: 16px;
	float: left;
}
.pc-splithead {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pc-barfy {
	margin-top: 30px;
	margin-left: 15px;
	float: left;
}
.pc-mick {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pc-frank {
	margin-top: 30px;
	margin-left: 15px;
	float: left;
}
.pc-purdy {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pc-baseball {
	margin-top: 30px;
	margin-left: 15px;
	float: left;
}
.pc-little-1 {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pc-little-2 {
	margin-top: 30px;
	margin-left: 16px;
	float: left;
}
.pc-little-3 {
	margin-top: 30px;
	margin-left: 16px;
	float: left;
}
.pc-one-tooth {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pc-moony {
	margin-top: 30px;
	margin-left: 15px;
	float: left;
}
.pc-carrot-1 {
	margin-top: 30px;
	margin-left: 60px;
	float: left;
}
.pc-carrot-2 {
	margin-top: 30px;
	margin-left: 11.5px;
	float: left;
}
.pc-potato-1 {
	margin-top: 30px;
	margin-left: 11.5px;
	float: left;
}
.pc-potato-2 {
	margin-top: 30px;
	margin-left: 11.5px;
	float: left;
}

content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#pc-container {
	margin-top: 6910px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#pc-project {
	position: absolute;
	z-index: auto;
}
#pc-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#pc-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#pc-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.pc-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.pc-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.pc-swap-on-hover .pc-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.pc-swap-on-hover:hover > .pc-swap-on-hover__front-image {
	opacity: 0;
}
#pc-feature {
	display: block;
	margin: 0;
}
/* ===== end of PC - PUMPKIN CARVING Case Study page ===== */

/* ===== start of AVENGERS Case Study page ===== */
.avengers-hero {
	margin: 0 auto;
	width: 100%;
	height: 261px;
	background: url("../images/avengerss_hero.png")no-repeat left top/cover;
}
.avengers-project-overview {
	width: 100%;
	height: 501px;
	background-color: #fff;
	background: url("../images/avengers_hbo_pack.png")no-repeat left top/cover;
	float: left;
	clear: both;
}
.avengers-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.avengers-sub-head {
	font-family: 'hindmedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	letter-spacing: .035em;
	color: #777777;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: -434px;
	margin-top: 90px;
	float: left;
}
.avengers-paragraph {
	width: 375px;
	margin-top: 15px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.avengers-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.avengers-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.avengers-logo-color h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-left: 60px;
	padding-top: 30px;
}
.avengers-logo-color {
	width: 100%;
	height: 2830px;
	background-color: #919191;
	float: left;
}
.avengers-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.avengers-brand-line {
	width: 813px;
	height: 1px;
	margin-top: -20px;
	margin-left: 147px;
	background-color: #000;
	float: left;
}
.avengers-packs {
	margin-top: 20px;
	margin-left: 65px;
	float: left;
}
.avengers-sellsheet-1 {
	margin-top: 60px;
	margin-left: 60px;
	float: left;
}
.avengers-sellsheet-2 {
	margin-top: 60px;
	margin-left: 30px;
	float: left;
}
.avengers-header {
	margin-top: 60px;
	margin-left: 60px;
	float: left;
}
.avengers-art-direction {
	float: left;
}
.avengers-ad-logo-color h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-left: 60px;
	padding-top: 30px;
}
.avengers-ad-logo-color {
	width: 100%;
	height: 1658px;
	background-color: #ffee7f;
	float: left;
}
.avengers-ad-branding h3 {
	font-size: 1em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.avengers-ad-brand-line {
	width: 791px;
	height: 1px;
	margin-top: -20px;
	margin-left: 170px;
	background-color: #000;
	float: left;
}
.avengers-landingpg {
	margin-top: 20px;
	margin-left: 223px;
	float: left;
}
.avengers-contest {
	margin-top: 20px;
	margin-left: 130px;
	float: left;
}
.avengers-contest-steps {
	margin-top: 38px;
	margin-left: 40px;
	float: left;
}
#avengers-content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#avengers-container {
	margin-top: 3200px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#avengers-project {
	position: absolute;
	z-index: auto;
}
#avengers-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#avengers-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 345px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#avengers-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;/*
left:250px;  
top:250px;  
*/
}
/* Make the container relative */
.avengers-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.avengers-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.avengers-swap-on-hover .avengers-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.avengers-swap-on-hover:hover > .avengers-swap-on-hover__front-image {
	opacity: 0;
}
#avengers-feature {
	display: block;
	margin: 0;
}
/* ===== start of ABOUT page ===== */
.about-image {
	margin-left: 500px;
	margin-top: 75px;
	width: 100%;
}
.copy-block {
	margin-top: -396px;
	float: left;
}
.about-project-overview {
	width: 100%;
	height: 501px;
	background-color: #fff;
	float: left;
	clear: both;
}
.about-title h1 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 2.25em;
	color: #fb8122;
	margin-left: 60px;
	margin-top: 60px;
	float: left;
	clear: both;
}
.about-paragraph {
	width: 372px;
	margin-top: -10px;
	margin-left: 60px;
	color: #000;
	float: left;
	clear: both;
}
.about-paragraph h3 {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.about-paragraph p {
	font-family: 'hind_regular', sans-serif;
	font-size: 0.9375em;
	line-height: 1.375em;
}
.about-button-1 {
	margin-left: 60px;
	margin-top: 350px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
}
.about-button-1 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.about-button-1 a {
	text-decoration: none;
}
.about-button-1:hover {
	background-color: #000;
}
.about-button-1:active {
	background-color: #777777;
	transform: translateY(2px);
}
.about-button-2 {
	margin-left: 280px;
	margin-top: -43px;
	width: 200px;
	height: 43px;
	background-color: #fb8122;
	float: left;
}
.about-button-2 h4 {
	font-size: 0.9375em;
	font-family: 'ubuntumedium', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	margin-top: 1px;
	padding-top: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.holiday-button-2 a {
	text-decoration: none;
}
.holiday-button-2:hover {
	background-color: #000;
}
.holiday-button-2:active {
	background-color: #777777;
	transform: translateY(2px);
}
#about-content-block h1 {
	color: #fff;
	width: 1020px;
	text-align: center;
}
#about-container {
	margin-top: 520px;/*	margin-top: -50px;*/
/*	float: left;*/
}
#holiday-project {
	position: absolute;
	z-index: auto;
}
#about-overlay {
	position: absolute;
	z-index: 1;/*
left:125px;  
top:125px;  
*/
}
#about-sidebar {
	font-family: 'ubuntubold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin-top: 80px;
	margin-left: 385px;
	position: absolute;
	text-shadow: 0px 5px 5px #000;
	z-index: 2;
}
#about-arrow {
	margin-top: 150px;
	margin-left: 445px;
	position: absolute;
	z-index: 2;
}
/* Make the container relative */
.about-swap-on-hover {
	position: absolute;
	margin: 0 auto;
	max-width: 1020px;
}
/* Select the image and make it absolute to the container */
.about-swap-on-hover img {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;/* Sets the width and height for the images*/
/*
	width: 1020px;
	height: 354px;
*/
}
/* 
	We set z-index to be higher than the back image, so it's alwyas on the front.

We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
*/
.about-swap-on-hover .about-swap-on-hover__front-image {
	z-index: 999;
	transition: opacity .5s linear;
	cursor: pointer;
	position: absolute;
}
/* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
.about-swap-on-hover:hover > .about-swap-on-hover__front-image {
	opacity: 0;
}
#about-feature {
	display: block;
	margin: 0;
}
/* the styling for the js transition */
.new-look {
	opacity: .85;
	background-color: rgba(0, 0, 0, .85);
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	z-index: 1000;
	transition: all 2s;
}
.new-look h1 {
/*	padding-top: 42px;*/
}
.form-container {
	width: 100%;
	height: 750px;
	margin: 40px 27.1%;
	float: left;
}