/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    #infographic :not(:nth-child(even)) .circle {
        transform: translateX(0) !important;
        margin: auto !important;
    }
    #infographic .circle {
        width: 320px;
        height: 320px;
        border-radius: 50%;
        border: 2px solid currentColor;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 40px;
        position: revert !important;
        left: 50%;
        margin: auto;
    }
    #infographic article {
        max-width: 352px;
        margin: 40px !important;
        cursor: pointer;
        left: 50%;
        position: revert !important;
    }
    #infographic :nth-child(even) article header i {
        margin: -16px -20px -16px 0;
      }
      #infographic article[data-step="1"] {
        margin-left: 0px;
      }
      #infographic article[data-step="2"] {
        margin-left: 0px;
      }
      #infographic article[data-step="3"] {
        margin-left: 0px;
      }
      #infographic article[data-step="4"] {
        margin-left: 0;
      }
      #infographic article[data-step="5"] {
        margin-left: 0px;
      }
      #infographic article[data-step="6"] {
        margin-left:  0px;
      }
      #infographic article[data-step="7"] {
        margin-left:  0px;
      }
      #infographic article[data-step="8"] {
        margin-left:  0px;
      }
      #infographic article[data-step="9"] {
        margin-left: 0;
      }
      #infographic article[data-step="10"] {
        margin-left: 0px;
      }
      #infographic article[data-step="11"] {
        margin-left: 0px;
      }
      #infographic article[data-step="12"] {
        margin-left:  0px;
      }
      #infographic article[data-step="13"] {
        margin-left: 0px;
      }
      #infographic article[data-step="14"] {
        margin-left: 0px;
      }
      #infographic article[data-step="15"] {
        margin-left:  0px;
      }
      #infographic article[data-step="16"] {
        margin-left: 0px;
      }
      #infographic :nth-child(even) article {
        text-align: right;
        transform: translateX(0%);
        margin: auto;
    }
    swiper-slide {
        flex-shrink: 0;
        width: 70% !IMPORTANT;
        height: 100%;
        position: relative;
        transition-property: transform;
        display: block;
    }
    .footer .col-md-4{
        margin: 20px 0px !important;
    }
    .footer .col-md-4.text-right{
        text-align: left !important;
    }
    .pie-chart-data.tx-rt .progress {
        background: transparent;
        flex-direction: revert;
    }.text-right {
        text-align: left!important;
    }
    .how-it-works .d-flex.justify-content-around{
        display: block !important;
    } 
    .token-rate {
        border-radius: 20px;
        background-color: rgb(255, 255, 255);
        box-shadow: 1.089px 1.677px 28.48px 3.52px rgba(14, 47, 68, 0.25);
        display: flex;
        width: 100%;
        height: 100px;
        color: #000;
        margin: 20px 0px;
    }
    .token-img img {
        position: relative;
        left: -31px;
        width: 75px;
        margin: auto;
    }
    .acceptable-coins img {
        margin-left: 0px;
        width: 50px;
    }
    .cus-card{
        width: 100%;
        margin: 40px 0px;
    }
    h1.text-uppercase {
        font-size: 35px;
    }
    .about-us h2{
        margin-bottom: 20px !important;
    }
    .about-us{
        text-align: center;
    }
    .token-sale-2 {
        margin-top: 20px;
        color: #fff;
    }
    .token-sale-2 p {
        font-size: 15px; 
    }
}  


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { 
    #infographic :not(:nth-child(even)) .circle {
        transform: translateX(0);
        margin: auto;
    }
    #infographic .circle {
        width: 320px;
        height: 320px;
        border-radius: 50%;
        border: 2px solid currentColor;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 40px;
        position: revert;
        left: 50%;
        margin: auto;
    } 
    #infographic article {
        max-width: 352px;
        margin: 40px !important;
        cursor: pointer;
        left: 50%;
        position: revert !important;
    }
    #infographic :nth-child(even) article header i {
        margin: -16px -20px -16px 0;
      }
      #infographic article[data-step="1"] {
        margin-left: 0px;
      }
      #infographic article[data-step="2"] {
        margin-left: 0px;
      }
      #infographic article[data-step="3"] {
        margin-left: 0px;
      }
      #infographic article[data-step="4"] {
        margin-left: 0;
      }
      #infographic article[data-step="5"] {
        margin-left: 0px;
      }
      #infographic article[data-step="6"] {
        margin-left:  0px;
      }
      #infographic article[data-step="7"] {
        margin-left:  0px;
      }
      #infographic article[data-step="8"] {
        margin-left:  0px;
      }
      #infographic article[data-step="9"] {
        margin-left: 0;
      }
      #infographic article[data-step="10"] {
        margin-left: 0px;
      }
      #infographic article[data-step="11"] {
        margin-left: 0px;
      }
      #infographic article[data-step="12"] {
        margin-left:  0px;
      }
      #infographic article[data-step="13"] {
        margin-left: 0px;
      }
      #infographic article[data-step="14"] {
        margin-left: 0px;
      }
      #infographic article[data-step="15"] {
        margin-left:  0px;
      }
      #infographic article[data-step="16"] {
        margin-left: 0px;
      }
      #infographic :nth-child(even) article {
        text-align: right;
        transform: translateX(0%);
        margin: auto;
    }
    swiper-slide {
        flex-shrink: 0;
        width: 70% !IMPORTANT;
        height: 100%;
        position: relative;
        transition-property: transform;
        display: block;
    }
    .footer .col-md-4{
        margin: 20px 0px !important;
    }
    .footer .col-md-4.text-right{
        text-align: left !important;
    }
    .pie-chart-data.tx-rt .progress {
        background: transparent;
        flex-direction: revert;
    }.text-right {
        text-align: left!important;
    }
    .how-it-works .d-flex.justify-content-around{
        display: block !important;
    }
    .token-rate {
        border-radius: 20px;
        background-color: rgb(255, 255, 255);
        box-shadow: 1.089px 1.677px 28.48px 3.52px rgba(14, 47, 68, 0.25);
        display: flex;
        width: 100%;
        height: 100px;
        color: #000; 
        margin: 20px 0px;
    }
    .token-img img {
        position: relative;
        left: -31px;
        width: 75px;
        margin: auto;
    }
    .acceptable-coins img {
        margin-left: 0px;
        width: 50px;
    }
    h1.text-uppercase {
        font-size: 35px;
    }
    .about-us{
        text-align: center;
    }
    .about-us h2{
        margin-bottom: 20px !important;
    }
    .token-sale-2 {
        margin-top: 20px;
        color: #fff;
    }
    .token-sale-2 p {
        font-size: 15px;
        margin: auto 0px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .cus-card {
        border-radius: 20px;
        background-color: rgb(255, 255, 255);
        box-shadow: 1.089px 1.677px 28.48px 3.52px rgba(14, 47, 68, 0.25);
        width: 100%;
        height: 383px;
        text-align: center;
        padding: 20px;
    }
    .token-content {
        margin-left: 0px !important;
        text-align: left;
    }
    .token-img img {
        position: revert;
        left: -65px;
        width: 75px;
        margin: auto;
    }
    .token-rate {
        border-radius: 20px;
        background-color: rgb(255, 255, 255);
        box-shadow: 1.089px 1.677px 28.48px 3.52px rgba(14, 47, 68, 0.25);
        display: flex;
        width: 281px;
        height: 130px;
        margin: 0px 10px;
        color: #000;
    }
    #infographic :not(:nth-child(even)) .circle {
        transform: translateX(0);
        margin: auto;
    }
    #infographic .circle {
        width: 320px;
        height: 320px;
        border-radius: 50%;
        border: 2px solid currentColor;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 40px;
        position: revert;
        left: 50%;
        margin: auto;
    } 
    #infographic article {
        max-width: 352px;
        margin: 40px !important;
        cursor: pointer;
        left: 50%;
        position: revert !important;
    }
    #infographic :nth-child(even) article header i {
        margin: -16px -20px -16px 0;
      }
      #infographic article[data-step="1"] {
        margin-left: 0px;
      }
      #infographic article[data-step="2"] {
        margin-left: 0px;
      }
      #infographic article[data-step="3"] {
        margin-left: 0px;
      }
      #infographic article[data-step="4"] {
        margin-left: 0;
      }
      #infographic article[data-step="5"] {
        margin-left: 0px;
      }
      #infographic article[data-step="6"] {
        margin-left:  0px;
      }
      #infographic article[data-step="7"] {
        margin-left:  0px;
      }
      #infographic article[data-step="8"] {
        margin-left:  0px;
      }
      #infographic article[data-step="9"] {
        margin-left: 0;
      }
      #infographic article[data-step="10"] {
        margin-left: 0px;
      }
      #infographic article[data-step="11"] {
        margin-left: 0px;
      }
      #infographic article[data-step="12"] {
        margin-left:  0px;
      }
      #infographic article[data-step="13"] {
        margin-left: 0px;
      }
      #infographic article[data-step="14"] {
        margin-left: 0px;
      }
      #infographic article[data-step="15"] {
        margin-left:  0px;
      }
      #infographic article[data-step="16"] {
        margin-left: 0px;
      }
      #infographic :nth-child(even) article {
        text-align: right;
        transform: translateX(0%);
        margin: auto;
    }
    swiper-slide {
        flex-shrink: 0;
        width: 40% !IMPORTANT;
        height: 100%;
        position: relative;
        transition-property: transform;
        display: block;
    }
}

/* Large devices (desktops, 992px and up) */
@media  (max-width: 1199.98px) {}


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }