.anim-video-cont{
    position: absolute;
    right: -230px;
    top: -50px;
    z-index: 0;
    width: 580px;
    height: 580px;
}

.india-story-section1 h3{
    margin: 70px 0 0 0;
    max-width: 460px;
}

.india-story-section1 .line-anim{
    height: 105px;
    margin: 8px 25px 0;
}

.barchart-wrapper{
    margin-top: 125px;
    /* opacity: 0; */
}

.other-cancers{
    opacity: 0;
}

.bar-title{
    overflow: auto;
    margin-bottom: 35px;
}

.cancer-title{
    float: left;
    display: block;
    font-family: "OpenSans-Bold";
    font-size: 14px;
    line-height: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
}

.source-text{
    font-family: "OpenSans-Regular";
    font-size: 12px;
    line-height: normal;
    letter-spacing: normal;
    opacity: 0.7;
    display: block;
    opacity: 0;
    margin-top: 30px;
}

.usa-flag,
.india-flag{
    display: block;
    width: 50px; 
    height: 28px;
    float: left;
    font-family: "OpenSans-Semibold";
    font-size: 15px;
    line-height: normal;
    letter-spacing: normal;
    text-transform: uppercase;
    padding: 4px 0 0;
}

/* .usa-flag{
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIyNSIgdmlld0JveD0iMCAwIDM2IDI1Ij4KICAgIDxnIGZpbGw9Im5vbmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiNGMEYwRjAiIGQ9Ik0wIDAuMDIzSDM1LjkzVjIzLjk3NkgweiIvPgogICAgICAgIDxnIGZpbGw9IiNEODAwMjciPgogICAgICAgICAgICA8cGF0aCBkPSJNMCAuMDdIMzUuOTNWMy4wNjRIMHpNMCA2LjA1OEgzNS45M1Y5LjA1Mkgwek0wIDEyLjA0NkgzNS45M1YxNS4wNEgwek0wIDE4LjAzNUgzNS45M1YyMS4wMjlIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMi45NDcpIi8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIGZpbGw9IiMyRTUyQjIiIGQ9Ik0wIDAuMDIzSDE3Ljk2NVYxMi45MjFIMHoiLz4KICAgICAgICA8ZyBmaWxsPSIjRjBGMEYwIj4KICAgICAgICAgICAgPHBhdGggZD0iTTUuMTggMy4yNzJMNC44OTEgNC4xNjIgMy45NTUgNC4xNjIgNC43MTMgNC43MTIgNC40MjMgNS42MDIgNS4xOCA1LjA1MiA1LjkzNyA1LjYwMiA1LjY0OCA0LjcxMiA2LjQwNSA0LjE2MiA1LjQ2OSA0LjE2MnpNNS40NjkgNy4zNzRMNS4xOCA2LjQ4NCA0Ljg5MSA3LjM3NCAzLjk1NSA3LjM3NCA0LjcxMyA3LjkyNCA0LjQyMyA4LjgxNCA1LjE4IDguMjY0IDUuOTM3IDguODE0IDUuNjQ4IDcuOTI0IDYuNDA1IDcuMzc0ek0xLjUxNCA3LjM3NEwxLjIyNSA2LjQ4NC45MzYgNy4zNzQgMCA3LjM3NC43NTcgNy45MjQuNDY4IDguODE0IDEuMjI1IDguMjY0IDEuOTgyIDguODE0IDEuNjkzIDcuOTI0IDIuNDUgNy4zNzR6TTEuMjI1IDMuMjcyTC45MzYgNC4xNjIgMCA0LjE2Mi43NTcgNC43MTIuNDY4IDUuNjAyIDEuMjI1IDUuMDUyIDEuOTgyIDUuNjAyIDEuNjkzIDQuNzEyIDIuNDUgNC4xNjIgMS41MTQgNC4xNjJ6TTUuMTguMDZMNC44OTEuOTUgMy45NTUuOTUgNC43MTMgMS41IDQuNDIzIDIuMzkgNS4xOCAxLjg0IDUuOTM3IDIuMzkgNS42NDggMS41IDYuNDA1Ljk1IDUuNDY5Ljk1ek0xLjIyNS4wNkwuOTM2Ljk1IDAgLjk1Ljc1NyAxLjUuNDY4IDIuMzkgMS4yMjUgMS44NCAxLjk4MiAyLjM5IDEuNjkzIDEuNSAyLjQ1Ljk1IDEuNTE0Ljk1ek05LjEzNiAzLjI3Mkw4Ljg0NiA0LjE2MiA3LjkxMSA0LjE2MiA4LjY2OCA0LjcxMiA4LjM3OSA1LjYwMiA5LjEzNiA1LjA1MiA5Ljg5MyA1LjYwMiA5LjYwMyA0LjcxMiAxMC4zNiA0LjE2MiA5LjQyNSA0LjE2MnpNOS40MjUgNy4zNzRMOS4xMzYgNi40ODQgOC44NDYgNy4zNzQgNy45MTEgNy4zNzQgOC42NjggNy45MjQgOC4zNzkgOC44MTQgOS4xMzYgOC4yNjQgOS44OTMgOC44MTQgOS42MDMgNy45MjQgMTAuMzYgNy4zNzR6TTEzLjM4IDcuMzc0TDEzLjA5MSA2LjQ4NCAxMi44MDIgNy4zNzQgMTEuODY2IDcuMzc0IDEyLjYyMyA3LjkyNCAxMi4zMzQgOC44MTQgMTMuMDkxIDguMjY0IDEzLjg0OCA4LjgxNCAxMy41NTggNy45MjQgMTQuMzE2IDcuMzc0ek0xMy4wOTEgMy4yNzJMMTIuODAyIDQuMTYyIDExLjg2NiA0LjE2MiAxMi42MjMgNC43MTIgMTIuMzM0IDUuNjAyIDEzLjA5MSA1LjA1MiAxMy44NDggNS42MDIgMTMuNTU4IDQuNzEyIDE0LjMxNiA0LjE2MiAxMy4zOCA0LjE2MnpNOS4xMzYuMDZMOC44NDYuOTUgNy45MTEuOTUgOC42NjggMS41IDguMzc5IDIuMzkgOS4xMzYgMS44NCA5Ljg5MyAyLjM5IDkuNjAzIDEuNSAxMC4zNi45NSA5LjQyNS45NXpNMTMuMDkxLjA2TDEyLjgwMi45NSAxMS44NjYuOTUgMTIuNjIzIDEuNSAxMi4zMzQgMi4zOSAxMy4wOTEgMS44NCAxMy44NDggMi4zOSAxMy41NTggMS41IDE0LjMxNi45NSAxMy4zOC45NXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEuODI1IDIuMDM1KSIvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==");
    background-repeat: no-repeat;
    background-position-y: center;
}

.india-flag{
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDM2IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiNGMEYwRjAiIGQ9Ik0wIDAuMDI0SDM1LjkzVjIzLjk3N0gweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiNGRjk4MTEiIGQ9Ik0wIDAuMDI0SDM1LjkzVjguMDA4SDB6Ii8+CiAgICAgICAgPHBhdGggZmlsbD0iIzZEQTU0NCIgZD0iTTAgMTUuOTkySDM1LjkzVjIzLjk3NkgweiIvPgogICAgICAgIDxjaXJjbGUgY3g9IjE3Ljk2NSIgY3k9IjEyIiByPSIzLjA4IiBmaWxsPSIjMDA1MkI0Ii8+CiAgICAgICAgPGNpcmNsZSBjeD0iMTcuOTY1IiBjeT0iMTIiIHI9IjEuOTI1IiBmaWxsPSIjRjBGMEYwIi8+CiAgICAgICAgPHBhdGggZmlsbD0iIzAwNTJCNCIgZD0iTTE3Ljk2NSA5LjYyNEwxOC41NTkgMTAuOTcxIDIwLjAyMiAxMC44MTIgMTkuMTUzIDEyIDIwLjAyMiAxMy4xODggMTguNTU5IDEzLjAyOSAxNy45NjUgMTQuMzc2IDE3LjM3MSAxMy4wMjkgMTUuOTA3IDEzLjE4OCAxNi43NzcgMTIgMTUuOTA3IDEwLjgxMiAxNy4zNzEgMTAuOTcxeiIvPgogICAgPC9nPgo8L3N2Zz4K");
    background-repeat: no-repeat;
    background-position-y: center;
} */

