*,
:after,
:before {
    box-sizing: border-box
}

:after,
:before {
    text-decoration: inherit;
    vertical-align: inherit
}

html {
    cursor: default;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    word-break: break-word
}

body {
    margin: 0
}

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

dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
    margin: 0
}

hr {
    height: 0;
    overflow: visible
}

main {
    display: block
}

nav ol,
nav ul {
    list-style: none;
    padding: 0
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle
}

audio,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

iframe,
img {
    border-style: none
}

svg:not([fill]) {
    fill: currentColor
}

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

table {
    border-collapse: collapse
}

button,
input,
select {
    margin: 0
}

button {
    overflow: visible;
    text-transform: none
}

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

fieldset {
    border: 1px solid #a0a0a0;
    padding: .35em .75em .625em
}

input {
    overflow: visible
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal
}

progress {
    display: inline-block;
    vertical-align: baseline
}

select {
    text-transform: none
}

textarea {
    margin: 0;
    overflow: auto;
    resize: vertical
}

[type=checkbox],
[type=radio] {
    padding: 0
}

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

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

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

::-moz-focus-inner {
    border-style: none;
    padding: 0
}

:-moz-focusring {
    outline: 1px dotted ButtonText
}

:-moz-ui-invalid {
    box-shadow: none
}

details,
dialog {
    display: block
}

dialog {
    background-color: #fff;
    border: solid;
    color: #000;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
    left: 0;
    margin: auto;
    padding: 1em;
    position: absolute;
    right: 0;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content
}

dialog:not([open]) {
    display: none
}

summary {
    display: list-item
}

canvas {
    display: inline-block
}

template {
    display: none
}

[tabindex],
a,
area,
button,
input,
label,
select,
summary,
textarea {
    touch-action: manipulation
}

[hidden] {
    display: none
}

[aria-busy=true] {
    cursor: progress
}

[aria-controls] {
    cursor: pointer
}

[aria-disabled=true],
[disabled] {
    cursor: not-allowed
}

[aria-hidden=false][hidden] {
    display: initial
}

[aria-hidden=false][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute
}

:root {
    --color-primary: #c45af4;
    --color-secondary: #7263df;
    --color-white: #fff;
    --color-white20: #4b4b4d;
    --color-white30: #616163;
    --color-white40: #52525b;
    --color-white50: #818188;
    --color-white60: #a5a5a6;
    --color-white75: #b2b2b7;
    --color-gray: #2c2c2f;
    --color-bg: #1e1e20;
    --color-bgDark: #141416;
    --color-black: #000;
    --color-black20: rgba(0, 0, 0, 0.2);
    --color-border: #2e2e30;
    --color-spenmo: #f28045;
    --color-spenmoLight: #ff8e31;
    --color-tightrope: #58bcbc;
    --color-tightropeLight: #3be4e4;
    --color-diab: #3cc823;
    --color-diabLight: #3be47f;
    --color-flash: #f9cf2f;
    --color-gradient: linear-gradient(90deg, #c45af4, #7163de)
}

.brand-spenmo {
    --color-brand: var(--color-spenmo);
    --color-brandLight: var(--color-spenmoLight)
}

.brand-tightrope {
    --color-brand: var(--color-tightrope);
    --color-brandLight: var(--color-tightropeLight)
}

.brand-diab {
    --color-brand: var(--color-diab);
    --color-brandLight: var(--color-diabLight)
}

.brand-abstract {
    --color-brand: var(--color-primary);
    --color-brandLight: var(--color-secondary)
}

.brand-flash {
    --color-brand: var(--color-flash);
    --color-brandLight: var(--color-flash)
}

.brand-white {
    --color-brand: #ffffff;
    --color-brandLight: #ffffff;
}

::-moz-selection {
    color: var(--color-white);
    background-color: var(--color-brandLight, var(--color-secondary));
    -webkit-text-fill-color: var(--color-white)
}

::selection {
    color: var(--color-white);
    background-color: var(--color-brandLight, var(--color-secondary));
    -webkit-text-fill-color: var(--color-white)
}

:root {
    font-size: 16px
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-bg);
    position: relative
}

@font-face {
    font-family: Sofia Pro;
    src: url(../../fonts/SofiaProBold.591378b0e8d5cb6fb7dc5583c78f4828.woff2) format("woff2"), url(../../fonts/SofiaProBold.3e804737b0556cce7860df86e0a6d500.woff) format("woff"), url(../../fonts/SofiaProBold.c63047eee066d15fde0c54bf8b8c0da6.ttf) format("truetype");
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: Sofia Pro;
    src: url(../../fonts/SofiaProSemiBold.a2c4d0825e75216dbbf2ae2f78943929.woff2) format("woff2"), url(../../fonts/SofiaProSemiBold.62592bafe4d8bdf1369072af3f165206.woff) format("woff"), url(../../fonts/SofiaProSemiBold.3d7b1745fd055a7d77865ca06d781d8c.ttf) format("truetype");
    font-weight: 600;
    font-display: swap
}

@font-face {
    font-family: Sofia Pro;
    src: url(../../fonts/SofiaProRegular.0c50b33e53c30de57ea7fdd0e109f17f.woff2) format("woff2"), url(../../fonts/SofiaProRegular.3e804737b0556cce7860df86e0a6d500.woff) format("woff"), url(../../fonts/SofiaProRegular.30c3c9fa68fcae02249375f458ed6011.ttf) format("truetype");
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: Sofia Pro;
    src: url(../../fonts/SofiaProLight.edbc7950acd00e89aa4508dc7d2af5aa.woff2) format("woff2"), url(../../fonts/SofiaProLight.ff945f35945243c63bb3fd22d8249944.woff) format("woff"), url(../../fonts/SofiaProLight.ac5f8b37e96667d73cf8c72127e7e961.ttf) format("truetype");
    font-weight: 300;
    font-display: swap
}

@font-face {
    font-family: "Source Serif Pro";
    src: url(../../fonts/SourceSerifPro-Regular.5a0c4667b6cf6cb37d0ac2d49478d47f.woff2) format("woff2"), url(../../fonts/SourceSerifPro-Regular.893a87c724c829ad25a60164d33db2b5.woff) format("woff"), url(../../fonts/SourceSerifPro-Regular.fb3ece38b19e8a425aeb888194469bca.ttf) format("truetype");
    font-weight: 400;
    font-display: swap
}

#aboutUsHero .hero__h1,
#ourProcessHero .hero__h1,
#ourProcessSprints .steps__h6,
#ourProcessSprints .steps__h6--last,
#projectsLanding .projects__h1,
.button,
.button--work,
.day__activity,
.days__step,
.mainNav__link--main,
.text-button1,
.text-button3,
.text-day,
.text-nextStop,
.text-portfolio,
.text-step,
.viewport__h1,
h1,
h2,
h3,
h4,
h5 {
    font-family: Sofia Pro, Frutiger, Frutiger Linotype, Univers, Calibri, Gill Sans, Gill Sans MT, Myriad Pro, Myriad, DejaVu Sans Condensed, Liberation Sans, Nimbus Sans L, Tahoma, Geneva, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 700
}

#ourProcessSprints .steps__indicator,
#projectsLanding .projects__label,
.landingProjects .projects__company,
.mainNav__link--socmed,
.nextStop__label,
.overlay__pageNumber,
.text-backed,
.text-label,
.text-pageNumber,
h6 {
    font-family: Sofia Pro, Frutiger, Frutiger Linotype, Univers, Calibri, Gill Sans, Gill Sans MT, Myriad Pro, Myriad, DejaVu Sans Condensed, Liberation Sans, Nimbus Sans L, Tahoma, Geneva, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 600
}

#aboutUsCrew .crew__h6,
#aboutUsSkills .skills__list>li,
#projectsChallenge .challenge__clientInfo,
#projectsChallenge .challenge__clientList>li,
.button--white40,
.day__list>li,
.footer__disclaimer,
.overlay__hireText,
.text-button2,
.text-clientInfo,
.text-contact,
.text-experience,
.text-position,
.text-start {
    font-family: Sofia Pro, Frutiger, Frutiger Linotype, Univers, Calibri, Gill Sans, Gill Sans MT, Myriad Pro, Myriad, DejaVu Sans Condensed, Liberation Sans, Nimbus Sans L, Tahoma, Geneva, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400
}

.overlay__text,
.overlay__text--backToTop,
.text-scroll {
    font-family: Sofia Pro, Frutiger, Frutiger Linotype, Univers, Calibri, Gill Sans, Gill Sans MT, Myriad Pro, Myriad, DejaVu Sans Condensed, Liberation Sans, Nimbus Sans L, Tahoma, Geneva, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 300
}

#landingPackages .packages__p,
#ourProcessPost .post__p,
#ourProcessProcess .process__p,
#ourWorkHero .hero__h1,
#projectsChallenge .challenge__p,
.blurb__text,
.contact__p,
.landingProjects .projects__p,
.text-body1,
.text-body2,
.text-portfolioHead {
    font-family: "Source Serif Pro", Cambria, Hoefler Text, Utopia, "Liberation Serif", Nimbus Roman No9 L Regular, Times, Times New Roman, serif;
    font-weight: 400
}

h1 {
    font-size: 2.5rem;
    line-height: 1.3em
}

@media only screen and (min-width:1200px) {
    h1 {
        font-size: 3rem
    }
}

h2 {
    font-size: 2.25rem;
    line-height: 1.3em
}

@media only screen and (min-width:1200px) {
    h2 {
        font-size: 2.625rem
    }
}

h3 {
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.3em
}

@media only screen and (min-width:1200px) {
    h3 {
        font-size: 2.25rem
    }
}

h4 {
    font-size: 1.5rem;
    line-height: 1.5em
}

h4,
h5 {
    letter-spacing: -.02em
}

h5 {
    font-size: 1.125rem;
    line-height: 1em
}

@media only screen and (min-width:1200px) {
    h5 {
        font-size: 1.3125rem
    }
}

h6 {
    font-size: .875rem;
    line-height: 1.3em
}

#landingPackages .packages__p,
#ourProcessPost .post__p,
#ourProcessProcess .process__p,
#projectsChallenge .challenge__p,
.contact__p,
.landingProjects .projects__p,
.text-body1 {
    font-size: 1rem;
    line-height: 1.8em;
    margin-bottom: 1rem
}

