@charset "UTF-8";
/* ===== primary styles =====================================================
   Author: Casey Baggz/MindHandle LLC 2012
   ========================================================================== */
@-webkit-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }	
}
@-webkit-keyframes slideUp {
	from { margin-top: 1000px;  }
	to { margin-top: -70px; }	
}
@-webkit-keyframes slideUp1 {
	from { margin-top: 600px;  }
	to { margin-top: -125px; }	
}
@-webkit-keyframes slideUp2 {
	from { margin-top: 1200px;  }
	to { margin-top: -30px; }	
}

/*============================================================================ 
iPhone Layout: 319px and below. 
==============================================================================*/
li a:active, li a:hover {
	border: white 3px solid;
	-moz-border-radius-bottomright: 7px;
	border-bottom-right-radius: 7px;
	border-bottom-left-radius: 7px;
	-moz-border-radius-bottomleft: 7px;
	border-top-left-radius: 7px;
	-moz-border-radius-topleft: 7px;
	border-top-right-radius: 7px;
	-moz-border-radius-topright: 7px;	
}
#lPhoneText a {
	text-decoration:none;
	color: #FFFCDD;	
}
#rPhoneText a {
	text-decoration: none;
	color: #7E7F82;	
}
body {
	background-color: #E7AD54;
	margin: 0px;
	padding: 0px;	
}
#outWrapper {
	width: 400px;
	height:400px;	
}
/*----------------TEXT-------------------*/
#outdoorText, #designText, #promoText, #idText, #webText, #brandingText, #workByText, #tvText, #pastLivesText {
	color: #FFFCDD;
	font-size: 3em;
	letter-spacing: .13em;
	margin: 30px 98px;	
}
#designText {
	margin-left: 108px;	
}
#promoText {
	margin-left: 75px;
}	
#idText {
	margin-left: 83px;	
}
#webText {
	margin-left: 125px;	
}
#workByText {
	margin: 15px 50px;
	padding-bottom: 30px;	
}
#tvText {
	margin-left: 83px;	
}
#pastLivesText {
	width: 300px;
	margin-left: 15px;	
}
#rPhoneText {
	color: #7E7F82;
	font-size: 2em;
	display: inline;
	width: 300px;
	height: 100px;
	margin: 93px 195px;
	letter-spacing: .13em;
	position: absolute;	
}
#lPhoneText {
	color: #FFFCDD;
	font-size: 2em;
	display: inline;
	width: 300px;
	margin: 93px 06px;
	height: 100px;
	letter-spacing: .13em;
	position: absolute;		
}
#lArrow {
	width: 50px;
	height: 50px;
	top: 280px;
	left: 52px;
	background-image: url(Images/phoneArrows.png);
	background-position: -1px 0px;	
	position: absolute;	
}
#rArrow {
	width: 50px;
	height: 50px;
	top: 280px;
	left: 196px;
	background-image: url(Images/phoneArrows.png);
	background-position: -152px 0px;
	position: absolute;
}
/*------------------SLIDESHOW--------------*/
#gallery {
	width: 310px;
	height: 200px;
	overflow: hidden;
	margin: -30px -5px;
	padding: 0px;	
}
#slideshow {
    position:relative;
    height:200px;
	width: 310px;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
	width: 310px;
	height: 200px;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}	
#slideshow VIDEO.active {
    z-index:10;
}
#slideshow VIDEO.last-active {
    z-index:9;
}
#slideshow video poster {
	z-index: 11;	
}
#menu {
	display: none;
}
.menuItem {
	display: none;	
}
li a {
	display:block;
	width: 45px;
	height: 45px;	
}
#MHlogo {
	width: 65px;
	height: 65px;
	display: inline-block;
	position: absolute;
	left: 117px;
	top: 331px;	
}

