.fg {
width:100%;
max-width:560px;
position:relative;
display:block;
overflow:hidden;
margin:0 auto;
font-family:Roboto, arial, helvetica, sans-serif
}

.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:130px;	
position:relative;
display:block;
overflow:hidden;
float:left;
margin:5px;
border-radius:6px;
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:104px;
position:relative;
display:block;
overflow:hidden;
float:left;
background:#000;
color:#eee;
width:100%;
cursor:pointer
}

.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;
z-index:1
}

.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:60px;	
position:relative;
display:block;
overflow:hidden;
float:left;
width:100%;
padding:0;
background:#fff;
font-size:14px
}

.fgcaption-inner {
position:relative;
overflow:hidden;
display:block;
width:calc(100% - 24px);
margin:5px auto;
color:#242424;
height:42px;
text-align:left;
font-size:1.1em;
line-height:22px;
max-height:42px;
z-index:1;
white-space:normal;
overflow-wrap:break-word;
word-wrap: break-word;
font-family:Helvetica
}

.fgcaption a {color:#242424 !important}
 
.gradient-end{	
display:block;
position:absolute;
right:0;
bottom:0;
width:44px;
height:24px;
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;
cursor:pointer
}	

.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,.60);
font-size:21px;
z-index:19
}

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

.fgleft:before {content:'\F035E';font-family:'Material Design Icons'}
.fgright:before{content:'\F035F';font-family:'Material Design 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:'\F035F';font-family:'Material Design 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:6px;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:'\F0156';font-family:'Material Design 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:14px;
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-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;padding-top:30px;padding-bottom:30px}
#fgOverlay #infoBox h3{font-family:Roboto;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
}

#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-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:14px;
text-align:center
}

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

#fgOverlay .file-description{display:block;overflow:hidden}

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

#fgOverlay .thumb.selected {border:1px solid #eee}
#fgOverlay .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 .mdi{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 Design Icons';text-align:center;display:block;background-color:#000;text-decoration:none;color:#ccc;z-index:502}
.fg .fgicon{font-family:'Material Design 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:'\F0156';font-family:'Material Design Icons';font-size:24px}

#fgOverlay .fgicon.icon-drawer{right:123px}
#fgOverlay .fgicon.icon-drawer:before{content:'\F0293';font-family:'Material Design Icons';font-size:26px}

#fgOverlay .fgicon.icon-open{right:82px}
#fgOverlay .fgicon.icon-open:before{content:'\F03CC';font-family:'Material Design Icons';font-size:20px}

#fgOverlay .fgicon.icon-share{right:41px}
#fgOverlay .fgicon.icon-share:before{content:'\F1514';font-family:'Material Design Icons';font-size:18px}

#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:'\F035E';font-family:'Material Design Icons'}

#fgOverlay .fgicon.icon-right:before,
.fg .fgicon.icon-right:before {content:'\F035F';font-family:'Material Design 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-size:14px}

#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 .mdi,
.fg .next .mdi{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:768px) {
.fg {max-width:560px}
.fgthumb {position:relative;width:130px;height:150px}
.fgthumb-itself {height:98px}	
}

@media only screen and (max-width:640px) {
#fgOverlay #leftCol {width:calc(100% - 300px)}
#fgOverlay #infoBox {width:260px}
#fgOverlay #thumb-container {max-height:208px}
}

@media only screen and (max-width:533px) {
.fg{max-width:520px}	
.fgthumb {width:120px}

#fgOverlay{overflow:auto}

#fgOverlay #leftCol,
#fgOverlay #infoBox {position:relative;float:left;left:auto;right:auto;width:100%;max-width:100%}

#fgOverlay #leftCol{height:380px}
#fgOverlay #mainImage,
#fgOverlay .vidFrame,
#fgOverlay .audFrame{height:340px;max-height:340px}
#fgOverlay .vidFrame{position:relative;left:auto;top:auto;width:100%;max-width:100%;height:100%}

#fgOverlay #infoBox {display:block;overflow:hidden;height:auto;max-width:94%;padding:3%;padding-right:3%;padding-bottom:30px}

#fgOverlay .thumb{width:60px;height:60px}

#fgOverlay #infoBox .tablediv{display:block;width:100%;overflow:auto}
#fgOverlay #infoBox .celldiv {display:block;vertical-align:top;width:100%;padding-top:0}

#fgOverlay .bottombar{bottom:0}
}

@media only screen and (max-width:480px) {
.fg{max-width:460px}	
.fgthumb {width:105px}

#fgOverlay #leftCol{height:350px}
#fgOverlay #mainImage,
#fgOverlay .vidFrame,
#fgOverlay .audFrame{height:320px;max-height:320px}
}

@media only screen and (max-width:414px) {
.fg{max-width:345px}	
.fgthumb {width:105px}

#fgOverlay #leftCol{height:400px}
#fgOverlay #mainImage,
#fgOverlay .vidFrame,
#fgOverlay .audFrame{height:340px;max-height:340px}
}

@media only screen and (max-width:360px) {
.fg{max-width:330px}	
.fgthumb {width:100px}

#fgOverlay #leftCol{height:340px}
#fgOverlay #mainImage,
#fgOverlay .vidFrame,
#fgOverlay .audFrame{height:300px;max-height:300px}
}

@media only screen and (max-width:320px) {
.fg{max-width:300px}	
.fgthumb {width:90px}
}