/**
	Style sheet for a photo array.
*/

.headline{
	background-color:#6798FE;
	border-radius:2em;
	border:none;
	font-family:arial;
	font-size:3em;
	text-align:center;
	width:80vw;
}

/** -------------------------------------------------------------------
 * The back < and forward > buttons
 * -------------------------------------------------------------------*/
.lButtContainer, .rButtContainer{
	border-radius: 100%;
	display:inline-block;
	height:100%;
	position:relative;
	vertical-align:top;
	width:1em;
	z-index:200;
}
.lButtContainer{

}
.rButtContainer{

}
.lButt,.rButt{
	font-size:3em;
	height:100%;
	width:1em;
}
.lButt{}
.rButt{}

/** -------------------------------------------------------------------
 * The Photo box container and all it's parts 
 * -------------------------------------------------------------------*/
.photoScrollBoxContainer{
	display:block ruby;
	height:30vh;
	overflow:hidden;
	padding:1em;
	position:relative;
	text-align:center;
	width:85vw;
}
.photoBox{
	display:inline;
	height:100%;
	text-align:center;
	width:100%;
}
.pic{
	display:inline;
	height:100%;
	width:8em;
}
.photoScrollBox{
	display:flex;
	height:100%;
	overflow-x:scroll;
	position:relative;
	scroll-snap-type:x mandatory;
	scrollbar-width:none;
	text-align:center;
	width:85%;
	z-index:100;
}

/** -------------------------------------------------------------------
 * The photo overlay to display a photo in
 * -------------------------------------------------------------------*/
.photoOverlay{
	position: fixed;
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #FEFEFE;
	z-index: 2;
}