.fg {
width:100%;
max-width:100%;
position:relative;
display:block;
overflow:hidden;
margin:0 auto;
font-family:AbeeZee, Kosugi Maru, sans-serif;
color:#555555;
}

/*** hack to help prevent blurry images in chrome ***/
/*img {
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:-webkit-optimize-contrast;
image-rendering:crisp-edges;
-ms-interpolation-mode:nearest-neighbor
}*/

.fgthumbwrap {
display:block;
position:relative;
margin:0 5px 0 0;
padding:0;
width:100%;
white-space:nowrap;
overflow-x:auto; 
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
-ms-overflow-style:none;
scrollbar-width:none;
z-index:1
}

.fgthumbwrap::-webkit-scrollbar {height:0;width:0 /* hide scrollbar in webkit */}

.fgthumbwrap-inner {
position:relative;
display:block;
overflow:hidden
}

.fgthumb {
width:200px;	
position:relative;
display:block;
overflow:hidden;
float:left;
margin:5px;
border-radius:20px;
box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 4px 0 rgba(0,0,0,0.15)
}

.fgthumb-itself {
height:200px;
position:relative;
display:block;
overflow:hidden;
float:left;
background:#000 url(images/thumbloader.png) 50% 50% no-repeat;
color:#eee;
width:100%
}

.fgthumb-itself a {color:#eee !important}

.fgthumb-itself img {
object-fit:cover;	
width:auto;
max-width:100%;
height:100%;
display:block;
margin:auto;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:#000;
z-index:1;
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:-webkit-optimize-contrast;
image-rendering:crisp-edges;
-ms-interpolation-mode:nearest-neighbor
}

.fgthumb:hover {box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 4px 0 rgba(0,0,0,0.25)}

.fgcaption {
height:52px;	
position:relative;
display:block;
overflow:hidden;
float:left;
width:100%;
padding:0;
background:#fff
}

.fgcaption-inner {
position:relative;
overflow:hidden;
display:block;
width:calc(100% - 20px);
margin:5px auto;
color:#232323;
height:36px;
text-align:left;
font-family:roboto_r;
font-size:13px;
line-height:19px;
max-height:36px;
z-index:1;
white-space:normal;
overflow-wrap: break-word;
word-wrap: break-word
}

.fgcaption a {color:#222 !important}
 
.gradient-end{	
display:block;
position:absolute;
right:0;
bottom:0;
width:36px;
height:20px;
background-image: transparent;
background-image: -webkit-linear-gradient(to right, transparent, white 75%);
background-image: linear-gradient(to right, transparent, white 75%);
z-index:2
}	

.fgleft,
.fgright{
display:none;	
position:absolute;
margin-top:-5px;
width:34px;
height:34px;
line-height:34px;
border-radius:50%;
text-align:center;
color:#000;
background:rgba(255,255,255,.55);
font-size:18px;
z-index:19
}

.fgleft{left:10px}
.fgright{right:10px}

.fgleft:before {content:'\E408';font-family:'Material Icons'}
.fgright:before{content:'\E409';font-family:'Material Icons'}

.fgleft, 
.fgright{color:#333 !important}

.fgleft:hover, 
.fgright:hover{color:#111;background:#fff;cursor:pointer}

.arrow-right{display:inline-block;position:relative;height:12px;line-height:1;color:#000;font-size:14px;position:relative;top:3px}
.arrow-right:before{content:'\E409';font-family:'Material Icons';color:#000}

#fgtooltipDiv{display:none;position:fixed;top:50%;left:50%;margin-left:-135px;margin-top:-110px;width:220px;overflow:hidden;padding:15px 25px 25px;background-color:#fff;font-size:13px;line-height:22px;word-wrap:break-word;word-wrap:pre-wrap;border-radius:5px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 4px 0 rgba(0,0,0,0.15);z-index:999}

#fgtooltipDiv textarea{width:100%;height:110px;display:block;overflow:hidden;border:0}
#fgtooltipDiv:after {content:''}

#fgtooltipClose{display:block;width:24px;height:24px;position:absolute;top:10px;right:10px}
#fgtooltipClose:before{content:'\E5CD';font-family:'Material Icons';font-size:24px}
#fgtooltipClose:hover{cursor:pointer}
#fgtooltipDiv .label-txt{font-size:14px;font-weight:700;color:#222;margin-bottom:5px}

/*** image view overlay ***/
#fgOverlay {
position:fixed;
display:none;
width:100%;
height:100%;
overflow:hidden;
top:0;
right:0;
padding:0;
font-size:12px;
color:#575757;
background-color:#000;
z-index:497
}

a#fgOverlay-close {
position:relative;
display:block;
float:right;
width:48px;
height:32px;
outline:0;
cursor:pointer;
font-size:21px;
text-align:center;
text-decoration:none;
color:#888;
z-index:498
}
a#fgOverlay-close:hover {color:#aaa;}

#fgOverlay #leftCol {width:calc(100% - 390px);height:100%;display:block;overflow:hidden;position:absolute;left:0;top:0;background:#000;transition:all .3s ease;z-index:499}

#fgOverlay #leftCol.leftColFW{width:100%;height:auto;transition:all .3s ease;z-index:11}

#fgOverlay #leftCol #mainImage{
display:block;
position:relative;
overflow:hidden;
width:100%;
animation:fadeIn ease 1s
}	 

#fgOverlay #infoBox {
display:block;
position:absolute;
top:0;
right:0;
overflow:auto;
width:100%;
max-width:350px;
height:100%;
padding-left:20px;
padding-right:20px;
background-color:#000;
font-family:roboto_r;
font-weight:400;
font-size:1em;
color:#bbb;
line-height:1.6em;
text-align:left;
z-index:498
}

#fgOverlay #infoBox.infoBoxToggle{display:none}

#fgOverlay #infoBox .tablediv{display:table;position:relative;width:100%;height:100%}
#fgOverlay #infoBox .celldiv{display:table-cell;vertical-align:middle}
#fgOverlay #infoBox h3{font-family:roboto_c;font-size:18px;font-weight:400;color:#eee}

#fgOverlay .vidFrame {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
padding:0;
display:block;
max-width:100%;
height:100%;
max-height:640px;
z-index:498
}

#fgOverlay .audFrame{
position:relative;
display:block;
overflow:hidden;
margin:20% auto 0 auto;
padding:20px;
display:block;
width:94%;
max-width:560px;
background:#222;
z-index:498	
}

