html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

footer,
header,
section {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

strong {
    font-weight: inherit;
    font-weight: bolder
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

input,
textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

input {
    overflow: visible
}

/* 1 */

[type=reset],
[type=submit],
html [type=button] {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

/* 1 */

[hidden] {
    display: none
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: sans-serif
}

*,
:after,
:before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

h1,
h2,
h3,
h4,
h5,
p {
    margin: 0
}

ul {
    margin: 0
}

*,
:after,
:before {
    border: 0 solid currentColor
}

img {
    border-style: solid
}

[type=button],
[type=reset],
[type=submit] {
    border-radius: 0
}

textarea {
    resize: vertical
}

img {
    max-width: 100%;
    height: auto
}

input,
textarea {
    font-family: inherit
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: inherit;
    opacity: .5
}

input:-ms-input-placeholder,
input::-ms-input-placeholder,
textarea:-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: inherit;
    opacity: .5
}

input::placeholder,
textarea::placeholder {
    color: inherit;
    opacity: .5
}

[role=button] {
    cursor: pointer
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem
}

@media (min-width:576px) {
    .container {
        max-width: 576px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 768px
    }
}

@media (min-width:992px) {
    .container {
        max-width: 992px
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1200px
    }
}

.bg-back-light {
    background-color: #fff
}

.text-back-light {
    color: #fff
}

svg {
    fill: currentColor
}

.fill-lead {
    fill: #fdfd3f
}

.section-header {
    color: #000;
    font-size: .875rem;
    text-transform: uppercase
}

.btn,
.section-header {
    font-family: Source Sans Pro, sans-serif;
    font-weight: 600
}

.about-list{
    list-style:none;
    padding-left: 20px;
}

.about-list li:before { content: '👉'; margin-left: -20px; margin-right: 10px; } 

.btn {
    display: inline-block;
    text-decoration: none;
    padding: .5rem 1.5rem;
    line-height: 1.25;
    cursor: pointer;
    outline: 0;
    -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
    will-change: opacity
}

.btn:hover {
    opacity: .75
}

.hover\:opacity-75 {
    -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
    will-change: opacity
}

.dot {
    width: .5rem;
    height: .5rem;
    margin-right: .25rem
}

.dot,
.dot-double {
    display: inline-block;
    border-radius: 9999px
}

.dot-double {
    position: relative;
    width: 54px;
    height: 54px
}

.dot-double:after {
    position: absolute;
    background-color: #fff;
    border-radius: 9999px;
    top: 18px;
    left: 18px;
    right: 18px;
    bottom: 18px;
    content: ""
}

.status-green {
    background-color: #53c72b
}

.status-blue {
    background-color: #0f6fde
}

.status-black {
    background-color: #1D1D1B
}

.status-default {
    background-color: #e58b5f
}

.contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 3.5rem;
    height: 3.5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    background-color: #fdfd3f;
    border-radius: 9999px;
    color: #000;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media (min-width:992px) {
    .contact {
        width: auto;
        height: auto;
        font-family: Source Sans Pro, sans-serif;
        display: inline-block;
        text-decoration: none;
        font-weight: 600;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        line-height: 1.25;
        cursor: pointer;
        outline: 0;
        -webkit-transition: opacity .2s ease-out;
        transition: opacity .2s ease-out;
        will-change: opacity;
        padding: .5rem 1.5rem;
        border-radius: 1rem;
        -ms-flex-item-align: start;
        align-self: flex-start;
        margin-top: 1rem
    }
}

.avatar-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 9999px;
    background-color: #fdfd3f;
    z-index: 0;
    -webkit-transform: translateX(35%);
    transform: translateX(35%)
}

.connect-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 9999px;
    background-color: #000;
    color: #fff;
    margin-left: -.75rem;
    -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
    will-change: opacity
}

.connect-icon:first-child {
    margin-left: 0
}

.connect-icon:nth-child(2n) {
    background-color: #fff;
    color: #000
}

.connect-icon svg {
    fill: currentColor;
    width: 1.5rem;
    height: 1.5rem
}

.connect-icon:hover {
    opacity: .75
}

.skills {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin-left: -.5rem;
    margin-right: -.5rem
}