/* ================================================================================
ANDROID PHONE Layout: 320px to 479px. Inherits styles from: Mobile Layout.
=================================================================================== */
@media only screen and (min-width: 323px) {
body {
	background-color: #E7AD54;
	margin: 0px;
	padding: 0px;	
}
#outWrapper {
	width: 600px;
	height:600px;	
}
/*----------------TEXT-----------------*/
#outdoorText, #designText, #promoText, #idText, #webText, #brandingText, #workByText, #tvText, #pastLivesText {
	font-size: 4em;
	letter-spacing: .13em;
	margin: 30px 120px;	
}
#designText {
	margin-left: 127px;	
}
#promoText {
	margin-left: 85px;	
}
#idText {
	margin-left: 98px;	
}
#webText {
	margin-left: 155px;	
}
#tvText {
	margin-left: 96px;	
}
#workByText {
	width: 400px;
	padding: 10px;
	margin-left: 45px;	
}
#pastLivesText {
	font-size: 3.5em;
	margin-left: 25px;
	width: 400px;	
}
#rPhoneText {
	color: #7E7F82;
	font-size: 2.5em;
	display: inline;
	width: 300px;
	height: 100px;
	margin: 375px 236px;
	letter-spacing: .13em;
	position: absolute;	
}
#lPhoneText {
	color: #FFFCDD;
	font-size: 2.5em;
	display: inline;
	width: 300px;
	margin: 375px 12px;
	height: 100px;
	letter-spacing: .13em;
	position: absolute;		
}
#lArrow {
	width: 50px;
	height: 50px;
	top: 390px;
	left: 84px;
	background-image: url(Images/phoneArrows.png);
	background-position: -1px 0px;	
	position: absolute;	
}
#rArrow {
	width: 50px;
	height: 50px;
	top: 390px;
	left: 242px;
	background-image: url(Images/phoneArrows.png);
	background-position: -152px 0px;
	position: absolute;
}
/*------------------SLIDESHOW--------------*/
#gallery {
	width: 375px;
	height: 280px;
	overflow: hidden;
	margin: -25px -05px;
	padding: 0px;
	position: absolute;	
}
#slideshow {
    position:relative;
    height:280px;
	width: 375px;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
	width: 375px;
	height: 280px;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}
#slideshow VIDEO.active {
    z-index:10;
}
#slideshow VIDEO.last-active {
    z-index:9;
}
#menu {
	display: none;
}
.menuItem {
	display: none;	
}
li a {
	display:block;
	width: 45px;
	height: 45px;	
}
#MHlogo {
	width: 85px;
	height: 85px;
	top: 460px;
	left: 145px;	
}
}

/* ================================================================================
TABLET Layout: 481px to 1024px. Inherits styles from: Mobile Layout.
=================================================================================== */
@media only screen and (min-width: 483px) {
body {
	margin: 0px;
	padding: 0px;
	-webkit-animation: fadeIn 2s;	
}
#outWrapper {
	height: 904px;
	width: 768px;
	position: absolute;	
}
#oGwrap {
	height: 904px;
	width: 107px;
	margin-left: 665px;
	background-color: #7E7F82;
	z-index: 0;
	position: absolute;	
}
#outdoorText, #gallery, #slideshow, #slidehshow IMG, #menu {
	z-index: 5;	
}
/*-------------------TEXT---------------------*/
#outdoorText, #designText, #promoText, #idText, #webText, #brandingText, #workByText, #tvText, #pastLivesText {
	font-size: 6em;
	letter-spacing: .13em;
	margin: 40px 205px;	
}
#designText {
	margin-left: 225px;	
}
#promoText {
	margin-left: 155px;	
}
#idText {
	margin-left: 175px;	
}
#webText {
	margin-left: 275px;	
}
#workByText {
	width: 700px;
	margin-left: 95px;
	padding: none;	
}
#tvText {
	margin-left: 170px;	
}
#pastLivesText {
	width: 700px;
	margin-left: 105px;
	letter-spacing: .06em;	
}
#rPhoneText, #lPhoneText, #rArrow, #lArrow {
	display: none;	
}
video p {
	top: -400px;	
}
/*------------------------SLIDESHOW------------------------*/
#gallery {
	width: 557px;
	height: 350px;
	overflow: hidden;
	margin: 127px 25px;	
}
#slideshow {
    position:relative;
    height:356px;
	width: 557px;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
	width: 557px;
	height: 356px;
    z-index:8;
}
#slideshow video {
	position:absolute;
    top:0;
    left:0;
	width: 557px;
	height: 356px;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}