#fgOverlay #mainImage img{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
padding:0;
display:block;
width:auto;
max-width:100%;
max-height:100%;
z-index:498;
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:-webkit-optimize-contrast;
image-rendering:crisp-edges;
-ms-interpolation-mode:nearest-neighbor
}

#fgOverlay .imgFrame-wrap{
overflow:hidden;
padding:70px;
border:1px solid #ccc
}

#fgOverlay .bottombar {
position:absolute;
bottom:2%;
left:50%;
margin-left:-70px;
width:140px;
height:40px;
line-height:40px;
font-family:roboto_c;
font-size:16px;
text-align:center;
color:#aaa;
overflow:hidden;
border-radius:4px;
background:rgba(0,0,0,0.50);
z-index:501
}

#fgOverlay .itemnums {
display:inline-block;
position:relative;
float:left;
width:62px;
font-size:12px;
text-align:center
}

.fg .refresh {cursor:pointer;}
.fg .description-wrapper {padding-left:7px;padding-right:7px;font-size:14px;line-height:21px}

.exifname {font-weight:700;color:#ccc}

#fgOverlay #thumb-container {
display:block;
position:relative;
padding:0;
width:100%;
margin:0 auto 2% auto;
max-height:278px;
overflow:auto;
z-index:499
}

#fgOverlay #thumb-container .thumb {
position:relative;
display:block;
float:left;
overflow:hidden;
width:76px;
height:64px;
margin:2px;
border:1px solid #444
}

#fgOverlay #thumb-container .thumb.selected {border:1px solid #eee}
#fgOverlay #thumb-container .thumb img {width:auto;height:100%;display:block;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0} 

#fgOverlay a.btn{display:inline-block;padding:4px 14px 4px 10px;border:0;background:#333;font-size:12px;color:#aaa;border-radius:3px;text-decoration:none;margin-bottom:6px}
#fgOverlay a.btn .material-icons{display:inline-flex;vertical-align:middle;padding-bottom:3px;font-size:16px}