@media only screen and (min-width:1200px) {
    #landingPackages .packages__p,
    #ourProcessPost .post__p,
    #ourProcessProcess .process__p,
    #projectsChallenge .challenge__p,
    .contact__p,
    .landingProjects .projects__p,
    .text-body1 {
        font-size: 1.125rem
    }
}

.blurb__text,
.text-body2 {
    font-size: 1.3125rem;
    line-height: 1.7em
}

#ourProcessSprints .steps__indicator,
#projectsLanding .projects__label,
.landingProjects .projects__company,
.mainNav__link--socmed,
.nextStop__label,
.overlay__pageNumber,
.text-label,
.text-pageNumber {
    font-size: .75rem;
    line-height: 1.3em;
    letter-spacing: .08em;
    text-transform: uppercase
}

@media only screen and (min-width:1200px) {
    #ourProcessSprints .steps__indicator,
    #projectsLanding .projects__label,
    .landingProjects .projects__company,
    .mainNav__link--socmed,
    .nextStop__label,
    .overlay__pageNumber,
    .text-label,
    .text-pageNumber {
        font-size: .8125rem
    }
}

.overlay__pageNumber,
.text-backed,
.text-pageNumber {
    letter-spacing: .08em
}

.text-backed {
    font-size: .6875rem;
    line-height: 1.3em;
    text-transform: uppercase
}

.button,
.text-button1 {
    font-size: 1rem;
    line-height: 1em
}

@media only screen and (min-width:1200px) {
    .button,
    .text-button1 {
        font-size: 1.125rem
    }
}

.button--white40,
.overlay__hireText,
.text-button2 {
    font-size: 1rem;
    line-height: 1em;
    font-weight: 600
}

.button--work,
.text-button3 {
    font-size: .875rem
}

.footer__disclaimer,
.overlay__text,
.overlay__text--backToTop,
.text-scroll,
.text-start {
    font-size: .875rem;
    line-height: 1.4em
}

.text-contact {
    font-size: .875rem;
    line-height: 1.7em
}

.text-nextStop {
    font-size: 3.75rem;
    line-height: 1em;
    letter-spacing: -.02em
}

@media only screen and (min-width:1200px) {
    .text-nextStop {
        font-size: 4.5rem
    }
}

#aboutUsHero .hero__h1,
#ourProcessHero .hero__h1,
#projectsLanding .projects__h1,
.mainNav__link--main,
.text-portfolio,
.viewport__h1 {
    font-size: 4rem;
    line-height: 1em;
    letter-spacing: -.02em
}

#aboutUsCrew .crew__h6,
#aboutUsSkills .skills__list>li,
#projectsChallenge .challenge__clientInfo,
#projectsChallenge .challenge__clientList>li,
.day__list>li,
.text-clientInfo {
    font-size: 1.30rem;
    line-height: 1.7em;
    font-weight: bolder !important;
}

.text-position {
    font-size: 1.20rem;
    line-height: 1.7em;
    font-weight: bolder !important;
}

.text-experience {
    font-size: 1rem;
    line-height: 1.7em;
    font-weight: bolder !important;
}

#ourWorkHero .hero__h1,
.text-portfolioHead {
    font-size: 1.5rem;
    line-height: 1.7em
}

#ourProcessSprints .steps__h6,
#ourProcessSprints .steps__h6--last,
.days__step,
.text-step {
    font-size: 1rem;
    line-height: 1.5em;
    letter-spacing: -.02em
}

@media only screen and (min-width:1200px) {
    #ourProcessSprints .steps__h6,
    #ourProcessSprints .steps__h6--last,
    .days__step,
    .text-step {
        font-size: 1.125rem
    }
}

.day__activity,
.text-day {
    font-size: 2rem;
    line-height: 1em;
    letter-spacing: -.01em
}

.text-lineBefore {
    position: relative;
    display: flex;
    align-items: center
}

.text-lineBefore:before {
    position: absolute;
    left: -2.375rem;
    content: "";
    width: 1.875rem;
    height: .0625rem;
    background-color: var(--color-white20)
}

.button,
.days__step:focus,
.days__step:hover,
.footer__disclaimer,
.mainNav__link--main:active,
.mainNav__link--socmed:active,
.mainNav__link:active,
.nextStop__label,
.text-primary {
    color: #ffe02c;
}

.days__step:active,
.text-secondary {
    color: var(--color-secondary)
}

#aboutUsCrew .crew__h2,
#aboutUsCrew .crew__h6,
#aboutUsSkills .skills__list>li,
#aboutUsTeam .team__h2,
#landingFeatures .feature__h3,
#landingHero .hero__h1,
#landingPackages .packages__h2,
#landingPackages .packages__p,
#ourProcessPost .post__h3,
#ourProcessPost .post__h4,
#ourProcessPost .post__p,
#ourProcessProcess .process__h3,
#ourProcessProcess .process__h4,
#ourProcessProcess .process__p,
#ourProcessSprints .sprints__h1,
#ourProcessSprints .steps__h6,
#ourProcessSprints .steps__h6--last,
#ourProcessSprints .steps__indicator,
#ourWorkHero .hero__h1,
#ourWorkWorks .work__h4,
#ourWorkWorks .work__h4--bottom,
#projectsChallenge .challenge__clientInfo,
#projectsChallenge .challenge__clientList>li,
#projectsChallenge .challenge__h2,
#projectsChallenge .challenge__p,
#projectsLanding .projects__h1,
#projectsNav .nav__h2,
#projectsProcess .process__h3,
#projectsProcess .process__h4,
#projectsResults .results__h3,
#projectsResults .results__h4,
#projectsResults .results__h5,
.blurb__text,
.button--nav,
.button--work,
.contact__h2,
.day__activity,
.day__list>li,
.days__step,
.footer__h1,
.footer__h4,
.footer__link,
.landingProjects .projects__h2,
.landingProjects .projects__p,
.mainNav__link,
.mainNav__link--main,
.mainNav__link--socmed,
.nextStop__h1,
.overlay__hireText,
.overlay__pageNumber,
.text-white {
    color: var(--color-white)
}

.text-white20 {
    color: var(--color-white20)
}

.text-white30 {
    color: var(--color-white30)
}

.button--white40,
.text-white40 {
    color: var(--color-white40)
}

.text-white50 {
    color: var(--color-white50)
}

.text-white60 {
    color: var(--color-white60)
}

.contact__p,
.text-white75 {
    color: var(--color-white75)
}

#projectsLanding .projects__label,
.text-black20 {
    color: var(--color-black20)
}

.landingProjects .projects__company,
.text-brand {
    color: var(--color-brand, var(--color-primary))
}

#aboutUsHero .hero__h1,
#ourProcessHero .hero__h1,
.footer__h3,
.text-gradient,
.viewport__h1 {
    background: -webkit-linear-gradient(0deg, #ffd201, #ffffff);
    background: -o-gradient(transparent, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffd201;
}

.container {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding-right: 8px;
    padding-left: 8px
}

.container-fluid {
    padding-right: 16px;
    padding-left: 16px
}

@media only screen and (min-width:576px) {
    .container {
        width: 560px;
        max-width: 100%
    }
}

@media only screen and (min-width:768px) {
    .container {
        width: 752px;
        max-width: 100%
    }
}

@media only screen and (min-width:992px) {
    .container {
        width: 976px;
        max-width: 100%
    }
}

@media only screen and (min-width:1200px) {
    .container {
        width: 1184px;
        max-width: 100%
    }
}

.row {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -8px;
    margin-left: -8px
}

.row.reverse {
    flex-direction: row-reverse
}

.col.reverse {
    flex-direction: column-reverse
}

.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-offset-0,
.col-lg-offset-1,
.col-lg-offset-2,
.col-lg-offset-3,
.col-lg-offset-4,
.col-lg-offset-5,
.col-lg-offset-6,
.col-lg-offset-7,
.col-lg-offset-8,
.col-lg-offset-9,
.col-lg-offset-10,
.col-lg-offset-11,
.col-lg-offset-12,
.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-offset-0,
.col-md-offset-1,
.col-md-offset-2,
.col-md-offset-3,
.col-md-offset-4,
.col-md-offset-5,
.col-md-offset-6,
.col-md-offset-7,
.col-md-offset-8,
.col-md-offset-9,
.col-md-offset-10,
.col-md-offset-11,
.col-md-offset-12,
.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-offset-0,
.col-sm-offset-1,
.col-sm-offset-2,
.col-sm-offset-3,
.col-sm-offset-4,
.col-sm-offset-5,
.col-sm-offset-6,
.col-sm-offset-7,
.col-sm-offset-8,
.col-sm-offset-9,
.col-sm-offset-10,
.col-sm-offset-11,
.col-sm-offset-12,
.col-xl,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-offset-0,
.col-xl-offset-1,
.col-xl-offset-2,
.col-xl-offset-3,
.col-xl-offset-4,
.col-xl-offset-5,
.col-xl-offset-6,
.col-xl-offset-7,
.col-xl-offset-8,
.col-xl-offset-9,
.col-xl-offset-10,
.col-xl-offset-11,
.col-xl-offset-12,
.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
    flex-basis: 100%;
    padding-right: 8px;
    padding-left: 8px;
    max-width: 100%
}

.col-xs {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%
}

.col-xs-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}

.col-xs-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}

.col-xs-3 {
    flex-basis: 25%;
    max-width: 25%
}

.col-xs-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}

.col-xs-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%
}

.col-xs-6 {
    flex-basis: 50%;
    max-width: 50%
}

.col-xs-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%
}

.col-xs-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%
}

.col-xs-9 {
    flex-basis: 75%;
    max-width: 75%
}

.col-xs-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%
}

.col-xs-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%
}

.col-xs-12 {
    flex-basis: 100%;
    max-width: 100%
}

.col-xs-offset-0 {
    margin-left: 0
}

.col-xs-offset-1 {
    margin-left: 8.33333333%
}

.col-xs-offset-2 {
    margin-left: 16.66666667%
}

.col-xs-offset-3 {
    margin-left: 25%
}

.col-xs-offset-4 {
    margin-left: 33.33333333%
}

.col-xs-offset-5 {
    margin-left: 41.66666667%
}

.col-xs-offset-6 {
    margin-left: 50%
}

.col-xs-offset-7 {
    margin-left: 58.33333333%
}

.col-xs-offset-8 {
    margin-left: 66.66666667%
}

.col-xs-offset-9 {
    margin-left: 75%
}

.col-xs-offset-10 {
    margin-left: 83.33333333%
}