#slideshow VIDEO.active {
    z-index:10;
}
#slideshow VIDEO.last-active {
    z-index:9;
}
#menu {
	width: 50px;
	height: 50px;
	margin: -30px 600px;
	position: absolute;
	display: inline-block;
	-webkit-animation: slideUp2 .8s linear;
}
.menuItem, .designItem, .promoItem, .idItem, .webItem, .brandingItem, .workByItem, .plpItem, .televisionItem {
	display: inline-block;
	background: no repeat;
	width: 50px;
	height: 50px;
	list-style: none;
	z-index: 900;
	margin-bottom: 2px;
	background: url(Images/outdoorSprite.jpg);
	-moz-border-radius-bottomright: 7px;
	border-bottom-right-radius: 7px;
	border-bottom-left-radius: 7px;
	-moz-border-radius-bottomleft: 7px;
	border-top-left-radius: 7px;
	-moz-border-radius-topleft: 7px;
	border-top-right-radius: 7px;
	-moz-border-radius-topright: 7px;	
}
.designItem {
	background: url(Images/designSprite.png);
}
.promoItem {
	background: url(Images/promoSprite.png);
}
.idItem {
	background: url(Images/idSprite.png);	
}
.webItem {
	background: url(Images/webSprite.png);	
}
.brandingItem {
	background: url(Images/brandingSprite.png);	
}
.workByItem {
	background: url(Images/workBySprite.png); 	
}
.plpItem {
	background: url(Images/plpSprite.png);	
}
.televisionItem {
	background: url(Images/teleSprite.png);	
}
li a {
	display:block;
	width: 45px;
	height: 45px;	
}
#SSlogo{
	width: 100px;
	height: 100px;
	margin-left: -25px;	
}
#MHlogo {
	display: none;	
}
#out1, #des1, #promo1, #id1, #tv2 {
	background-position: 0 0;
	top: 150px;
	left: 638px;
	-webkit-animation: footoo 1s; 		
}
#des1 {
	height: 49px;	
}
#out2, #des2, #promo2, #id2 {
	background-position: 0 -60px;
	top: 210px;
	left: 638px;
	-webkit-animation: dirtyThirty 1s;
}
#br2, #wbc2, #plp2, #tv4 {
	background-position: 0 -57px;	
}
#des2, #promo2, #id2, #web2 {
	background-position: 0 -54px;	
}
#out3, #des3, #promo3, #id3 {
	background-position: 0 -120px;
	top: 272px;
	left: 638px;
	-webkit-animation: wahoo 1s;
}
#des3, #web3 {
	background-position: 0 -110px;	
}
#br3, #wbc3, #plp3, #tv1 {
	background-position: 0 -112px;	
}
#promo3, #id3 {
	background-position: 0 -108px;	
}
#out4, #des4, #promo4, #id4 {
	background-position: 0 -180px;
	top: 335px;
	left: 638px;
	-webkit-animation: eyesBurning 1s;	
}
#des4, #web4, #wbc4, #plp4 {
	background-position: 0 -166px;	
}
#br4, #tv6 {
	background-position: 0 -168px;	
}
#promo4, #id4 {
	background-position: 0 -163px;
}
#out5, #des5, #promo5, #id5 {
	background-position: 0 -354px;
	top: 513px;
	left: 638px;
	-webkit-animation: yumyum 1s;
}
#des5, #web5 {
	background-position: 0 -222px;	
}
#br5, #tv3 {
	background-position: 0 -224px;	
}
#promo5 {
	background-position: 0 -218px;	
}
#wbc5, #plp5 {
	background-position: 0 -220px;	
}
#id5 {
	background-position: 0 -381px;	
}
#out6, #des6, #promo6, #id6 {
	background-position: 0 -414px;
	top: 575px;
	left: 638px;
	-webkit-animation: madHatter 1s;	
}
#des6, #web6, #br6, #tv8 {
	background-position: 0 	-279px;
}
#promo6 {
	background-position: 0 -273px;
}
#wbc6, #plp6 {
	background-position: 0 -276px;	
}
#id6 {
	background-position: 0 -216px;	
}
#out7, #des7, #promo7, #id7 {
	background-position: 0 -474px;
	top: 638px;
	left: 638px;
	-webkit-animation: ultimatefoo 1s;	
}
#des7, #web7, #br7, #tv7 {
	background-position: 0 -335px;	
}
#promo7 {
	background-position: 0 -328px;	
}
#wbc7 {
	background-position: 0 -330px;	
}
#plp7 {
	background-position: 0 -332px;	
}
#id7 {
	background-position: 0 -271px;	
}
#out8, #des8, #promo8, #id8 {
	background-position: 0 -535px;
	top: 701px;
	left: 638px;
	-webkit-animation: noName 1s;
}
#des8, #tv5 {
	background-position: 0 -392px;	
}
#promo8, #wbc8 {
	background-position: 0 -384px;	
}
#plp8 {
	background-position: 0 -388px;	
}
#id8 {
	background-position: 0 -327px;	
}
#web8 {
	background-position: 0 -394px;	
}
#br8 {
	background-position: 0 -397px;	
}
}

