﻿.hometop::before {
  content: "\f015";
  display: block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.timeline {
  position: relative;
  padding: 1rem;
  margin: 0 auto;
  max-width: 1300px;
}
.timeline:before {
  content: "";
  position: absolute;
  height: 100%;
  border: 1px solid #76b82a;
  right: 40px;
  top: 0;
}
.timeline:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 700px) {
  .timeline {
    padding: 2rem;
  }
  .timeline:before {
    left: calc(50% - 1px);
    right: auto;
  }
}

.timeline__item {
  padding: 0;
  border: 2px solid #76b82a;
  /*border-image: linear-gradient(to right, skyblue 0%, hotpink 100%);
  border-image-slice: 1;*/
  position: relative;
  margin: 1rem 3rem 1rem 1rem;
  clear: both;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.timeline__title {
  background: #76b82a;
  position: relative;
}



.timeline__title h3, .open .readmore_box  {
    padding:10px;
}

.timeline-content {
  padding: 10px 10px 50px;
}

.timeline-pic, .timeline-content:empty, .readmore_box:empty {
  padding:0px;
}

.timeline__title h3 {
  margin:0;
  color:#fff;
}

.timeline__item .timeline__title h3::after, .timeline__item .timeline__title h3::before {
  content: "";
  position: absolute;
}
.timeline__item .timeline__title h3::before {
  right: -4px;
  top: 50%;
  border-style: solid;
  border-color: #76b82a #76b82a transparent transparent;
  border-width: 10px;
  transform: rotate(45deg) translateY(-50%);
}

/*
.readmore_box {
  opacity: 1;
  height: auto;
  transform: scale(1,1);
}*/


.open .readmore_box {
  opacity: 1;
  height: auto;
  transform: scale(1,1);
}

.readmore .readmore_box > *:not(.readmore_knopf)   {
  opacity: 0;
  height: 0;
  margin:0 !important;
  transform: scale(0,1);
}


.readmore.open .readmore_box > * {
  opacity: 1;
  height: auto;
  transform: scale(1,1);
}

.readmore.open .readmore_box > p {
  margin: 0px 0 15px !important;
}

.readmore.open .readmore_box  {
  padding: 10px 10px 80px;
}

.readmore_knopf {
  position:absolute;
  display: flex;
  align-items: center;
  right:-1px;
  bottom:-1px;
  padding: 5px 10px;
  border-top-left-radius: 10px;
  background:#76b82a;  
  color:#fff;
  cursor: pointer;
  font-size:18px;
  transition: all linear 0.5s;
}

.readmore_knopf:hover {
  background:#9c0;  
}

.readmore_knopf::before, .readmore_knopf::after {
  display: inline-block;
  font-size:30px;
  font-family:"Font Awesome 5 Free";
  font-weight: 900;
}

.readmore_knopf::after {
  content:"\f0d7";
  display: inline-block;
  font-size:30px;
  font-family:"Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 10px;
  transition:all linear 0.5s;
}

.open .readmore_knopf::after {
  transform: rotate(180deg);
}



.open .readmore_knopf .readme_more,  .readmore_knopf .readme_less {
  display:none;
}

.readmore_knopf .readme_more, .open .readmore_knopf .readme_less {
  display:block;
}

@media screen and (min-width: 700px) {
  .timeline__item {
    width: 44%;
    margin: 1rem;
  }
  .timeline__item:nth-of-type(2n) {
    float: right;
    margin: 1rem;
   /* border-image: linear-gradient(to right, hotpink 0%, skyblue 100%);
    border-image-slice: 1;*/
  }
  .timeline__item:nth-of-type(2n) .timeline__title h3::before {
    right: auto;
    left: -17px;
    border-color: transparent transparent #76b82a #76b82a;
  }
}


.timeline__item--year {
  text-align: center;
  max-width: 100px;
  margin: 50px 48px 50px auto;
  font-size: 25px;
  font-weight: 400;
  background-color: #fff;
  border-image: none;
  border-color: #76b82a;
    background: #76b82a;
  color:#fff;
  border-radius: 100px;
  padding: 0.5rem 1rem;
}

.timeline__item--year:before {
  display: none;
}
@media screen and (min-width: 700px) {
  .timeline__item--year {
    text-align: center;
    margin: 0 auto;
  }
  .timeline__item--year:nth-of-type(2n) {
    float: none;
    margin: 0 auto;
    border-image: none;
  }
  .timeline__item--year:nth-of-type(2n):before {
    display: none;
  }
}

.timeline__title {

}

.timeline__blurb {
  line-height: 1.5;
  font-size: 1rem;
  margin: 0.5rem 0 0;
}