@charset "UTF-8";
/* CSS Document */
@media screen and (max-width:1199px) and (min-width: 992px) {
@keyframes imageScale {
        0%{background-size: 150% auto;background-position: 50% 50%;}
        50%{background-size: 180% auto;background-position: 70% 50%;}
        100%{background-size: 150% auto;background-position: 50% 50%;}
    }
.inner-bar:after,
    .inner-bar:before {
    width: 940px;
    
    }
    .header h1 {
        font-size: 72px;
    }
    .timeline-inner h3 {
        font-size: 20px;
    }
    .timeline-inner .year {
        font-size: 30px;
    }
    .timeline-inner .b1 {
        width: 29%;
        padding-left: 23px;
    }
    .timeline-inner .b2 {
        width: 29%;
        padding-left: 23px;
    }
    .timeline-inner .b3 {
        width: 40%;
        padding-left: 77px;
    }
    .timeline-inner .b4 {
        width: 40%;
        padding-left: 77px;
    }
    .timeline-inner .b5 {
        width: 30%;
        padding-left: 34px;
    }
    .timeline-inner .b6 {
        width: 30%;
        padding-left: 34px;
    }
    .timeline-inner p {
        font-size: 16px;
    }
    .d1 > .triangle {
        left: 53px;
    } 
    .d2 > .triangle {
        left: 226px;
    } 
    .d3 > .triangle {
        left: 399px;
    }
    .d4 > .triangle {
        left: 571px;
    }
    .d5 > .triangle {
        left: 744px;
    }
    .d6 > .triangle {
        left: 917px;
    }
    .dials {
        top: -310px;
    }
    .quote p {
        font-size: 24px;
    }
    .quote p span {
        font-size: 100px;
    }
    .exp-inner h2 {
        font-size: 30px;
    }
    .exp-inner p {
        font-size: 20px;
    }
    .exp-inner ul li {
        font-size: 16px;
    }
    .resume-header-inner h1 a {
        font-size: 72px;
        line-height: 58px;
    }
    .resume-header-inner h2, .commercial-inner h2, .academic-inner h2, .summary-inner h2, .freelance-inner h2 {
        font-size: 30px;
    }
    .jobs h3, .jobs p, .jobs ul li, .resume-header-inner .right-side p strong, .resume-header-inner .right-side p, .summary-inner p {
        font-size: 16px;
    }
}
@media screen and (max-width:991px) {
    .resume-header-inner .right-side h3 {
    font-size: 12px;
    }
}
@media screen and (max-width:991px) and (min-width: 768px) {
@keyframes imageScale {
        0%{background-size: 200% auto;background-position: 50% 50%;}
        50%{background-size: 250% auto;background-position: 70% 50%;}
        100%{background-size: 200% auto;background-position: 50% 50%;}
    }
.inner-bar:after,
    .inner-bar:before {
    width: 720px;
    
    }
    .header {
        height: 150px;
    }
    .header h1 {
        font-size: 54px;
    }
    .timeline-inner, .timeline {
        height: 500px;
    }
    .timeline-inner h3 {
        font-size: 16px;
    }
    .timeline-inner .year {
        font-size: 24px;
    }
    .timeline-inner .b1 {
        width: 29%;
        padding-left: 11px;
    }
    .timeline-inner .b2 {
        width: 29%;
        padding-left: 11px;
    }
    .timeline-inner .b3 {
        width: 40%;
        padding-left: 53px;
    }
    .timeline-inner .b4 {
        width: 40%;
        padding-left: 53px;
    }
    .timeline-inner .b5 {
        width: 30%;
        padding-left: 20px;
    }
    .timeline-inner .b6 {
        width: 30%;
        padding-left: 20px;
    }
    .timeline-inner p {
        font-size: 12px;
    }
    .timeline-inner .top {
        margin-bottom: 40px;
    }
    .d1 > .triangle {
        left: 41px;
    } 
    .d2 > .triangle {
        left: 175px;
    } 
    .d3 > .triangle {
        left: 308px;
    }
    .d4 > .triangle {
        left: 442px;
    }
    .d5 > .triangle {
        left: 575px;
    }
    .d6 > .triangle {
        left: 709px;
    }
    .dials {
        top: -285px;
    }
    .dials > .dots {
        font-size: 6px;
        padding: 0 3px;
    }
    .dotsuppermid {
        margin-top: 18px;
        margin-bottom: 0px;
    }
    .dotsuppertop {
        margin-top: 30px;
        margin-bottom: 0px;
    }
    .dotslowermid {
        margin-top: 0px;
        margin-bottom: 18px;
    }
    .dotslowertop {
        margin-top: 0px;
        margin-bottom: 30px;
    }
    /*.dials > .dots.bottom > .fas:nth-of-type(2), .dials > .dots.bottom > .fas:nth-of-type(4) {
        margin-bottom: 20px;
    }
    .dials > .dots.bottom > .fas:nth-of-type(3) {
        margin-bottom: 30px;
    }
    .dials > .dots.top> .fas:nth-of-type(2), .dials > .dots.top > .fas:nth-of-type(4) {
        margin-top: 20px;
    }
    .dials > .dots.top > .fas:nth-of-type(3) {
        margin-top: 30px;
    }*/
    .quote {
        height: 150px;
    }
    .quote p {
        font-size: 20px;
    }
    .quote p span {
        font-size: 60px;
    }
    .experience {
        height: 480px;
    }
    .exp-inner h2 {
        font-size: 24px;
    }
    .exp-inner p {
        font-size: 20px;
    }
    .exp-inner ul li {
        font-size: 12px;
    }
    #apps ul li .freq-box span {
        width: 10px!important;
        height: 10px!important;
        border: 1px solid #2f3a3f!important;
        margin-left: -1px!important;
    }
    .resume-header-inner h1 a {
        font-size: 54px;
        line-height: 44px;
    }
    .resume-header-inner h2, .commercial-inner h2, .academic-inner h2, .summary-inner h2, .freelance-inner h2 {
        font-size: 24px;
    }
    .resume-header-inner .right-side p {
        margin-bottom: 10px;
        line-height: 18px;
    }
    .jobs h3, .jobs p, .jobs ul li, .resume-header-inner .right-side p strong, .resume-header-inner .right-side p, .summary-inner p {
        font-size: 12px;
    }
    .jobs ul li, .summary-inner p {
        line-height: 18px;
    }
    
}