.fg .noimg {width:48px;height:48px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;background:#fff url(images/noimg.png) center center no-repeat}

#fgOverlay .fgicon{width:36px;height:36px;line-height:36px;font-family:Material Icons;text-align:center;display:block;background-color:#000;text-decoration:none;color:#ccc;z-index:502}
.fg .fgicon{font-family:Material Icons;text-align:center;display:inline-block;text-decoration:none;color:#555}

#fgOverlay .fgicon.icon-close,
#fgOverlay .fgicon.icon-drawer,
#fgOverlay .fgicon.icon-share,
#fgOverlay .fgicon.icon-open{position:absolute;top:1px;right:0;width:40px;height:34px;line-height:34px;background:#333}

#fgOverlay .fgicon.icon-close:before{content:'\E5CD';font-family:'Material Icons';font-size:28px}

#fgOverlay .fgicon.icon-drawer{right:41px}
#fgOverlay .fgicon.icon-drawer:before{content:'\E8C4';font-family:'Material Icons';font-size:22px}

#fgOverlay .fgicon.icon-share{right:82px}
#fgOverlay .fgicon.icon-share:before{content:'\E80D';font-family:'Material Icons';font-size:22px;}

#fgOverlay .fgicon.icon-open{right:123px}
#fgOverlay .fgicon.icon-open:before{content:'\E89E';font-family:'Material Icons';font-size:24px}

#fgOverlay .fgicon.icon-left,
#fgOverlay .fgicon.icon-right{width:34px;height:40px;line-height:40px;font-size:21px;position:relative;float:left;background:transparent}

#fgOverlay .fgicon.icon-left{border-top-left-radius:4px;border-bottom-left-radius:4px}
#fgOverlay .fgicon.icon-right{border-top-right-radius:4px;border-bottom-right-radius:4px}

.fg .fgicon.icon-left,
.fg .fgicon.icon-right{position:relative;top:3px;font-size:14px}

#fgOverlay .fgicon.icon-left:before,
.fg .fgicon.icon-left:before{content:'\E408';font-family:'Material Icons'}

#fgOverlay .fgicon.icon-right:before,
.fg .fgicon.icon-right:before {content:'\E409';font-family:'Material Icons'}

.fg a:link, .fg a:active, .fg a:visited {outline:0;text-decoration:none;color:#004e7b}
.fg a:hover {color:#a63510} 

.fg img {border:0}
.fg .clear {clear:both}

.fgclear,
p.fgclear {height:0;clear:both;padding:0;margin:0}
.fgm5-left{margin-left:5px}
.fgtitle {font-family:ABeeZee;font-size:18px;color:#71130B}



#fgmainspinner{
display:none;
position:absolute;
top:50%;
left:50%;
border-radius:50%;
width:90px;
height:90px;
margin-top:-45px;
margin-left:-45px;
border-top:20px solid blue;
border-right:20px solid yellow;
border-bottom:20px solid red;
border-left:20px solid purple;
background:transparent;
animation:spin 2s linear infinite
}

/***** pagination *****/
.fg .paginate-wrapper{position:relative;width:calc(100% - 10px);margin:10px auto}

.fg .paginate-wrapper a{color:#fff}

.fg .paginate,
.fg .current-paginate,
.fg .prev,
.fg .next {
display:inline-block;
overflow:hidden;
padding:0;
margin:1px;
text-decoration:none;
outline:none;
height:28px;
line-height:28px;
min-width:28px;
text-align:center;
color:#fff;
background-color:#85b3a6
}

.fg .current-paginate{background-color:#00616a}

.fg .prev .material-icons,
.fg .next .material-icons{line-height:28px;position:relative}

.fg .prev,
.fg .next{background-color:#569099}

.fg .prev.inactive,
.fg .next.inactive{color:#bbb;background-color:#ced7d4}

/***** end pagination *****/

@keyframes fadeIn {
0% {opacity:0}
100% {opacity:1}
}

@keyframes fadeOut {
0% {opacity:1}
100% {opacity:0}
}

@keyframes spin {
0% { transform:rotate(0deg) }
100% { transform:rotate(360deg) }
}

@media only screen and (max-width:800px) {

	.fg {max-width:100%}
	.fgthumb {width:120px}
	.fgthumb-itself {height:200px}
	
	#fgOverlay #leftCol {width:calc(100% - 300px)}
	#fgOverlay #infoBox {width:260px}
	#fgOverlay #thumb-container {max-height:208px}
}



@media only screen and (max-width:650px) {
	
	.fg{max-width:100%}	
	.fgthumb {width:120px}
	.fgthumb-itself {height:200px}
		
	#fgOverlay {overflow:auto}
	
	#fgOverlay #leftCol,
	#fgOverlay #infoBox {position:relative;float:left;left:auto;right:auto;width:100%;max-width:100%}
	
	#fgOverlay #leftCol {height:auto;min-height:290px}
	#fgOverlay #mainImage,
	#fgOverlay .vidFrame,
	#fgOverlay .audFrame{height:290px;max-height:290px}
	#fgOverlay .vidFrame{position:relative;left:auto;top:auto;width:100%;max-width:100%;height:100%}

	#fgOverlay #infoBox {display:block;max-width:94%;padding-left:3%;padding-right:3%;display:block}
	
	#fgOverlay #thumb-container {display:block;width:100%;height:100%;max-height:100%;overflow:hidden;margin-top:0}
	#fgOverlay #thumb-container .thumb{width:60px;height:60px}

	#fgOverlay #infoBox .tablediv{display:block;width:100%;overflow:auto}
	#fgOverlay #infoBox .celldiv {display:block;vertical-align:top;width:100%}
	
	#fgOverlay .bottombar{bottom:0}
	
	.exifname,
	.exif-info {display:none}
	

}




@font-face {
font-family: roboto_r;
src: local(Roboto-Regular), 
url(fonts/roboto/Roboto-Regular.woff2) format("woff2"),
url(fonts/roboto/Roboto-Regular.woff) format("woff");
font-weight:400;font-style:normal;font-display:swap
}
@font-face {
font-family: roboto_c;
src: local(Roboto-Condensed), 
url(fonts/roboto/Roboto-Condensed.woff2) format("woff2"),
url(fonts/roboto/Roboto-Condensed.woff) format("woff");
font-weight:400;font-style:normal;font-display:swap
}
@font-face {font-family:'Material Icons'; 
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(fonts/material/MaterialIcons-Regular.woff) format('woff');
font-style:normal;
font-weight:normal
}
.material-icons {font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:18px;display: inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga'}