.file-viewer {
	display:inline-block;
	width:100vw;
	height:100vh;
	max-width:100%;
	max-height:100%;
	overflow:hidden;
	background:#222;
	object-fit:contain;
}

.fullscreen {
	background:#222;
}

.fullscreen .file-viewer  {
	padding-left:0.5vw;
	padding-top:0.5vh;
	width:99.45vw;
	height:99.45vh;
}

.file-current img {
	display:inline-block;
	width:100%;
	height:99.45vh;
	object-fit:contain;
}

.file-info-outer {
	color:white;
	position:absolute;
	width:98.5%;
	top:0;
/*	height:24vh; */
	height:40vh;
	z-index:30;
}

.file-info-inner {
	display:inline-block;
	visibility:hidden;
	width:100%;
	margin-left:0.25vw;
	max-height:100%;
	max-width:100%;
	background:rgba(0,0,0,0.6);
	border-radius: 0.5pc;
	object-fit:contain;
	overflow:hidden;
/*	background:blue; */
}

.file-info {
}

.file-info-bar {
	vertical-align:middle;
	height:4pc;
	font-family: Montserrat, "Liberation Sans", Tahoma, sans-serif;
	font-family: Tahoma, Geneva, sans-serif;
	font-family: Arial, Helvetica, sans-serif;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
}

.file-info-file {
	position:absolute;
	width:80%;
	left:10%;
	top:0.75pc;
	display:inline-block;
	padding-left:1pc;
	padding-right:1pc;
	text-align:center;
	font-size:2pc;
	max-height:2.75pc;
	max-width:80vw;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow:hidden;
}

.file-info-text {
	display:block;
	width:100%
	padding-left:1pc;
	padding-right:1pc;
	padding-top:0.5pc;
	padding-bottom:0.5pc;
	font-family: "Open Sans", "DejaVu Sans", Verdana, sans-serif;
}

.file-info-left {
	display:inline-block;
	width:50%;
	vertical-align: top;
}
.file-info-right {
	display:inline-block;
	vertical-align: top;
	width:50%;
}

.file-headline {
	font-size:1.5pc;
}

.file-event {
	display:inline-block;
}

.file-scene {
	font-style:italic;
}

.file-datetime {
	font-size:90%;
	color:#bbb;
}

.file-description {
	margin-bottom:0.5pc;
	margin-top:0.5pc;
	font-family: Montserrat, "Liberation Sans", Tahoma, sans-serif;
	font-family: Tahoma, Geneva, sans-serif;
	font-family: Arial, Helvetica, sans-serif;
	font-family: "Trebuchet MS", Helvetica, sans-serif;	font-size:100%;
	color:#eee;
}

.file-abstract {
	margin-bottom:0.5pc;
	margin-top:0.5pc;
	font-style:italic;
	font-size:80%;
	text-overflow: clip;
}

.file-keywords {
	margin-bottom:0.5pc;
	margin-top:0.5pc;
	font-style:italic;
	font-size:80%;
	color:#aaa;
	text-overflow: clip;
}

/*		echo div3('file-info-text',
			(empty($headline) 	? '': div('file-headline', $headline)) .
			( (empty($scene) and empty($datetime)) ? '' : 
				(empty($scene) 		? '': span('file-scene', $scene)) . 
				( (empty($scene) or empty($datetime)) ? '' : nls('comma')) .
				(empty($datetime)	? '': span('file-datetime', $datetime))
			) . 
			(empty($description)? '': div('file-description', $description)) . 
			(empty($keywords)	? '': div('file-keywords', $keywords))

*/

.file-exit img, .file-edit img {
	width:4pc;
	height:4pc;
}

.file-exit:hover img, 
.file-edit:hover img {
	background:skyblue;
	border-radius:0.5pc;
}

.file-edit img {
	float:right;
}

.file-previous-outer,
.file-next-outer,
.file-start-outer,
.file-pause-outer {
	position:absolute;
	width:20%;
	min-width:100px;
	height:20vh;
	z-index:20;
/*	background:red; */
}

.file-previous-outer,
.file-next-outer {
	top:40%;
}

.file-next-outer {
	right:1%;
}

.file-start-outer,
.file-pause-outer
 {
	left:40vw;
	bottom:1%;
}


.file-previous-inner, 
.file-next-inner,
.file-start-inner, 
.file-pause-inner {
	display:inline-block;
	width:100%;
	height:100%;
	max-width:100%;
	object-fit:contain;
}

.file-previous, 
.file-next, 
.file-start, 
.file-pause {
	visibility: hidden; 
	display:inline-block;
	margin:0;
	left:0;
	position:absolute;
	width:100%;
	object-fit:contain;
}

.file-previous, 
.file-next
{
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.file-start,
.file-pause {
	bottom:1%;
}

.file-previous {
	text-align:left;
}

.file-next {
	text-align:right;
}

.file-start, .file-pause {
	text-align:center;
}

.file-info-outer:hover .file-info-inner{
  visibility: visible;
}

.file-previous-outer:hover .file-previous img {
  visibility: visible;
}

.file-next-outer:hover .file-next img{
  visibility: visible;
}

.file-start-outer:hover .file-start img{
  visibility: visible;
}

.file-pause-outer:hover .file-pause img{
  visibility: visible;
}


.file-info-icons {
	margin-top: 2pc;
}

.flag-country, .map-state, .gps-orientation, .gps-position {
	display:inline-block;
	margin-right:0.5pc;
}

.flag-country img,
.map-state img,
.gps-orientation img,
.gps-position img {
	width:2pc;
	height:2pc;
	object-fit:contain;	
}


/* IOS/iPhone 480px */
@media screen and (max-width: 799px) {

	.file-info-inner{
	  visibility: visible;
	}

	
}
@media screen and (max-width: 500px) {

	.file-info-right {
		visibility:hidden;
		width:0;
	}
	.file-info-left {
		width:100%;
	}
}