/* ================================================================================
TABLET Landscape Layout: 769px to 1024px. Inherits styles from: Mobile Layout.
=================================================================================== */
@media only screen and (min-width: 769px) {
#outWrapper {
	height: 665px;
	width: 1024px;
	position: absolute;	
}
#oGwrap {
	height: 665px;
	width: 120px;
	margin-left: 905px;
	background-color: #7E7F82;
	z-index: 0;
	position: absolute;	
}
/*----------------TEXT-----------------*/
#outdoorText, #designText, #promoText, #idText, #webText, #brandingText, #workByText, #tvText, #pastLivesText {
	font-size: 5.5em;
	letter-spacing: .13em;
	margin: 30px 320px;	
}
#designText {
	margin-left: 343px;	
}
#promoText {
	margin-left: 295px;	
}
#idText {
	margin-left: 298px;	
}
#webText {
	margin-left: 345px;	
}
#workByText {
	margin-left: 230px;	
}
#tvText {
	margin-left: 293px;	
}
#pastLivesText {
	margin-left: 170px;	
}
/*------------------SLIDESHOW--------------*/
#gallery {
	width: 777px;
	height: 436px;
	overflow: hidden;
	margin: -30px 30px;
	position: absolute;	
}
#slideshow {
    position:relative;
    height:436px;
	width: 777px;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
	width: 777px;
	height: 436px;
    z-index:8;
}
#slideshow VIDEO {
    position:absolute;
    top:0;
    left:0;
	width: 777px;
	height: 436px;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}
#menu {
	width: 50px;
	height: 50px;
	margin: -125px 843px;
	position: absolute;
	-webkit-animation: slideUp1 .7s linear;
}
li a {
	display:block;
	width: 45px;
	height: 45px;	
}
#SSlogo{
	width: 100px;
	height: 100px;
	margin-left: -25px;	
}
}

/*======================================================================================================
DESKTOP Layout: 1024px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout.
======================================================================================================== */
@media only screen and (min-width: 1025px) {
#outWrapper {
	height: 1200px;
	width: 2000px;
	position: absolute;	
}
#oGwrap {
	height: 1200px;
	width: 1307px;
	margin-left: 1155px;
	background-color: #7E7F82;
	z-index: 0;
	position: absolute;	
}
/*----------------TEXT-----------------*/
#outdoorText, #designText, #promoText, #idText, #webText, #brandingText, #workByText, #tvText, #pastLivesText {
	font-size: 5.7em;
	letter-spacing: .13em;
	margin: 20px 440px;	
}
#designText {
	margin-left: 463px;	
}
#promoText {
	margin-left: 400px;	
}
#idText {
	margin-left: 440px;	
}
#webText {
	margin-left: 460px;	
}
#workByText {
	margin-left: 375px;	
}
#tvText {
	margin-left: 443px;	
}
#pastLivesText {
	margin-left: 312px;	
}
#rPhoneText, #lPhoneText, #rArrow, #lArrow {
	display: none;	
}
/*------------------SLIDESHOW--------------*/
#gallery {
	width: 877px;
	height: 536px;
	overflow: hidden;
	top: 160px;
	left: 100px;
}
#slideshow {
    position:relative;
    height:536px;
	width: 877px;
}
#slideshow IMG {
    position:absolute;
	width: 877px;
	height: 536px;
    top:0;
    left:0;
    z-index:8;
}
#slideshow video {
    position:absolute;
	width: 877px;
	height: 536px;
    top:0;
    left:0;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}
#menu {
	width: 50px;
	height: 50px;
	margin: -70px 1093px;
	position: absolute;
	-webkit-animation: slideUp .8s linear;
}
li a {
	display:block;
	width: 45px;
	height: 45px;	
}
#SSlogo{
	width: 100px;
	height: 100px;
	margin-left: -25px;	
}
}