.col-xs-offset-11 {
    margin-left: 91.66666667%
}

.start-xs {
    justify-content: flex-start;
    text-align: start
}

.center-xs {
    justify-content: center;
    text-align: center
}

.end-xs {
    justify-content: flex-end;
    text-align: end
}

.top-xs {
    align-items: flex-start
}

.middle-xs {
    align-items: center
}

.bottom-xs {
    align-items: flex-end
}

.around-xs {
    justify-content: space-around
}

.between-xs {
    justify-content: space-between
}

.first-xs {
    order: -1
}

.last-xs {
    order: 1
}

.initial-order-xs {
    order: 0
}

@media only screen and (min-width:576px) {
    .col-sm {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-sm-1 {
        flex-basis: 8.33333333%;
        max-width: 8.33333333%
    }
    .col-sm-2 {
        flex-basis: 16.66666667%;
        max-width: 16.66666667%
    }
    .col-sm-3 {
        flex-basis: 25%;
        max-width: 25%
    }
    .col-sm-4 {
        flex-basis: 33.33333333%;
        max-width: 33.33333333%
    }
    .col-sm-5 {
        flex-basis: 41.66666667%;
        max-width: 41.66666667%
    }
    .col-sm-6 {
        flex-basis: 50%;
        max-width: 50%
    }
    .col-sm-7 {
        flex-basis: 58.33333333%;
        max-width: 58.33333333%
    }
    .col-sm-8 {
        flex-basis: 66.66666667%;
        max-width: 66.66666667%
    }
    .col-sm-9 {
        flex-basis: 75%;
        max-width: 75%
    }
    .col-sm-10 {
        flex-basis: 83.33333333%;
        max-width: 83.33333333%
    }
    .col-sm-11 {
        flex-basis: 91.66666667%;
        max-width: 91.66666667%
    }
    .col-sm-12 {
        flex-basis: 100%;
        max-width: 100%
    }
    .col-sm-offset-0 {
        margin-left: 0
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%
    }
    .col-sm-offset-2 {
        margin-left: 16.66666667%
    }
    .col-sm-offset-3 {
        margin-left: 25%
    }
    .col-sm-offset-4 {
        margin-left: 33.33333333%
    }
    .col-sm-offset-5 {
        margin-left: 41.66666667%
    }
    .col-sm-offset-6 {
        margin-left: 50%
    }
    .col-sm-offset-7 {
        margin-left: 58.33333333%
    }
    .col-sm-offset-8 {
        margin-left: 66.66666667%
    }
    .col-sm-offset-9 {
        margin-left: 75%
    }
    .col-sm-offset-10 {
        margin-left: 83.33333333%
    }
    .col-sm-offset-11 {
        margin-left: 91.66666667%
    }
    .start-sm {
        justify-content: flex-start;
        text-align: start
    }
    .center-sm {
        justify-content: center;
        text-align: center
    }
    .end-sm {
        justify-content: flex-end;
        text-align: end
    }
    .top-sm {
        align-items: flex-start
    }
    .middle-sm {
        align-items: center
    }
    .bottom-sm {
        align-items: flex-end
    }
    .around-sm {
        justify-content: space-around
    }
    .between-sm {
        justify-content: space-between
    }
    .first-sm {
        order: -1
    }
    .last-sm {
        order: 1
    }
    .initial-order-sm {
        order: 0
    }
}

@media only screen and (min-width:768px) {
    .col-md,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-offset-0,
    .col-md-offset-1,
    .col-md-offset-2,
    .col-md-offset-3,
    .col-md-offset-4,
    .col-md-offset-5,
    .col-md-offset-6,
    .col-md-offset-7,
    .col-md-offset-8,
    .col-md-offset-9,
    .col-md-offset-10,
    .col-md-offset-11,
    .col-md-offset-12 {
        box-sizing: border-box;
        flex: 0 0 auto;
        padding-right: 8px;
        padding-left: 8px
    }
    .col-md {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-md-1 {
        flex-basis: 8.33333333%;
        max-width: 8.33333333%
    }
    .col-md-2 {
        flex-basis: 16.66666667%;
        max-width: 16.66666667%
    }
    .col-md-3 {
        flex-basis: 25%;
        max-width: 25%
    }
    .col-md-4 {
        flex-basis: 33.33333333%;
        max-width: 33.33333333%
    }
    .col-md-5 {
        flex-basis: 41.66666667%;
        max-width: 41.66666667%
    }
    .col-md-6 {
        flex-basis: 50%;
        max-width: 50%
    }
    .col-md-7 {
        flex-basis: 58.33333333%;
        max-width: 58.33333333%
    }
    .col-md-8 {
        flex-basis: 66.66666667%;
        max-width: 66.66666667%
    }
    .col-md-9 {
        flex-basis: 75%;
        max-width: 75%
    }
    .col-md-10 {
        flex-basis: 83.33333333%;
        max-width: 83.33333333%
    }
    .col-md-11 {
        flex-basis: 91.66666667%;
        max-width: 91.66666667%
    }
    .col-md-12 {
        flex-basis: 100%;
        max-width: 100%
    }
    .col-md-offset-0 {
        margin-left: 0
    }
    .col-md-offset-1 {
        margin-left: 8.33333333%
    }
    .col-md-offset-2 {
        margin-left: 16.66666667%
    }
    .col-md-offset-3 {
        margin-left: 25%
    }
    .col-md-offset-4 {
        margin-left: 33.33333333%
    }
    .col-md-offset-5 {
        margin-left: 41.66666667%
    }
    .col-md-offset-6 {
        margin-left: 50%
    }
    .col-md-offset-7 {
        margin-left: 58.33333333%
    }
    .col-md-offset-8 {
        margin-left: 66.66666667%
    }
    .col-md-offset-9 {
        margin-left: 75%
    }
    .col-md-offset-10 {
        margin-left: 83.33333333%
    }
    .col-md-offset-11 {
        margin-left: 91.66666667%
    }
    .start-md {
        justify-content: flex-start;
        text-align: start
    }
    .center-md {
        justify-content: center;
        text-align: center
    }
    .end-md {
        justify-content: flex-end;
        text-align: end
    }
    .top-md {
        align-items: flex-start
    }
    .middle-md {
        align-items: center
    }
    .bottom-md {
        align-items: flex-end
    }
    .around-md {
        justify-content: space-around
    }
    .between-md {
        justify-content: space-between
    }
    .first-md {
        order: -1
    }
    .last-md {
        order: 1
    }
    .initial-order-md {
        order: 0
    }
}

@media only screen and (min-width:992px) {
    .col-lg,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-offset-0,
    .col-lg-offset-1,
    .col-lg-offset-2,
    .col-lg-offset-3,
    .col-lg-offset-4,
    .col-lg-offset-5,
    .col-lg-offset-6,
    .col-lg-offset-7,
    .col-lg-offset-8,
    .col-lg-offset-9,
    .col-lg-offset-10,
    .col-lg-offset-11,
    .col-lg-offset-12 {
        box-sizing: border-box;
        flex: 0 0 auto;
        padding-right: 8px;
        padding-left: 8px
    }
    .col-lg {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-lg-1 {
        flex-basis: 8.33333333%;
        max-width: 8.33333333%
    }
    .col-lg-2 {
        flex-basis: 16.66666667%;
        max-width: 16.66666667%
    }
    .col-lg-3 {
        flex-basis: 25%;
        max-width: 25%
    }
    .col-lg-4 {
        flex-basis: 33.33333333%;
        max-width: 33.33333333%
    }
    .col-lg-5 {
        flex-basis: 41.66666667%;
        max-width: 41.66666667%
    }
    .col-lg-6 {
        flex-basis: 50%;
        max-width: 50%
    }
    .col-lg-7 {
        flex-basis: 58.33333333%;
        max-width: 58.33333333%
    }
    .col-lg-8 {
        flex-basis: 66.66666667%;
        max-width: 66.66666667%
    }
    .col-lg-9 {
        flex-basis: 75%;
        max-width: 75%
    }
    .col-lg-10 {
        flex-basis: 83.33333333%;
        max-width: 83.33333333%
    }
    .col-lg-11 {
        flex-basis: 91.66666667%;
        max-width: 91.66666667%
    }
    .col-lg-12 {
        flex-basis: 100%;
        max-width: 100%
    }
    .col-lg-offset-0 {
        margin-left: 0
    }
    .col-lg-offset-1 {
        margin-left: 8.33333333%
    }
    .col-lg-offset-2 {
        margin-left: 16.66666667%
    }
    .col-lg-offset-3 {
        margin-left: 25%
    }
    .col-lg-offset-4 {
        margin-left: 33.33333333%
    }
    .col-lg-offset-5 {
        margin-left: 41.66666667%
    }
    .col-lg-offset-6 {
        margin-left: 50%
    }
    .col-lg-offset-7 {
        margin-left: 58.33333333%
    }
    .col-lg-offset-8 {
        margin-left: 66.66666667%
    }
    .col-lg-offset-9 {
        margin-left: 75%
    }
    .col-lg-offset-10 {
        margin-left: 83.33333333%
    }
    .col-lg-offset-11 {
        margin-left: 91.66666667%
    }
    .start-lg {
        justify-content: flex-start;
        text-align: start
    }
    .center-lg {
        justify-content: center;
        text-align: center
    }
    .end-lg {
        justify-content: flex-end;
        text-align: end
    }
    .top-lg {
        align-items: flex-start
    }
    .middle-lg {
        align-items: center
    }
    .bottom-lg {
        align-items: flex-end
    }
    .around-lg {
        justify-content: space-around
    }
    .between-lg {
        justify-content: space-between
    }
    .first-lg {
        order: -1
    }
    .last-lg {
        order: 1
    }
    .initial-order-lg {
        order: 0
    }
}

@media only screen and (min-width:1200px) {
    .col-xl,
    .col-xl-1,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl-offset-0,
    .col-xl-offset-1,
    .col-xl-offset-2,
    .col-xl-offset-3,
    .col-xl-offset-4,
    .col-xl-offset-5,
    .col-xl-offset-6,
    .col-xl-offset-7,
    .col-xl-offset-8,
    .col-xl-offset-9,
    .col-xl-offset-10,
    .col-xl-offset-11,
    .col-xl-offset-12 {
        box-sizing: border-box;
        flex: 0 0 auto;
        padding-right: 8px;
        padding-left: 8px
    }
    .col-xl {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-xl-1 {
        flex-basis: 8.33333333%;
        max-width: 8.33333333%
    }
    .col-xl-2 {
        flex-basis: 16.66666667%;
        max-width: 16.66666667%
    }
    .col-xl-3 {
        flex-basis: 25%;
        max-width: 25%
    }
    .col-xl-4 {
        flex-basis: 33.33333333%;
        max-width: 33.33333333%
    }
    .col-xl-5 {
        flex-basis: 41.66666667%;
        max-width: 41.66666667%
    }
    .col-xl-6 {
        flex-basis: 50%;
        max-width: 50%
    }
    .col-xl-7 {
        flex-basis: 58.33333333%;
        max-width: 58.33333333%
    }
    .col-xl-8 {
        flex-basis: 66.66666667%;
        max-width: 66.66666667%
    }
    .col-xl-9 {
        flex-basis: 75%;
        max-width: 75%
    }
    .col-xl-10 {
        flex-basis: 83.33333333%;
        max-width: 83.33333333%
    }
    .col-xl-11 {
        flex-basis: 91.66666667%;
        max-width: 91.66666667%
    }
    .col-xl-12 {
        flex-basis: 100%;
        max-width: 100%
    }
    .col-xl-offset-0 {
        margin-left: 0
    }
    .col-xl-offset-1 {
        margin-left: 8.33333333%
    }
    .col-xl-offset-2 {
        margin-left: 16.66666667%
    }
    .col-xl-offset-3 {
        margin-left: 25%
    }
    .col-xl-offset-4 {
        margin-left: 33.33333333%
    }
    .col-xl-offset-5 {
        margin-left: 41.66666667%
    }
    .col-xl-offset-6 {
        margin-left: 50%
    }
    .col-xl-offset-7 {
        margin-left: 58.33333333%
    }
    .col-xl-offset-8 {
        margin-left: 66.66666667%
    }
    .col-xl-offset-9 {
        margin-left: 75%
    }
    .col-xl-offset-10 {
        margin-left: 83.33333333%
    }
    .col-xl-offset-11 {
        margin-left: 91.66666667%
    }
    .start-xl {
        justify-content: flex-start;
        text-align: start
    }
    .center-xl {
        justify-content: center;
        text-align: center
    }
    .end-xl {
        justify-content: flex-end;
        text-align: end
    }
    .top-xl {
        align-items: flex-start
    }
    .middle-xl {
        align-items: center
    }
    .bottom-xl {
        align-items: flex-end
    }
    .around-xl {
        justify-content: space-around
    }
    .between-xl {
        justify-content: space-between
    }
    .first-xl {
        order: -1
    }
    .last-xl {
        order: 1
    }
    .initial-order-xl {
        order: 0
    }
}

@media only screen and (max-width:575px) {
    .hidden-xs {
        display: none
    }
}

@media only screen and (min-width:576px) and (max-width:767px) {
    .hidden-sm {
        display: none
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .hidden-md {
        display: none
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .hidden-lg {
        display: none
    }
}

@media only screen and (min-width:1200px) {
    .hidden-xl {
        display: none
    }
}

.button {
    text-decoration: none;
    border: 0;
    padding: 0;
    transition: color .1s ease-in-out;
    display: inline-block;
    overflow: visible;
    cursor: pointer
}

.button__image {
    margin-left: 1rem;
    transition: transform .1s ease-in-out
}

.button__image path {
    transition: stroke .1s ease-in-out;
    stroke: currentColor
}

.button__image--reversed {
    margin: 0 1rem 0 0;
    transform: scaleX(-1)
}

.button:focus,
.button:hover {
    outline: none;
    color: var(--color-brand, var(--color-secondary))
}

.button:focus .button__image,
.button:hover .button__image {
    transform: translateX(.5rem)
}

.button:focus .button__image--reversed,
.button:hover .button__image--reversed {
    transform: translateX(-.5rem) scaleX(-1)
}

.button:active {
    outline: none
}

.button:active .button__image {
    transform: translateX(1rem)
}

.button:active .button__image--reversed {
    transform: translateX(-1rem) scaleX(-1)
}

.button--white40:focus,
.button--white40:hover {
    color: var(--color-brand, var(--color-primary))
}

.button--secondary:focus,
.button--secondary:hover {
    color: var(--color-secondary)
}

.button--work {
    position: absolute;
    bottom: .3125rem;
    right: 0;
    padding-top: 1.25rem;
    z-index: -1;
    transition: transform .1s ease-in-out, color .1s ease-in-out
}

.button--nav:focus,
.button--nav:hover {
    color: #dcaf0b;
}

.button--nav .button__image path {
    stroke: #dcaf0b;
}

.button__hover:focus,
.button__hover:hover {
    outline: none
}

.button__hover:focus .button,
.button__hover:hover .button {
    outline: none;
    color: var(--color-brand, var(--color-secondary))
}

.button__hover:focus .button .button__image,
.button__hover:hover .button .button__image {
    transform: translateX(.5rem)
}

.button__hover:focus .button .button__image--reversed,
.button__hover:hover .button .button__image--reversed {
    transform: translateX(-.5rem) scaleX(-1)
}

.button__hover:focus .button--white40,
.button__hover:hover .button--white40 {
    color: var(--color-brand, var(--color-primary))
}

.button__hover:active,
.button__hover:active .button,
.button__hover:active .button--white40 {
    outline: none
}

.button__hover:active .button--white40 .button__image,
.button__hover:active .button .button__image {
    transform: translateX(1rem)
}

.button__hover:active .button--white40 .button__image--reversed,
.button__hover:active .button .button__image--reversed {
    transform: translateX(-1rem) scaleX(-1)
}

.overlay {
    height: 0;
    width: 0
}

.overlay__logo--landing {
    display: none;
    cursor: pointer
}

.overlay__sides {
    margin: 3.125rem 0;
    position: fixed;
    top: 0;
    z-index: 100;
    height: calc(100vh - 6.25rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.overlay__sides--left {
    left: 2%;
    align-items: flex-start;
    z-index: 200;
    width: 12%;
}

.overlay__sides--right {
    right: 3.125rem;
    align-items: flex-end
}

.overlay__scroll {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.overlay__textHolder {
    height: 0;
    padding-bottom: 100%;
    overflow: hidden
}

.overlay__text,
.overlay__text--backToTop {
    color: var(--color-white);
    opacity: .4;
    transform: rotate(-90deg) translate(-37%, 140%);
    display: block
}

.overlay__text--backToTop {
    transform: rotate(-90deg) translate(-115%, 140%)
}

.overlay__arrow {
    margin-top: 1.875rem
}

.overlay__hireText {
    transition: color .1s ease-in-out
}

.overlay__hire {
    border: .125rem solid #dcaf0b;
    border-radius: .5rem;
    padding: .5rem 1.5rem;
    transition: background-color .1s ease-in-out;
    cursor: pointer
}

.overlay__hire:hover {
    background-color: #dcaf0b;
}

.overlay__hire:hover .overlay__hireText {
    color: #000000 !important;
}

.overlay__active {
    display: flex;
    align-items: center;
    position: absolute;
    right: .0625rem;
    transform: translateY(0);
    z-index: 1
}

.overlay__pageNumber {
    margin-right: .625rem;
    display: flex;
    height: 17px;
    line-height: 17px;
    overflow: hidden
}

.overlay__pageNumber--left,
.overlay__pageNumber--middle,
.overlay__pageNumber--right {
    width: 1ch;
    display: flex;
    flex-direction: column;
    align-items: center
}

.overlay__scrollbar {
    height: 32vh;
    position: relative;
    display: none
}

.overlay__activeBar,
.overlay__bar {
    height: 3.55556vh;
    width: .125rem;
    background-color: #ffd201;
    border: none;
    border-radius: .25rem
}

.overlay__bar {
    background-color: var(--color-white20)
}

.overlay__bar,
.overlay__hitboxes {
    position: absolute;
    height: 111%;
    top: 0;
    right: 0
}

.overlay__hitboxes {
    width: calc(3ch + .75rem);
    z-index: 2;
    cursor: pointer
}

.overlay__hitbox {
    height: 11.11111%;
    width: 100%
}

.overlay__dribbble path {
    transition: fill .1s ease
}

.overlay__dribbble:hover path {
    fill: #ffffff;
}

.hamburger__bar--bottom,
.hamburger__bar--middle,
.hamburger__bar--top {
    display: block;
    position: absolute;
    height: 2px;
    border-radius: 6px;
    background-color: #dcaf0b;
    transition: background-color .1s ease
}

.hamburger {
    background-color: transparent;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0
}

.hamburger__container {
    position: relative;
    width: 24px;
    height: 18px
}

.hamburger__bar--top {
    width: 16px;
    top: 0
}

.hamburger__bar--middle {
    width: 24px;
    top: 8px
}

.hamburger__bar--bottom {
    width: 16px;
    bottom: 0
}

.hamburger:focus,
.hamburger:hover {
    outline: none
}

.hamburger:focus .hamburger__bar--bottom,
.hamburger:focus .hamburger__bar--middle,
.hamburger:focus .hamburger__bar--top,
.hamburger:hover .hamburger__bar--bottom,
.hamburger:hover .hamburger__bar--middle,
.hamburger:hover .hamburger__bar--top {
    background-color: var(--color-brand, #ffe02c);
}

.filledButton {
    background: linear-gradient(90deg, #c45af4, #7163de 33%, #c45af4);
    background-size: 300% auto;
    padding: 1rem;
    border-radius: .5rem;
    text-decoration: none;
    margin-right: 1.25rem;
    transition: background-position .2s ease-in-out;
    cursor: pointer;
    border: 0;
    font-weight: 600;
    display: inline-block
}

.filledButton:focus,
.filledButton:hover {
    background-position: -66%
}

.filledButton:active {
    background-position: -100%
}

.nextStop {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.nextStop__h1 {
    margin: 1rem 0 0;
    transition: color .1s ease-in-out
}

.nextStop__label {
    transition: transform color .1s ease-in-out ease-in-out .1s;
    display: block
}

.nextStop__link {
    text-decoration: none
}

.nextStop__link:focus,
.nextStop__link:hover {
    outline: none
}

.nextStop__link:focus .nextStop__h1,
.nextStop__link:hover .nextStop__h1 {
    color: #7d7c78;
}

.nextStop__link:active .nextStop__h1,
.nextStop__link:active .nextStop__label {
    color: var(--color-secondary)
}

.nextStop__link:active .nextStop__h1 {
    transition-delay: .05s
}

.break,
.break--gradient,
.break--small {
    width: 2.5rem;
    height: .25rem;
    border: transparent;
    background-color: var(--color-brandLight, #dcaf0b);
    margin: 0
}

.break--small {
    margin-bottom: 2rem;
    width: 1rem;
    height: .125rem
}

.break--gradient {
    background: var(--color-gradient);
    margin: 1.875rem auto 0
}

.footer__holder {
    border: .0625rem solid var(--color-border);
    padding: 0;
    display: flex;
    flex-wrap: wrap
}

.footer__half,
.footer__half--left,
.footer__half--leftFlex,
.footer__half--right {
    width: 50%
}

.footer__half--left,
.footer__half--leftFlex {
    border-right: .0625rem solid var(--color-border)
}

.footer__half--leftFlex {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.footer__half--right {
    padding: 2.5rem
}

.footer__half--leftFull {
    width: 50%;
    padding: 2.5rem;
    margin: auto 0
}

.footer__top {
    padding: 2.5rem
}

@media only screen and (max-width:991px) {
    .footer__bottom {
        height: 32%
    }
}

.footer__rightTop {
    padding: 2.5rem;
    border-left: .0625rem solid var(--color-border);
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column
}

@media only screen and (min-width:1200px) {
    .footer__rightTop {
        height: auto
    }
}

.footer__rightBottom {
    border-top: .0625rem solid var(--color-border);
    border-left: .0625rem solid var(--color-border);
    padding: 2.5rem;
    display: none
}

@media only screen and (min-width:1200px) {
    .footer__rightBottom {
        display: flex;
        justify-content: space-between
    }
}

.footer__whole {
    border-top: .0625rem solid var(--color-border);
    width: 100%;
    padding: 2.5rem;
    display: flex;
    justify-content: space-around
}

@media only screen and (min-width:1200px) {
    .footer__whole {
        display: none
    }
}

.footer__link {
    text-decoration: none;
    transition: color .1s ease-in-out;
    margin: .5rem 0
}

.footer__link:focus,
.footer__link:hover {
    outline: none;
    color: #ffd201;
}

.footer__link:active {
    color: var(--color-secondary)
}

.footer__h1 {
    letter-spacing: -.02em;
    margin: 0 0 1.5rem
}

.footer__h3 {
    margin: 0 0 2.5rem
}

.footer__h4 {
    margin: 0 0 3rem;
    font-size: 1.85rem
}

@media only screen and (min-width:1200px) {
    .footer__h4 {
        margin: 0 0 1.5rem;
        font-size: 1.5rem
    }
}

.footer__image {
    width: 100%
}

@media only screen and (max-width:991px) {
    .footer__image {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.footer__contactInfo {
    margin-bottom: 2.5rem
}

.footer__contact {
    margin-bottom: .625rem
}

.footer__contact--sub {
    margin: 0
}

.footer__disclaimer {
    margin-top: 1rem
}

@media only screen and (min-width:1200px) {
    .footer__disclaimer {
        margin-top: 0
    }
}

.footer__icons {
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media only screen and (min-width:992px) {
    .footer__icons {
        display: block
    }
}

.footer__icon,
.footer__icon--dribbble,
.footer__icon--fb,
.footer__icon--github,
.footer__icon--insta,
.footer__icon--medium {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    margin-right: 1.875rem
}

.footer__icon--dribbble svg,
.footer__icon--fb svg,
.footer__icon--github svg,
.footer__icon--insta svg,
.footer__icon--medium svg,
.footer__icon svg {
    height: 100%;
    width: 100%
}

.footer__icon--dribbble path,
.footer__icon--fb path,
.footer__icon--github path,
.footer__icon--insta path,
.footer__icon--medium path,
.footer__icon path {
    transition: fill .1s ease-in-out
}

.footer__icon--dribbble:active,
.footer__icon--fb:active,
.footer__icon--github:active,
.footer__icon--insta:active,
.footer__icon--medium:active,
.footer__icon:active {
    outline: none
}

.footer__icon--dribbble:active path,
.footer__icon--fb:active path,
.footer__icon--github:active path,
.footer__icon--insta:active path,
.footer__icon--medium:active path,
.footer__icon:active path {
    fill: var(--color-secondary)
}

.footer__icon--dribbble:focus path,
.footer__icon--dribbble:hover path {
    fill: #ea4c89
}

.footer__icon--insta:focus path,
.footer__icon--insta:hover path {
    fill: #f10176
}

.footer__icon--fb:focus path,
.footer__icon--fb:hover path {
    fill: #4267b2
}

.footer__icon--github {
    margin-right: 0
}

.footer__icon--github:focus path,
.footer__icon--github:hover path {
    fill: var(--color-white75)
}

.footer__icon--medium:focus path,
.footer__icon--medium:hover path {
    fill: #e8f3ec
}

.blurb {
    padding: 3.125rem 1.875rem
}

.blurb--bordered {
    border-top: .0625rem solid var(--color-border);
    border-bottom: .0625rem solid var(--color-border)
}

.blurb--small {
    padding: 3.125rem 6.75rem
}

.blurb__text {
    text-align: center
}

.shapes {
    width: 100%;
    height: 100%
}

.shapes,
.shapes--landing {
    background-image: url(../../images/parallax-background.8bbdb8febe8c543c62812bb7ce2b6711.svg);
    background-size: 100%;
    pointer-events: none;
    opacity: 35%;
}

.shapes--landing {
    z-index: 90;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.shapes__container {
    position: absolute;
    width: 100%;
    height: 200%;
    z-index: 90;
    pointer-events: none;
    overflow: hidden
}

.shapes__trigger {
    overflow: hidden
}

.fullpage {
    position: absolute;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    width: 100%
}

.fullpage__window {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0
}

.reveal__container {
    overflow: hidden
}

span {
    display: inline-block
}

.lottie__heroHolder {
    position: absolute;
    width: 100%;
    height: auto;
    overflow: hidden
}

.lottie__hero,
.lottie__hero--about,
.lottie__hero--diab,
.lottie__hero--flash,
.lottie__hero--portfolio,
.lottie__hero--spenmo,
.lottie__hero--sprint,
.lottie__hero--tightrope {
    position: absolute;
    width: 80%;
    z-index: -1;
    opacity: .1
}

.lottie__hero--spenmo {
    z-index: 0;
    top: 10%;
    opacity: .5;
    width: 70%
}

@media only screen and (min-width:992px) {
    .lottie__hero--spenmo {
        top: 7%;
        opacity: .4
    }
}

@media only screen and (min-width:1200px) {
    .lottie__hero--spenmo {
        top: -2%;
        opacity: .3
    }
}

.lottie__hero--diab {
    width: 110%;
    z-index: 0;
    top: 10%;
    opacity: .6
}

@media only screen and (min-width:992px) {
    .lottie__hero--diab {
        top: 7%;
        opacity: .5
    }
}

@media only screen and (min-width:1200px) {
    .lottie__hero--diab {
        top: 2%;
        opacity: .4
    }
}

.lottie__hero--tightrope {
    z-index: 0;
    width: 150%;
    top: 10%;
    opacity: .6
}

@media only screen and (min-width:992px) {
    .lottie__hero--tightrope {
        top: 7%;
        opacity: .5
    }
}

@media only screen and (min-width:1200px) {
    .lottie__hero--tightrope {
        top: 5%;
        opacity: .4
    }
}

.lottie__hero--flash {
    z-index: 0;
    top: 10%;
    opacity: .6;
    width: 110%
}

@media only screen and (min-width:992px) {
    .lottie__hero--flash {
        top: 7%;
        opacity: .5
    }
}

@media only screen and (min-width:1200px) {
    .lottie__hero--flash {
        top: 5%;
        opacity: .4
    }
}

.lottie__hero--sprint {
    position: unset;
    width: 110%;
    transform: translateX(-5%)
}

.lottie__hero--about {
    padding-bottom: 5%
}

.smoothScroll__wrapper {
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.smoothScroll__container {
    position: absolute;
    overflow: hidden;
    z-index: 10;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    width: 100%
}

.mainNav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background-color: var(--color-bgDark);
    display: none
}

.mainNav__left {
    align-items: flex-start
}

.mainNav__left,
.mainNav__right {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.mainNav__right {
    align-items: flex-end;
    padding-bottom: 70px
}

.mainNav__link,
.mainNav__link--main,
.mainNav__link--socmed {
    margin-bottom: 1.5rem;
    text-decoration: none;
    opacity: .3;
    transition: opacity .1s ease, color .1s ease
}

.mainNav__link--main:focus,
.mainNav__link--main:hover,
.mainNav__link--socmed:focus,
.mainNav__link--socmed:hover,
.mainNav__link:focus,
.mainNav__link:hover {
    opacity: 1;
    outline: 0
}

.mainNav__link--last {
    margin-bottom: 4.375rem
}

.mainNav__link--active {
    opacity: 1
}

.mainNav__link--socmed {
    padding: 8px 0 8px 8px;
    margin-bottom: .5rem
}

.contact {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    background-color: var(--color-bgDark);
    /*background-image: url(images/contact-background.f963545a506f60a6fdba2ad6e497c837.png);*/
    background-position: 100%;
    background-size: auto 75%;
    background-repeat: no-repeat;
    height: 100vh;
    display: none;
    align-items: center
}

.contact__h2 {
    margin: 1.25rem 0
}

.contact__p {
    margin: 1.25rem 0 2.5rem
}

.viewport {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-bg);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

@media only screen and (min-width:768px) {
    .viewport {
        display: none
    }
}

.viewport__container {
    width: 50%;
    text-align: center;
    background: url(../../images/bg.1a360c3a9d9a47dac7c0089525b07d45.png);
    background-position: top;
    background-size: 75%;
    background-repeat: no-repeat;
    padding: 4rem 0
}

.viewport__h1 {
    margin: .625rem 0 1.25rem
}

.viewport__img {
    margin-bottom: 1.875rem
}

.transition {
    z-index: 5000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    display: none;
    overflow: hidden
}

.transition__main {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-bgDark);
    height: 100%;
    width: 100%
}

#awwwards {
    position: absolute;
    bottom: 21.5vh;
    width: 90px;
    height: 135px;
    text-indent: -666em;
    overflow: hidden;
    z-index: 999;
    transition: all 1s ease
}

#awwwards.top {
    top: 20px
}

#awwwards.left {
    left: 0
}

#awwwards a {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 90px;
    height: 135px;
    background-repeat: no-repeat;
    background-size: 90px 135px
}

#awwwards.honorable.white.left a {
    background-image: url(../../images/awwwards_honorable_white_left.8dd427f86b43003a3b8927a2626e2d27.png)
}

@media only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
    #awwwards.honorable.white.left a {
        background-image: url(images/awwwards_honorable_white_left%402x.7b00c441e72c31e806bac0da8d1ef9d8.png)
    }
}

#landing {
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory
}

#landing>section {
    scroll-snap-align: start
}

#landingHero {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

/*#landingHero .hero__background {
    background: url(../../images/Background/udbhav-25-year-bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50%
}*/

#landingHero .hero__holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 6.65rem
}

#landingHero .hero__h1 {
    margin-bottom: 2.5rem
}

#landingHero .hero__arrow {
    margin-top: 6.25rem;
    transition: transform .1s ease-in-out;
    border: none
}

#landingHero .hero__arrow:focus,
#landingHero .hero__arrow:hover {
    outline: none;
    transform: translateY(.5rem)
}

#landingHero .hero__arrow:active {
    outline: none;
    transform: translateY(1rem)
}

#landingFeatures {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

#landingFeatures p {
    text-align: left
}

#landingFeatures .feature__h3 {
    margin: .75rem 0 1.875rem
}

#landingFeatures .feature__logos {
    width: 100%;
    margin-top: 3.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
}

#landingFeatures .feature__logo {
    width: calc(25% - 15px);
    margin-bottom: 3.125rem
}

