.tg-close, .thumb-grid .thumbWrapper {
  background-color: rgba(0, 0, 0, .2);
  cursor: pointer
}

.tg-img-wrapper, .tg-overlay, .tg-placeHolder, .tg-placeHolder div {
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden
}

.tg-img-wrapper, .tg-overlay, .tg-placeHolder, .tg-placeHolder div, .thumb-grid img {
  -webkit-backface-visibility: hidden
}

@font-face {
  font-family: thumbgrid;
  src: url(font/thumbgallery.eot?44954952);
  src: url(font/thumbgallery.eot?44954952#iefix) format('embedded-opentype'), url(font/thumbgallery.woff?44954952) format('woff'), url(font/thumbgallery.ttf?44954952) format('truetype'), url(font/thumbgallery.svg?44954952#thumbgrid) format('svg');
  font-weight: 400;
  font-style: normal
}

* {
  box-sizing: border-box
}

.tg-container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  margin: 20px auto;
  overflow: hidden;
  min-height: 150px;
}

.thumb-grid {
  position: absolute;
  padding: 0;
  width: 100%;
  margin: 0 auto;
  list-style: none;
  font-size: 0;
  text-align: center
}

.thumb-grid img {
  opacity: 0
}

.thumb-grid.active img {
  opacity: 1
}

.thumb-grid .thumbWrapper {
  cursor: pointer;
  position: relative;
  margin: 5px;
  overflow: hidden;
  /*
  border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 0 5px rgba(0, 0, 0, .6);
  */
  display: inline-block !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

}

.thumb-grid .thumbWrapper:hover:after {
  font-family: thumbgrid;
  content: '\e804';
  position: absolute;
  left: 0;
  top: 0;
  bottom:0;
  right:0;
  margin: auto;
  font-size: 18px;
  width: 44px;
  height: 44px;
  border-radius: 100%;
  display: block;
  line-height: 44px;
  text-align: center;
  z-index: 1;
  color: #fff;
  font-style: normal;
  font-weight: 100;
  background-color: rgba(0, 0, 0, .5)
}

.thumb-grid .thumbWrapper .thumb_box {
  width: 100%;
  height: auto;
  transition: All 1s ease;
  -webkit-transition: All .3s ease;
  -moz-transition: All .3s ease;
}

.thumb-grid li .thumb_box {
  transform: rotate(0) scale(1) skew(0) translate(0);
  -webkit-transform: rotate(0) scale(1) skew(0) translate(0);
  -moz-transform: rotate(0) scale(1) skew(0) translate(0);
  -ms-transform: rotate(0) scale(1) skew(0) translate(0);
  -webkit-backface-visibility: hidden;
  opacity: 1
}

.thumb-grid li:hover .thumb_box {
  transform: rotate(0) scale(1.1) skew(0) translate(0);
  -webkit-transform: rotate(0) scale(1.1) skew(0) translate(0);
  -moz-transform: rotate(0) scale(1.1) skew(0) translate(0);
  -ms-transform: rotate(0) scale(1.1) skew(0) translate(0);

  opacity: .85
}

nav.thumbGridNav {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center
}

nav.thumbGridNav a {
  display: inline-block;
  margin: 0 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #000;
  opacity: .3;
  -webkit-transition: all .5s;
  transition: all .5s;
  overflow: hidden;
  text-indent: -1000px;
  cursor: pointer;
  color: #000;
}

nav.thumbGridNav a:hover {
  opacity: .5
}

nav.thumbGridNav a.sel {
  opacity: 1
}

nav.thumbGridNav.waiting a.sel {
  background: #fff;
  border: 1px solid #1d1d1d;
  opacity: .4;
  border: 0
}

nav.thumbGridNav.waiting a:not(.sel) {
  opacity: .1;
  cursor: default
}

.tg-icon {
  font-style: normal!important;
}

.tg-overlay {
  transition: All 2s ease;
  -webkit-transition: All .3s ease;
  -moz-transition: All .3s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 0 0;
  z-index: 10000
}

.tg-close, .tg-next {
  position: absolute;
  -webkit-transition: all .4s;
  transition: all .4s;
  text-align: right
}

.tg-placeHolder {
  background: #1e2123;
  box-shadow: 0 0 5px rgba(0, 0, 0, .6)
-webkit-perspective: 1000
}

.tg-placeHolder div {
  -webkit-perspective: 1000
}

.tg-close {
  -webkit-transition: all .4s;
  transition: all .4s;
  background-color: rgba(0, 0, 0, .2);
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: rgba(255, 255, 255, 1)
}

.tg-next, .tg-prev {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, .2);
  color: rgba(255, 255, 255, .6);
  cursor: pointer
}

.tg-next {
  transition: all .4s;
  right: 20px
}

.tg-next, .tg-prev {
  -webkit-transition: all .4s
}

.tg-prev {
  -webkit-transition: all .4s;
  position: absolute;
  transition: all .4s;
  left: 20px;
  text-align: left
}

.tg-img-wrapper, .tg-spinner {
  top: 0;
  height: 100%;
  margin-left: 0;
  position: absolute;
  width: 100%
}

.tg-close:after {
  content: '\e80c';
  font-family: "thumbgrid";
  font-size: 38px;
  font-weight: 300;
  cursor: pointer;
  padding-right: 0;
  line-height: 1
}

.tg-next:after, .tg-prev:after {
  font-family: "thumbgrid";
  font-size: 38px;
  line-height: 42px;
  font-weight: 300
}

.tg-next:after {
  content: '\e80d';
  padding-right: 0
}

.tg-prev:after {
  content: '\e80e';
  padding-left: 0
}

.tg-next:hover, .tg-prev:hover {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 1)
}

.tg-close:hover {
  color: rgba(0, 0, 0, 1);
  background-color: #fff
}

.tg-spinner {
  right: 0;
  margin-top: 0;
  background: 0 0
}

.tg-img-wrapper {
  left: 0;
  overflow: hidden;
  max-width: 100%;
  -webkit-perspective: 1000
}

.tg-img-wrapper label {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .6);
  width: 100%;
  padding: 10px
}

.tg-img-wrapper label .ss-img-index {
  display: inline-block;
  color: rgba(255, 255, 255, .5);
  padding: 0 10px 5px 0;
  font-weight: 300
}

.tg-img-caption {
  color: #fff;
}

.tg-captionBox {
  position: absolute;
  z-index: 1000;
  width: 100%;
  max-height: 80px;
  bottom: 0;
  color: #fff;
  font-size: 14px;
  text-align: left;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 1024px) {
  .tg-container {
    width: 100%
  }

  .thumb-grid li {
    margin: 4px;
    height: 200px;
    width: 49%
  }

  nav.thumbGridNav {
    margin-top: 20px;
    text-align: center
  }

  .thumb-grid .thumbWrapper:hover:after {
    content: '';
    background-color: transparent
  }

  .tg-next, .tg-next:hover, .tg-prev, .tg-prev:hover {
    background-color: rgba(255, 255, 255, 0);
    color: rgba(255, 255, 255, 1)
  }
}

@media (max-width: 480px) {
  nav.thumbGridNav a {
    margin: 0 8px;
    width: 10px;
    height: 10px;
    border-radius: 100%
  }

  .tg-next, .tg-prev {
    visibility: hidden
  }
}


/*custom overlay gradient */

.tg-placeHolder{
  /*background: linear-gradient(135deg, #ffffff 0%, #cccccc 100%);*/
  background: #000;
}

.tg-overlay {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.78) 0%, rgba(23, 23, 23, 0.6) 100%);
}

.thumb-grid .thumbWrapper {
  width: 100%;
  height: 400px;
}