@import url(https://fonts.googleapis.com/css?family=Open+Sans|Source+Sans+Pro);

@page {
    size: A4 portrait;
    margin: 0
}
* {
    box-sizing: border-box
}
:root {
    --page-width: 8.3in;
    --page-height: 10in;
    --page-print-height: 11.7in;
    --main-width: 6.4in;
    --sidebar-width: calc(var(--page-width) - var(--main-width));
    --decorator-horizontal-margin: 0.2in;
    --sidebar-horizontal-padding: 0.2in;
    --decorator-outer-offset-top: 10px;
    --decorator-outer-offset-left: -5.5px;
    --decorator-border-width: 1px;
    --decorator-outer-dim: 9px;
    --decorator-border: 1px solid #ccc;
    --row-blocks-padding-top: 5pt;
    --date-block-width: 1.2in;
    --main-blocks-title-icon-offset-left: -19pt
}
body {
    width: var(--page-width);
    min-height: var(--page-height);
    margin: 0 auto;
    font-family: Open Sans, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    color: #444;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
}
h1, h2, h3 {
    margin: 0;
    color: #000
}
a {
    text-decoration: none;
    color: #444
}
li {
    list-style-type: none
}
#main {
    float: left;
    width: var(--main-width);
    padding: .25in .25in 0;
    font-size: 7pt
}
#sidebar {
    float: right;
    width: var(--sidebar-width);
    height: 100%;
    padding: .6in var(--sidebar-horizontal-padding);
    background-color: #f2f2f2;
    font-size: 8.5pt
}
#sidebar, #title {
    position: relative
}
#title {
    left: .55in;
    margin-bottom: .3in;
    line-height: 1.2;
    display: flex;
    width: calc(100% - .55in)
}
#title .text {
    margin-right: auto
}
#title .qr-code img {
    max-width: 58px;
    max-height: 58px
}
#title h1 {
    font-weight: 700;
    font-size: 18pt;
    line-height: 1.5
}
#title h1 strong {
    margin: auto 2pt auto 4pt;
    font-weight: 600
}
.subtitle {
    font-size: 8pt
}
.main-block {
    margin-top: .1in
}
#main h2 {
    position: relative;
    top: var(--row-blocks-padding-top);
    left: calc(var(--date-block-width) + var(--decorator-horizontal-margin));
    font-weight: 400;
    font-size: 11pt;
    color: #555
}
#main h2>i {
    position: absolute;
    left: var(--main-blocks-title-icon-offset-left);
    z-index: 1;
    color: #444
}
#main h2:after {
    height: calc(var(--row-blocks-padding-top)*2);
    position: relative;
    top: calc(-1*var(--row-blocks-padding-top));
    left: calc(-1*var(--decorator-horizontal-margin));
    display: block;
    border-left: var(--decorator-border);
    z-index: 0;
    line-height: 0;
    font-size: 0;
    content: " "
}
#main h2>.fa-graduation-cap {
    left: calc(var(--main-blocks-title-icon-offset-left) - 2pt);
    top: 2pt
}
#main h2>.fa-suitcase {
    top: 1pt
}
#main h2>.fa-folder-open {
    top: 1.5pt
}
.blocks {
    display: flex;
    flex-flow: row nowrap
}
.blocks>div {
    padding-top: var(--row-blocks-padding-top)
}
.date {
    flex: 0 0 var(--date-block-width);
    padding-top: calc(var(--row-blocks-padding-top) + 2.5pt)!important;
    padding-right: var(--decorator-horizontal-margin);
    font-size: 7pt;
    text-align: right;
    line-height: 1
}
.date span {
    display: block
}
.date span:nth-child(2):before {
    position: relative;
    top: 1pt;
    right: 5.5pt;
    display: block;
    height: 10pt;
    content: "|"
}
.decorator {
    flex: 0 0 0;
    position: relative;
    width: 2pt;
    min-height: 100%;
    border-left: var(--decorator-border)
}
.decorator:before {
    top: var(--decorator-outer-offset-top);
    left: var(--decorator-outer-offset-left);
    width: var(--decorator-outer-dim);
    height: var(--decorator-outer-dim);
    border-radius: calc(var(--decorator-outer-dim)/2);
    background-color: #fff
}
.decorator:after, .decorator:before {
    position: absolute;
    content: " ";
    display: block
}
.decorator:after {
    top: calc(var(--decorator-outer-offset-top) + var(--decorator-border-width));
    left: calc(var(--decorator-outer-offset-left) + var(--decorator-border-width));
    width: calc(var(--decorator-outer-dim) - var(--decorator-border-width)*2);
    height: calc(var(--decorator-outer-dim) - var(--decorator-border-width)*2);
    border-radius: calc((var(--decorator-outer-dim) - var(--decorator-border-width)*2)/2);
    background-color: #555
}
.blocks:last-child .decorator {
    margin-bottom: .25in
}
.details {
    flex: 1 0 0;
    padding-left: var(--decorator-horizontal-margin);
    padding-top: calc(var(--row-blocks-padding-top) - .5pt)!important
}
.details header {
    color: #000
}
.details h3 {
    font-size: 9pt
}
.main-block:not(.concise) .details div {
    margin: .18in 0 .1in
}
.main-block:not(.concise) .blocks:last-child .details div {
    margin-bottom: 0
}
.main-block.concise .details div:not(.concise) {
    padding: .05in 0 .07in
}
.details .place {
    float: left;
    font-size: 7.5pt
}
.details .location {
    float: right
}
.details div {
    clear: both
}
#main ul, #personal-info ul {
    padding-left: .07in;
    margin: .08in 0
}
#main li, #personal-info li {
    margin: 0 0 .025in
}
#main li:before, #personal-info li:before {
    position: relative;
    margin-left: -4.25pt;
    content: "\2022   "
}
.details .concise ul {
    margin: 0!important;
    -moz-columns: 2;
    column-count: 2
}
.details .concise li {
    margin: 0!important;
    margin-left: 0!important
}
.avatar {
    max-width: 100%;
    display: block;
    height: 150px;
    width: 150px;
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid #000;
}
.avatar img {
    width: 100%;
    height: auto;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
#sidebar h1 {
    font-weight: 400;
    font-size: 11pt
}
.side-block {
    margin-top: .2in
}
#cert-info ul, #contact ul, #links ul {
    margin-top: .05in;
    padding-left: 0;
    font-family: Source Sans Pro;
    font-weight: 400;
    line-height: 1.75
}
#cert-info li>i, #contact li>i, #links li>i {
    width: 9pt;
    text-align: right
}
#skills {
    line-height: 1.5
}
#skills ul {
    margin: .05in 0 .15in;
    padding: 0
}
#disclaimer {
    position: absolute;
    bottom: var(--sidebar-horizontal-padding);
    right: var(--sidebar-horizontal-padding);
    font-size: 7.5pt;
    font-style: italic;
    line-height: 1.1;
    text-align: right;
    color: #777
}
#disclaimer p {
    display: none
}
#disclaimer a.btn {
    color: #333;
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 0;
    font-size: 10pt;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid;
    border-radius: 4px
}
#disclaimer a.btn:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad
}
#personal-info li {
    font-size: 7.5pt
}
#cert-info li {
    font-size: 7.4pt;
    display: block
}
.print {
    display: none
}
@media print {
    .page-break {
        page-break-after: always
    }
    body {
        -webkit-print-color-adjust: exact;
        height: var(--page-print-height);
    }
    #disclaimer p {
        display: block
    }
    #disclaimer a.btn {
        display: none
    }
    .print {
        display: inherit
    }
    .page-break-margin {
        margin-top: 2in
    }
}
li.project-title {
    font-size: 8pt;
    font-weight: 700
}
li.project-title>ul li {
    font-size: 7pt;
    font-weight: 400
}

@media (max-width: 768px) {

}