.skill {
    position: relative;
    border-radius: 9999px;
    border-width: 2px;
    font-family: Source Sans Pro, sans-serif;
    font-weight: 600;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    color: #000;
    padding-left: .5rem;
    padding-right: .5rem;
    margin: .5rem;
    width: calc(50vw - 2rem);
    height: calc(50vw - 2rem);
    max-width: 200px;
    max-height: 200px
}

.skill svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform: translate(8px, 8px);
    transform: translate(8px, 8px);
    opacity: .8;
    width: calc(100% - 16px)
}

.skill:nth-child(3n+1) {
    border-color: #b2a2e6
}

.skill:nth-child(3n+1) svg {
    color: #9079db
}

.skill:nth-child(3n+2) {
    border-color: #ecad8d
}

.skill:nth-child(3n+2) svg {
    color: #e58b5f
}

.skill:nth-child(3n+3) {
    border-color: #68b6e3
}

.skill:nth-child(3n+3) svg {
    color: #3ba1db
}

@media (min-width:992px) {
    .skill {
        width: 130px;
        height: 130px
    }
}

@media (min-width:1200px) {
    .skill {
        width: 144px;
        height: 144px
    }
}

.tools {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin-top: .5rem
}

.tool {
    display: inline-block;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    background-color: #fdfd3f;
    padding: .25rem .75rem;
    font-family: Source Sans Pro, sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    color: #000;
    margin-bottom: .25rem
}

