@charset "utf-8";
/* CSS Document */

.find-pasha{ width:100%; margin:0 auto; padding:40px 0; /*position:relative;*/ background-color:#253339 !important;
background: url(../images/banner-bg.svg) no-repeat center / cover;
background-color: rgba(0, 0, 0, 0);
background-position-x: center;
background-position-y: center;
background-attachment: scroll;
background-attachment: fixed;}
.find-pasha h2{ font-family: 'Roboto', sans-serif; font-size:36px; font-weight:700; text-align:center; color:#fff; line-height:42px; margin:0 0 25px 0;}

.roadmap{ width:100%; margin:0 auto; padding:40px 0; /*position:relative;*/ background-color:#253339 !important;
background: url(../images/banner-bg.svg) no-repeat center / cover;
background-color: rgba(0, 0, 0, 0);
background-position-x: center;
background-position-y: center;
background-attachment: scroll;
background-attachment: fixed;}
.roadmap h2{ font-family: 'Roboto', sans-serif; font-size:36px; font-weight:700; text-align:center; color:#fff; line-height:42px; margin:0 0 25px 0;}

.Rm-border-right:before{position: absolute; right:0px; top:61px; width: 3px; height:100%; content: ""; background: #ff6c37; z-index:1;}
.Rm-border-left:after{position: absolute; left:0px; top:61px; width: 3px; height:100%; content: ""; background: #08bcf0; z-index:1;}

.roadmap-box{position:relative; margin:0 auto; width:100%; height:100%; padding:20px 10px; }
.roadmap-box:before{position: absolute; left:0; top: 61px; width: 50%; height: 3px; content: ""; background: #ff6c37;}
.roadmap-box:after{position: absolute; right:0; top: 61px; width: 50%; height: 3px; content: ""; background: #08bcf0;}

.roadmap-box .date{text-transform: uppercase; font-size: 16px; line-height:16px; font-weight:bold; color:#34CCFF; text-align:center; 
font-family: 'Roboto', sans-serif;; position: relative; padding-bottom:30px; z-index:2;}

.roadmap-box .date:before{position: absolute; bottom: 0; left: 50%; border-radius: 50%; content: ""; margin-left: -13px; margin-bottom: -8px; 
height: 27px; width: 27px; background:#FF7847; }

.roadmap-box .date:after{position: absolute; bottom: 0; left: 50%; border-radius: 50%; content: ""; margin-left: -5px; height: 11px; width: 11px; background: #FFC1AA;}

.roadmap-box .title{margin-bottom: 4px; padding-top: 48px; position: relative; font-family: 'Roboto', sans-serif; font-size:20px; font-weight:bold; line-height:16px; font-weight:normal; color:#fff; text-align:center;}
.roadmap-box .title:before{position: absolute; top: 0; left: 50%; height: 40px; width: 0; content: ""; border-right: 1px dashed #9bdaf7;}

.roadmap-box .info{position:relative; margin:10px auto;}
.roadmap-box .info p{ font-family: 'Roboto', sans-serif; font-size:14px;  font-weight:normal; text-align:center; color:#a1ccdf; line-height:24px; 
margin-top:25px; position:relative;}
.roadmap-box .info p:before{position: absolute; left:50%; top: -10px; width: 20px; height: 2px; content: ""; background: #9bdaf7; margin-left: -13px;}



@media (max-width: 767px) {
.roadmap-box:before{position: absolute; left:0; top:-20px; width: 3px; height:100%; content: ""; background: #08bcf0; }
.roadmap-box:after{display:none!important;}

.roadmap-box .date{text-align:left; padding-left:30px; }
.roadmap-box .date:before{bottom: 0; left: 0;  margin-left: -21px;}
.roadmap-box .date:after{bottom: 0; left: 0; margin-left: -13px; }

.roadmap-box .title{text-align:left; padding-left:30px; padding-top:20px; }
.roadmap-box .title:before{position: absolute; top:-4px; left:-3px; height: 0; width: 40px; content: ""; border-right: none;
border-top: 1px dashed #666;}

.roadmap-box .info p{text-align:left; padding-left:30px; }
.roadmap-box .info p:before{position: absolute; left:13%; top: -10px; width: 20px; height: 2px; content: ""; background: #666; margin-left: -13px;}


.Rm-border-right:before{ display:none;}
.Rm-border-left:after{ display:none;}

}
