/** general styles **/
@media	 all 
{
	/* clear style decks */
	* {	
		margin:			0;
		padding:		0; 
		font-size:		inherit;}
	html{
		font: 			16px/1.15rem "Roboto", "Gill Sans MT";
		font-weight:	300;
	}

	body{
		 padding-top:2.8rem;

		} 

	div {
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;			
	}

	hr{
		border:none;
		background-color:rgb(192,192,192);
		height:1px;
	}

	p.summary
	{
		font-family: 	"Roboto", "Gill Sans MT";
		font-size:		.92rem;
		color:			rgb(128,128,128);
		font-weight:	300;
		margin-bottom:  1rem;
	}
	img.pic
	{	
		width:4.2rem;
		height:4.2rem;
		float:left;
		margin-right:0.5rem;
		margin-bottom: 0.2rem; 
		border:1px solid rgb(128,128,128);
	}

	/* active menu items*/
	ul.menu-items li.section a:hover,
	ul.menu-items li.section-title a:hover,
	a.section:hover
	{
		background-color:rgba(0,0,255,0.05);
	}

	.section{
		padding:		0.5rem 2rem 0.5rem 1rem;
		display:		block;		
		letter-spacing: -0.025rem;
	}
	a.section
	{


		background: url("../images/arrow.svg")no-repeat right center;
		text-decoration:none;
		color:			rgb(0,96,164);
		font-weight:	700;
		line-height:1.3rem;	    
	}
	h3.tagline {	
		
		margin:			0;
		text-align:		center;
		color:			rgb(0,96,164);
		font-size:		.8rem;
		font-weight:	100;
		line-height:	1rem;

	}
	.image 
	{
			background-repeat:	no-repeat;
	}

/* STORY SECTIONS */
	div.story
	{
		padding:1rem 1rem 3rem 1rem;
	}	
	.story h2 
	{
		line-height:1.5rem;
		font-size:1.2rem;
		margin-bottom:0.5rem;
	} 

	.story h3{
		margin-top:1rem;
		font-size:.87rem;
		margin-bottom:0.2rem;
		clear:both;
	}

	.story p
	{
		font-size:.87rem;
		line-height:1.3rem;
		padding-bottom:1rem;
		text-align:justify;
		color:rgb(96,96,96);
	}

	.illustration
	{
		overflow:hidden;
		position:relative;
		display:block;
		margin:1rem 0;
		max-width:19.6rem;
		/*max-height:240px;*/
		border:1px solid rgba(0,0,0,0.5);
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-webkit-box-shadow:2px 2px 4px rgba(0,0,0,0.4);	
		font-size:0.8rem;
		color:rgb(168,168,168);
		padding:0.5rem;
		text-decoration:none;
		}

		
	img.raster
	{
		max-width:100%;

		clear:both;
	}	

/* SLIDESHOW */
	.simple_slideshow
	{
		
		position:relative;
		overflow:hidden;
		padding:0.5rem;
		background-color:rgb(128,128,128);
		box-shadow:inset 1px 10px 100px 20px rgba(0,0,0,0.5);
		max-height:90%;

	}	

	 .tagline
	{
		left:0px;
		bottom:-2rem;
		
		position:absolute;
		width:100%;
	}
	.slide
	{
		
		display:none;
		position:absolute;
		border:1px solid rgba(0,0,0,0.5);
		box-shadow: 1px 10px 50px 5px rgba(0,0,0,0.3);
		max-height:450px;
		max-width:100%;
		top:50%;
		opacity:0;
		
	}

	.shown
	{
		
		opacity:0;
		left:150%;
		-webkit-transition: opacity 1s, left 1s;
		transition: opacity 1s, left 1s;
		
	}

	.onDisplay
	{
		left:50%;
		opacity:1;
		-webkit-transition: opacity 1s, left 1s;
		transition: opacity 1s, left 1s;

	
	}

	.not-yet-shown
	{
		
		left:-100%;
		opacity:0;
		-webkit-transition: opacity 1s, left 1s;  
		transition: opacity 1s, left 1s;
	}

	.no-trans
	{
		transition: none !important;
	}


	.scroller
	{
		position:relative;
		display:block;
		overflow:hidden;
		
		
	}

	.simple_slideshow .next,
	.simple_slideshow .prev
	{
		position:absolute;
		background:rgba(0,0,0,0.5) url(../images/prev.svg) no-repeat  center right;
		color:white;
		width:2rem;
		height:4rem;
		top:50%;
		margin-top:-2rem;
		transition: 0.1s;
		opacity:0.2;

	}


	div:hover.simple_slideshow div.caption,
	*:hover.simple_slideshow a.next,
	*:hover.simple_slideshow a.prev
	{
		opacity:1;
		transition: 0.5s;
	}

	.simple_slideshow .next{left:0;
			border-bottom-right-radius:0.5rem;
			border-top-right-radius:0.5rem;}
	.simple_slideshow .prev{	right:0;
			background:rgba(0,0,0,0.5) url(../images/next.svg) no-repeat center left;
			border-bottom-left-radius:0.5rem;
			border-top-left-radius:0.5rem;}

	a:hover.next,a:hover.prev
	{
		box-shadow: inset 1px 1px 9px 1px rgba(0,0,0,1);
		-webkit-box-shadow:inset 1px 1px 9px 1px rgba(0,0,0,1);;
		width: 3rem;
		
	}	

	a:active.next,a:active.prev
	{
		box-shadow: inset 1px 1px 9px 1px rgba(0,0,0,0.5);
		-webkit-box-shadow:inset 1px 1px 9px 1px rgba(0,0,0,0.5);;
		width: 2.8rem;
		
	}	

/* TOP BAR */	
	#back_bar h1 a img {margin-top:-2px;display:block;}
	
	#back_bar:hover
	{
		background: white url(../images/back3.svg)no-repeat 0.2rem -3.5rem;
	}
	#back_bar:active
	{
		background: white url(../images/back3.svg)no-repeat 0.2rem -3.5rem;
	}
	#back_bar, #back_bar.moved
	{
		background: white url(../images/back3.svg)no-repeat 0.2rem 0.2rem;
		height:2.9rem;
		/*overflow: hidden;*/
		
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		padding-left:4rem;		
		display:block;
		color:black;
		text-decoration:none;
		border-bottom:1px solid rgba(128,128,128,0.0);
		font-size:1.2rem;
		position:fixed;
		width:100%;
		top:0;
		z-index:300;
		cursor:pointer;
	}

	#back_bar.moved
	{
		box-shadow:0px 2px 4px rgba(0,0,0,0.3);
		border-bottom:1px solid rgba(0,0,0,0.5);
	}	
	a.badge, a.try-button
	{
		min-width:50px;
		text-align:center;
		display:inline-block;
		position:relative;
		top:-.5rem;
		float:right;
		right:0.5rem;
		line-height:.9rem;font-size:80%;
		text-decoration:none;
		font-weight:400;
		letter-spacing:1px;
		max-height:1rem;
		border:1px solid red;

	}
	
	a.try-button
	{
		border:1px solid rgba(128,128,128,0.5);
		background:rgba(0,0,0,1) url(../images/next.svg) no-repeat center right;
		color:white;
		border-radius: 0.3rem;
		padding:.5rem;
		padding-right:1.3rem;


	}

	a.badge img 
	{
		max-height:2rem;
	}

/* IMAGES AND SUCH*/	
	
	.jeremy
	{	
		background-image:url("../images/jer2_soft.jpg");
	}

	.priss
	{
		background-image:url("../images/priss_soft.jpg");
	}
	 .otis
	{	
		background-image:url("../images/otis_soft.jpg");
	}
	#back_bar h1 {
		font-size:1.3rem;
		line-height:1.5rem;
		padding-top:1rem;
		font-weight:900;
		height: 1.3em;
		display:block;
		/*border-bottom:1px dotted;*/

	}
	.caption
	{
		opacity:0.5;
		background-color:rgba(0,0,0,0.5);
		color: white;
		position:absolute;
		margin:0rem;
		padding:1rem ;
		bottom:0px;
		margin:0 auto;
		text-shadow: 1px 1px 3px  rgb(0,0,0);
		transition:2s;
		font-weight:300;

	}
		.section .section
	{
		display:block;
	}
	.minicaption
	{
		color:rgba(0,0,0,0.5);
		font-size:0.7rem;
		line-height:1.7rem;
		position:absolute;
		top:0.0;
		left:4rem;

	}
	.logo
	{
		max-height:4rem;
		max-width:15rem;
		width:85%;
		padding:1rem;
		margin:1rem 0;
		border-bottom :1px solid rgb(220,220,200);
		box-sizing:border-box;
	}

	/* popup menus */
	ul.menu-items
	{
		display:none;
		opacity:0;
		position:relative;
	}

	div.quick-menu
	{
		position:fixed;
		top:0;
		left:0;
		padding-top:2rem;
		height:2rem;
		min-width:5rem;
	}
	/* popup menu*/
	div:active.quick-menu ul.menu-items,
	ul.menu-items:hover
	{
		display:			block;
		position:			relative;
		border-radius:		0.5rem;
		border:				2px solid rgb(0,0,0);
		padding:			0.5rem;
		margin:				0;
		list-style:			none;
		background-color:	white;
		top:				1.5rem;
		left:				2rem;
		opacity:			1;
		box-shadow: 		2px 2px 0.5rem .05rem rgba(0,0,0,0.5);
		-webkit-box-shadow: 2px 2px 0.5rem .05rem rgba(0,0,0,0.5);	
	}

	img.top-dart
	{
		position:		absolute;
		display:		block;
		bottom:			100%;
		margin-bottom:	-6px;
		margin-left:	-2px;
		left:			0;
		/*background: url("./images/pointy.svg") no-repeat bottom left;*/
	}
	ul.menu-items li
	{
		min-width:5rem;
		padding:0;
		margin:0;
	}
	ul.menu-items li.section a,
	ul.menu-items li.section-title a
	{
		font-weight:400;
		text-decoration:none;
		white-space: pre;
		line-height:1rem;
		padding:0.5rem;
		display:block;
		font-size:1rem;
		min-width:10rem;
		color:black;
	}
	ul.menu-items li.section-title a
	{
		font-weight:600;
		padding-top:0.6rem;
		border-top:1px dotted rgba(0,0,0,0.3);

	}

}