.project {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 2rem;
    background-repeat: no-repeat;
    font-size: .875rem;
    margin-bottom: 1.5rem;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(1%, #c3c8d5), color-stop(35%, #c3c8d5), color-stop(35%, #d2d6e0), to(#d2d6e0));
    background-image: linear-gradient(90deg, #c3c8d5 1%, #c3c8d5 35%, #d2d6e0 0, #d2d6e0);
    background-size: 100% 4px;
    background-repeat: no-repeat
}

.project-image {
    width: 100%;
    padding-bottom: 1rem
}

@media (min-width:992px) {
    .project-image {
        width: 40%;
        padding-right: 2rem;
        padding-bottom: 0
    }
}

.project h4 {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    width: 100%
}

.project p {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.tags {
    list-style: none;
    padding: 0;
    padding-right: .5rem
}

.tag {
    display: inline-block;
    padding: .25rem .75rem;
    margin-right: .25rem;
    margin-top: .25rem;
    font-weight: 500;
    font-size: .75rem;
    border-radius: 1rem;
    border-width: 1px;
    border-color: #e8eaef
}

.project-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-bottom: 1.25rem;
    margin-right: 1.25rem;
    color: #e8eaef;
    width: 1.5rem;
    height: 1.5rem
}

.history {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

.history:before {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    background-color: #cfd1d7;
    left: 50%;
    width: 2px;
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
    content: ""
}

.history-entry {
    position: relative;
    width: 50%;
    padding-top: 1rem;
    padding-bottom: 1rem
}

.history-entry h4 {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto
}

.history-entry h5 {
    font-size: .875rem;
    font-weight: 400
}

.history-entry:nth-child(odd) {
    -ms-flex-item-align: end;
    align-self: flex-end;
    padding-left: 3rem
}

.history-entry:nth-child(2n) {
    -ms-flex-item-align: start;
    align-self: flex-start;
    padding-right: 3rem;
    text-align: right
}

.history-entry .dot-double {
    position: absolute;
    top: 0;
    background-color: #cfd1d7;
    top: 50%
}

.history-entry:nth-child(odd) .dot-double {
    left: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.history-entry:nth-child(2n) .dot-double {
    right: 0;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%)
}

.history-entry:first-child .dot-double {
    background-color: #000
}

.history-entry:first-child .dot-double:after {
    background-color: #fdfd3f
}

.form-control {
    width: 100%;
    color: #000;
    padding: .75rem 1rem;
    font-family: Source Sans Pro, sans-serif;
    font-weight: 600;
    font-size: .875rem;
    outline: 0;
    line-height: 1.5
}

.form-input {
    background-color: #fff;
    -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
    will-change: opacity
}

.form-input:focus {
    opacity: .7
}

.checkbox {
    position: relative;
    display: inline-block;
    border-width: 2px;
    vertical-align: middle;
    margin-right: .5rem;
    margin-top: -.25rem;
    cursor: pointer;
    border-color: #e8eaef;
    width: 22px;
    height: 22px
}

.checkbox:after {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    content: ""
}

.checkbox-on:after {
    background-color: #fdfd3f
}

[data-checkbox-toggle] {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.inquiry-details {
    opacity: .3;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .25s ease-in-out, opacity .25s ease-in-out;
    transition: height .25s ease-in-out, opacity .25s ease-in-out;
    will-change: opacity, height
}

.input-range {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    outline: 0;
    margin-bottom: .25rem;
    height: 1rem;
    background: transparent
}

.input-range:focus {
    outline: 0
}

.input-range::-moz-range-track {
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    background-color: #e8eaef;
    cursor: pointer;
    outline: 0;
    height: 2px
}

.input-range::-ms-track {
    appearance: none;
    width: 100%;
    background-color: #e8eaef;
    cursor: pointer;
    outline: 0;
    height: 2px
}

.input-range::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background-color: #e8eaef;
    cursor: pointer;
    outline: 0;
    height: 2px
}

.input-range::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    border-radius: 9999px;
    width: 1rem;
    height: 1rem;
    background-color: #fdfd3f;
    cursor: pointer;
    outline: 0;
    -webkit-transform: translateY(-6.5px);
    -moz-transform: translateY(0)
}

.input-range::-ms-thumb {
    appearance: none;
    border-radius: 9999px;
    width: 1rem;
    height: 1rem;
    background-color: #fdfd3f;
    cursor: pointer;
    outline: 0;
    -webkit-transform: translateY(-6.5px);
    -moz-transform: translateY(0)
}

.input-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 9999px;
    width: 1rem;
    height: 1rem;
    background-color: #fdfd3f;
    cursor: pointer;
    outline: 0;
    -webkit-transform: translateY(-6.5px);
    -moz-transform: translateY(0)
}

.bg-back {
    background-color: #e8eaef
}

.bg-front {
    background-color: #000
}

.bg-lead {
    background-color: #fdfd3f
}

.border-back {
    border-color: #e8eaef
}

.border-front {
    border-color: #000
}

.border-line {
    border-color: #cfd1d7
}

.rounded-full {
    border-radius: 9999px
}

.border-solid {
    border-style: solid
}

.border-2 {
    border-width: 2px
}

.border-b-0 {
    border-bottom-width: 0
}

.border-r-2 {
    border-right-width: 2px
}

.border-r {
    border-right-width: 1px
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.hidden {
    display: none
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.inline-flex {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

.flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.justify-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.justify-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.font-header {
    font-family: Source Sans Pro, sans-serif
}

.font-text {
    font-family: Roboto, sans-serif
}

.font-light {
    font-weight: 300
}

.font-normal {
    font-weight: 400
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

.font-bold {
    font-weight: 700
}

.font-black {
    font-weight: 900
}

.h-4 {
    height: 1rem
}

.h-5 {
    height: 1.25rem
}

.h-6 {
    height: 1.5rem
}

.h-14 {
    height: 3.5rem
}

.h-56 {
    height: 14rem
}

.h-full {
    height: 100%
}

.leading-none {
    line-height: 1
}

.leading-tight {
    line-height: 1.25
}

.leading-normal {
    line-height: 1.5
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem
}

.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem
}

.mb-1 {
    margin-bottom: .25rem
}

.mr-4 {
    margin-right: 1rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mt-6 {
    margin-top: 1.5rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mt-12 {
    margin-top: 3rem
}

.mt-16 {
    margin-top: 4rem
}

.opacity-50 {
    opacity: .5
}

.p-4 {
    padding: 1rem
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.py-px {
    padding-top: 1px;
    padding-bottom: 1px
}

.pb-0 {
    padding-bottom: 0
}

.pt-1 {
    padding-top: .25rem
}

.pt-2 {
    padding-top: .5rem
}

.pb-3 {
    padding-bottom: .75rem
}

.pt-4 {
    padding-top: 1rem
}

.pr-4 {
    padding-right: 1rem
}

.pb-4 {
    padding-bottom: 1rem
}

.pl-4 {
    padding-left: 1rem
}

.pt-6 {
    padding-top: 1.5rem
}

.pb-6 {
    padding-bottom: 1.5rem
}

.pt-8 {
    padding-top: 2rem
}

.pb-8 {
    padding-bottom: 2rem
}

.pb-12 {
    padding-bottom: 3rem
}

.pb-16 {
    padding-bottom: 4rem
}

.relative {
    position: relative
}

.resize-none {
    resize: none
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-back {
    color: #e8eaef
}

.text-front {
    color: #000
}

.text-lead {
    color: #fdfd3f
}

.text-xs {
    font-size: .75rem
}

.text-sm {
    font-size: .875rem
}

.text-lg {
    font-size: 1.125rem
}

.text-xl {
    font-size: 1.25rem
}

.text-2xl {
    font-size: 1.5rem
}

.text-5xl {
    font-size: 3rem
}

.uppercase {
    text-transform: uppercase
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.visible {
    visibility: visible
}

.break-words {
    word-wrap: break-word
}

.w-4 {
    width: 1rem
}

.w-5 {
    width: 1.25rem
}

.w-6 {
    width: 1.5rem
}

.w-14 {
    width: 3.5rem
}

.w-56 {
    width: 14rem
}

.w-auto {
    width: auto
}

.w-1\/2 {
    width: 50%
}

.w-1\/3 {
    width: 33.33333%
}

.w-2\/3 {
    width: 66.66667%
}

.w-1\/4 {
    width: 25%
}

.w-3\/4 {
    width: 75%
}

.w-full {
    width: 100%
}

.z-10 {
    z-index: 1
}

@media (min-width:992px) {
    .lg\:border-r {
        border-right-width: 1px
    }
    .lg\:block {
        display: block
    }
    .lg\:hidden {
        display: none
    }
    .lg\:h-36 {
        height: 9rem
    }
    .lg\:mt-4 {
        margin-top: 1rem
    }
    .lg\:p-px {
        padding: 1px
    }
    .lg\:py-0 {
        padding-top: 0;
        padding-bottom: 0
    }
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }
    .lg\:px-px {
        padding-left: 1px;
        padding-right: 1px
    }
    .lg\:pl-8 {
        padding-left: 2rem
    }
    .lg\:pr-12 {
        padding-right: 3rem
    }
    .lg\:pl-12 {
        padding-left: 3rem
    }
    .lg\:w-36 {
        width: 9rem
    }
    .lg\:w-1\/3 {
        width: 33.33333%
    }
    .lg\:w-2\/3 {
        width: 66.66667%
    }
    .lg\:w-1\/4 {
        width: 25%
    }
    .lg\:w-3\/4 {
        width: 75%
    }
    .lg\:w-1\/5 {
        width: 20%
    }
    .lg\:w-3\/5 {
        width: 60%
    }
    .lg\:w-4\/5 {
        width: 80%
    }
}

@media (min-width:1200px) {
    .xl\:px-12 {
        padding-left: 3rem;
        padding-right: 3rem
    }
    .xl\:pl-12 {
        padding-left: 3rem
    }
}



/* ########### ADDITIONAL ########### */

.languages-block{
    display:flex;
}

.languages-block span{
    padding: .25rem .75rem;
    margin-top: .25rem;
    font-weight: 200;
}

.languages-block span:not(:last-of-type){
    margin-right: .25rem;
}

.languages-block span:first-of-type{
    padding-left: 0;
}

.bg-lead, .tool, .contact, .text-lead {
    transition: background-color 1s;
}
.bg-lead:hover, .tool:hover, .contact:hover, .text-lead:hover, .dot-double:first-child:hover {
    background-color: #000;
    color: #FFF;
}

/* PITCH.COM */

.portfolio{
    text-align: center;
}

.portfolio-iframe{
    border-radius: 10px;
}


@media (max-width:425px) {
    .portfolio-iframe{
        width:auto;
        height:auto;
    }
}

/* SUBSTACK */
.substack-feed-widget .p-2{
    padding: 0 0 1em 0 !important;
}