/* MODALS */

/* 1900 */

.page-title-1900 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/01.jpg');
  background-position: top;
}

.page-title-1900::after {
  content: "Familie von Richard Henkes; Richard Henkes Archiv Vallendar";
  left: 75%;
}

/* 1911 */

.page-title-1911 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/02.jpg');
  background-position: center;
}

.page-title-1911::after {
  content: "Studienheim Schönstatt (1916)";
  left: 85%;
}

/* 1914 */

.page-title-1914-1916 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/03.jpg');
  background-position: center;
}

.page-title-1914-1916::after {
  content: "Erste Soldauszahlung nach der Mobilmachung, Berlin (1914); Bundesarchiv, Bild 183-R25206 / CC-BY-SA 3.0";
  left: 55%;
}

/* 1917 */

.page-title-1917 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/04.jpg');
  background-position: 0% 17%;
}

.page-title-1917::after {
  content: "Soldaten-Sodalen im Heimaturlaub";
  left: 85%;
}

/* 1918 */

.page-title-1918 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/05.jpg');
  background-position: top;
}

.page-title-1918::after {
  content: "Kavallerie-Kaserne in Darmstadt (1899)";
  left: 80%;
}


/* 1921 */

.page-title-1921 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/06.jpg');
  background-position: top;
}

.page-title-1921::after {
  content: "Abiturjahrgang (1919), Archiv der Schönstattpatres";
  left: 75%;
}


/* 1925 */

.page-title-1925 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/07.jpg');
  background-position: top;
}

.page-title-1925::after {
  content: "Henkes im Weihekurs; Richard Henkes Archiv, Vallendar";
  left: 80%;
}


/* 1926 */

.page-title-1926 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/08.jpg');
  background-position: 0% 17%;
}

.page-title-1926::after {
  content: "Henkes als Lehrer in Schönstatt (1926);  Provinzarchiv der Pallottiner, Limburg";
  left: 70%;
}


/* 1928 */

.page-title-1928 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/09.jpg');
  background-position: center;
}

.page-title-1928::after {
  content: "Sanatorium St. Blasien (1914); aus Sanatorium St. Blasien Heilanstalt für Lungenkranke, C.A. Wagner Freiburg";
  left: 55%;
}


/* 1929 */

.page-title-1929 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/09_2.jpg');
  background-position: center;
}

.page-title-1929::after {
  content: "'Patersbau', Henkes' Unterkunft in Alpen, Ansicht von 1915 / Privatsammlung Ursula Hüsch, Alpen";
  left: 55%;
}


/* 1931 */

.page-title-1931 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/10.jpg');
  background-position: center;
}

.page-title-1931::after {
  content: "Fronleichnam 1931 im Kloster zum Guten Hirten";
  left: 75%;
}


/* 1937 */

.page-title-1937 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/11.jpg');
  background-position: center;
}

.page-title-1937::after {
  content: "Vinzenz-Pallotti-Kolleg, Katscher, Oberschlesien";
  left: 65%;
}


/* 1940 */

.page-title-1940 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/12.jpg');
  background-position: center;
}

.page-title-1940::after {
  content: "Herz-Jesu-Missionshaus, Frankenstein, Schlesien";
  left: 65%;
}



/* 1940-1943 */

.page-title-1940-1943 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/14.jpg');
  background-position: 0% 17%;
}

.page-title-1940-1943::after {
  content: "Aufbruch zur Colenda; Richard Henkes Archiv, Vallendar";
  left: 75%;
}


/* 1943 */

.page-title-1943 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/15.jpg');
  background-position: top;
}

.page-title-1943::after {
  content: "Auschnitt Graphic Documentary, Drushba Pankow";
  left: 85%;
}


/* 1943-2 */

.page-title-1943-2 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/16.jpg');
  background-position: center;
}

.page-title-1943-2::after {
  content: "Propagandafoto: KZ Dachau, Häftlinge beim Appell (28. Juni 1938). Aufnahme von Friedrich Bauer, Bundesarchiv, Bild 152-21-05 / CC-BY-SA 3.0";
  left: 45%;
}


/* 1943-1944 */

.page-title-1943-1944 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/17.jpg');
  background-position: center;
}