#landingFeatures .feature__logo>img {
    width: 80%;
}

.landingProjects {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center
}

@media only screen and (max-width:1199px) {
    .landingProjects .projects__row {
        align-items: center
    }
}

.landingProjects .projects__company {
    margin-right: 1.25rem
}

.landingProjects .projects__h2 {
    margin: .75rem 0 1rem
}

.landingProjects .projects__p {
    margin-bottom: 1.5rem
}

.landingProjects .projects__backed {
    margin-bottom: 3rem
}

.landingProjects .projects__images {
    position: relative
}

@media only screen and (max-width:1199px) {
    .landingProjects .projects__images {
        margin-left: 4rem;
        height: 18rem
    }
}

@media only screen and (max-width:991px) {
    .landingProjects .projects__images {
        margin-left: 8.333333%;
        height: 13.75rem
    }
}

.landingProjects .projects__link {
    text-decoration: none
}

.landingProjects .projects__image--spenmo1 {
    position: absolute;
    right: 15%;
    top: -58%;
    width: 25%;
    z-index: -5;
}

.landingProjects .projects__image--spenmo2 {
    position: absolute;
    bottom: -16%;
    left: 7%;
    width: 17%
}

.landingProjects .projects__image--spenmo3 {
    position: absolute;
    top: 26%;
    left: -14%;
    width: 30%;
}

