/* ========================================================================
 * Timeline responsive styles
 * ======================================================================== */

.tl-caption .wp-caption-text,
.tl-caption p.wp-caption-text{
  font-style: italic;
  line-height: 1.3;
  font-size: 14px !important;
  padding-top: 5px;
  padding-bottom: 5px;
}
.tl-caption-absolute {
  position: absolute;
}

.tl-caption-relative {
  position: relative;
}

.tl-caption-relative::after {
  position: absolute;
  top: 100%;
  left: 0;
  line-height: 1.3;
}

.tl-caption-absolute img,
.main-image img {
  position: relative !important;
}

.tl-caption.tl-caption-tl .wp-caption-text,
.tl-caption.tl-caption-tr .wp-caption-text,
.tl-caption.tl-caption-tt .wp-caption-text,
.tl-caption.tl-caption-bl .wp-caption-text,
.tl-caption.tl-caption-br .wp-caption-text {
  position: absolute;
}

.tl-caption.tl-caption-tl .wp-caption-text,
.tl-caption.tl-caption-bl .wp-caption-text {
  padding-right: 10px;
}

.tl-caption.tl-caption-tl .wp-caption-text,
.tl-caption.tl-caption-tr .wp-caption-text,
.tl-caption.tl-caption-tt .wp-caption-text,
.tl-caption.tl-caption-bl .wp-caption-text,
.tl-caption.tl-caption-br .wp-caption-text {
  padding-top: 0;
}

.tl-caption.tl-caption-tl .wp-caption-text,
.tl-caption.tl-caption-bl .wp-caption-text,
.tl-caption.tl-caption-tr .wp-caption-text,
.tl-caption.tl-caption-br .wp-caption-text {
  padding-left: 10px;
  padding-right: 10px;
}


.timeline-body .tl-caption .wp-caption-text {
  width: 100%;
  margin-bottom: 0 !important;
}

.tl-caption.tl-caption-tl .wp-caption-text {
  top: 0;
  right: 100%;
  text-align: right;
}
.tl-caption.tl-caption-tr .wp-caption-text {
  top: 0;
  left: 100%;
  padding-left: 10px;
}
.tl-caption.tl-caption-tt .wp-caption-text {
  bottom: 100%;
  left: 0;
}
.tl-caption.tl-caption-br .wp-caption-text {
  bottom: 0;
  left: 100%;
}
.tl-caption.tl-caption-bl .wp-caption-text {
  bottom: 0;
  right: 100%;
  text-align: right;
}

.tl-caption.tl-caption-tl::after {
  position: absolute;
  top: 0;
  left: auto;
  width: 100%;
  text-align: right;
  padding-right: 10px;
  right: 100%;
  line-height: 1.2;
}

.tl-caption-relative::after{
  font-size: 14px;
  color: #000;
  font-style: italic;
  margin-bottom: 0 !important;
  padding: 5px 0;
}

.template-5 .tl-caption .wp-caption-text,
.template-13 .tl-caption-relative::after {
  max-width: 300px;
}

@media (min-width: 1200px) {
  .template-13 .tl-caption-relative::after {
    max-width: 320px;
  }
}

.template-8 .tl-caption .wp-caption-text {
  width: 200%;
  max-width: 216px;
}

.template-8 .tl-caption.left-bottom-gif .wp-caption-text {
  max-width: 280px;
}

.template-9 .tl-caption .wp-caption-text {
  width: 200%;
  max-width: 280px;
}

.template-10 .tl-caption .wp-caption-text {
  width: 200%;
  max-width: 280px;
}

.template-11 .tl-caption-relative::after {
  max-width: 250px;
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .template-5 .tl-caption .wp-caption-text, .template-13 .tl-caption-relative::after {
      max-width: 220px;
  }
  .template-8 .tl-caption.left-bottom-gif .wp-caption-text {
    max-width: 180px;
  }
  .template-10 .tl-caption .wp-caption-text {
    max-width: 260px;
  }
  .img-fluid.bottom-right-3 {
    max-width: 280px;
  }
  .template-9 .tl-caption .wp-caption-text {
    max-width: 200px;
  }
  .template-11 .tl-caption-relative::after {
    max-width: 190px;
  }
  .img-fluid.left-1-11 {
    max-width: 110px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1280px) {
  .ctl-timeline-container {
    overflow-x: hidden;
  }
}

@media (min-width: 768px) {
  .historical-timeline .container-md,
  .historical-timeline .container-sm,
  .historical-timeline .container {
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .historical-timeline .container-lg,
  .historical-timeline .container-md,
  .historical-timeline .container-sm,
  .historical-timeline .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .historical-timeline .container-xl,
  .historical-timeline .container-lg,
  .historical-timeline .container-md,
  .historical-timeline .container-sm,
  .historical-timeline .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .historical-timeline .container-xxl,
  .historical-timeline .container-xl,
  .historical-timeline .container-lg,
  .historical-timeline .container-md,
  .historical-timeline .container-sm,
  .historical-timeline .container {
    max-width: 1320px;
  }
}