.bar-cont{
    margin-bottom: 15px;
}

.bar-wrap{
    position: relative;
    height: 28px;
    /* max-width: calc(100% - 70px); */
    margin-left: 70px;
}

.blue-bar,
.red-bar{
    display: block;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    max-width: 100%;
}

.blue-bar{
    width: 100%;
    opacity: 0.2;
    background-color: #fff;
}

.red-bar{
    position: absolute;
    background-color: rgba(240, 92, 75, 0.48);
    width: 28.9%;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translate(0 , -50%);
}

.bar-cases{
    display: block;
    font-family: "OpenSans-Semibold";
    font-size: 15px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translate(0 , -50%);
}

.horizontal-line{
    margin: 40px 0;
    height: 1px;
    background-color:#3f9cf6;
    width: 100%;
    opacity: 0;
}

.cancer-name{
    font-family: "OpenSans-SemiBold";
    font-size: 15px;
    line-height: normal;
    letter-spacing: normal;
    margin: 35px 0 15px;
    opacity: 0;
}

.india-cases{
    right: -210px;
}

.other-cases-india{
    right: -190px;
}

.flag-wrap{
    float: left;
    width: 0;
    overflow: hidden;
}

.bar-cases{
    opacity: 0;
}

.all-cancers .india-bar .bar-wrap{
    width: 54%;
    max-width: 54%;
}