.landingProjects .projects__image--spenmo4 {
    position: absolute;
    bottom: -2.5%;
    right: 26%;
    width: 70%;
    -webkit-transform: rotate(10deg) !important;
    -moz-transform: rotate(10deg) !important;
    -ms-transform: rotate(10deg) !important;
    -o-transform: rotate(10deg) !important;
    transform: rotate(10deg) !important;
}

.landingProjects .projects__image--spenmo5 {
    position: absolute;
    bottom: 2%;
    left: 30%;
    width: 57%;
    z-index: -4
}

.landingProjects .projects__image--tightrope1 {
    position: absolute;
    right: 3%;
    top: 2%;
    width: 4%;
    z-index: 1
}

.landingProjects .projects__image--tightrope2 {
    position: absolute;
    top: 32%;
    left: -2%;
    width: 30%
}

.landingProjects .projects__image--tightrope3 {
    position: absolute;
    bottom: -24%;
    left: 8%;
    width: 73%;
    z-index: 1;
    -webkit-transform: rotate(-20deg) !important;
    -moz-transform: rotate(-20deg) !important;
    -ms-transform: rotate(-20deg) !important;
    -o-transform: rotate(-20deg) !important;
    transform: rotate(-20deg) !important;
}

.landingProjects .projects__image--tightrope4 {
    position: absolute;
    bottom: -25%;
    left: 57%;
    width: 25%;
}