@media screen and (max-width:767px) {
@keyframes imageScale {
        0%{background-size: 1000% auto;background-position: 50% 50%;}
        50%{background-size: 1100% auto;background-position: 60% 60%;}
        100%{background-size: 1000% auto;background-position: 50% 50%;}
    }
.inner-bar:after, .inner-bar:before, .inner-bar {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
body, p, a, ul, li {
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 0.5px;
}
.bar .container {
    width: 90%;
}
    .header {
        height: 150px;
    }
    .header h1 {
        font-size: 44px;
    }
    .header h1 .header-tag {
        font-size: 18px;
    }
    .timeline {
        height: auto;
        padding: 20px 0;
    }
    .timeline .container {
        width: 320px;
    }
    .timeline-inner {
        height: auto;
        display:block;
        width: 70%;
        float: right;
        padding-left: 10px;
    }
    .timeline-inner h3 {
        font-size: 12px;
    }
    .timeline-inner .year {
        font-size: 20px;
    }
    .timeline-inner .b1 {
        padding-left: 0px;
        margin-top: 20px;
        width: 100%;
        float: none;
    }
    .timeline-inner .b2 {
        padding-left: 0px;
        margin-top: 54px;
        width: 100%;
        float: none;
    }
    .timeline-inner .b3 {
        padding-left: 0px;
        margin-top: 54px;
        width: 100%;
        float: none;
    }
    .timeline-inner .b4 {
        padding-left: 0px;
        margin-top: 54px;
        width: 100%;
        float: none;
    }
    .timeline-inner .b5 {
        padding-left: 0px;
        margin-top: 54px;
        width: 100%;
        float: none;
    }
    .timeline-inner .b6 {
        padding-left: 0px;
        margin-top: 54px;
        width: 100%;
        float: none;
    }
    .timeline-inner p {
        font-size: 12px;
        font-family: 'Open Sans Condensed', sans-serif;
    }
    .timeline-inner .top, .timeline-inner .bottom {
        margin-bottom: 20px;
    }
    .dials {
        height: auto;
        flex-direction: column;
        flex-wrap: initial;
        top: auto;
        display: block;
    }
    .dials > div {
        float: left;
        clear: left;
    }
    .d1 > .triangle {
        left: 0px;
    } 
    .d2 > .triangle {
        left: 0px;
        top: 155px;
    } 
    .d3 > .triangle {
        left: 0px;
        top: 295px;
    }
    .d4 > .triangle {
        left: 0px;
        top: 435px;
    }
    .d5 > .triangle {
        left: 0px;
        top: 575px;
    }
    .d6 > .triangle {
        left: 0px;
        top: 715px;
    }
    .dials {
        top: auto;
        margin-top:22px;
        margin-left: 40px;
        float: left;
    }
    .dial-icon > .triangle {
        transition: transform 0s;
    }
    .dials > .dots {
        font-size: 6px;
        padding: 0 3px;
        flex-direction: column;
    }
    .dials > .dots.bottom > .fas:nth-of-type(1), .dials > .dots.top> .fas:nth-of-type(1) {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .dials > .dots.bottom > .fas:nth-of-type(2), .dials > .dots.bottom > .fas:nth-of-type(4) {
        margin-bottom: 5px;
    }
    .dials > .dots.bottom > .fas:nth-of-type(3) {
        margin-bottom: 5px;
    }
    .dials > .dots.top> .fas:nth-of-type(2), .dials > .dots.top > .fas:nth-of-type(4) {
        margin-top: 5px;
    }
    .dials > .dots.top > .fas:nth-of-type(3) {
        margin-top: 5px;
    }
    .dials > .dots.bottom > .fas:nth-of-type(5) {
        margin-bottom: 5px;
    }
    .dials > .dots.top > .fas:nth-of-type(5) {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .dials > .dots.top > .fas:nth-of-type(1) {
        margin-bottom: 0px;
    }
    .dials > .dots.top> .fas, .dials > .dots.bottom > .fas {
        transition: none;
    }
    
    .quote {
        height: 150px;
    }
    .quote p {
        font-size: 16px;
    }
    .quote p span {
        font-size: 60px;
    }
    .experience {
        height: auto;
        display: block;
        padding: 20px;
        margin: 0 auto;
    }
    .exp-inner h2 {
        font-size: 24px;
    }
    .exp-inner p {
        font-size: 20px;
    }
    .exp-inner ul li {
        font-size: 12px;
    }
    .exp-inner {
        display: block;
        width: 100%;
        justify-content: initial;
        margin-right: 0px;
        margin-left: 0px;
    }
    .exp-inner .exp-col {
        width: 100%;
        float: none;
        padding: 20px;
        margin-bottom: 20px;
    }
    #apps ul li .freq-box span {
        width: 10px!important;
        height: 10px!important;
        border: 1px solid #2f3a3f!important;
        margin-left: -1px!important;
    }
    .resume-header-inner {
        display: block;
        justify-content: initial;
    }
    .resume-header-inner .left-side, .resume-header-inner .right-side {
        width: 100%;
    }
    .resume-header-inner h1 a {
        font-size: 44px;
        line-height: 44px;
    }
    .resume-header-inner h2, .commercial-inner h2, .academic-inner h2, .summary-inner h2, .freelance-inner h2 {
        font-size: 24px;
    }
    .resume-header-inner .right-side p {
        margin-bottom: 10px;
        line-height: 18px;
    }
    .jobs h3, .jobs p, .jobs ul li, .resume-header-inner .right-side p strong, .resume-header-inner .right-side p, .summary-inner p {
        font-size: 12px;
    }
    .jobs ul li, .summary-inner p {
        line-height: 18px;
    }
    .quote p span:last-of-type {
        padding-right: 4px;
    }
    .quote p span {
        font-family: 'Open Sans Condensed', sans-serif;
    }
    .commercial-inner #fid, .academic-inner #inst-record, .freelance-inner #dodh  {
        margin-bottom: 30px;
    }
    
}
@media screen and (max-width:767px) and (min-width:650px) {
    .inner-bar:after,
    .inner-bar:before, .inner-bar {
    width: 555px;
    
    }    
}
@media screen and (max-width:649px) and (min-width:500px) {
    .inner-bar:after,
    .inner-bar:before, .inner-bar {
    width: 400px;
    
    }    
}
@media screen and (max-width:499px) and (min-width:400px) {
    .inner-bar:after,
    .inner-bar:before, .inner-bar {
    width: 330px;
    
    }    
}
@media screen and (max-width:399px) and (min-width:320px) {
    .inner-bar:after,
    .inner-bar:before, .inner-bar {
    width: 250px;
    
    }    
}