
.thumbnail{ 
	margin-bottom: 0;
	position: relative;
	overflow: hidden;
	display: inline-block;
	vertical-align: bottom;
}
.thumbnail > a{
		width: 100%;
		height: 100%;
		display: block;
		outline: none;
		border: none;
		overflow: hidden;
		position: relative;
		top: 0;
		left: 0;
	}
.content-over{
	width: 100%;
	height: 100%;
	padding: 1rem;
	display: flex;
	position: absolute;
	bottom: 0;
	z-index: 2;
}
.content-over > span,
.content-over > div{
		width: 100%;
}

/* ie fallback */

/* Animation*/
@keyframes rotate {
  100% {
    transform: rotate(360deg); } }

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px; } }

@keyframes color {
  100%,
  0% {
    stroke: #07090C;
    border-bottom-color: #07090C; }
  40% {
    stroke: #07090C;
    border-bottom-color: #07090C; }
  66% {
    stroke: #07090C;
    border-bottom-color: #07090C; }
  80%,
  90% {
    stroke: #07090C;
    border-bottom-color: #07090C; } }

.tm-lightbox {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  opacity: 1;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 1000;
  -webkit-backface-visibility: hidden; }
  .tm-lightbox .preloader .stroke {
    animation: dash 1.5s ease-in-out infinite, colorSummit 6s ease-in-out infinite; }

.tml-content-wrapper {
  width: 100%;
  height: 100%;
  padding: 6rem 0 8rem 0;
  margin: 0 auto;
  display: flex !important;
  align-items: center; }
  .tml-content-wrapper.zoomed {
    transform: scale(1.3); 
	
}

.tml-inner {
  width: 100%;
  height: 100%; }

.tml-inner,
.tml-thumbnail-wrapper {
  position: relative; }

.tml-thumbnail-wrapper {
  width: 100%;
  height: 10rem;
  padding: 0 1rem;
  background-color: #07090C; }
  .tml-thumbnail-wrapper ul {
    height: 8rem;
    margin: 1rem 0;
    white-space: nowrap; }
    .tml-thumbnail-wrapper ul li,
    .tml-thumbnail-wrapper ul .thumbnail {
      height: 100%; }
  .tml-thumbnail-wrapper img {
    max-height: 100%;
    opacity: 0.4; }
  .tml-thumbnail-wrapper a.tml-thumb-active img {
    opacity: 1; }
  .tml-thumbnail-wrapper .play {
    width: 3rem;
    height: 3rem;
    border-radius: 999rem;
    border: 1px solid #fff;
    color: #fff; }

.tml-content {
  height: 100%;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 0 4rem rgba(0, 0, 0, 0.3);
  -webkit-backface-visibility: hidden;
  transition-duration: 300ms; }
  .tml-content.error {
    width: 100% !important;
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    box-shadow: none; }
    .tml-content.error span {
      margin: 0 auto; }
  .tml-content img {
    max-height: 100%; }

@keyframes colorSummit {
  100%,
  0% {
    stroke: #ffffff;
    border-bottom-color: #ffffff; }
  40% {
    stroke: #ffffff;
    border-bottom-color: #ffffff; }
  66% {
    stroke: #ffffff;
    border-bottom-color: #ffffff; }
  80%,
  90% {
    stroke: #ffffff;
    border-bottom-color: #ffffff; } }

/*
@section 50.2. Lightbox Video
*/
video.media-source,
iframe.media-source,
object.media-source,
embed.media-source {
  width: 100%; }

.tml-content video {
  width: 100%;
  height: 100%; }

/*
@section 50.3. Lightbox Captions
*/
.tml-caption {
  width: 100%;
  min-height: 5rem;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  color: #fff;
  font-size: 1.3rem;
  font-style: italic;
  text-align: center;
  -webkit-backface-visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 0; }
  .tml-caption span {
    margin: 0 auto; }

/*
@section 50.4. Lightbox Navigation
*/
.tml-nav {
  width: 5rem;
  height: 5rem;
  background-color: rgba(0, 0, 0, 0.3);
  color: #C0C6D2;
  font-size: 2rem;
  text-align: center;
  text-decoration: none;
  opacity: 0.5;
  display: flex;
  align-items: center;
  z-index: 10; }
  .tml-nav:hover, .tml-nav.active {
    width: 7rem;
    opacity: 1;
    color: #9EA7BB;
    text-decoration: none;
    transform: none; }
  .tml-nav:before {
    margin: 0 auto; }
  .tml-nav.tml-next {
    margin-top: -2.5rem;
    border-radius: 0.4rem;
    font-size: 2rem;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto; }
    .tml-nav.tml-next:before {
      content: "<"; }
  .tml-nav.tml-prev {
    margin-top: -2.5rem;
    border-radius: 0.4rem;
    font-size: 2rem;
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0; }
    .tml-nav.tml-prev:before {
      content: ">"; }
  .tml-nav.tml-zoom:before {
    content: "+"; }
  .tml-nav.tml-zoom.active:before {
    content: "-"; }
  .tml-nav.tml-thumbnails:before {
    content: "t"; }
  .tml-nav.tml-exit:before {
    content: "x"; }

.tml-toolbar {
  margin: 0;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10; }
  .tml-toolbar .tml-nav {
    display: inline-flex; }
    .tml-toolbar .tml-nav:hover, .tml-toolbar .tml-nav.active {
      width: 5rem; }

.tml-nav {
  -webkit-transition-property: width, background, color, opacity, transform;
  transition-property: width, background, color, opacity, transform;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms; }


