/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1320px) {
    .menu > li { margin-right: 18px; }
    .nav-bar .module { padding: 0 20px 0 10px; }
}


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    .menu > li { margin-right: 8px; }
    #snm nav.bg-dark .menu > li > a { font-size: 12px; } 
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

    /*Disable Animation on Mobile Devices*/
    .animated {
        /*CSS transitions*/
        -o-transition-property: none !important;
        -moz-transition-property: none !important;
        -ms-transition-property: none !important;
        -webkit-transition-property: none !important;
        transition-property: none !important;
        /*CSS transforms*/
        -o-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -webkit-transform: none !important;
        transform: none !important;
        /*CSS animations*/
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
    }

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}
@media (min-width: 992px) {
    .roadmap__box .pt:after,
    .roadmap__box .pt:before {
        content: '';
        background: rgba(255, 255, 255, .5)
    }
    .roadmap__name.n_1 {
        top: 39.2%
    }
    .roadmap__name.n_2 {
        top: 44.7%
    }
    .roadmap__name.n_3 {
        top: 50.5%
    }
    .roadmap__name.n_4 {
        top: 56%
    }
    .roadmap__name.n_5 {
        top: 61.7%
    }
    .roadmap__box .pt:hover {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2)
    }
    .roadmap__box .pt:before {
        width: 5px;
        height: 5px;
        border-radius: 100%;
        position: absolute;
        left: .5px;
        top: 7px
    }
    .roadmap__box .pt:after {
        width: 1px;
        height: 100%;
        position: absolute;
        left: 2.5px;
        top: 12px
    }
    .roadmap__box .pt_13 .circle:before,
    .roadmap__box .pt_9 .circle:before {
        content: '';
        position: absolute;
        width: 1px;
        height: 25px;
        background: rgba(255, 255, 255, .51);
        right: 4px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg)
    }
    .roadmap__box .pt_1 {
        top: 2%;
        left: 19.8%;
        max-width: 145px;
        padding-bottom: 18px
    }
    .roadmap__box .pt_1 .circle {
        top: 68px;
        left: -34px
    }
    .roadmap__box .pt_2 {
        top: 12.8%;
        left: 35%;
        padding-top: 28px;
        max-width: 100px
    }
    .roadmap__box .pt_2 .circle {
        top: -75px
    }
    .roadmap__box .pt_3 {
        top: -3.8%;
        left: 50.2%;
        max-width: 135px;
        padding-bottom: 18px
    }
    .roadmap__box .pt_3 .circle {
        top: 74px
    }
    .roadmap__box .pt_4 {
        top: 7.6%;
        left: 65.7%;
        padding-top: 25px
    }
    .roadmap__box .pt_4 .circle {
        top: -75px
    }
    .roadmap__box .pt_5 {
        top: 19.4%;
        left: 19.8%;
        max-width: 140px;
        padding-bottom: 14px;
        min-height: 95px
    }
    .roadmap__box .pt_5 .circle {
        top: 106px
    }
    .roadmap__box .pt_6 {
        top: 33.4%;
        left: 35%;
        max-width: 120px;
        padding-top: 32px
    }
    .roadmap__box .pt_6 .circle {
        top: -71px
    }
    .roadmap__box .pt_7 {
        top: 15.8%;
        left: 50.3%;
        max-width: 135px;
        padding-bottom: 19px;
        min-height: 82px
    }
    .roadmap__box .pt_7 .circle {
        top: 92px
    }
    .roadmap__box .pt_8 {
        top: 28.4%;
        left: 65.5%;
        max-width: 130px;
        padding-top: 32px
    }
    .roadmap__box .pt_8 .circle {
        top: -72px
    }
    .roadmap__box .pt_9 {
        top: 40.8%;
        left: 23%;
        max-width: 135px;
        padding-bottom: 13px;
        min-height: 80px
    }
    .roadmap__box .pt_9 .circle {
        top: 100px;
        left: -76px
    }
    .roadmap__box .pt_9 .circle:before {
        top: -12px
    }
    .roadmap__box .pt_10 {
        top: 54.6%;
        left: 35%;
        max-width: 95px;
        padding-top: 31px
    }
    .roadmap__box .pt_10 .circle {
        top: -72px
    }
    .roadmap__box .pt_11 {
        top: 37.8%;
        left: 50.2%;
        max-width: 140px;
        padding-bottom: 21px
    }
    .roadmap__box .pt_11 .circle {
        top: 81px
    }
    .roadmap__box .pt_12 {
        top: 49.5%;
        left: 65.5%;
        max-width: 115px;
        padding-top: 32px
    }
    .roadmap__box .pt_12 .circle {
        top: -72px
    }
    .roadmap__box .pt_13 {
        top: 60.2%;
        left: 23.4%;
        max-width: 132px;
        padding-bottom: 5px;
        min-height: 100px
    }
    .roadmap__box .pt_13 .circle {
        bottom: -92px;
        left: -76px
    }
    .roadmap__box .pt_13 .circle:before {
        top: -9px
    }
    .roadmap__box .pt_14 {
        top: 75.8%;
        left: 35%;
        max-width: 155px;
        padding-top: 31px
    }
    .roadmap__box .pt_14 .circle {
        top: -77px
    }
    .roadmap__box .pt_15 {
        top: 57.5%;
        left: 50.4%;
        max-width: 135px;
        padding-bottom: 15px;
        min-height: 82px
    }
    .roadmap__box .pt_15 .circle {
        top: 91px
    }
    .roadmap__box .pt_16 {
        top: 70.6%;
        left: 65.6%;
        max-width: 145px;
        padding-top: 30px
    }
    .roadmap__box .pt_16 .circle {
        top: -69px
    }
    .roadmap__box .pt_17 {
        top: 53.8%;
        left: 80.7%;
        max-width: 138px;
        padding-bottom: 19px
    }
    .roadmap__box .pt_17 .circle {
        top: 80px
    }
    .roadmap__box .pt_18 {
        top: 65.6%;
        left: 96%;
        max-width: 140px;
        padding-top: 31px
    }
    .roadmap__box .pt_18 .circle {
        top: -75px
    }
    .roadmap__box .pt_19 {
        top: 84.9%;
        left: 19.8%;
        max-width: 140px;
        padding-bottom: 18px
    }
    .roadmap__box .pt_19 .circle {
        top: 80px
    }
    .roadmap__box .pt_20 {
        top: 96.7%;
        left: 35%;
        max-width: 120px;
        padding-top: 32px
    }
    .roadmap__box .pt_20 .circle {
        top: -74px
    }
    .roadmap__box .pt_21 {
        top: 80%;
        left: 50.3%;
        max-width: 135px;
        padding-bottom: 18px;
        min-height: 67px
    }
    .roadmap__box .pt_21 .circle {
        top: 77px
    }
    .roadmap__box .pt_22 {
        top: 91.4%;
        left: 65.5%;
        max-width: 130px;
        padding-top: 32px
    }
    .roadmap__box .pt_22 .circle {
        top: -72px
    }
    .roadmap__box .pt_23 {
        top: 74.8%;
        left: 80.7%;
        max-width: 165px;
        padding-bottom: 19px;
        min-height: 67px
    }
    .roadmap__box .pt_23 .circle {
        top: 80px
    }
    .fb-page,
    .fb-page iframe[style],
    .fb-page span {
        width: 100%!important
    }
}
@media (max-width: 1400px) {
    .roadmap__wrap {
        width: 90%;
        margin-left: 23px
    }
    .roadmap__box .pt {
        min-height: 45px
    }
    .roadmap__box .pt_9 {
        max-width: 130px
    }
    .roadmap__box .pt_13 {
        top: 59.2%;
        max-width: 120px
    }
}
@media (max-width: 1250px) {
    .roadmap__desc {
        font-size: 10px
    }
    .roadmap__box .pt {
        max-width: 120px
    }
    .roadmap__box .pt.btm {
        padding-top: 20px
    }
    .roadmap__box .pt.btm:before {
        top: 25px
    }
    .roadmap__box .pt.btm:after {
        height: 25px
    }
    .roadmap__box .pt_5 {
        max-width: 124px
    }
    .roadmap__box .pt_9,
    .roadmap__name {
        max-width: 100px
    }
    .roadmap__box .pt_9 .circle:before {
        top: -47px
    }
    .roadmap__box .pt_13 {
        top: 60.2%;
        max-width: 100px
    }
    .roadmap__box .pt_13 .circle:before {
        top: -8px;
        height: 17px;
        right: 2px
    }
    .roadmap__name {
        font-size: 9px;
        left: 13px
    }
}

