.box{
    margin:0 10%;
    /* height: 630px; */
    /* overflow: hidden; */
    /* display: flex; */
    padding: 40px 0;
}

.box ul{
    list-style-type: none;
    margin-top: 20px;
    /* padding: 0; */
    position: relative;
    transition: all 0.5s linear;
    top:0
}

/* .box ul:last-of-type{top:80px} */

.box ul::before{

    content: "";
    display: block;
    width: 0;
    height: 100%;
    border:1px dashed hsl(213, 81%, 90%);
    position: absolute;
    top:0;
}
.rsm_timeline ul:before{
    left:100px
}
.rsm_cert ul:before{
    /* content: "";
    display: block;
    width: 0;
    height: 100%;
    border:1px dashed hsl(213, 81%, 90%);
    position: absolute;
    top:0; */
    left:5%
}

.box ul li{
    position: relative;
    padding: 10px 20px;
    background-color: #edf5ff;
    /* background:rgba(255, 255, 255, 0.3); */
    color:black;
    border-radius: 10px;
    line-height: 20px;
    /* width: 35% */
}

.rsm_timeline{
    /* width: 70%; */
}
.rsm_timeline ul{
    padding-left: 50px;
}
.rsm_timeline ul li{
    margin: 10px 0px 60px 60px;
}


.rsm_timeline ul li > span{
    content: "";
    display: block;
    width: 0;
    height: 100%;
    border:1px solid hsl(213, 81%, 90%);
    position: absolute;
    top:0;
    left:-10px
}

.rsm_timeline ul li > span:before,.rsm_timeline ul li > span:after{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:hsl(222, 100%, 75%);
    border:2px solid hsl(222, 100%, 75%);
    position: absolute;
    left:-7.5px
}

.rsm_timeline ul li > span:before{top:-10px}
.rsm_timeline ul li > span:after{top:95%}

.rsm_div{
    margin-bottom: 30px;
}
.rsm_cert ul li{
    display: flex;
    margin: 15px 0;
    font-weight: 700;
}    
.rsm_title{
    border-bottom: 1px solid hsl(213, 81%, 90%);
    font-weight: 900;
    font-size: 20px;
    margin-bottom: 10px;
}
.cert_date{   
    margin-left: auto;
    right: auto;
    font-size: 12px;
    font-weight: 500;
}
.td{
    display: flex;
    margin: 10px 0;
    align-items: center;
}
.box .timeline_title{
    text-transform: uppercase;
    font-weight: 800;
    font-size: 16px;
    /* margin-bottom: 10px */
}

.box .info:first-letter{text-transform: capitalize;line-height: 1.7}
.info{
    font-size: 14px;
}

.box .name{
    margin-top: 10px;
    text-transform: capitalize;
    font-style: italic;
    text-align: right;
    margin-right: 20px
}


.box .time span{
    position: absolute;
    left: -110px;
    color: black;
    /* font-size:80%; */
    font-weight: bold;
}
.box .time span:first-child{top:-12px}
/* .box .time span:last-child{top:94%} */


.arrow{
    position: absolute;
    top: 105%;
    left: 22%;
    cursor: pointer;
  height:20px;
  width:20px
}

.arrow:hover{
    -webkit-animation: arrow 1s linear infinite;
       -moz-animation: arrow 1s linear infinite;
         -o-animation: arrow 1s linear infinite;
            animation: arrow 1s linear infinite;
}

.box ul:last-of-type .arrow{
    position: absolute;
    top: 105%;
    left: 22%;
    transform: rotateX(180deg);
    cursor: pointer;
}

.date{
    font-size: 14px;
    font-weight: 600;
    padding-left: 70px;

}
.timeline_intro {
    margin-top: 5px;
    line-height: 1.5;
}
.timeline_intro table td{
    height: 15px;
}
.rsm_cert{
    width: 25%;
}
.rsm_award{
    margin-left: auto;
    width: 65%;
}
.cert{
    margin-bottom: 20px;
}

svg{
    width: 20px;
    height: 20px
}

@keyframes arrow{
    0%,100%{
        top:105%
    }
    50%{
        top:106%
    }
}

@-webkit-keyframes arrow{
    0%,100%{
        top:105%
    }
    50%{
        top:106%
    }
}

@-moz-keyframes arrow{
    0%,100%{
        top:105%
    }
    50%{
        top:106%
    }
}

@-o-keyframes arrow{
    0%,100%{
        top:105%
    }
    50%{
        top:106%
    }
}