@charset "UTF-8";body {
    font-family: "Source Sans Pro",sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5555;
    margin: 0;
    padding: 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -moz-font-feature-settings: "kern=1","liga=1","dlig=1","hlig=1";
    -moz-font-feature-settings: "kern" on,"liga" on,"dlig" on,"hlig" on;
    -webkit-font-feature-settings: "kern","liga","dlig","hlig";
    -ms-font-feature-settings: "kern","liga","dlig","hlig";
    font-feature-settings: "kern","liga","dlig","hlig";
    background-color: #212121;
    color: #bbb;
    overflow-x: hidden
}

:root {
  --color-dark: #323334;
  --color-dark-scrollbar: #121212;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  /* width: 8px; */
  /* background: #e5e4e2;
  border-left: 0 solid #e5e4e2;
  border-right: 0 solid #e5e4e2; */
  background: var(--color-dark-scrollbar);
  border-left: 0 solid var(--color-dark-scrollbar);
  border-right: 0 solid var(--color-dark-scrollbar);
}
::-webkit-scrollbar-thumb {
  /* background: #d43030; */
  background: var(--color-dark);
  width: 0;
  height: 25%;
  transition: 0.5s ease;
  cursor: pointer;
}

a {
    text-decoration: none;
    color: #ff5722
}

a:hover {
    text-decoration: none;
    color: #9049ff
}

header {
    position: relative;
    width: 1024px;
    margin-top: 30px;
    padding-bottom: 32px;
    min-height: 300px
}

header::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: 0
}

.name {
    font-family: "Roboto Condensed",sans-serif;
    font-size: 95px;
    letter-spacing: .2px;
    line-height: 100px;
    text-transform: uppercase
}

.name .first-name {
    font-weight: 400
}

.name .last-name {
    font-weight: 300
}

.position {
    color: #ff5722
}

.career {
    font-weight: 300;
    font-size: 30px;
    line-height: 36px;
    margin-top: 7px
}

ul.contact {
    margin-bottom: 4rem;
    font-weight: 300;
    font-size: 18px
}

ul.contact li {
    margin-top: 12px;
    line-height: 24px
}

ul.contact li.photo {
    margin-bottom: 12px
}

ul.contact li.photo img {
    border-radius: 50%
}

ul.contact li.social a {
    margin-right: 8px
}

ul.contact li.social [class*="icon-"] {
    font-size: 24px
}

main {
    margin: 0 auto
}

main .left-column,main .right-column {
    margin-bottom: 30px
}

section {
    margin-top: 30px
}

section h2 {
    font-family: "Roboto Condensed",sans-serif;
    font-weight: 300;
    font-size: 38px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height: 52px;
    border-bottom: solid 2px #4d4d4c
}

section ul.timeline {
    position: relative
}

section ul.timeline::before {
    content: "";
    position: absolute;
    left: 146px;
    top: 20px;
    bottom: 0;
    width: 1px;
    border-left: solid 1px #4d4d4c
}

section ul.timeline li.entry {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 20px;
    padding: 20px 8px 20px 179px;
    position: relative
}

section ul.timeline li.entry:hover {
    background-color: rgba(255,255,255,.025);
    border-radius: 6px
}

section ul.timeline li.entry::before {
    content: "";
    display: block;
    position: absolute;
    left: 140px;
    top: 30px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #4d4d4c;
    background: #ffffff
}

section ul.timeline li.entry .time {
    position: absolute;
    left: 16px;
    font-weight: 300;
    font-size: 24px;
    line-height: 32px
}

section ul.timeline li.entry .time span {
    display: inline-block
}

section ul.timeline li.entry .time span.end-time {
    display: block
}

section ul.timeline li.entry .time span.d-inline {
    display: none !important
}

section ul.timeline li.entry .time .start-time + span {
    margin: 0 .17em
}

section ul.timeline li.entry h3 {
    font-weight: 700;
    font-size: 24px;
    color: #fff;
    line-height: 32px;
    margin-top: 0
}

section ul.timeline li.entry h4 {
    font-family: "Roboto Condensed",sans-serif;
    font-size: 20px;
    font-weight: 700
}

section ul.timeline li.entry:hover h4 {
    color: #ff5722
}

