/* =============================================================================
* mod_newslist timeline
* ========================================================================== */

.newslist-timeline {
   overflow: hidden;
   position: relative;
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4NnB4IiBoZWlnaHQ9IjEwMDBweCIgdmlld0JveD0iMCAwIDg2IDEwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDg2IDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IHg9IjQwLjk4NCIgZmlsbD0iI0Y2RjZGNiIgd2lkdGg9IjQuMDMxIiBoZWlnaHQ9IjUuODY2Ii8+PHJlY3QgeD0iNDAuOTg0IiB5PSIzMS4wOTYiIGZpbGw9IiNGNkY2RjYiIHdpZHRoPSI0LjAzMSIgaGVpZ2h0PSI5NjguOTA0Ii8+PHJlY3QgeD0iNTYuMDg1IiB5PSIxNS45MzUiIGZpbGw9IiNGNkY2RjYiIHdpZHRoPSIyOS45MTciIGhlaWdodD0iNC4wMzEiLz48L3N2Zz4=);
   background-position: 90px top;
   background-repeat: no-repeat;
   padding-bottom: 80px;
}

.newslist-timeline .newslist-timeline-date {
   position: absolute;
   left: 0;
   top: 0px;
   background: rgb(245,245,245);
   padding: 5px 10px;
}

.newslist-timeline .newslist-timeline-contentwrapper {
   padding-left: 200px;
   padding-bottom: 40px;
}

.newslist-timeline .image_container {
   width: 37%;
   float: left;
}

.newslist-timeline .newslist-timeline-content {
   width: 63%;
   float: left;
   padding-left: 5%;
}

.newslist-timeline:before {
   content: '';
   width: 7px;
   height: 7px;
   border: 4px solid var(--accentColor);
   border-radius: 100%;
   position: absolute;
   top: 10px;
   left: 126px;
   display: block;
   z-index: 1;
}

.newslist-timeline .info {
   color: rgb(168,168,168);
   margin-bottom: 20px;
}

.newslist-timeline .info i {
   margin-right: 5px;
}

.newslist-timeline .info div {
   display: inline-block;
   margin-right: 20px;
}

.newslist-timeline {
   transition: All 0.3s ease;
   -webkit-transition: All 0.3s ease;
}

.newslist-timeline:hover {
   opacity: 0.9;
}

/* =============================================================================
* smart phones  (s / small screens)
* ========================================================================== */
@media only screen and (max-width: 767px) {
   .newslist-timeline {
      background: none;
   }
   
   .newslist-timeline:before {
      display: none;
   }
   
   .newslist-timeline .h4,
   .newslist-timeline h4 {
      margin-top: 0;
   }
   
   .newslist-timeline .newslist-timeline-date {
      position: static;
      margin-bottom: 10px;
      display: block;
   }
   
   .newslist-timeline .newslist-timeline-contentwrapper {
      padding-left: 0;
   }
}