@media (max-width: 991px) {
    .hide_991 {
        display: none
    }
    .show_991 {
        display: block
    }

    .roadmap__wrap {
        width: 606px;
        margin: 100px auto
    }
    .roadmap__box .pt {
        max-width: 78px;
        padding: 0
    }
    .roadmap__box .pt_1 {
        top: 21%;
        left: 77%
    }
    .roadmap__box .pt_2 {
        top: 35.4%;
        left: 77%
    }
    .roadmap__box .pt_3 {
        top: 52.4%;
        left: 77%
    }
    .roadmap__box .pt_4 {
        top: 66.7%;
        left: 77%
    }
    .roadmap__box .pt_5 {
        top: 27%;
        left: 77%
    }
    .roadmap__box .pt_6 {
        top: 35.2%;
        left: 55.2%
    }
    .roadmap__box .pt_7 {
        top: 52.4%;
        left: 55.2%
    }
    .roadmap__box .pt_8 {
        left: 55.2%;
        top: 66.6%
    }
    .roadmap__box .pt_9 {
        left: 55.2%;
        top: 21.2%
    }
    .roadmap__box .pt_10 {
        left: 55.2%;
        top: 40.9%
    }
    .roadmap__box .pt_11 {
        left: 34.2%;
        top: 52.3%
    }
    .roadmap__box .pt_12 {
        left: 55.2%;
        top: 72.3%
    }
    .roadmap__box .pt_13 {
        left: 34.2%;
        top: 21.3%
    }
    .roadmap__box .pt_14 {
        left: 34.2%;
        top: 35.2%
    }
    .roadmap__box .pt_15 {
        left: 34.2%;
        top: 58.4%
    }
    .roadmap__box .pt_16 {
        left: 34.2%;
        top: 66.6%
    }
    .roadmap__box .pt_17 {
        left: 34.2%;
        top: 83.6%
    }
    .roadmap__box .pt_18 {
        left: 13%;
        top: 97.7%
    }
    .roadmap__box .pt_19 {
        left: 12%;
        top: 21.3%
    }
    .roadmap__box .pt_20 {
        left: 12%;
        top: 35.2%
    }
    .roadmap__box .pt_21 {
        left: 12%;
        top: 52.3%
    }
    .roadmap__box .pt_22 {
        left: 12%;
        top: 66.6%
    }
    .roadmap__box .pt_23 {
        left: 12%;
        top: 83.6%
    }
    .roadmap__name {
        top: 10px;
        transform-origin: left;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg)
    }
    .roadmap__name.n_1 {
        left: 74.5%
    }
    .roadmap__name.n_2 {
        left: 63.8%
    }
    .roadmap__name.n_3 {
        left: 53%
    }
    .roadmap__name.n_4 {
        left: 42.5%
    }
    .roadmap__name.n_5 {
        left: 32%
    }
}
@media (max-width: 630px) {
    .show_630 {
        display: block
    }
    .roadmap__wrap {
        width: 290px;
        margin: 35px auto 60px
    }
    .roadmap__base.show_991 {
        display: none
    }
    .roadmap__name.n_1 {
        left: 83.2%
    }
    .roadmap__name.n_2 {
        left: 68.8%
    }
    .roadmap__name.n_3 {
        left: 55%
    }
    .roadmap__name.n_4 {
        left: 40.7%
    }
    .roadmap__name.n_5 {
        left: 26.5%
    }
    .roadmap__box .pt_1,
    .roadmap__box .pt_1 .circle,
    .roadmap__box .pt_2,
    .roadmap__box .pt_2 .circle,
    .roadmap__box .pt_3,
    .roadmap__box .pt_4,
    .roadmap__box .pt_4 .circle {
        left: inherit;
        right: 0
    }
    .roadmap__box .pt {
        max-width: 185px;
        min-height: 0;
        z-index: 1
    }
    .roadmap__box .pt .circle {
        display: block;
        width: 50px;
        height: 50px;
        top: -58px
    }
    .roadmap__box .pt .circle:hover+.roadmap__desc {
        pointer-events: all;
        opacity: 1;
        visibility: visible
    }
    .roadmap__box .pt.btm {
        padding-top: 0
    }
    .roadmap__box .pt_1 {
        top: 24.4%
    }
    .roadmap__box .pt_2 {
        top: 39.2%
    }
    .roadmap__box .pt_3 {
        top: 54%
    }
    .roadmap__box .pt_3 .circle {
        top: -53px;
        right: 0;
        left: inherit
    }
    .roadmap__box .pt_4 {
        top: 69.5%
    }
    .roadmap__box .pt_5 {
        top: 24.4%;
        left: 38%
    }
    .roadmap__box .pt_5 .circle {
        top: -56px;
        right: 0;
        left: inherit
    }
    .roadmap__box .pt_6 {
        top: 39.2%;
        left: 38%
    }
    .roadmap__box .pt_6 .circle {
        top: -56px;
        right: 0;
        left: inherit
    }
    .roadmap__box .pt_7 {
        top: 54%;
        left: 38%
    }
    .roadmap__box .pt_7 .circle {
        top: -56px;
        right: 0;
        left: inherit
    }
    .roadmap__box .pt_8 {
        top: 69.5%;
        left: 38%
    }
    .roadmap__box .pt_8 .circle {
        right: 0;
        left: inherit
    }
    .roadmap__box .pt_9 {
        top: 24.4%;
        left: 19%
    }
    .roadmap__box .pt_9 .circle {
        top: -56px;
        left: 65px
    }
    .roadmap__box .pt_10 {
        top: 39.2%;
        left: 19%
    }
    .roadmap__box .pt_10 .circle {
        top: -56px;
        left: 65px
    }
    .roadmap__box .pt_11 {
        top: 54%;
        left: 19%
    }
    .roadmap__box .pt_11 .circle {
        top: -56px;
        left: 65px
    }
    .roadmap__box .pt_12 {
        top: 69.5%;
        left: 19%
    }
    .roadmap__box .pt_12 .circle {
        left: 65px
    }
    .roadmap__box .pt_13 {
        top: 24.4%;
        left: -2%
    }
    .roadmap__box .pt_13 .circle {
        left: 65px
    }
    .roadmap__box .pt_14 {
        top: 39.2%;
        left: -2%
    }
    .roadmap__box .pt_14 .circle {
        top: -58px;
        left: 65px
    }
    .roadmap__box .pt_15 {
        top: 54%;
        left: -2%
    }
    .roadmap__box .pt_15 .circle {
        left: 65px
    }
    .roadmap__box .pt_16 {
        top: 69.5%;
        left: -2%
    }
    .roadmap__box .pt_16 .circle {
        left: 65px
    }
    .roadmap__box .pt_17 {
        top: 84.5%;
        left: -2%
    }
    .roadmap__box .pt_17 .circle {
        top: -58px;
        left: 65px
    }
    .roadmap__box .pt_18 {
        top: 99.5%;
        left: -2%
    }
    .roadmap__box .pt_18 .circle {
        left: 65px
    }
    .roadmap__box .pt_19 {
        top: 24.4%;
        left: 0
    }
    .roadmap__box .pt_19 .circle {
        left: 0
    }
    .roadmap__box .pt_20 {
        top: 39.2%;
        left: 0
    }
    .roadmap__box .pt_20 .circle {
        left: 0
    }
    .roadmap__box .pt_21 {
        top: 54%;
        left: 0
    }
    .roadmap__box .pt_21 .circle {
        left: 0
    }
    .roadmap__box .pt_22 {
        top: 69.5%;
        left: 0
    }
    .roadmap__box .pt_22 .circle {
        left: 0
    }
    .roadmap__box .pt_23 {
        top: 84.5%;
        left: 0
    }
    .roadmap__box .pt_23 .circle {
        left: 0
    }
    .roadmap__desc {
        background: rgba(10, 34, 57, .74);
        width: 185px;
        padding: 10px 15px;
        border-radius: 5px;
        border: 1px solid #656b76;
        pointer-events: none;
        word-break: normal;
        opacity: 0;
        visibility: hidden
    }
}

@media only screen and (max-width: 1650px) {
    .module {
        padding: 0 50px;
    }
}

@media only screen and (max-width: 1550px) {
    .module {
        padding: 0 20px;
    }
}

@media only screen and (max-width: 1420px) {
    .menu > li {
        margin-right: 15px;
    }
}

@media only screen and (max-width: 1300px) {
    .menu > li {
        margin-right: 10px;
    }

    #snm nav.bg-dark .menu > li > a {
        font-size: 13px;
    }
}

@media (max-width: 1200px) {

    /*.nav-bar .module-group .module {
        display: block;
        float: none;
        width: 100%;
    }

    .nav-bar,
    .nav-bar .module-group,
    .nav-bar .module {
        height: auto;
        overflow: hidden;
    }

    .nav-bar .module-group {
        width: 100%;
        padding: 16px 0;
    }

    .menu > li {
        line-height: 24px;
        float: none;
        display: block;
        width: 100%;
        max-width: 100%;
    }*/
}