section ul.timeline li.entry p {
    margin-left: -33px;
    border-left: 2px solid #5d5d5c;
    padding-left: 32px;
    font-weight: 300
}

section ul.timeline li.entry small {
    margin-right: 8px;
    line-height: 18px;
    color: #555
}

section blockquote {
    padding-top: 20px;
    text-indent: 50px;
    position: relative;
    border: none
}

section blockquote::before {
    text-indent: 0;
    content: "“";
    display: block;
    position: absolute;
    left: -25px;
    top: -11px;
    font-family: arial,sans-serif;
    font-weight: 400;
    color: #ff5722;
    font-size: 144px;
    line-height: 150px;
    padding-left: 20px
}
section.summary blockquote{
    display: flex;
}
section.summary blockquote::before {
    position:unset;
    line-height: 110px;
}
section ul.awards {
    margin-top: 20px;
    padding: 0
}

section ul.awards li.award {
    padding-left: 24px;
    line-height: 28px;
    margin-bottom: 12px;
    position: relative
}

section ul.skills {
    margin-top: 20px
}

section ul.skills li {
    line-height: 24px;
    margin-bottom: 6px
}

section ul.skills dfn {
    display: flex;
    justify-content: space-between
}

section ul.skills li span {
    display: inline-block;
    font-size: .85em
}

section ul.skills li.award.separator {
    line-height: 1px;
    margin: 12px 0;
    border-bottom: 1px solid #4d4d4c
}

section ul.skills li.award>dfn>span {
    font-size: .85em;
    font-weight: 600;
    font-style: normal
}

section ul.skills li.award:hover>dfn {
    color: #ff5722
}

section ul.skills li.award>dfn>span + span {
    margin-right: 0;
    text-align: right
}

.progress {
    height: 10px;
    margin-bottom: 0
}

.progress-bar {
    font-weight: 600;
    line-height: 10px;
    color: #fff
}

.progress-bar-warning {
    background-color: #ff5722
}

.career-goals dt {
    font-size: .85em
}

.badge {
    margin-right: 6px;
    font-weight: 500
}

.linkedin__logo {
    vertical-align: text-top;
    margin: 5px 8px 0 0
}

section ul.recomms {
    padding-top: 18px
}

section ul.recomms::before {
    left: 256px
}

.EntityPhoto-circle-4 {
    float: left;
    border-radius: 50%
}

.pv-recommendation-entity {
    display: flex;
    padding: 16px 0
}

.pv-recommendation-entity__header {
    width: 256px;
    min-width: 256px;
    padding-right: 16px
}

.pv-recommendation-entity__detail {
    padding-left: 80px
}

.pv-recommendation-entity__detail h3 {
    font-size: 1.25rem;
    color: white
}

.pv-recommendation-entity:hover {
    background-color: rgba(255,255,255,.025)
}

.pv-recommendation-entity:hover h3 {
    color: #ff5722
}

.pv-recommendation-entity__headline {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 400
}

.pv-recommendation-entity__headline + p {
    line-height: 1;
    color: #555
}

.pv-recommendation-entity__headline + p>small {
    font-size: 12px
}

.pv-recommendation-entity__highlights {
    flex-grow: 1;
    padding-left: 24px;
    border-left: 2px solid #5d5d5c
}

.pv-recommendation-entity__highlights blockquote {
    margin-bottom: 0;
    padding-top: 0;
    text-indent: 32px
}

.pv-recommendation-entity__highlights blockquote::before {
    left: -22px;
    top: -2px;
    font-size: 64px;
    line-height: 64px
}

a.pv-recommendation-entity__member {
    color: inherit
}

@media screen and (min-width: 768px) and (max-width:991px) {
    .name .first-name,.name .last-name {
        display:block
    }

    section ul.timeline::before {
        left: 80px
    }

    section ul.timeline li.entry {
        padding-left: 100px
    }

    section ul.timeline li.entry::before {
        left: 75px
    }

    section ul.timeline li.entry .time span.start-time,section ul.timeline li.entry .time span.end-time {
        display: block
    }

    section ul.timeline li.entry p {
        margin-left: -20px;
        padding-left: 18px
    }
}