.page-title-1943-1944::after {
  content: "KZ-Häftlinge bei der Zwangsarbeit im Lager (Schieben von Loren) (20. Juli 1938), Bundesarchiv, Bild 152-26-20 / CC-BY-SA 3.0";
  left: 45%;
}


/* 1944 */

.page-title-1944 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/18.jpg');
  background-position: center;
}

.page-title-1944::after {
  content: "Propagandaaufnahme: Strafstehende Häftlinge auf dem Appellplatz im KZ Dachau. Friedrich Franz Bauer (Juni 1938), Bundesarchiv, Bild 152-23-35A / CC-BY-SA 3.0";
  left: 35%;
}


/* 1944-2 */

.page-title-1944-2 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/19.jpg');
  background-position: top;
}

.page-title-1944-2::after {
  content: "Ausschnitt Graphic Documentary, Drushba Pankow";
  left: 75%;
}


/* 1944-1945 */

.page-title-1944-1945 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/20.jpg');
  background-position: center;
}

.page-title-1944-1945::after {
  content: "Ausschnitt Graphic Documentary, Drushba Pankow";
  left: 75%;
}


/* 2001 */

.page-title-2001 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/21.jpg');
  background-position: top;
}

.page-title-2001::after {
  content: "Apostulator Pater Probst SAC, Ehepaar Osiadly";
  left: 85%;
}


/* 2003 */

.page-title-2003 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/22.jpg');
  background-position: center;
}

.page-title-2003::after {
  content: " ,Ehepaar Osiadly";
  left: 85%;
}



/* 2007 */

.page-title-2007 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/23.jpg');
  background-position: center;
}

.page-title-2007::after {
  content: "Timo Michael Kessler";
  left: 85%;
}


/* 2013 */

.page-title-2013 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/24.jpg');
  background-position: center;
}

.page-title-2013::after {
  content: "Stolperstein in Ruppach";
  left: 85%;
}


/* 2018 */

.page-title-2018 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/25.jpg');
  background-position: center;
}

.page-title-2018::after {
  content: "Schönstatt";
  left: 85%;
}


/* 2019 */

.page-title-2019 {
  background-image: linear-gradient(to bottom, rgba(10,10,10,.75) 0%, transparent 20%, transparent 80%, rgba(10,10,10,.75) 100%), url('../images/vita/timeline/26.jpg');
  background-position: top;
}

.page-title-2019::after {
  content: "Schönstatt";
  left: 85%;
}


.timeline-nolink-modal {
  cursor: default!important ;
}


/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 50px;
    height: 50px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;

    z-index: 900;

    -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);

}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
   
}

.slick-prev:hover,
.slick-next:hover
{
  opacity: 1;
  transform: scale(1.25) translate(0, -20px);
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
    transform: scale(1.25) translate(0, -20px);
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .3;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 40px;
    line-height: 1;

    opacity: .9;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background-color: rgba(199,152,108,1);

    border-radius: 10px;
    padding: .4rem;
}


