/* Timeline container */
.hncoder-timeline {
    position: relative;
    max-width: 1200px !important;
    margin: 0 auto;
  }
  
  /* The actual timeline (the vertical ruler) */
  .hncoder-timeline::after {
    content: "";
    position: absolute;
    width: 3px;
    background-color: #A28ED7;
    top: -15%;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px;

    height: 130%;
  }
  
  /* Container around content */
  .hncoder-container {
    position: relative;
    background-color: inherit;
    width: 40%;
  }
  
  /* The circles on the timeline 
  .hncoder-container::after {
        content: "";
        position: absolute;
        width: 15%;
        height: 3px;
        background-color: #A28ED7;
        top: 49%;
        z-index: 1;
       
   }
*/
   .hncoder-left::after {
    right: -25%
   }
   .hncoder-right::after {
    left: -25%
   }

  
  /* Place the container to the left */
  .hncoder-left {
    left: 0px;
  }
  
  /* Place the container to the right */
  .hncoder-right {
    left: 60%;
    margin-top: -7%;
    margin-bottom: -7%;
  }
  
  /* Add arrows to the left container (pointing right) 
  .hncoder-left::before {

    content: " ";
    height: 0;
    position: absolute;
    top: 46.6%;
    width: 0;
    z-index: 1;
    right: -10%;
    border: medium solid #A28ED7;
    border-width: 10px 10px 10px 0;
    border-color: transparent #A28ED7 transparent transparent;
  }
 */
 
/*
 .hncoder-left::before {
    content: "\2190";
    font-size: 249%;
    position: absolute;
    top: 48.1%;
    right: -13%;
    color: #A28ED7;
    width: 15px;
    overflow: hidden;
}
*/
  
  /* Add arrows to the right container (pointing left)  
  .hncoder-right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 46.7%;
    width: 0;
    z-index: 1;
    left: -10%;
    border: medium solid #A28ED7;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #A28ED7;
  }
*/
 
/*
  .hncoder-right::before {
    content: "\2192";
    font-size: 249%;
    position: absolute;
    top: 27.6%;
    left: -20%;
    color: #A28ED7;
    overflow: hidden;
}
*/
  
  /* The actual content */
    .hncoder-content {
        padding: 20px 25px;
        background-color: #5A31C41A;
        position: relative;
        border-radius: 15px;
        box-shadow: 0px 0px 5px #cfcfcfee;
    }


    .hncoder-content:hover {
  
        background-color: #fff;
        box-shadow: 0px 0px 10px #cfcfcfee;
        border: 1px solid #5A31C4;
    }


    .hncoder-arrow {
        /* height: 3px;
        width: 15%; 
        */
        position: absolute;
        top: 49%;
        /* background: #A28ED7; */
    }

    

    .hncoder-arrow#arrow-left {
        right: -25%;
    }
    .hncoder-arrow#arrow-right {
        left: -25%;
    }

    /*
    .hncoder-arrow#arrow-left:before {
        content: "\2190";
        font-size: 249%;
        position: absolute;
        color: #A28ED7;
        top: -39px;
        left: -5px;
    }
  
    .hncoder-arrow#arrow-right:before {
        content: "\2192";
        font-size: 249%;
        position: absolute;
        color: #A28ED7;
        top: -39px;
        right: -5px;
    }
    */

    .hncoder-timeline-number {
        margin: 0px;
        color: #ffff;
    }

    .hncoder-timeline-number span {
        background: #5A31C4;
        font-size: 100%;
        border-radius: 50px;
        height: 50px;
        width: 50px;
        display: block;
        text-align: center;
        line-height: 125%;
        position: relative;
    }

    .hncoder-timeline-number span:after {
        content: "";
        position: absolute;
        top: -5px;
        right: -8px;
        width: 65px;
        height: 60px;
        background-color: transparent;
        border-radius:50px;
        border-right: 3px solid #5A31C4;
    }

    .hn-timeline-title {
        margin: 10px 0px 0px 0px;
        font-size: 30px;
        font-weight: bold;
    }

    .hn-timeline-venue-text {
        margin: 0px 0px;
        font-size: 20px;
        font-weight: bold;
        color:#5A31C4;
    }


    /*
    .hncoder-timeline:before {
        content: "";
        height: 15%;
        position: absolute;
        width: 3px;
        background: #A28ED7;
        top: -15%;
        left: 49.9%;
    }

    */

    .hn-timeline-time{
        margin: 0px 0px;
    }
    
  /* Media queries - Responsive timeline on screens less than 600px wide */
  @media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .hncoder-timeline::after {
    left: 0px;
    }
    
    /* Full-width containers */
    .hncoder-container {
    width: 100%;
    padding-left: 5px;
    padding-right: 0px;
    }
    
    /* Make sure that all arrows are pointing leftwards */
    .hncoder-container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
    }
  
    /* Make sure all circles are at the same spot 
    .hncoder-left::after, .hncoder-right::after {
    left: 15px;
    }
    */
    /* Make all right containers behave like the left ones */
    .hncoder-right {
        left: 0%;
        margin-top: 5%;
        margin-bottom: 5%;
    }

    .hncoder-timeline::after {
    
        height: 100%;
        top:0px;
    }

    .hncoder-arrow{
        display:none;
    }

    h4.hncoder-timeline-number {
      font-size: 210%;
    }
  }