@charset "UTF-8";
/*bg color = #2f3a3f */
/* orange= #2ee881 */
/* mid pink = #2dd58d */
/* pink = #2caea7 */
/* purple = #2b93b9 */
/* violet = #2a81c5 */
/* blue = #2e84e5 */

/* Global */
.screen-hide {
    display:none;
}
.strip {
    display: block;
}
body {
    background:#fff;
}
body, p, a, ul, li {
    font-family: 'Open Sans Condensed', sans-serif;
    margin:0px;
    letter-spacing: 1px;
}
h1, h2, h3, h4, h5 {
    font-family: 'Open Sans', sans-serif;
    margin: 0px;
}
/* Color Bars */
    .bar {
        background: #2f3a3f;
        height: 40px;
        display: flex;
        justify-content:center;
        align-items:center;
    }
    :root {
    --overlay-color-1: #2e84e5;
    --overlay-color-2: #2ee881;
    --overlay-color-3: rgba(46,232,129,0);
    --overlay-color-4: rgba(46,132,229,0);
    --anim-duration: 6s;
    }
    .inner-bar {
        width:100%;
        height: 10px;
        box-shadow: 0px 5px 8px rgba(0,0,0,0.3);
        background: #2ee881;
        background: -webkit-linear-gradient(left, #2e84e5 0%, #2caea7 50%, #2ee881 100%);
        background: linear-gradient(to right, #2e84e5 0%, #2caea7 50%, #2ee881 100%);
        background: -webkit-linear-gradient(left, #2e84e5 0%, #2caea7 50%, #2ee881 100%);
        background: -ms-linear-gradient(to right, #2e84e5 0%, #2caea7 50%, #2ee881 100%);
    }
    .inner-bar:after,
    .inner-bar:before {
    content: '';
    display: block;
    position: absolute;
    width: 1140px;
    height: 10px;
    
    }

    .inner-bar:before {
    background: linear-gradient(to right, var(--overlay-color-4) 0%, var(--overlay-color-1) 100%);
    animation-name: colorFade;
    animation-duration: var(--anim-duration);
    animation-timing-function: linear;
    animation-delay: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    }

    .inner-bar:after {
    background: linear-gradient(to right, var(--overlay-color-2) 0%, var(--overlay-color-3) 100%);
    animation-name: colorFade;
    animation-duration: var(--anim-duration);
    animation-timing-function: linear;
    animation-delay: calc(-1 * var(--anim-duration));
    animation-iteration-count: infinite;
    animation-direction: alternate;
    }

@keyframes colorFade {
    0%{opacity: 1.0}
    100%{opacity: 0.0}
}

/* Header */
    .header {
        height: 230px;
        padding: 30px 0;
        display: flex;
        justify-content:center;
        align-items:center;
        transition: transform 1s;
    }
    .header h1 {
        font-size: 84px;
        font-weight:700;
        text-align: center;
        text-transform: uppercase;
    }
    .header h1 .header-tag {
        font-size: 24px;
        font-weight: 400;
        margin-top:10px;
    }
    .header h1 span.header-txt:first-of-type {
        color: #808080; 
    }
    .header h1 span.header-txt:nth-of-type(2) {
        color: #808080; 
    }
    .header h1 span.header-txt:nth-of-type(3) {
        color: #808080; 
    }

/* Timeline */
    .timeline {
        height: 550px;
        background: #2f3a3f; 
        background: -webkit-linear-gradient(left, #252d31 0%, #2f3a3f 100%);
        background: linear-gradient(to right, #252d31 0%, #2f3a3f 100%);
        background: -webkit-linear-gradient(left, #252d31 0%, #2f3a3f 100%);
        background: -ms-linear-gradient(to right, #252d31 0%, #2f3a3f 100%);
        background-image: url(../img/resume-bg-texture.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        clear: both;
        color: #fff;
        animation-name:imageScale;
        animation-duration:60s;
        animation-iteration-count: infinite;
        overflow-y:hidden;
    }
    @keyframes imageScale {
        0%{background-size: 120% auto;background-position: 50% 50%;}
        50%{background-size: 150% auto;background-position: 70% 50%;}
        100%{background-size: 120% auto;background-position: 50% 50%;}
    }
    .timeline a {
        color: #fff;
        transition: all 1s ease;
    }
    .timeline a:hover, .timeline a:focus {
        opacity: 0.8;
        text-decoration: none;
    }
    .timeline-inner {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        z-index:2;
        height: 550px;
        align-items:center;
        margin-top:-3px;
        transition: transform 1s;
    }
    .timeline-inner .year {
        font-weight: 600;
        font-size: 36px;
    }
    .timeline-inner h3 {
        font-size: 24px;
        font-weight: 600;
        margin-bottom:5px;
        margin-top: 5px;
    } 
    .timeline-inner h3 span {
        font-size:14px;
        font-family: 'Open Sans Condensed', sans-serif;
        font-weight: 300;
        font-style: italic;
    }
    .timeline-inner .top {
        margin-bottom: 80px;
    }
    .timeline-inner p {
        font-size: 18px;
    }
    .timeline-inner .top a p, .timeline-inner .bottom a p, .timeline-inner .top a h3, .timeline-inner .bottom a h3 {
        transition: text-shadow 1s ease;
    }
    .timeline-inner .top a:hover p, .timeline-inner .top a:focus p, .timeline-inner .bottom a:hover p, .timeline-inner .bottom a:focus p, .timeline-inner .top a:hover h3, .timeline-inner .top a:focus h3, .timeline-inner .bottom a:hover h3, .timeline-inner .bottom a:focus h3 {
        text-shadow: 0px 2px 3px rgba(0,0,0,0.6);
    }
    /* job 1 */
    
    .timeline-inner .b1 {
        order: 0;
        width:29%;
        padding-left: 33px;
        float:left;
    }
    .b1 .year {
        color: #2e84e5;
    }
    /* job 2 */
    
    .timeline-inner .b2 {
        order: 3;
        width:29%;
        padding-left: 33px;
    }
    .b2 .year {
        color: #2a81c5;
    }
    
    /* job 3 */
    
    .timeline-inner .b3 {
        order: 1;
        width: 40%;
        padding-left: 111px;
    }
    .b3 .year {
        color: #2b93b9;
    }
    
    /* job 4 */
    
    .timeline-inner .b4 {
        order: 4;
        width: 40%;
        padding-left: 111px;
    }
    .b4 .year {
        color: #2caea7;
    }
    
    /* job 5 */
    
    .timeline-inner .b5 {
        order: 2;
        width:30%;
        padding-left: 59px;
    }
    .b5 .year {
        color: #2dd58d;
    }
    
    /* job 6 */
    
    .timeline-inner .b6 {
        order: 5;
        width:30%;
        padding-left: 59px;
    }
    .b6 .year {
        color: #2ee881;
    }
    .dials {
        display: flex;
        flex-direction: row;
        z-index:1;
        top:-310px;
        position: relative;
        transition: transform 1s;
    }
    .dials > div {
        float: left;
        display: flex;
    }
    .dials > .dial-icon {
        width: 11%;
        display: flex;
        justify-content:center;
    }
    .dials > .dial-icon > .fas {
        
    }
    .dials > .dial-icon > .inner > .icon {
        transition: box-shadow 1s ease;
    }
    .dials > .dial-icon > .inner > .icon:hover, .dials > .dial-icon > .inner > .icon:focus {
        box-shadow: 0px 5px 8px rgba(0,0,0,0.5);
        
    }
    
    /* dial 1 */
    
    .d1 > .inner {
        background: #2e84e5;
        border-radius: 50%;
        box-shadow: 0px 5px 8px rgba(0,0,0,0.3);
        padding: 10px;
        width: 80px;
        height: 80px;
        display: flex;
        align-items:center;
        justify-content:center;
        z-index: 2;
    }
    .d1 > .inner > .icon {
        background: #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items:center;
        justify-content: center;
    }
    .d1 > .inner > .icon > a > .fas {
        color: #2e84e5;
        font-size: 34px;
    }
    
    /* dial 2 */
    
    .d2 > .inner {
        background: #2a81c5;
        border-radius: 50%;
        box-shadow: 0px 5px 8px rgba(0,0,0,0.3);
        padding: 10px;
        width: 80px;
        height: 80px;
        display: flex;
        align-items:center;
        justify-content:center;
        z-index: 2;
    }
    .d2 > .inner >  .icon {
        background: #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items:center;
        justify-content: center;
    }
    .d2 > .inner > .icon > a > .fas {
        color: #2a81c5;
        font-size: 34px;
    }
    
    /* dial 3 */
    
    .d3 > .inner {
        background: #2b93b9;
        border-radius: 50%;
        box-shadow: 0px 5px 8px rgba(0,0,0,0.3);
        padding: 10px;
        width: 80px;
        height: 80px;
        display: flex;
        align-items:center;
        justify-content:center;
        z-index: 2;
    }
    .d3 > .inner > .icon {
        background: #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items:center;
        justify-content: center;
    }
    .d3 > .inner > .icon > a > .fas {
        color: #2b93b9;
        font-size: 34px;
    }
    
    /* dial 4 */
    
    .d4 > .inner {
        background: #2caea7;
        border-radius: 50%;
        box-shadow: 0px 5px 8px rgba(0,0,0,0.3);
        padding: 10px;
        width: 80px;
        height: 80px;
        display: flex;
        align-items:center;
        justify-content:center;
        z-index: 2;
    }
    .d4 > .inner > .icon {
        background: #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items:center;
        justify-content: center;
    }
    .d4 > .inner > .icon > a > .fas {
        color: #2caea7;
        font-size: 34px;
    }
    
    /* dial 5 */
    
    .d5 > .inner {
        background: #2dd58d;
        border-radius: 50%;
        box-shadow: 0px 5px 8px rgba(0,0,0,0.3);
        padding: 10px;
        width: 80px;
        height: 80px;
        display: flex;
        align-items:center;
        justify-content:center;
        z-index: 2;
    }
    .d5 > .inner > .icon {
        background: #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items:center;
        justify-content: center;
    }
    .d5 > .inner > .icon > a > .fas {
        color: #2dd58d;
        font-size: 34px;
    }
    
    /* dial 6 */
    
    .d6 > .inner {
        background: #2ee881;
        border-radius: 50%;
        box-shadow: 0px 5px 8px rgba(0,0,0,0.3);
        padding: 10px;
        width: 80px;
        height: 80px;
        display: flex;
        align-items:center;
        justify-content:center;
        z-index: 2;
    }
    .d6 > .inner > .icon {
        background: #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items:center;
        justify-content: center;
    }
    .d6 > .inner > .icon > a > .fas {
        color: #2ee881;
        font-size: 34px;
    }
    
    /* dial triangles */
    
    .dial-icon > .triangle {
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        position: absolute;
        top: 15px;
        z-index: 1;
        transition: transform 2s ease;
        transform: rotate(0deg);
        transform-origin: 0% 0%;
    }
    .d2 > .triangle, .d4 > .triangle, .d6 > .triangle {
        /*transform: rotate(90deg);
        transform-origin: 0% 50%;*/
    }
    .d1 > .triangle {
        border-left: 60px solid #2e84e5;
        left:65px;
    }
    .d2 > .triangle {
        border-left: 60px solid #2a81c5;
        left:273px;
    }
    .d3 > .triangle {
        border-left: 60px solid #2b93b9;
        left:481px;
    }
    .d4 > .triangle {
        border-left: 60px solid #2caea7;
        left:689px;
    }
    .d5 > .triangle {
        border-left: 60px solid #2dd58d;
        left:897px;
    }
    .d6 > .triangle {
        border-left: 60px solid #2ee881;
        left:1105px;
    }
    .rotate-top {
        transform: rotate(-90deg)!important;
        transform-origin: 0% 50%!important;
    }
    .rotate-bottom {
        transform: rotate(90deg)!important;
        transform-origin: 0% 50%!important;
    }
    
    /* separating dots */
    
    .dials > .dots {
        width: 6.8%;
        justify-content: space-between;
        align-items: center;
        font-size:8px;
        
    }
    .dials > .dots.top> .fas, .dials > .dots.bottom > .fas {
        transition: all 2s ease;
    }
    /*.dials > .dots.top> .fas:nth-of-type(2), .dials > .dots.top > .fas:nth-of-type(4) {
        margin-top: 28px;
    }
    .dials > .dots.top > .fas:nth-of-type(3) {
        margin-top: 40px;
    }
    .dials > .dots.bottom > .fas:nth-of-type(2), .dials > .dots.bottom > .fas:nth-of-type(4) {
        margin-bottom: 28px;
    }
    .dials > .dots.bottom > .fas:nth-of-type(3) {
        margin-bottom: 40px;
    }*/
    .dotsuppermid {
        margin-top: 28px;
        margin-bottom: 0px;
    }
    .dotsuppertop {
        margin-top: 40px;
        margin-bottom: 0px;
    }
    .dotslowermid {
        margin-top: 0px;
        margin-bottom: 28px;
    }
    .dotslowertop {
        margin-top: 0px;
        margin-bottom: 40px;
    }

/* Quote */
    .quote {
        background: #fff;
        height: 230px;
        padding: 30px 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 1.5s ease;
    }
    .quote p {
        font-size: 32px;
        color: #333; 
        font-style: italic;
        font-weight: 600;
        font-family: 'Open Sans', sans-serif;
        display: flex;
        align-items: center;
    }
    .quote p span {
        font-size: 140px;
        font-weight: 300;
        background: -webkit-linear-gradient(bottom, #2e84e5 35%, #2caea7 50%, #2ee881 65%);
        background: linear-gradient(to top, #2e84e5 35%, #2caea7 50%, #2ee881 65%);
        background: -ms-linear-gradient(to top, #2e84e5 35%, #2caea7 50%, #2ee881 65%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        
    }
    @-moz-document url-prefix() { 
      .quote p span {
         background: transparent;
         color: #808080;
      }
    }
    .quote p span:first-of-type {
        padding-right: 20px;
    }
    .quote p span:last-of-type {
        padding-left: 20px;
    }

/* Experience */
    .experience {
        background: #cdcccb;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 1.5s ease;
    }
    .exp-inner {
        display: flex;
        justify-content: space-around;
    }
    .exp-inner .exp-col{
        background: #fff;
        box-shadow: 0px 5px 8px rgba(0,0,0,0.3);
        width: 30%;
        float:left;
        padding: 20px;
    }
    .exp-inner h2 {
        font-weight: 600;
        font-size: 36px;
        margin-bottom: 20px;
        text-transform: uppercase;
    }
    .exp-inner p {
        float: right;
        font-size: 24px;
        font-family: 'Open Sans Condensed', sans-serif;
        color: #808080;
    }
    #apps, #exp, #related {
        transition: margin-top 1s ease;
    }
    #apps span {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }
    .exp-inner ul {
        clear: both;
        padding-left: 0px;
        list-style-type: none;
    }
    .exp-inner ul li {
        font-size: 18px;
        margin-bottom: 15px;
    }
    #apps ul li {
        display: flex;
        justify-content: space-between;
    }
    #apps ul li .freq-box {
        display: flex;
        align-items:center;
        justify-content: flex-end;
    }
    #apps ul li .freq-box span {
        margin-left:-2px;
    }
    #apps ul li .freq-box .box5 {
        width: 15px;
        height: 15px;
        transform: skew(-20deg);
        background: #2ee881;
        border: 2px solid #2f3a3f;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 50%;
    }
    #apps ul li .freq-box .box4 {
        width: 15px;
        height: 15px;
        transform: skew(-20deg);
        background: #2dd58d;
        border: 2px solid #2f3a3f;
    }
    #apps ul li .freq-box .box3 {
        width: 15px;
        height: 15px;
        transform: skew(-20deg);
        background: #2caea7;
        border: 2px solid #2f3a3f;
    }
    #apps ul li .freq-box .box2 {
        width: 15px;
        height: 15px;
        transform: skew(-20deg);
        background: #2a81c5;
        border: 2px solid #2f3a3f;
    }
    #apps ul li .freq-box .box1 {
        width: 15px;
        height: 15px;
        transform: skew(-20deg);
        background: #2e84e5;
        border: 2px solid #2f3a3f;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
    }
    #apps ul li .freq-box .boxw {
        width: 15px;
        height: 15px;
        transform: skew(-20deg);
        background: #fff;
        border: 2px solid #2f3a3f;
    }
    .opacity {
        opacity: 1!important;
        transition: opacity .5s ease;
    }
/* Resume */
    .resume-header-inner, .commercial-inner, .academic-inner, .summary-inner, .freelance-inner {
        padding: 40px 15px;
        border-bottom: 1px solid #cdcccb;
    }
    .commercial, .academic, .resume-header, .summary, .freelance {
        transition: opacity 1.5s ease;
    }
    .header, .timeline-inner, .dials {
        transition: opacity 2.5s ease;
    }
    .academic-inner {
        border-bottom: none;
        padding-bottom: 60px;
    }
    .resume-header-inner {
        display: flex;
        justify-content: space-between;
        
    }
    .resume-header-inner h1 a {
        font-size: 84px;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 65px;
        margin-bottom: 20px;
        color: #333;
    }
    .resume-header-inner h1 a:hover, .resume-header-inner h1 a:focus {
        color: #333;
        text-decoration: none;
        cursor:default;
    }
    .resume-header-inner h2, .commercial-inner h2, .academic-inner h2, .summary-inner h2, .freelance-inner h2 {
        font-weight: 600;
        font-size: 36px;
        margin-bottom: 20px;
        text-transform: uppercase;
    }
    .resume-header-inner .left-side, .resume-header-inner .right-side {
        width:50%;
    }
    .resume-header-inner .left-side h1 {
        margin-bottom:20px;
    }
    .resume-header-inner .left-side h2 {
        margin-bottom: 0px;
        color: #808080;
        
    }
    .resume-header-inner .right-side p {
        font-size: 18px;
        margin-bottom: 20px;
        line-height: 22px;
    }
    .resume-header-inner .right-side p:last-of-type {
        margin-bottom: 0px;
    }
    .resume-header-inner .right-side h3 {
        font-size: 18px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
    }
    .jobs {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .jobs h3 {
        font-size: 18px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
    }
    .jobs ul {
        padding-left: 0px;
        margin-top:10px;
    }
    .jobs ul li {
        margin-bottom: 8px;
        list-style-type: none;
        font-size: 18px;
        display: flex;
        line-height:22px;
    }
    .jobs ul li:last-of-type {
        margin-bottom: 0px;
    }
    .jobs ul li:before {
        content:"-";
        margin-right: 10px;
    }
    .jobs p {
        font-size: 18px;
    }
    
    .jobs > .col-md-6 {
        padding-left: 0px;
    }
    .summary p {
        font-size: 18px;
        line-height: 22px;
    }
    .commercial-inner  #ezly {
        margin-bottom: 30px;
    }
    .commercial-inner #fid {
        margin-bottom: 0px;
    }
    .commercial-inner #hellen {
        margin-bottom: 30px;
    }
    .commercial-inner #coup {
        margin-bottom: 0px;
    }
    .academic-inner #web-admin {
        margin-bottom: 30px;
    }
    .academic-inner #inst-record {
        margin-bottom: 0px;
    }
    .academic-inner #ta {
        margin-bottom: 30px;
    }
    .academic-inner #stt {
        margin-bottom: 0px;
    }
.skip-to-resume {
  background: #2e84e5;
  color: #fff;
  height: 30px;
  left: 10%;
  padding: 5px 8px 10px 8px;
  position: absolute;
  transform: translateY(-100%);
  font-family: 'Open Sans', sans-serif;
}

.skip-to-resume:focus {
  transform: translateY(0%);
  margin-top: 40px;
  color:#fff;
  text-decoration: none;
}