.landingProjects .projects__image--tightrope5 {
    position: absolute;
    top: -10%;
    right: 18%;
    width: 57%;
}

.landingProjects .projects__image--diab1 {
    position: absolute;
    left: 94%;
    top: 14%;
    width: 24%;
}

.landingProjects .projects__image--diab2 {
    position: absolute;
    bottom: -13%;
    right: -5%;
    width: 36%;
    z-index: 2;
}

.landingProjects .projects__image--diab3 {
    position: absolute;
    top: -5%;
    right: 7%;
    width: 61%
}

.landingProjects .projects__image--diab4 {
    position: absolute;
    bottom: -26%;
    left: 39%;
    width: 29%;
}

.landingProjects .projects__image--diab5 {
    position: absolute;
    bottom: -17%;
    left: 27%;
    width: 59%;
}

.landingProjects .projects__image--diab6 {
    position: absolute;
    bottom: -41%;
    left: 11%;
    width: 38%;
}
.landingProjects .projects__image--ps1 {
    position: absolute;
    left: 6%;
    top: -2%;
    width: 16%;
}

.landingProjects .projects__image--ps2 {
    position: absolute;
    bottom: -31%;
    right: 11%;
    width: 38%;
    z-index: 2;
}

.landingProjects .projects__image--ps3 {
    position: absolute;
    top: -5%;
    right: 7%;
    width: 61%
}

.landingProjects .projects__image--ps4 {
    position: absolute;
    bottom: -26%;
    left: 39%;
    width: 29%;
}

.landingProjects .projects__image--ps5 {
    position: absolute;
    bottom: -42%;
    left: -9%;
    width: 94%;
}

.landingProjects .projects__image--ps6 {
    position: absolute;
    bottom: -41%;
    left: 11%;
    width: 38%;
}

.landingProjects .projects__image--flash1 {
    position: absolute;
    width: 24%;
    right: 9%;
    bottom: -17%
}

.landingProjects .projects__image--flash2 {
    position: absolute;
    width: 27%;
    left: -1%;
    bottom: -16%;
}

.landingProjects .projects__image--flash3 {
    position: absolute;
    width: 97%;
    left: -14%;
    top: 3%;
    -webkit-transform: rotate(5deg) !important;
    -moz-transform: rotate(5deg) !important;
    -ms-transform: rotate(5deg) !important;
    -o-transform: rotate(5deg) !important;
    transform: rotate(5deg) !important;
}

.landingProjects .projects__image--flash4 {
    position: absolute;
    width: 13%;
    left: 12%;
    top: -32%
}

.landingProjects .projects__image--flash5 {
    position: absolute;
    width: 51%;
    top: -15%;
    right: 18%
}

.landingProjects .projects__image--flash6 {
    position: absolute;
    width: 22%;
    right: 24%;
    top: 16%;
}

#landingPackages {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

#landingPackages .packages__h2 {
    margin: .75rem 0 1rem
}

#landingPackages .packages__link {
    cursor: button;
    border: none;
    text-align: left
}

#landingPackages .packages__p {
    margin-bottom: 2.5rem
}

#landingPackages .packages__agencies {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2.5rem
}

#landingPackages .packages__agency {
    width: calc(40% - .8125rem);
    height: 100%;
    margin-right: 1rem
}

#landingFooter {
    justify-content: center
}

#landingFooter,
#projectsLanding {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center
}

#projectsLanding {
    background-color: var(--color-bgDark);
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden
}

#projectsLanding .projects__h1 {
    margin: 0 0 .625rem
}

#projectsLanding .projects__images {
    height: 61.25%;
    width: 100%;
    margin-top: 3.75rem;
    position: relative;
    display: flex;
    justify-content: center
}

#projectsLanding .projects__image--spenmo1 {
    position: absolute;
    z-index: 2;
    width: 27rem;
    height: auto;
    left: -9%
}

#projectsLanding .projects__image--spenmo2 {
    position: relative;
    z-index: 0;
    height: auto;
    width: 16.625rem;
    left: 34%
}

#projectsLanding .projects__image--spenmo3 {
    position: relative;
    z-index: 1;
    width: 15.375rem;
    right: -2%;
    top: 14%
}

#projectsLanding .projects__image--tightrope1 {
    position: absolute;
    z-index: 2;
    width: 30rem;
    height: auto;
    left: -39%
}

#projectsLanding .projects__image--tightrope2 {
    position: relative;
    z-index: 0;
    height: auto;
    width: 16.25rem;
    left: 45%
}

#projectsLanding .projects__image--tightrope3 {
    position: relative;
    z-index: 1;
    width: 7.75rem;
    right: -28%;
    top: -20%
}

#projectsLanding .projects__image--diab1 {
    position: relative;
    width: 4.375rem;
    height: auto;
    left: -11%;
    top: -11%
}

#projectsLanding .projects__image--diab2 {
    position: absolute;
    height: auto;
    width: 33.125rem;
    z-index: 2;
    left: -9%
}

#projectsLanding .projects__image--diab3 {
    position: relative;
    width: 18.75rem;
    left: 32%
}

#projectsLanding .projects__image--diab4 {
    position: relative;
    width: 10rem;
    z-index: 1;
    left: 10%;
    top: 3%
}

#projectsLanding .projects__image--flash1 {
    position: relative;
    z-index: 0;
    height: auto;
    width: 10.625rem;
    left: 5%;
    top: -9%
}


#projectsLanding .projects__image--flash2 {
    position: absolute;
    z-index: 2;
    height: auto;
    width: 41rem;
    left: -23%
}

#projectsLanding .projects__image--flash3 {
    position: relative;
    z-index: 0;
    height: auto;
    width: 14.0625rem;
    left: 11%
}

#projectsLanding .projects__image--flash4 {
    position: relative;
    z-index: 0;
    height: auto;
    width: 8.125rem;
    left: -9%;
    top: 14%
}

#projectsLanding .projects__imageHolder {
    position: relative;
    z-index: 1
}

#projectsLanding .projects__line {
    display: block;
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 2px;
    height: 75%;
    border: none;
    color: var(--color-white);
    background-color: currentColor;
    z-index: 0
}

