/* HTML5 Boilerplate  */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

/*a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }*/
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }




















/********************************************************
- Code by: ar @ reel media [http://rmnet.com]
*********************************************************/

/*
- Drips:						#00a0e7
- Drawings & Paintings:			#005cd4
- Party Environments:			#cc0099
- Rock/Music/Music Sets:		#f00030
- Corporate Exhibits/Events:	#ff6a17
- Underwater:					#28c4b3


- Tan BG			#f7f8f1
- Horizontal Lines:	#e3e6d8;

Text:
- Off-Black Grey:	#404040;
- Light Grey:		#959595;

*/






/* ------------------------------------------------------------
	1. LAYOUT, FONTS, ETC.
   ------------------------------------------------------------ */

html {font-family: "HelveticaNeue", "Helvetica Neue", sans-serif;}

/* Colorization: All <a href="">: (page specific) [nav overrides are below] */
.home-page a,
.drips a							{color: #00a0e7;}
.drawings-paintings a				{color: #005cd4;}
.party-environments a				{color: #cc0099;}
.rock-music-sets a					{color: #f00030;}
.corporate-exhibits-events a		{color: #ff6a17;}
.underwater a						{color: #28c4b3;}

.home-page a:hover,
.drips a:hover						{color: #00c2ff;}
.drawings-paintings a:hover			{color: #0066ed;}
.party-environments a:hover			{color: #ff4ec1;}
.rock-music-sets a:hover			{color: #ff5c69;}
.corporate-exhibits-events a:hover	{color: #ff8916;}
.underwater a:hover					{color: #2bd7c3;}






/*Helper for the grid. Usually used to create the right/left bounds when assigning .container_10*/
.wrap {position: relative;}

.bird {
	display: block;
	/*height: 99px;
	width: 78px;*/

	height: 68px; /*hide rocks*/
	width: 78px;

	background: url(../img/mraad.com-v2-pigeon-colorized_sprite.png) no-repeat;
}

/* Bird: Current Page: Colorization */
.drips .bird						{background-position: -78px 0;}
.drawings-paintings .bird			{background-position: -156px 0;}
.party-environments .bird			{background-position: -234px 0;}
.rock-music-sets .bird				{background-position: -312px 0;}
.corporate-exhibits-events .bird	{background-position: -390px 0;}
.underwater .bird					{background-position: -468px 0;}



/* <header> */

header {background: url(../img/mraad.com-v2-spectrum.png) center;}

header .page-title {
background: -moz-linear-gradient(top,  rgba(229,229,229,0) 60%, rgba(0,0,0,0.15) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(229,229,229,0)), color-stop(100%,rgba(0,0,0,0.15))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(229,229,229,0) 60%,rgba(0,0,0,0.15) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(229,229,229,0) 60%,rgba(0,0,0,0.15) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(229,229,229,0) 60%,rgba(0,0,0,0.15) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(229,229,229,0) 60%,rgba(0,0,0,0.15) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e5e5e5', endColorstr='#26000000',GradientType=0 ); /* IE6-9 */

/* <http://www.colorzilla.com/gradient-editor/#e5e5e5+60,000000+100&0+60,0.15+100;Custom> */

}

header h1 {
	margin: 0 auto;
	width: 980px;
	/*height: 45px;*/

	color: white;
	font-size: 125%;
	line-height: 100%;
	font-family: "HelveticaNeue", "Helvetica Neue", sans-serif;
	font-weight: 300;
	
	text-transform: uppercase;
}

/*image replaced*/
header h1 a {
	display: block;
	width: 292px;
	height: 17px;

	margin-top: 15px;
	margin-bottom: 10px;
	padding-bottom: 2px;

	color: white;
	text-decoration: none;

	/*inline - via h5bp*/
	text-indent: -999em;
	overflow: hidden;
	text-align: left;
	direction: ltr;
	*line-height: 0;

	border-bottom: 3px solid transparent;
	/*background: url(../img/mraad.com-v2-h1-title-helvetica.png) no-repeat;*/
	background: url(../img/mraad.com-v2-h1-title-univers@3x.png) no-repeat;
	background-size: 291px 17px;
}

.no-backgroundsize header h1 a {
	background: url(../img/mraad.com-v2-h1-title-univers.png) no-repeat;
}

/*Even out the space above and below the MRAAD since IE doesn't respect padding/margin the same way as other browsers*/
.lt-ie8 header h1 a {
	margin-top: 15px;
	margin-bottom: 5px;
	padding-bottom: 0px;	
}

header h1 a:hover {
	color: white;
	border-bottom: 3px solid white; /*non-rgba() fallback*/
	border-bottom: 3px solid rgba(255,255,255,0.5);
}

header h1 a:active {
	border-bottom-color: rgba(255,255,255,0.3);
}


header .below-spectrum-block {
	position: relative;
	margin-bottom: 5px;
	margin-bottom: 3px;
	background-color: #f7f8f1;

	/*border-top: 1px solid white;*/
	border-bottom: 1px solid #e3e6d8;
	/*background-image: url(../img/mraad.com-v2-tan_bg_textured.gif);*/
}

header .below-spectrum-block .bird {
	position: absolute;
	bottom: -31px;
	right: 0px;
	/*background-position: 0 -99px;*/ /*tan + noise*/
	/*background-position: 0 0px;*/
}

/*Works with the ".lt-ie8 header h2" above to get the .bird in the right position*/
.lt-ie8 header .below-spectrum-block .bird {
	bottom: -1px;
}





/* <header>: Site Navigation */
.site-nav ul {
	display: flex;
	justify-content: space-between;
}


.site-nav li {
	display: block;
	/*float: left;*/
	/*padding-right: 20px;*/
}

.site-nav li.nav-contact {
	/*float: right;*/
	/*padding: 0;*/
}

.site-nav a {
	display: block;
	padding: 5px 0px;
	
	color: #959595;
	font-size: 98%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
	/*font-weight: 300;*/
	text-decoration: none;
	
	border-bottom: 3px solid transparent;
}

/*Just for SLASH /*/
.site-nav a i {padding: 0 2px; font-style: normal;}

.site-nav .nav-contact a {

	margin-top: 4px;
	/*margin-left: 10px;*/
	padding: 8px 10px;
	
	color: white;
	font-size: 75%;
	line-height: 75%;
	letter-spacing: 0.3px;
	font-weight: 500;
	text-transform: uppercase;
	font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", sans-serif;
	
	background-color: #B3B4AE;
	border-bottom: 0;
	
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
}



 .site-nav a:hover	{border-bottom-color: #e5e6df;}
 .site-nav a:active	{border-bottom-color: #eeefea;}

.nav-drips a:hover						{color: #00a0e7;}
.nav-drawings-paintings a:hover			{color: #005cd4;}
.nav-party-environments a:hover			{color: #cc0099;}
.nav-rock-music-sets a:hover			{color: #f00030;}
.nav-corporate-exhibits-events a:hover	{color: #ff6a17;}
.nav-underwater a:hover					{color: #28c4b3;}
.nav-contact a:hover					{background-color: #989994;}

.nav-drips a:active						{color: #00c2ff;}
.nav-drawings-paintings a:active		{color: #0066ed;}
.nav-party-environments a:active		{color: #ff4ec1;}
.nav-rock-music-sets a:active			{color: #ff0004;}
.nav-corporate-exhibits-events a:active	{color: #ff8916;}
.nav-underwater a:active				{color: #2bd7c3;}
.nav-contact a:active					{background-color: #7F7F7C;}


/* Colorization: Site Navigation: Current Page */
.drips .nav-drips a											{color: #00a0e7; border-bottom-color: #00a0e7; cursor: default;}
.drawings-paintings .nav-drawings-paintings a				{color: #005cd4; border-bottom-color: #005cd4; cursor: default;}
.party-environments .nav-party-environments a				{color: #cc0099; border-bottom-color: #cc0099; cursor: default;}
.rock-music-sets .nav-rock-music-sets a						{color: #f00030; border-bottom-color: #f00030; cursor: default;}
.corporate-exhibits-events .nav-corporate-exhibits-events a	{color: #ff6a17; border-bottom-color: #ff6a17; cursor: default;}
.underwater .nav-underwater a								{color: #28c4b3; border-bottom-color: #28c4b3; cursor: default;}


/* Page Navigation: Colorization */
.drips .page-nav a:hover						{background-color: #00a0e7;}
.drawings-paintings .page-nav a:hover			{background-color: #005cd4;}
.party-environments .page-nav a:hover			{background-color: #cc0099;}
.rock-music-sets .page-nav a:hover				{background-color: #f00030;}
.corporate-exhibits-events .page-nav a:hover	{background-color: #ff6a17;}
.underwater .page-nav a:hover					{background-color: #28c4b3;}

.drips .page-nav a:active						{background-color: #00c2ff;}
.drawings-paintings .page-nav a:active			{background-color: #0066ed;}
.party-environments .page-nav a:active			{background-color: #ff4ec1;}
.rock-music-sets .page-nav a:active				{background-color: #ff5c69;}
.corporate-exhibits-events .page-nav a:active	{background-color: #ff8916;}
.underwater .page-nav a:active					{background-color: #2bd7c3;}



header h2 {	
	margin-top: 50px;
	padding-top: 30px;
	margin-bottom: 30px;

	color: #959595;

	font-size: 150%;
	line-height: 140%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
	font-weight: 300;
	border-top: 1px solid #e3e6d8;
}

/*Pads below the text since IE doesn't respect the margin/padding the same way as other browsers*/
.lt-ie8 header h2 {
	padding-bottom: 30px;
}



/*>*/
header h2 span {
	color: #656662;
}

/* <h2> "intro text": Current Page: Colorization */
/*
.drips header h2						{color: #00a0e7;}
.drawings-paintings header h2			{color: #005cd4;}
.party-environments header h2			{color: #cc0099;}
.rock-music-sets header h2				{color: #f00030;}
.corporate-exhibits-events header h2	{color: #ff6a17;}
.underwater header h2					{color: #28c4b3;}
*/







/* Navigation: Secondary Pages (Inter-Page Navigation) */

.page-nav {
	padding: 25px 0;
	border-bottom: 1px solid #e3e6d8;
}

.page-nav h3 {
	margin: 0;
	font-size: 80%;
}

.page-nav ul li {
	padding: 0;
	margin: 0;
	line-height: 110%;
}

/*For some reason, the <ul>s that are interior and span two columns are not cascading the "outside" property. This fixes that.*/
.lt-ie8 .page-nav ul {
	list-style: outside;
}


.page-nav a {
	padding: 1px 3px;
	margin: -1px -3px;
	
	color: #959595;
	font-size: 80%;
	text-decoration: none;
}

.page-nav a:before {	
	margin-right: 5px;
	content: "\203a";
}


/*
http://www.alistapart.com/articles/taminglists/
http://stackoverflow.com/questions/7698764/custom-bullet-symbol-for-li-elements-in-ul-that-is-a-regular-character-and
*/

.page-nav a:hover {
	margin-left: 2px;
	color: white;
}



/*
- for any quick page specific messages.
- ex: Underwater "photos from the camera of..."
*/
.page-nav-sub {
	font-size: 70%;
	line-height: 70%;
	/*color: #bfbfbf;*/
	color: #a6a6a6;
	/*background-color: #f6f7ef;*/
	/*border-bottom: 1px solid #f4f7e8;*/	
	border-bottom: 1px dotted #e3e6d8;
}

.page-nav-sub p {
	margin: 9px 0;
	padding-left: 12px;
}







/* <article> */

article {
	padding: 130px 0;
	border-bottom: 1px solid #e3e6d8;
}

article:first-child {
	margin-top: 0px;
}

article:last-child {
	border-bottom: 0;
}


article .wrap {
	/*margin: 0 auto;
	width: 980px;*/
}

article .meta {
	position: relative;
	/*Height = Close approximation. Necessary because the children are absolutly positioned and without this the div has no height*/
	/*height: 1.6em;*/
	margin: 0px 10px;
	margin-bottom: 5px;
}

article .breadcrumbs {
	position: absolute;
	left: 0;
	bottom: 0;
	
	/*float: left;*/
	/*font-size: 105%;
	line-height: 100%;*/
}

/*Breadcrumb Trail*/
article .breadcrumbs i {
	display: block;
	
	color: #c0c1bb;

	/*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;*/


	font-size: 70%;
	font-style: normal;
	text-transform: uppercase;

}

/*Name*/
article .breadcrumbs strong {
	color: black;
	font-size: 160%;
	line-height: 100%;
	
	font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", sans-serif;
	font-weight: normal;
	text-transform: none;
}

article .breadcrumbs strong em {
	font-size: 60%;
	line-height: 60%;
	font-family: "HelveticaNeue", "Helvetica Neue", sans-serif;
	color: #7f7f7f;
}

/*Year*/
article .breadcrumbs em {
	padding-left: 5px;
	/*color: #959595;*/
	color: #b4b5af;
	font-size: 90%;
	font-style: normal;
}





article nav {
	position: absolute;
	/*right: 4.4em;*/
	right: 0;
	bottom: 0;

	/*float: right;*/
	/*margin-top: 1.35em;*/

	font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", sans-serif;
	text-align: right;
}

article nav a {
	position: relative;

	font-size: 70%;

	text-transform: uppercase;
	text-decoration: none;
}

/*Hide the "Previous" link by default. Cycle() will expose it when its time*/
article nav a.prev {
	display: none;
}

article nav .next .noun {
	display: none;
}

/* Slide Position Readout: "1 of 12"*/
article .meta .slide-position {	
	display: inline-block;	
	width: 3.5em;
	text-align: right;
}

article .meta .slide-position span {
	padding: 1px 5px 2px 5px;

	color: white;
	font-size: 70%;
	text-align: center;
	
	/*background-color: #d8d9d2;*/

-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        border-radius: 3px;
}

/* Colorization: "1 of #" background*/
.drips .slide-position span						{background-color: #00a0e7;}
.drawings-paintings .slide-position span		{background-color: #005cd4;}
.party-environments .slide-position span		{background-color: #cc0099;}
.rock-music-sets .slide-position span			{background-color: #f00030;}
.corporate-exhibits-events .slide-position span	{background-color: #ff6a17;}
.underwater .slide-position span				{background-color: #28c4b3;}




article .overlay.instructions {
	position: absolute;
	top: 120px;
	left: 300px;
	
	width: 400px;
	height: 200px;

	text-align: center;

	background-color: rgba(255,255,255,0.5);

-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.5);
   -moz-box-shadow: 0 0 50px rgba(0,0,0,0.5);
        box-shadow: 0 0 50px rgba(0,0,0,0.5);

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

	z-index: 666;
}

article .overlay.instructions span {
	font-size: 150%;
	color: white;
	text-transform: uppercase;
}











/*
- Apply the 3px white border and box-shadow ONLY to images are are to be framed.
- Translation: Images that are NOT full bleed inside of the stage
- The ".framed" class is now added automatically via JS (via calculating the <img> width vs. 980px)
*/
article figure img.framed {
	/*inline + no float = 4px gap (2px for each element)*/
	margin: 20px 4px;

-webkit-box-shadow: 0 0 7px rgba(0,0,0,0.2);
   -moz-box-shadow: 0 0 7px rgba(0,0,0,0.2);
        box-shadow: 0 0 7px rgba(0,0,0,0.2);
	
	border: 3px solid white;
}



article figure div.img {
	width: 980px;
	height: 620px;
	margin: 0 10px;
	background-color: #f7f8f1;
}



article figure .back-to-begining {
	margin: 300px 200px;
	color: #959595;
	/*background: red;*/
}

/*>*/
article figure .back-to-begining span {
	color: #656662;	
}

article figure .back-to-begining strong {
	display: block;
	color: black;
	font-size: 200%;
	line-height: 110%;
}






article .description {
	/*display: none;*/
	margin-top: 5px;
}

article .description blockquote {
	margin-top: 0;
	margin-bottom: 0;
	
	font-size: 90%;
	color: #959595;
}

article .description blockquote em {
	font-size: 85%;
	color: #b1b1b1;
}







.other-list {
	/*padding: 130px 0;*/
	padding: 100px 0;
}

.other-list h3 {
	margin: 0;
	margin-left: 10px; /*to match grid.css*/

	text-transform: uppercase;
}

.other-list ul {
	padding: 0;
	margin-top: 0.8em;
}

/*
- @extend above: To account for list items that span two lines
- See: http://alistapart.com/article/taminglists
*/
/*
.other-list ul {
	margin-right: 0px;
	margin-left: 0px;

	padding-left: 0.9em;
	text-indent: -0.9em;
}
*/

.other-list li {
	margin: 0;
	padding: 0;
	
	line-height: 200%;
	
	list-style: none;
}

.other-list li:before {
	margin-right: 8px;
	content: "\203a";
	font-size: 130%;
}

/*Company Name*/
.other-list li strong {
	font-size: 140%;
	font-family: "HelveticaNeue", "Helvetica Neue", sans-serif;
	font-weight: normal;
	
	color: #4D4E4E;

}

/*Name, Role, Description, etc.*/
.other-list li em {
	font-size: 80%;
	font-style: normal;
	color: #959595;

	text-transform: uppercase;
}

/*For those times where you manually need to align a second line with the first, because of the faux "bullet" ">".*/
.other-list .second-line-indent {
	display: block;
	margin-left: 1.4ex;
}








/* <footer> */

footer {
	position: relative;
	padding: 120px 0;
	color: #959595;
	
	font-size: 120%;
	/*line-height: 205%;*/
	font-family: "HelveticaNeue", "Helvetica Neue", sans-serif;
	font-weight: 300;

	
	/*background-color: #f7f8f1;*/
	border-top: 1px solid #e3e6d8;
	background: #f7f8f1 url(../img/mraad.com-v2-spectrum.png) repeat-x center -47px;
}

footer .wrap {
	position: relative;
	padding: 50px auto;
	text-align: center;
}


footer a {
	/*color: #00a0e7;*/
	/*text-decoration: none;*/
}

footer p {
	margin: 0;
	padding: 0;
}

footer p.copyright {
	margin-top: 50px;
	/*margin-bottom: -50px;*/
	color: #bfbfbf;
	font-size: 65%;
}

footer .bird {
	position: absolute;
	height: 99px;
	top: -219px;
	right: 0px;
	background-position: 0 -198px; /*white*/
}

/*all the way at the bottom*/
footer .bird {
	top: auto;
	right: auto;
	left: 0;
	bottom: -120px; /*all the way at the bottom*/
	background-position: 0 0px; /*tan*/
}










/* ------------------------------------------------------------
	2. PAGE SPECIFIC
   ------------------------------------------------------------ */





/*----------------------------------------
	Home Page
  ----------------------------------------*/

.home-page .below-spectrum-block {
	padding-bottom: 40px;
	margin-bottom: 0;
}

.home-page h2 {
	display: block;
	height: 51px;
	width: 980px;
	
	/*margin: 90px auto 50px auto;*/ /*No Bird*/
	/*margin: 90px auto 70px auto;*/ /*Big Bird*/
	margin: 90px auto 55px auto; /*Small Bird*/

	background-image: url(../img/mraad.com-v2-home-page-h2-intro-text-ps@3x.png);
	background-size: 980px 46px;
}

.no-backgroundsize .home-page h2 {
	background-image: url(../img/mraad.com-v2-home-page-h2-intro-text-ps.gif);
}

/*From Photoshop + With bird*/
.home-page h2XXXXXXXXXXXXX {
	height: 148px;
	margin: 85px auto 45px auto; /*Small Bird*/
	background-image: url(../img/mraad.com-v2-home-page-h2-intro-text-ps-w-bird.gif);
}

/*TEMP OTHER BIRD TURN OFF HERE*/
/*.home-page .content .bird {display: none;}*/







.home-page #home-page-slideshow {
	padding-top: 0;
	padding-bottom: 65px;
	border-bottom: 0;
}

/*Big Bird*/
.home-page article .bird {
	position: absolute;
	top: -68px;
	right: 27px;
}

/*Smaller Bird*/
.home-page article .birdXXXXXXX {
	position: absolute;
	top: -48px;
	right: 31px;
	
	height: 48px;
	width: 55px;
	background-position: -0px -110px;
}


/*Medium Bird*/
.home-page article .bird {
	position: absolute;
	top: -58px;

	/*Head centered under line above*/
	right: 32px;

	/*Body centered under line above*/
	/*right: 24px;*/
	
	height: 58px;
	width: 55px;
	
	background-position: -7px -189px;
}

.home-page article .meta {
	display: none;
}



/*.home-page figure {}*/

.home-page .rsDefaultInv,
.home-page .rsDefaultInv .rsOverflow,
.home-page .rsDefaultInv .rsSlide {
  background: none;
}

.home-page .rsFullscreen.rsDefaultInv,
.home-page .rsFullscreen.rsDefaultInv .rsOverflow,
.home-page .rsFullscreen.rsDefaultInv .rsSlide {
  background: #f7f8f1;
}





/*
- Special fitting for the featured blueprint (or any blueprint for that matter).
- BP Size: 980x650
- Home Page Stage Size: 974x620
*/
/*
.home-page figure .blueprint-scale-to-fit {
  width: 974px;
  height: 620px;
}
*/



/* <article>: Bio Paragraphs */
.home-page #home-page-paragraphs {
	padding: 0;
	padding-bottom: 40px;
	border-bottom: 0;
}

.home-page #home-page-paragraphs .wrap {
	padding-top: 40px;
	border-top: 1px solid #e3e6d8;
}


/*Smaller Bird*/
.home-page #home-page-paragraphs .bird {
	position: absolute;
	top: -49px;
	right: 31px;
	
	height: 48px;
	width: 55px;
	background-position: -0px -110px;
}


.home-page #home-page-paragraphs p {
	color: #626464;
	line-height: 170%;
}

.home-page #home-page-paragraphs p:last-child {
	margin-bottom: 0;
}





/* <article>: Contact Info (Address, Phone, Email, United Scenic Artists) */
.home-page #home-page-contact-info {
	padding: 0;
	margin-bottom: 40px;
	border: none;
}

.home-page #home-page-contact-info .wrap {
	border-top: 1px solid #e3e6d8;
}

.home-page #home-page-contact-info .other-list {
	margin-top: 40px;
	padding-top: 0;
	padding-bottom: 0;
}

.home-page #home-page-contact-info .other-list h3 {
	margin-left: 0;
	font-size: 110%;
}

.home-page #home-page-contact-info .other-list li {
	font-size: 70%;
	color: #626464;
}

.home-page #home-page-contact-info .other-list h3,
.home-page #home-page-contact-info .other-list ul li:before {
	color: #00a0e7;
}

.home-page #home-page-contact-info .other-list .footnote {
	display: block;
	margin-left: 0.9em;
	font-size: 80%;
	font-weight: bold;
	color: #AEB3B3;
}


/*For some reason, the <ul>s that are interior and span two columns are not cascading the "outside" property. This fixes that.*/
.lt-ie8 .home-page #home-page-contact-info .other-list ul,
.lt-ie8 .home-page #home-page-contact-info .other-list .footnote,
.lt-ie8 .home-page #home-page-contact-info .other-list .second-line-indent {
	list-style: outside;
	margin-left: 0;
}






/*----------------------------------------
	1 of 6:	"Drips"
  ----------------------------------------*/





/*----------------------------------------
	2 of 6:	"Drawings & Paintings"
  ----------------------------------------*/

.drawings-paintings article#blueprint-series figure {height: 650px;}

.drawings-paintings article#brain-series figure,
.drawings-paintings article#the-eye-series figure,
.drawings-paintings article#the-big-bolt-series figure,
.drawings-paintings article#its-a-cinch figure,
.drawings-paintings article#hairy-nest-series figure,
.drawings-paintings article#the-food-chain figure {height: 640px;}




/* Blueprint Instructions/Hint in the .meta nav */
article .hint-inline {
	position: relative;
	margin-right: 11px;

	padding-right: 20px;

	font-size: 70%;
	line-height: 150%;

	color: #666;
}

article .hint-inline i {padding: 3px;}
article .hint-inline i strong {color: black;}

article .hint-inline .zoom-icon {
	display: block;
	position: absolute;
	top: -1px;
	right: -5px;
	width: 17px;
	height: 16px;
	margin: 0 5px;

	background: url(../img/mraad.com-v2-zoomhover-icon.png) no-repeat -205px -25px;	
	
	/*small black zoom icon*/
	/*background-position: -185px -25px;*/
}

 /* Hint Text */ 
article .hint-inline i {
	font-style: normal;
}

/* ".mouseover" class added via jQuery to trigger transitions*/
article nav:hover .hint-inline .zoom-icon {
	/*right: 22.4em;*/
}












/*
- Special for "drawings_and_paintings-enamel_on_wood-cliffs_and_clouds-IMG_4469.jpg" since it's too short and I can't automatically vertically center yet.
- Very precarious.
*/


/*
.drawings-paintings article#paintings-enamel-on-wood figure .slideshow-item:nth-child(5) img {margin-top: 76px;}
*/




/*----------------------------------------
	3 of 6:	"Party Environments"
  ----------------------------------------*/

/*Room to give the bird*/
.party-environments header h2 {
	width: 940px !important;
	padding-right: 40px;
}

/*Special height for larger/square images*/
.party-environments article#the-woodlands-anniversary-ball-2012 figure,
.party-environments article#the-palladium-halloween-w_nazi_box figure {height: 640px;}



.party-environments article#the-woodlands-anniversary-ball-2012 figure img {
	margin: 0;
	border-width: 3px;
	border-top: 0;
	border-bottom: 0;

-webkit-box-shadow: none;
   -moz-box-shadow: none;
        box-shadow: none;

	/*white shadow test w/choke*/
	/*border-width: 0px;
	box-shadow: 0px 0 5px 5px white;*/
}




/*----------------------------------------
	4 of 6:	"Rock/Music Sets"
  ----------------------------------------*/

/*Room to give the bird*/
.rock-music-sets header h2 {
	width: 940px !important;
	padding-right: 40px;
}

/*This might be better higher on the page in the "Colorization" group*/
.rock-music-sets .other-list h3,
.rock-music-sets .other-list ul li:before {
	color: #f00030;
}





/*----------------------------------------
	5 of 6:	"Corporate Exhibits/Events"
  ----------------------------------------*/

/*Room to give the bird*/
.corporate-exhibits-events header h2 {
	width: 940px !important;
	padding-right: 40px;
}

/*This might be better higher on the page in the "Colorization" group*/
.corporate-exhibits-events .other-list h3,
.corporate-exhibits-events .other-list ul li:before {
	color: #ff6a17;
}





/*----------------------------------------
	6 of 6:	"Underwater"
  ----------------------------------------*/

/*Room to give the bird*/
.underwater header h2 {
	width: 910px !important;
	padding-right: 70px;
}









/* ------------------------------------------------------------
	3. BACK TO TOP
   ------------------------------------------------------------ */

a.back-to-top {
	position: fixed;
	top: 20px;
	right: 20px;
	/*margin-bottom: 0;*/
	
	padding: 10px;
	
	color: white;
	font-size: 70%;
	line-height: 100%;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;

	text-align: center;

	background-color: #cbcbc5;
	
-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        border-radius: 3px;

/*"Spread" value = faux-border*/
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
   -moz-box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
        box-shadow: 0 0 0 2px rgba(255,255,255,0.7);

	opacity: 0.65;
	
	z-index: 666;

/*	for .at-top add/remove via JS*/
	transition: all 350ms;
}

a.back-to-top.at-top,
a.back-to-top.at-top:hover {
/*:hover selector necessary for smooth/graceful fade-out*/
	opacity: 0;
	pointer-events: none;
}


a.back-to-top .arrow {
	display: block;
	margin-bottom: 2px;
}


a.back-to-top:hover {
	margin-bottom: 2px;
	color: white;
	opacity: 0.8;
	background-color: #b2b3ad;
}

/* "Top": Colorization */
.drips a.back-to-top:hover						{background-color: #00a0e7;}
.drawings-paintings a.back-to-top:hover			{background-color: #005cd4;}
.party-environments a.back-to-top:hover			{background-color: #cc0099;}
.rock-music-sets a.back-to-top:hover			{background-color: #f00030;}
.corporate-exhibits-events a.back-to-top:hover	{background-color: #ff6a17;}
.underwater a.back-to-top:hover					{background-color: #28c4b3;}

.drips a.back-to-top:active						{background-color: #00c2ff;}
.drawings-paintings a.back-to-top:active		{background-color: #0066ed;}
.party-environments a.back-to-top:active		{background-color: #ff4ec1;}
.rock-music-sets a.back-to-top:active			{background-color: #ff0004;}
.corporate-exhibits-events a.back-to-top:active	{background-color: #ff8916;}
.underwater a.back-to-top:active				{background-color: #2bd7c3;}



/*"Jump" animation*/
a.back-to-top:hover {
	-webkit-animation: jump 0.5s ease-out infinite;
	animation: jump 0.4s ease-in-out infinite;
}

@-webkit-keyframes "jump" {
 0% {transform: translateY(-2px);}
 50% {transform: translateY(-5px);}
 100% {transform: translateY(-2px)}
}

@keyframes "jump" {
 0% {transform: translateY(-2px);}
 50% {transform: translateY(-5px);}
 100% {transform: translateY(-2px);}
}













/* ------------------------------------------------------------
	4. EFFECTS
   ------------------------------------------------------------ */

a,
article .breadcrumbs em,
article .breadcrumbs i {
-webkit-transition: 0.1s all;
   -moz-transition: 0.1s all;
        transition: 0.1s all;
}










/* ------------------------------------------------------------
	5. SLIDESHOW + ZOOM

	- Via: jQZoom
	- <http://www.mind-projects.it/projects/jqzoom/index.php>
   ------------------------------------------------------------ */

/*jQZoom applies the "crosshair" cursor*/
.zoomWrapper {cursor: pointer !important;}

/*"LOADING..."*/
.zoomPreload {
	position: absolute;

	padding: 8px 5px;
	width: 6em;

	color: white;
	font-size: 90%;
	font-weight: bold;
	text-transform: uppercase;

	background-color: black;
	background-color: rgba(0,0,0,0.65);
	
-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        border-radius: 3px;

	z-index: 666;
}

/* hide ".zoomPreload" all together*/
.zoomPreload {/*display: none;*/}


/* dark inner border */
.zoomhover-inner {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0;
	left: 0;
	
	filter: alpha(opacity=65); /*IE*/
	opacity: 0.65;
	
	pointer-events:none;

	border: 2px solid black;
	/*box-shadow: inset 0 0 10px rgba(0,0,0,0.45);*/
}

/* magnifying glass icon [circle] */
.zoomhover-icon {
	position: absolute;

	bottom: -5px;
	right: -5px;	
	width: 63px;
	height: 63px;

	background: url(../img/mraad.com-v2-zoomhover-icon.png) no-repeat 0px 0;

	z-index: 666;

	pointer-events:none;
}

/* magnifying glass icon [trianglular/dog-eared] */
.zoomhover-icon {
	/*bottom: 2px;
	right: 2px;
	background-position: -63px 0;*/
}


/* magnifying glass icon: Pulsate */
/* http://stackoverflow.com/q/4910963/ */

/* reference code: use when testing different values */
/*
.zoomhover-icon {
	-webkit-animation: pulsate 1.5s ease-out infinite;
}

@-webkit-keyframes pulsate {
	0% {-webkit-transform: scale(1,1); opacity: 0.7;}
	50% {-webkit-transform: scale(1.05, 1.05); opacity: 1.0;}
	100% {-webkit-transform: scale(1,1); opacity: 0.7;}
}
*/

.zoomhover-icon {
	-webkit-animation: pulsate 1.5s ease-out infinite;
	animation: pulsate 1.5s ease-out infinite;
}

@keyframes "pulsate" {
 0% {-webkit-transform: scale(1,1); transform: scale(1,1); opacity: 0.7;}
 50% {-webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); opacity: 1.0;}
 100% {-webkit-transform: scale(1,1); transform: scale(1,1); opacity: 0.7;}
}

@-webkit-keyframes "pulsate" {
 0% {-webkit-transform: scale(1,1); transform: scale(1,1); opacity: 0.7;}
 50% {-webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); opacity: 1.0;}
 100% {-webkit-transform: scale(1,1); transform: scale(1,1); opacity: 0.7;}
}

/* Get all vender prefixes via: <http://prefixr.com/> WARNING: Crazy amount of code! */









/* ------------------------------------------------------------
	6. SLIDESHOW

	- Via: RoyalSlider
	- <http://dimsemenov.com/plugins/royal-slider/>
   ------------------------------------------------------------ */



.royalSlider {
    width: 980px;
    height: 620px;

    margin: 0 10px;

    text-align: left;

    -webkit-user-select: none;
    -moz-user-select: none;  
    user-select: none;
    
    overflow: hidden;
    
	/* Fade in disabled for now. Immidiate feels faster. */
    /* opacity: 0; */
    transition: opacity 0.15s ease-in;
}

/*
Hide uninitialized galleries to prevent horizontal scroll
- Although, I don't know.
- Once everything starting working in Safari, it contiuned to work even after removing this.
- It even worked in Safari Technolog Preview without this.
- So I don't know.
- Leaving for now.
*/
.royalSlider:not(.rsDefault):not(.rsDefaultInv) {
    visibility: hidden;
}

/* Fade in galleries after initialization */
.royalSlider.rs-loaded {
    opacity: 1;
}

/*Slide <a href> text*/
a.rsImg {display: none;}

/*Fallbacks*/
.no-js figure {overflow: visible;}
.no-js figure a {display: block; float: none !important;}



.rsDefaultInv .rsBullets {
    position: absolute;
    bottom: 10px;
}

/*.rsDefaultInv .rsBullet span {}*/
.rsDefaultInv .rsBullet.rsNavSelected span {
    box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
}

.rsDefaultInv .rsBullet,
.rsDefaultInv .rsBullet span {
    height: 10px;
    width: 10px;
}
/*
.touch .rsFullscreenBtn {
-webkit-transform: scale(1.5);
        transform: scale(1.5);
}
*/

/*
non-Fullscreen: Hide bullet nav
Fullscreen: Show bullet nav
*/
.rsBullets {visibility: hidden;}
.rsFullscreen .rsBullets {visibility: visible;}

/*
non-Fullscreen: Natural rsArrow behaviour
Fullscreen: Force rsArrow to HIDE
*/
.rsFullscreen .rsArrow {visibility: hidden;}

/*
Slides with more than one image.
Also has the .rsContent class applied.
*/
.royalSlider .group {text-align: center;}
.royalSlider .group img {height: 100%;}


.drawings-paintings #blueprint-series .rsFullscreenBtn {display: none;}












@font-face {
	font-family: 'rs-icons';
	src:url('../js/libs/royalslider-9.5.9/icons/icons.eot?oquo7k');
	src:url('../js/libs/royalslider-9.5.9/icons/icons.eot?#iefixoquo7k') format('embedded-opentype'),
		url('../js/libs/royalslider-9.5.9/icons/icons.woff?oquo7k') format('woff'),
		url('../js/libs/royalslider-9.5.9/icons/icons.ttf?oquo7k') format('truetype'),
		url('../js/libs/royalslider-9.5.9/icons/icons.svg?oquo7k#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'rs-icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
/*  line-height: 1;*/

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-resize-enlarge:before {
	content: "\2b";
}
.icon-resize-shrink:before {
	content: "\2d";
}
.icon-arrow-left:before {
	content: "\3c";
}
.icon-arrow-right:before {
	content: "\3e";
}







/* ARROWS + FULLSCREEN */
.rsDefaultInv .rsArrowIcn,
.rsDefaultInv .rsFullscreenIcn {
    background: none; /*override*/

    text-align: center;
    color: rgba(0,0,0,0.25);
    font-weight: normal;

-webkit-transition: color, transform 0.15s;
   -moz-transition: color, transform 0.15s;
        transition: color, transform 0.15s;
}

.rsDefaultInv .rsArrowIcn:hover,
.rsDefaultInv .rsFullscreenIcn:hover {
    background: none; /*override*/
}



/* ARROWS */
.rsDefaultInv .rsArrowIcn {font-size: 3em; line-height: 0.64em;}

.rsDefaultInv .rsArrowIcn:before {position: absolute;top: 0;}
.rsDefaultInv .rsArrowLeft .rsArrowIcn:before {left: 0;}
.rsDefaultInv .rsArrowRight .rsArrowIcn:before {right: 0;}

.rsDefaultInv .rsArrow:hover .rsArrowIcn:before {color: rgba(0,0,0,0.5);}

.rsDefaultInv .rsArrowLeft:hover .rsArrowIcn {transform: translateX(-2px);}
.rsDefaultInv .rsArrowRight:hover .rsArrowIcn {transform: translateX(2px);}




/* FULLSCREEN */
.rsDefaultInv .rsFullscreenBtn {text-align: center;}
.rsDefaultInv .rsFullscreenIcn {font-size: 1.3em; line-height: 1.3em;}

.rsDefaultInv .rsFullscreenBtn:hover .rsFullscreenIcn {color: rgba(0,0,0,0.7);}

/*.rsDefaultInv.rsFullscreen .rsFullscreenBtn:hover .rsFullscreenIcn {}*/

.rsFullscreen .icon-resize-enlarge {display:none;}
.icon-resize-shrink {display: none;}
.rsFullscreen .icon-resize-shrink {display: block;}


















/*
Override: royalslider-1.0.5.css
- Fixed bug on iPad/iPhone that shows weird border-esq lines around the slide area at different magnifications.
- They go away when you zoom in tight.
*/
.rsWebkit3d .rsSlide {-webkit-transform: none;}


/*
Override: rs-default-inverted.css
*/
.rsDefaultInv .rsPreloader {
	background-image:url(../js/libs/royalslider-9.5.9/preloaders/preloader-white.gif);
}



.rsDefaultInv,
.rsDefaultInv .rsSlide,
.rsDefaultInv .rsOverflow {
    background: #f7f8f1;
}


/*alternate style: inset box shadow*/

/*
.rsDefaultInv .rsSlide {background-color: white;}
.rsDefaultInv .rsSlide {box-shadow: inset 0px 0px 20px #f1f1f8;}
*/



/*FOR MR (MOVE into its rightfull place in styles.css IF approved):*/

article .meta .slide-position {width: auto;}
article .meta .slide-position span {font-size: 90%;}










/********************************************************
end non-h5bp code
*********************************************************/




















@media only screen and (min-width: 35em) {
  

}

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } 
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}