.all-cancers .india-bar .red-bar{
    width: 67%;
    max-width: 67%;
}

.leukemias-cancer .usa-bar .bar-wrap{
    width: 68%;
    max-width: 68%;
}

.leukemias-cancer .usa-bar .red-bar{
    max-width: 47%;
    width: 47%;
}

.leukemias-cancer .india-bar .bar-wrap{
    max-width: 57%;
    width: 57%;
}

.leukemias-cancer .india-bar .red-bar{
    max-width: 77%;
    width: 77%;
}

/* lymphoma */

.lymphoma-cancer .usa-bar .red-bar{
    max-width: 28%;
    width: 28%;
}

.lymphoma-cancer .india-bar .bar-wrap{
    max-width: 35%;
    width: 35%;
}

.lymphoma-cancer .india-bar .red-bar{
    max-width: 83%;
    width: 83%;
}

/* myeloma */

.myeloma-cancer .usa-bar .bar-wrap{
    max-width: 33%;
    width: 33%;
}

.myeloma-cancer .usa-bar .red-bar{
    max-width: 52%;
    width: 52%;
}

.myeloma-cancer .india-bar .bar-wrap{
    max-width: 17%;
    width: 17%;
}

.myeloma-cancer .india-bar .red-bar{
    max-width: 76%;
    width: 76%;
}

@media(min-width: 992px) and (max-width: 1366px){
    .india-story-section1 h3{
        margin: 45px 0 0 0;
        max-width: 400px;
    }

    .india-story-section1 .line-anim {
        height: 65px;
    } 

    .bar-cases{
        font-size: 12px;
    }
}

@media(min-width: 992px) and (max-width: 1280px){
    .barchart-wrapper{
        margin-top: 80px;
    }

    .anim-video-cont{
        right: -200px;
    }
}

@media(max-width: 991px){

    .global-section1{
        top: 80px;
    }

    .india-story-section1{
        margin-top: 160px;
    }

    .anim-video-cont {
        width: 350px;
        height: 350px;
        right: -90px;
        top: -38px;
        z-index: 0;
    }

    .india-story-section1 h3{
        margin: 35px 0 0 !important;
    }

    .india-story-section1 .line-anim{
        height: 80px;
    }

    .barchart-wrapper{
        margin-top: 40px;
    }

    .cancer-title{
        margin-bottom: 0;
    }

    .bar-title{
        margin-bottom: 15px;
    }

    .flag-wrap{
        width: 100%;
        float: none;
    }

    .bar-wrap{
        float: none;
        width: 100%;
        margin: 8px 0 20px;
        height: 36px;
    }

    .bar-cases{
        font-size: 12px;
        line-height: 1.17;
        text-align: right;
    }

    .india-cases,
    .other-cases-india{
        right: -120px;
        text-align: left;
    }

    .bar-case-mob{
        width: 80px;
        right: -10px;
    }

    .usa-bar .bar-case-mob{
        width: 60px;
        right: 10px;
    }

    .horizontal-line{
        margin: 30px 0;
    }

    .leukemias-cancer .cancer-name{
        margin: 25px 0 15px;
    }

    .source-text{
        margin-bottom: 20px;
    }
}

@media(min-width: 768px) and (max-width: 991px){
    .anim-video-cont{
        top: -200px;
    }

    .india-story-section1 h3{
        margin: -10px 0 0 !important;
    }

    .global-section1{
        top: 100px;
    }
}
