.surround {
	width:100%;
	height:200%;
	position:fixed;
	top:0;
	left:0;
	z-index: 9995;
	opacity:0;
}

.scrollshow {
	width:100%;
	height:100%;
	background:#000;
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:10;
	opacity:.75;
	cursor:pointer;
}

.scrollmask {
	width:100%;
	height:50%;
	overflow:scroll;
}

.scroller {
	height: 285px;
}
		
.scroller-fig {
	float:left; 
	width:400px; 
	height:200px;
	margin: 10px 10px 0;
	position:relative;
}

.scroller-fig.lightbox-figure-sizing {
	height:inherit;	
}

.scroller-fig img {
	display:block;
	margin:0 auto;
	height: inherit;
	max-width: 100%;
	padding-bottom: 15%; 
	
}

.scroller-fig figcaption {
	font-size:1em;
	font-family:"BellGothicBlack", Arial, sans-serif;
	text-transform:uppercase;
	border-bottom:solid 1px #999;
	padding: 0 2em .5em 1em;
	width:350px;
	display:block;
	position:absolute;
	bottom: 1.5em;
	text-align:left;
}

.stage {
	display:block;
	width: 96%;
	margin: 18% auto 0 auto;
	padding:0 0;
	background:#F0EEE2;
	position:relative;
	top:0px;
	left:0;
	z-index:20;
	opacity:1;
    min-height: 500px;
}
.stage-header {
	font-family:BellGothicBlack;
	text-transform:uppercase;
	text-align:right;
	font-weight:normal;
	font-size:1.5em;
	color:#F0EEE2;
	height:30px;
	padding: 0 0.25em 0 1em;
	position:absolute;
	right:0px;
	top: -48px;
	width: 90%;
}

.stage-header span.work-genre {
    padding: 0 1em 0 0;
    display: none;
}

.stage-header span.marker {
	display:block;
	padding: 0 1em 2.5em 0;
	width:20px;
	height:32px;
	background: url(../images/lightbox/lightbox-closer-marker.png) no-repeat 30% 100%;
	float:left;
}


.stage-header p {
line-height: 1;}

.stage-header #series-identity {
	display:block;
	line-height: 1.125;
	float:left;
	width:90%
	
}

.stagefooter {
	overflow:hidden;
	padding: 1em 1em 1em;
}

.stage .body-text {
	font-size: 1.125em;
	width:393px;
	width: 100%;
	float:left;
	margin: -1em 1em 1em 0;
}

.stage .body-text p {
	margin: 0 0em 1em 0;
}

.stage .body-text:last-child {
	font-size:1.25em;
	width:60px;
	float:left;
	margin: 0 0 0 0;
}

.close-link {
	background: url(../images/menu/close-link-cross.png) no-repeat 0 0;
	background-size:100%;
	width:24px;
	height:24px;
	display:block;
	margin:0;
	text-align:center;
	position: absolute;
	top: -3.25em;
	border: none;
	padding-top:0;
	color:#50656E;
    left: .75em;
	text-indent: 9999px;
	white-space: nowrap;
	overflow: hidden;
	
}

.continue-reading {
	text-align: center;
    display: none;
}



@media all and (min-width:321px) {
      .scroller {
      	height: 360px;

      }
	
	
}
	

@media all and (min-width:376px) {
	
      .scroller {
        height: 400px;
      }
	
}



@media all and (min-width:415px) {
	
	

    .stage .body-text {
        font-size:1.5em;
        
        margin: 0 1em 1em 0;
    }


}




@media all and (min-width:439px) {
  .stage {

      width: 90%;

  }
}


@media all and (min-width:508px) {

	
}



/* iPhone SE landscape */
@media all and (min-width:552px) and (orientation: landscape) and (max-width:736px) {
	
	  .stage {
		 width: 96%;
		 margin-top: 7%;
    }
	
	.stage-header p {
        line-height: 1;
       font-size: .8em;
    }
	
	.close-link {
        background-size: 80%;
        top: -2.25em;
    }
	
.stage-header span.marker {
	
	padding: 0 1em 3em 0;
	
}
	
.stage-header #series-identity {
	padding-top: 1.25em;
}

.stagefooter {
	overflow:hidden;
	padding: 1em 1em 1em;
	margin-top: -21.75em;
	
}

 .stage .body-text:first-of-type {
     font-size: 1.125em;
     margin: 0 1em 1em 0;
	 width: 39%;
	 border-right:solid 1px #536870;
	 padding-right: .25em;
	 min-height:270px;
    }


.scrollmask {
	width:60%;
	height:50%;
	overflow:scroll;
	margin-left: 16em;
}

 .scroller {
    height: 280px;
  }
	
	
}

@media all and (min-width:569px) {
    .stage {
            display:block;
            width:96%;
            margin:12% auto 0 auto;
            padding:0 0;
            background:#F0EEE2;
            position:relative;
            top:0px;
            left:0;
            z-index:20;
            opacity:1;
        }

    .stage-header {
        font-family:BellGothicBlack;
        text-transform:uppercase;
        text-align:right;
        font-weight:normal;
        font-size:1.5em;
        color:#F0EEE2;
        height:30px;
        padding:0 1em 0 1em;
        position:absolute;
        right:0px;
        top:-30px;
    }
	


    .stage-header span.work-genre {
        padding: 0 1em 0 0;
    }

    .scroller-fig {
        float:left; 
        width:400px; 
        height:200px;
        margin:30px;
        position:relative;
    }


    .scroller-fig figcaption {
        font-size:1em;
        font-family:"BellGothicBlack", Arial, sans-serif;
        text-transform:uppercase;
        border-bottom:solid 1px #999;
        padding: 0 2em .5em 1em;
        width:350px;
        display:block;
        position:absolute;
        bottom:0px;
        text-align:left;
    }
	
	.stage-header span.marker {
	
	padding: 0 1em 0em 0;
	
}
	
	  .stage .body-text {
        font-size:1.5em;
        
        margin: 0 1em 1em 1em;width: 90%;
    }
	
	  .stage-header {
        
        padding: 0 0 0 0em;
        
    }
	
}


@media all and (min-width:640px) {
	.stage {
      
        margin-top: 7.5%;
       
    }
	
	.stage-header #series-identity {
		padding-top: 0em;
	}

    .stagefooter {
        padding-top: 0em;
        margin-top: -24em;

    }
	
     .scrollmask {
		margin-left: 21em;
    }
}


/* iPhone 8 landscape */
@media all and (min-width:569px) and (orientation: landscape) and (max-width:736px) {
  
	.scroller-fig figcaption {
        bottom: 2em;
    }
	
   .scroller {
       height: 320px;
   }
	
  .stage .body-text:first-of-type {
       width: 40%;
       padding-right: 1em;
   }
	
   .stagefooter {
        margin-top: -27em;

    }
	
	


}



/* iPhone 8 plus landscape */
@media all and (min-width:668px) and (orientation: landscape) and (max-width:736px) {

   .scroller {
         height: 360px;
     }
	
	.stagefooter {
        margin-top: -29em;
    }
	
	.scrollmask {
        margin-left: 22em;
    }
	
	.stage {
       margin-top: 6%;   
    }

}


@media all and (min-width:768px) {
    .scrollmask {
		margin-left: 0em;
    }
	
	  .stagefooter {
        padding-top: 0em;
        margin-top: 0em;

    }

}


@media all and (min-width:833px) {
     .stage .body-text {
           
            width: 54%;
        }
}