/* css */
@media screen and (max-width:499px),
	screen and (max-height:480px)
{
		
	

	.front-logo
	{
		position:		absolute;
		bottom:			50%;
		width:			144px;
		left:			50%;
		margin-left:	-77px;
		max-width:		228px;;
		z-index:		300;
	}



	ul.menu
	{
		margin:			0;
		padding:		0;
		position:		fixed;
		bottom:			0;
		margin-top:		0;
		width:			100%;
	}

	ul.menu li
	{
		border-top:		1px dotted black;
		list-style: 	none;
		cursor:			pointer;
	}


	.menu .summary{padding-bottom:0;}
	/* for small devices like phones, show an icon*/
	.image
	{
		min-height:			72px;
	}

	/* specific images for client items*/
	.builder
	{
		background-image:	url("../images/builderlogo2.svg")
	}
	.scout
	{
		background-image:	url("../images/slbubblelogo.svg")
	}
	.podo
	{
		background-image:	url("../images/kustomizer.svg")
	}
	.jeremy,.priss,.otis
	{		
		background-size: 		64px;
		background-position:	top left;
		background-image:	url("../images/otis_sm.jpg")
	}

	.priss
	{
		background-image:	url("../images/priss_sm.jpg")
	}
	.jeremy
	{
		background-image:	url("../images/jer2_sm.jpg")
	}


	
	li.image a
	{
		padding-left:			72px;
	}
	.disclosure
	{ 
		display:				none;
	}

	li:hover .disclosure
	{
		display:none;
	}

	/* simple slideshow override for small screens */

	.caption
	{
		background-color:	rgba(0,0,0,0.5);
		color: 				white;
		position:			relative;
		margin:				0rem;
		padding:			1rem 2rem;		
		margin:				0 auto;
		text-shadow: 		1px 1px 3px  rgb(0,0,0);
	}


	.desktop
	{
		display:			none !important;
	}
	.mobile
	{
		display:			block;
	}
	
	li.image a.reflink
	{
		font-size:80%;
		font-weight:400;
		padding-top:1rem;
		padding-bottom:1rem;
		display:block;
		color:rgb(0,128,216);
	}


}

@media	screen and  (min-width:400px) and (max-height:479px) 
{

	.front-logo
	{
		position:			fixed;
		top:				70%;
		bottom:				auto;
		width:				30%;
		left:				25%;
		margin-left:		-15%;
		max-width:			288px;
		
	}
	#index ul.menu
	{
		position:			relative;
		left:				50%;
		width:				49%;
		box-sizing:			border-box;
		top:				0px;
		bottom:				auto;
	}

	/*ul.menu
	{
		padding-left:		1rem;
	}*/
}
@media screen and (min-width:480px) and (min-height:480px)
{

.front-logo
	{
		position:			fixed;
		top:				70%;
		bottom:				auto;
		width:				30%;
		left:				25%;
		margin-left:		-15%;
		max-width:			288px;
		
	}

	.jeremy,.priss,.otis,.podo,.scout,.builder
	{	
		background-size:20rem 20rem;
		background-position:0px 0px;
	}


	.podo
	{	
		background-image:url("../images/kustom-soft.jpg");

	}

	.scout
	{	
		background-image:url("../images/sfm_soft.jpg");

	}

	.builder
	{
		background-image:	url("../images/sebig_soft.jpg")
	}

	.image .section
	{
		background: url("../images/arrow.svg")no-repeat right 20.5rem;
	}
	#index ul.menu
	{
		position:absolute;
		right:1rem;
		left:auto;
		width:20rem;
		top:15%;
		bottom:auto;
		padding:0;
	}
	ul.menu
	{
		box-sizing:border-box;
		-webkit-box-sizing:	border-box;
		width:auto;
		padding-left:1rem;
	}

	#index li
	{
		border-top:		1px dotted black;

	}
	ul.menu li
	{
		border-top:		none;
		list-style: 	none;
		cursor:			pointer;
		display: 		block;
		margin-right:	1rem;
		margin-top:		1rem;
		width:			20rem;
		float:left;
		box-sizing:		border-box;
		-webkit-box-sizing:border-box;
	}
	li.image a
	{
		padding-top:21rem;
		padding-left:0;
		
	}
	.section
	{
		letter-spacing:0;
		font-size:1rem;

	}
	p.summary 
	{
		
		max-width:20rem;


	}
	.section p.summary
	{
		padding-left:0;

	}

	.front-logo
	{
		position:fixed;
		bottom:40%;
		width:228px;
		left:15%;
		margin:0 auto;
		max-width:228px;;
		z-index:300;
	}

	.front-logo
	{
		position:absolute;
		bottom:50%;
		width:288px;
		left:10%;
		margin:0 auto;
		max-width:228px;;
		z-index:300;
	}

}

/* middle size*/
@media screen and (min-width:760px)and (max-width:1070px)
{
	#back_bar h1 {
		max-width:			43rem;
		padding-left:		1rem;
	}
	.minicaption
	{
		padding-left:		1rem;
	}

 	.story
	 {

		padding:				0;
		margin-left:			4rem;
		margin-top:				1rem;
		-moz-column-count:		2;
		-webkit-column-count:	2;
		-moz-column-width:		20rem;
		-webkit-column-width:	20rem;
		columns:				2;
		column-width:			20rem;
		column-gap: 			1rem;
		max-width:				44rem;
		min-width:				20rem;

	}

	.mobile
	{
		display:			none;
	}
	.desktop
	{ 
		display:			block;
	}
		.caption
	{
		width:41rem;
		left:4rem;
	}
	ul.menu,
	p.section
	{
		padding-left:		5rem;
	}

}

/*bigger size*/
@media screen and (min-width:1071px)
{
	#back_bar h1
	{
		max-width:			62rem;
		padding-left:		1rem;
	}
	.minicaption
	{
		padding-left:		1rem;
	}
 	.story
 	{
		padding:			0;
		margin-left:		4rem;
		margin-top:			1rem;
		-moz-column-count:	3;
		-webkit-column-count:3;
		-moz-column-width:	20rem;
		-webkit-column-width:20rem;
		columns:			3;
		column-width:		20rem;
		column-gap: 		1rem;
		max-width:			62rem;
	}
	
	.mobile
	{
		display:			none;
	}
	.desktop
	{ 
		display:			block;
	}
	.caption
	{
		width:				62rem;
		left:				4rem;
	}
	ul.menu, 
	p.section
	{
		padding-left:		5rem;
	}
	


}