.col2-container     { display:flex; align-items: flex-start; }
    .col2-col-l         { width:30%; margin-right:50px; }
    .col2-col-r         { width:70% }

    .year-blk           { padding-bottom:50px; border-bottom:1px solid #ececec; margin-bottom:50px }
	.ar .year-blk 		{ direction: rtl; }
    .year-blk h5        { color:rgba(0, 46, 109, 1); font-size:16px; margin:0 0 20px 0 }

    ul.ms               { margin:0; padding:0 }
    ul.ms li            { margin:0; padding:15px 20px; width:100%; list-style:none; background-color: rgba(154, 202, 235, 0.4); border-bottom:1px solid #fff; cursor:pointer;}
    ul.ms li:hover      { background-color: rgba(154, 202, 235, 0.6); }
    ul.ms li.ms-current { background:rgba(154, 202, 235, 1) url(images/pattern-polygon-seablue30.svg) ; background-position:right top; background-repeat:no-repeat; background-size:45%; cursor:default; }
    ul.ms li.ms-current:before { content : ""; position:absolute; left:0; bottom:0; height:3px; width:80%; border-bottom:3px solid rgba(0, 46, 109, 1); }
    ul.ms li:after { content : ""; position: absolute; display: none; background: none; transition: 0s; }
	ul.ms li.ms-current:after { display:inline-block; width:25px; height:25px; right:15px; position:absolute; content: ""; 
                                               background: url(images/icon-arrow-right-seablue.svg) no-repeat 0 0;
                                          background-size: contain;
                                      background-position: bottom;
                                       transition: all 0.3s ease-out; }
 
    ul.ms li:before  { display:inline-block; width:25px; height:25px; right:15px; position:absolute; content: ""; 
                                               background: url(images/icon-arrow-right-seablue.svg) no-repeat 0 0;
                                          background-size: contain;
                                      background-position: bottom;
                                       transition: all 0.3s ease-out; }

    .basic-1        { 
		background: linear-gradient(#fff 0 0) 0 100% /var(--d, 0) 3px no-repeat; 
		transition: all 0.5s;
	}
	
    .basic-1:hover  { --d: 100%;}

    .milestones-dd-items { display:none; background-color: #fff; padding-top: 20px; }
	
		
	html {
		scroll-behavior: smooth;
	}
	#body .general ul a.st-menu-link{
		color: #333;
		text-decoration: none;
	}
	.sticky-menu{
		position: sticky;
		top: 65px;
		z-index: 3;
	}
	.year-link{
		top: -65px;
		position: relative;
	}
	.year-blk:last-child {
		min-height: calc(100vh - 310px - 65px);
	}

    /* ==========================================================================
        Media Style
    ============================================================================= */
    @media only screen and (max-width:1100px) {
    .col2-col-l         { width:25%}
    .col2-col-r         { width:75% }
    ul.ms li.ms-current { background-size:60%}
	.sticky-menu{
		top: 70px;
	}
	.year-link{
		top: -70px;
	}
    }

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    .col2-col-l         { width:25%; margin-right:30px;}
    .col2-col-r         { width:75% }
    ul.ms li            { padding:10px 15px }
    ul.ms li.ms-current:after, ul.ms li:before { right:10px; width:15px; height:15px; padding-top:7px;  }
    }

    @media only screen and (max-width:767px) {
    .col2-container     { display:block; }

    .col2-col-l         { width:100%; margin-right:0}
    .col2-col-r         { width:100% }   
    ul.ms                { display:none; }     
    #body .milestones-dd-items { display:block; margin-bottom:50px; }
	.sticky-menu{
		top: 60px;
	}
	.year-link{
		top: -130px;
	}
    }