.roadmap{float:left;width:100%;margin-bottom:50px}
.vibrate-1{-webkit-animation:vibrate-1 0.3s linear infinite both;animation:vibrate-1 0.3s linear infinite both}
@-webkit-keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}
    20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}
    40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}
    60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}
    80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}
    100%{-webkit-transform:translate(0);transform:translate(0)}
}
@keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}
    20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}
    40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}
    60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}
    80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}
    100%{-webkit-transform:translate(0);transform:translate(0)}
}
.comingversion{width:40%;float:left;background:#5aadb8;color:white;position:relative;border-radius:7px;margin:10px;overflow:hidden;box-shadow:0px 0px 15px #5aadb8,inset 0px 0px 20px 10px #478891;text-align:center;padding:105px 0px}
.comingversion h4{font-weight:500;margin-bottom:0}
.comingversion h1{font-size:140px;font-weight:900;line-height:150px;position:relative;z-index:2}
.comingversion h1 span{font-size:123px;font-weight:600;}
.comingversion h3{margin:15px;font-size:18px;position:relative;z-index:2}
.comingversion p{font-size:15px;padding:10px 50px;position:relative;z-index:2}
.comingversion h4 {position: relative;    z-index: 2;}
.comingversion img{position:absolute;opacity:.10;height:80%;top:50%;left:50%;transform:translate(-50%,-50%)}
.roadmap-descriptions{float:right;width:55%;font-size: 15px;}
.roadmap .gen-page-con-title{margin-top:-15px;float:left;margin-bottom:25px;width:100%}
.roadmap .gen-page-con-title h2 strong{    font-size: 20px;}
.roadmap-descriptions li{padding:6px 0px}
.roadmap-descriptions ul{margin-top:5px;float:left}
.comingversion i{position:absolute;z-index:1;font-size:320px;bottom:-70px;right:-70px;color:#0000001a}
@-webkit-keyframes fadeEffect{from{opacity:0}
    to{opacity:1}
}
@keyframes fadeEffect{from{opacity:0}
    to{opacity:1}
}
.roadmap-content{float:left;width:100%;margin-top:60px}
.roadmap-type{float:left;margin-left:10px}
.roadmap-type h5{float:left;margin-right:25px;font-size:16px}
.roadmap-categories{float:right;width:200px;margin-right:10px;margin-top:-15px;margin-bottom:15px}
.roadmap-categories select{width:100%}
.roadmap-status{background:#607d8b;padding:6px 0px;border-radius:50px;color:white;font-weight:600}
.roadmap-status i{margin-right:5px;}
.roadmap-types {   float:left;}
.roadmap-cat {   float:right;}
.done{background:#8bc34a}
.progress{background:#e91e63}
.planned {    background: #2196f3;}
.roadmap-search{float:right;width:200px;margin-top:-13px}
.roadmap-search input{background:transparent;width:85%;font-size:14px}
.roadmap-search i{float:right;margin-top:-33px;margin-right:15px;color:#ccc}
.roadmap-progress{text-align:center;margin-top:50px}
.roadmap-progress h2{font-weight:700;margin-bottom:25px}
.progress-bar{height:50px;width:50%;background-color:#efefef;border-radius:100px;overflow:hidden;box-shadow:2px 0 10px inset rgb(0 0 0 / 20%);position:relative;margin:auto;box-shadow:0px 0px 10px #ececec}
.bar{width:0;height:100%;background-color:#5aadb8;background-image:linear-gradient( -45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent );background-size:30px 30px;border-radius:100px;animation:move 2s linear infinite;box-shadow:2px 0 10px inset rgba(0,0,0,0.2);transition:width 2s ease-out}
@keyframes move{0%{background-position:0 0}
    100%{background-position:30px 30px}
}
.perc{line-height:50px;top:50%;left:50%;font-size:22px;transform:translate(-50%,-50%);color:#fff;font-weight:bold}
div.angrytext{display:none;font-size:36px;position:absolute;margin-top:10px;right:30px;opacity:0.2;cursor:pointer;-webkit-animation:alert 3s linear 3s infinite normal;animation:alert 3s linear 3s infinite normal}
.shake{-webkit-animation-name:shake;animation-name:shake;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes shake{0%,100%{transform:translate3d(0,0,0)}
    10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}
    20%,40%,60%,80%{transform:translate3d(10px,0,0)}
}
@keyframes shake{0%,100%{transform:translate3d(0,0,0)}
    10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}
    20%,40%,60%,80%{transform:translate3d(10px,0,0)}
}
div.angrytext{-webkit-animation:alert 3s linear 3s infinite normal;animation:alert 3s linear 3s infinite normal}
@-webkit-keyframes alert{0%{transform:translateX(0)}
    5%{transform:translateX(-10px)}
    10%{transform:translateX(10px)}
    15%{transform:translateX(-10px)}
    20%{transform:translateX(10px)}
    25%{transform:translateX(-10px)}
    30%{transform:translateX(10px)}
    35%{transform:translateX(-10px)}
    40%{transform:translateX(10px)}
    45%{transform:translateX(-10px)}
    50%{transform:translateX(0)}
}
@keyframes alert{0%{transform:translateX(0)}
    5%{transform:translateX(-10px)}
    10%{transform:translateX(10px)}
    15%{transform:translateX(-10px)}
    20%{transform:translateX(10px)}
    25%{transform:translateX(-10px)}
    30%{transform:translateX(10px)}
    35%{transform:translateX(-10px)}
    40%{transform:translateX(10px)}
    45%{transform:translateX(-10px)}
    50%{transform:translateX(0)}
}
.roadmap-likes{float:left;margin-bottom:3px}
.roadmap-likes:hover i{transform:scale(1.3)}
.roadmap-likes span{margin-top:2px;display:inline-block}
.roadmap-likes a{font-size:16px;float:left;padding-right:10px;border-radius:3px}
.roadmap-likes i{-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out}
.roadmap-likes i:hover{transform:scale(1.3)}
.introducing-free-license-bg{background:rgb(215,222,230);background:-moz-linear-gradient(0deg,rgba(215,222,230,1) 0%,rgba(255,255,255,1) 100%);background:-webkit-linear-gradient( 0deg,rgba(215,222,230,1) 0%,rgba(255,255,255,1) 100%);background:linear-gradient( 0deg,rgba(215,222,230,1) 0%,rgba(255,255,255,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#d7dee6",endColorstr="#ffffff",GradientType=1);float:left;width:100%;text-align:center;padding-top:20px;padding-bottom:85px}
.roadmap-foot-block{display:inline-block;width:35%;text-align:center;margin:25px 80px}
.roadmap-foot-block i{font-size:80px}
.roadmap-foot-block h4{font-weight:700;font-size:25px;margin:15px 0px}
.roadmap-foot-block p{}
.roadmap-foot-block .yesilbtn{display:inline-block;width:240px}
.roadmap-item-id {    float: right;}
.roadmap-item-id span{font-weight:600;margin-right:5px}
.roadmap-item-title{font-size:15px;margin-bottom:5px;display:inline-block}
.scroll-area{border-radius:5px;overflow:hidden}
.roadmappagetitle h1{font-size:79px}
.sayfalama{    margin-top: 35px;}
.roadmap .gen-page-con-title h1{font-size:38px;}
.spinning-icon {-webkit-animation:fa-spin 2s infinite linear;animation: fa-spin 2s infinite linear;line-height: 0;}


/* New Style */

.roadmap-blocks{float:left;width:100%;text-align:center}
.roadmap-block{display:inline-block;width:32%;vertical-align:top;text-align:left;margin:6px;background:#f2f3f6;border-radius:3px;max-height:1000px;overflow:auto;font-size:14px;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out}
.roadmap-block:hover{box-shadow:0px 0px 5px #ececec}
.roadmap-block-title{float:left;width:100%;margin-bottom:18px}
.roadmap-block-title h1{font-size:20px;float:left;font-weight:600}
.roadmap-block-title i{margin-right:7px}
.roadmap-block ul{margin:0;padding:0}
.roadmap-block ul li{float:left;width: 100%;background:white;border-radius:5px;margin-bottom:15px;list-style:none;box-shadow: 0px 0px 5px #e6e7e9;}
.roadmap-block ul li h2{font-size:16px;font-weight:600;text-transform: capitalize;}
.roadmap-block ul li p{font-size:14px}
.roadmap-block-footer{opacity:.7}
.roadmap-block-footer strong{font-weight:600}
.roadmap-block-scroll{max-height:600px;    margin-bottom: 20px;overflow:auto;float:left;width:100%;padding-right:10px}
.roadmap-block-scroll::-webkit-scrollbar-track{border-radius:50px;background-color:rgb(0 0 0 / 0%)}
.roadmap-block-scroll::-webkit-scrollbar{border-radius:50px;width:9px;background-color:rgb(0 0 0 / 0.05)}
.roadmap-block-scroll::-webkit-scrollbar-thumb{border-radius:50px;background-color:rgb(0 0 0 / 0.08)}
.roadmap-block-scroll { scrollbar-color: #d4d5d7 #e6e7e9;  scrollbar-width: thin;}
.roadmap-no-record{text-align:center;margin:100px 0px;float:left;width:100%;opacity:.7;    margin-bottom: 150px;}
.roadmap-no-record h3{font-size:22px;margin:15px 0px;font-weight:600}
.roadmap-no-record i{font-size:52px}

@media only screen and (min-width:320px) and (max-width:1024px) {
    .roadmap{margin-top:-130px}
    .roadmappagetitle h1{font-size:50px}
    .roadmap .gen-page-con-title h2 strong{margin-bottom:25px;display:inline-block}
    .comingversion{width:100%;margin:0}
    .comingversion h3{font-size:16px}
    .roadmap-descriptions{width:100%;margin-top:35px;font-size:14px}
    .progress-bar{width:95%}
    .roadmap-type h5{font-size:15px;width:50%;margin:0}
    .roadmap-categories{width:100%;margin:0px;margin-bottom:15px;margin-top:5px}
    .roadmap-search{width:100%;float:left;margin-top:5px}
    .roadmap-content table{width:1000px;min-width:500px}
    .tabcontent{overflow-y:scroll;width:100%}
    div.angrytext{display:block}
    .roadmap-foot-block{width:100%;margin:25px 0px}
    .roadmap-progress{margin-top:30px}
    .genpagetitle h2{font-size:26px}
    .roadmap .gen-page-con-title h1{font-size:28px}
    .roadmap-type{margin-left:0px}
    .roadmap-block{margin:0;width:100%;margin-bottom:15px}
    .roadmap-search input{width:94%}
    .roadmap-cat {float: left;width: 100%;}
    .roadmap-descriptions ul {padding: 0px 30px;}
    .gen-page-gray-bg h4 {margin: 5px 15px;}

}