/* SALLY MADGE COM */


@font-face {
	font-family: 'JosefinSansStdLight';
	src: url('josefinsansstd-Light.eot');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'JosefinSansStdLight';
	src: url(//:) format('no404'), url('josefinsansstd-Light.woff') format('woff'), url('josefinsansstd-Light.ttf') format('truetype'), url('josefinsansstd-Light.svg#webfontqhzC6QIC') format('svg');
	font-weight: normal;
	font-style: normal;
}
body		{ font-family: 'century gothic', Trebuchet, Helvetica, Arial, Verdana, Sans-serif;}
h2, h3		{ /*display: block;width: 100%;*/}

.menu a { text-transform: capitalize; }


/* ==========================================
	SPLASH IMAGE!
============================================= */



/* ==========================================
	TEXT STYLES!
============================================= */


h1 					{ color:#685c53; font:100 2.4rem JosefinSansStdLight,'century gothic',sans-serif; text-decoration:none; text-transform:uppercase; padding:0 0 0 .2em; margin:0; }
h2					{ text-transform:capitalize; line-height: normal; }
section h2 			{ font-size: 1.9375rem;margin-top:1em; }
article header h2 	{ font-size: 1.6rem; font-weight: 100; }
h3					{ /*font-size: 90%; padding:0; margin:0;clear:both; font-weight:900;*/ }	
h4					{ font-size: 80%; padding:0; margin:0; font-weight:900; }
	
p					{/*display:block;margin:1em 0;padding:0 12px 0 0 ;color:#333;*/}

li p					{ font-size:80%;}
li.collage p			{ font-size:100%;}

article					{ padding-bottom: 3em;}
article header p		{ /*margin:6px 0 0 0;font-size:80%;line-height:100%;font-style:italic;*/}
article header p span	{ display:block;font-style:normal; line-height:160%;}

.credit					{ font-size:80%;font-style:italic;}
#content-slider-inside span.credit    { display:block;}

ul.links                 { list-style:none;margin: 0;font-size:80%;}
ul.links  li             { list-style:none;margin:2px 0;}
ul.links li a            { color:#333;}

ul.quote 			    { list-style:none;margin: 0 0 2em 0;}
ul.quote li 			{ list-style:none;margin:2px 12px;}

.text                   { margin-top:2em;}	
.nopad 					{ padding:0; margin:0;}
.fi-mail::before 		{ font-size: 2em; }


/* ==========================================
	ARTICLE LINKS!
============================================= */

article ul				{ margin:0;}
article ul li 			{ font: 90% "century gothic",sans-serif; list-style:none; }
.fi-link::before 		{ padding-right: 6px; }

/* ==========================================
	LINK COLOURS!
============================================= */

/*h1 a    		{ color: #685c53; font: 100 1em/100% JosefinSansStdLight,"century gothic",sans-serif; text-transform: uppercase;}*/

h1 a:link 		{ color: #685c53; }
h1 a:visited 	{ color: #685c53; }
h1 a:hover		{color: #333;text-decoration:none; }
h1 a:focus 		{color: #333; }
h1 a:active		{color: #685c53;}

.top-bar a:link 		{ color: #685c53; }
.top-bar a:visited 		{ color: #685c53; }
.top-bar a:hover		{color: #333; font-weight:900;}
.top-bar a:focus 		{color: #333; }

.top-bar a.active, 
.top-bar a.active		{color: #333;}
.top-bar a.active:hover, 
.top-bar a.active:hover	{color: #333;}

/* LINKS */
ul#list li a:link 		{ color: #333; }
ul#list li a 			{ color: #333; }

/* ==========================================
	MENU DROPDOWN OVERRIDE!
============================================= */
.dropdown.menu .submenu.first-sub {
    left: auto;
    right: 0;
    top: 100%;
}

/* ==========================================
	SPLASH PAGE BACKGROUND!
============================================= */

header.header 				{ position:relative;z-index:999;}

html.home { 
  background: #fff url(../i/splash.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

html.home body 			{ background: transparent;}
.home #splashImage 		{ height: 85vh; }
.home .caption 			{ background-color:rgba(230, 230, 230, 0.5); bottom: 0; padding: 0.5em; position: absolute;line-height: 1em;}

/* IE FIX! */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../i/splash.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../i/splash.jpg', sizingMethod='scale')";

/* IF USING THE ON PAGE IMG */
img.bg { 
  /* Set rules to fill background https://css-tricks.com/perfect-full-page-background-image/ */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

/* ==========================================
	TOP-BAR UL BACKGROUND!
============================================= */


.top-bar					{ background: transparent; }	
.home .top-bar ul 				{ background-color:rgba(230, 230, 230, 0.5) }

/* ==========================================
	IMAGE GRIDS AND THUMBNAILS!
============================================= */

.imageGrid 					{ overflow:hidden;/*margin-top:2em;margin-bottom:2em; width:60%;margin:0 auto; */}
.works						{ list-style:none;}
.imageGrid li  				{ 
							  box-sizing: border-box;
							  display:inline-block;
							  padding: 1em;
							  /* width:100%; */
							  /* float: left;width: 50vw;height: 50vw; */
							  list-style:none;
							}

.imageGrid li img 			{ max-width:100%; max-height:100%; width:100%; opacity: 1; padding:0;margin:0;}

.imageGrid li a				{ display: block; height: 100%; position: relative;}

.imageGrid li span 			{ display:block; opacity:0;visibility:hidden; position:absolute; bottom:0; font-size:1em;width: 100%;color: #fff; padding:1em .5em;font-weight: 100;line-height:1.2em;background: #333;text-transform:capitalize; transition: opacity 0.1s ease-out 0s;}
.imageGrid.works li span 	{ font-size:.8em; padding: .5em;padding-right:2em;/*width:auto;*/} 
.imageGrid li:hover span	{ opacity:.8;visibility: visible;}
.imageGrid li:hover img		{ opacity: .8;}

.imageGrid.works li						{ overflow: hidden;position:relative;}
.large-up-3.imageGrid.works li			{ min-height: 238px; }
.large-up-2.imageGrid.works li			{ min-height: 348px; }
.large-up-2.imageGrid.works.video li 	{ min-height: 299px; }
.imageGrid.works li a					{ position: static;}
.imageGrid.works li	img					{ position:absolute;max-height:none;}	

.grid::before,
.grid::after 							{ clear: both; content: ''; display: block; } 

/* ==========================================
	CONTENT SLIDER ON TEXT PAGES!
============================================= */


#content-slider ul li img 					{ margin-bottom:0;}
#content-slider 							{ /*width: 650px;*/overflow: auto;height: auto;}

body#writing #content-slider 				{ height:auto;}

#content-slider-inside 						{ list-style: none;height: auto;overflow: auto;overflow-y: hidden;margin:0;}

#content-slider-inside li 					{ width: 99%/*650px*/;height: auto;color: #333;margin:0;list-style: none;}
	
#navigation, #navigation2, .link 			{ list-style: none;margin: 0;float: left;}

#navigation li, 
#navigation2 li, 
.link li  									{ float: left; width: 200px; height: 30px; text-align: left; margin: 0; line-height: 30px; font-family: Arial,'century gothic', Helvetica, sans-serif; font-size:72%; padding: 0 0 0 5px; }
#navigation li.hide							{ display:none;}

.link li a,
.link li a:link,
#navigation li a, 
#navigation li a:link, 
#navigation li a:visited, 
#navigation2 li a, 
#navigation2 li a:link, 
#navigation2 li a:visited 					{ text-decoration: none; display: block; height: 30px; color: #333; padding-left:12px; }

#navigation li a.selected, 
#navigation li a.selected:link, 
#navigation li a.selected:visited, 
#navigation2 li a.selected, 
#navigation2 li a.selected:link, 
#navigation2 li a.selected:visited 			{ background: /*#e0ded9*/#e8e7e3; color: #000; }

.link li a:hover,
.link li a:focus,
.link li a:active,
#navigation li a:hover, 
#navigation li a:focus, 
#navigation li a:active, 
#navigation2 li a:hover, 
#navigation2 li a:focus, 
#navigation2 li a:active 					{ background: #e8e7e3;font-weight:100; color: #fff; }


/* ==========================================
	DT LIST STYLE - CV !
============================================= */

.cv h3				{ border-bottom:1px solid;}
dl              { float:left;display:inline;margin:1em 0 2em 0;width:100%;}
dt              { font-weight:100;font-size: 80%; float:left;width:45%; }
dd.noclear      { clear:right;float:left;width:50%;margin-left:0;display:inline;}
dd              { font-size: 80%;float:left;clear:both;display:inline;width:50%;margin: 0 0 9px 45%;}
.inline         { display:inline;}
.italic         { font-style : italic;}
dd.title        { margin-bottom: 3px; }
dd.space        { margin-bottom: 0; }


/* ==========================================
	VIDEO MODAL BACKGROUNDS!
============================================= */

a.video				{ font-size:5em;  
					  /* Set rules to fill background */
					  min-height: 100%;
					  min-width: 100%;
					  /* Set up proportionate scaling */
					  width: 100%;
					  height: auto;
					  /* Set up positioning */
					  position: absolute!important;
					  background-size: 100% auto;
					}
.stuff-of-dreams 	{ background:url("../i/stuff-of-dreams/stuff-of-dreams-3.jpg") 0 0 no-repeat;}
.avant				{ background:url("../i/avant/avant-guard-video.jpg") 0 0 no-repeat;}
.moving				{ background:url("../i/moving-in/moving-in-video.jpg") 0 0 no-repeat;}
.merzbarn			{ background:url("../i/merzbarn/merzbarn-video.jpg") 0 0 no-repeat;}
.mess				{ background:url("../i/mess/mess-video.jpg") 0 0 no-repeat;}
.scum				{ background:url("../i/scum/scum-video.jpg") 0 0 no-repeat;}
.late-shift			{ background:url("../i/late/late-shift-video.jpg") 0 0 no-repeat;}
.labour-intensive	{ background:url("../i/labour/labour-video.jpg") 0 0 no-repeat;}
.touchwood			{ background:url("../i/touchwood/touchwood-video.jpg") 0 0 no-repeat;}
.gerbil				{ background:url("../i/gerbil/gerbil-video.jpg") 0 0 no-repeat;}
.stuff				{ background:url("../i/stuff/stuff-video.jpg") 0 0 no-repeat;}
.out-of-place		{ background:url("../i/out-of-place/out-of-place-video.jpg") 0 0 no-repeat;}


/* Small only */
@media screen and (max-width: 39.9375em) {}

/* Medium and up */
@media screen and (min-width: 40em) {

						.imageGrid li { }			
	
									}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
							img.bg { 
									left: 50%;
									margin-left: -512px;   /* 50% */
									}
						}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}