@media screen and (max-width: 767px) {
    body {
        font-size:16px;
        line-height: 24px;
        padding-bottom: 20px
    }

    header {
        width: auto;
        margin: 20px 20px 0 20px;
        padding-bottom: 20px;
        border-bottom: solid 1px #4d4d4c;
        text-align: center
    }

    header::after {
        content: none
    }

    .name {
        font-size: 56px;
        letter-spacing: .27px;
        line-height: .9;
        text-align: center;
        width: 100%;
        margin: 1.1em 0
    }

    .name .first-name,.name .last-name {
        display: block
    }

    .career {
        width: 100%;
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 4px;
        margin-top: 5px
    }

    h2.position {
        margin-bottom: 1.1em
    }

    ul.contact {
        font-size: 16px;
        width: 100%;
        position: relative;
        bottom: initial
    }

    ul.contact li {
        margin-top: 6px;
        margin-bottom: 10px;
        line-height: 18px
    }

    main {
        width: 100%
    }

    main .left-column {
        width: 100%;
        margin-bottom: 0;
        float: none
    }

    main .right-column {
        width: 100%;
        margin-left: 0;
        margin-bottom: 0;
        float: none
    }

    main section {
        margin-top: 30px
    }

    section {
        margin-top: 20px
    }

    section h2 {
        font-size: 24px;
        letter-spacing: .5px;
        line-height: 36px;
        border-bottom: none;
        position: relative
    }

    section h2 span {
        padding: 0 8px;
        margin-left: 12px;
        display: inline-block
    }
    section h2 + ul li {
        padding: 0 8px;
        margin-left: 12px;
    }

    section h2::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 10px;
        display: block;
        height: 17px;
        z-index: -1
    }

    section ul.timeline::before,section ul.recomms::before {
        left: 24px;
        border-left: solid 1px #4d4d4c
    }

    section ul.timeline li.entry {
        font-size: 16px;
        line-height: 24px;
        padding-left: 40px;
        padding-right: 16px
    }

    section ul.recomms li.pv-recommendation-entity {
        position: relative;
        flex-direction: column;
        padding-left: 25px;
        z-index: 1
    }

    section ul.timeline li.entry::before,section ul.recomms li.pv-recommendation-entity::before {
        left: 18px;
        top: 28px
    }

    section ul.timeline li.entry .time {
        position: relative;
        left: 0;
        font-size: 18px;
        line-height: 24px
    }

    section ul.timeline li.entry .time span.end-time {
        display: block
    }

    section ul.timeline li.entry .time span.d-inline {
        display: none !important
    }

    section ul.timeline li.entry .time span.start-time + span {
        display: inline-block;
        margin: 0 6px
    }

    section ul.timeline li.entry h4 {
        font-weight: 400
    }

    section ul.timeline li.entry p {
        margin-left: -16px;
        padding-left: 14px
    }

    section blockquote {
        text-indent: 64px
    }

    section blockquote::before {
        font-family: arial,sans-serif!important;
        left: -3px;
        top: -4px;
        font-size: 120px;
        line-height: 120px
    }

    section ul.awards {
        margin-top: 14px;
        margin-left: 18px;
        margin-right: 20px
    }

    section ul.awards li.award {
        padding-left: 24px;
        line-height: 24px;
        margin-bottom: 12px;
        position: relative
    }

    section ul.skills {
        margin-top: 17px;
        margin-left: 20px;
        margin-right: 20px
    }

    section ul.skills li span {
        margin-right: 20px
    }

    section ul.seskills {
        margin-left: 20px;
        margin-right: 20px
    }

    section dl.career-goals {
        margin: 0 20px 20px
    }

    .linkedin__logo {
        width: 24px;
        height: 24px;
        margin: 2px -12px 0 16px
    }

    .pv-recommendation-entity__header {
        width: auto;
        margin-left: -24px
    }

    .EntityPhoto-circle-4 {
        width: 48px;
        height: 48px
    }

    .pv-recommendation-entity__detail {
        padding-left: 50px
    }

    .pv-recommendation-entity__detail h3 {
        margin: 12px 0 12px 12px
    }

    .pv-recommendation-entity__highlights {
        padding-right: 16px
    }
}

@media (min-width: 768px) {
    .career-goals dt {
        float:left;
        width: 199px;
        overflow: hidden;
        clear: left;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 28px
    }

    .career-goals dd {
        margin-left: 219px
    }

    .progress {
        float: inherit;
        width: 100%
    }
}