#projectsChallenge {
    margin: 9.375rem 0
}

#projectsChallenge .challenge__h2 {
    font-weight: 600;
    margin: .625rem 0 1.875rem
}

#projectsChallenge .challenge__p {
    margin-top: 2.5rem
}

#projectsChallenge .challenge__clientInfo {
    margin: .75rem 0 1.875rem
}

#projectsChallenge .challenge__clientList {
    list-style-type: none;
    padding-left: 0;
    margin: .75rem 0 1.875rem
}

#projectsChallenge .challenge__clientList>li {
    line-height: 2rem
}

#projectsChallenge .challenge__images {
    margin: 5.625rem 5.625rem 7.5rem
}

#projectsChallenge .challenge__imageHolder {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

#projectsChallenge .challenge__image {
    width: 100%
}

#projectsChallenge .challenge__image--spenmo {
    width: 100%;
    border-radius: .5rem
}

#projectsChallenge .challenge__image--diab1 {
    width: calc(70% - 2rem);
    margin-right: 4rem
}

#projectsChallenge .challenge__image--diab2 {
    width: calc(30% - 2rem);
    margin-bottom: 2.25rem
}

#projectsChallenge .challenge__image--tightrope1 {
    width: calc(45% - 1.875rem);
    transform: translateY(-8.75rem)
}

#projectsChallenge .challenge__image--tightrope2 {
    width: calc(55% - 1.875rem)
}

#projectsChallenge .challenge__image--flash1 {
    width: calc(40% - .9375rem)
}

#projectsChallenge .challenge__image--flash2 {
    width: 100%;
    margin-bottom: 3.75rem
}

#projectsChallenge .challenge__image--flash3 {
    width: 65%
}

#projectsChallenge .challenge__imageGroup {
    width: calc(60% - .9375rem);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center
}

#projectsChallenge .challenge__imageGroup:before {
    content: "";
    position: absolute;
    width: 22%;
    padding-bottom: 22%;
    top: -10%;
    left: -11%;
    background: url(../../images/4.d914ce73deb3d31dd886769975818edb.png);
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 5
}

#projectsChallenge .challenge__blurbHolder,
#projectsChallenge .challenge__blurbHolder--noQuote {
    position: relative
}

#projectsChallenge .challenge__blurbHolder--noQuote:before,
#projectsChallenge .challenge__blurbHolder:before {
    content: "";
    background-image: url(../../images/quote.6408a6c45c5ed6672e5d3638219ab806.svg);
    position: absolute;
    top: -2.25rem;
    left: -2.25rem;
    width: 4.125rem;
    height: 2.75rem
}

#projectsChallenge .challenge__blurbHolder--noQuote:before {
    display: none
}

#projectsProcess .process__h3 {
    font-weight: 600;
    margin: .625rem 0 2.5rem
}

#projectsProcess .process__h4 {
    margin: 0 0 1.625rem
}

#projectsProcess .process__images {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 5.625rem 0
}

#projectsProcess .process__image {
    width: calc(33% - 2.25rem)
}

#projectsProcess .process__image--low {
    margin-top: 4.375rem
}

#projectsProcess .process__image--lowest {
    margin-top: 8.75rem
}

#projectsResults .results__image--spenmo1,
#projectsResults .results__image--spenmo2,
#projectsResults .results__image--spenmo3 {
    width: 90%;
    margin-bottom: 5rem
}

#projectsResults .results__image--tightrope7,
#projectsResults .results__image--tightrope8,
#projectsResults .results__image--tightrope9 {
    width: 75%;
    margin-bottom: 6.25rem
}

#projectsResults .results__image--diab1,
#projectsResults .results__image--diab2,
#projectsResults .results__image--diab3 {
    width: 90%;
    margin-bottom: 3.75rem
}

#projectsResults .results__image--diab4,
#projectsResults .results__image--diab6,
#projectsResults .results__image--diab7 {
    width: 100%;
    margin-bottom: 6.25rem
}

#projectsResults .results__image--diab5,
#projectsResults .results__image--diab8,
#projectsResults .results__image--diab9 {
    width: 80%;
    margin-bottom: 6.25rem
}

#projectsResults .results__image--flash1,
#projectsResults .results__image--flash2,
#projectsResults .results__image--flash3,
#projectsResults .results__image--flash4,
#projectsResults .results__image--flash5,
#projectsResults .results__image--flash6,
#projectsResults .results__image--flash7,
#projectsResults .results__image--flash8,
#projectsResults .results__image--flash9,
#projectsResults .results__image--spenmo4,
#projectsResults .results__image--spenmo5,
#projectsResults .results__image--spenmo6,
#projectsResults .results__image--spenmo7,
#projectsResults .results__image--spenmo8,
#projectsResults .results__image--spenmo9,
#projectsResults .results__image--tightrope1,
#projectsResults .results__image--tightrope2,
#projectsResults .results__image--tightrope3,
#projectsResults .results__image--tightrope4,
#projectsResults .results__image--tightrope5,
#projectsResults .results__image--tightrope6 {
    width: calc(33% - 1.66667rem);
    height: auto;
    margin-bottom: 3.75rem
}

#projectsResults .results__image--tightrope10,
#projectsResults .results__image--tightrope11,
#projectsResults .results__image--tightrope12,
#projectsResults .results__image--tightrope13 {
    width: calc(25% - 1.40625rem);
    height: auto;
    margin-bottom: 3.75rem
}

#projectsResults .results__h3 {
    font-weight: 600;
    margin: .625rem 0 2.5rem
}

#projectsResults .results__h4 {
    margin: 0 0 1.625rem
}

#projectsResults .results__h5 {
    margin: 0 0 2.5rem
}

#projectsResults .results__images {
    text-align: center;
    margin-top: 8.75rem;
    display: flex;
    align-items: center;
    flex-direction: column
}

#projectsResults .results__image--spenmo1,
#projectsResults .results__image--spenmo3 {
    align-self: flex-start
}

#projectsResults .results__image--spenmo2 {
    align-self: flex-end
}

#projectsResults .results__image--logo,
#projectsResults .results__image--logoFlash,
#projectsResults .results__image--logoTightrope {
    width: 5rem;
    margin: 9.375rem 0 1.25rem
}

#projectsResults .results__image--logoTightrope {
    margin-top: 6.25rem
}

#projectsResults .results__image--logoFlash {
    margin-top: 0
}

#projectsResults .results__image--spenmo5,
#projectsResults .results__image--spenmo8 {
    transform: translateY(5rem)
}

#projectsResults .results__image--spenmo10,
#projectsResults .results__image--spenmo11 {
    width: 100%;
    margin-bottom: 3.75rem
}

#projectsResults .results__image--tightrope7,
#projectsResults .results__image--tightrope9 {
    align-self: flex-end
}

#projectsResults .results__image--tightrope8 {
    align-self: flex-start
}

#projectsResults .results__image--tightrope11,
#projectsResults .results__image--tightrope13 {
    transform: translateY(6.25rem)
}

#projectsResults .results__image--diab1,
#projectsResults .results__image--diab3 {
    align-self: flex-start
}

#projectsResults .results__image--diab2 {
    align-self: flex-end
}

#projectsResults .results__image--diab3 {
    margin-bottom: 10rem
}

#projectsResults .results__image--diab7 {
    margin-top: 14rem
}

#projectsResults .results__image--flash1,
#projectsResults .results__image--flash2,
#projectsResults .results__image--flash3,
#projectsResults .results__image--flash4,
#projectsResults .results__image--flash5,
#projectsResults .results__image--flash6,
#projectsResults .results__image--flash7,
#projectsResults .results__image--flash8,
#projectsResults .results__image--flash9 {
    margin-bottom: 10rem
}

#projectsResults .results__image--flash1,
#projectsResults .results__image--flash4,
#projectsResults .results__image--flash7 {
    transform: translateY(7.5rem)
}

#projectsResults .results__image--flash2,
#projectsResults .results__image--flash5,
#projectsResults .results__image--flash8 {
    transform: translateY(3.75rem)
}

#projectsResults .results__imageGroup,
#projectsResults .results__imageGroup--spenmo,
#projectsResults .results__imageGroup--tightrope,
#projectsResults .results__imageGroup--tightropeFlat {
    display: flex;
    justify-content: space-between;
    flex-flow: wrap
}

#projectsResults .results__imageGroup--spenmo {
    margin-bottom: 18.75rem
}

#projectsResults .results__imageGroup--tightrope {
    margin-bottom: 9.375rem
}

#projectsResults .results__imageGroup--tightropeFlat {
    flex-flow: nowrap;
    margin-top: rem
}

#projectsResults .results__imageGroup--diab {
    display: flex;
    justify-content: space-between
}

#projectsResults .results__imageGroup--half {
    width: calc(50% - .9375rem)
}

#projectsNav {
    background-color: var(--color-bgDark);
    padding: 8.75rem 0 10rem;
    margin-top: 15.3125rem
}

#projectsNav .nav {
    width: calc(50% - 4.0625rem);
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 50%
}

#projectsNav .nav__holder {
    display: flex;
    justify-content: space-between
}

#projectsNav .nav.brand-tightrope {
    background-image: url(../../images/next.11bff7e046dd9261b865805e591d8b6f.png)
}

#projectsNav .nav.brand-diab {
    background-image: url(../../images/commercial-design.png)
}

#projectsNav .nav.brand-spenmo {
    background-image: url(../../images/realestate-projects.png)
}

#projectsNav .nav.brand-flash {
    background-image: url(../../images/next.87d712d905470ca197df565a8920d85c.png)
}

#projectsNav .nav__h2 {
    margin: .8125rem 0 1.125rem
}

#ourWorkHero {
    min-height: 45vh;
    display: flex;
    justify-content: center;
    align-items: center
}

#ourWorkHero .hero__h1 {
    width: 50%;
    text-align: center
}

#ourWorkWorks {
    width: 100%;
    margin-bottom: 9.375rem;
    display: flex;
    justify-content: center
}

#ourWorkWorks .work {
    text-decoration: none;
    position: relative;
    display: block
}

#ourWorkWorks .work:focus,
#ourWorkWorks .work:hover {
    outline: 0
}

#ourWorkWorks .work:focus .button,
#ourWorkWorks .work:hover .button {
    opacity: 1;
    transform: translateY(2.4rem)
}

#ourWorkWorks .work:active {
    outline: 0
}