.slick-prev
{
    left: -5vw;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -5vw;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

  
  .timeline-carousel {
    padding: 0px 6.9444% 90px 6.9444%;
    position: relative;
    overflow: hidden;
  }
  .timeline-carousel:after, .timeline-carousel:before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    height: 100%;
    width: 6.9444%;

    z-index: 3;
    width: 6.9444%;
  }
  .timeline-carousel:after {
    left: 0;
  }
  .timeline-carousel:before {
    right: 0;
    opacity: 0;
  }
  .timeline-carousel .slick-list {
    overflow: visible;
    margin-top: 1rem;
  }
  .timeline-carousel .slick-dots {
    bottom: -73px;
  }
  .timeline-carousel h1 {
    color: white;
    font-size: 46px;
    line-height: 50pd;

    font-weight: 600;
  }
  .timeline-carousel__image {
    padding-right: 30px;
  }
  .timeline-carousel__item {
    cursor: pointer;
    transition: all .2s ease-in-out;
  }

  .timeline-carousel__item:hover {
    transform: scale(1.05);
  }



  .timeline-carousel__item .media-wrapper {
    opacity: 0.4;
    padding-bottom: 71.4%;
    -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    border-radius: 10px;

  }


  .timeline-carousel__item:last-child .timeline-carousel__item-inner:after {
    width: calc(100% - 30px);
  }
  .timeline-carousel__item-inner {
    position: relative;
    padding-top: 45px;
  }
  .timeline-carousel__item-inner:after {
    position: absolute;
    width: 100%;
    top: 45px;
    left: 0;
    content: "";
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    opacity: .5;
  }
  .timeline-carousel__item-inner .year {
    font-size: 36px;
    line-height: 36px;
    color: white;
    display: table;
    letter-spacing: -1px;
    padding-right: 10px;

    background-color: #101010;
    
    z-index: 1;
    position: relative;
    margin: -15px 0 20px;
    font-weight: 900;

    border-radius: 10px;
    opacity: .1;

  }
  .timeline-carousel__item-inner .year:after {
    content: "";
    position: absolute;
    display: block;
    left: -10px;
    top: 0;
    height: 100%;
    width: 10px;

    background-color: #101010;
    
    z-index: 3;
    border-radius: 10px;
  }
  .timeline-carousel__item-inner .month {
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #c7986c;
    display: block;
    margin-bottom: 10px;
    font-weight: 900;
    opacity: .1;
  }
  .timeline-carousel__item-inner p {
    font-size: 1rem;
    line-height: 18px;
    color: white;
    width: 90%;
    font-weight: 400;
    margin-bottom: 15px;    
    opacity: .1;
  }
  .timeline-carousel__item-inner .read-more {
    font-size: 1rem;
    color: #c7986c;
    display: table;
    margin-bottom: 10px;
    font-weight: 900;
    text-decoration: none;
    position: relative;
    opacity: .1;
  }
  .timeline-carousel__item-inner .read-more:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    border-bottom: 2px solid #c7986c;
    -webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -o-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  }
  .timeline-carousel__item-inner .read-more:hover:after {
    width: 100%;
  }
  .timeline-carousel__item-inner .pointer {
    height: 29px;
    position: relative;
    z-index: 1;
    margin: -4px 0 16px;
  }
  .timeline-carousel__item-inner .pointer:after, .timeline-carousel__item-inner .pointer:before {
    position: absolute;
    content: "";
  }
  .timeline-carousel__item-inner .pointer:after {
    width: 9px;
    height: 9px;
    border-radius: 100%;
    top: 0;
    left: 0;
    background-color: #c7986c;
  }
  .timeline-carousel__item-inner .pointer:before {
    width: 1px;
    height: 100%;
    top: 0;
    left: 4px;
    background-color: #c7986c;
  }





  .timeline-carousel .slick-active .media-wrapper {
    opacity: 1 !important;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.6) 0px 6px 12px, rgba(0, 0, 0, 0.8) 0px 6px 12px;
  }


  .timeline-carousel .slick-active .timeline-carousel__item-inner .year,
  .timeline-carousel .slick-active .timeline-carousel__item-inner .month,
  .timeline-carousel .slick-active .timeline-carousel__item-inner p,
  .timeline-carousel .slick-active .timeline-carousel__item-inner .read-more,
  .timeline-carousel .slick-active .timeline-carousel__item-inner::after {
    transition: all 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    opacity: 1 !important;

  }




  
  .slick-dots {
    bottom: 60px;
    list-style: none;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    z-index: 2;
  }
  .slick-dots li {
    cursor: pointer;
    display: inline-block;
    margin: 0 6px;
    position: relative;
    width: 25px;
    height: 25px;
  }
  .slick-dots li:last-child {
    margin-right: 0;
  }
  .slick-dots li.slick-active button {
    background: #c7986c;
    border-color: #c7986c;
  }


  .slick-dots li button {

    display: block;
    border-radius: 5px;
    font-size: 0;
    width: 25px;
    height: 25px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.6);
    border: none;
    cursor: pointer;
    -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  }
  .slick-dots li button:hover {
    background: #c7986c;
    border-color: #c7986c;
    transform: scale(1.3);
  }
  
  .link {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px;
    z-index: 9999;
  }
  .link a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
  }
  .link .fa {
    font-size: 28px;
    margin-right: 8px;
    color: #fff;
  }













  /* Responsive Device less than 768px (.device-sm <)
-----------------------------------------------------------------*/
@media (max-width: 767.98px) {

  .slick-prev,
  .slick-next {
    top: 20%;
  }


  .slick-prev:before,
  .slick-next:before
  {
    font-size: 30px;
  }

  .timeline-carousel__item-inner p {
    width: 90%;
  }

  ul.slick-dots {
    display: none!important;
  }
  
}