.fg {
    width:100%!important;
    position:relative;
    display:block;
    overflow:hidden;
    margin-top:10px;
}

.fgtitle-album {
    display:block;
    font-size: 2rem!important;
    margin: 10px 0!important;
}

.fgthumbwrap {
    display:block;
    position:relative;
    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 {	
    position:relative;
    display:block;
    overflow:hidden;
    float:left;
}

.fgthumb-album {margin-bottom: 30px;}

.fgthumb-itself {
    height:250px;
    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;
    display:block;
    margin:auto;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:1
}

.fgcaption {	
    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:100%;
    color:#242424;
    text-align:left;
    font-size:1.3rem;
    padding-bottom:10px;
    z-index:1;
    white-space:normal;
    overflow-wrap:break-word;
    word-wrap: break-word;
}

.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:2000;
}

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 #showImg{width:100%;height:100%;display:block;overflow:hidden;position:absolute;left:0;top:0;background:#000;transition:all .3s ease;z-index:499}

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

#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;
    margin-bottom:15px;
    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:18px;
    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:30px;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}

#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 (min-width:992px) {
    .fgthumb {width:33.33%;}
}

@media only screen and (min-width:768px) and (max-width:992px) {
    .fgthumb {width:50%;}
}

@media only screen and (min-width:768px) {
    main>.container-fluid {padding: 0 30px;}
    .fgthumb {padding:0 5px 5px 0;}
    .fgthumb-album {padding:0 15px 15px 0;}
}

@media only screen and (max-width:768px) {
    .fgthumb {width:100%; padding-bottom:10px;}
}

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

@media only screen and (max-width:533px) {
    #fgOverlay{overflow:auto}

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

    #fgOverlay #showImg{height:calc(100% - 40px)}
    #fgOverlay #mainImage,
    #fgOverlay .vidFrame,
    #fgOverlay .audFrame{height:100%;max-height:100%}
    #fgOverlay .vidFrame{position:relative;left:auto;top:auto;width:100%;max-width:100%;height:100%}

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

    #fgOverlay .bottombar{bottom:0}
}