#ourWorkWorks .work:active .button {
    color: var(--color-brandLight)
}

#ourWorkWorks .work__content {
    /*border-radius: .75rem;*/
    height: 16rem;
    display: flex;
    margin-bottom: 1.875rem;
    background-color: var(--color-brandLight);
    overflow: hidden;
    position: relative
}

@media only screen and (min-width:992px) {
    #ourWorkWorks .work__content {
        /*height: 28.75rem;*/
        margin-bottom: 3.125rem
    }
}

#ourWorkWorks .work__half,
#ourWorkWorks .work__half--right {
    width: 21%;
    float: left;
}

#ourWorkWorks .work__half {
    margin-left: 3%;
}

@media only screen and (min-width:992px) {
    #ourWorkWorks .work__half,
    #ourWorkWorks .work__half--right {
        width: 21%;
        float: left;
    }
}

#ourWorkWorks .work__half--right {
    margin: 10rem 0 0 1.875rem;
}

@media only screen and (min-width:992px) {
    #ourWorkWorks .work__half--right {
        margin-left: 3%;
    }
}

#ourWorkWorks .work__imageHolder,
#ourWorkWorks .work__imageHolder--bottom,
#ourWorkWorks .work__imageHolder--top {
    position: absolute;
    width: 100%;
    padding: 25px;
    border-radius: 0 0 0 .75rem
}

#ourWorkWorks .work__imageHolder--top {
    top: 0
}

#ourWorkWorks .work__imageHolder--bottom {
    bottom: 0
}

#ourWorkWorks .work__image {
    width: 100%
}

#ourWorkWorks .work__h4,
#ourWorkWorks .work__h4--bottom {
    padding: 1.875rem;
    margin: 0
}

#ourWorkWorks .work__h4--bottom {
    align-self: flex-end
}

#ourProcessHero {
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

#ourProcessSprints .sprints {
    margin-bottom: 8.4375rem
}

#ourProcessSprints .sprints__h1 {
    margin: .8125rem 0 1.875rem
}

#ourProcessSprints .sprints__image {
    width: 100%
}

#ourProcessSprints .steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

#ourProcessSprints .steps__step {
    width: calc(33% - 2.3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 7.5rem
}

#ourProcessSprints .steps__indicator {
    background-color: var(--color-secondary);
    padding: .5rem .75rem;
    border-radius: .5rem;
    position: absolute;
    transform: translateY(-50%)
}

#ourProcessSprints .steps__image {
    width: 100%;
    margin-bottom: 1.25rem;
    border-radius: .5rem
}

#ourProcessSprints .steps__h6,
#ourProcessSprints .steps__h6--last {
    margin: 0;
    width: 75%;
    text-align: center
}

#ourProcessSprints .steps__h6--last {
    width: 100%
}

#ourProcessProcess {
    margin: 9.375rem auto
}

#ourProcessProcess .process__h3 {
    font-weight: 600;
    margin: .625rem 0 1.875rem
}

#ourProcessProcess .process__p {
    margin-top: 2.5rem
}

#ourProcessProcess .process__h4 {
    margin: 0 0 1.625rem
}

#ourProcessPost {
    margin: 9.375rem auto
}

#ourProcessPost .post__h3 {
    font-weight: 600;
    margin: .625rem 0 1.875rem
}

#ourProcessPost .post__p {
    margin-top: 2.5rem
}

#ourProcessPost .post__h4 {
    margin: 0 0 1.625rem
}

#ourProcessPost .post__image,
#ourProcessPost .post__image--1,
#ourProcessPost .post__image--2,
#ourProcessPost .post__image--3,
#ourProcessPost .post__image--4,
#ourProcessPost .post__image--5 {
    position: absolute
}

#ourProcessPost .post__image--1 {
    width: 32%;
    left: 0;
    bottom: 0
}

#ourProcessPost .post__image--2 {
    width: 32%;
    left: 14%;
    top: 4%
}

#ourProcessPost .post__image--3 {
    width: 52%;
    left: 17%;
    top: 15%;
    z-index: 3
}

#ourProcessPost .post__image--4 {
    width: 32%;
    right: 10%;
    top: 0
}

#ourProcessPost .post__image--5 {
    width: 38%;
    right: 0;
    bottom: 10%
}

#ourProcessPost .post__imageHolder {
    position: relative;
    padding-bottom: 50%;
    margin-top: 6.25rem
}

.days {
    margin: 5.625rem 3.125rem 0
}

.days__slider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.125rem;
    position: relative
}

.days__step {
    position: relative;
    z-index: 2;
    width: 12.5rem;
    height: 100%;
    border: 0;
    cursor: pointer;
    text-align: center;
    transition: color .1s ease
}

.days__step:focus,
.days__step:hover {
    outline: 0
}

.days__indicator {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1;
    background-color: var(--color-gray);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .35);
    border-radius: .5rem
}

.days__holder {
    width: 100%;
    margin-top: 1.875rem;
    position: relative;
    display: flex
}

.days__overflow {
    overflow: hidden
}

.day {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    border: 1px solid var(--color-border)
}

.day:first-child {
    position: relative
}

.day__left {
    width: 40%;
    border-right: 1px solid var(--color-border);
    height: 100%
}

.day__left,
.day__sides {
    display: flex;
    flex-direction: column
}

.day__sides {
    padding: 2.5rem 2rem;
    flex-grow: 1;
    justify-content: center
}

.day__sides--top {
    border-bottom: 1px solid var(--color-border)
}

.day__sides--whole {
    justify-content: flex-start
}

.day__right {
    width: 60%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.day__activity {
    margin: 0 0 1rem
}

.day__list {
    list-style-type: none;
    padding-left: 0;
    margin: .75rem 0 0
}

.day__list>li {
    line-height: 1.7em;
    margin-bottom: .5rem
}

#aboutUsHero {
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center
}

#aboutUsTeam .belief {
    margin-bottom: 7.75rem;
}

#aboutUsTeam .team__h2 {
    margin: 1.25rem 0 0
}

#aboutUsTeam .images {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5.625rem
}

#aboutUsTeam .images__image--1 {
    width: calc(100% - 1.25rem);
    border-radius: .5rem
}

#aboutUsTeam .images__image--2 {
    width: calc(28% - 1.25rem);
    margin-top: 9.375rem;
    border-radius: .5rem
}

#aboutUsTeam .images__image--3 {
    width: calc(20% - 1.25rem);
    margin-top: 4.375rem;
    border-radius: .5rem
}

#aboutUsSkills {
    margin: 5.5625rem auto 8.75rem
}

#aboutUsSkills .skills__list {
    list-style-type: none;
    padding-left: 0;
    margin: .75rem 0 1.875rem
}

#aboutUsSkills .skills__list>li {
    line-height: 1.7em;
    margin-bottom: .5rem
}

#aboutUsCrew {
    margin-bottom: 8.75rem
}

#aboutUsCrew .crew {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column
}

#aboutUsCrew .crew__h2 {
    margin: 1.25rem 0 3.125rem
}

#aboutUsCrew .crew__crew {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1.875rem
}

#aboutUsCrew .crew__indi {
    width: 100%;
    display: flex;
    align-items: flex-center;
    justify-content: flex-start;
    flex-direction: column
}

@media only screen and (min-width:992px) {
    #aboutUsCrew .crew__indi {
        align-items: center
    }
}

#aboutUsCrew .crew__image {
    width: 100%;
    -webkit-border-radius: 7%;
    -moz-border-radius: 7%;
    border-radius: 7%;
}

#aboutUsCrew .crew__h6 {
    margin: 1rem 0 0
}

.overlay__pageNumber, .overlay__hireText{
    color: #ffd201 !important;
}

.jQcounter {
    font-size: 55px;
    color: #ffffff;
}

.jQcounter-Box {
    float: left;
    width: 33%;
    text-align: center;
}

.jQcounter-Content {
    color: #7e7e86;
    font-weight: bold;
    font-size: 30px;
    margin-top: 0 !important;
}

/*Testimonial Section CSS Starts*/

.testimonialHead {
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
}

.testimonial{
    padding: 35px 50px;
    margin: 0 20px 30px;
    border-radius: 0 70px 0 70px;
    border: 2px solid #dcaf0b;
    text-align: center;
    height: 420px;
}
.testimonial .pic{
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
    overflow: hidden;
}
.testimonial .pic img{
    width: 100%;
    height: auto;
}
.testimonial .title{
    display: block;
    margin: 0 0 7px 0;
    font-size: 20px;
    font-weight: 600;
    color: #dcaf0b;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.testimonial .post{
    display: block;
    font-size: 15px;
    color: #fff;
    text-transform: capitalize;
    margin-bottom: 20px;
}
.testimonial .description{
    font-size: 16px;
    color: #fff;
    line-height: 30px;
}
.owl-theme .owl-controls{ margin-top: 0; }
.owl-theme .owl-controls .owl-page span{
    background: #fff;
    opacity: 0.8;
    transition: all 0.3s ease 0s;
}
.owl-theme .owl-controls .owl-page.active span{ background: #ffc33c; }

/*Testimonial Section CSS Ends*/

.PVAbout {
    text-align: center;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    padding: 1%;
    color: #d5aa0f;
    font-weight: bold;
    text-transform: uppercase;
    background: -webkit-linear-gradient(0deg, #ffd201, #ffffff);
    background: -o-gradient(transparent, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffd201;
}

@media only screen and (max-width: 768px) {
    body {
        display: none;
    }
}


/* Slider */
.slick-slide {
    margin: 0px 20px;
}
.slick-slide img {
    width: 80%;
    margin-bottom: 20%;
}
.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}
.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.clientHead {
    color: #ffd201;
    text-align: center;
    text-transform: uppercase;
    margin: 5%;
}

.box-20 {
    width: 20px;
    height: 20px;
    /*border-radius: 7px 0px 7px 7px;*/
    position: relative;
    display: inline-block;
    margin-right: 5px;
}
img.results__image--spenmo1 {
    /*border-radius: 50px 0 50px 0;*/
    padding: 10px;
}

img.results__image--spenmo3 {
    border-radius: 30px;
    padding: 10px;
    width: 98%;
    outline: 2px solid var(--color-black);
    outline-offset: -40px;
}
img.results__image--spenmo4 {
    border-radius: 50px 0 50px 0;
    padding: 10px;
    width: 48%;
    display: inline-block;
}

.PortfolioImageSize {
    width: 87.75%;
}