/* -------------    ---------------- */
/* -------------  openning and closing  ---------------- */
#hiddenPreview {
	position: fixed;
	height: 100%;
	width: 0;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0, 0.97);
	overflow-x: hidden;
	z-index: 110;
	transition: 0.5s;	
}

.closeButton {
	position: absolute;
	top: 55px;
	right: 45px;
	text-decoration: none;
	font-size: 2.5em;
	color: #7b7b7b;
	display: block;
	transition: 0.3s;
	z-index: 1000;	
}
.visiblePreview {
	position: fixed;
	top: 60px;
	right: 15px;
	width: 100px;
	height: 40px;
	border-radius: 20px;
	text-decoration: none;
	font-size: 1.5em;
	color: #fff;
	display: block;
	transition: 0.3s;
	text-align: center;		
	background-color: #000;
	z-index: 109;
}
.visiblePreview2 {
	position: absolute;
	top: 60px;
	right: 105px;
	text-decoration: none;
	font-size: 1.5em;
	color: #818181;
	transition: 0.3s;
	text-align: center;	
}
.visiblePreview h4, .visiblePreview2 h4 {
	font-size: 0.5em;
	text-transform: uppercase;
	display: inline-block;
}

/* -------------    ---------------- */
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
/* the flex container
	display: flex | inline-flex;
	flex-direction: row | row-reverse | column | column-reverse;	
	flex-wrap: nowrap | wrap | wrap-reverse;	
		shorthand for the two above= flex-flow: <‘flex-direction’> || <‘flex-wrap’>
		justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
	align-items: stretch | flex-start | flex-end | center | baseline;
	align-content: flex-start | flex-end | center | space-between | space-around | stretch;	
*/
.previewScreenSet {
	display: block;
	padding-top: 100px;
/* 	padding-right: 15px; */
}	
.previewScreenGroup {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
/* 	width: 90%; */
}
ul li {
	display: inline-block;
}
li {
	width: 140px;
}
li img {
	width: 100%;
	max-height: 100px;
	object-fit: contain;
}