galbash/gallery.css

* {
	margin: 0;
	padding: 0;
	box-sizing:border-box;
}
html {
	height:100%;
	width:100%;
}
body {
	height:100%;
	width:100%;
	position:relative;
	font: bold 1rem sans, sans-serif;
	color:#ccc;
	background:#111;
}
a {
    outline: none;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a, a:hover, a:focus, a:visited {
    color:#ccc;
}
a:focus {
    outline: 3px solid red;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}



/*-------------------fullpage--------------------*/
.fullpage .content {
	height:100%;
	width:100%;
	display:flex;
	align-items: center;
}
.fullpage img {
	display: block;
}
/*--------------header-------------*/
.fullpage .head {
	width:100%;
	position:absolute;
	top:0;
	left:0;
	height:1.5rem;
	background:#333;
	opacity:0.5;
	padding:0 0.5rem;
	display:flex;
}
.fullpage .head .back {
	flex: 0 0 auto;
}
.fullpage .head .imagetext {
	flex: 1 1 auto;
	text-align: center;
}
.fullpage .head .title {
	flex: 0 0 auto;
}
.fullpage .head:hover {
	opacity:1;
}
/*-----------thumbnails-------------*/
.fullpage .thumb {
	flex: 0 0 10%;
	padding:0.4rem;
}
.fullpage .thumb img {
	border: 0.15rem solid rgba(255,255,255,0.5);
	width:100%;
	opacity:0.9;
}
.fullpage .thumb img:hover {
	opacity:1;
	border-color:#ccc;
}
.fullpage .thumb img {
	width:100%;
}
/*-------------full image-------------*/
.fullpage .full {
	flex: 1 1 80%;
	display:flex;
	align-items: center;
	width:100%;
	height:100%;
	padding:2rem 0.2rem 0.5rem 0.2rem;
}
.fullpage .full img {
	object-fit:contain;
	max-width:100%;
	max-height:100%;
    margin: 0 auto;
    box-shadow: 0 0 0.5rem 0.5rem black;
}
/*------------thumbnail page (index)-------------*/
.thumbpage .content {
	padding: 2rem 0.5rem 0 0.5rem;
}
.thumbpage img {
	border: 0.2rem solid black;
}
.thumbpage .thumb {
	float:left;
	margin:0;
	padding:0;
	margin:0.2rem;
}
.thumbpage .head {
	width:100%;
	position:absolute;
	top:0;
	left:0;
	height:1.5rem;
	background:#333;
	padding:0 0.5rem;
}
.thumbpage .head .back {
	float:left;
}
.thumbpage .head .title {
	float: right;
}